/* ========================================================================
   ELEKTRONIK VITRINI

   Koyu zemin, soguk mavi vurgu, keskin koseler. Kimlik referansi:
   modern teknoloji perakendecisi.

   =======================================================================
   BU DOSYA TEMELI EZER, KOPYALAMAZ - VE @import KULLANMAZ
   =======================================================================
   Temel temanin stili sablonda AYRI bir <link> ile ve BU DOSYADAN ONCE
   yuklenir (ShopThemeResolver::stilAdresleri). Buraya bir `@import`
   yazmak iki sebeple yanlis olurdu:

   1. Adres tuzagi: ic dizin oneki ziyaretciye gorunen adreste yok;
      yanlis yazilan bir import 404 doner ve sayfa SESSIZCE stilsiz acilir.
   2. Hiz: `@import` seri indirir, iki <link> paralel.

   Bu yuzden asagida yalnizca FARKLI olan kurallar var. Temelde
   duzeltilen bir kusur boylece bu temaya da kendiliginden geciyor.

   =======================================================================
   KOYU TEMANIN GETIRDIGI ZORUNLU EZMELER
   =======================================================================
   Temel tema ACIK zemin varsayar ve parlak `--ana` uzerine BEYAZ metin
   yazar (`.dugme`, `.rozet`). Soguk mavi bir vurgunun uzerinde beyaz
   metin 2.01:1 olcer - AA sinirinin cok altinda. Bu yuzden o kurallar
   asagida metni `var(--koyu)` ile yeniden tanimlaniyor. Renk yine
   JETONDAN okunuyor, sabit deger yazilmiyor: tasarim katmani jetonu
   degistirdiginde metin de birlikte degissin diye.
   ======================================================================== */

:root {
    /*
        Ana: soguk gok mavisi. Uzerine `--koyu` metin 10.00:1 verir;
        parlak bir mavinin uzerine beyaz yazmak yerine koyu yazmak,
        koyu temada okunabilirligi saglamanin TEK yoludur.
    */
    --ana: #4cc2ff;
    /*
        Koyu temada "koyu" varyant, acik zeminde oldugu gibi metin icin
        koyulastirilamaz - koyu zeminde okunmaz olurdu. Burada daha
        DOYGUN/derin bir mavi olarak duruyor ve koyu zemin uzerinde
        6.83:1 ile hala AA. Temel tema bunu baglanti ve hata metni rengi
        olarak kullaniyor; olcum o kullanimlar icin yapildi.
    */
    --ana-koyu: #2fa3e3;
    --ana-acik: #a8e0ff;

    /* Vurgu: camgobegi. Teknik rozetler ve olcum satirlari icin. */
    --vurgu: #22d3ee;
    --vurgu-koyu: #0e9dbb;
    --vurgu-acik: #a5eefb;

    --zemin: #0b0f16;
    --zemin-2: #121a26;
    --metin: #e9eef6;
    --metin-2: #a4b3c6;
    /*
        Cizgi rengi koyu temada "hafif" secilemez: form alani sinirlari
        WCAG 1.4.11 geregi 3:1 ister ve alanin nerede bittigi yalnizca
        bu cizgiyle anlasilir. #52687f koyu zeminde 3.34:1 olcer.
        Yalnizca SUS olan ayraclar asagida color-mix ile inceltiliyor -
        renk yine jetondan tureiyor.
    */
    --cizgi: #52687f;
    --koyu: #05080d;

    /*
        Kose yumusatma SIFIR. Elektronik perakendesinde keskin kenar,
        urunun teknik oldugunu anlatan en ucuz isarettir; moda temasinin
        4px'i bile burada yumusak durur.
    */
    --yumusak: 0px;
    --kap: 1320px;
    --golge: 0 0 0 1px var(--ana), 0 16px 32px -20px rgb(0 0 0 / .9);

    /*
        Teknik yigin: fiyat, kod ve olcu gibi SAYISAL metinler icin.
        Sistem yazi tipi - hicbir ag istegi yapilmaz, ziyaretcinin
        adresi ucuncu bir tarafa gitmez.
    */
    --tek-aralik: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}

/* ========================================================================
   1. UST SERIT VE BASLIK
   ======================================================================== */

/*
    Temel tema seridi `--koyu` ile boyar; koyu temada bu zeminle
    neredeyse ayni renktir ve serit kaybolur. Ustune ince bir vurgu
    cizgisi konarak serit YENIDEN gorunur kilindi.
*/
.serit {
    background: var(--koyu);
    border-bottom: 1px solid color-mix(in srgb, var(--vurgu) 40%, transparent);
    letter-spacing: .02em;
}
.serit-ic { padding-block: .7rem; }

.ust {
    background: color-mix(in srgb, var(--zemin) 92%, transparent);
    /*
        Yapiskan baslik koyu zeminde icerigin uzerinden gecerken metin
        birbirine karisiyordu; bulaniklastirma destegi olmayan
        tarayicida da yukaridaki %92 opaklik okunurlugu korur.
    */
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--cizgi);
}

/* Marka baglantisi ayni sebeple 44px: ana sayfaya donusun hedefi de
   bir menu baglantisi kadar buyuk olmali. */
.marka {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-size: 1.02rem;
}

.menu {
    gap: 1.75rem;
    font-size: .84rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}
/*
    Menu baglantilari olcumde 22px yuksekligindeydi. Yanindaki ikon
    dugmeleri 44px oldugu icin aradaki fark hem dokunmada hem gozle
    hizada bozukluk yaratiyordu; hedef buyutuldu, yazi buyutulmedi.
*/
.menu a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* Ikon dugmesi 44px KALIR (temelden); yalnizca kose ve hover degisir. */
.ray-dugme { border-radius: 0; }
.ray-dugme:hover { background: var(--zemin-2); color: var(--ana); }

/*
    Sepet rozeti: temel tema parlak `--ana` uzerine BEYAZ yazar (2.01:1).
    Metin `--koyu` yapildi -> 10.00:1.
*/
.rozet {
    border-radius: 2px;
    color: var(--koyu);
    font-family: var(--tek-aralik);
    line-height: 18px;
}

/* ========================================================================
   2. DUGMELER
   ======================================================================== */

/*
    ANA DUGME. Temel temada zemin `--ana`, metin beyazdir; koyu temanin
    parlak mavisi uzerinde beyaz 2.01:1 olcer ve AA'yi karsilamaz.
    Metin `--koyu` -> 10.00:1.
*/
.dugme {
    border-radius: 0;
    color: var(--koyu);
    font-weight: 700;
    font-size: .92rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding-inline: 1.5rem;
}
/*
    Hover'da temel tema `--ana-koyu` zemine BEYAZ metin koyuyor (2.81:1).
    Koyu temada dogru yon ters: zemin ACILIR, metin koyu kalir -> 14.11:1.
*/
.dugme:hover {
    background: var(--ana-acik);
    border-color: var(--ana-acik);
    color: var(--koyu);
}

.dugme-ikincil {
    color: var(--metin);
    border-color: var(--cizgi);
}
.dugme-ikincil:hover {
    background: var(--zemin-2);
    border-color: var(--ana);
    color: var(--ana);
}

/* ========================================================================
   3. VITRIN
   ======================================================================== */

.vitrin {
    padding-block: 0;
    background: var(--zemin);
    border-bottom: 1px solid var(--cizgi);
}

/*
    Fotograf YOK. Yerini bir devre izi deseni aliyor: musterinin
    satmadigi bir urunun stok fotografini vitrine koymak, magazayi
    yanlis tanitmak olurdu. Desen tamamen CSS - ek ag istegi yok.
    `overflow: hidden` temelden geliyor; desen tasse bile YATAY KAYDIRMA
    olusturamaz.
*/
.vitrin::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to bottom,
            color-mix(in srgb, var(--ana) 9%, transparent),
            transparent 55%),
        repeating-linear-gradient(0deg,
            color-mix(in srgb, var(--cizgi) 22%, transparent) 0 1px,
            transparent 1px 56px),
        repeating-linear-gradient(90deg,
            color-mix(in srgb, var(--cizgi) 22%, transparent) 0 1px,
            transparent 1px 56px);
    /* Izgara asagi dogru sonup zemine karisir; sert bir kesim olusmasin diye. */
    mask-image: linear-gradient(to bottom, #000 0%, transparent 92%);
}

.vitrin-duzen {
    position: relative;
    display: grid;
    align-items: center;
    gap: 2.5rem;
    padding-block: 3.5rem;
}
@media (min-width: 64rem) {
    .vitrin-duzen { grid-template-columns: 1.05fr .95fr; padding-block: 5rem; }
}

.vitrin h1 {
    font-size: clamp(2rem, 5vw, 3.15rem);
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.08;
}

/*
    ETIKET ROZETI. Bilgi YALNIZCA renkle anlatilmaz: rozetin icinde
    metin var, renk yalnizca onu destekler. Renk koru bir ziyaretci icin
    mavi bir nokta hicbir sey ifade etmezdi.
*/
.vitrin-rozet {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    padding: .4rem .85rem;
    border: 1px solid var(--vurgu);
    background: color-mix(in srgb, var(--vurgu) 14%, transparent);
    color: var(--vurgu-acik);
    font-family: var(--tek-aralik);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.vitrin-rozet svg { width: 14px; height: 14px; }

.vitrin .slogan { max-width: 34rem; }

/* Vitrin altindaki teknik kunye satiri - urun degil, HIZMET vaadi. */
.vitrin-kunye {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 2rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
    font-family: var(--tek-aralik);
    font-size: .82rem;
    color: var(--metin-2);
}
.vitrin-kunye li { display: flex; align-items: center; gap: .5rem; }
.vitrin-kunye b { color: var(--metin); font-weight: 700; }

/* Fotografin yerini tutan panel: satir ici SVG + CSS deseni. */
.vitrin-panel {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--cizgi);
    background:
        radial-gradient(120% 90% at 70% 20%,
            color-mix(in srgb, var(--ana) 18%, transparent),
            transparent 70%),
        var(--zemin-2);
}
.vitrin-panel svg {
    position: absolute;
    inset: 8%;
    width: 84%;
    height: 84%;
    color: var(--ana);
    opacity: .55;
}
/* Kose isaretleri: teknik cizim hissi, tamamen dekoratif. */
.vitrin-panel::after {
    content: '';
    position: absolute;
    inset: 10px;
    border: 1px solid color-mix(in srgb, var(--vurgu) 45%, transparent);
    clip-path: polygon(
        0 0, 22% 0, 22% 1px, 1px 1px, 1px 22%, 0 22%,
        0 78%, 1px 78%, 1px calc(100% - 1px), 22% calc(100% - 1px), 22% 100%, 0 100%,
        100% 100%, 100% 78%, calc(100% - 1px) 78%, calc(100% - 1px) calc(100% - 1px),
        78% calc(100% - 1px), 78% 100%, 100% 100%,
        100% 0, 78% 0, 78% 1px, calc(100% - 1px) 1px, calc(100% - 1px) 22%, 100% 22%
    );
}

/* ========================================================================
   4. KATEGORILER
   ======================================================================== */

.kutu-izgara {
    display: grid;
    /*
        1px'lik bosluk + her kutunun disina tasan 1px'lik halka = tek
        pikselllik teknik izgara. Cizgiyi KAPSAYICININ ZEMINI olarak
        boyamak denendi ve yanlisti: son satir tam dolmadiginda bos
        hucrelerin oldugu alan koca bir acik blok olarak goruntuye
        giriyordu. Halka kutunun kendisine bagli oldugu icin bos hucre
        hicbir sey cizmez.
    */
    gap: 1px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.kutu {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    /* Dokunma hedefi: kutunun tamami baglanti ve 44px'ten cok yuksek. */
    min-height: 8.5rem;
    padding: 1.4rem 1.25rem;
    background: var(--zemin);
    box-shadow: 0 0 0 1px var(--cizgi);
    color: var(--metin);
    text-decoration: none;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.kutu:hover {
    background: var(--zemin-2);
    box-shadow: 0 0 0 1px var(--ana);
    color: var(--ana);
    z-index: 1;
}
.kutu svg { width: 26px; height: 26px; color: var(--ana); }
.kutu b {
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .04em;
}
.kutu span {
    font-family: var(--tek-aralik);
    font-size: .76rem;
    color: var(--metin-2);
}

/* ========================================================================
   5. GUVENCE SERIDI
   ======================================================================== */

.guvence-izgara {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.guvence {
    display: flex;
    gap: .9rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--cizgi);
    border-inline-start: 3px solid var(--vurgu);
    background: var(--zemin);
}
.guvence svg { flex: none; width: 22px; height: 22px; color: var(--vurgu); }
.guvence h3 { margin: 0 0 .2rem; font-size: .95rem; letter-spacing: .01em; }
.guvence p { margin: 0; font-size: .86rem; color: var(--metin-2); }

/* ========================================================================
   6. BOLUM BASLIKLARI
   ======================================================================== */

.bolum { padding-block: 3.5rem; }
.bolum-2 { background: var(--zemin-2); }

.bolum h2 {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* Baslik ustundeki kilavuz metni - bolumun ne oldugunu ANLATIR. */
.bolum-etiket {
    margin: 0 0 .35rem;
    font-family: var(--tek-aralik);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ana-koyu);
}

.bolum-basi {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--cizgi);
    margin-bottom: 1.75rem;
}
/*
    Bolum basligindaki "tumunu gorun" baglantisi. Olcumde yuksekligi
    21px cikti: bir cumlenin ICINDE gecen baglanti degil, tek basina
    duran bir eylem oldugu icin WCAG 2.5.8'in satir ici muafiyetine
    girmiyor. Tiklama alani 44px'e cikarildi - yazi buyutulmeden,
    yalnizca hedef genisletilerek.
*/
.bolum-basi a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--tek-aralik);
    font-size: .82rem;
    text-decoration: none;
    color: var(--ana);
}
.bolum-basi a:hover { color: var(--ana-acik); text-decoration: underline; }

/* ========================================================================
   7. URUN IZGARASI VE KARTI
   ======================================================================== */

/*
    Kartlar SIK dizilir: elektronikte ziyaretci karsilastirma yapar,
    az sayida buyuk kart yerine cok sayida kucuk kart gormek ister.
    1px'lik bosluk + her kartin disina tasan 1px'lik halka, kartlar
    arasinda tek piksellik teknik bir izgara olusturur.

    CIZGI KAPSAYICIYA DEGIL KARTA BAGLI. Kapsayicinin zeminini cizgi
    rengiyle boyamak ilk denemeydi ve KUSURLUYDU: son satir tam
    dolmadiginda (ornegin 5 sutunda 6 urun) bos hucrelerin bulundugu
    alan, sayfanin altinda koca bir acik blok olarak goruluyordu.
    Halka kartin kendisine bagliyken bos hucre hicbir sey cizmez.
*/
.izgara {
    gap: 1px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
}

.urun-kart {
    border: 0;
    border-radius: 0;
    background: var(--zemin);
    /* Golge yerine halka: koyu zeminde yumusak golge gorunmez, cizgi gorunur. */
    box-shadow: 0 0 0 1px var(--cizgi);
    transition: background .2s ease, box-shadow .2s ease;
}
.urun-kart:hover {
    background: var(--zemin-2);
    box-shadow: 0 0 0 1px var(--ana);
    z-index: 1;
}
.bolum-2 .urun-kart { background: var(--zemin-2); }
.bolum-2 .urun-kart:hover { background: var(--zemin); }

/*
    Gorsel orani KARE. Temel tema 4/5 (portre) kullanir - giysi icin
    dogru, cihaz icin degil: bir kulaklik ya da dizustu bilgisayar
    portre cerceve icinde ortasinda kucucuk kalir.
*/
.urun-gorsel {
    aspect-ratio: 1 / 1;
    background:
        repeating-linear-gradient(135deg,
            color-mix(in srgb, var(--cizgi) 18%, transparent) 0 2px,
            transparent 2px 10px),
        var(--zemin-2);
}
.bolum-2 .urun-gorsel { background-color: var(--zemin); }
.urun-kart:hover .urun-gorsel img { transform: none; }

.urun-gorsel-yok { font-family: var(--tek-aralik); font-size: .74rem; line-height: 1.5; }

/*
    "Tukendi" etiketi temel temada `--koyu` zeminli; koyu temada kartin
    zeminiyle ayni renge dusup KAYBOLUYORDU. Acik dolgu + koyu metin
    (17.22:1) etiketi geri getirir ve durumu renkten bagimsiz olarak
    METINLE anlatmaya devam eder.
*/
.urun-etiket {
    border-radius: 0;
    background: var(--metin);
    color: var(--koyu);
    font-family: var(--tek-aralik);
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.urun-govde { padding: .9rem 1rem 1.1rem; gap: .5rem; }
.urun-ad { font-size: .9rem; font-weight: 600; }
.urun-ad a:hover { color: var(--ana); }

/* Fiyat tek aralikli: rakamlar alt alta hizalanir, karsilastirma kolaylasir. */
.urun-fiyat {
    font-family: var(--tek-aralik);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ana);
    letter-spacing: -.01em;
}
.urun-fiyat small {
    font-family: var(--tek-aralik);
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--metin-2);
}

/* ========================================================================
   8. FORM, LISTE VE OZET (KOYU ZEMIN DUZELTMELERI)
   ======================================================================== */

/*
    Temel tema alan zeminini `--zemin` yapar; koyu temada bu, alani
    sayfadan ayirmaz. Bir tik acik zemin + 3:1 cizgi ile alanin nerede
    basladigi gorunur olur (WCAG 1.4.11).
*/
.alan input, .alan textarea, .alan select {
    border-radius: 0;
    background: var(--zemin-2);
    border-color: var(--cizgi);
}
.alan input::placeholder, .alan textarea::placeholder { color: var(--metin-2); }

.filtre, .ozet, .bos-durum, .uyari, .yonerge, .satir-gorsel, .urun-kapak, .kucuk-gorseller li {
    border-radius: 0;
}
.filtre, .ozet { background: var(--zemin-2); border-color: var(--cizgi); }
.filtre legend { color: var(--metin); }
.filtre-adet { font-family: var(--tek-aralik); }

/* Salt SUS olan ayraclar: 3:1'lik cizgi rengi burada gereksiz agir durur. */
.satirlar, .satir + .satir, .ozet-toplam, .alt-serit {
    border-color: color-mix(in srgb, var(--cizgi) 55%, transparent);
}

.satir-tutar, .ozet li, .ozet-toplam { font-family: var(--tek-aralik); }
.ozet-toplam { color: var(--ana); }

.ozellik { border-radius: 0; background: var(--zemin-2); }
.yonerge { background: var(--zemin-2); border-color: var(--cizgi); }
.yonerge pre { font-family: var(--tek-aralik); font-size: .88rem; }

.bos-durum { border-color: var(--cizgi); }

/* ========================================================================
   9. ALT BILGI
   ======================================================================== */

.alt {
    margin-top: 0;
    background: var(--koyu);
    border-top: 1px solid var(--cizgi);
}
.alt h2 {
    color: var(--metin);
    letter-spacing: .16em;
}
/*
    Alt bilgi baglantilari olcumde 17px yuksekligindeydi - parmakla
    isabet ettirilemeyecek kadar ince. Satir boslugu 44px'lik hedefin
    icine alindi: liste daha seyrek DURMUYOR, hedef buyuyor.
*/
.alt li { margin-bottom: 0; }
.alt li a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}
.alt li a:hover { color: var(--ana); }
.alt-serit p { font-family: var(--tek-aralik); color: var(--metin-2); }

/* ========================================================================
   10. HAREKET TERCIHI
   ======================================================================== */

/*
    Temel tema gecisleri zaten kapatiyor; buradaki blok bu temanin
    KENDI ekledigi hareketli ogeleri de kapsadigini acikca yazar.
    Tercihi yok saymak, vestibuler rahatsizligi olan ziyaretci icin
    konfor degil erisim sorunudur.
*/
@media (prefers-reduced-motion: reduce) {
    .urun-kart, .kutu, .dugme, .ray-dugme { transition: none !important; }
    .urun-kart:hover .urun-gorsel img { transform: none !important; }
}

/* ========================================================================
   11. BASKI
   ======================================================================== */

/*
    Baskida koyu zemin bir sayfalik siyah murekkep demektir. Temel tema
    zemini beyaza cevirir; burada yalnizca bu temanin ekledigi koyu
    dolgular da temizlenir.
*/
@media print {
    .vitrin, .vitrin-panel, .kutu, .guvence, .urun-kart, .izgara, .kutu-izgara {
        background: #fff !important;
        color: #000 !important;
    }
    .vitrin::before, .vitrin-panel::after { display: none; }
}