/* ========================================================================
   MARKET VITRINI  (market / organik gida)

   TEMEL TEMANIN UZERINE yazilir. `@import` YOK: temel dosya sayfaya ayri
   bir <link> ile ve BU DOSYADAN ONCE yuklenir (ShopThemeResolver
   ::stilAdresleri). Ic onek ziyaretciye gorunen adreste olmadigi icin
   `@import` bir kez 404 dondurup sayfayi tamamen stilsiz birakmisti;
   ayrica iki <link> paralel iner, `@import` seri.

   =======================================================================
   TEMANIN DERDI: HIZLI TARAMA
   =======================================================================
   Market alicisi hikaye okumaz, LISTE TARAR. Bir sepette 20-30 kalem
   olur ve alici her birini saniyeler icinde bulup fiyatini karsilastirir.
   Bu yuzden buradaki her karar tek bir soruya gore verildi: "ekranda ayni
   anda kac urun goruluyor ve fiyat ne kadar cabuk okunuyor?"

   Somut sonuclari:
   - Vitrin KISA (tek bant, ~2.5rem) - moda temasindaki tam ekran hikaye
     bandi burada urunleri ekran disina iterdi.
   - Izgara SIK: kart alt siniri 16rem yerine 10.5rem, aradaki bosluk
     1.25rem yerine .85rem. Genis ekranda bir satira 6-7 urun siger.
   - Urun gorseli KARE (4/5 degil): market urunu ambalajiyla fotograflanir,
     kare cerceve dikey bosluk harcamaz - bir satir daha fazla urun demek.
   - Fiyat kartin en KUVVETLI ogesi; urun adindan buyuk.
   - Kart uzerinde hicbir hareket yok (gorsel buyume kapatildi): otuz
     kartlik bir duvarda fare gezdirirken oynayan gorseller taramayi
     yavaslatir.

   =======================================================================
   RENK VE KONTRAST
   =======================================================================
   Yesil uzerine BEYAZ metin cogu tonda 4.5:1'i GECMEZ; bu tema icin
   oranlar WCAG bagil parlaklik formuluyle tek tek hesaplandi ve olculen
   degerler theme.json `notes.kontrast` icine yazildi. Ozetle:
   - #fff / var(--ana)        = 5.08  (dugmeler)
   - var(--ana-koyu) / beyaz  = 8.12  (baglantilar, fiyat)
   - var(--ana) metin olarak var(--ana-acik) zemin uzerinde 4.21 -> KALDI;
     bu yuzden yesil zeminli vitrinde metin RENGI --ana-koyu'dur.
   ======================================================================== */

:root {
    /*
        Ana renk: taze fakat KOYU yesil. Daha parlak bir yesil (ornegin
        #22c55e) marketin havasina daha yakindi ama uzerine beyaz metin
        2.3:1 verirdi; dugmelerin okunmasi renk zevkinden once gelir.
    */
    --ana: #157f3c;
    --ana-koyu: #0f5c2c;
    --ana-acik: #d7f0dd;

    /*
        Vurgu: kampanya/indirim tonu. Yesilin komsusu bir renk secilseydi
        "dikkat" ile "olagan" ayirt edilemezdi; sicak turuncu yesilin
        karsisinda durur ve raf etiketi cagrisimi tasir.
    */
    --vurgu: #b3520c;
    --vurgu-koyu: #8a3d06;
    --vurgu-acik: #ffe7d1;

    --zemin: #ffffff;
    /* Ikincil zemin notr gri degil, cok hafif yesile calan gri: taze his. */
    --zemin-2: #f3f8f3;
    --metin: #132419;
    --metin-2: #4f6356;
    --cizgi: #dbe5dd;
    --koyu: #0f2117;

    /*
        Sozlesme disi ek jetonlar. Sozlesme YUKARIDAKI adlarin bulunmasini
        sart kosar, fazlasini yasaklamaz; temel tema da --yumusak/--kap
        ekliyor.
    */
    --yumusak: 10px;

    /* Kap genis: sik izgarada bir satira bir urun daha sigsin diye. */
    --kap: 1320px;

    --golge: 0 10px 24px -18px rgb(15 33 23 / .5);

    /*
        FORM KENARLIGI AYRI JETON. --cizgi (#dbe5dd) beyaza karsi 1.29:1;
        dekoratif ayrac icin yeterli ama bir metin kutusunun SINIRI
        arayuz bileseni sayilir ve 3:1 ister (WCAG 1.4.11). Bu ton beyaza
        karsi 4.26:1 verir. Renk dogrudan kurala yazilmaz, jetondan okunur
        - tasarim katmani degistirebilsin diye.
    */
    --cizgi-form: #6d7f72;
}

/* ========================================================================
   1. BASLIK
   ======================================================================== */

/* Market markasi sus degil tabela: kalin, sikisik, buyuk harf yok. */
.marka {
    font-weight: 800;
    letter-spacing: -.02em;
    font-size: 1.3rem;
}

.serit-ic { font-weight: 600; }

/* ========================================================================
   2. VITRIN  -  TEK BANT, KISA

   Yukseklik bilincli olarak dusuk tutuldu: 390 piksel genisliginde bir
   telefonda vitrin bitmeden ILK URUN SATIRI gorunmeye baslasin.
   ======================================================================== */

.vitrin {
    /* Ic bosluk .vitrin-duzen'de; burada sifirlanmazsa temelin 5rem'i kalir. */
    padding-block: 0;
    border-bottom: 1px solid var(--cizgi);
    /*
        Dekoratif nokta deseni + yesil tint. Fotograf yerine gecer:
        stok fotograf, musterinin satmadigi bir seyi vitrine cikarmak olur.
        Noktalar 1 piksel ve 18 piksel araliklidir; metnin arkasindaki
        etkin zemin pratikte duz --ana-acik'tir, olculen kontrast oradan.
    */
    background:
        radial-gradient(circle at 1px 1px,
            color-mix(in srgb, var(--ana) 14%, transparent) 1px, transparent 1.5px)
            0 0 / 18px 18px,
        var(--ana-acik);
}

.vitrin-duzen {
    position: relative;
    display: grid;
    gap: 1.25rem;
    padding-block: 2.5rem;
}
@media (min-width: 64rem) {
    .vitrin-duzen {
        grid-template-columns: minmax(0, 36rem) 1fr;
        align-items: center;
        padding-block: 3rem;
    }
}

.vitrin h1 {
    margin: 0;
    font-size: clamp(1.6rem, 3.6vw, 2.3rem);
    line-height: 1.15;
    letter-spacing: -.02em;
}

/*
    Yesil zeminde metin --ana-koyu; --ana bu zemin uzerinde 4.21:1 kalir
    ve AA'yi gecmez.
*/
.vitrin .ust-etiket { color: var(--ana-koyu); }
.vitrin .slogan { margin: .6rem 0 0; font-size: 1rem; color: var(--metin-2); }

.vitrin-dugmeler {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 1.25rem 0 0;
}

/*
    VITRIN SOZLERI. Ikonla degil METINLE anlatilir - "kamyon simgesi"
    tek basina teslimat suresini soylemez, ekran okuyucuya da hicbir sey
    ifade etmez.
*/
.vitrin-notlar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}
.vitrin-not {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .85rem;
    border: 1px solid var(--cizgi);
    border-radius: 999px;
    background: var(--zemin);
    font-size: .85rem;
    font-weight: 600;
}
.vitrin-not svg { width: 16px; height: 16px; color: var(--ana-koyu); flex: none; }

/*
    Dekoratif desen kutusu. DAR EKRANDA GIZLENIR: telefonda vitrini
    uzatip urunleri asagi itmesinden baska bir ise yaramazdi.
    overflow: hidden - tasan cizim yatay kaydirma acmasin.
*/
.vitrin-desen { display: none; }
@media (min-width: 64rem) {
    .vitrin-desen {
        display: block;
        justify-self: end;
        width: 100%;
        max-width: 21rem;
        aspect-ratio: 3 / 2;
        overflow: hidden;
    }
    .vitrin-desen svg {
        width: 100%;
        height: 100%;
        color: var(--ana-koyu);
        opacity: .22;
    }
}

/* ========================================================================
   3. DUGMELER VE BOLUM BASLIKLARI
   ======================================================================== */

/* Market pratiktir: hap seklinde degil, hafif yuvarlatilmis dik dugme. */
.dugme { border-radius: var(--yumusak); }

/*
    Ikincil dugme temelde saydam zeminli ve --cizgi kenarlikliydi; yesil
    tintli vitrin uzerinde o kenarlik neredeyse kayboluyordu. Beyaz zemin
    + 3:1 kenarlik her iki zeminde de gorunur.
*/
.dugme-ikincil {
    background: var(--zemin);
    border-color: var(--cizgi-form);
}
.dugme-ikincil:hover {
    background: var(--zemin-2);
    border-color: var(--ana-koyu);
    color: var(--metin);
}

/* Bolum araliklari daralir: sayfada urun disi bosluk ne kadar azsa
   ekranda o kadar cok urun kalir. */
.bolum { padding-block: 2.5rem; }
.bolum-basi { margin-bottom: 1.25rem; }
.bolum h2 { font-size: 1.35rem; }

/* Baslikta ince yesil aksan - bolumun nerede basladigi tek bakista belli. */
.bolum-basi h2 {
    border-inline-start: 4px solid var(--ana);
    padding-inline-start: .7rem;
    line-height: 1.2;
}

/* ========================================================================
   4. SIK URUN IZGARASI VE KARTI
   ======================================================================== */

.izgara {
    gap: .85rem;
    /*
        min() sarmalayicisi duruyor: 10.5rem'den DAR bir ekranda sutun
        kabin disina tasip yatay kaydirma acmasin diye.
    */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr));
}
@media (min-width: 64rem) { .izgara { gap: 1rem; } }

.urun-kart {
    border-radius: var(--yumusak);
    /* Renk gecisi kaliyor, GORSEL BUYUTME gidiyor - gerekcesi asagida. */
    transition: border-color .18s ease, box-shadow .18s ease;
}
.urun-kart:hover {
    border-color: var(--ana);
    box-shadow: var(--golge);
}

/* Kare cerceve: ambalajli market urunu dikey bosluk harcamaz. */
.urun-gorsel { aspect-ratio: 1 / 1; }

/*
    Fare gezdirince gorsel BUYUMEZ. Otuz kartlik bir duvarda imlecin
    gectigi her kartin oynamasi, taramayi kolaylastirmaz - zorlastirir.
*/
.urun-kart:hover .urun-gorsel img { transform: none; }
.urun-gorsel img { transition: none; }

.urun-gorsel-yok { font-size: .78rem; }

/* Durum etiketi vurgu renginde; ICINDE METIN VAR - yalnizca renkle
   anlatilsaydi renk koru alici icin hicbir sey ifade etmezdi. */
.urun-etiket {
    background: var(--vurgu);
    color: #fff;
    font-size: .72rem;
    padding: .2rem .6rem;
    border-radius: 6px;
}

.urun-govde {
    gap: .25rem;
    padding: .7rem .75rem .8rem;
}

/*
    URUN ADI IKI SATIRA SABIT. Uzun ve kisa adlar kartlari farkli
    yukseklikte birakirdi; sik izgarada fiyatlar o zaman ayni hizada
    olmaz ve goz sutunu duz tarayamazdi.
*/
.urun-ad {
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.3em;
}

/* Fiyat kartin en kuvvetli ogesi: urun adindan buyuk ve koyu yesil. */
.urun-fiyat {
    margin: .2rem 0 0;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--ana-koyu);
}
.urun-fiyat small {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--metin-2);
}

/*
    STOK DURUMU YAZIYLA. Rengi de var ama bilgi metinde: "Stokta" /
    "Tükendi". Yalnizca yesil-turuncu ayrimi birakilsaydi, renk koru
    aliciya iki karti ayni gosterirdi.
*/
.urun-durum {
    margin: .15rem 0 0;
    font-size: .78rem;
    font-weight: 700;
}
.urun-durum-var { color: var(--ana-koyu); }
.urun-durum-yok { color: var(--vurgu-koyu); }

/* ========================================================================
   5. HIZMET SERIDI  (temaya ozel bolum: #hizmetler)

   Market alicisinin sepeti doldurmadan once ogrenmek istedigi uc sey:
   ne zaman gelir, nasil odenir, sorun cikarsa ne olur.
   ======================================================================== */

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

.hizmet {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1.1rem;
    border: 1px solid var(--cizgi);
    border-radius: var(--yumusak);
    background: var(--zemin);
}

/* Ikon DEKORATIF (sablonda aria-hidden): yanindaki basligi tekrar eder,
   ekran okuyucuya iki kez okutmanin faydasi yok. */
.hizmet-ikon {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 999px;
    background: var(--ana-acik);
    color: var(--ana-koyu);
}
.hizmet-ikon svg { width: 22px; height: 22px; }

.hizmet h3 { margin: 0 0 .15rem; font-size: .98rem; }
.hizmet p { margin: 0; font-size: .88rem; color: var(--metin-2); }

/* ========================================================================
   6. FORM DENETIMLERI
   ======================================================================== */

/*
    Kenarlik 1.29:1'den 4.26:1'e cikar. Bir metin kutusunun nerede
    basladigini gormek dekorasyon degil, formu doldurabilmenin sarti.
*/
.alan input, .alan textarea, .alan select {
    border-color: var(--cizgi-form);
    border-radius: var(--yumusak);
}
.filtre-secenek input { accent-color: var(--ana); }

/* ========================================================================
   7. HAREKET TERCIHI

   Temel temada butun gecisleri kapatan genel bir kural zaten var; bu
   blok temanin KENDI ekledigi gecisleri de adiyla kapatir. Temel kural
   ileride daraltilirsa tema sessizce hareketli kalmasin diye.
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
    .urun-kart, .dugme-ikincil, .vitrin-not { transition: none; }
}