/* =====================================================================
   KOZMETIK - SADE
   =====================================================================
   Yapilandirilmis perakende. Mevcut `kozmetik-vitrin` pudra pastel,
   22px yuvarlak ve havadar; bu tema onun KARSITI: notr gri-beyaz,
   tek sicak tan vurgu, 4px kose, cerceveli kartlar.

   Gorsel dil ThemeForest "Corano"dan alindi; 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` hem dugme zemini hem baglanti metni: beyaz uzerinde
        5.29:1, uzerine beyaz metinle de 5.29:1.

        `--ana-acik` Corano'nun kendi tonu (#c29958) ama beyaz uzerinde
        2.63:1 - YALNIZCA DEKOR. Odak halkasi ve denetim cercevesi
        3:1 ister; onlarda bu ton KULLANILMAZ.
    */
    --ana: #8a6526;
    --ana-koyu: #6a4d1c;
    --ana-acik: #c29958;

    /* Soguk arduvaz: sicak tan tek basina kalinca sayfa tek renkli
       olur; ikincil renk rozetleri ayirir ve "klinik" his verir. */
    --vurgu: #3d5a68;
    --vurgu-koyu: #2b414c;
    --vurgu-acik: #7fa0ae;

    --zemin: #ffffff;
    --zemin-2: #f7f7f7;
    --metin: #222222;
    --metin-2: #555555;
    --cizgi: #efefef;
    --koyu: #1c1c1c;

    /*
        4px - IKI TEMAYI ILK BAKISTA AYIRAN SEY.

        Mevcut kozmetik temasi 22px kullaniyor. Yuvarlak kose yumusak
        ve butik, kesin kose duzenli ve guvenilir okunur; ikisi ayni
        sektorde farkli vaatlerdir.
    */
    --yumusak: 4px;
    --kap: 1200px;
    --golge: 0 12px 28px -20px rgb(34 34 34 / .3);
}

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

/* ---------------------------------------------------------------
   TIPOGRAFI - TEK AILE
   ---------------------------------------------------------------
   Corano tek font kullaniyor. Ayni yaklasim korundu ama HARICI FONT
   YOK: sistem yigini. Harici font, ziyaretcinin adresini ucuncu bir
   tarafa gondermek demekti.
   --------------------------------------------------------------- */

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

h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); line-height: 1.15; }
h2 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }

.ust-etiket {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ana);
}

.slogan {
    max-width: 48ch;
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--metin-2);
}

a { color: var(--ana); }
a:hover { color: var(--ana-koyu); }

/* ---------------------------------------------------------------
   RITIM - OLCULU, HAVADAR DEGIL
   --------------------------------------------------------------- */

.bolum { padding-block: clamp(2.6rem, 5vw, 4.5rem); }
.bolum-2 { background: var(--zemin-2); }

.bolum-basi {
    align-items: center;
    margin-bottom: 1.6rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--cizgi);
}

/* ---------------------------------------------------------------
   UST SERIT VE MENU
   --------------------------------------------------------------- */

.serit {
    background: var(--koyu);
    color: #ffffff;
    font-size: 0.78rem;
}

.ust {
    background: var(--zemin);
    border-bottom: 1px solid var(--cizgi);
}

.marka-ad { font-weight: 700; letter-spacing: 0.02em; }

.menu a {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--metin);
}

.menu a:hover { color: var(--ana); }

/* ---------------------------------------------------------------
   DUGMELER
   --------------------------------------------------------------- */

.dugme {
    border-radius: var(--yumusak);
    background: var(--ana);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dugme:hover { background: var(--ana-koyu); color: #ffffff; }

.dugme-ikincil {
    background: transparent;
    border: 1px solid var(--metin-2);
    color: var(--metin);
}

.dugme-ikincil:hover { border-color: var(--ana); color: var(--ana); background: transparent; }

/*
    ODAK HALKASI DEKORATIF TONDAN GELMEZ.

    `--ana-acik` beyaz uzerinde 2.63:1; odak halkasi 3:1 ister.
    Dekoratif bir tonla cizilen halka, ihtiyaci olan kullanicinin
    goremedigi bir halkadir.
*/
:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--ana);
    outline-offset: 2px;
}

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

.vitrin {
    position: relative;
    overflow: hidden;
    background: var(--zemin-2);
    border-bottom: 1px solid var(--cizgi);
    padding-block: clamp(3rem, 8vw, 6.5rem);
}

/* Fotograf degil, sessiz bir doku: stok fotograf musterinin
   satmadigi bir seyi vaat etme riski tasir. */
.vitrin-leke {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.35;
    pointer-events: none;
}

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

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

.vitrin-ic { position: relative; }

/* ---------------------------------------------------------------
   URUN IZGARASI - CERCEVELI VE YOGUN
   ---------------------------------------------------------------
   Mevcut kozmetik temasi cercevesiz kartlari 2.75rem araliklarla
   diziyor ("urunun nefes almasi"). Burada tersi: cerceve ve daha dar
   aralik, magazanin katalog GENISLIGINI one cikarir.
   --------------------------------------------------------------- */

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

.urun-kart {
    border: 1px solid var(--cizgi);
    border-radius: var(--yumusak);
    background: var(--zemin);
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.urun-kart:hover { border-color: var(--ana-acik); box-shadow: var(--golge); }

.urun-kapak { aspect-ratio: 1 / 1; background: var(--zemin-2); }

.urun-govde { padding: 1rem; }

.urun-ad { font-size: 0.98rem; font-weight: 600; }

.urun-fiyat { font-weight: 700; color: var(--metin); }

.urun-eski-fiyat { color: var(--metin-2); }

.rozet, .urun-rozet {
    border-radius: 2px;
    background: var(--vurgu);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.urun-rozet-indirim { background: var(--ana); }

/* ---------------------------------------------------------------
   KATEGORI KUTULARI
   --------------------------------------------------------------- */

.kategori-kutu {
    border: 1px solid var(--cizgi);
    border-radius: var(--yumusak);
    background: var(--zemin);
}

.kategori-kutu:hover { border-color: var(--ana-acik); }
.kategori-kutu-ad { font-weight: 600; }
.kategori-kutu-adet { color: var(--metin-2); }

/* ---------------------------------------------------------------
   TEMAYA OZEL BOLUMLER
   --------------------------------------------------------------- */

/* Guvence seridi - Corano'nun ust bandinin karsiligi. */
.guvence-cizgi {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    padding-block: 1.6rem;
    border-block: 1px solid var(--cizgi);
}

.guvence-kutu { display: flex; align-items: center; gap: 0.8rem; }

.guvence-kutu svg {
    flex: none;
    width: 1.7rem;
    height: 1.7rem;
    color: var(--ana);
}

.guvence-kutu p { margin: 0; }
.guvence-kutu-baslik { font-weight: 600; font-size: 0.92rem; }
.guvence-kutu-metin { font-size: 0.84rem; color: var(--metin-2); }

/* Bakim adimlari */
.bakim-izgara {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    counter-reset: adim;
}

.bakim-adim {
    position: relative;
    padding: 1.4rem 1.2rem 1.2rem;
    border: 1px solid var(--cizgi);
    border-radius: var(--yumusak);
    background: var(--zemin);
}

/*
    SAYI `content` ILE URETILIR ve `aria-hidden` DEGILDIR - ama
    ekran okuyucuya da okunmasi gerekmez: sira zaten belge sirasidir.
    Bu yuzden `::before` icerigi yalnizca gorseldir ve metin karsiligi
    baslikta durur ("Birinci adim" gibi bir metin YOK; baslik kendi
    basina anlamli).
*/
.bakim-adim::before {
    counter-increment: adim;
    content: counter(adim);
    position: absolute;
    top: -0.85rem;
    left: 1.2rem;
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: var(--ana);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 700;
}

.bakim-baslik { margin: 0 0 0.35rem; font-size: 1rem; font-weight: 600; }
.bakim-metin { margin: 0; font-size: 0.9rem; line-height: 1.65; color: var(--metin-2); }

/* ---------------------------------------------------------------
   ALT BILGI
   ---------------------------------------------------------------
   Koyu zeminde temelin acik-zemin renkleri okunmaz kalir; roller tek
   tek ezilir. (Ayni tuzak `mucevher-zarif`te olculmustu: 2.67:1 ve
   1.08:1 cikmisti.)
   --------------------------------------------------------------- */

.alt { background: var(--koyu); color: #ffffff; }

.alt h2 {
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.alt p,
.alt li,
.alt dd { color: rgb(255 255 255 / .82); }

.alt a,
.alt li a { color: #ffffff; }

.alt a:hover,
.alt li a:hover { color: var(--ana-acik); }

/* Dokunma hedefi 24px'in altina dusmesin (WCAG 2.2 2.5.8). */
.alt li a { display: inline-block; padding-block: 0.35rem; }

.alt-serit { border-top: 1px solid rgb(255 255 255 / .14); }

/* ---------------------------------------------------------------
   FORM ALANLARI
   --------------------------------------------------------------- */

.alan input, .alan select, .alan textarea {
    border-radius: var(--yumusak);
    /* Denetim cercevesi 3:1 ister; `--cizgi` (1.15:1) yetmez. */
    border-color: var(--metin-2);
}

.alan-hata, .uyari { color: var(--vurgu-koyu); }

/* ---------------------------------------------------------------
   HAREKET
   ---------------------------------------------------------------
   Temel de kapatiyor; burada TEKRAR yazildi - tema stili tek basina
   okundugunda da koruma onunla gelmeli.
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}