/* =========================
   HEADER
========================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    width: 100%;
    max-width: 1320px;

    margin: 0 auto 34px;
    padding: 0 4px;

    isolation: isolate;
}

.site-header::before {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;

    width: 100vw;

    transform: translateX(-50%);
    z-index: -1;

    background: transparent;

    transition:
        background-color .22s ease,
        backdrop-filter .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.site-header.is-scrolled::before {
    top: 0;
    bottom: 0;
    background: rgba(255, 255, 255, .18);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, .07);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .035);
}


/* =========================
   LOGO
========================= */

.site-logo {
    justify-self: start;

    display: flex;
    align-items: center;

    color: #302D55;

    font-size: 28px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .09em;

    text-decoration: none;
}

.site-logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 180px;
    max-height: 36px;
    object-fit: contain;
}


/* =========================
   NAVIGATION
========================= */

.site-nav {
    position: relative;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 4px;

    border-radius: 16px;
}

.nav-item,
.nav-dropdown__trigger {
    position: relative;
    z-index: 2;
}

.site-nav>a,
.nav-dropdown__trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    height: 36px;
    padding: 0 13px;

    border: 0;
    border-radius: 12px;

    background: transparent;

    color: #302D55;

    font: inherit;
    font-size: 14px;
    line-height: 1;
    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

    transition: color .18s ease;
}


/* =========================
   GLASS HOVER PILL
========================= */

.nav-hover-pill {
    position: absolute;
    top: 4px;
    left: 0;

    height: 36px;
    width: 0;

    border: .5px solid rgba(48, 45, 85, .38);
    border-radius: 12px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .34),
            rgba(255, 255, 255, .14)
        );

    box-shadow:
        0 10px 28px rgba(48, 45, 85, .10),
        0 2px 6px rgba(48, 45, 85, .05),
        inset 0 1px 0 rgba(255, 255, 255, .72),
        inset 0 -1px 0 rgba(48, 45, 85, .07);

    backdrop-filter:
        blur(20px) saturate(175%);

    -webkit-backdrop-filter:
        blur(20px) saturate(175%);

    opacity: 0;

    pointer-events: none;

    transform: translateX(0);

    transition:
        transform .30s cubic-bezier(.22, .8, .22, 1),
        width .30s cubic-bezier(.22, .8, .22, 1),
        opacity .16s ease;
}

.site-nav.is-pill-visible .nav-hover-pill {
    opacity: 1;
}


/* =========================
   DROPDOWN
========================= */

.nav-dropdown {
    position: relative;
}

.nav-dropdown__trigger>svg {
    width: 13px;
    height: 13px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    opacity: .72;

    transition: transform .2s ease;
}

.nav-dropdown.is-open .nav-dropdown__trigger>svg {
    transform: rotate(180deg);
}


/* =========================
   DROPDOWN PANEL
========================= */

.nav-dropdown__menu {
    position: absolute;

    top: calc(100% + 12px);
    left: 50%;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 6px;

    width: 360px;
    padding: 12px;

    border:
        1px solid rgba(255, 255, 255, .80);

    border-radius: 18px;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .62),
            rgba(246, 241, 233, .48));

    box-shadow:
        0 24px 55px rgba(48, 45, 85, .14),
        0 8px 18px rgba(48, 45, 85, .06),
        inset 0 1px 0 rgba(255, 255, 255, .98);

    backdrop-filter:
        blur(28px) saturate(150%);

    -webkit-backdrop-filter:
        blur(28px) saturate(150%);

    opacity: 0;
    visibility: hidden;

    transform:
        translateX(-50%) translateY(8px) scale(.985);

    transform-origin: top center;

    transition:
        opacity .18s ease,
        visibility .18s ease,
        transform .22s cubic-bezier(.22, .8, .22, 1);
}

.nav-dropdown.is-open .nav-dropdown__menu {
    opacity: 1;
    visibility: visible;

    transform:
        translateX(-50%) translateY(0) scale(1);
}


/* =========================
   DROPDOWN ITEMS
========================= */

.nav-dropdown__menu button,
.nav-dropdown__menu a {
    display: flex;
    align-items: center;
    gap: 12px;

    min-height: 48px;
    padding: 8px 10px;

    border: 0;
    border-radius: 11px;

    background: transparent;

    color: #302D55;

    font: inherit;
    font-size: 13px;
    font-weight: 650;

    text-align: left;

    cursor: pointer;

    transition:
        background .16s ease,
        transform .16s ease;
}

.nav-dropdown__menu button:hover,
.nav-dropdown__menu a:hover {
    background: rgba(255, 255, 255, .42);
    transform: translateY(-1px);
}


/* =========================
   DROPDOWN ICONS
========================= */

.nav-dropdown__icon {
    flex: 0 0 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 26px;
    height: 26px;

    color: #302D55;

    font-size: 17px;

    background: transparent;
    border: 0;
    box-shadow: none;

    transition:
        color .18s ease,
        transform .18s ease;
}

.nav-dropdown__menu button:hover .nav-dropdown__icon,
.nav-dropdown__menu a:hover .nav-dropdown__icon {
    color: #F43676;
    transform: scale(1.08);
}


/* =========================
   HEADER ACTIONS
========================= */

.site-actions {
    justify-self: end;

    display: flex;
    align-items: center;
    gap: 10px;
}

.header-button {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    padding: 0;

    border:
        1px solid rgba(48, 45, 85, .10);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .62);

    color: #302D55;

    cursor: pointer;

    box-shadow:
        0 4px 12px rgba(50, 50, 93, .08),
        inset 0 1px 0 rgba(255, 255, 255, .85);

    backdrop-filter:
        blur(14px) saturate(135%);

    -webkit-backdrop-filter:
        blur(14px) saturate(135%);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.header-button:hover {
    transform: translateY(-2px);

    background:
        rgba(255, 255, 255, .82);

    box-shadow:
        0 8px 18px rgba(50, 50, 93, .12),
        inset 0 1px 0 rgba(255, 255, 255, .95);
}

.header-button svg {
    width: 17px;
    height: 17px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================
   SEARCH
========================= */

.search-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-search-input {
    width: 0;
    height: 38px;

    padding: 0;
    opacity: 0;

    border:
        1px solid rgba(48, 45, 85, .10);

    border-radius: 19px;

    outline: none;

    background:
        rgba(255, 255, 255, .68);

    color: #302D55;

    font: inherit;
    font-size: 13px;

    box-shadow:
        0 5px 16px rgba(50, 50, 93, .08),
        inset 0 1px 0 rgba(255, 255, 255, .85);

    backdrop-filter:
        blur(16px) saturate(135%);

    -webkit-backdrop-filter:
        blur(16px) saturate(135%);

    pointer-events: none;

    transition:
        width .28s ease,
        padding .28s ease,
        opacity .18s ease,
        box-shadow .2s ease;
}

.search-control.is-open .header-search-input {
    width: 190px;
    padding: 0 15px;

    opacity: 1;

    pointer-events: auto;
}

.header-search-input::placeholder {
    color:
        rgba(48, 45, 85, .48);
}

.header-search-input:focus {
    box-shadow:
        0 0 0 3px rgba(108, 124, 255, .08),
        0 6px 18px rgba(50, 50, 93, .10);
}


/* =========================
   TABLET
========================= */

@media (max-width: 800px) {

    .site-header {
        grid-template-columns: 1fr auto;
        margin-bottom: 28px;
    }

    .site-nav {
        display: none;
    }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 520px) {

    .site-logo {
        font-size: 23px;
    }

    .site-logo img {
        max-width: 150px;
        max-height: 30px;
    }

    .header-button {
        width: 36px;
        height: 36px;
    }

    .search-control.is-open .header-search-input {
        width: 145px;
    }

}

.site-header.is-scrolled {
    min-height: 68px;
}



.site-header.is-scrolled .site-logo,
.site-header.is-scrolled .site-nav,
.site-header.is-scrolled .site-actions {
    align-self: center;
}


/* DROPDOWN MOVING GLASS PILL */

.nav-dropdown__menu {
    --drop-pill-x: 0px;
    --drop-pill-y: 0px;
    --drop-pill-w: 0px;
    --drop-pill-h: 0px;
}

.nav-dropdown__menu::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: var(--drop-pill-w);
    height: var(--drop-pill-h);

    border: .5px solid rgba(48, 45, 85, .42);
    border-radius: 11px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .34),
            rgba(255, 255, 255, .14)
        );

    box-shadow:
        0 10px 28px rgba(48, 45, 85, .10),
        0 2px 6px rgba(48, 45, 85, .05),
        inset 0 1px 0 rgba(255, 255, 255, .72),
        inset 0 -1px 0 rgba(48, 45, 85, .07);

    backdrop-filter:
        blur(20px) saturate(175%);

    -webkit-backdrop-filter:
        blur(20px) saturate(175%);

    opacity: 0;

    pointer-events: none;

    transform:
        translate(
            var(--drop-pill-x),
            var(--drop-pill-y)
        );

    transition:
        transform .30s cubic-bezier(.22, .8, .22, 1),
        width .30s cubic-bezier(.22, .8, .22, 1),
        height .30s cubic-bezier(.22, .8, .22, 1),
        opacity .16s ease;
}

.nav-dropdown__menu.is-pill-visible::before {
    opacity: 1;
}

.nav-dropdown__menu button,
.nav-dropdown__menu a {
    position: relative;
    z-index: 1;
}

.nav-dropdown__menu button:hover,
.nav-dropdown__menu a:hover {
    background: transparent;
    transform: none;
}

/* DROPDOWN PILL — COMPACT */

.nav-dropdown__menu::before {
    width: var(--drop-pill-w);
    height: var(--drop-pill-h);

    border: .5px solid rgba(48, 45, 85, .42);
    border-radius: 11px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .34),
            rgba(255, 255, 255, .14)
        );

    box-shadow:
        0 7px 18px rgba(48, 45, 85, .09),
        inset 0 1px 0 rgba(255, 255, 255, .65);

    backdrop-filter: blur(18px) saturate(175%);
    -webkit-backdrop-filter: blur(18px) saturate(175%);
}

.nav-dropdown__menu button,
.nav-dropdown__menu a {
    width: fit-content;
    min-width: 0;
    min-height: 38px;
    padding: 6px 12px 6px 9px;
}

/* İkon hover — pembe yerine yumuşak mavi/lacivert */

.nav-dropdown__menu button:hover .nav-dropdown__icon,
.nav-dropdown__menu a:hover .nav-dropdown__icon {
    color: #5367A6;
    transform: scale(1.06);
}

/* =========================================================
   TWO ROW HEADER — LIGHT BLUE GLASS
   ========================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 78px 48px;

    width: 100%;
    max-width: 1320px;

    margin: 0 auto 34px;
    padding: 0 4px;

    isolation: isolate;
}

/* Eski tek-parça scroll katmanı kullanılmıyor. */
.site-header::before,
.site-header.is-scrolled::before {
    display: none;
}

/* ÜST KAT: çok açık mavi cam — viewport boyunca kesintisiz */
.site-header::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    z-index: -2;

    width: 100vw;
    height: 78px;

    transform: translateX(-50%);

    background: rgba(235, 243, 255, .22);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);

    border: 0;
    box-shadow: none;
    pointer-events: none;
}

/* Logo üst solda ve daha büyük */
.site-header .site-logo {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: center;

    font-size: 34px;
}

.site-header .site-logo img {
    max-width: 300px;
    max-height: 72px;
}

/* Araçlar üst sağda */
.site-header .site-actions {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
}

/* ALT KAT: aynı mavi camın yaklaşık 1.5x belirgin hali */
.site-header__menu-row {
    position: relative;
    z-index: 1;

    grid-column: 1 / -1;
    grid-row: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
}

.site-header__menu-row::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 50%;
    z-index: -1;

    width: 100vw;

    transform: translateX(-50%);

    background: rgba(235, 243, 255, .33);
    backdrop-filter: blur(22px) saturate(135%);
    -webkit-backdrop-filter: blur(22px) saturate(135%);

    border: 0;
    box-shadow: none;
    pointer-events: none;
}

/* Menü ikinci satırda; kendi mevcut hover/dropdown sistemi korunur */
.site-header .site-nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px;
    border-radius: 16px;
}

/* Scroll'da renk/yoğunluk DEĞİŞMEZ */
.site-header.is-scrolled {
    min-height: 0;
}

.site-header.is-scrolled::after {
    background: rgba(235, 243, 255, .22);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
}

.site-header.is-scrolled .site-header__menu-row::before {
    background: rgba(235, 243, 255, .33);
    backdrop-filter: blur(22px) saturate(135%);
    -webkit-backdrop-filter: blur(22px) saturate(135%);
}

.site-header.is-scrolled .site-logo,
.site-header.is-scrolled .site-nav,
.site-header.is-scrolled .site-actions {
    align-self: center;
}

/* Dropdown ikinci satırdan aşağı açılır */
.site-header .nav-dropdown__menu {
    top: calc(100% + 10px);
}

/* Tablet */
@media (max-width: 800px) {
    .site-header {
        grid-template-columns: 1fr auto;
        grid-template-rows: 70px 44px;
        margin-bottom: 28px;
        padding: 0 20px;
    }

    .site-header::after {
        height: 70px;
    }

    .site-header__menu-row {
        overflow-x: auto;
        justify-content: flex-start;
        scrollbar-width: none;
    }

    .site-header__menu-row::-webkit-scrollbar {
        display: none;
    }

    .site-header .site-nav {
        display: flex;
        width: max-content;
        min-width: max-content;
        margin: 0 auto;
    }
}

/* Mobil */
@media (max-width: 520px) {
    .site-header {
        grid-template-rows: 66px 42px;
        padding: 0 14px;
    }

    .site-header::after {
        height: 66px;
    }

    .site-header .site-logo {
        font-size: 27px;
    }

    .site-header .site-logo img {
        max-width: 190px;
        max-height: 46px;
    }

    .site-header .site-actions {
        gap: 7px;
    }

    .site-header .header-button {
        width: 34px;
        height: 34px;
    }

    .site-header .search-control.is-open .header-search-input {
        width: 128px;
    }
}

/* =========================================================
   HEADER POSITION / SEAM FIX
   ========================================================= */

/* Üst cam sayfanın fiziksel en üstüne kadar taşsın. */
.site-header::after {
    top: -40px;
    height: 118px;
}

/* İki cam katmanı arasında 1px dikiş oluşmasın. */
.site-header__menu-row::before {
    top: -2px;
    bottom: -1px;
}

/* Menü merkezde değil: içerik alanının sağ tarafında. */
.site-header__menu-row {
    justify-content: flex-end;
}

.site-header .site-nav {
    justify-content: flex-end;
    margin: 0;
}

/* Scroll halinde de aynı geometri. */
.site-header.is-scrolled::after {
    top: -40px;
    height: 118px;
}

@media (max-width: 800px) {
    .site-header::after,
    .site-header.is-scrolled::after {
        top: -40px;
        height: 110px;
    }

    /*
     * Menü yatay kaydırılabilir. flex-end taşan öğeleri sola,
     * kaydırılamayan alana iter; bunun yerine sağa yaslamayı
     * margin-left: auto ile yap. Menü sığmazsa soldan başlar.
     */
    .site-header__menu-row {
        justify-content: flex-start;
    }

    .site-header .site-nav {
        margin: 0 0 0 auto;
    }
}

@media (max-width: 520px) {
    .site-header::after,
    .site-header.is-scrolled::after {
        height: 106px;
    }
}

/* =========================================================
   NORMAL VIEW: CLEAN / SCROLL VIEW: GLASS
   ========================================================= */

/* İlk açılışta cam yok. Boyutlar ve yerleşim aynen korunur. */
.site-header:not(.is-scrolled)::after {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

.site-header:not(.is-scrolled) .site-header__menu-row::before {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

/* Header'ın bittiği yerde belli belirsiz tek çizgi. */
.site-header:not(.is-scrolled) .site-header__menu-row::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100vw;
    height: 1px;
    transform: translateX(-50%);
    background: rgba(48, 45, 85, .045);
    pointer-events: none;
}

/* Scroll'da mevcut ince cam efekti geri gelir. */
.site-header.is-scrolled::after {
    background: rgba(235, 243, 255, .18);
    backdrop-filter: blur(18px) saturate(125%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    box-shadow: none;
}

.site-header.is-scrolled .site-header__menu-row::before {
    background: rgba(235, 243, 255, .24);
    backdrop-filter: blur(20px) saturate(128%);
    -webkit-backdrop-filter: blur(20px) saturate(128%);
    box-shadow: none;
}

.site-header.is-scrolled .site-header__menu-row::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100vw;
    height: 1px;
    transform: translateX(-50%);
    background: rgba(48, 45, 85, .05);
    pointer-events: none;
}

/* =========================================================
   SCROLL GLASS: SINGLE PIECE
   ========================================================= */

/* Scroll'da üst + menü ayrı cam olmayacak. Tek yüzey tüm header'ı kaplar. */
.site-header.is-scrolled::after {
    top: -40px;
    height: calc(126px + 40px);
    background: rgba(235, 243, 255, .20);
    backdrop-filter: blur(19px) saturate(126%);
    -webkit-backdrop-filter: blur(19px) saturate(126%);
    box-shadow: none;
}

/* İkinci cam katmanını scroll halinde tamamen kapat. */
.site-header.is-scrolled .site-header__menu-row::before {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

/* Tek yüzeyin sadece en altında belli belirsiz bitiş çizgisi. */
.site-header.is-scrolled .site-header__menu-row::after {
    background: rgba(48, 45, 85, .05);
}

/* =========================================================
   MOBILE HAMBURGER MENU
   ========================================================= */

/* Masaüstünde hamburger yok. */
.site-header .nav-toggle {
    display: none;
}

@media (max-width: 800px) {
    /* Menü satırı artık kaymıyor: sadece sağda hamburger var. */
    .site-header__menu-row {
        overflow: visible;
        justify-content: flex-end;
    }

    /*
     * Anahtar simgesinin tam altında: genişlik header butonlarıyla aynı,
     * böylece çizgilerin ortası anahtarın ortasıyla hizalı.
     * Yuvarlak zemin yok, sadece üç çizgi. Alt çizgiden uzak dursun diye üste yaslı.
     */
    .site-header .nav-toggle {
        display: grid;
        place-items: center;
        align-self: flex-start;

        width: 38px;
        height: 32px;
        margin-top: 2px;
        padding: 0;

        border: 0;
        background: transparent;
        color: #302D55;

        font-size: 22px;
        line-height: 1;

        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .site-header .nav-toggle i {
        transition: transform .2s ease;
    }

    .site-header .nav-toggle[aria-expanded="true"] i {
        transform: rotate(90deg);
    }

    /* Açılır panel */
    .site-header .site-nav {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;

        flex-direction: column;
        align-items: stretch;
        gap: 2px;

        width: min(280px, calc(100vw - 28px));
        min-width: 0;
        max-height: calc(100vh - 140px);
        overflow-y: auto;

        margin: 0;
        padding: 8px;

        border: 1px solid rgba(255, 255, 255, .80);
        border-radius: 18px;

        background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(246, 241, 233, .80));
        box-shadow:
            0 24px 55px rgba(48, 45, 85, .14),
            0 8px 18px rgba(48, 45, 85, .06),
            inset 0 1px 0 rgba(255, 255, 255, .98);
        backdrop-filter: blur(28px) saturate(150%);
        -webkit-backdrop-filter: blur(28px) saturate(150%);

        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px) scale(.985);
        transform-origin: top right;

        transition:
            opacity .18s ease,
            visibility .18s ease,
            transform .22s cubic-bezier(.22, .8, .22, 1);
    }

    .site-header .site-nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .site-header .nav-hover-pill {
        display: none;
    }

    .site-header .site-nav > a,
    .site-header .nav-dropdown__trigger {
        justify-content: space-between;
        width: 100%;
        height: 44px;
        padding: 0 14px;
        font-size: 15px;
        transition: background .16s ease;
    }

    .site-header .site-nav > a:hover,
    .site-header .nav-dropdown__trigger:hover,
    .site-header .nav-dropdown.is-open .nav-dropdown__trigger {
        background: rgba(48, 45, 85, .06);
    }

    .site-header .nav-dropdown__trigger i {
        font-size: 12px;
        opacity: .72;
        transition: transform .2s ease;
    }

    .site-header .nav-dropdown.is-open .nav-dropdown__trigger i {
        transform: rotate(180deg);
    }

    /* Alt menü panel içinde akordeon olarak açılır. */
    .site-header .nav-dropdown__menu {
        position: static;
        display: none;
        grid-template-columns: 1fr;
        gap: 2px;

        width: auto;
        padding: 4px 0 4px 10px;

        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;

        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .site-header .nav-dropdown.is-open .nav-dropdown__menu {
        display: grid;
        transform: none;
    }

    .site-header .nav-dropdown__menu::before {
        display: none;
    }

    .site-header .nav-dropdown__menu button,
    .site-header .nav-dropdown__menu a {
        width: 100%;
        min-height: 42px;
    }

    .site-header .nav-dropdown__menu button:hover,
    .site-header .nav-dropdown__menu a:hover {
        background: rgba(48, 45, 85, .05);
    }
}

@media (max-width: 520px) {
    .site-header .nav-toggle {
        width: 34px;
    }
}

/* =========================================================
   MOBİL ARAMA: HEADER'I KAPLAYAN BULANIK KATMAN
   ========================================================= */

/*
 * Mobilde arama kutusu satır içinde açılınca diğer butonları ekran
 * dışına itiyordu. Bunun yerine aynı .search-control header'ın tamamını
 * kaplayan bulanık bir katmana dönüşür; input ortada, büyüteç butonu
 * kapatma (X) butonu olur. Input aynı kaldığı için arama aynen çalışır.
 */
@media (max-width: 800px) {
    .site-header .search-control.is-open {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 50;

        flex-direction: row-reverse;
        justify-content: center;
        gap: 10px;

        height: 114px;
        padding: 0 20px;

        background: rgba(235, 243, 255, .55);
        backdrop-filter: blur(22px) saturate(135%);
        -webkit-backdrop-filter: blur(22px) saturate(135%);
        box-shadow: 0 1px 0 rgba(48, 45, 85, .06);

        animation: mobile-search-in .2s ease;
    }

    .site-header .search-control.is-open .header-search-input {
        flex: 0 1 420px;
        width: auto;
        min-width: 0;
        height: 44px;
        padding: 0 18px;

        font-size: 16px; /* iOS odakta yakınlaştırmasın */
    }

    /* Büyüteç → X */
    .site-header .search-control.is-open .search-button i::before {
        content: "\f00d";
    }

    [data-theme="dark"] .site-header .search-control.is-open {
        background: rgba(21, 20, 31, .72);
        box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
    }
}

@media (max-width: 520px) {
    .site-header .search-control.is-open {
        height: 108px;
        padding: 0 14px;
    }
}

@keyframes mobile-search-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* =========================================================
   HEADER YÜKSEKLİĞİ VE LOGO — TEK YERDEN

   - Header sayfanın en tepesinden başlar (body'nin üst dolgusu
     kaldırıldı); kaydırınca tepeye zıplamaz, logo yerinde kalır.
   - İki kat tek alan gibi davranır: logo iki satırın toplam
     yüksekliğinde dikeyde ortalanır. Sağ üstte butonlar,
     sağ altta menü durur.
   ========================================================= */

body {
    padding-top: 0;
}

.site-header {
    --hdr-top: 74px;    /* butonlar satırı */
    --hdr-menu: 52px;   /* menü satırı */

    grid-template-rows: var(--hdr-top) var(--hdr-menu);
}

/* Logo iki satırı birden kaplar ve dikeyde ortalanır */
.site-header .site-logo {
    position: relative;
    z-index: 2;

    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
}

.site-header .site-logo img {
    max-width: 340px;
    max-height: 90px;
}

/*
 * Menü satırı hâlâ tam genişlikte (alt çizgi ve cam için) ama logonun
 * alt yarısının üstünde durduğu için boş alanı tıklamaları yutmasın.
 */
.site-header__menu-row {
    pointer-events: none;
}

.site-header__menu-row > * {
    pointer-events: auto;
}

/* Üst cam: sayfanın fiziksel tepesinden üst satırın sonuna kadar */
.site-header::after,
.site-header.is-scrolled::after {
    top: -40px;
    height: calc(var(--hdr-top) + 40px);
}

/* Kaydırınca tek cam yüzey iki satırı da kaplar */
.site-header.is-scrolled::after {
    height: calc(var(--hdr-top) + var(--hdr-menu) + 40px);
}

@media (max-width: 800px) {
    .site-header {
        --hdr-top: 62px;
        --hdr-menu: 46px;
    }

    .site-header .site-logo img {
        max-width: 300px;
        max-height: 82px;
    }

    /* Mobil arama katmanı header'ın tamamını kaplasın */
    .site-header .search-control.is-open {
        height: calc(var(--hdr-top) + var(--hdr-menu));
    }
}

@media (max-width: 520px) {
    .site-header {
        --hdr-top: 56px;
        --hdr-menu: 44px;
    }

    /* Sağdaki butonlarla arasında nefes payı kalsın */
    .site-header .site-logo img {
        max-width: min(230px, calc(100vw - 196px));
        max-height: 74px;
    }
}


/* Keşfet: etiket bağlantıları (a) butonlarla aynı görünür. */
.nav-dropdown__menu a {
    text-decoration: none;
    box-sizing: border-box;
}

.nav-dropdown__menu a.nav-dropdown__all {
    justify-content: center;
    font-weight: 700;
    opacity: .75;
}


/* =========================
   ETİKET SİMGELERİ (SVG / görsel)
   Font Awesome dışındaki simgeler: renkli emoji ikonları,
   marka logoları ve yüklenen görseller.
========================= */

.tag-icon--svg,
.tag-icon--image {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
    line-height: 1;
    vertical-align: -0.2em;
}

.tag-icon--svg svg {
    display: block;
    width: 100%;
    height: 100%;
}

.tag-icon--image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
}