/* =====================================================================
   EV TEKSTILI
   =====================================================================
   Soluk erik + yulaf.

   Ev tekstilinde URUNUN KENDISI RENKLIDIR (nevresim, perde, hali) ve
   tema onunla yarismamali. Ayni zamanda `mobilya-vitrin`in sicak
   ahsap dilinden ve `moda-vitrin`in siyah-fusya kesinliginden
   ayrilmali; soluk erik ikisinin de kullanmadigi bir eksen.

   Ritim ThemeForest "Corano"nun 2. ana sayfasindan: urun bolumleri
   ARASINA giren iki buyuk gorsel karesi. HTML'i degil - sablon
   Bootstrap tabanli ve tema sozlesmesi yardimci sinif cercevelerini
   yasakliyor.

   Bu dosya temelin USTUNE biner; layout iki ayri <link> basar.
   `@import` KULLANILMAZ (gerekce ShopThemeResolver::stilAdresleri).
   ===================================================================== */

:root {
    --ana: #5b4160;
    --ana-koyu: #432f47;
    /* 4.10:1 - odak halkasi VE ikincil metin olarak kullanilabilir. */
    --ana-acik: #8f7493;

    /* Yulaf/haki: erigin yaninda sicak kalir ve rozetleri ayirir.
       Iki zeminde de metin olabilecek kadar koyu. */
    --vurgu: #7a6a3a;
    --vurgu-koyu: #5d512c;
    /* 3.26:1 - METIN DEGIL; yalnizca cizgi ve dekor. */
    --vurgu-acik: #9d8d5c;

    --zemin: #fffefc;
    --zemin-2: #f2eee7;
    --metin: #232025;
    --metin-2: #5b565d;
    --cizgi: #e5e0d6;
    --koyu: #191619;

    /* 8px - tekstil urunu yumusaktir ama kart bir KUMAS degil bir
       vitrindir; cok yuvarlak kose urunun kendi dokusuyla
       yarisiyordu. */
    --yumusak: 8px;
    --kap: 1200px;
    --golge: 0 14px 30px -22px rgb(35 32 37 / .35);
}

body {
    background: var(--zemin);
    color: var(--metin);
}

/* ---------------------------------------------------------------
   TIPOGRAFI
   ---------------------------------------------------------------
   Tek aile, sans. Ev tekstilinde urun adlari olcu ve malzeme iceriyor
   ("200x220 ranforce"); serif bunlari okunaksizlastiriyordu.
   HARICI FONT YOK.
   --------------------------------------------------------------- */

h1, h2, h3 {
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------
   VITRIN
   --------------------------------------------------------------- */

.vitrin {
    position: relative;
    overflow: hidden;
    background: var(--zemin-2);
}

.vitrin-ic {
    position: relative;
    z-index: 1;
    padding-block: clamp(3rem, 8vw, 5.5rem);
    max-width: 44rem;
}

/*
    ARKA PLAN FOTOGRAF DEGIL.

    Dekore edilmis bir oda fotografi, magazanin satmadigi mobilyayi da
    vaat eder. Gradyan hicbir sey vaat etmez.
*/
.vitrin-leke {
    position: absolute;
    border-radius: 50%;
    filter: blur(64px);
    opacity: .42;
    pointer-events: none;
}

.vitrin-leke-1 {
    width: 24rem; height: 24rem;
    top: -8rem; right: -6rem;
    background: radial-gradient(circle, var(--ana-acik), transparent 70%);
}

.vitrin-leke-2 {
    width: 17rem; height: 17rem;
    bottom: -6rem; left: -4rem;
    background: radial-gradient(circle, var(--vurgu-acik), transparent 70%);
}

.ust-etiket {
    margin: 0 0 .7rem;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--ana);
}

.vitrin h1 {
    margin: 0;
    font-size: clamp(1.9rem, 4.5vw, 2.9rem);
    line-height: 1.15;
}

.vitrin .slogan {
    margin: .9rem 0 0;
    max-width: 33rem;
    color: var(--metin-2);
    line-height: 1.75;
}

/* ---------------------------------------------------------------
   OLCU NOTU
   ---------------------------------------------------------------
   Ev tekstilinde iadelerin buyuk kismi OLCU yanlisligindan gelir. Bu
   bolum bir vaat degil bir HATIRLATMA.
   --------------------------------------------------------------- */

.olcu-notu {
    border-left: 3px solid var(--vurgu-acik);
    padding-left: 1.1rem;
    max-width: 52ch;
    color: var(--metin-2);
    line-height: 1.8;
}

/* ---------------------------------------------------------------
   ODAK
   --------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--ana);
    outline-offset: 2px;
}