/* ========================================================================
   MOBILYA VITRINI

   Mobilya ve ev dekorasyonu magazasi icin tema. Sicak notr tonlar
   (kum, kil, ahsap), genis bloklar, buyuk tipografi.

   =======================================================================
   BU DOSYA TEMELI EZER, KOPYALAMAZ
   =======================================================================
   Temel temanin stili ONCE yuklenir (ShopThemeResolver::stilAdresleri),
   bu dosya sonra. Yani burada YALNIZCA farklilasan kurallar durur;
   temelde duzeltilen bir kusur buraya da gecer. `@import` KULLANILMAZ:
   ic onekli tema adresi import icinde 404 dondugu icin sayfa bir kez
   tamamen stilsiz acilmisti, ustelik iki ayri <link> paralel iner.

   =======================================================================
   KONTRAST OLCULDU, TAHMIN EDILMEDI
   =======================================================================
   Sicak notr paletlerde metin/zemin orani kolayca 4.5:1'in altina
   duser - kum rengi bir zemin goze koyu gorunur ama isik olarak
   beyaza yakindir. Butun ciftler WCAG bagil parlaklik formuluyle
   hesaplandi; olculen degerler theme.json > notes > kontrast icinde.
   ======================================================================== */

:root {
    /*
        Ana renk CEVIZ/ MESE tonu. Dugme zemini olarak kullaniliyor ve
        uzerinde beyaz metin 5.82:1 veriyor - daha acik bir ahsap tonu
        (ornegin #a97245) beyazla 4.05:1'de kalirdi ve AA'yi kacirirdi.
    */
    --ana: #8a5a3b;
    --ana-koyu: #6b4229;
    --ana-acik: #d9b48f;

    /*
        Vurgu ADACAYI YESILI. Mobilyada ikinci renk cogunlukla bitki
        yesilidir; doygun bir yesil (#2f9e44 gibi) sicak notr zeminde
        ucuz durur ve beyaz metinle 3.45:1'e duserdi.
    */
    --vurgu: #4f5d4b;
    --vurgu-koyu: #3a4636;
    --vurgu-acik: #afbfa8;

    /* Zemin saf beyaz DEGIL: kirik kagit tonu, sakin ve pahali bir his. */
    --zemin: #fbf8f3;
    --zemin-2: #f1eae0;

    /* Metin siyah DEGIL, koyu kahve-siyah - sicak paletle uyumlu kalsin. */
    --metin: #2a2320;
    --metin-2: #5f5348;
    --cizgi: #e0d5c7;
    --koyu: #2a2320;

    /* Yumusak ve genis: mobilyanin kendisi gibi. */
    --yumusak: 18px;
    --kap: 1320px;
    --golge: 0 28px 60px -34px rgb(42 35 32 / .45);

    /*
        Basliklarda SISTEM SERIF'i. Harici yazi tipi indirilmez -
        ziyaretcinin adresi ucuncu tarafa gitmesin diye. Georgia her
        masaustu ve mobil sistemde kurulu; yigin bulunamazsa
        genel `serif`e duser.
    */
    --baslik-yazi: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;
}

body {
    /* Govde metni yine sistem yigini: uzun paragrafta serif yorar. */
    line-height: 1.65;
}

h1, h2, h3, .marka, .urun-fiyat {
    font-family: var(--baslik-yazi);
    font-weight: 400;
    letter-spacing: -.01em;
}

.marka {
    font-size: 1.5rem;
    letter-spacing: .01em;
}

.menu { font-weight: 500; letter-spacing: .02em; }

/* ========================================================================
   VITRIN — genis alan, buyuk tipografi
   ======================================================================== */

.vitrin {
    /* Kendi dolgusunu ic izgara veriyor; ustteki serit ile birlesik dursun. */
    padding-block: 0;
    background:
        /*
            Ahsap damari yerine gecen ince dikey cizgiler. Fotograf
            YOK: musterinin satmadigi bir koltugun stok fotografini
            vitrine koymak yanlis vaat olurdu.
        */
        repeating-linear-gradient(90deg,
            color-mix(in srgb, var(--koyu) 4%, transparent) 0 1px,
            transparent 1px 5.5rem),
        linear-gradient(180deg, var(--zemin-2) 0%, var(--zemin) 100%);
}

/* Temel temanin dekoratif lekeleri bu sakin zeminde fazla gelir. */
.vitrin-leke { display: none; }

.vitrin-duzen {
    display: grid;
    align-items: center;
    gap: 3rem;
    /* Genis alan: mobilyanin nefes almasi lazim. */
    padding-block: 4.5rem;
}
@media (min-width: 64rem) {
    .vitrin-duzen {
        grid-template-columns: 1.05fr .95fr;
        gap: 4rem;
        padding-block: 7rem;
    }
}

.vitrin h1 {
    font-size: clamp(2.5rem, 6.4vw, 4.25rem);
    line-height: 1.05;
    letter-spacing: -.025em;
    max-width: 14ch;
}

.vitrin .slogan {
    max-width: 46ch;
    font-size: 1.15rem;
    margin-top: 1.5rem;
}

.ust-etiket {
    color: var(--ana-koyu);
    letter-spacing: .22em;
    font-size: .74rem;
}

/*
    Vitrin dugmeleri satir icinde: ikisi de 44 pikselden yuksek ve
    aralarinda parmak payi var (yanlis dugmeye basmak, mobilyada
    "listeye don" ile "sepete ekle" arasinda fark yaratir).
*/
.vitrin-eylem {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    margin-top: 2.5rem;
}

/*
    Fotografin yerini alan desenli pano. `overflow: hidden` sart:
    icindeki cizim panonun disina tasarsa sayfada YATAY KAYDIRMA
    olusurdu.
*/
.vitrin-pano {
    position: relative;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    border: 1px solid var(--cizgi);
    border-radius: var(--yumusak);
    background:
        radial-gradient(120% 90% at 50% 100%,
            color-mix(in srgb, var(--ana) 12%, transparent) 0%,
            transparent 62%),
        var(--zemin);
}
.vitrin-pano svg {
    position: absolute;
    inset: 10%;
    width: 80%;
    height: 80%;
    color: var(--koyu);
    /* Cizim dekoratif: okunmasi degil, alani doldurmasi bekleniyor. */
    opacity: .3;
}

/* Zeminde duran ince golge cizgisi - mobilya havada durmasin. */
.vitrin-pano::after {
    content: '';
    position: absolute;
    inset-inline: 14%;
    inset-block-end: 12%;
    height: 1px;
    background: color-mix(in srgb, var(--koyu) 22%, transparent);
}

/* ========================================================================
   BOLUM BASLIKLARI — genis ve sakin
   ======================================================================== */

.bolum { padding-block: 5.5rem; }

.bolum h2 {
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    line-height: 1.15;
}

.bolum-basi { margin-bottom: 3rem; align-items: flex-end; }

/* Baslik altindaki aciklama: bolumun ne oldugunu tek cumlede soyler. */
.bolum-ozet {
    margin: .85rem 0 0;
    max-width: 52ch;
    color: var(--metin-2);
    font-size: 1.05rem;
}

.bolum-basi-metin { max-width: 46rem; }

/* ========================================================================
   KOLEKSIYONLAR — oda oda genis bloklar
   ======================================================================== */

.odalar {
    display: grid;
    gap: 1.5rem;
    /*
        Az sayida, BUYUK blok. 20rem alt sinir: daha kucugu telefonda
        tek sutuna dusmeden once icerigi sikistirirdi.
    */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.oda {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Genis ic bosluk: temanin sakin hissi bosluktan geliyor. */
    padding: 2.5rem 2rem;
    border: 1px solid var(--cizgi);
    border-radius: var(--yumusak);
    /*
        Blok zemini KUM tonu (--zemin-2), bolum zemini ise kirik kagit
        (--zemin). Ilk denemede ikisi de --zemin idi ve bloklar
        yalnizca 1 piksellik cizgiyle secilebiliyordu; tonal fark
        (1.13:1) ince ama cizgiyle birlikte blogu ayirt edilir kilar.
    */
    background: var(--zemin-2);
    color: var(--metin);
    text-decoration: none;
    /* Tum blok tiklanabilir; 44 pikselin cok uzerinde bir hedef. */
    min-height: 15rem;
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.oda:hover {
    color: var(--metin);
    border-color: var(--ana);
    transform: translateY(-3px);
    box-shadow: var(--golge);
}

.oda-ikon {
    width: 56px;
    height: 56px;
    color: var(--ana-koyu);
}

.oda h3 {
    margin: auto 0 0;
    font-size: 1.5rem;
}

.oda p {
    margin: 0;
    color: var(--metin-2);
    font-size: .95rem;
}

/* ========================================================================
   URUN IZGARASI — daha az, daha buyuk kart
   ======================================================================== */

.izgara {
    gap: 2.25rem;
    /*
        Temelde alt sinir 16rem (satirda 4-5 kart). Burada 21rem:
        mobilyada urun az sayidadir ve dokusu ancak buyuk kartta
        gorulur.
    */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
}

.urun-kart {
    border-color: transparent;
    border-radius: var(--yumusak);
    background: transparent;
    overflow: visible;
}
.urun-kart:hover { box-shadow: none; }

.urun-gorsel {
    /*
        Mobilya YATAY bir nesnedir; temelin 4/5 dikey cercevesi
        koltugu kirpar. 4/3 esyanin tamamini gosterir.
    */
    aspect-ratio: 4 / 3;
    border-radius: var(--yumusak);
    border: 1px solid var(--cizgi);
    /*
        Cerceve zemini kum tonundan bir tik KOYU. Duz --zemin-2
        kullanilsaydi kart, ayni rengi tasiyan "one cikanlar"
        bolumunun zemininde kaybolurdu (olculen fark 1.00:1);
        koyu %10 karisimi 1.21:1 verir - sakin ama secilebilir.
        Icindeki yer tutucu metin bu zeminde 5.17:1 ile AA gecer.
    */
    background:
        repeating-linear-gradient(90deg,
            color-mix(in srgb, var(--koyu) 4%, transparent) 0 1px,
            transparent 1px 3rem),
        color-mix(in srgb, var(--koyu) 10%, var(--zemin-2));
}
.urun-kart:hover .urun-gorsel img { transform: scale(1.03); }

/* Fotografi olmayan urunde bos cerceve degil, ne oldugunu soyleyen alan. */
.urun-gorsel-yok {
    flex-direction: column;
    gap: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .86rem;
}
.urun-gorsel-yok svg {
    width: 64px;
    height: 64px;
    color: var(--metin-2);
    opacity: .45;
}

.urun-etiket {
    background: var(--vurgu-koyu);
    /* Rozette METIN var: bilgi yalnizca renkle anlatilmiyor. */
    color: #fff;
    inset-block-start: 1rem;
    inset-inline-start: 1rem;
    padding: .35rem .9rem;
}

.urun-govde {
    padding: 1.1rem .25rem 0;
    gap: .5rem;
}

.urun-ad {
    font-family: var(--baslik-yazi);
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.3;
}

.urun-fiyat {
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0;
    padding-top: .5rem;
}
.urun-fiyat small {
    /* "baslayan fiyat" notu fiyatin ustunde dursun, kararsizlik birakmasin. */
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .7rem;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ========================================================================
   GUVENCE SERIDI — teslimat / montaj / garanti
   ======================================================================== */

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

.guvence-oge {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
}

.guvence-oge svg {
    flex: none;
    width: 40px;
    height: 40px;
    color: var(--vurgu-koyu);
}

.guvence-oge h3 { margin: 0 0 .35rem; font-size: 1.15rem; }
.guvence-oge p { margin: 0; color: var(--metin-2); font-size: .95rem; }

/* ========================================================================
   DUGMELER — kose yumusak ama yuvarlak degil
   ======================================================================== */

.dugme {
    min-height: 52px;
    padding-inline: 2rem;
    border-radius: 10px;
    /* Ana renk uzerinde beyaz 5.82:1 - olculdu, AA gecer. */
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: .01em;
}
.dugme-ikincil { border-color: var(--metin-2); }

/* ========================================================================
   FILTRE, OZET, ALT BILGI — ayni sakin cerceve
   ======================================================================== */

.filtre, .ozet, .bos-durum {
    border-radius: var(--yumusak);
    background: var(--zemin);
}

.alan input, .alan textarea, .alan select { border-radius: 10px; }

.alt { background: var(--zemin-2); margin-top: 5rem; }

/* ========================================================================
   HAREKET TERCIHI
   ======================================================================== */

/*
    Temel tema gecis SURELERINI zaten sifirliyor. Burada ayrica
    YER DEGISTIRMENIN KENDISI kapatiliyor: sure sifir olsa bile
    blogun ziplayarak yer degistirmesi vestibuler rahatsizligi olan
    kullanici icin rahatsiz edici kalirdi.
*/
@media (prefers-reduced-motion: reduce) {
    .oda:hover { transform: none; }
    .urun-kart:hover .urun-gorsel img { transform: none; }
}