/* =============================================================================
   header-modern.css — Modern header + top header  (header_tip = 3)
   Uygun Medya · uygunmedya.net.tr · 2026-09-13
   -----------------------------------------------------------------------------
   Bu dosya YALNIZCA `.ada-hdr` altindaki yeni isaretlemeyi biçimlendirir.
   Klasik header (tip 1/2) sinif adlarina HIC dokunmaz; panelden tip geri
   alinirsa bu dosyanin tek bir kurali bile devreye girmez.

   PANEL DEGERLERI
   Renk / gradyan / gorsel / olcu degerleri buraya YAZILMAZ. header.php tek bir
   <style id="ada-header-degiskenleri"> blogu basar ve yalnizca CSS DEGISKENI
   tanimlar (--ust-bg, --hdr-yukseklik, --cek-bg ...). Buradaki her kural o
   degiskenleri `var(..., yedek)` ile okur:
     · panel degeri varsa o kazanir (ozgulluk savasi yok),
     · alan bos birakilmissa yedek devreye girer, sayfa asla renksiz kalmaz.
   YENI BIR PANEL DEGERI EKLERKEN: kurali buraya, degiskeni header_stil.php'ye.

   YUKLEME SIRASI
   header_libs.php icinde modern.css'ten SONRA yuklenir. mobile-fixes.css'in
   guvenlik agi kurallari (img max-width, overflow-x, input font-size, mevcut
   env() paylari) BURADA YENIDEN TANIMLANMAZ. Yeni header ogelerinin kendi
   safe-area paylari 11. bolumde ve yalnizca bu dosyanin sahip oldugu
   seciciler icin tanimli.

   BREAKPOINT
   Tek esik: 1100.98px / 1101px — projenin mevcut header esigi. Yeni bir
   breakpoint semasi ACILMADI (projede zaten bes ayri sema var).

   ICINDEKILER
     1.  Kabuk ve ortak yardimcilar
     2.  Ust bar
     3.  Ana header (masaustu)
     4.  Ana menu
     5.  Acilir menuler
     6.  Mega menu
     7.  Aksiyonlar: arama, sepet, dil, CTA
     8.  Yapiskan durum
     9.  Mobil header
     10. Cekmece (mobil menu)
     11. Guvenli alan (safe-area)
     12. Hareketi azalt   (SON SOZ - yeni bolumler ONUNE eklenir)
     13. Mobil alt menu (bottom navigation)
     14. Mobil ust bar duzenleri (2. bolumun sonunda, medya sorgusu icinde)
   ========================================================================== */


/* =============================================================================
   1. KABUK VE ORTAK YARDIMCILAR
   ========================================================================== */

.ada-hdr {
    position: relative;
    z-index: 900;
    /* Panel blogu gelmezse (ornegin degisken blogu basilmadan onbellege
       alinmis bir sayfa) header yine de okunur kalsin diye yedekler. */
    --hdr-ic-bosluk: clamp(14px, 3vw, 34px);

    /* CENTIK PAYI: payi <header>'in KENDISI tasiyor, ilk cocugu DEGIL.
       Ilk cocuk secicisi kullanilamaz cunku kargo seridi parcasi bir <style>
       etiketi basiyor ve o da :first-child olarak esleşir (display:none
       oldugu icin dolgu hicbir ise yaramaz, olculdu). Serit rengi
       --notch-bg: en ustteki gorunur seridin rengi (header_stil.php). */
    padding-top: env(safe-area-inset-top, 0px);
    background-color: var(--notch-bg, transparent);
}

/* Ekran okuyucuya acik, gozle gorunmez metin.
   Sosyal ikonlarin ve ikon dugmelerinin adi bu sinifla veriliyor. */
.ada-gorsel-gizli {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Klavye odagi: tema hicbir yerde gorunur odak halkasi vermiyordu.
   Fare kullanicisini rahatsiz etmemek icin :focus-visible. */
.ada-hdr a:focus-visible,
.ada-hdr button:focus-visible,
.ada-hdr summary:focus-visible,
.ada-hdr input:focus-visible,
.ada-cekmece a:focus-visible,
.ada-cekmece button:focus-visible,
.ada-cekmece input:focus-visible {
    outline: 2px solid var(--ada-vurgu, #C2603C);
    outline-offset: 2px;
    border-radius: var(--ada-r-sm, 6px);
}

/* Serit ic kapsayicisi: panelde "Kutu" secilirse max-width devreye girer. */
.ada-ust-ic,
.ada-hdr-ic {
    width: 100%;
    max-width: var(--hdr-genislik, 100%);
    margin: 0 auto;
    padding-inline: var(--hdr-ic-bosluk);
}

.ada-ust-ic { max-width: var(--ust-genislik, 100%); }


/* =============================================================================
   2. UST BAR
   -----------------------------------------------------------------------------
   Ince serit. Solda sosyal, sagda iletisim + dugmeler + dil.
   Mobilde GIZLENMEZ: tek satirlik yatay kaydirilabilir seride doner. Boylece
   telefon/WhatsApp kisayolu ekranin en ustunde kalir ve sayfaya yatay tasma
   EKLEMEZ (kaydirma seridin kendi icinde).
   ========================================================================== */

.ada-ust {
    background: var(--ust-bg, var(--ada-ana, #1E3A34));
    background-color: var(--ust-bg-renk, var(--ada-ana, #1E3A34));
    background-size: var(--ust-bg-boyut, auto);
    background-position: center;
    color: var(--ust-yazi, #FFFFFF);
    border-bottom: 1px solid color-mix(in srgb, var(--ust-kenarlik, #DFD9CF) 22%, transparent);
    font-size: 13px;
}

.ada-ust-ic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: calc(var(--ust-dolgu, 5px) * 2 + 28px);
    padding-block: var(--ust-dolgu, 5px);
}

.ada-ust-sol,
.ada-ust-sag {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
}

.ada-ust-sag { gap: 4px; }

/* Sosyal hesaplar TEK BIR OGE gibi davranir: yerlesim listesinde bir anahtar
   ("sosyal") ama isaretlemede N tane baglanti. Sarmal olmadan ayirici cizgi
   kurali her ikon arasina cizgi koyardi. */
.ada-ust-sosyal-grup {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* Calisma saatleri gibi TIKLANMAYAN ogeler: ayni gorunum, imlec yok. */
.ada-ust-oge-duz { cursor: default; }
.ada-ust-oge-duz:hover { background-color: transparent; }

/* --- Sosyal ikonlar: 32px daire hedef --- */
.ada-ust-sosyal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--ust-ikon, #FFFFFF);
    text-decoration: none;
    transition: background-color var(--ada-sure-hizli, 160ms) var(--ada-egri, ease),
                color var(--ada-sure-hizli, 160ms) var(--ada-egri, ease),
                transform var(--ada-sure-hizli, 160ms) var(--ada-egri, ease);
}

.ada-ust-sosyal i { font-size: 15px; line-height: 1; }

.ada-ust-sosyal:hover,
.ada-ust-sosyal:focus-visible {
    background-color: color-mix(in srgb, var(--ust-yazi, #FFFFFF) 16%, transparent);
    color: var(--ust-yazi, #FFFFFF);
    transform: translateY(-1px);
    text-decoration: none;
}

/* --- Iletisim kisayollari --- */
.ada-ust-oge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 10px;
    border-radius: var(--ada-r-sm, 6px);
    color: var(--ust-yazi, #FFFFFF);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--ada-sure-hizli, 160ms) var(--ada-egri, ease);
}

.ada-ust-oge i {
    color: var(--ust-ikon, #FFFFFF);
    font-size: 15px;
    line-height: 1;
}

/* Her oge IKI metin tasiyor: uzun deger + kisa etiket (bkz. header-ust.php).
   Masaustunde uzun deger gorunur; kisa etiket yalnizca mobil "dugme"
   duzeninde devreye girer. */
.ada-ust-kisa { display: none; }

.ada-ust-oge:hover,
.ada-ust-oge:focus-visible {
    background-color: color-mix(in srgb, var(--ust-yazi, #FFFFFF) 13%, transparent);
    color: var(--ust-yazi, #FFFFFF);
    text-decoration: none;
}

/* Ogeler arasi ince ayirici — panelden acilip kapatilir (top_ayirici). */
.ada-ust-ayirici .ada-ust-sag > * + *:not(.btn) {
    position: relative;
    margin-left: 5px;
}

.ada-ust-ayirici .ada-ust-sag > * + *:not(.btn)::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 50%;
    width: 1px;
    height: 16px;
    transform: translateY(-50%);
    background-color: color-mix(in srgb, var(--ust-yazi, #FFFFFF) 22%, transparent);
}

/* --- Ust bardaki dugmeler --- */
.ada-ust-btn {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    border-radius: 999px;
    padding: 6px 16px;
    white-space: nowrap;
}


/* =============================================================================
   3. ANA HEADER (masaustu)
   -----------------------------------------------------------------------------
   Tek satirlik grid: [logo] [menu] [aksiyon].
   Menu hizasi panelden: "sola" -> logo'nun hemen sagi, "ortali" -> 1fr icinde
   ortalanir.
   ========================================================================== */

.ada-hdr-ana {
    position: relative;
    background: var(--hdr-bg, #FFFFFF);
    background-color: var(--hdr-bg-renk, #FFFFFF);
    background-size: var(--hdr-bg-boyut, auto);
    background-position: center;
    transition: box-shadow var(--ada-sure, 260ms) var(--ada-egri, ease);
}

.ada-hdr-kenarlik .ada-hdr-ana { border-bottom: 1px solid var(--hdr-kenarlik, #DFD9CF); }
.ada-hdr-golge   .ada-hdr-ana { box-shadow: var(--ada-golge-1, 0 1px 3px rgba(0,0,0,.06)); }

.ada-hdr-ic {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(12px, 2vw, 28px);
    min-height: var(--hdr-yukseklik, 84px);
    transition: min-height var(--ada-sure, 260ms) var(--ada-egri, ease);
}

/* --- Logo --- */
.ada-hdr-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex: 0 0 auto;
}

.ada-hdr-logo img {
    display: block;
    height: var(--hdr-logo, 46px);
    width: auto;
    max-width: min(280px, 34vw);
    object-fit: contain;
    transition: height var(--ada-sure, 260ms) var(--ada-egri, ease);
}

.ada-hdr-logo-yazi {
    font-size: 20px;
    font-weight: 700;
    color: var(--hdr-yazi, #15171A);
    white-space: nowrap;
}

/* --- Menu sutunu --- */
.ada-hdr-nav { min-width: 0; }

.ada-hdr-hiza-sol   .ada-hdr-nav > .ada-menu { justify-content: flex-start; }
.ada-hdr-hiza-orta  .ada-hdr-nav > .ada-menu { justify-content: center; }

/* --- Aksiyon sutunu --- */
.ada-hdr-aksiyon {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}


/* =============================================================================
   4. ANA MENU
   -----------------------------------------------------------------------------
   Hover stili panelden: cizgi (altta ince vurgu) | hap (yuvarlak zemin) |
   kutu (kose zemin).
   ========================================================================== */

.ada-menu {
    display: flex;
    align-items: center;
    gap: var(--hdr-menu-aralik, 6px);
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}

.ada-menu-oge { position: relative; }

.ada-menu-bag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 12px;
    color: var(--hdr-yazi, #15171A);
    font-size: var(--hdr-font, 13px);
    font-weight: var(--hdr-font-agirlik, 500);
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
    border-radius: var(--ada-r-sm, 6px);
    transition: color var(--ada-sure-hizli, 160ms) var(--ada-egri, ease),
                background-color var(--ada-sure-hizli, 160ms) var(--ada-egri, ease);
}

.ada-menu-bag:hover,
.ada-menu-bag:focus-visible { text-decoration: none; }

.ada-menu-ok {
    font-size: 13px;
    opacity: .6;
    transition: transform var(--ada-sure-hizli, 160ms) var(--ada-egri, ease);
}

.ada-menu-oge:hover > .ada-menu-bag .ada-menu-ok,
.ada-menu-oge.ada-acik > .ada-menu-bag .ada-menu-ok { transform: rotate(180deg); }

/* --- Stil: CIZGI (varsayilan) --- */
.ada-hdr-menu-cizgi .ada-menu-bag { position: relative; }

.ada-hdr-menu-cizgi .ada-menu-bag::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--hdr-vurgu, var(--ada-vurgu, #C2603C));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--ada-sure, 260ms) var(--ada-egri, ease);
}

.ada-hdr-menu-cizgi .ada-menu-oge:hover > .ada-menu-bag::after,
.ada-hdr-menu-cizgi .ada-menu-oge.ada-acik > .ada-menu-bag::after,
.ada-hdr-menu-cizgi .ada-menu-bag:focus-visible::after { transform: scaleX(1); }

.ada-hdr-menu-cizgi .ada-menu-oge:hover > .ada-menu-bag,
.ada-hdr-menu-cizgi .ada-menu-oge.ada-acik > .ada-menu-bag {
    color: var(--hdr-vurgu, var(--ada-vurgu, #C2603C));
}

/* --- Stil: HAP --- */
.ada-hdr-menu-hap .ada-menu-bag { border-radius: 999px; }

.ada-hdr-menu-hap .ada-menu-oge:hover > .ada-menu-bag,
.ada-hdr-menu-hap .ada-menu-oge.ada-acik > .ada-menu-bag,
.ada-hdr-menu-hap .ada-menu-bag:focus-visible {
    background-color: var(--hdr-vurgu, var(--ada-vurgu, #C2603C));
    color: var(--hdr-yazi-hover, #FFFFFF);
}

/* --- Stil: KUTU --- */
.ada-hdr-menu-kutu .ada-menu-bag { border-radius: 0; }

.ada-hdr-menu-kutu .ada-menu-oge:hover > .ada-menu-bag,
.ada-hdr-menu-kutu .ada-menu-oge.ada-acik > .ada-menu-bag,
.ada-hdr-menu-kutu .ada-menu-bag:focus-visible {
    background-color: var(--hdr-vurgu, var(--ada-vurgu, #C2603C));
    color: var(--hdr-yazi-hover, #FFFFFF);
}


/* =============================================================================
   5. ACILIR MENULER
   -----------------------------------------------------------------------------
   Baslangic durumu JS VARSA kapali (.ada-hdr-js). JS yoksa menuler CSS
   hover'iyla acilmaya devam eder — icerik hicbir kosulda erisilmez kalmaz.
   ========================================================================== */

.ada-alt-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 910;
    min-width: 230px;
    margin: 0;
    padding: 8px;
    list-style: none;
    background-color: #FFFFFF;
    border: 1px solid var(--hdr-kenarlik, #DFD9CF);
    border-top: 2px solid var(--hdr-vurgu, var(--ada-vurgu, #C2603C));
    border-radius: 0 0 var(--ada-r-md, 10px) var(--ada-r-md, 10px);
    box-shadow: var(--ada-golge-3, 0 16px 40px rgba(0,0,0,.12));
}

/* Ucuncu seviye yana acilir. */
.ada-alt-menu-3 {
    top: -9px;
    left: 100%;
    border-radius: var(--ada-r-md, 10px);
    border-top-width: 1px;
    border-left: 2px solid var(--hdr-vurgu, var(--ada-vurgu, #C2603C));
}

/* Sag kenara tasan acilir menuler icine doner (JS olcuyor). */
.ada-menu-oge.ada-sag-kenar > .ada-alt-menu { left: auto; right: 0; }
.ada-alt-oge-acilir.ada-sag-kenar > .ada-alt-menu-3 { left: auto; right: 100%; }

.ada-alt-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    color: var(--hdr-yazi, #15171A);
    font-size: 13px;
    line-height: 1.35;
    text-decoration: none;
    border-radius: var(--ada-r-sm, 6px);
    transition: background-color var(--ada-sure-hizli, 160ms) var(--ada-egri, ease),
                color var(--ada-sure-hizli, 160ms) var(--ada-egri, ease);
}

.ada-alt-menu a:hover,
.ada-alt-menu a:focus-visible {
    background-color: color-mix(in srgb, var(--hdr-vurgu, #C2603C) 10%, transparent);
    color: var(--hdr-vurgu, var(--ada-vurgu, #C2603C));
    text-decoration: none;
}

.ada-alt-menu li { position: relative; }
.ada-alt-menu i { font-size: 12px; opacity: .55; }

/* --- Acilma/kapanma --- */
.ada-alt-menu,
.ada-mega {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--ada-sure, 260ms) var(--ada-egri, ease),
                transform var(--ada-sure, 260ms) var(--ada-egri, ease),
                visibility var(--ada-sure, 260ms) step-end;
}

.ada-menu-oge:hover > .ada-alt-menu,
.ada-menu-oge:hover > .ada-mega,
.ada-menu-oge.ada-acik > .ada-alt-menu,
.ada-menu-oge.ada-acik > .ada-mega,
.ada-alt-oge-acilir:hover > .ada-alt-menu-3,
.ada-alt-menu li:focus-within > .ada-alt-menu-3 {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-timing-function: var(--ada-egri, ease), var(--ada-egri, ease), step-start;
}

/* JS calismiyorsa gecis yok, dogrudan hover ile acilir (yukaridaki kural
   zaten yeterli) — bu blok yalnizca JS varken ilk karede kapali olmayi
   garanti eder. */
.ada-hdr-js .ada-alt-menu,
.ada-hdr-js .ada-mega { will-change: opacity, transform; }


/* =============================================================================
   6. MEGA MENU
   ========================================================================== */

/* Mega menu genis oldugu icin MENU OGESINE degil, HEADER SERIDINE gore
   konumlanir: aksi halde sagdaki bir menu ogesinin altinda acilan 980px'lik
   panel ekrandan tasardi. Bunun icin mega tasiyan <li> position:static
   birakiliyor, boylece en yakin konumlu ata .ada-hdr-ana oluyor. */
.ada-menu-oge.ada-menu-mega { position: static; }

.ada-mega {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 910;
    width: min(980px, calc(100% - 2 * var(--hdr-ic-bosluk)));
    transform: translate(-50%, -6px);
    background-color: #FFFFFF;
    border: 1px solid var(--hdr-kenarlik, #DFD9CF);
    border-top: 2px solid var(--hdr-vurgu, var(--ada-vurgu, #C2603C));
    border-radius: 0 0 var(--ada-r-lg, 16px) var(--ada-r-lg, 16px);
    box-shadow: var(--ada-golge-3, 0 16px 40px rgba(0,0,0,.12));
    overflow: hidden;
}

.ada-menu-oge:hover > .ada-mega,
.ada-menu-oge.ada-acik > .ada-mega { transform: translate(-50%, 0); }

.ada-mega-ic {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr;
    gap: 0;
}

/* --- Tanitim sutunu --- */
.ada-mega-tanitim {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 260px;
    padding: 22px;
    color: #FFFFFF;
    background-color: var(--ada-ana, #1E3A34);
    overflow: hidden;
}

.ada-mega-gorsel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .45;
}

.ada-mega-tanitim-yazi { position: relative; }

.ada-mega-etiket {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .85;
}

.ada-mega-baslik {
    margin: 0 0 16px;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 600;
    color: #FFFFFF;
}

/* --- Liste sutunlari --- */
.ada-mega-sutun {
    padding: 22px 20px;
    border-left: 1px solid var(--hdr-kenarlik, #DFD9CF);
}

.ada-mega-sutun-baslik {
    margin-bottom: 12px;
    padding-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ada-60, #6E7170);
    border-bottom: 1px solid var(--hdr-kenarlik, #DFD9CF);
}

.ada-mega-urun {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    margin-bottom: 2px;
    border-radius: var(--ada-r-sm, 6px);
    text-decoration: none;
    transition: background-color var(--ada-sure-hizli, 160ms) var(--ada-egri, ease);
}

.ada-mega-urun:hover,
.ada-mega-urun:focus-visible {
    background-color: var(--ada-05, #F7F5F1);
    text-decoration: none;
}

.ada-mega-urun img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: var(--ada-r-sm, 6px);
    background-color: var(--ada-05, #F7F5F1);
    flex: 0 0 auto;
}

.ada-mega-urun-yazi { display: block; min-width: 0; }

.ada-mega-urun-ad {
    display: block;
    font-size: 13px;
    line-height: 1.3;
    color: var(--hdr-yazi, #15171A);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ada-mega-urun-fiyat {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ada-vurgu, #C2603C);
}

.ada-mega-kat {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 8px;
    font-size: 13px;
    color: var(--hdr-yazi, #15171A);
    text-decoration: none;
    border-radius: var(--ada-r-sm, 6px);
    transition: background-color var(--ada-sure-hizli, 160ms) var(--ada-egri, ease),
                color var(--ada-sure-hizli, 160ms) var(--ada-egri, ease);
}

.ada-mega-kat:hover,
.ada-mega-kat:focus-visible {
    background-color: color-mix(in srgb, var(--hdr-vurgu, #C2603C) 10%, transparent);
    color: var(--hdr-vurgu, var(--ada-vurgu, #C2603C));
    text-decoration: none;
}

.ada-mega-kat i { width: 16px; text-align: center; opacity: .7; }
.ada-mega-kat-tumu { font-weight: 700; color: var(--ada-vurgu, #C2603C); }


/* =============================================================================
   7. AKSIYONLAR: arama, sepet, dil, CTA
   ========================================================================== */

.ada-hdr-dugme {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    color: var(--hdr-ikon, #23262A);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--ada-sure-hizli, 160ms) var(--ada-egri, ease),
                color var(--ada-sure-hizli, 160ms) var(--ada-egri, ease);
}

.ada-hdr-dugme i { font-size: 19px; line-height: 1; }

.ada-hdr-dugme:hover,
.ada-hdr-dugme:focus-visible {
    background-color: color-mix(in srgb, var(--hdr-vurgu, #C2603C) 12%, transparent);
    color: var(--hdr-vurgu, var(--ada-vurgu, #C2603C));
    text-decoration: none;
}

/* Sepet rozeti */
.ada-hdr-sepet-sayi {
    position: absolute;
    top: 2px;
    right: 1px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.ada-hdr-cta {
    margin-left: 6px;
    border-radius: 999px;
    padding: 9px 20px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* --- Dil secici (<details>) --- */
.ada-dil { position: relative; }

.ada-dil > summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 10px;
    border-radius: var(--ada-r-sm, 6px);
    cursor: pointer;
    list-style: none;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    user-select: none;
}

.ada-dil > summary::-webkit-details-marker { display: none; }
.ada-dil > summary::marker { content: ""; }

.ada-dil-bayrak {
    display: inline-block;
    width: 18px;
    height: 13px;
    vertical-align: middle;
    flex: 0 0 auto;
}

.ada-dil-ok {
    font-size: 12px;
    opacity: .6;
    transition: transform var(--ada-sure-hizli, 160ms) var(--ada-egri, ease);
}

.ada-dil[open] > summary .ada-dil-ok { transform: rotate(180deg); }

.ada-dil-liste {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 920;
    min-width: 170px;
    padding: 6px;
    background-color: #FFFFFF;
    border: 1px solid var(--hdr-kenarlik, #DFD9CF);
    border-radius: var(--ada-r-md, 10px);
    box-shadow: var(--ada-golge-3, 0 16px 40px rgba(0,0,0,.12));
}

.ada-dil-oge {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    font-size: 13px;
    color: var(--ada-95, #171A19);
    text-decoration: none;
    border-radius: var(--ada-r-sm, 6px);
}

.ada-dil-oge:hover,
.ada-dil-oge:focus-visible {
    background-color: var(--ada-05, #F7F5F1);
    color: var(--ada-95, #171A19);
    text-decoration: none;
}

.ada-dil-oge-aktif { font-weight: 700; }

/* Ust bardaki dil secici ust barin rengini alir. */
.ada-dil-ust > summary { color: var(--ust-yazi, #FFFFFF); }
.ada-dil-ust > summary:hover { background-color: color-mix(in srgb, var(--ust-yazi, #FFFFFF) 13%, transparent); }

/* Ana headerdaki dil secici cerceveli. */
.ada-dil-hdr > summary {
    color: var(--hdr-yazi, #15171A);
    border: 1px solid var(--cek-kenarlik, #EBEBEB);
}

/* --- Arama paneli (masaustu, tam serit) --- */
.ada-arama-panel {
    background-color: var(--hdr-bg-renk, #FFFFFF);
    border-top: 1px solid var(--hdr-kenarlik, #DFD9CF);
    box-shadow: var(--ada-golge-2, 0 6px 16px rgba(0,0,0,.08));
}

.ada-arama-form {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: var(--hdr-genislik, 100%);
    margin: 0 auto;
    padding: 14px var(--hdr-ic-bosluk);
}

.ada-arama-ikon {
    position: absolute;
    left: calc(var(--hdr-ic-bosluk) + 14px);
    color: var(--ada-40, #A9A398);
    pointer-events: none;
}

.ada-arama-form input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    padding: 0 14px 0 40px;
    border: 1px solid var(--hdr-kenarlik, #DFD9CF);
    border-radius: var(--ada-r-md, 10px);
    background-color: #FFFFFF;
    color: var(--ada-95, #171A19);
}

.ada-arama-form input[type="search"]:focus {
    border-color: var(--hdr-vurgu, var(--ada-vurgu, #C2603C));
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hdr-vurgu, #C2603C) 18%, transparent);
}

.ada-arama-form .btn { height: 46px; padding-inline: 22px; border-radius: var(--ada-r-md, 10px); }

.ada-arama-kapat {
    width: 42px;
    height: 46px;
    border: 0;
    background: transparent;
    color: var(--ada-60, #6E7170);
    cursor: pointer;
}


/* =============================================================================
   8. YAPISKAN DURUM
   -----------------------------------------------------------------------------
   Header'in KENDISI sticky. `top` degeri, ust seritlerin (kargo + ust bar)
   toplam yuksekligi kadar NEGATIF: serit yukari kayar, ana header tepede
   yapisir. Bu yontem seridi gizleyip yukseklik degistirmedigi icin esik
   asildiginda icerik ZIPLAMAZ.

   --hdr-ust-yuk degerini header-modern.js olcup yaziyor; JS yoksa 0px olur
   ve header tumuyle yapisir (yine calisir, yalnizca daha uzun durur).
   ========================================================================== */

/* `top` NEGATIF: ust seritlerin toplam yuksekligi kadar. Serit yukari kayar,
   ana bar tepede yapisir. env(safe-area-inset-top) eklendigi icin standalone
   modda ana bar centigin ALTINDA durur ve centik seridinde ust barin son
   pikselleri gorunur - beyaz bant olusmaz.
   --hdr-ust-yuk degerini header-modern.js olcup yaziyor; JS yoksa 0px olur ve
   header tumuyle yapisir (yine calisir, yalnizca daha uzun durur). */
@media screen and (min-width: 1101px) {
    .ada-hdr-yapiskan {
        position: sticky;
        top: calc(env(safe-area-inset-top, 0px) - var(--hdr-ust-yuk, 0px));
    }
}

@media screen and (max-width: 1100.98px) {
    .ada-mob-yapiskan {
        position: sticky;
        top: calc(env(safe-area-inset-top, 0px) - var(--hdr-ust-yuk, 0px));
    }
}

/* Kaydirilinca golge + hafif yogunlasma. .ada-kaydirildi sinifini modern.js
   yaziyor (8px esik); ayri bir kaydirma dinleyicisi EKLENMEDI. */
.ada-kaydirildi .ada-hdr-golge .ada-hdr-ana,
.ada-kaydirildi .ada-hdr-yapiskan .ada-hdr-ana,
.ada-kaydirildi .ada-mob-yapiskan .ada-mob {
    box-shadow: var(--ada-golge-2, 0 6px 16px rgba(23,26,25,.08));
}

/* Cam etkisi: yalnizca tarayici destekliyorsa ve panelden acilmissa.
   Yarı saydam zemin + bulanıklık; destek yoksa opak zemin aynen kalir. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ada-kaydirildi .ada-hdr-bulanik .ada-hdr-ana {
        background-color: color-mix(in srgb, var(--hdr-bg-renk, #FFFFFF) 92%, transparent);
        -webkit-backdrop-filter: saturate(150%) blur(12px);
        backdrop-filter: saturate(150%) blur(12px);
    }

    .ada-kaydirildi .ada-hdr-bulanik .ada-mob {
        background-color: color-mix(in srgb, var(--mob-bg-renk, #FFFFFF) 92%, transparent);
        -webkit-backdrop-filter: saturate(150%) blur(12px);
        backdrop-filter: saturate(150%) blur(12px);
    }
}

/* Kaydirirken header biraz daralsin — dikey alan kazanci. */
.ada-kaydirildi .ada-hdr-yapiskan .ada-hdr-ic { min-height: max(60px, calc(var(--hdr-yukseklik, 84px) - 16px)); }
.ada-kaydirildi .ada-hdr-yapiskan .ada-hdr-logo img { height: max(30px, calc(var(--hdr-logo, 46px) - 8px)); }


/* =============================================================================
   9. MOBIL HEADER
   -----------------------------------------------------------------------------
   Esik 1100.98 / 1101 — projenin mevcut header esigi.
   ========================================================================== */

.ada-mob { display: none; }

@media screen and (min-width: 1101px) {
    .ada-cek-perde,
    .ada-cekmece { display: none !important; }
}

@media screen and (max-width: 1100.98px) {

    .ada-hdr-ana { display: none; }

    .ada-mob {
        display: block;
        background: var(--mob-bg, #FFFFFF);
        background-color: var(--mob-bg-renk, #FFFFFF);
        background-size: var(--mob-bg-boyut, auto);
        background-position: center;
    }

    .ada-hdr-kenarlik .ada-mob { border-bottom: 1px solid var(--hdr-kenarlik, #DFD9CF); }
    .ada-hdr-golge   .ada-mob { box-shadow: var(--ada-golge-1, 0 1px 3px rgba(0,0,0,.06)); }

    .ada-mob-ic {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 8px;
        min-height: var(--mob-yukseklik, 64px);
        padding-inline: max(10px, calc(var(--hdr-ic-bosluk) - 8px));
    }

    /* Cekmece soldan aciliyorsa hamburger de solda kalsin; sagdan aciliyorsa
       dugme sag uca gecer (bas parmak erisimi). */
    .ada-cek-sag .ada-mob-ic { grid-template-columns: 1fr auto auto; }
    .ada-cek-sag .ada-mob-logo { grid-column: 1; justify-content: flex-start; }
    .ada-cek-sag .ada-mob-aksiyon { grid-column: 2; }
    .ada-cek-sag .ada-cek-ac { grid-column: 3; order: 3; }

    .ada-mob-logo {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        text-decoration: none;
        /* Logo bir <a> (anasayfa baglantisi) ama yuksekligini GORSEL
           belirliyordu: 36px'lik bir logoda dokunma hedefi de 36px oluyordu.
           Kisa ekranda logo 28px'e inince 28px'e dusuyordu. Gorsel kucuk
           kalir, TIKLAMA ALANI 44px olur - bar zaten en az 48px. */
        min-height: 44px;
    }

    .ada-mob-logo img {
        display: block;
        height: var(--mob-logo, 36px);
        width: auto;
        max-width: 100%;
        object-fit: contain;
    }

    /* 44px dokunma hedefi — WCAG 2.5.8 ve iOS kilavuzu. */
    .ada-mob-dugme {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: var(--mob-ikon, #15171A);
        cursor: pointer;
        position: relative;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .ada-mob-dugme i { font-size: 20px; line-height: 1; }

    .ada-mob-dugme:active {
        background-color: color-mix(in srgb, var(--mob-ikon, #15171A) 10%, transparent);
    }

    .ada-mob-aksiyon { display: flex; align-items: center; gap: 2px; }

    /* --- Hamburger --- */
    .ada-hamburger {
        position: relative;
        display: block;
        width: 22px;
        height: 16px;
    }

    .ada-hamburger span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        border-radius: 2px;
        background-color: var(--mob-ikon, #15171A);
        transition: transform var(--ada-sure, 260ms) var(--ada-egri, ease),
                    opacity var(--ada-sure-hizli, 160ms) var(--ada-egri, ease),
                    top var(--ada-sure, 260ms) var(--ada-egri, ease);
    }

    .ada-hamburger span:nth-child(1) { top: 0; }
    .ada-hamburger span:nth-child(2) { top: 7px; }
    .ada-hamburger span:nth-child(3) { top: 14px; }

    .ada-cek-ac[aria-expanded="true"] .ada-hamburger span:nth-child(1) { top: 7px; transform: rotate(45deg); }
    .ada-cek-ac[aria-expanded="true"] .ada-hamburger span:nth-child(2) { opacity: 0; }
    .ada-cek-ac[aria-expanded="true"] .ada-hamburger span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

    /* --- Mobil arama seridi --- */
    .ada-mob-arama {
        border-top: 1px solid var(--hdr-kenarlik, #DFD9CF);
        padding: 10px max(10px, calc(var(--hdr-ic-bosluk) - 8px));
    }

    .ada-mob-arama .ada-arama-form { padding: 0; gap: 6px; }
    .ada-mob-arama .ada-arama-ikon { left: 14px; }
    .ada-mob-arama .ada-arama-form input[type="search"] { height: 44px; }
    .ada-mob-arama .ada-arama-form .btn { height: 44px; padding-inline: 16px; }

    /* --- Ust bar mobilde: tek satir, yatay kaydirmali --- */
    .ada-ust-ic {
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        /* Serit tasarsa kenarlarda kesilme yerine yumusak solma. */
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
                mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
    }

    .ada-ust-ic::-webkit-scrollbar { display: none; }

    .ada-ust-sol,
    .ada-ust-sag { flex: 0 0 auto; }

    /* MOBILDE NE GORUNECEGINE PANEL KARAR VERIR.
       `top_mobil` listesinde OLMAYAN her oge sablonda bu sinifi aliyor.
       Onceden burada sabit kurallar vardi (sosyal hep gizli, e-posta hep
       gizli); artik yonetici secebiliyor - varsayilanlar ayni davranisi
       veriyor, yani goc sonrasi gorunum degismiyor. */
    .ada-ust-mobil-gizli { display: none !important; }

    /* Bos kalan sutun yer kaplamasin (tum ogeleri mobilde gizlenmisse). */
    .ada-ust-sol:empty,
    .ada-ust-sag:empty { display: none; }

    /* DOKUNMA HEDEFLERI (iOS kilavuzu / WCAG 2.5.5): mobilde 44px.
       Serit boyu sismesin diye dikey dolgu sifirlaniyor - serit tam 44px. */
    .ada-ust-ic { padding-block: 0; min-height: 44px; }
    .ada-ust-oge { height: 44px; padding: 0 10px; }
    .ada-ust-btn { min-height: 40px; padding: 6px 14px; font-size: 11px; display: inline-flex; align-items: center; }

    /* Sosyal ikon mobilde gorunuyorsa dokunma hedefi 40px'e cikar (serit
       44px; 32px'lik daire icinde kaybolurdu). */
    .ada-ust-sosyal { width: 40px; height: 40px; }

    /* --- Mobil hiza: panelden (top_mobil_hiza) ---
       "dugme" duzeninde ogeler zaten esit bolunuyor, hiza anlamsiz - bu yuzden
       kurallar o duzen DISINDA uygulaniyor. */
    .ada-hdr:not(.ada-ust-duzen-dugme).ada-ust-mob-sol  .ada-ust-ic { justify-content: flex-start; }
    .ada-hdr:not(.ada-ust-duzen-dugme).ada-ust-mob-sag  .ada-ust-ic { justify-content: flex-end; }
    .ada-hdr:not(.ada-ust-duzen-dugme).ada-ust-mob-orta .ada-ust-ic { justify-content: center; }
    .ada-hdr:not(.ada-ust-duzen-dugme).ada-ust-mob-yay  .ada-ust-ic { justify-content: space-between; }

    /* "Yay" disinda iki sutun bitisik durmali, yoksa hiza anlamsizlasir. */
    .ada-ust-mob-sol  .ada-ust-sol, .ada-ust-mob-sol  .ada-ust-sag,
    .ada-ust-mob-sag  .ada-ust-sol, .ada-ust-mob-sag  .ada-ust-sag,
    .ada-ust-mob-orta .ada-ust-sol, .ada-ust-mob-orta .ada-ust-sag { flex: 0 0 auto; }
}

/* =============================================================================
   MOBIL UST BAR DUZENLERI  (<=767.98px)
   -----------------------------------------------------------------------------
   Panelden secilen `top_mobil_duzen` degeri <header>'a bir sinif olarak
   geliyor; isaretleme UCUNDE DE AYNI (bkz. header-ust.php).

     ada-ust-duzen-ikon   yalnizca ikon      - en dar serit (44px)
     ada-ust-duzen-metin  ikon + uzun deger  - yatay kaydirilabilir
     ada-ust-duzen-dugme  esit genislikte dokunma dugmeleri  [VARSAYILAN]

   🪤 "DUGME" DUZENI NEDEN VARSAYILAN OLDU:
   Onceki ikon-only serit uc kucuk ikonu ekranin ortasinda birakiyordu; genislik
   kullanilmiyor, ne oldugu okunmuyor, TEKLIF AL yarim kesik goruntu veriyordu
   (ekran goruntusuyle yakalandi). Esit bolunmus dugmeler hem tam genisligi
   kullaniyor hem her biri 44px'lik gercek bir dokunma hedefi oluyor.

   Esik 767.98: projenin MEVCUT semasindan (yeni bir esik acilmadi).
   ========================================================================== */
@media screen and (max-width: 767.98px) {

    .ada-ust-sag { gap: 2px; }
    .ada-ust-oge i { font-size: 17px; }

    /* Mobilde ayirici cizgileri kaldir: dar seritte gorsel gurultu. */
    .ada-ust-ayirici .ada-ust-sag > * + *:not(.btn)::before { display: none; }
    .ada-ust-ayirici .ada-ust-sag > * + *:not(.btn) { margin-left: 0; }


    /* --- DUZEN: ikon ---------------------------------------------------- */
    .ada-ust-duzen-ikon .ada-ust-oge {
        width: 44px;
        justify-content: center;
        padding: 0;
        gap: 0;
    }

    .ada-ust-duzen-ikon .ada-ust-oge > span { display: none; }


    /* --- DUZEN: metin --------------------------------------------------- */
    /* Uzun degerler (e-posta, adres, saat) seridi tasirmasin. */
    .ada-ust-duzen-metin .ada-ust-oge-uzun .ada-ust-metin {
        max-width: 40vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


    /* --- DUZEN: dugme  [varsayilan] ------------------------------------- */
    /* `display: contents` ile sol/sag sarmallari yerlesimden cikiyor, boylece
       ogeler TEK bir flex satirinda esit bolunuyor. Sarmallar DOM'da kaliyor
       (ayirici ve mobil gizleme kurallari onlara bakiyor). */
    .ada-ust-duzen-dugme .ada-ust-sol,
    .ada-ust-duzen-dugme .ada-ust-sag { display: contents; }

    .ada-ust-duzen-dugme .ada-ust-ic {
        gap: 6px;
        padding-block: 6px;
        min-height: 0;
        /* Esit bolunduğu icin tasma yok: kaydirma ve solma maskesi kapali. */
        overflow: visible;
        -webkit-mask-image: none;
                mask-image: none;
    }

    .ada-ust-duzen-dugme .ada-ust-oge,
    .ada-ust-duzen-dugme .ada-ust-btn,
    .ada-ust-duzen-dugme .ada-ust-sosyal-grup,
    .ada-ust-duzen-dugme .ada-ust-dil-sarmal {
        flex: 1 1 0;
        min-width: 0;
        height: 42px;
        margin: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        border-radius: var(--ada-r-sm, 6px);
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
    }

    /* Iletisim ogeleri: seridin kendi rengiyle uyumlu, hafif zeminli kutu. */
    .ada-ust-duzen-dugme .ada-ust-oge {
        padding: 0 8px;
        background-color: color-mix(in srgb, var(--ust-yazi, #FFFFFF) 12%, transparent);
    }

    .ada-ust-duzen-dugme .ada-ust-oge:active {
        background-color: color-mix(in srgb, var(--ust-yazi, #FFFFFF) 22%, transparent);
    }

    /* Uzun degerin yerine KISA ETIKET. */
    .ada-ust-duzen-dugme .ada-ust-metin { display: none; }
    .ada-ust-duzen-dugme .ada-ust-kisa {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Dugmeler (Teklif Al / Sipariş Takip) zaten vurgulu; yalnizca esitlensin. */
    .ada-ust-duzen-dugme .ada-ust-btn { padding: 0 10px; }

    /* Sosyal grubu tek bir segmentte toplar. */
    .ada-ust-duzen-dugme .ada-ust-sosyal-grup {
        background-color: color-mix(in srgb, var(--ust-yazi, #FFFFFF) 12%, transparent);
        gap: 2px;
    }

    .ada-ust-duzen-dugme .ada-ust-sosyal { width: 34px; height: 34px; }

    /* Tek oge kalirsa serit boyunca yayilmasin - ortada dursun. */
    .ada-ust-duzen-dugme .ada-ust-ic { justify-content: center; }
    .ada-ust-duzen-dugme .ada-ust-oge,
    .ada-ust-duzen-dugme .ada-ust-btn { max-width: 240px; }
}


/* =============================================================================
   10. CEKMECE (mobil menu)
   ========================================================================== */

/* Z-INDEX SECIMI - OLCULEN DEGERLER
   Cerez bandi (cookieconsent kutuphanesi) 9999, yuzen dugmeler 999,
   gorsel buyutme katmani 1000, sabit header 900. Cekmece hepsinin ustunde
   olmali: cerez bandi altta kalirsa cekmecenin alt ucte biri kullanilamiyor
   (390x780'de olculdu: band 566..780). */
.ada-cek-perde {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background-color: rgba(23, 26, 25, .5);
    opacity: 0;
    transition: opacity var(--ada-sure, 260ms) var(--ada-egri, ease);
}

.ada-cek-perde.ada-acik { opacity: 1; }

.ada-cekmece {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    width: min(400px, 88vw);
    background-color: var(--cek-bg, #FFFFFF);
    color: var(--cek-yazi, #15171A);
    box-shadow: 0 0 40px rgba(23, 26, 25, .25);
    transition: transform var(--ada-sure, 260ms) var(--ada-egri, ease);
    /* Govde kaydirmasi kilitlendiginde cekmece kendi icinde kayar. */
    overscroll-behavior: contain;
}

/* Yon sinifi CEKMECENIN KENDI uzerinde: <header>'a bakan bir secici
   kullanilamaz, cekmece artik header'in disinda (bkz. header-cekmece.php). */
.ada-cekmece.ada-cek-yon-sag { right: 0; transform: translateX(100%); }
.ada-cekmece.ada-cek-yon-sol { left: 0;  transform: translateX(-100%); }

.ada-cekmece.ada-acik { transform: translateX(0); }

/* [hidden] ozniteligini display ile degil gorunurlukle yonetiyoruz ki
   acilma/kapanma gecisi calissin; JS once hidden'i kaldirip sonra
   .ada-acik ekliyor (bkz. header-modern.js). */
.ada-cekmece[hidden],
.ada-cek-perde[hidden] { display: none; }

.ada-cek-ust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--cek-kenarlik, #EBEBEB);
    flex: 0 0 auto;
}

.ada-cek-logo img { display: block; height: 34px; width: auto; }

.ada-cek-kapat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--cek-yazi, #15171A);
    font-size: 20px;
    cursor: pointer;
    flex: 0 0 auto;
}

.ada-cek-kapat:active { background-color: color-mix(in srgb, var(--cek-yazi, #15171A) 10%, transparent); }

.ada-cek-govde {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
}

/* --- Cekmece ici arama --- */
.ada-cek-arama {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px;
}

.ada-cek-arama > i {
    position: absolute;
    left: 14px;
    color: var(--ada-40, #A9A398);
    pointer-events: none;
}

.ada-cek-arama input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    padding: 0 12px 0 38px;
    border: 1px solid var(--cek-kenarlik, #EBEBEB);
    border-radius: var(--ada-r-md, 10px);
    background-color: #FFFFFF;
    color: var(--ada-95, #171A19);
}

.ada-cek-arama button {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border: 0;
    border-radius: var(--ada-r-md, 10px);
    background-color: var(--ada-vurgu, #C2603C);
    color: #FFFFFF;
    cursor: pointer;
}

/* --- Cekmece menusu --- */
.ada-cek-menu,
.ada-cek-alt {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ada-cek-satir {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--cek-kenarlik, #EBEBEB);
}

.ada-cek-satir > a {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-height: 50px;
    padding: 12px 16px;
    color: var(--cek-yazi, #15171A);
    font-size: 15px;
    line-height: 1.3;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.ada-cek-satir > a:active { background-color: var(--ada-05, #F7F5F1); }

.ada-cek-ok {
    flex: 0 0 auto;
    width: 50px;
    border: 0;
    border-left: 1px solid var(--cek-kenarlik, #EBEBEB);
    background: transparent;
    color: var(--cek-yazi, #15171A);
    font-size: 18px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.ada-cek-ok i { transition: transform var(--ada-sure, 260ms) var(--ada-egri, ease); }
.ada-cek-ok[aria-expanded="true"] i { transform: rotate(180deg); }

/* Alt menuler JS varken kapali baslar; JS yoksa acik kalir (erisilebilirlik).

   🪤 `grid-template-rows: 0fr` DENENDI VE CALISMADI. O teknik tek satirlik bir
   kapsayici icindir: burada <ul> icinde BIRDEN COK <li> var, 0fr yalnizca
   BIRINCI satiri kapatiyor, kalan <li>'ler ortuk satirlarda auto boyutta
   kaliyordu. Olculdu - acmadan once de actiktan sonra da yukseklik 102px.
   max-height yaklasimi kaba ama guvenilir; bitis "sicramasini" gizlemek icin
   opacity de birlikte gecis yapiyor.

   visibility: max-height:0 iceriginde baglantilar hala ODAKLANABILIR olurdu
   (Tab tusu gorunmeyen menuye giriyordu). visibility:hidden bunu keser;
   acilirken gecikmesiz, kapanirken gecis sonunda uygulanir. */
.ada-hdr-js .ada-cek-alt {
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    background-color: color-mix(in srgb, var(--cek-yazi, #15171A) 4%, transparent);
    transition: max-height var(--ada-sure, 260ms) var(--ada-egri, ease),
                opacity var(--ada-sure-hizli, 160ms) var(--ada-egri, ease),
                visibility var(--ada-sure, 260ms) step-end;
}

.ada-hdr-js .ada-cek-alt.ada-acik {
    max-height: 120vh;
    visibility: visible;
    opacity: 1;
    transition: max-height var(--ada-sure, 260ms) var(--ada-egri, ease),
                opacity var(--ada-sure-hizli, 160ms) var(--ada-egri, ease),
                visibility var(--ada-sure, 260ms) step-start;
}

.ada-cek-alt .ada-cek-satir > a { padding-left: 32px; font-size: 14px; }
.ada-cek-alt .ada-cek-alt .ada-cek-satir > a { padding-left: 48px; font-size: 13px; }

/* --- Cekmece dugmeleri --- */
.ada-cek-btnler {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px;
}

.ada-cek-btnler .btn {
    flex: 1 1 auto;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

/* --- Cekmece iletisim --- */
.ada-cek-iletisim {
    display: flex;
    flex-direction: column;
    padding: 6px 16px 12px;
    border-top: 1px solid var(--cek-kenarlik, #EBEBEB);
}

.ada-cek-iletisim a {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 6px 0;
    color: var(--cek-yazi, #15171A);
    font-size: 14px;
    text-decoration: none;
    word-break: break-word;
}

.ada-cek-iletisim i {
    width: 20px;
    text-align: center;
    font-size: 16px;
    color: var(--ada-vurgu, #C2603C);
    flex: 0 0 auto;
}

/* --- Cekmece alt bari: sosyal + dil --- */
.ada-cek-alt-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-top: 1px solid var(--cek-kenarlik, #EBEBEB);
}

.ada-cek-sosyal { display: flex; gap: 6px; flex-wrap: wrap; }

.ada-cek-sosyal a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--ada-05, #F7F5F1);
    color: var(--cek-yazi, #15171A);
    text-decoration: none;
}

.ada-cek-sosyal a:active { background-color: var(--ada-10, #EFEBE3); }
.ada-cek-sosyal i { font-size: 17px; }

.ada-dil-cek > summary { color: var(--cek-yazi, #15171A); border: 1px solid var(--cek-kenarlik, #EBEBEB); }
.ada-dil-cek .ada-dil-liste { right: 0; bottom: calc(100% + 6px); top: auto; }

/* Cekmece acikken govde kaydirmasi kilitli.
   iOS Safari `overflow:hidden`i <body> uzerinde YOK SAYAR; bu yuzden asil
   kilidi header-modern.js kuruyor (body position:fixed + kaydirma konumunu
   saklama). Buradaki kural masaustu ve Android icin yeterli olan katman.
   `overflow-x` kisitlamasi mobile-fixes.css'te; burada yalnizca dikey eksen
   kapatiliyor - `overflow` kisayolu KULLANILMIYOR ki clip degeri bozulmasin. */
.ada-cek-kilit { overflow-y: hidden; }
.ada-cek-kilit body { overflow-y: hidden; }

/* Cekmece acikken yuzen dugmeler sonuk kalsin: perdenin altinda yari gorunur
   duruyorlardi ve tiklanamadiklari halde tiklanabilir gibi duruyorlardi.
   Cagri eylemi kaybolmuyor - ayni numaralar cekmecenin iletisim listesinde. */
.ada-cek-kilit .cbh-phone,
.ada-cek-kilit .ada-tel-fab,
.ada-cek-kilit #return-to-top {
    opacity: 0;
    pointer-events: none;
}


/* =============================================================================
   11. GUVENLI ALAN (safe-area)
   -----------------------------------------------------------------------------
   mobile-fixes.css'teki mevcut env() kurallari BURADA YENIDEN TANIMLANMAZ;
   asagidakiler yalnizca bu dosyanin sahip oldugu yeni ogeler icin.

   viewport-fit=cover ile sayfa ekranin tamamini kapliyor:
     · header'in ILK gorunur seridi ust centigin altina inmeli,
     · yapiskan mobil bar kaydirilmis durumda da centigin altinda kalmali,
     · cekmece position:fixed oldugu icin body'nin yan paylarini ALMAZ -
       kendi yan ve alt paylarini tasimali.
   ========================================================================== */

/* Ust centik payi .ada-hdr uzerinde (1. bolum); yapiskan durumdaki pay
   sticky `top` hesabinda (8. bolum). Burada yalnizca YAN ve ALT paylar var. */

/* Yatay modda centik/kavis seritleri: serit ici bosluklar guvenli alanla
   toplanir, boylece icerik kavisin altinda kalmaz. */
.ada-ust-ic,
.ada-hdr-ic,
.ada-mob-ic {
    padding-left: max(var(--hdr-ic-bosluk), env(safe-area-inset-left, 0px));
    padding-right: max(var(--hdr-ic-bosluk), env(safe-area-inset-right, 0px));
}

@media screen and (max-width: 1100.98px) {
    .ada-mob-ic {
        padding-left: max(10px, env(safe-area-inset-left, 0px));
        padding-right: max(10px, env(safe-area-inset-right, 0px));
    }
}

/* Cekmece: ust centik, alt jest cubugu ve acildigi yandaki kavis payi. */
.ada-cekmece {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.ada-cekmece.ada-cek-yon-sag { padding-right: env(safe-area-inset-right, 0px); }
.ada-cekmece.ada-cek-yon-sol { padding-left: env(safe-area-inset-left, 0px); }

/* Cekmecenin son ogesi jest cubugunun altinda kalmasin. */
.ada-cek-govde { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }


/* =============================================================================
   13. MOBIL ALT MENU  (bottom navigation)
   -----------------------------------------------------------------------------
   Telefonlarda ekranin altinda sabit kisayol seridi. Yalnizca <=767.98px:
   1024px'lik bir tablette ekranin altini kaplayan serit yer israfi olur.
   (Mobil header esigi 1100.98; bu ayri ve bilerek.)

   `.ada-altm-var` sinifi <html> uzerinde ve PHP karar veriyor (header.php
   satir ici betigi). CSS "boyle bir eleman var mi" diye soramaz; `:has()`
   ile sorulabilirdi ama destegi olmayan tarayicida serit footer'in son
   satirini orterdi - pay verilmesi gereken yer tam olarak orasi.
   ========================================================================== */

.ada-altm { display: none; }

@media screen and (max-width: 767.98px) {

    .ada-altm {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 950;              /* yuzen dugmeler 999'un ALTINDA: onlar
                                      yukari itiliyor, ustunu ortmuyorlar */
        display: flex;
        align-items: stretch;
        background-color: var(--altm-bg, #FFFFFF);
        border-top: 1px solid var(--hdr-kenarlik, #DFD9CF);
        box-shadow: 0 -2px 12px rgba(23, 26, 25, .08);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }

    .ada-altm-oge {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-height: var(--altm-yukseklik, 58px);
        padding: 6px 2px;
        border: 0;
        background: transparent;
        color: var(--altm-ikon, #6E7170);
        font-size: 11px;
        line-height: 1.2;
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: color var(--ada-sure-hizli, 160ms) var(--ada-egri, ease);
    }

    .ada-altm-oge:hover,
    .ada-altm-oge:focus-visible { color: var(--altm-aktif, var(--ada-vurgu, #C2603C)); text-decoration: none; }
    .ada-altm-oge:active { background-color: color-mix(in srgb, var(--altm-ikon, #6E7170) 8%, transparent); }

    .ada-altm-aktif { color: var(--altm-aktif, var(--ada-vurgu, #C2603C)); }

    /* Aktif ogenin ustunde ince vurgu cizgisi - renk korlugunde de okunur
       olsun diye yalnizca renge guvenilmiyor. */
    .ada-altm-aktif::before {
        content: "";
        position: absolute;
        top: 0;
        width: 28px;
        height: 2px;
        border-radius: 0 0 2px 2px;
        background-color: var(--altm-aktif, var(--ada-vurgu, #C2603C));
    }

    .ada-altm-oge { position: relative; }

    .ada-altm-ikon {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 19px;
        line-height: 1;
    }

    .ada-altm-etiket {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 500;
    }

    /* Etiketsiz mod: ikon buyur, serit ayni yukseklikte kalir. */
    .ada-altm:not(.ada-altm-yazili) .ada-altm-etiket { display: none; }
    .ada-altm:not(.ada-altm-yazili) .ada-altm-ikon { font-size: 22px; }

    /* Sepet rozeti */
    .ada-altm-rozet {
        position: absolute;
        top: -6px;
        left: 60%;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        border-radius: 999px;
        background-color: var(--altm-aktif, var(--ada-vurgu, #C2603C));
        color: #FFFFFF;
        font-size: 10px;
        font-weight: 700;
        line-height: 17px;
        text-align: center;
    }

    /* --- SERIDIN ACTIGI YERI TELAFI ET ---------------------------------
       Serit `position:fixed`, yani akistan cikiyor ve sayfanin son satirini
       orterdi. Asagidakiler sayfa altina pay birakir ve sabit konumlu
       komsulari (yuzen dugmeler, cerez bandi) yukari iter.

       Yuzen dugmelerin `bottom` degerleri panelden/temadan geliyor
       (header_libs.php satir ici `#return-to-top{bottom:Xpx}`, style.css
       `.cbh-phone{bottom:20px}`, modern.css `.ada-tel-fab{bottom:150px}`).
       O degerler YENIDEN TANIMLANMIYOR; uzerine `margin-bottom` ekleniyor,
       boylece panel ayari gecerli kalir.

       🪤 `transform: translateY()` DENENDI VE YANLISTI: modern.css
       `#return-to-top:hover` ve `:active` durumlarinda kendi `transform`ini
       yaziyor. Dokunmatikte `:active` her dokunusta tetiklendigi icin dugme
       tam basildigi anda asagi ziplayip alt menunun uzerine biniyordu.
       `margin-bottom` transformdan bagimsiz - catisma yok. */
    /* +1px: seridin ust kenarligi. Kenarlik olmadan pay serit yuksekliginden
       1px eksik kaliyor ve son satirin alt kenari kil payi ortuluyor
       (olculdu: serit 59px, dolgu 58px). */
    .ada-altm-var body {
        padding-bottom: calc(var(--altm-yukseklik, 58px) + 1px + env(safe-area-inset-bottom, 0px));
    }

    .ada-altm-var .cbh-phone,
    .ada-altm-var .ada-tel-fab {
        margin-bottom: calc(var(--altm-yukseklik, 58px) + env(safe-area-inset-bottom, 0px));
    }

    /* #return-to-top'un margin-bottom'u mobile-fixes.css'te zaten safe-area
       payini tasiyor; burada serit yuksekligi EKLENIYOR (o kural ezilmiyor,
       ayni ozellik daha spesifik bir seciciyle yeniden yaziliyor). */
    .ada-altm-var #return-to-top {
        margin-bottom: calc(var(--altm-yukseklik, 58px) + env(safe-area-inset-bottom, 0px));
    }

    .ada-altm-var .cc-window.cc-banner,
    .ada-altm-var .cc-window.cc-floating {
        margin-bottom: calc(var(--altm-yukseklik, 58px) + env(safe-area-inset-bottom, 0px));
    }

    /* =======================================================================
       "IZNIMI GERI AL" SEKMESI TELEFONDA GIZLENIR
       -----------------------------------------------------------------------
       Once yukari itilmisti (bandla ayni sekilde) ama kullanici istedigi bu
       degildi: "kabul etmeme ragmen kaybolmuyor". Haklı - onay verildikten
       sonra ekranda kalici bir sekme tasimak telefonda yer israfi ve surekli
       bir gorsel gurultu.

       🪤 `revokable:false` YAPILMADI. O, sekmeyi MASAUSTUNDE de yok ederdi ve
       onayin geri alinmasi icin hicbir yol kalmazdi. KVKK'da onayin geri
       alinmasi, verilmesi kadar kolay olmali. Bu yuzden sekme yalnizca
       telefonda gizleniyor, masaustunde duruyor.

       🪤 TELEFONDA GERI ALMA YOLU KAYBOLMADI: modern.js `[data-ada-cerez]`
       tasiyan HERHANGI bir baglantiyi geri alma tetikleyicisine baglar.
       Cerez politikasi sayfasina ya da footer menusune boyle bir baglanti
       konursa telefonda da geri alinabilir.
       ==================================================================== */
    .cc-revoke { display: none !important; }

    /* Cekmece acikken serit perdenin ALTINDA kalir (z-index 950 < 10000);
       ayrica sonduruluyor ki yari gorunur bir menu tiklanabilir sanilmasin. */
    .ada-cek-kilit .ada-altm { opacity: 0; pointer-events: none; }
}


/* --- 13.1 KISA EKRAN (telefon YATAY) ------------------------------------
   🔴 OLCULDU: yatay tutulan kucuk telefonlarda yapiskan header + alt serit
   birlikte ekranin buyuk bolumunu yiyordu:

       740x360 yatay   header 120 + serit 59 = gorunur yuksekligin %87'si
       667x375 yatay   ...                   = %81
       390x844 dikey   ...                   = %29   (sorun yok)

   844px genisligindeki telefonlarda serit zaten gizleniyor (767.98 esigi),
   ama 740/667 gibi dar yatay olculer esigin ALTINDA kaliyor ve serit
   basiliyordu. Iceri icin geriye birkac piksel kaliyordu.

   ESIK NEDEN YUKSEKLIK: genislik AYIRMIYOR - 667px hem "yatay telefon"
   hem de "cok dar pencere" olabilir. Ayiran sey yukseklik.

   🪤 ESIK CIHAZIN CSS OLCUSUNE DEGIL, GORUNUR YUKSEKLIGE gore secilmeli;
   tarayici cubugu 80-90px yiyor. Ilk denemede 500px yazildi ve OLCUMDE
   320x568 DIKEY telefon da gizlendi (gorunur yukseklik 446) - dikey bir
   cihazda seridi kaldirmak acikca yanlisti.

       en kisa DIKEY  : 320x568 -> gorunur ~460-480px
       en uzun YATAY  : 740x360 -> gorunur ~320-340px
       (iPhone 15 Pro Max yatayi 430px ama GENISLIGI 932 - zaten esik disi)

   430px bu iki kumenin ARASINDA, iki yana da ~90px pay birakiyor.

   🪤 Bu bir YUKSEKLIK esigi; projenin 1100.98 / 767.98 GENISLIK semasiyla
   yarismiyor, onu KESIYOR. Yeni bir genislik breakpoint'i ACILMADI.

   Gezinme KAYBOLMUYOR: yapiskan mobil header'daki hamburger (cekmece) ve
   arama dugmesi yerinde duruyor - serit onlarin KISAYOLUYDU. */
@media screen and (max-width: 767.98px) and (max-height: 430px) {

    .ada-altm { display: none; }

    /* Serit basilmiyorsa payi da kaldir: aksi halde sayfanin altinda
       58px'lik BOS bir seride kalirdi (sinif <html> uzerinde ve PHP
       koyuyor - CSS'in "serit gorunuyor mu" diye sorma sansi yok). */
    .ada-altm-var body { padding-bottom: env(safe-area-inset-bottom, 0px); }

    /* Yuzen dugmeler ve cerez bandi da asagi insin - yukari itildikleri
       seridin yeri bos. Safe-area payi KORUNUYOR. */
    .ada-altm-var .cbh-phone,
    .ada-altm-var .ada-tel-fab,
    .ada-altm-var #return-to-top,
    .ada-altm-var .cc-window.cc-banner,
    .ada-altm-var .cc-window.cc-floating {
        margin-bottom: env(safe-area-inset-bottom, 0px);
    }
}


/* --- 13.2 KISA EKRANDA HEADER DE KUCULUR --------------------------------
   Alt serit gizlendikten sonra geriye kalan sorun YAPISKAN HEADER'di.
   Olculdu (667 ve 740px yatay, gorunur yukseklik 320px):

       ust serit (.ada-ust)   55px
       mobil bar              65px
       ------------------------------
       header toplam         120px  = ekranin %38'i, iceriye 200px kaliyor

   Yani seridi gizlemek yetmedi: header tek basina ekranin ucte birinden
   fazlasini yiyordu.

   🪤 GENISLIK SINIRI 1100.98, 767.98 DEGIL. Alt serit telefon kalibi (767.98)
   ama mobil header 1100.98'e kadar basiliyor ve yatay telefonlar 932px'e
   kadar cikiyor (iPhone 15 Pro Max). 767.98 yazilsaydi en buyuk telefonlarda
   header kucultulmezdi - tam da en cok yer kaplayan durumda.

   IKI MUDAHALE:
   1) Ust serit gizlenir. Tasidigi sey IKINCIL (telefon, WhatsApp, teklif) ve
      ERISIM KAYBOLMUYOR: ayni ogeler cekmecede ve yuzen dugmelerde duruyor.
   2) Mobil bar 64 -> 48px, logo 36 -> 28px. 48px hala 44px dokunma
      hedefinin USTUNDE - hamburger ve arama dugmesi kucultulmedi.

   Sonuc: 120px -> 48px (%38 -> %15), iceriye 200px yerine 272px.

   🪤 `--mob-yukseklik` DEGISKENINI EZMEYE CALISMA. Panel degerleri `:root`
   uzerine <body> ICINDEKI bir <style> blogundan yaziliyor; o blok bu
   dosyadan SONRA geldigi icin ayni ozgullukteki `:root` override'i KAYBEDER.
   Cozum: degiskeni degil, degiskeni TUKETEN kurali ez (ozgulluk ayni ama
   bu blok dosyada 946. satirdan sonra geliyor).

   Header YAPISKAN KALIR: alt serit de gizli oldugu icin tek kalici gezinme
   burasi. `--hdr-ust-yuk` JS tarafindan ResizeObserver ile yeniden olculuyor,
   ust serit gizlenince kendiliginden 0 oluyor.                             */
@media screen and (max-width: 1100.98px) and (max-height: 430px) {

    .ada-ust { display: none; }

    .ada-mob-ic { min-height: 48px; }
    .ada-mob-logo img { height: 28px; }

    /* Kargo/duyuru seridi de ikincil - kisa ekranda yer acsin. */
    .ada-kargo { display: none; }
}


/* =============================================================================
   12. HAREKETI AZALT — SON SOZ
   -----------------------------------------------------------------------------
   Bu blok dosyanin SONUNDA kalmali: yeni bolumler onun ONUNE eklenir.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .ada-hdr *,
    .ada-cekmece *,
    .ada-altm *,
    .ada-cek-perde {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}


/* =============================================================================
   AKTIF MENU ISARETI
   -----------------------------------------------------------------------------
   🔴 ONYUZDE HANGI SAYFADA OLUNDUGU MENUDEN ANLASILMIYORDU. Ziyaretci
   /sandalye-modelleri sayfasindayken menude hicbir oge isaretli degildi.

   Aktif durum HOVER ILE AYNI GORSEL DILI kullanir - uc menu stilinin
   (cizgi / hap / kutu) her biri icin ayri ayri. Yeni bir gorsel dil
   uydurmak menuyu ikiye bolerdi; "burasi" ile "uzerindesin" ayni sey
   gibi gorunmeli, farki KALICI olmasi.

   🪤 `:hover` KURALLARINA EKLENMEDI, AYRI YAZILDI. Ayni secici grubuna
   eklenseydi dokunmatik cihazlarda hover "yapisip" kalan ogelerle aktif
   ogeyi ayirt etmek imkansizlasirdi; ayrica hover kurallari panel
   stiline gore uc ayri blokta duruyor ve biri degisirse otekini bozardi.
   ========================================================================== */

/* --- Stil: CIZGI --- */
.ada-hdr-menu-cizgi .ada-menu-aktif > .ada-menu-bag::after { transform: scaleX(1); }

.ada-hdr-menu-cizgi .ada-menu-aktif > .ada-menu-bag {
    color: var(--hdr-vurgu, var(--ada-vurgu, #C2603C));
    font-weight: 600;
}

/* --- Stil: HAP --- */
.ada-hdr-menu-hap .ada-menu-aktif > .ada-menu-bag {
    background-color: var(--hdr-vurgu, var(--ada-vurgu, #C2603C));
    color: var(--hdr-yazi-hover, #FFFFFF);
}

/* --- Stil: KUTU --- */
.ada-hdr-menu-kutu .ada-menu-aktif > .ada-menu-bag {
    background-color: var(--hdr-vurgu, var(--ada-vurgu, #C2603C));
    color: var(--hdr-yazi-hover, #FFFFFF);
}

/* --- Acilir menu ogeleri --- */
.ada-alt-menu .ada-alt-aktif > a {
    background-color: color-mix(in srgb, var(--hdr-vurgu, #C2603C) 12%, transparent);
    color: var(--hdr-vurgu, var(--ada-vurgu, #C2603C));
    font-weight: 600;
}

/* --- Mobil cekmece --- */
.ada-cek-satir.ada-cek-aktif > a {
    color: var(--hdr-vurgu, var(--ada-vurgu, #C2603C));
    font-weight: 600;
}

/* Cekmecede sol kenar cizgisi: dar sutunda renk tek basina zayif kaliyor. */
.ada-cek-satir.ada-cek-aktif {
    position: relative;
    background-color: color-mix(in srgb, var(--hdr-vurgu, #C2603C) 8%, transparent);
    border-radius: var(--ada-r-sm, 6px);
}

.ada-cek-satir.ada-cek-aktif::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 3px;
    background-color: var(--hdr-vurgu, var(--ada-vurgu, #C2603C));
}

/* 🪤 `color-mix` desteklemeyen eski tarayicida arka plan hic uygulanmaz;
   yazi rengi ve kalinlik yine de aktifligi gosterir - isaret kaybolmaz. */