/* ============================================================
   ASME GOLD - Baslik ve vitrin bilesenleri

   Kurallar:
   - Renkler yalnizca tokens.css'teki degiskenlerden gelir; burada
     ciplak renk kodu yok. Koyu tema boylece kendiliginden calisir.
   - Satir ici style="" YOK: icerik guvenlik politikamiz statik oldugu
     icin tarayici satir ici stilleri engeller.
   - Altin, sayfayi kaplamaz. Vurgu, fiyat ve kucuk isaretlerde durur;
     genis altin dolgular markayi ucuzlatir ve kontrasti bozar.
   ============================================================ */

/* ------------------------------------------------------------
   1) DUYURU SERIDI
   Uc mesaj sirayla kayarak doner: cikan yukari suzulur, gelen
   asagidan gelir. Mesajlar ust uste konumlandigi icin serit
   yuksekligi hic degismez - sayfa zipda(ma)z.

   JavaScript kapaliyken ilk mesaj kalici olarak gorunur.
   ------------------------------------------------------------ */
.duyuru {
    background: var(--serit-zemin);
    color: var(--serit-metin);
    font-size: 1.25rem;          /* Rima ust serit 20 px kalin (2026-10-11) */
    font-weight: 700;
    line-height: 1.4;
}

.duyuru__ic {
    display: flex;
    align-items: center;
    gap: var(--uzay-3);
}

.duyuru__liste {
    position: relative;
    /* Kalan genisligi kapla: mesajlar tema dugmesinin solunda ortalanir. */
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    min-height: 38px;
    /* Kayan mesaj seridin disina tasmasin. */
    overflow: hidden;
}

/* --- Tema dugmesi ---
   Seridin sag ucunda. Hangi ikonun gorunecegini CSS secer ve mantik
   tokens.css'teki tema kurallarinin AYNISI: sistem tercihi esas,
   kullanici secimi onu ezer. Iki yerde ayni kosulu kurmak sart,
   yoksa ikon ile sayfa birbirinden ayri duser. */
.tema {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--serit-metin);
    cursor: pointer;
    opacity: .75;
    transition: opacity var(--gecis), background-color var(--gecis);
}

.tema[hidden] { display: none; }

.tema:hover {
    opacity: 1;
    background: rgba(255, 255, 255, .10);
}

.tema:focus-visible { outline-color: var(--serit-vurgu); }

.tema__ikon { width: 17px; height: 17px; }

/* Varsayilan (acik tema): ay gorunur - "karanliga gec" demek. */
.tema__ikon--gunes { display: none; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tema__ikon--ay { display: none; }
    :root:not([data-theme="light"]) .tema__ikon--gunes { display: inline-block; }
}

:root[data-theme="dark"] .tema__ikon--ay { display: none; }
:root[data-theme="dark"] .tema__ikon--gunes { display: inline-block; }

.duyuru__madde {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--uzay-2);
    text-align: center;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 420ms var(--gecis), transform 420ms var(--gecis);
    pointer-events: none;
}

.duyuru__madde--etkin {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

/* Sirasi biten mesaj yukari suzulerek cikar. */
.duyuru__madde--cikan {
    opacity: 0;
    transform: translateY(-100%);
}

.duyuru__ikon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--serit-vurgu);
}

@media (max-width: 899px) {
    .duyuru__liste { min-height: 36px; }
    .duyuru__madde { font-size: clamp(.9375rem, 4.2vw, 1.125rem); }   /* tema dugmesine yer kalsin */
    /* Dokunma hedefi kucultulmez; daralan sey mesaj alani olsun. */
    .tema { width: 34px; height: 34px; }
}

/* Hareket azaltma tercihi olan kullanici: donme yok. Genis ekranda uc
   mesaj yan yana durur, dar ekranda ilki gorunur. Boylece bilgi
   kaybolmaz ama hicbir sey kendiliginden hareket etmez. */
@media (prefers-reduced-motion: reduce) {
    .duyuru__madde { transition: none; }

    @media (min-width: 900px) {
        .duyuru__liste {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: var(--uzay-7);
        }

        .duyuru__madde {
            position: static;
            inset: auto;
            opacity: 1;
            transform: none;
            white-space: nowrap;
            pointer-events: auto;
        }
    }
}

/* ------------------------------------------------------------
   2) KUR SERIDI - yavas akan bant

   Bant, ayni listenin IKI kopyasini yan yana tasir ve tam bir kopya
   boyu (%50) kaydirilir. Dongu basa dondugunde goruntu ayni oldugu
   icin dikis yeri gorunmez.

   Fareyle uzerine gelince ve icine odaklanilinca DURUR: akan bir
   fiyati okumaya calisan kullaniciyi kovalamaya birakmamak gerek.

   Rakamlar tabular-nums ile hizali: her tazelemede sayilar
   yerinden oynamaz.
   ------------------------------------------------------------ */
.kur {
    --kur-hiz: 55s;

    background: var(--yuzey-batik);
    border-bottom: 1px solid var(--ayrac);
    font-size: .875rem;          /* Rima kur seridi 14 px */
}

.kur__ic {
    display: flex;
    align-items: center;
    gap: var(--uzay-4);
    min-height: 40px;
}

/* Akisi kirpan pencere. Kenarlarda yumusak bir soluklasma var ki
   kalemler bicakla kesilmis gibi bitmesin. */
.kur__pencere {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}

.kur__akis {
    display: flex;
    width: max-content;
    animation: kur-ak var(--kur-hiz) linear infinite;
}

.kur:hover .kur__akis,
.kur:focus-within .kur__akis {
    animation-play-state: paused;
}

@keyframes kur-ak {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.kur__liste {
    display: flex;
    align-items: center;
    gap: var(--uzay-5);
    /* Sondaki bosluk da kopyanin bir parcasi: iki kopya ancak boylece
       birebir ayni genislikte olur ve %50'lik kaydirma tam oturur. */
    padding: 0 var(--uzay-5) 0 0;
    margin: 0;
    list-style: none;
}

.kur__kalem {
    display: flex;
    align-items: baseline;
    gap: var(--uzay-2);
    white-space: nowrap;
}

.kur__ad {
    color: var(--metin-soluk);
    font-size: .875rem;
    font-weight: 400;
    letter-spacing: .02em;
}

.kur__fiyat {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--metin);
}

.kur__birim {
    color: var(--metin-soluk);
    font-size: .75rem;
    margin-left: calc(var(--uzay-1) * -1);
}

.kur__degisim {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    font-size: .875rem;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

/* Uc ok da isaretlemede duruyor; yonu ust ogenin sinifi secer.
   Boylece tazeleme sirasinda JavaScript SVG uretmek zorunda kalmaz. */
.kur__ok { width: 12px; height: 12px; display: none; }

.kur__degisim--arti .kur__ok--yukari,
.kur__degisim--eksi .kur__ok--asagi,
.kur__degisim--duz  .kur__ok--duz { display: inline-block; }

.kur__degisim--arti { color: var(--basari); }
.kur__degisim--eksi { color: var(--hata); }
.kur__degisim--duz  { color: var(--metin-soluk); }

.kur__zaman {
    margin: 0;
    flex-shrink: 0;
    color: var(--metin-soluk);
    font-size: .6875rem;
}

/* Kaynak erisilemiyorsa degerler eskimis demektir; bunu gizlemek
   bir kuyumcu sitesinde yanlis olur. */
.kur__zaman--bayat { color: var(--uyari); font-weight: 600; }

@media (max-width: 1023px) {
    .kur__zaman { display: none; }
}

/* Hareket azaltma tercihi: bant akmaz, elle kaydirilir. Ikinci kopya
   gizlenir, yoksa ayni fiyatlar iki kez gorunur. */
@media (prefers-reduced-motion: reduce) {
    .kur__pencere {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .kur__pencere::-webkit-scrollbar { display: none; }

    .kur__akis { animation: none; }
    .kur__liste[aria-hidden="true"] { display: none; }
}

/* ------------------------------------------------------------
   3) YAPISKAN BASLIK

   Logo satiri acik, menu satiri koyu.

   NEDEN BU SIRA (ikisi de denendi): tek bir koyu bant, basligi
   icerikten ayiran zemin cizgisi gibi calisir. Ikinci bir koyu bant
   eklendiginde -logo satiri da koyu yapilinca- icerikten once dort
   siraya giren koyu/acik/koyu/acik bir desen olusuyor ve goz nereye
   bakacagini bilemiyor. Ayrica sayfanin EN koyu, en zengin yeri hero
   kalmali: banner'lar zaten koyu, baslik da koyu olunca etkilerini
   yitiriyorlar. Beyaz alan bu sektorde lüksün kendisi.

   Alisveriste arama ve sepet her an ulasilabilir olmali, bu yuzden
   baslik + menu yapisir; duyuru ve kur seritleri yukari kayip gider.
   ------------------------------------------------------------ */
.yapiskan {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--yuzey-yukseltilmis);
}

/* TEK SATIR, HER OLCUDE: logo | arama | araclar.
   Onceki surumde dar ekranda arama ayri bir satira duser ve varsayilan
   olarak gizlenir, yanindaki bir ikonla acilirdi. Arama bir e-ticaret
   sitesinde birincil eylem; bir dokunus arkasina saklamak onu
   kullanilmaz yapiyordu. Artik telefonda da logo ile hamburger
   arasinda, ortada, tam genislikte duruyor. */
.baslik__ic {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "marka ara araclar";
    align-items: center;
    gap: var(--uzay-2);
    padding-block: var(--uzay-3);
}

.baslik__marka {
    grid-area: marka;
    display: block;
    line-height: 0;
}

.baslik__logo {
    height: 46px;
    width: auto;
}

@media (min-width: 900px) {
    .baslik__ic {
        gap: var(--uzay-6);
        padding-block: var(--uzay-4);
    }

    .baslik__logo { height: 64px; }
}

/* Dar ekranda arama cubuguna yer acmak icin logo ve gonder dugmesi
   bir tik kuculuyor. 320px'te bile girdi icin ~100px kaliyor. */
@media (max-width: 899px) {
    .baslik__logo { height: 42px; }

    .ara { padding: var(--uzay-1) var(--uzay-1) var(--uzay-1) var(--uzay-3); }
    .ara__dugme { width: 34px; height: 34px; }
    .ara__dugme .ikon { width: 17px; height: 17px; }
    .ara__girdi { min-height: 34px; font-size: .9rem; }
}

/* --- Arama --- */
.ara {
    grid-area: ara;
    display: flex;
    align-items: center;
    gap: var(--uzay-2);
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
    padding: var(--uzay-1) var(--uzay-1) var(--uzay-1) var(--uzay-4);
    background: var(--yuzey-batik);
    border: 1px solid transparent;
    border-radius: var(--yuvarlak-tam);
    transition: border-color var(--gecis), background-color var(--gecis);
}

.ara:focus-within {
    background: var(--yuzey-yukseltilmis);
    border-color: var(--vurgu);
}

.ara__girdi {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 38px;
    border: 0;
    background: transparent;
    color: var(--metin);
    font: inherit;
    font-size: .9375rem;
}

.ara__girdi::placeholder { color: var(--metin-soluk); }

/* Kendi odak halkamiz .ara uzerinde; girdinin ayri halkasi cift cizgi yapar. */
.ara__girdi:focus { outline: none; }

/* Safari'nin kendi temizleme dugmesi tasarimla catisiyor. */
.ara__girdi::-webkit-search-decoration,
.ara__girdi::-webkit-search-cancel-button { -webkit-appearance: none; }

.ara__dugme {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--dugme-zemin);
    color: var(--dugme-metin);
    cursor: pointer;
    transition: background-color var(--gecis);
}

.ara__dugme:hover { background: var(--dugme-zemin-hover); }

.ara__dugme .ikon { width: 19px; height: 19px; }

/* --- Hesap / favori / sepet --- */
.araclar {
    grid-area: araclar;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--uzay-1);
}

.araclar__dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--uzay-2);
    min-width: 44px;
    min-height: 44px;      /* dokunma hedefi: WCAG 2.5.8 */
    padding-inline: var(--uzay-2);
    border: 0;
    border-radius: var(--yuvarlak);
    background: transparent;
    color: var(--metin);
    font: inherit;
    cursor: pointer;
    transition: background-color var(--gecis), color var(--gecis);
}

.araclar__dugme:hover {
    background: var(--yuzey-batik);
    color: var(--vurgu);
}

.araclar__dugme .ikon { width: 21px; height: 21px; }

/* Hesap dugmesi bir baglanti; diger arac ikonlarindan ayirt
   edilmemeli - alt cizgi ve baglanti rengi istemiyoruz. */
a.araclar__dugme { text-decoration: none; color: var(--metin); }
a.araclar__dugme:hover { color: var(--vurgu); }

/* Sepet rozeti. Her sayfada gorunur (sayi oturumdan gelir, bkz.
   App\Http\SepetRozeti), o yuzden stili de her sayfada yuklenen bu
   dosyada. Renk dugme tokenlarindan (mavi zemin, beyaz yazi; 2026-10-11,
   once altin). */
.araclar__dugme { position: relative; }

.araclar__rozet {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding-inline: 5px;
    border-radius: var(--yuvarlak-tam);
    background: var(--dugme-zemin);
    color: var(--dugme-metin);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Mobil paneldeki "Sepetim" satirinin sayaci - koyu zeminde. */
.menu__sayac {
    margin-left: auto;
    min-width: 22px;
    padding-inline: 6px;
    border-radius: var(--yuvarlak-tam);
    background: var(--serit-dugme-zemin);
    color: var(--serit-dugme-metin);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
}

.araclar__etiket {
    display: none;
    max-width: 12ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .875rem;
    font-weight: 500;
}

@media (min-width: 1100px) {
    .araclar { gap: var(--uzay-2); }
    .araclar__dugme--hesap { padding-inline: var(--uzay-3); }
    .araclar__etiket { display: inline; }
}


/* --- Ana menu ---
   Zemin, en ustteki duyuru seridiyle AYNI koyu ton (--serit-* token'lari).
   Beyaz basligi ustte birakip koyu bandi alta koymak, basligi icerikten
   ayiran net bir zemin cizgisi veriyor. */
.menu {
    background: var(--serit-zemin);
    color: var(--serit-metin);
    /* Ust kenara ince bir isik cizgisi. Acik temada beyaz basligin
       altindaki koyu bari keskinlestirir; koyu temada ise basligi
       menuden ayiran TEK ipucu budur - iki ton arasindaki fark
       1.11:1, yani ciplak gozle neredeyse yok. */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}

.menu__liste {
    display: flex;
    align-items: center;
    /* safe center: icerik tastiginda basa doner. Duz "center" tasan bir
       esnek kutuda ilk ogeyi erisilemez yapar - dar telefonda dort menu
       maddesi bunu tetikleyebilir. Anlamayan tarayici ilk satiri kullanir. */
    justify-content: center;
    justify-content: safe center;
    gap: var(--uzay-2);
    margin: 0;
    padding: 0;
    list-style: none;
    /* Dar ekranda maddeler sigmazsa yatay kayar. */
    overflow-x: auto;
    scrollbar-width: none;
}

.menu__liste::-webkit-scrollbar { display: none; }

@media (min-width: 900px) {
    .menu__liste {
        gap: var(--uzay-6);
        /* Genis ekranda maddeler zaten siginiyor; tasmayi GORUNUR yapmak
           sart, yoksa acilir panel kayan kutunun icinde kirpilir. */
        overflow: visible;
    }
}

.menu__oge { position: relative; }

.menu__baglanti {
    position: relative;
    /* inline-flex: ikonlu maddelerde simge ile yazi ayni hizada dursun. */
    display: inline-flex;
    align-items: center;
    gap: var(--uzay-2);
    padding: var(--uzay-3) var(--uzay-2);
    color: var(--serit-metin);
    font-size: 1rem;             /* Rima ana menu 16 px (masaustunde normal, telefonda orta kalin) */
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--gecis);
}

@media (min-width: 900px) {
    .menu__baglanti {
        font-size: 1rem;
        font-weight: 400;
        padding-inline: var(--uzay-3);
    }
}

/* --- Menu ikonu ---
   Yalnizca bazi maddelerde var (config/vitrin.php icindeki 'ikon').
   Uc saniyede bir kisa bir cift ziplama yapar, arasinda uzun bir
   duraklama vardir: surekli hareket eden bir menu simgesi kisa surede
   rahatsiz edici olur, ara ara kipirdayan bir simge "canli" durur. */
.menu__ikon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: var(--serit-vurgu);
    animation: menu-ikon-kipir 3s ease-in-out infinite;
}

@keyframes menu-ikon-kipir {
    0%, 62%, 100% { transform: translateY(0); }
    70%           { transform: translateY(-3px); }
    78%           { transform: translateY(0); }
    86%           { transform: translateY(-1.5px); }
    93%           { transform: translateY(0); }
}

/* Hareket azaltma tercihi olan kullanicida simge durur; base.css'teki
   genel kural animasyon suresini zaten kisiyor, burasi niyeti acikca
   yaziyor. */
@media (prefers-reduced-motion: reduce) {
    .menu__ikon { animation: none; }
}

/* Alt cizgi ::after ile cizilir: yaziyi kaydirmadan buyur, layout
   kaymasi olmaz. */
.menu__baglanti::after {
    content: "";
    position: absolute;
    left: var(--uzay-2);
    right: var(--uzay-2);
    bottom: 6px;
    height: 2px;
    border-radius: 2px;
    /* Serit koyu/mavi zeminde: genel --vurgu orada okunmaz. Serit kendi
       vurgu tonunu kullanir (acikta beyaz 8.88:1, koyuda #8fa8ec; 2026-10-11). */
    background: var(--serit-vurgu);
    transform: scaleX(0);
    transition: transform var(--gecis);
}

.menu__baglanti:hover { color: var(--serit-vurgu); }
.menu__baglanti:hover::after { transform: scaleX(1); }

.menu__baglanti--etkin { color: var(--serit-vurgu); }
.menu__baglanti--etkin::after { transform: scaleX(1); }

/* Odak halkasi da serit zeminine gore: varsayilan (mavi) halka mavi seritte gorunmez. */
.menu__baglanti:focus-visible { outline-color: var(--serit-vurgu); }

/* ------------------------------------------------------------
   4) VITRIN (ana sayfa slider'i)

   JavaScript kapaliyken de calisir: ray, scroll-snap ile parmakla
   ve klavyeyle kaydirilabilir bir seritir. JavaScript yalnizca
   oklari, noktalari ve otomatik gecisi ekler.
   ------------------------------------------------------------ */
.vitrin {
    position: relative;
    background: var(--yuzey-batik);
    overflow: hidden;
}

.vitrin__ray {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.vitrin__ray::-webkit-scrollbar { display: none; }

/* Ray klavye ile odaklanabilir; halka gorselin uzerine tasmamali. */
.vitrin__ray:focus-visible { outline-offset: -3px; }

.vitrin__slayt {
    flex: 0 0 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

.vitrin__baglanti { display: block; line-height: 0; }

.vitrin__gorsel {
    width: 100%;
    /* Oran CSS'te sabit: gorsel yuklenmeden once de yer ayrilir,
       sayfa zipdayarak kaymaz (CLS). */
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

@media (min-width: 720px) {
    .vitrin__gorsel { aspect-ratio: 4 / 1; }
}

/* Mobil gorseli olmayan slayt dar ekranda gizlenir: 4:1 bir seridi
   telefona sigdirmak yaziyi okunmaz yapar, kirpmak yarisini keser. */
@media (max-width: 719px) {
    .vitrin__slayt--genis { display: none; }
}

/* --- Oklar --- */
.vitrin__ok {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--ayrac);
    border-radius: 50%;
    background: var(--yuzey-yukseltilmis);
    color: var(--metin);
    cursor: pointer;
    box-shadow: var(--golge);
    opacity: .85;
    transition: opacity var(--gecis), background-color var(--gecis);
}

.vitrin__ok:hover { opacity: 1; background: var(--yuzey-yukseltilmis); }
.vitrin__ok .ikon { width: 20px; height: 20px; }

.vitrin__ok--sol { left: var(--uzay-4); }
.vitrin__ok--sag { right: var(--uzay-4); }

/* Telefonda ok yok: parmakla kaydirmak zaten dogal ve oklar
   gorselin uzerinde yer kaplar. */
@media (min-width: 900px) {
    .vitrin__ok:not([hidden]) { display: inline-flex; }
}

/* --- Durdurma dugmesi ---
   Gorunurde yok. Otomatik gecen bir icerigin durdurulabilir olmasi
   gerekiyor (WCAG 2.2.2) ama banner uzerinde duran bir kutu istenmedi.
   Cozum, sitede zaten kullandigimiz "Icerige atla" kalibi: dugme
   ekran disinda bekler, yalnizca KLAVYEYLE odaklanildiginda kayarak
   gorunur hale gelir. Fare kullanan hic gormez. */
.vitrin__durdur {
    position: absolute;
    left: var(--uzay-4);
    bottom: -100px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: var(--uzay-2);
    padding: var(--uzay-2) var(--uzay-4);
    border: 1px solid var(--ayrac);
    border-radius: var(--yuvarlak-tam);
    background: var(--yuzey-yukseltilmis);
    color: var(--metin);
    font: inherit;
    font-size: .8125rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: var(--golge-lg);
    transition: bottom var(--gecis);
}

.vitrin__durdur[hidden] { display: none; }

.vitrin__durdur:focus-visible { bottom: var(--uzay-4); }

.vitrin__durdur-ikon { width: 14px; height: 14px; }

/* Duraklat / oynat: ikisi de isaretlemede, gorunuru aria-pressed secer. */
.vitrin__durdur-ikon--oynat { display: none; }
.vitrin__durdur[aria-pressed="true"] .vitrin__durdur-ikon--duraklat { display: none; }
.vitrin__durdur[aria-pressed="true"] .vitrin__durdur-ikon--oynat { display: inline-block; }

/* ------------------------------------------------------------
   5) BILDIRIM BALONU
   Henuz islevsiz ikonlara basildiginda kisa mesaj.
   ------------------------------------------------------------ */
.balon {
    position: fixed;
    left: 50%;
    bottom: var(--uzay-5);
    transform: translateX(-50%) translateY(8px);
    z-index: 200;
    max-width: calc(100% - var(--uzay-6));
    padding: var(--uzay-3) var(--uzay-5);
    border-radius: var(--yuvarlak-tam);
    background: var(--koyu-zemin);
    color: var(--ink-100);
    font-size: .875rem;
    box-shadow: var(--golge-lg);
    opacity: 0;
    transition: opacity var(--gecis), transform var(--gecis);
}

.balon[hidden] { display: none; }
.balon--gorunur { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ------------------------------------------------------------
   6) SAYFA ICI KUCUK PARCALAR
   ------------------------------------------------------------ */
.giris-metni {
    max-width: 58ch;
    margin-inline: auto;
    color: var(--metin-soluk);
    font-size: 1.125rem;         /* Rima giris metni 18 px */
}

.hata-kodu {
    margin: 0;
    font-family: var(--yazi-baslik);
    font-size: clamp(3rem, 2rem + 6vw, 5rem);
    line-height: 1;
    color: var(--vurgu);
}

/* ------------------------------------------------------------
   7) ALT BILGI

   Sutun sayisi ekrana gore degisir: telefonda tek, tablette iki,
   masaustunde uc. Sabit uc sutun, dar ekranda baglantilari okunmaz
   bir seride cevirirdi.

   Sutun basliklari baslik yazi tipiyle (Urbanist, 2026-09-29'a kadar
   Cormorant): sayfanin geri kalaniyla ayni ses.
   ------------------------------------------------------------ */
.alt-bilgi {
    margin-top: var(--uzay-9);
    background: var(--yuzey-batik);
    border-top: 1px solid var(--ayrac);
}

.alt-bilgi__izgara {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--uzay-7) var(--uzay-6);
    padding-block: var(--uzay-8);
}

@media (min-width: 560px) {
    .alt-bilgi__izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
    .alt-bilgi__izgara {
        /* Ucuncu sutun (sozlesmeler) hem daha uzun hem baslugi iki
           satira tasiyor; ona biraz daha pay veriyoruz. */
        grid-template-columns: 1fr 1fr 1.15fr;
        gap: var(--uzay-7) var(--uzay-8);
    }
}

.alt-bilgi__sutun { min-width: 0; }

.alt-bilgi__baslik {
    margin: 0 0 var(--uzay-4);
    font-family: var(--yazi-baslik);
    font-size: 1.25rem;          /* Rima alt bilgi sutun basligi 20 px normal kalinlik */
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--metin);
}

.alt-bilgi__liste {
    display: flex;
    flex-direction: column;
    gap: var(--uzay-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.alt-bilgi__baglanti {
    display: inline-block;
    /* Dikey dolgu dokunma hedefini buyutur: alt bilgi baglantilari
       telefonda birbirine cok yakin durur ve yanlis baglantiya
       basmak en can sikici hatalardan biridir. */
    padding-block: var(--uzay-2);
    color: var(--metin-soluk);
    font-size: .9375rem;
    text-decoration: none;
    transition: color var(--gecis);
}

.alt-bilgi__baglanti:hover {
    color: var(--vurgu);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Kunye --- */
.alt-bilgi__kunye {
    border-top: 1px solid var(--ayrac);
}

.alt-bilgi__kunye-ic {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--uzay-3);
    padding-block: var(--uzay-5);
    text-align: center;
}

@media (min-width: 720px) {
    .alt-bilgi__kunye-ic {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
    }
}

.alt-bilgi__logo {
    height: 52px;
    width: auto;
    opacity: .9;
}

.alt-bilgi__telif {
    margin: 0;
    color: var(--metin-soluk);
    font-size: .75rem;
}

.alt-bilgi__telif a { color: inherit; }
.alt-bilgi__telif a:hover,
.alt-bilgi__telif a:focus-visible { color: var(--vurgu); }

/* ------------------------------------------------------------
   8) BLOG BOLUMU (ana sayfa, alt bilginin hemen ustu)

   Uc kart: telefonda tek sutun, tablette iki, masaustunde uc.
   Kartlar esit yukseklikte durur (grid + flex), boylece "devamini
   oku" satirlari ayni hizada biter - farkli uzunluktaki ozetler
   yuzunden birbirinden kaymis kartlar dagink gorunur.
   ------------------------------------------------------------ */
.blog {
    /* Alt bilgi zaten kendi ust boslugunu tasiyor; ust uste binmesin. */
    padding-bottom: 0;
}

.blog__ust {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--uzay-4);
    margin-bottom: var(--uzay-6);
}

.blog__bolum-baslik {
    margin: 0;
    font-size: 1.875rem;         /* Rima bolum basligi 30 px */
}

.blog__tumu {
    display: inline-flex;
    align-items: center;
    gap: var(--uzay-1);
    flex-shrink: 0;
    color: var(--vurgu);
    font-size: .9375rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.blog__tumu:hover { text-decoration: underline; text-underline-offset: 3px; }
.blog__tumu-ok { width: 16px; height: 16px; }

.blog__izgara {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--uzay-5);
}

@media (min-width: 640px) {
    .blog__izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
    .blog__izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.blog__kart {
    /* position: relative -> baslik baglantisinin ::after'i karti kaplar. */
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--yuzey-yukseltilmis);
    border: 1px solid var(--kenarlik);
    border-radius: var(--yuvarlak-lg);
    transition: border-color var(--gecis), box-shadow var(--gecis), transform var(--gecis);
}

.blog__kart:hover {
    border-color: var(--vurgu);
    box-shadow: var(--golge-lg);
    transform: translateY(-2px);
}

/* Klavyeyle gezende de kart tepki versin: odak gorsel olarak
   baglantinin uzerinde degil, kartin tamaminda anlamli. */
.blog__kart:focus-within {
    border-color: var(--vurgu);
    box-shadow: var(--golge-lg);
}

.blog__gorsel {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform 400ms var(--gecis);
}

.blog__kart:hover .blog__gorsel { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
    .blog__kart:hover { transform: none; }
    .blog__kart:hover .blog__gorsel { transform: none; }
}

.blog__govde {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: var(--uzay-2);
    padding: var(--uzay-5);
}

.blog__etiket {
    margin: 0;
    color: var(--vurgu);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.blog__baslik {
    margin: 0;
    font-size: 1.125rem;         /* Rima blog karti 18 px kalin */
    font-weight: 700;
    line-height: 1.5;
}

.blog__baglanti {
    color: var(--metin);
    text-decoration: none;
}

.blog__baglanti:hover { color: var(--vurgu); }

/* Kartin tamamini tiklanabilir yapar. Tek baglanti oldugu icin
   klavyede tek durak, ekran okuyucuda tek okuma. */
.blog__baglanti::after {
    content: "";
    position: absolute;
    inset: 0;
}

.blog__ozet {
    margin: 0;
    color: var(--metin-soluk);
    font-size: .9375rem;
    line-height: 1.6;
}

.blog__devam {
    display: flex;
    align-items: center;
    gap: var(--uzay-1);
    /* margin-top: auto -> kart ne kadar uzun olursa olsun bu satir
       en altta kalir, uc kartta ayni hizada biter. */
    margin: auto 0 0;
    padding-top: var(--uzay-3);
    color: var(--vurgu);
    font-size: .875rem;
    font-weight: 600;
}

.blog__devam-ok {
    width: 15px;
    height: 15px;
    transition: transform var(--gecis);
}

.blog__kart:hover .blog__devam-ok { transform: translateX(3px); }

/* ------------------------------------------------------------
   9) "GEL AL" BILGILENDIRME BOLUMU

   Iki sutun: solda teslim ani, sagda uc adimlik akis. Sayfadaki
   diger bolumler ortali metin oldugu icin bu asimetrik blok
   ritmi kiriyor ve blogun kart izgarasina gecisi yumusatiyor.

   Adim numaralari CSS sayaci ile uretilir: isaretlemede <ol> var,
   numaralar oradan gelir; elle "1." "2." yazmak hem tekrar hem de
   bir adim eklenince bozulan bir sey olurdu.
   ------------------------------------------------------------ */
.gelal__kart {
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    background: var(--yuzey-yukseltilmis);
    border: 1px solid var(--kenarlik);
    border-radius: var(--yuvarlak-lg);
    box-shadow: var(--golge-sm);
}

@media (min-width: 900px) {
    .gelal__kart {
        /* Gorsel biraz dar: asil is sag sutunda, gorsel esliK ediyor. */
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    }
}

.gelal__gorsel-alan {
    /* Gorselin sutun yuksekligini doldurabilmesi icin. */
    position: relative;
    min-height: 100%;
}

.gelal__gorsel {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

@media (min-width: 900px) {
    .gelal__gorsel {
        position: absolute;
        inset: 0;
        aspect-ratio: auto;
    }
}

.gelal__govde {
    padding: var(--uzay-6) var(--uzay-5);
}

@media (min-width: 900px) {
    .gelal__govde { padding: var(--uzay-8) var(--uzay-7); }
}

.gelal__etiket {
    display: inline-flex;
    align-items: center;
    gap: var(--uzay-2);
    margin: 0 0 var(--uzay-3);
    color: var(--vurgu);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.gelal__etiket-ikon { width: 16px; height: 16px; }

/* "Cok yakinda" rozeti: etiketle ayni satirda. Yazi --metin (11.2:1); vurgu
   altinken --vurgu soluk zeminde 4.45:1 kaliyordu (AA'nin altinda). */
.gelal__rozet {
    margin-left: var(--uzay-1);
    padding: 2px var(--uzay-2);
    background: var(--vurgu-soluk);
    border-radius: var(--yuvarlak-tam);
    color: var(--metin);
    font-size: .6875rem;
    letter-spacing: .08em;
}

.gelal__baslik {
    margin: 0 0 var(--uzay-3);
    font-size: 1.875rem;
}

.gelal__giris {
    margin: 0 0 var(--uzay-6);
    max-width: 52ch;
    color: var(--metin-soluk);
}

/* --- Adimlar --- */
.gelal__adimlar {
    counter-reset: gelal-adim;
    display: flex;
    flex-direction: column;
    gap: var(--uzay-5);
    margin: 0 0 var(--uzay-6);
    padding: 0;
    list-style: none;
}

.gelal__adim {
    counter-increment: gelal-adim;
    position: relative;
    padding-left: calc(var(--uzay-7) + var(--uzay-1));
}

.gelal__adim::before {
    content: counter(gelal-adim);
    position: absolute;
    left: 0;
    top: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--vurgu-soluk);
    color: var(--vurgu);
    font-size: .9375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Adimlari birlestiren dikey cizgi: akisin sirali oldugunu gosterir.
   Son adimda cizgi olmaz, yoksa bosluga dogru uzar. */
.gelal__adim:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 17px;
    top: 38px;
    bottom: calc(var(--uzay-5) * -1);
    width: 1px;
    background: var(--ayrac);
}

.gelal__adim-baslik {
    margin: 0 0 var(--uzay-1);
    font-family: var(--yazi-govde);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
}

.gelal__adim-metin {
    margin: 0;
    color: var(--metin-soluk);
    font-size: .9375rem;
    line-height: 1.6;
}

/* --- Kazanclar --- */
.gelal__kazanclar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--uzay-3) var(--uzay-5);
    margin: 0 0 var(--uzay-6);
    /* padding-left 0: listenin varsayilan 40px girintisi satirlari
       baslik ve adimlarin hizasindan kaydiriyordu. */
    padding: var(--uzay-5) 0 0;
    border-top: 1px solid var(--ayrac);
    list-style: none;
}

.gelal__kazanc {
    display: flex;
    align-items: center;
    gap: var(--uzay-2);
    font-size: .875rem;
    font-weight: 500;
}

.gelal__kazanc-ikon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--vurgu);
}

.gelal__eylem { margin: 0; }

/* ------------------------------------------------------------
   10) ACILIR MENU (mega panel)

   Panel, menu maddesinin ICINDE duruyor. Bu bilincli: ayni <li>
   icinde oldugu icin :hover ve :focus-within ile JavaScript'siz de
   acilip kapaniyor. JavaScript yalnizca acma dugmesini, aria
   durumunu, Escape'i ve disariya tiklamayi ekliyor.

   DAR EKRANDA PANEL YOK. Yatay kayan bir menu seridinde acilan
   panel ya kirpilir ya da seridi bozar. Telefonda "Altın"a basan
   /altin sayfasina gider ve alt kategorileri orada gorur - dogru
   mobil cozum acilir menu degil, yan menu (drawer); o, menu
   buyudugunde ayri bir is olarak yapilacak.
   ------------------------------------------------------------ */
.menu__acici {
    display: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 34px;
    margin-left: calc(var(--uzay-2) * -1);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--serit-metin);
    cursor: pointer;
    transition: color var(--gecis);
}

.menu__acici:hover { color: var(--serit-vurgu); }
.menu__acici:focus-visible { outline-color: var(--serit-vurgu); }

.menu__acici-ok {
    width: 15px;
    height: 15px;
    transition: transform var(--gecis);
}

.menu__panel {
    display: none;
    position: absolute;
    top: 100%;
    left: calc(var(--uzay-3) * -1);
    z-index: 70;
    /* Genislik icerige gore: "Gumus" panelinde iki baslik var, "Altin"
       panelinde dort grup ve dokuz alt baglanti. Sabit genislik ilkini
       bombos, ikincisini sikisik gosterirdi. */
    width: max-content;
    max-width: min(92vw, 720px);
    padding: var(--uzay-5) var(--uzay-2) var(--uzay-5) var(--uzay-5);
    background: var(--serit-zemin);
    border: 1px solid rgba(255, 255, 255, .08);
    border-top: 0;
    border-radius: 0 0 var(--yuvarlak) var(--yuvarlak);
    box-shadow: var(--golge-lg);
}

.menu__panel-ic {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--uzay-5) 0;
}

/* Sutunlari ayiran ince altin cizgi - ekran goruntusundeki gibi. */
.menu__grup {
    padding-inline: var(--uzay-5) var(--uzay-5);
}

.menu__grup:nth-child(even) {
    border-left: 1px solid rgba(255, 255, 255, .22);
}

.menu__grup-baslik {
    display: flex;
    align-items: center;
    gap: var(--uzay-2);
    margin-bottom: var(--uzay-3);
    color: var(--serit-metin);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: color var(--gecis);
}

.menu__grup-baslik:hover { color: var(--serit-vurgu); }

.menu__alt-liste {
    display: flex;
    flex-direction: column;
    gap: var(--uzay-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu__grup-ikon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    color: var(--serit-vurgu);
}

.menu__alt-baglanti {
    display: flex;
    align-items: center;
    gap: var(--uzay-2);
    padding-block: var(--uzay-1);
    /* Grup basliklarindan bir kademe soluk: hiyerarsi renkle anlatiliyor.
       Kontrast 9.4:1, yani soluk olmasi okunurlugu bozmuyor. */
    color: rgba(247, 245, 242, .72);
    font-size: .875rem;
    text-decoration: none;
    transition: color var(--gecis);
}

/* Alt ikonlar SOLUK altin, grup basliklarininki tam altin: dokuz
   parlak ikon yan yana durunca panel karnaval gibi gorunuyordu.
   Hiyerarsi renk yogunlugundan okunuyor. */
.menu__alt-ikon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, .55);
    transition: color var(--gecis);
}

.menu__alt-baglanti:hover { color: var(--serit-vurgu); }
.menu__alt-baglanti:hover .menu__alt-ikon { color: var(--serit-vurgu); }
.menu__alt-baglanti:focus-visible { outline-color: var(--serit-vurgu); }

@media (min-width: 900px) {
    .menu__acici { display: inline-flex; }

    /* Fareyle uzerine gelince, icine odaklaninca veya dugmeyle acilinca.
       :focus-within sayesinde klavyeyle sekme tusuna basan kullanici
       JavaScript olmadan da panele girebiliyor. */
    .menu__oge--acilir:hover > .menu__panel,
    .menu__oge--acilir:focus-within > .menu__panel,
    .menu__oge--acik > .menu__panel {
        display: block;
    }

    .menu__oge--acilir:hover .menu__acici-ok,
    .menu__oge--acilir:focus-within .menu__acici-ok,
    .menu__oge--acik .menu__acici-ok {
        transform: rotate(180deg);
    }
}

/* ------------------------------------------------------------
   10b) MEGA MENU - gorselli panel (genis ekran, betik acik)

   AYNI ISARETLEME UC DUZEN:
     - dar ekran (panel/akordeon): ikonlu liste; gorseller, urun seridi,
       sahne basligi ve "Tumunu Gor" GIZLI.
     - genis ekran, betik KAPALI: yukaridaki eski iki sutunlu koyu liste
       (grup secimi ve urun seridi betik ister).
     - genis ekran, betik ACIK: acik zeminli genis panel. Solda gruplar
       (kucuk gorselli), sagda secili grubun sahnesi: gorselli alt
       kategoriler + urun seridi (/api/menu-urunleri, vitrin.js).

   YERLESIM: panel, .menu__kutu'ya gore konumlanir (madde static) ve
   kapsayicinin tam genisligini alir. Ic izgara iki sutun; .menu__grup
   "display: contents" ile kaybolur, boylece basliklar sol sutuna,
   sahneler sag sutuna yerlesir. Sahneler 1 / -1 ile TUM satirlari
   kaplar ve ust uste biner; yalnizca secili olan gorunur. Son satir
   1fr: sahnenin yuksekligi yalnizca o satiri buyutur (esnek izli
   kapsayan ogeler ayri adimda boyutlanir), basliklar sikisik kalir.

   PANEL ACIK ZEMINLI: urun fotograflari beyaz zeminde cekilmis; koyu
   bir panelde beyaz kareler yama gibi duruyordu. Koyu menu bariyla
   baglantiyi ustteki ince altin cizgi kuruyor.
   ------------------------------------------------------------ */

/* Varsayilan: genis-ekran-betikli duzene ozel parcalar gizli. */
.menu__grup-gorsel,
.menu__grup-ok,
.menu__alt-gorsel,
.menu__sahne-ust,
.menu__urunler,
.menu__alt-liste--kendisi,
.menu__panel--urunlu { display: none; }

@media (min-width: 900px) {
    .js .menu__kutu { position: relative; }

    /* Panel maddenin degil, menu kutusunun genisligini alsin. */
    .js .menu__oge--acilir,
    .js .menu__oge--urunlu { position: static; }

    .js .menu__oge--urunlu:hover > .menu__panel,
    .js .menu__oge--urunlu:focus-within > .menu__panel { display: block; }

    .js .menu__panel--mega {
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        padding: 0;
        overflow: hidden;
        background: var(--yuzey-yukseltilmis);
        color: var(--metin);
        border: 1px solid var(--kenarlik);
        border-top: 2px solid var(--serit-vurgu);
        border-radius: 0 0 var(--yuvarlak-lg) var(--yuvarlak-lg);
        box-shadow: var(--golge-lg);
    }

    .js .menu__panel--mega .menu__panel-ic {
        grid-template-columns: 264px minmax(0, 1fr);
        grid-template-rows: repeat(12, auto) 1fr;
        gap: 0;
        min-height: 340px;
        padding-block: var(--uzay-3);
        /* Sol sutunun zemini: ayri bir oge olsaydi izgarada yer kaplar,
           basliklari asagi iterdi. */
        background: linear-gradient(to right, var(--yuzey-batik) 264px, transparent 264px);
    }

    .js .menu__panel--urunlu .menu__panel-ic {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        min-height: 0;
        background: none;
    }

    .js .menu__panel--mega .menu__grup {
        display: contents;
    }

    /* --- Sol sutun: gruplar --- */
    .js .menu__panel--mega .menu__grup-baslik {
        grid-column: 1;
        display: flex;
        align-items: center;
        gap: var(--uzay-3);
        margin: 0 var(--uzay-3);
        padding: var(--uzay-2) var(--uzay-3);
        border-radius: var(--yuvarlak);
        color: var(--metin);
        font-size: 1rem;
        font-weight: 500;
        transition: background-color var(--gecis), color var(--gecis);
    }

    .js .menu__panel--mega .menu__grup-baslik:hover { color: var(--vurgu); }

    .js .menu__panel--mega .menu__grup--etkin > .menu__grup-baslik {
        background: var(--yuzey-yukseltilmis);
        color: var(--vurgu);
        box-shadow: var(--golge-sm);
    }

    .js .menu__panel--mega .menu__grup-baslik:focus-visible { outline-color: var(--odak-halka); }

    .js .menu__panel--mega .menu__grup-baslik--gorselli .menu__grup-ikon { display: none; }

    .js .menu__panel--mega .menu__grup-ikon {
        width: 22px;
        height: 22px;
        margin-inline: 9px;
        color: var(--vurgu);
    }

    .js .menu__panel--mega .menu__grup-gorsel {
        display: block;
        flex: none;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        background: var(--ink-0);
        box-shadow: 0 0 0 1px var(--kenarlik);
    }

    .js .menu__panel--mega .menu__grup-ad { flex: 1; min-width: 0; }

    .js .menu__panel--mega .menu__grup-ok {
        display: block;
        width: 16px;
        height: 16px;
        flex: none;
        opacity: .45;
    }

    .js .menu__panel--mega .menu__grup--etkin .menu__grup-ok { opacity: 1; }

    /* --- Sag sutun: sahne ---
       Kutucuklar ve urun kartlari AYNI olcude (--menu-kutu; patron 2026-10-07:
       gorseller standart olsun). Kutucuk sutunu icerigi kadar genis: tek
       kutucuklu grupta yaninda bos sutun kalmaz, urun seridi hemen baslar. */
    .js .menu__panel--mega .menu__grup-icerik {
        --menu-kutu: 148px;
        grid-column: 2;
        grid-row: 1 / -1;
        display: none;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "ust ust"
            "alt urun";
        align-content: start;
        gap: var(--uzay-4) var(--uzay-6);
        padding: var(--uzay-3) var(--uzay-6) var(--uzay-4);
    }

    .js .menu__panel--mega .menu__grup--etkin > .menu__grup-icerik,
    .js .menu__panel--urunlu .menu__grup-icerik { display: grid; }

    .js .menu__panel--mega .menu__grup-icerik--altsiz {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "ust"
            "urun";
    }

    .js .menu__panel--urunlu .menu__grup-icerik { grid-column: 1; grid-row: auto; }

    .js .menu__panel--mega .menu__sahne-ust {
        grid-area: ust;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--uzay-4);
        padding-bottom: var(--uzay-3);
        border-bottom: 1px solid var(--ayrac);
    }

    .js .menu__panel--mega .menu__sahne-baslik {
        font-family: var(--yazi-baslik);
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1.2;
    }

    .js .menu__panel--mega .menu__tumu {
        display: inline-flex;
        align-items: center;
        gap: var(--uzay-1);
        color: var(--vurgu);
        font-size: .875rem;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
    }

    .js .menu__panel--mega .menu__tumu:hover { text-decoration: underline; }
    .js .menu__panel--mega .menu__tumu-ok { width: 16px; height: 16px; }

    /* Alt kategoriler: gorselli kutucuklar, sabit olcu. Iki sutun; tek
       kutucuk (yaprak grup, tek alt kategori) tek sutun, uc kutucuk tek sira
       (2 + 1'de alttakinin yani bos kaliyordu), bes ve fazlasi uc sutun. */
    .js .menu__panel--mega .menu__alt-liste {
        grid-area: alt;
        display: grid;
        grid-template-columns: repeat(2, var(--menu-kutu));
        align-content: start;
        gap: var(--uzay-3);
    }

    .js .menu__panel--mega .menu__alt-liste:has(> li:only-child) { grid-template-columns: var(--menu-kutu); }
    .js .menu__panel--mega .menu__alt-liste:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, var(--menu-kutu)); }
    /* Bes ve fazlasi (22 Ayar Bilezik: Ajda, Burma, Simli, CNC, Örme - 2026-10-07) uc sutun: 2 + 2 + 1
       paneli uzatiyordu. */
    .js .menu__panel--mega .menu__alt-liste:has(> li:nth-child(5)) { grid-template-columns: repeat(3, var(--menu-kutu)); }

    .js .menu__panel--mega .menu__alt-baglanti {
        flex-direction: column;
        align-items: stretch;
        gap: var(--uzay-2);
        padding: var(--uzay-2);
        border: 1px solid var(--ayrac);
        border-radius: var(--yuvarlak);
        color: var(--metin);
        font-size: .875rem;
        font-weight: 500;
        text-align: center;
        /* border-color gecissiz: bkz. .mini-urun--kart. */
        transition: box-shadow var(--gecis), color var(--gecis);
    }

    .js .menu__panel--mega .menu__alt-baglanti:hover {
        border-color: var(--kenarlik-girdi);
        box-shadow: var(--golge);
        color: var(--vurgu);
    }

    .js .menu__panel--mega .menu__alt-baglanti:focus-visible { outline-color: var(--odak-halka); }

    .js .menu__panel--mega .menu__alt-ikon { display: none; }

    .js .menu__panel--mega .menu__alt-gorsel {
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 1;
        overflow: hidden;
        border-radius: var(--yuvarlak-sm);
        background: var(--ink-0);
    }

    .js .menu__panel--mega .menu__alt-gorsel img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .35s ease;
    }

    .js .menu__panel--mega .menu__alt-baglanti:hover .menu__alt-gorsel img { transform: scale(1.04); }

    /* Gorseli olmayan alt kategori: kendi ikonu, soluk altin zeminde. */
    .js .menu__panel--mega .menu__alt-gorsel:has(> .menu__alt-gorsel-ikon) { background: var(--vurgu-soluk); }

    .js .menu__panel--mega .menu__alt-gorsel-ikon {
        width: 42%;
        height: 42%;
        color: var(--vurgu);
    }

    /* Urun seridi: sigdigi kadar kart, tek satir. Kac kartin sigdigini
       seridin kendi genisligi belirler (container query); sigmayan kart
       gizlenir, klavyeyle de ulasilmaz. */
    .js .menu__panel--mega .menu__urunler:not([hidden]) {
        grid-area: urun;
        display: block;
        container-type: inline-size;
    }

    .js .menu__panel--mega .menu__urun-liste {
        display: grid;
        grid-template-columns: repeat(auto-fill, var(--menu-kutu));
        gap: var(--uzay-4);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* Yalnizca urunlu panelde (Sarrafiye) kutucuk yok: kartlar satiri doldurur
       (auto-fit: bos sutun kalmaz; sutun sayisi yine 148 px'e gore). */
    .js .menu__panel--urunlu .menu__urun-liste { grid-template-columns: repeat(auto-fit, minmax(var(--menu-kutu), 1fr)); }

    .js .menu__panel--mega .menu__urun-bos {
        margin: 0;
        padding: var(--uzay-5);
        border: 1px dashed var(--kenarlik);
        border-radius: var(--yuvarlak);
        color: var(--metin-soluk);
        font-size: .9375rem;
    }
}

/* 900-1099px: yan yana sigmiyor (urun seridine tek kart kaliyordu, olculdu);
   sahne tek sutun olur - ustte kutucuklar, altta urun seridi. */
@media (min-width: 900px) and (max-width: 1099px) {
    .js .menu__panel--mega .menu__panel-ic {
        grid-template-columns: 232px minmax(0, 1fr);
        background: linear-gradient(to right, var(--yuzey-batik) 232px, transparent 232px);
    }

    .js .menu__panel--urunlu .menu__panel-ic {
        grid-template-columns: minmax(0, 1fr);
        background: none;
    }

    .js .menu__panel--mega .menu__grup-icerik {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "ust"
            "alt"
            "urun";
        padding-inline: var(--uzay-5);
    }

    .js .menu__panel--mega .menu__alt-liste { grid-template-columns: repeat(auto-fill, var(--menu-kutu)); }
}

/* auto-fill 148px + 16px aralikla: <312 bir, <476 iki, <640 uc, <804 dort, <968 bes kart. */
@container (max-width: 967px) { .menu__urun-liste > li:nth-child(n + 6) { display: none; } }
@container (max-width: 803px) { .menu__urun-liste > li:nth-child(n + 5) { display: none; } }
@container (max-width: 639px) { .menu__urun-liste > li:nth-child(n + 4) { display: none; } }
@container (max-width: 475px) { .menu__urun-liste > li:nth-child(n + 3) { display: none; } }
@container (max-width: 311px) { .menu__urun-liste > li:nth-child(n + 2) { display: none; } }

/* ------------------------------------------------------------
   10c) MINI URUN KARTI  (parcalar/urun-mini.php)

   Arama onerisinde yatay satir, menu seridinde dikey kart. Tamami tek
   baglanti; sepet dugmesi yok. Gorsel zemini beyaz: urun fotograflari
   beyaz zeminde cekilmis, koyu temada da kare beyaz kalir (katalog
   kartiyla ayni karar).
   ------------------------------------------------------------ */
.mini-urun {
    display: flex;
    min-width: 0;
    color: var(--metin);
    text-decoration: none;
}

.mini-urun__gorsel {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--yuvarlak-sm);
    background: var(--ink-0);
}

.mini-urun__gorsel img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mini-urun__yer-tutucu { width: 45%; height: 45%; color: var(--mavi-acik); }

.mini-urun__govde {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mini-urun__ad {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: .875rem;          /* urun adi buyuk harf, normal kalinlik (Rima karti 15; mini kart 14) */
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: uppercase;
}

.mini-urun__alt {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px var(--uzay-2);
}

.mini-urun__fiyat {
    font-size: .9375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.mini-urun__fiyat-etiket {
    color: var(--metin-soluk);
    font-size: .75rem;
    font-weight: 400;
}

.mini-urun__fiyat--yok {
    color: var(--metin-soluk);
    font-size: .8125rem;
    font-weight: 400;
}

.mini-urun__tukendi {
    color: var(--metin-soluk);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.mini-urun--kart {
    flex-direction: column;
    gap: var(--uzay-2);
    height: 100%;
    padding: var(--uzay-2);
    border: 1px solid var(--ayrac);
    border-radius: var(--yuvarlak);
    /* border-color bilerek gecissiz: sahne degisince (display: none -> grid)
       Chrome kenari currentColor'dan baslatip kisa bir koyu cerceve
       gosteriyordu (ekran goruntusunde yakalandi, 2026-09-29). */
    transition: box-shadow var(--gecis);
}

.mini-urun--kart:hover {
    border-color: var(--kenarlik-girdi);
    box-shadow: var(--golge);
}

.mini-urun--kart:hover .mini-urun__ad { color: var(--vurgu); }

/* Dar kartta "Başlangıç" kendi satirinda; tutar bolunmez ("104.255,59" ile
   "₺" ayri satirlara dusuyordu). */
.mini-urun--kart .mini-urun__fiyat { white-space: nowrap; }
.mini-urun--kart .mini-urun__fiyat-etiket { display: block; }

.mini-urun--satir {
    align-items: center;
    gap: var(--uzay-3);
    padding: var(--uzay-2) var(--uzay-4);
}

.mini-urun--satir .mini-urun__gorsel {
    width: 52px;
    box-shadow: 0 0 0 1px var(--ayrac);
}

/* ------------------------------------------------------------
   10d) ARAMA ONERILERI  (parcalar/arama-onerileri.php)

   Kutunun hemen altinda, .yapiskan'in istifleme baglaminda z 75: menu
   barinin ve acik menu panelinin (70) ustunde. Dar ekranda arama kutusu
   dar oldugu icin liste BASLIGA gore konumlanir ve ekran genisligini
   (kenar boslugu birakarak) kullanir.
   ------------------------------------------------------------ */
.ara { position: relative; }

.ara__oneriler {
    position: absolute;
    top: calc(100% + var(--uzay-2));
    left: 0;
    right: 0;
    z-index: 75;
    max-height: min(72vh, 580px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--yuzey-yukseltilmis);
    color: var(--metin);
    border: 1px solid var(--kenarlik);
    border-radius: var(--yuvarlak-lg);
    box-shadow: var(--golge-lg);
}

@media (max-width: 899px) {
    .baslik { position: relative; }
    .ara { position: static; }

    .ara__oneriler {
        top: calc(100% - var(--uzay-2));
        left: var(--uzay-3);
        right: var(--uzay-3);
        max-height: calc(100dvh - 150px);
    }
}

.oneri__liste { padding-block: var(--uzay-2) 0; }

.oneri__grup + .oneri__grup {
    margin-top: var(--uzay-1);
    padding-top: var(--uzay-1);
    border-top: 1px solid var(--ayrac);
}

.oneri__baslik {
    margin: 0;
    padding: var(--uzay-2) var(--uzay-4) var(--uzay-1);
    color: var(--metin-soluk);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.oneri__kategori {
    display: flex;
    align-items: center;
    gap: var(--uzay-3);
    padding: var(--uzay-2) var(--uzay-4);
    color: var(--metin);
    text-decoration: none;
}

.oneri__kategori-ikon-alan {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 52px;
    height: 40px;
}

.oneri__kategori-ikon {
    width: 36px;
    height: 36px;
    padding: 8px;
    border-radius: 50%;
    background: var(--vurgu-soluk);
    color: var(--vurgu);
}

.oneri__kategori-metin {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.oneri__kategori-ad { font-size: .9375rem; font-weight: 600; }
.oneri__kategori-ust { color: var(--metin-soluk); font-size: .75rem; }

/* Secili satir: zemin + soldaki altin cizgi (yalnizca renge dayanmasin). */
.oneri [role="option"]:hover,
.oneri [role="option"][aria-selected="true"] { background: var(--yuzey-batik); }

.oneri [role="option"][aria-selected="true"] { box-shadow: inset 3px 0 0 var(--vurgu); }

.oneri__tumu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uzay-3);
    margin-top: var(--uzay-2);
    padding: var(--uzay-3) var(--uzay-4);
    border-top: 1px solid var(--ayrac);
    color: var(--vurgu);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}

.oneri__tumu-ok { width: 16px; height: 16px; flex: none; }

.oneri__bos { padding: var(--uzay-4); }

.oneri__bos-baslik { margin: 0 0 var(--uzay-1); font-weight: 600; }

.oneri__bos-metin {
    margin: 0;
    color: var(--metin-soluk);
    font-size: .875rem;
}

/* ------------------------------------------------------------
   11) YASAL BELGELER

   Uzun metin okunabilirliginin tek onemli olcusu satir uzunlugudur:
   65 karakteri gecen satirlarda goz, satir sonundan bir sonraki
   satirin basina donerken yerini kaybeder. Bu yuzden belge govdesi
   .kapsayici'nin 1200px'ine yayilmaz, 68ch'de durur.
   ------------------------------------------------------------ */
.belge {
    max-width: 68ch;
    margin-inline: auto;
    padding-block: var(--uzay-8) var(--uzay-9);
}

.belge__ust {
    padding-bottom: var(--uzay-5);
    margin-bottom: var(--uzay-6);
    border-bottom: 1px solid var(--ayrac);
}

.belge__ust h1 { margin-bottom: var(--uzay-2); }

.belge__tarih {
    margin: 0;
    color: var(--metin-soluk);
    font-size: .875rem;
}

.belge__bolum { margin-bottom: var(--uzay-7); }

.belge__bolum h2 {
    margin-top: 0;
    margin-bottom: var(--uzay-4);
    font-size: 1.5rem;
    /* Baslik, kendinden onceki metinden uzak, kendi metnine yakin
       dursun: yakinlik hangi metnin hangi baslika ait oldugunu
       numaralandirmadan anlatir. */
    scroll-margin-top: 140px;
}

.belge__bolum h3 {
    margin-top: var(--uzay-5);
    margin-bottom: var(--uzay-2);
    font-family: var(--yazi-govde);
    font-size: 1.125rem;         /* Rima 18 px */
    font-weight: 600;
    letter-spacing: 0;
}

.belge__bolum p,
.belge__bolum li { line-height: 1.7; }

.belge__bolum ul,
.belge__bolum ol {
    margin: 0 0 var(--uzay-4);
    padding-left: var(--uzay-5);
}

.belge__bolum li { margin-bottom: var(--uzay-2); }

.belge__bolum a { color: var(--vurgu); }

/* Giris ozeti: belgenin en onemli cumlesi, gormeden gecilmesin. */
.belge__ozet {
    padding: var(--uzay-4) var(--uzay-5);
    background: var(--yuzey-batik);
    border-left: 3px solid var(--vurgu);
    border-radius: 0 var(--yuvarlak) var(--yuvarlak) 0;
    font-size: 1.125rem;
}

/* Vurgulu bolum: cayma hakki istisnasi gibi, atlanmasi pahaliya
   mal olacak maddeler. */
.belge__bolum--vurgu {
    padding: var(--uzay-5);
    background: var(--yuzey-batik);
    border: 1px solid var(--kenarlik);
    border-radius: var(--yuvarlak-lg);
}

.belge__uyari {
    padding: var(--uzay-3) var(--uzay-4);
    background: var(--vurgu-soluk);
    border-radius: var(--yuvarlak);
    color: var(--metin);
}

/* --- Kunye listesi (etiket / deger) --- */
.belge__kunye {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--uzay-1) var(--uzay-4);
    margin: 0 0 var(--uzay-4);
}

@media (min-width: 620px) {
    .belge__kunye {
        grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
        gap: var(--uzay-3) var(--uzay-5);
    }
}

.belge__kunye dt {
    color: var(--metin-soluk);
    font-size: .9375rem;
    font-weight: 600;
}

.belge__kunye dd {
    margin: 0 0 var(--uzay-3);
    /* Uzun adres ve IBAN'lar dar ekranda tasmasin. */
    overflow-wrap: anywhere;
}

@media (min-width: 620px) {
    .belge__kunye dd { margin-bottom: 0; }
}

/* --- Tablo --- */
.belge__tablo {
    width: 100%;
    margin: 0 0 var(--uzay-4);
    border-collapse: collapse;
    font-size: .9375rem;
}

.belge__tablo th,
.belge__tablo td {
    padding: var(--uzay-3);
    text-align: left;
    border-bottom: 1px solid var(--ayrac);
    vertical-align: top;
}

.belge__tablo thead th {
    color: var(--metin-soluk);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.belge__tablo code {
    font-family: var(--yazi-tek);
    font-size: .875em;
}

/* --- Numarali adimlar --- */
.belge__adimlar { counter-reset: belge-adim; list-style: none; padding-left: 0; }

.belge__adimlar li {
    counter-increment: belge-adim;
    position: relative;
    padding-left: var(--uzay-7);
    margin-bottom: var(--uzay-3);
}

.belge__adimlar li::before {
    content: counter(belge-adim);
    position: absolute;
    left: 0;
    top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--vurgu-soluk);
    color: var(--vurgu);
    font-size: .8125rem;
    font-weight: 700;
}

/* --- Eksik bilgi isareti ---
   Yasal olarak zorunlu ama henuz verilmemis alanlar. Goze batmasi
   AMACLANMISTIR: bos birakilan bir unvan alani, fark edilmeden
   yayina girerse yukumluluk karsilanmamis olur. */
.eksik-bilgi {
    padding: 2px var(--uzay-2);
    border-radius: var(--yuvarlak-sm);
    background: var(--uyari);
    color: var(--ink-0);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .02em;
}

/* --- SSS: acilir kapanir --- */
.sss {
    padding: var(--uzay-3) 0;
    border-bottom: 1px solid var(--ayrac);
}

.sss > summary {
    cursor: pointer;
    font-size: 1.125rem;         /* Rima SSS sorusu 18 px normal kalinlik, cevap 15 px */
    font-weight: 400;
    line-height: 1.5;
    /* Varsayilan ucgen isaretini kaldirip kendi isaretimizi koyuyoruz. */
    list-style: none;
    display: flex;
    align-items: baseline;
    gap: var(--uzay-3);
}

.sss > summary::-webkit-details-marker { display: none; }

.sss > summary::before {
    content: "+";
    flex-shrink: 0;
    width: 1em;
    color: var(--vurgu);
    font-weight: 700;
}

.sss[open] > summary::before { content: "\2212"; }

.sss > summary:hover { color: var(--vurgu); }

.sss > p {
    margin: var(--uzay-3) 0 var(--uzay-2);
    padding-left: calc(1.2em + var(--uzay-3));
    color: var(--metin-soluk);
    font-size: .9375rem;
}

/* --- Alt iletisim kutusu --- */
.belge__iletisim {
    margin-top: var(--uzay-8);
    padding: var(--uzay-5);
    background: var(--yuzey-batik);
    border-radius: var(--yuvarlak-lg);
}

.belge__iletisim h2 {
    margin: 0 0 var(--uzay-3);
    font-size: 1.125rem;
}

.belge__iletisim p { margin: 0; line-height: 1.8; }

/* ------------------------------------------------------------
   12) ILETISIM SAYFASI

   .belge--genis: sozlesmelerdeki 68ch okuma sutunu burada
   gecerli degil. Uzun metin icin dar sutun sarttir, ama dort
   kart yan yana dizilecekse tam genislik gerekir.
   ------------------------------------------------------------ */
.belge--genis { max-width: none; }

.iletisim__giris {
    max-width: 58ch;
    margin-bottom: var(--uzay-7);
    color: var(--metin-soluk);
    font-size: 1.125rem;
}

.iletisim__giris p { margin: 0; }

.iletisim__kartlar {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--uzay-4);
    margin-bottom: var(--uzay-8);
}

@media (min-width: 560px) {
    .iletisim__kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
    .iletisim__kartlar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.iletisim__kart {
    display: flex;
    flex-direction: column;
    gap: var(--uzay-2);
    padding: var(--uzay-5);
    background: var(--yuzey-yukseltilmis);
    border: 1px solid var(--kenarlik);
    border-radius: var(--yuvarlak-lg);
    transition: border-color var(--gecis), box-shadow var(--gecis);
}

.iletisim__kart:hover {
    border-color: var(--vurgu);
    box-shadow: var(--golge);
}

.iletisim__ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: var(--uzay-2);
    border-radius: 50%;
    background: var(--vurgu-soluk);
    color: var(--vurgu);
}

.iletisim__ikon .ikon { width: 22px; height: 22px; }

.iletisim__kart-baslik {
    margin: 0;
    font-family: var(--yazi-govde);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--metin-soluk);
}

.iletisim__deger {
    margin: 0;
    line-height: 1.6;
    /* Uzun adres ve e-posta dar kartta tasmasin. */
    overflow-wrap: anywhere;
}

.iletisim__deger--iri {
    font-size: 1.125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.iletisim__eylem {
    display: inline-flex;
    align-items: center;
    gap: var(--uzay-1);
    /* margin-top: auto -> kartlar farkli uzunlukta olsa da eylem
       baglantilari ayni hizada biter. */
    margin-top: auto;
    padding-top: var(--uzay-3);
    color: var(--vurgu);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}

.iletisim__eylem:hover { text-decoration: underline; text-underline-offset: 3px; }

.iletisim__ok {
    width: 15px;
    height: 15px;
    transition: transform var(--gecis);
}

.iletisim__eylem:hover .iletisim__ok { transform: translateX(3px); }

/* --- Yasal bilgiler paneli --- */
.iletisim__panel {
    padding: var(--uzay-6);
    background: var(--yuzey-batik);
    border-radius: var(--yuvarlak-lg);
}

.iletisim__panel h2 { margin-bottom: var(--uzay-2); }

.iletisim__panel-not {
    margin-bottom: var(--uzay-5);
    color: var(--metin-soluk);
    font-size: .875rem;
}

/* Genis duzende bile duz metin dar sutunda kalsin: okunabilirlik
   kart izgarasina degil, satir uzunluguna bagli. */
.iletisim__dar { max-width: 68ch; }

/* ------------------------------------------------------------
   12) MOBIL PANEL  (sagdan acilan menu)

   AYNI ISARETLEME, IKI DUZEN. Genis ekranda .menu yatay bir kategori
   baridir; 900px altinda - ve yalnizca JavaScript calisirken - ayni
   oge sagdan kayan bir panele donusur. Ikinci bir menu yazmadik:
   iki kopya er ya da gec ayrisir ve biri guncellenmeden kalir.

   NEDEN .js KOSULU: JavaScript kapaliyken paneli acacak bir sey yok.
   O durumda hamburger hic gorunmez, menu de bugunku gibi satir ici
   kalir. Once panele cevirip sonra "acamiyorsunuz" demek, menuyu
   tamamen erisilemez yapardi.

   Dar ekranda alt kategoriler BUGUNE KADAR hic gorunmuyordu (acilir
   panel yalnizca 900px ustunde aciliyordu). Panel bunu da cozuyor:
   icinde akordeon olarak aciliyorlar.
   ------------------------------------------------------------ */

/* Hamburger dugmesi varsayilan olarak yok. */
.panel-ac { display: none; }

/* Panel acikken arkadaki sayfayi karartan perde. Tiklaninca kapatir.

   Perde .yapiskan'in ICINDE (bkz. layout/ana.php), z-index'i o kutunun
   istifleme baglaminda gecerli: baslik ogelerinin ustunde, ana menu
   panelinin (70) altinda. Sayfanin geri kalani zaten .yapiskan'in (60)
   altinda oldugu icin perde onu da ortuyor. Uyelik paneli (.hesap__yan,
   70) sayfa duzeyinde, .yapiskan'in ustunde: perdenin de ustunde kaliyor. */
.panel__perde {
    position: fixed;
    inset: 0;
    z-index: 65;
    background: rgba(24, 21, 17, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms cubic-bezier(.4, 0, .2, 1), visibility 0s linear 220ms;
}

.panel__perde--acik {
    opacity: 1;
    visibility: visible;
    transition: opacity 220ms cubic-bezier(.4, 0, .2, 1), visibility 0s;
}

.panel__kapat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: calc(var(--uzay-2) * -1);
    padding: 0;
    border: 0;
    border-radius: var(--yuvarlak);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.panel__kapat:hover { background: rgba(255, 255, 255, .08); }
.panel__kapat .ikon { width: 22px; height: 22px; }

/* Panel acikken sayfa arkada kaymasin. */
.panel-acik { overflow: hidden; }

/* Genis ekranda panel basligi ve arac bolumu yok: orasi yatay bar
   ve ikonlar zaten baslikta duruyor. */
.menu__panel-ust,
.menu__araclar { display: none; }


@media (max-width: 899px) {

    .js .panel-ac { display: inline-flex; }

    /* --- .menu artik bir panel --- */
    .js .menu {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 70;
        width: min(340px, 86vw);
        box-shadow: -8px 0 32px rgba(0, 0, 0, .35);
        /* Kapaliyken GORUNMEZ: yalnizca ekran disinda olsaydi
           icindeki baglantilar sekme tusuyla gezilebilir kalirdi. */
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 220ms cubic-bezier(.4, 0, .2, 1), visibility 0s linear 220ms;
    }

    .js .menu.panel--acik {
        transform: none;
        visibility: visible;
        transition: transform 220ms cubic-bezier(.4, 0, .2, 1), visibility 0s;
    }

    /* Panel govdesi dikey kayar; basligi ve alt bolumu sabit degil,
       birlikte kayar - kisa bir menude sabit baslik yer israfi. */
    .js .menu__kutu {
        display: flex;
        flex-direction: column;
        height: 100%;
        max-width: none;
        padding-inline: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .js .menu__panel-ust {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--uzay-3);
        padding: var(--uzay-3) var(--uzay-4);
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    }

    .js .menu__panel-baslik {
        font-family: var(--yazi-baslik);
        font-size: 1.25rem;
        font-weight: 600;
    }

    /* --- Liste: dikey --- */
    .js .menu__liste {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        overflow: visible;
    }

    .js .menu__oge {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border-bottom: 1px solid rgba(255, 255, 255, .07);
    }

    .js .menu__baglanti {
        flex: 1;
        min-width: 0;
        padding: var(--uzay-4);
        font-size: 1rem;             /* Rima telefon menusu 16 px orta kalin */
        white-space: normal;
    }

    /* Alt kategorileri acan dugme: dokunma hedefi tam 44px. */
    .js .menu__acici {
        display: inline-flex;
        width: 52px;
        height: 52px;
        margin: 0;
    }

    .js .menu__acici-ok { width: 20px; height: 20px; }
    .js .menu__oge--acik .menu__acici-ok { transform: rotate(180deg); }

    /* --- Akordeon govdesi --- */
    .js .menu__panel {
        position: static;
        display: none;
        width: 100%;
        max-width: none;
        padding: 0 var(--uzay-4) var(--uzay-4);
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: rgba(0, 0, 0, .22);
    }

    .js .menu__oge--acik > .menu__panel { display: block; }

    /* Iki sutun dar panelde sikisir; tek sutun. */
    .js .menu__panel-ic { grid-template-columns: minmax(0, 1fr); gap: var(--uzay-4); }
    .js .menu__grup { padding-inline: 0; }
    .js .menu__grup:nth-child(even) { border-left: 0; }
    .js .menu__grup-baslik { margin-top: var(--uzay-3); margin-bottom: var(--uzay-2); }
    .js .menu__alt-baglanti { padding-block: var(--uzay-2); }

    /* --- Baslikta logo, arama cubugu ve hamburger kalir ---
       Favori, sepet ve hesap panele tasindi; arama basligin ortasinda
       kaldi cunku birincil eylem. */
    .js .araclar__dugme--favori,
    .js .araclar__dugme--sepet,
    .js .araclar__dugme--hesap { display: none; }

    /* --- Arac bolumu: kategorilerin hemen altinda --- */

    /* Son kategorinin kendi ince cizgisi kalkar; ayirici olarak asagidaki
       altin cizgi kullanilir. Yoksa iki cizgi yan yana gelip lekeli
       gorunuyor. */
    .js .menu__liste .menu__oge:last-child { border-bottom: 0; }

    .js .menu__araclar {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: var(--uzay-4);
        /* AYIRICI: kategoriler burada biter, kisisel araclar burada
           baslar. Altin tonu bilincli - menunun icindeki diger ince
           cizgiler notr, bu tekil cizgi bolumleri ayirdigini soyluyor. */
        border-top: 1px solid rgba(255, 255, 255, .26);
    }

    .js .menu__arac {
        display: flex;
        align-items: center;
        gap: var(--uzay-3);
        min-height: 46px;
        padding-inline: var(--uzay-2);
        border-radius: var(--yuvarlak);
        color: var(--serit-metin);
        font-size: 1rem;
        text-decoration: none;
        transition: background-color var(--gecis), color var(--gecis);
    }

    .js .menu__arac:hover {
        background: rgba(255, 255, 255, .06);
        color: var(--serit-vurgu);
    }

    .js .menu__arac-ikon {
        width: 20px;
        height: 20px;
        flex: none;
        color: var(--serit-vurgu);
    }

    .js .menu__arac--vurgu {
        justify-content: center;
        margin-top: var(--uzay-2);
        background: var(--serit-dugme-zemin);
        color: var(--serit-dugme-metin);
        font-weight: 600;
    }

    .js .menu__arac--vurgu:hover { background: var(--serit-dugme-hover); color: var(--serit-dugme-metin); }
    .js .menu__arac--vurgu .menu__arac-ikon { color: var(--serit-dugme-metin); }
}

/* Hareket hassasiyeti: kayma yerine aninda gorunsun.
   base.css sureyi kisaltiyor ama GECIKMEYI degil; gecikme kalirsa
   panel kapandiktan sonra 220 ms gorunmez ama tiklanabilir kalir. */
@media (prefers-reduced-motion: reduce) {
    .panel__perde,
    .js .menu {
        transition-delay: 0s !important;
    }
}

/* ============================================================
   BANKA HESABI KARTI  (parcalar/banka-hesabi.php)

   Uc sayfada ayni kart: Banka Hesap Bilgilerimiz, odeme sayfasindaki
   havale secenegi, siparis sonuc sayfasi. Stil BU dosyada cunku banka
   sayfasi satis.css'i yuklemiyor - rozette yasanan hatanin aynisi
   (2026-09-23) burada tekrarlanmasin.

   Tek altin vurgu soldaki ince cizgi: "burasi para". Kartin geri kalani
   notr; genis altin dolgu hem markayi ucuzlatir hem okunurlugu bozar.
   ============================================================ */
.banka-hesaplari {
    display: grid;
    gap: var(--uzay-3);
    margin-block: var(--uzay-3) var(--uzay-4);
}

.banka-hesabi {
    padding: var(--uzay-4) var(--uzay-5);
    border: 1px solid var(--kenarlik);
    border-left: 3px solid var(--vurgu);
    border-radius: var(--yuvarlak);
    background: var(--yuzey-yukseltilmis);
}

.banka-hesabi__banka {
    display: flex;
    align-items: center;
    gap: var(--uzay-2);
    margin: 0 0 var(--uzay-3);
    font-weight: 600;
}

.banka-hesabi__banka .ikon { width: 20px; height: 20px; flex: none; color: var(--vurgu); }

.banka-hesabi__liste {
    display: grid;
    gap: var(--uzay-3);
    margin: 0;
}

/* Dar ekranda etiket ustte, genis ekranda solda. */
.banka-hesabi__satir {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
}

@media (min-width: 560px) {
    .banka-hesabi__satir {
        grid-template-columns: 7.5rem minmax(0, 1fr);
        align-items: center;
        gap: var(--uzay-3);
    }
}

.banka-hesabi__satir dt { color: var(--metin-soluk); font-size: .8125rem; }
.banka-hesabi__satir dd { margin: 0; min-width: 0; }

.banka-hesabi__deger {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--uzay-2) var(--uzay-3);
}

.banka-hesabi__iban,
.banka-hesabi__kod {
    min-width: 0;
    color: var(--metin);
    font-family: var(--yazi-tek);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .02em;
    overflow-wrap: anywhere;
    /* Tek dokunusla tamami secilir: JavaScript'siz kopyalamanin yolu. */
    -webkit-user-select: all;
    user-select: all;
}

.banka-hesabi__tutar { font-size: 1.15rem; white-space: nowrap; }

/* Kopyala dugmesi. HTML'de hidden gelir; vitrin.js, tarayici panoya
   yazabiliyorsa acar. Asagidaki [hidden] kurali SART: display verilen
   bir ogede tarayicinin kendi "hidden = gizle" kurali ezilir ve dugme
   JavaScript'siz de gorunurdu. */
.kopyala {
    display: inline-flex;
    align-items: center;
    gap: var(--uzay-1);
    min-height: 36px;
    padding: var(--uzay-1) var(--uzay-3);
    border: 1px solid var(--kenarlik-girdi);
    border-radius: var(--yuvarlak-sm);
    background: var(--yuzey);
    color: var(--metin);
    font: inherit;
    font-size: .8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--gecis), color var(--gecis);
}

.kopyala[hidden] { display: none; }
.kopyala .ikon { width: 15px; height: 15px; flex: none; }

.kopyala:hover,
.kopyala:focus-visible { border-color: var(--vurgu); color: var(--vurgu); }

.kopyala--tamam,
.kopyala--tamam:hover { border-color: var(--basari); color: var(--basari); }

/* ------------------------------------------------------------
   Kirinti izi (breadcrumb)

   Ortak bilesen: satis sayfalari, urun, kategori ve arama sayfalari
   kullanir. Eskiden satis.css'teydi ve o dosyayi yuklemeyen katalog
   sayfalarinda stilsiz (alti cizili baglantilar) gorunuyordu.
   ------------------------------------------------------------ */
.kirinti {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--uzay-2);
    margin-block: var(--uzay-5) var(--uzay-4);
    font-size: 0.875rem;         /* Rima 14 px BUYUK HARF (sepet sayfasi; kategori 12, urun 16) */
    text-transform: uppercase;
    color: var(--metin-soluk);
}

.kirinti a {
    color: var(--metin-soluk);
    text-decoration: none;
}

.kirinti a:hover,
.kirinti a:focus-visible { color: var(--vurgu); text-decoration: underline; }

.kirinti [aria-current="page"] { color: var(--metin); font-weight: 500; }

/* ------------------------------------------------------------
   Bos durum ("Bu Kategoride Henüz Ürün Yok", bos sepet, bos sekme)

   Ortak bilesen: hesap, satis, kategori ve arama sayfalari kullanir.
   Eskiden uyelik.css'teydi; o dosyayi yuklemeyen kategori ve arama
   sayfalarinda ikon boyutsuz kalip ekrani dolduruyordu (2026-09-28:
   telefonda 358, masaustunde 1152 piksel).
   ------------------------------------------------------------ */
.bos {
    padding: var(--uzay-8) var(--uzay-5);
    margin-bottom: var(--uzay-5);
    border: 1px dashed var(--kenarlik-girdi);
    border-radius: var(--yuvarlak-lg);
    background: var(--yuzey-yukseltilmis);
    text-align: center;
}

.bos__ikon { width: 44px; height: 44px; margin: 0 auto var(--uzay-4); color: var(--vurgu); opacity: .7; }
.bos__baslik { margin: 0 0 var(--uzay-2); font-size: 1.5rem; font-weight: 700; }
.bos__metin { max-width: 44ch; margin: 0 auto var(--uzay-5); color: var(--metin-soluk); font-size: 1.0625rem; }
.bos .dugme { margin-inline: auto; }

/* ============================================================
   ACILIR BILDIRIM (toast)  (parcalar/tost.php, vitrin.js)

   Alisveris sayfalarinin islem sonucu: "Sepete Eklendi" gibi. Sayfanin
   altinda, icerigin USTUNDE; yapiskan basligin (60) ve mobil panelin
   (70) de ustunde (90), bildirim balonunun (200) altinda. Ekranin alt
   kenarinda durdugu icin basliktaki sepet simgesinin ustune binmez.

   Eskiden bu mesaj sayfa icinde .bildirim olarak cikiyordu ve o bilesenin
   stili yalnizca uyelik.css'teydi: urun sayfasinda ikon boyutsuz kalip
   kutuyu dolduruyordu (2026-09-27, patron bildirdi - CLAUDE.md "icons
   have no default size"). Burada her ikonun boyutu tanimli.

   Renk anlamda degil, ikondaki halkada: kutu notr kalir, "altin vurgu,
   sayfa degil" ilkesi.
   ============================================================ */
.tost {
    --tost-ton: var(--bilgi);

    position: fixed;
    right: var(--uzay-5);
    bottom: max(var(--uzay-5), env(safe-area-inset-bottom));
    z-index: 90;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--uzay-3);
    width: min(440px, calc(100% - var(--uzay-5) * 2));
    padding: var(--uzay-3) var(--uzay-3) var(--uzay-3) var(--uzay-4);
    overflow: hidden;
    border: 1px solid var(--kenarlik);
    border-radius: var(--yuvarlak-lg);
    background: var(--yuzey-yukseltilmis);
    color: var(--metin);
    box-shadow: var(--golge-lg);
    animation: tost-gir 240ms cubic-bezier(.2, .8, .2, 1) both;
}

.tost--basari { --tost-ton: var(--basari); }
.tost--hata   { --tost-ton: var(--hata); }
.tost--uyari  { --tost-ton: var(--uyari); }

.tost__ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tost-ton) 14%, transparent);
    color: var(--tost-ton);
}

.tost__ikon .ikon { width: 20px; height: 20px; }

.tost__govde { min-width: 0; }
.tost__baslik { margin: 0; font-weight: 650; line-height: 1.3; }
.tost__metin { margin: 0; font-size: .875rem; line-height: 1.45; color: var(--metin-soluk); overflow-wrap: anywhere; }
.tost__baslik + .tost__metin { margin-top: 2px; }

/* Basliksiz bildirimde mesajin kendisi ana metindir. */
.tost__govde > .tost__metin:only-child { color: var(--metin); }

.tost__eylem {
    padding: 7px var(--uzay-3);
    border: 1px solid var(--vurgu);
    border-radius: var(--yuvarlak-tam);
    color: var(--vurgu);
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color var(--gecis), color var(--gecis);
}

.tost__eylem:hover,
.tost__eylem:focus-visible { background: var(--vurgu); color: var(--metin-ters); }

.tost__kapat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--metin-soluk);
    cursor: pointer;
}

.tost__kapat:hover { background: var(--yuzey-batik); color: var(--metin); }
.tost__kapat .ikon { width: 18px; height: 18px; }
.tost__kapat[hidden] { display: none; }

/* Satir ici bildirimin (parcalar/bildirim) ikonu - ONLEM: bileşenin
   duzeni uyelik.css'te, ama parca uyelik.css'i yuklemeyen bir sayfada
   kullanilirsa ikon boyutsuz kalip sayfayi kaplamasin. */
.bildirim__ikon { width: 20px; height: 20px; flex: none; }

/* Kalan sure: altta ince cizgi (sureli bildirimlerde, JS ekler). */
.tost__sure {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background: var(--tost-ton);
    opacity: .55;
    transform-origin: left;
    animation: tost-sure linear forwards;
}

.tost:is(:hover, :focus-within) .tost__sure { animation-play-state: paused; }

.tost--cikis { animation: tost-cik 200ms ease-in forwards; }

@keyframes tost-gir {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

@keyframes tost-cik {
    to { opacity: 0; transform: translateY(8px); }
}

@keyframes tost-sure {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* Telefonda tam genislik; eylem dugmesi metnin altina iner. */
@media (max-width: 560px) {
    .tost {
        right: var(--uzay-3);
        left: var(--uzay-3);
        bottom: max(var(--uzay-3), env(safe-area-inset-bottom));
        width: auto;
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .tost__eylem { grid-column: 2; justify-self: start; }
    .tost__kapat { grid-column: 3; grid-row: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .tost { animation-name: tost-belir; }
    .tost--cikis { animation-name: tost-kaybol; }

    @keyframes tost-belir { from { opacity: 0; } to { opacity: 1; } }
    @keyframes tost-kaybol { to { opacity: 0; } }
}

/* ============================================================
   ANA SAYFA KATEGORI KARTLARI  (parcalar/kategori-kartlari.php)

   Slaytin hemen alti, dortlu (patron, 2026-09-27). Koyu kart, altta
   ipek dalga, solda ad, sagda urun gorseli. Patronun ornegi lacivertti;
   2026-10-10'dan beri acik temada MAVI (tokens --kategori-kart-zemin),
   koyu temada markanin kendi koyusu (ink-900/950). Altin parilti: "altin
   vurgu, sayfa degil" - altin yalnizca isikta ve cizgide.

   Yazi #fbf8f4: mavide en az 7.06:1, koyuda ~17:1. Kart bir baglanti;
   odak halkasi altin.
   ============================================================ */
.kategori-kartlari { margin-block: var(--uzay-5) var(--uzay-2); }

.kategori-kartlari__liste {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--uzay-3);
    margin-block: 0;
    list-style: none;
}

@media (min-width: 1024px) {
    .kategori-kartlari__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--uzay-4); }
}

.kategori-kart {
    /* Kartin isik rengi (r, g, b). */
    --kart-ton: 143, 168, 236;   /* acik mavi parilti (2026-10-11; once altin) */

    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uzay-2);
    min-height: 112px;
    height: 100%;
    padding: var(--uzay-3) var(--uzay-2) var(--uzay-3) var(--uzay-5);
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 18px;
    background:
        url("../img/kategori-dalga.svg") center bottom / 100% 72% no-repeat,
        radial-gradient(120% 150% at 100% 100%, rgba(var(--kart-ton), .30), transparent 50%),
        var(--kategori-kart-zemin);
    color: #fbf8f4;
    text-decoration: none;
    box-shadow: var(--golge);
    transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}

.kategori-kart--gumus { --kart-ton: 200, 206, 214; }

/* Uzerine gelince kartin ustunden hafif bir isik gecer. */
.kategori-kart::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .09) 50%, transparent 65%);
    transform: translateX(-120%);
    transition: transform 700ms cubic-bezier(.2, .8, .2, 1);
    pointer-events: none;
}

.kategori-kart:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--kart-ton), .35);
    box-shadow: var(--golge-lg);
}

.kategori-kart:hover::after { transform: translateX(120%); }

.kategori-kart:focus-visible {
    outline: 2px solid var(--odak-halka);
    outline-offset: 3px;
}

.kategori-kart__ad {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 1.125rem;         /* Rima kategori karti 18 px orta kalin */
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
}

.kategori-kart__ok {
    width: 18px;
    height: 18px;
    flex: none;
    color: rgb(var(--kart-ton));
    transition: transform var(--gecis);
}

.kategori-kart:hover .kategori-kart__ok { transform: translateX(3px); }

.kategori-kart__gorsel {
    display: flex;
    flex: none;
    justify-content: flex-end;
    width: 132px;
}

.kategori-kart__gorsel img {
    width: 100%;
    height: auto;
    transition: transform 320ms cubic-bezier(.2, .8, .2, 1);
}

.kategori-kart:hover .kategori-kart__gorsel img { transform: translateY(-3px) scale(1.04); }

/* Gorsel verilmemis kart: kategorinin simgesi, isikli altin cizgi. */
.kategori-kart__ikon {
    width: 64px;
    height: 64px;
    margin-right: var(--uzay-3);
    stroke-width: 1.1;
    color: rgb(var(--kart-ton));
    filter: drop-shadow(0 0 14px rgba(var(--kart-ton), .45));
}

@media (max-width: 479px) {
    .kategori-kart {
        flex-direction: column-reverse;
        align-items: flex-start;
        justify-content: flex-end;
        gap: 0;
        min-height: 0;
        padding: var(--uzay-2) var(--uzay-3) var(--uzay-3);
    }

    .kategori-kart__gorsel { width: 100px; align-self: flex-end; margin-bottom: -6px; }
    .kategori-kart__ad { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .kategori-kart,
    .kategori-kart::after,
    .kategori-kart__ok,
    .kategori-kart__gorsel img { transition: none; }

    .kategori-kart:hover,
    .kategori-kart:hover .kategori-kart__gorsel img,
    .kategori-kart:hover .kategori-kart__ok { transform: none; }

    .kategori-kart:hover::after { transform: translateX(-120%); }
}

/* ============================================================
   GUVENCE SERIDI  (parcalar/guvenceler.php)

   Alt bilginin en ustunde, her sayfada: dort madde, ince dikey
   ayraclar (patronun ornegi, 2026-09-27). Alt bilginin gri zemininden
   ayrilan beyaz bir bant; ikonlar altin cizgi, basliklar metin renginde.
   Telefonda tek sutun, ikon solda; tablette iki; masaustunde dort.
   ============================================================ */
.guvenceler {
    background: var(--yuzey-yukseltilmis);
    border-bottom: 1px solid var(--ayrac);
}

.guvenceler__liste {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-block: 0;
    list-style: none;
}

.guvence {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--uzay-4);
    align-content: start;
    padding-block: var(--uzay-5);
}

.guvence + .guvence { border-top: 1px solid var(--ayrac); }

.guvence__ikon {
    grid-row: span 2;
    width: 34px;
    height: 34px;
    stroke-width: 1.35;
    color: var(--vurgu);
}

.guvence__baslik {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--metin);
}

.guvence__metin {
    margin: 4px 0 0;
    max-width: 34ch;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--metin-soluk);
}

@media (min-width: 640px) {
    .guvenceler__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .guvence {
        grid-template-columns: minmax(0, 1fr);
        padding: var(--uzay-6) var(--uzay-5);
    }

    .guvence__ikon { grid-row: auto; margin-bottom: var(--uzay-4); }

    /* Iki sutunda: sagdakilerin solunda dikey, alt satirin ustunde yatay ayrac. */
    .guvence + .guvence { border-top: 0; }
    .guvence:nth-child(2n) { border-left: 1px solid var(--ayrac); }
    .guvence:nth-child(n + 3) { border-top: 1px solid var(--ayrac); }
}

@media (min-width: 1024px) {
    .guvenceler__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .guvence:nth-child(n + 3) { border-top: 0; }
    .guvence + .guvence { border-left: 1px solid var(--ayrac); }
    .guvence:first-child { padding-left: 0; }
}

/* ============================================================
   CEREZ TERCIHI BANDI  (parcalar/cerez-bandi.php, vitrin.js)

   Siteyi ilk kez acan ziyaretcinin ekraninin altinda; tercih
   kaydedilince bir daha cizilmez (App\Http\CerezTercihi).
   Katman: yapiskan baslik (60) ve mobil panelin (70) ustunde, acilir
   bildirimin (90) ve balonun (200) altinda - bildirim bir anlik
   bandin ustune binebilir, sonra kaybolur.

   Kabul ve Ret AYNI gorunumde (koyu dolgu): KVKK'nin cerez rehberine
   gore reddetmek kabul etmek kadar kolay olmali. "Detaylar" ikincil.
   Zemin marka altininin acik tonundan turer: koyu temada da sicak kalir.
   ============================================================ */
.cerez-bandi {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 80;
    padding: 0 var(--uzay-4) max(var(--uzay-4), env(safe-area-inset-bottom));
    pointer-events: none;      /* kutunun disindaki bosluk tiklamayi engellemesin */
}

.cerez-bandi[hidden] { display: none; }

.cerez-bandi__kutu {
    max-width: 1200px;
    margin-inline: auto;
    padding: var(--uzay-5) var(--uzay-6);
    border: 1px solid var(--kenarlik);
    border-radius: var(--yuvarlak-lg);
    background: color-mix(in srgb, var(--vurgu-soluk) 45%, var(--yuzey-yukseltilmis));
    color: var(--metin);
    box-shadow: var(--golge-lg);
    pointer-events: auto;
    /* Ayrinti acikken kucuk telefonda ekrandan tasmasin: bant sabit (fixed),
       ustu ekran disina cikarsa sayfa kaydirilarak da ulasilamazdi. */
    max-height: calc(100dvh - var(--uzay-4));
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: cerez-gir 320ms cubic-bezier(.2, .8, .2, 1) both;
}

.cerez-bandi--kapaniyor .cerez-bandi__kutu { animation: cerez-cik 200ms ease-in both; }

@keyframes cerez-gir {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}

@keyframes cerez-cik {
    to { opacity: 0; transform: translateY(24px); }
}

.cerez-bandi__baslik {
    display: flex;
    align-items: center;
    gap: var(--uzay-3);
    margin: 0 0 var(--uzay-2);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;  /* lang="tr": i -> İ dogru */
}

.cerez-bandi__ikon { flex: none; width: 26px; height: 26px; color: var(--vurgu); }

.cerez-bandi__metin {
    margin: 0 0 var(--uzay-4);
    padding-inline-start: calc(26px + var(--uzay-3));   /* baslik metniyle hizali */
    font-size: .94rem;
    line-height: 1.6;
}

.cerez-bandi__metin a { color: var(--vurgu); font-weight: 500; }

.cerez-bandi__ayrinti { margin: 0 0 var(--uzay-4); padding-inline-start: calc(26px + var(--uzay-3)); }

.cerez-bandi__liste { display: grid; gap: var(--uzay-3); margin: 0; }

.cerez-bandi__satir {
    padding: var(--uzay-3) var(--uzay-4);
    border: 1px solid var(--kenarlik);
    border-radius: var(--yuvarlak);
    background: var(--yuzey-yukseltilmis);
}

.cerez-bandi__satir dt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--uzay-2);
    font-weight: 600;
    font-size: .94rem;
}

.cerez-bandi__satir dd { margin: var(--uzay-1) 0 0; color: var(--metin-soluk); font-size: .88rem; }

.cerez-bandi__durum {
    padding: 2px var(--uzay-2);
    border-radius: var(--yuvarlak-tam);
    background: color-mix(in srgb, var(--basari) 14%, transparent);
    color: var(--basari);
    font-size: .75rem;
    font-weight: 600;
}

.cerez-bandi__durum--yok {
    background: var(--yuzey-batik);
    color: var(--metin-soluk);
}

.cerez-bandi__eylemler {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--uzay-3);
    margin: 0;
}

.cerez-bandi__eylemler .dugme { width: 100%; font-weight: 600; letter-spacing: .02em; }

.cerez-bandi__dugme {
    background: var(--metin);
    border-color: var(--metin);
    color: var(--yuzey-yukseltilmis);
}

.cerez-bandi__dugme:hover { background: color-mix(in srgb, var(--metin) 86%, var(--yuzey-yukseltilmis)); }

.cerez-bandi__detay { text-decoration: none; }
.cerez-bandi__detay .ikon { width: 18px; height: 18px; }
.cerez-bandi__detay[aria-expanded="true"] { background: var(--yuzey-batik); }

@media (max-width: 640px) {
    .cerez-bandi { padding-inline: var(--uzay-2); }
    .cerez-bandi__kutu { padding: var(--uzay-4); }
    .cerez-bandi__metin,
    .cerez-bandi__ayrinti { padding-inline-start: 0; }
    .cerez-bandi__eylemler { grid-template-columns: 1fr; gap: var(--uzay-2); }
}

@media (prefers-reduced-motion: reduce) {
    .cerez-bandi__kutu,
    .cerez-bandi--kapaniyor .cerez-bandi__kutu { animation: none; }
}

/* Cerez Politikasi sayfasindaki tercih bolumu (#cerez-tercihi): bandin dugmeleri. */
.cerez-tercih { display: flex; flex-wrap: wrap; gap: var(--uzay-3); margin: 0; }
.cerez-tercih .dugme { min-width: 200px; }
.cerez-tercih__durum { margin-bottom: var(--uzay-4); }