/* ========================================================================
   TAKI VITRINI  —  koyu, sessiz, altin vurgulu mucevher magazasi

   TEMEL TEMANIN UZERINE yazilir. Layout `<link>` etiketlerini SIRAYLA
   basar (once temel, sonra tema), o yuzden burada `@import` YOK:
   `@import` seri indirir ve bir kere yanlis adresle yazildiginda sayfayi
   sessizce tamamen stilsiz birakmisti (bkz. ShopThemeResolver yorumu).

   Tema yalnizca `style.css` + `home.blade.php` tasir. Urun, sepet, kasa
   ve siparis sayfalari TEMELDEN DUSER; onlarin koyu zeminde de dogru
   gorunmesi bu dosyanin sorumlulugudur — asagidaki "temelin acik zemin
   varsayimlarini duzelt" bolumleri tam olarak bunun icin var.

   =======================================================================
   KOYU TEMADA RENK TUZAGI
   =======================================================================
   Acik temada `--ana` hem dugme zemini hem baglanti rengi olabilir.
   Koyu temada OLAMAZ: dugme zemini olarak guzel duran bir renk, koyu
   sayfa zemininde METIN olarak cogu zaman 4.5:1'i gecmez. Bu yuzden
   burada roller ayrilir:

       --ana        yalnizca ZEMIN (dugme, odak halkasi, ince cizgi)
       --ana-acik   yalnizca METIN (baglanti, etiket, fiyat)
       --koyu       altin zemin UZERINDEKI metin

   Butun ciftler WCAG 2.x formuluyle olculdu; degerler theme.json
   `notes.kontrast` icinde tek tek yazili.
   ======================================================================== */

:root {
    /*
        Altin: dugme ve odak zemini. Metin olarak da kullanilabilir
        (zemin uzerinde 8.12:1) ama tema onu zemin olarak kullanir.
    */
    --ana: #c9a227;
    --ana-koyu: #9f7d1e;
    --ana-acik: #e8ce8a;

    /* Bakir: ikincil dikkat — hata, uyari, fiyat degisti bilgisi. */
    --vurgu: #b5764a;
    --vurgu-koyu: #7d4c2a;
    --vurgu-acik: #e5aa80;

    /* Zeminler sicak siyah: notr gri, altinin yaninda kirli mavi gorunur. */
    --zemin: #0d0b0a;
    --zemin-2: #17130f;
    --metin: #f4efe6;
    --metin-2: #b7ab98;
    --cizgi: #332c23;
    --koyu: #050403;

    /* Mucevher kimligi: kose yumusatma neredeyse yok, kesme tas gibi. */
    --yumusak: 2px;

    /* Dar kap = genis bos alan. Sakinlik bosluktan gelir, susten degil. */
    --kap: 1120px;

    /*
        Koyu zeminde golge GORUNMEZ; derinlik yerine ince altin bir
        hairline kullanilir. Golge yine de tanimli kalir ki temeldeki
        `var(--golge)` cagrilari bos deger almasin.
    */
    --golge: 0 24px 60px -30px rgb(0 0 0 / .9);

    --yazi-baslik: Georgia, 'Iowan Old Style', 'Times New Roman', Times, serif;

    /*
        Tarayiciya sayfanin koyu oldugunu SOYLE: yerlesik form denetimleri,
        kaydirma cubugu ve otomatik doldurma rengi buna gore secilir.
        Soylenmezse beyaz kaydirma cubugu koyu sayfanin yanina yapisir.
    */
    color-scheme: dark;
}

body {
    background: var(--zemin);
    color: var(--metin);
    /* Ince ve zarif: harf araligi hafif acilir, satir yuksekligi buyur. */
    letter-spacing: .012em;
    line-height: 1.75;
}

/*
    Basliklar SERIF, govde sans. Ikisi de sistem yiginindan gelir:
    harici yazi tipi HICBIR AG ISTEGI kuralini bozardi ve ziyaretcinin
    adresini ucuncu bir tarafa gonderirdi.

    Ince ve zarif his, `font-weight: 400` serif + genis harf
    araligindan geliyor; kalin sans basliklar "ucuz" okunuyor.
*/
h1, h2, h3 {
    font-family: var(--yazi-baslik);
    font-weight: 400;
    letter-spacing: .01em;
}

::selection { background: var(--ana); color: var(--koyu); }

/* ========================================================================
   TEMELIN ACIK ZEMIN VARSAYIMLARINI DUZELT — 1: BAGLANTILAR
   ======================================================================== */

/*
    Temel tema baglantiyi `--ana-koyu` ile boyar; acik zeminde dogru,
    koyu zeminde ise en koyu tonu en koyu zemine koymak demek. Baglanti
    metni ACIK altin olur.
*/
a { color: var(--ana-acik); }
a:hover { color: var(--metin); }

/*
    Odak halkasi ASLA kaldirilmaz. Halka `--ana`, `outline-offset` ile
    ogenin DISINDA durur; boylece altin dugmenin uzerine binip
    gorunmez hale gelmez.
*/
:focus-visible {
    outline: 3px solid var(--ana);
    outline-offset: 3px;
}

/*
    Zemini zaten altin olan ogeler icin halka ACIK altina cevrilir:
    altin uzerine altin halka, offset kapanirsa kaybolurdu.
*/
.dugme:focus-visible,
.atla:focus-visible {
    outline-color: var(--ana-acik);
}

/* Icerige atlama baglantisi koyu zeminde kaybolmasin diye altin olur. */
.atla:focus {
    background: var(--ana);
    color: var(--koyu);
    border-radius: var(--yumusak);
    font-weight: 700;
}

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

/*
    Temelde serit `--koyu` zeminlidir; koyu temada sayfa zemininden
    ayirt edilemezdi. Bir tik acik zemin + hairline ile ayrilir.
*/
.serit {
    background: var(--zemin-2);
    color: var(--metin-2);
    border-bottom: 1px solid var(--cizgi);
    font-size: .74rem;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.ust {
    background: color-mix(in srgb, var(--zemin) 92%, transparent);
    /* Sticky baslik icerigin uzerinden gecerken metin okunur kalsin. */
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--cizgi);
}
.ust-ic { padding-block: 1.4rem; }

.marka {
    font-family: var(--yazi-baslik);
    font-weight: 400;
    font-size: 1.5rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--metin);
}

.menu {
    gap: 2.25rem;
    font-weight: 500;
    font-size: .76rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.menu a { color: var(--metin-2); }
.menu a:hover { color: var(--ana-acik); }

.ray-dugme { color: var(--metin-2); }
.ray-dugme:hover { background: var(--zemin-2); color: var(--ana-acik); }

/* Rozet zemini altin; uzerindeki metin BEYAZ degil `--koyu` olmali. */
.rozet {
    background: var(--ana);
    color: var(--koyu);
    font-weight: 700;
}

/* ========================================================================
   3. DUGMELER
   ======================================================================== */

.dugme {
    min-height: 48px;
    padding-inline: 2.25rem;
    border-radius: var(--yumusak);
    border: 1px solid var(--ana);
    background: var(--ana);
    /* Altin uzerinde BEYAZ 2.05:1 kalir; `--koyu` 8.47:1 verir. */
    color: var(--koyu);
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
/*
    Koyu temada uzerine gelme AYDINLATIR. Temelin yaptigi gibi
    koyulastirmak, koyu sayfada dugmeyi zemine gomerdi.
*/
.dugme:hover {
    background: var(--ana-acik);
    border-color: var(--ana-acik);
    color: var(--koyu);
}

/*
    Ikincil dugmenin cercevesi `--cizgi` degil altin: `--cizgi` bilincli
    olarak cok sessiz (asagiya bakin) ve bir DENETIMIN sinirini
    belirleyemezdi.
*/
.dugme-ikincil {
    background: transparent;
    border-color: var(--ana);
    color: var(--ana-acik);
}
.dugme-ikincil:hover {
    background: color-mix(in srgb, var(--ana) 14%, transparent);
    border-color: var(--ana-acik);
    color: var(--metin);
}

/* ========================================================================
   4. VITRIN
   ======================================================================== */

.vitrin {
    position: relative;
    overflow: hidden;
    background: var(--zemin);
    /*
        COK GENIS BOS ALAN. Pahali his kalabalıktan degil boslugun
        cesaretinden gelir; vitrinde tek bir soz ve tek bir isaret var.
    */
    padding-block: clamp(4.5rem, 12vw, 9rem);
    text-align: center;
}

/*
    Tek bir sicak isik lekesi — vitrinin tepesinde duran gorunmez bir
    spot. `overflow: hidden` sayesinde tasan kisim kirpilir, YATAY
    KAYDIRMA olusmaz.
*/
.vitrin::before {
    content: '';
    position: absolute;
    inset-block-start: -18rem;
    inset-inline-start: 50%;
    width: 46rem;
    height: 36rem;
    transform: translateX(-50%);
    background: radial-gradient(closest-side,
        color-mix(in srgb, var(--ana) 16%, transparent),
        transparent);
    pointer-events: none;
}

.vitrin-ic {
    position: relative;
    /* Dar olcu = zarif. Satir 60-70 karakteri gecmez. */
    max-width: 44rem;
    margin-inline: auto;
}

/* Fotograf yerine gecen satir ici cizim; sablonda aria-hidden. */
.vitrin-isaret {
    display: block;
    width: min(15rem, 60%);
    margin: 0 auto 2.5rem;
    color: var(--ana);
    opacity: .85;
}

.ust-etiket {
    /* Temel bunu `--ana-koyu` yapar: koyu zeminde 5.07:1 ile gecer ama
       kücuk ve seyrek harflerde okunakli degil. Acik altin secildi. */
    color: var(--ana-acik);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .32em;
    text-transform: uppercase;
    margin-bottom: 1.75rem;
}

.vitrin h1 {
    font-family: var(--yazi-baslik);
    font-weight: 400;
    font-size: clamp(2.1rem, 6vw, 3.6rem);
    line-height: 1.18;
    letter-spacing: .005em;
}

.slogan {
    max-width: 34rem;
    margin: 1.5rem auto 0;
    color: var(--metin-2);
    font-size: 1.02rem;
}

.vitrin-eylemler {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin: 2.75rem 0 0;
}

/* ========================================================================
   5. BOLUM BASLIKLARI
   ======================================================================== */

.bolum { padding-block: clamp(3.5rem, 9vw, 7rem); }
.bolum-2 { background: var(--zemin-2); }

.bolum-basi {
    display: block;
    margin-bottom: 3.5rem;
    text-align: center;
}
.bolum h2 {
    font-family: var(--yazi-baslik);
    font-weight: 400;
    font-size: clamp(1.5rem, 3.5vw, 2.1rem);
    letter-spacing: .02em;
}
.bolum-basi p {
    margin: .9rem auto 0;
    max-width: 32rem;
    color: var(--metin-2);
    font-size: .96rem;
}

/* Basligin altindaki ince altin cizgi: susleme degil, ritim isareti. */
.bolum-basi h2::after {
    content: '';
    display: block;
    width: 3rem;
    height: 1px;
    margin: 1.25rem auto 0;
    background: var(--ana);
}

/* ========================================================================
   6. KOLEKSIYON PANELLERI (temaya ozel bolum)
   ======================================================================== */

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

.panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    /* Genis ic bosluk; panel az sayida ama BUYUK. */
    padding: 3.5rem 1.75rem;
    border: 1px solid var(--cizgi);
    border-radius: var(--yumusak);
    background: var(--zemin-2);
    color: var(--metin);
    text-decoration: none;
    /* Dokunma hedefi fazlasiyla saglanir; yine de alt sinir yazili. */
    min-height: 44px;
    transition: border-color .3s ease, background-color .3s ease;
}
.panel:hover {
    border-color: var(--ana);
    background: color-mix(in srgb, var(--ana) 7%, var(--zemin-2));
    color: var(--metin);
}
.panel svg {
    width: 3.25rem;
    height: 3.25rem;
    color: var(--ana);
}
.panel-ad {
    font-family: var(--yazi-baslik);
    font-size: 1.15rem;
}
.panel-alt {
    margin: -.9rem 0 0;
    color: var(--metin-2);
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}

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

   Kart sablonu (`partials/urun-kart.blade.php`) EZILMEDI. Gereken her
   sey stille yapilabiliyordu; sablonu kopyalamak, temelde ileride
   duzeltilecek bir kusuru (or. eksik `alt` metni) bu temada donduracakti.
   ======================================================================== */

.izgara {
    /* AZ SAYIDA AMA BUYUK: 16rem yerine 20rem alt sinir, genis aralik. */
    gap: 3rem 2rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.urun-kart {
    background: transparent;
    border: 0;
    border-radius: 0;
    text-align: center;
}
/* Koyu zeminde golge gorunmez; vurgu cerceveden gelir. */
.urun-kart:hover { box-shadow: none; }

.urun-gorsel {
    /* Kare cerceve: taki fotografi dikey degil merkezlidir. */
    aspect-ratio: 1;
    border: 1px solid var(--cizgi);
    border-radius: var(--yumusak);
    /* Fotograf yoksa bos kutu degil, ince bir kesme tas dokusu kalir. */
    background:
        repeating-linear-gradient(135deg,
            color-mix(in srgb, var(--ana) 5%, transparent) 0 1px,
            transparent 1px 16px),
        var(--zemin-2);
    transition: border-color .3s ease;
}
.urun-kart:hover .urun-gorsel { border-color: var(--ana); }
.urun-kart:hover .urun-gorsel img { transform: scale(1.03); }

.urun-gorsel-yok {
    color: var(--metin-2);
    font-size: .78rem;
    letter-spacing: .06em;
}

/*
    "Tukendi" etiketi temelde `--koyu` zeminlidir; koyu kart uzerinde
    okunmazdi. Cerceveli ve sayfa zeminli yapildi — bilgi YALNIZCA
    renkle degil, zaten yazili metinle tasiniyor.
*/
.urun-etiket {
    inset-block-start: .6rem;
    inset-inline-start: .6rem;
    padding: .2rem .7rem;
    border: 1px solid var(--metin-2);
    border-radius: var(--yumusak);
    background: var(--zemin);
    color: var(--metin);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.urun-govde {
    align-items: center;
    gap: .35rem;
    padding: 1.25rem .5rem 0;
}

.urun-ad {
    font-family: var(--yazi-baslik);
    font-weight: 400;
    font-size: 1.12rem;
    line-height: 1.4;
}
.urun-ad a { color: var(--metin); }
.urun-kart:hover .urun-ad a { color: var(--ana-acik); }

.urun-fiyat {
    margin: .5rem 0 0;
    color: var(--ana-acik);
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: .12em;
}
.urun-fiyat small {
    margin-bottom: .2rem;
    color: var(--metin-2);
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
}

/* ========================================================================
   8. GUVENCE SERIDI (temaya ozel bolum)
   ======================================================================== */

.guvence {
    display: grid;
    gap: 2.5rem;
    text-align: center;
}
@media (min-width: 48rem) {
    .guvence { grid-template-columns: repeat(3, 1fr); }
    /* Sutunlar arasi tek hairline: kutu degil, sadece ayrim. */
    .guvence > * + * { border-inline-start: 1px solid var(--cizgi); }
}
.guvence h3 {
    margin: 0 0 .6rem;
    color: var(--ana-acik);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
}
.guvence p {
    margin: 0;
    padding-inline: 1.5rem;
    color: var(--metin-2);
    font-size: .94rem;
}

/* ========================================================================
   9. TEMELDEN DUSEN SAYFALAR — FORM, SEPET, KASA, SIPARIS

   ======================================================================
   `--cizgi` NEDEN BU KADAR SESSIZ, VE BUNUN BEDELI NEREDE ODENIYOR
   ======================================================================
   `--cizgi` (#332c23) sayfa zeminine karsi 1.43:1'dir. Bu, kart ve
   bolum ayirici hairline'lari icin BILINCLI bir secim: 3:1'lik bir
   cizgi koyu zeminde parlak bir kafes gibi gorunur ve temanin sessiz
   hissini yok eder. WCAG 1.4.11 dekoratif ayiricilar icin oran
   istemez.

   Ama bir DENETIMIN sinirini belirleyen cizgi dekoratif degildir:
   girdi alani, secim kutusu ve ikincil dugme onsuz "burada bir alan
   var" demez. O yuzden asagida bunlarin cercevesi acikca
   `--metin-2`'ye (8.69:1) ve `--ana`'ya (8.12:1) cekilir.
   ======================================================================== */

.alan label {
    color: var(--metin);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.alan input, .alan textarea, .alan select {
    border: 1px solid var(--metin-2);
    border-radius: var(--yumusak);
    background: var(--zemin-2);
    color: var(--metin);
}
.alan input::placeholder, .alan textarea::placeholder { color: var(--metin-2); }
.alan input:hover, .alan textarea:hover, .alan select:hover { border-color: var(--ana); }

/*
    Hata metni temelde `--ana-koyu`, yani baglanti rengiyle AYNI aileden.
    Koyu temada hata bakiya cekildi: baglanti altin, hata bakir — renk
    tek basina bilgi tasimiyor (metin zaten yazili) ama iki farkli seyin
    ayni renkte olmamasi taramayi kolaylastiriyor.
*/
.alan-hata, .satir-uyari { color: var(--vurgu-acik); }

.uyari {
    border: 1px solid var(--vurgu);
    border-radius: var(--yumusak);
    background: color-mix(in srgb, var(--vurgu) 12%, var(--zemin));
    color: var(--metin);
}

.filtre, .ozet, .bos-durum, .yonerge {
    border-radius: var(--yumusak);
}
.filtre, .ozet { background: var(--zemin-2); border-color: var(--cizgi); }
.filtre legend, .ozet-toplam { letter-spacing: .14em; }
.filtre legend { color: var(--metin); }

/* Onay kutusu/radyo: yerlesik denetim altin isaretlensin. */
.filtre-secenek { color: var(--metin); }
.filtre-secenek input { accent-color: var(--ana); }
.filtre-adet { color: var(--metin-2); }

.bos-durum {
    border-color: var(--cizgi);
    background: var(--zemin-2);
    color: var(--metin-2);
}

.satirlar, .satir + .satir { border-color: var(--cizgi); }
.satir-gorsel { background: var(--zemin-2); border: 1px solid var(--cizgi); border-radius: var(--yumusak); }
.satir-ad { font-family: var(--yazi-baslik); font-size: 1.05rem; }
.satir-alt { color: var(--metin-2); }

.urun-kapak, .kucuk-gorseller li {
    background: var(--zemin-2);
    border: 1px solid var(--cizgi);
    border-radius: var(--yumusak);
}
.ozellik { background: var(--zemin-2); border-radius: var(--yumusak); }
.yonerge { background: var(--zemin-2); border-color: var(--cizgi); }

/*
    Sayfalama temel Laravel gorunumunden gelir ve Tailwind siniflari
    tasir; bu projede Tailwind yuklenmedigi icin bicimsiz cikar. Burada
    en azindan OKUNUR olmasi saglanir — sayfalamayi kaybetmis bir
    ziyaretci katalogun geri kalanini hic goremezdi.
*/
.sayfalama { text-align: center; }
.sayfalama a, .sayfalama button { color: var(--ana-acik); }
.sayfalama svg { display: inline-block; width: 1rem; height: 1rem; vertical-align: middle; }

/* ========================================================================
   10. ALT BILGI
   ======================================================================== */

.alt {
    margin-top: 0;
    border-top: 1px solid var(--cizgi);
    background: var(--zemin-2);
}
.alt-ic { padding-block: 4rem; }
.alt h2 {
    font-family: var(--yazi-baslik);
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ana-acik);
}
.alt p { color: var(--metin-2); }
.alt li a { color: var(--metin-2); }
.alt li a:hover { color: var(--ana-acik); }
.alt-serit { border-color: var(--cizgi); }
.alt-serit p { color: var(--metin-2); letter-spacing: .1em; }

/* ========================================================================
   11. HAREKET TERCIHI

   Temel tema zaten butun gecisleri kapatiyor. Burada tekrar yaziliyor
   cunku bu dosya temelden BAGIMSIZ okunabilmeli: birisi ileride tema
   stilini tek basina baska bir yerde kullanirsa koruma onunla gelir.
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .urun-kart:hover .urun-gorsel img { transform: none; }
}

/* ========================================================================
   12. BASKI

   Koyu tema kagida BASILMAZ: hem murekkep yakar hem cogu yazicida
   altin metin okunmaz cikar. Jetonlar baski icin acik degerlere
   dondurulur — kural kural ezmek yerine tek yerden.
   ======================================================================== */

@media print {
    :root {
        --ana: #6b5210;
        --ana-koyu: #4a3809;
        --ana-acik: #6b5210;
        --vurgu: #7d4c2a;
        --vurgu-acik: #7d4c2a;
        --zemin: #ffffff;
        --zemin-2: #ffffff;
        --metin: #000000;
        --metin-2: #333333;
        --cizgi: #bbbbbb;
        --koyu: #000000;
        color-scheme: light;
    }
    body { background: #fff; color: #000; }
    .vitrin::before, .vitrin-isaret { display: none; }
    .dugme { color: #000; background: transparent; border-color: #000; }
}

/* =====================================================================
   FINANS RENKLERI - KOYU TEMADA ACIK VARYANT
   =====================================================================
   Temelin acik zemin icin secilmis yesil/kirmizisi koyu sayfada
   4.5:1'i tutturmuyor. Anlam ayni, deger farkli.

   Kontrast: yesil 10.60:1, kirmizi 6.68:1 (sayfa zemini #17130f).
   ===================================================================== */

:root {
    --artis: #4ade80;
    --dusus: #f87171;
}