/* ==========================================================================
   «Bloq» siyahı səhifəsi - /{dil}/bloq
   --------------------------------------------------------------------------
   Yalnız bu səhifəyə aiddir; `blog/index.blade.php`-dən `@push('styles')` ilə
   yüklənir. Qlobal `style.css`-ə toxunulmayıb.

   Siniflər `blog-` prefiksi ilədir - köhnə `section.blog` / `.blog_item`
   qaydaları ilə toqquşmur (köhnə blade `index.backup.blade.php`-dədir),
   digər səhifələrin (`adv-`, `wn-`, `references-`) stillərinə təsir etmir.

   Rənglər `style.css`-dəki `:root` dəyişənlərindəndir: --qr-blue, --qr-green.

   Motion dili: hero orbitindəki nöqtələrin yavaş hərəkəti + kartların
   bir dəfəlik fade-up-ı. Scroll timeline və parallax YOXDUR.
   ========================================================================== */

.blog-page {
    --blog-text: #020202;
    --blog-muted: #5B5B5B;
    --blog-border: #E4E4E4;
    --blog-line: #EFEFEF;
    --blog-surface: #F7F7F7;
    --blog-blue: var(--qr-blue, #06A4ED);
    --blog-green: var(--qr-green, #A9F504);

    color: var(--blog-text);
    overflow-x: clip;
}

/* ── Ortaq ────────────────────────────────────────────────────────────── */

.blog-page .blog-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    transition: transform .25s ease;
}

.blog-page .blog-arrow svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Abunə forması - saytın mövcud yaşıl düymə dili */
.blog-page .blog-subscribe {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 430px;
    padding: 6px 6px 6px 20px;
    border: 1px solid var(--blog-border);
    border-radius: 40px;
    background: #fff;
}

.blog-page .blog-subscribe input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--blog-text);
    font: 400 14px/24px "Poppins", sans-serif;
}

.blog-page .blog-subscribe input::placeholder { color: #9A9A9A; }

.blog-page .blog-subscribe button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding: 10px 20px;
    border: 0;
    border-radius: 36px;
    background: var(--blog-green);
    color: var(--blog-text);
    font: 500 14px/22px "Poppins", sans-serif;
    cursor: pointer;
    transition: opacity .25s ease;
}

.blog-page .blog-subscribe button:hover { opacity: .88; }

.blog-page .blog-subscribe .icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    transition: transform .25s ease;
}

.blog-page .blog-subscribe .icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.blog-page .blog-subscribe button:hover .icon { transform: translateX(4px); }

/* Sidebar variantı: input və düymə alt-alta */
.blog-page .blog-subscribe--stacked {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    max-width: none;
    padding: 8px;
    border-radius: 18px;
}

.blog-page .blog-subscribe--stacked input { padding: 8px 12px; }
.blog-page .blog-subscribe--stacked button { justify-content: center; }

/* ── Hero ─────────────────────────────────────────────────────────────── */

/* Breadcrumb bu bölmənin İÇİNDƏDİR - referansda ikisi eyni zolaqdır */
.blog-hero {
    position: relative;
    padding: 0 0 28px;
    background: #FBFCFD;
    border-bottom: 1px solid var(--blog-line);
    overflow: hidden;
}

.blog-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    align-items: center;
    gap: 32px;
}

.blog-hero__title {
    margin: 0 0 12px 0;
    max-width: 640px;
    color: var(--blog-text);
    font: 500 36px/56px "Poppins", sans-serif;
}

.blog-hero__title span { color: var(--blog-blue); }

.blog-hero__lead {
    margin: 0 0 26px 0;
    max-width: 460px;
    color: var(--blog-muted);
    font: 400 16px/28px "Poppins", sans-serif;
}

.blog-hero__art { position: relative; }

.blog-hero__art .blog-orbit { display: block; width: 100%; height: auto; }

/* Orbit xətləri və gəzən nöqtələr */
.blog-orbit__line { fill: none; stroke: #D8E9F6; stroke-width: 1.4; stroke-dasharray: 5 7; }
.blog-orbit__line--soft { stroke: #E4F0F9; }

.blog-orbit__dot--blue { fill: var(--blog-blue); }
.blog-orbit__dot--green { fill: var(--blog-green); }
.blog-orbit__dot--small { fill: rgba(6, 164, 237, .55); }

/* İllüstrasiyanın blokları */
.blog-art__card { fill: #fff; stroke: #EAEAEA; stroke-width: 1.4; filter: drop-shadow(0 8px 20px rgba(2, 2, 2, .05)); }
.blog-art__line { fill: #DDE3E8; }
.blog-art__line--soft { fill: #EDF1F4; }
.blog-art__accent { fill: var(--blog-blue); }

.blog-art__bar { fill: #DCEDF9; }
.blog-art__bar--accent { fill: var(--blog-blue); }
.blog-art__bar--green { fill: var(--blog-green); }

.blog-art__tile { fill: var(--blog-blue); filter: drop-shadow(0 10px 22px rgba(6, 164, 237, .28)); }
.blog-art__tile-mark { fill: #fff; }
.blog-art__tile-mark--soft { fill: rgba(255, 255, 255, .5); }

.blog-art__ring-bg { fill: #fff; stroke: #EDF1F4; stroke-width: 1.4; }
.blog-art__ring-blue { fill: none; stroke: var(--blog-blue); stroke-width: 18; stroke-linecap: round; }
.blog-art__ring-green { fill: none; stroke: var(--blog-green); stroke-width: 18; stroke-linecap: round; }
.blog-art__ring-hole { fill: #fff; }

/* Çox zəif üzmə - bloklar fırlanmır */
.blog-float { animation: blog-float 7s ease-in-out infinite; }
.blog-float--b { animation-duration: 8.5s; animation-delay: -2.2s; }
.blog-float--c { animation-duration: 6.5s; animation-delay: -1.2s; }
.blog-float--d { animation-duration: 9s; animation-delay: -4s; }

@keyframes blog-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

/* ── Filtr sətri ──────────────────────────────────────────────────────── */

.blog-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 32px 0 28px;
}

.blog-toolbar__filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }

.blog-chip {
    flex: 0 0 auto;
    padding: 10px 20px;
    border: 1px solid var(--blog-border);
    border-radius: 36px;
    background: #fff;
    color: var(--blog-muted);
    font: 400 14px/22px "Poppins", sans-serif;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .25s ease, color .25s ease, background .25s ease;
}

.blog-chip:hover { border-color: #C9D3DA; color: var(--blog-text); }

.blog-chip.is-active {
    border-color: var(--blog-blue);
    background: var(--blog-blue);
    color: #fff;
}

.blog-search {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    width: 260px;
    padding: 9px 18px;
    border: 1px solid var(--blog-border);
    border-radius: 36px;
    background: #fff;
}

.blog-search__icon { display: flex; flex: 0 0 18px; }

.blog-search__icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #9A9A9A;
    stroke-width: 1.6;
    stroke-linecap: round;
}

.blog-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--blog-text);
    font: 400 14px/24px "Poppins", sans-serif;
}

.blog-search input::placeholder { color: #9A9A9A; }

/* ── Əsas sahə ────────────────────────────────────────────────────────── */

.blog-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: start;
    gap: 28px;
    padding-bottom: 90px;
}

.blog-main__col { min-width: 0; }

/* ── Kartlar ──────────────────────────────────────────────────────────── */

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.blog-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--blog-border);
    border-radius: 20px;
    background: #fff;
    overflow: hidden;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), border-color .3s ease, box-shadow .3s ease;
}

.blog-card:hover {
    transform: translateY(-3px);
    border-color: #D2DBE2;
    box-shadow: 0 12px 26px rgba(2, 2, 2, .06);
}

.blog-card__media {
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--blog-surface);
    overflow: hidden;
}

.blog-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

.blog-card:hover .blog-card__media img { transform: scale(1.02); }

.blog-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 22px 22px;
}

.blog-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.blog-card__date { color: var(--blog-muted); font: 400 13px/20px "Poppins", sans-serif; }

.blog-badge {
    padding: 4px 12px;
    border-radius: 30px;
    background: rgba(6, 164, 237, .10);
    color: #0388C6;
    font: 400 12px/18px "Poppins", sans-serif;
    white-space: nowrap;
}

.blog-badge--green { background: rgba(169, 245, 4, .22); color: #5B7A04; }

.blog-card__title { margin: 0; font: 500 17px/28px "Poppins", sans-serif; }

.blog-card__title a {
    color: var(--blog-text);
    text-decoration: none;
    transition: color .25s ease;
}

.blog-card__title a:hover { color: var(--blog-blue); }

.blog-card__text {
    margin: 0;
    color: var(--blog-muted);
    font: 400 14px/24px "Poppins", sans-serif;

    /* Maksimum 3 sətir - kartların hündürlüyü bir-birinə yaxın qalsın */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    color: var(--blog-blue);
    font: 500 14px/22px "Poppins", sans-serif;
    text-decoration: none;
}

.blog-card:hover .blog-card__link .blog-arrow,
.blog-card__link:hover .blog-arrow { transform: translateX(5px); }

/* ── Sidebar ──────────────────────────────────────────────────────────── */

.blog-sidebar { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.blog-panel {
    padding: 22px;
    border: 1px solid var(--blog-border);
    border-radius: 20px;
    background: #fff;
}

.blog-panel__title {
    margin: 0 0 16px 0;
    color: var(--blog-text);
    font: 500 17px/26px "Poppins", sans-serif;
}

.blog-popular { display: flex; flex-direction: column; }

.blog-popular__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--blog-line);
    text-decoration: none;
}

.blog-popular__item:first-child { padding-top: 0; }
.blog-popular__item:last-child { padding-bottom: 0; border-bottom: 0; }

.blog-popular__thumb {
    display: block;
    flex: 0 0 62px;
    width: 62px;
    height: 62px;
    border-radius: 12px;
    background: var(--blog-surface);
    overflow: hidden;
}

.blog-popular__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.blog-popular__item:hover .blog-popular__thumb img { transform: scale(1.05); }

.blog-popular__body { display: block; min-width: 0; }

.blog-popular__title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 4px 0;
    color: var(--blog-text);
    font: 400 13px/20px "Poppins", sans-serif;
    transition: color .25s ease;
}

.blog-popular__item:hover .blog-popular__title { color: var(--blog-blue); }

.blog-popular__date { display: block; color: var(--blog-muted); font: 400 12px/18px "Poppins", sans-serif; }

.blog-panel--cta {
    text-align: center;
    background:
        radial-gradient(70% 60% at 50% 0%, rgba(6, 164, 237, .10), transparent 70%),
        radial-gradient(70% 60% at 50% 100%, rgba(169, 245, 4, .14), transparent 70%),
        #fff;
}

.blog-panel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: 0 0 14px 0;
    border-radius: 50%;
    background: var(--blog-blue);
}

.blog-panel__icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.blog-panel__heading {
    margin: 0 0 8px 0;
    color: var(--blog-text);
    font: 500 16px/26px "Poppins", sans-serif;
}

.blog-panel__note {
    margin: 0 0 16px 0;
    color: var(--blog-muted);
    font: 400 13px/22px "Poppins", sans-serif;
}

/* ── Səhifələmə ───────────────────────────────────────────────────────── */

.blog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 36px 0 0;
}

.blog-pagination__btn,
.blog-pagination__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--blog-border);
    border-radius: 12px;
    background: #fff;
    color: var(--blog-text);
    font: 500 14px/22px "Poppins", sans-serif;
    text-decoration: none;
    transition: border-color .25s ease, background .25s ease, color .25s ease;
}

.blog-pagination__btn { border-radius: 50%; padding: 0; }

.blog-pagination__btn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.blog-pagination__btn:hover,
.blog-pagination__page:hover { border-color: var(--blog-text); }

.blog-pagination__btn.is-disabled {
    opacity: .4;
    pointer-events: none;
}

.blog-pagination__page.is-active {
    border-color: var(--blog-green);
    background: var(--blog-green);
    color: var(--blog-text);
}

.blog-pagination__gap { color: var(--blog-muted); padding: 0 4px; }

/* ── Reveal ───────────────────────────────────────────────────────────── */

.blog-page [data-blog-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity .55s ease var(--blog-delay, 0ms),
        transform .55s cubic-bezier(.22, .61, .36, 1) var(--blog-delay, 0ms);
}

.blog-page [data-blog-reveal].is-visible { opacity: 1; transform: none; }

/* ── Responsive ───────────────────────────────────────────────────────── */

@media only screen and (max-width: 1399.98px) {
    .blog-hero__title { font-size: 34px; line-height: 52px; }
}

@media only screen and (max-width: 1199.98px) {
    .blog-hero__title { font-size: 30px; line-height: 46px; }
    .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .blog-main { grid-template-columns: minmax(0, 1fr) 270px; gap: 22px; }
    .blog-search { width: 210px; }
}

@media only screen and (max-width: 991.98px) {
    .blog-hero { padding-bottom: 24px; }
    .blog-hero__title { max-width: none; }
    .blog-hero__lead { max-width: none; }

    /* Bir sütun: mətn + abunə, sonra illüstrasiya */
    .blog-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .blog-hero__art { max-width: 480px; margin-inline: auto; }

    .blog-toolbar { flex-wrap: wrap; gap: 14px; }
    .blog-search { width: 100%; }

    /* Sidebar məqalələrin ALTINA düşür */
    .blog-main { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-bottom: 64px; }
    .blog-sidebar { flex-direction: row; flex-wrap: wrap; }
    .blog-sidebar .blog-panel { flex: 1 1 300px; }
}

@media only screen and (max-width: 767.98px) {
    .blog-grid { grid-template-columns: minmax(0, 1fr); }
    .blog-sidebar { flex-direction: column; }
}

@media only screen and (max-width: 575.98px) {
    .blog-hero__title { font-size: 25px; line-height: 38px; }
    .blog-hero__lead { font-size: 15px; line-height: 26px; }

    .blog-page .blog-subscribe { flex-direction: column; align-items: stretch; gap: 10px; padding: 8px; border-radius: 18px; max-width: none; }
    .blog-page .blog-subscribe input { padding: 8px 12px; }
    .blog-page .blog-subscribe button { justify-content: center; }

    /* Nişanlar üfüqi sürüşür - sətir qırılmır, ekran daşmır */
    .blog-toolbar__filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .blog-toolbar__filters::-webkit-scrollbar { display: none; }

    .blog-toolbar { margin: 24px 0 22px; }
    .blog-pagination { gap: 6px; }
    .blog-pagination__btn,
    .blog-pagination__page { min-width: 38px; height: 38px; }
}

/* Hərəkət azaldılmasını istəyən istifadəçi: orbit nöqtələri (SMIL) `blog.js`
   ilə dayandırılır, CSS animasiyaları isə burada söndürülür. */
@media (prefers-reduced-motion: reduce) {
    .blog-page [data-blog-reveal] { opacity: 1; transform: none; transition: none; }
    .blog-float { animation: none; }
    .blog-card { transition: none; }
    .blog-card:hover { transform: none; }
    .blog-card__media img,
    .blog-popular__thumb img { transition: none; }
    .blog-card:hover .blog-card__media img { transform: none; }
    .blog-page .blog-arrow { transition: none; }
}

/* ── Backend qoşulandan sonra əlavə olunan hallar ─────────────────────────
   Görünüş DƏYİŞMİR - bunlar yeni HTML elementlərinin (link nişan, submit
   düyməsi) brauzer default-larını sıfırlayır və yeni vəziyyətləri örtür. */

/* Filtr nişanı artıq <button> deyil, real kateqoriya linkidir */
a.blog-chip {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* Axtarış ikonu formanın submit düyməsidir */
button.blog-search__icon {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

/* Kartdakı nişan kateqoriya səhifəsinə keçiddir */
a.blog-badge {
    display: inline-block;
    text-decoration: none;
    transition: opacity .25s ease;
}

a.blog-badge:hover { opacity: .78; }

/* Sidebar paneldən söndürülübsə kartlar bütün eni tutur */
.blog-main.blog-main--wide { grid-template-columns: minmax(0, 1fr); }

/* Axtarış nəticə vermədikdə */
.blog-grid--empty { display: block; }

.blog-empty {
    margin: 0;
    padding: 46px 24px;
    border: 1px dashed var(--blog-border);
    border-radius: 20px;
    background: #fff;
    color: var(--blog-muted);
    font: 400 15px/26px "Poppins", sans-serif;
    text-align: center;
}