/* =====================================================================
   MUCEVHER - ZARIF
   =====================================================================
   Aydinlik bir mucevher vitrini. Gorsel dil ThemeForest "Mojuri"den
   alindi (bakir vurgu, serif basliklar, genis bosluk); HTML'i degil,
   yalnizca dili - sablon Bootstrap tabanli ve tema sozlesmesi yardimci
   sinif cercevelerini yasakliyor.

   Bu dosya temelin USTUNE binerr; layout iki ayri <link> basar (once
   temel, sonra tema). `@import` KULLANILMAZ: hem seri indirir hem de
   bir kere yanlis adresle yazildiginda sayfayi sessizce tamamen
   stilsiz birakmisti.
   ===================================================================== */

:root {
    /*
        RENK ROLLERI - ACIK TEMA.

        `--ana` hem dugme ZEMINI hem BAGLANTI METNI olabiliyor: beyaz
        uzerinde 4.96:1, uzerine beyaz metin konuldugunda yine 4.96:1.
        Koyu temada bu mumkun degildi ve roller ayrilmak zorunda
        kalmisti (bkz. taki-vitrin).

        `--ana-acik` Mojuri'nin kendi tonu (#cb8161) ama beyaz uzerinde
        3.06:1: YALNIZCA METIN DISI. Ince cizgi, odak halkasi,
        dekoratif isaret olur; metin olarak kullanilmasi yasak ve bu
        yuzden asagida hicbir metin kuralinda gecmiyor.
    */
    --ana: #a25f39;
    --ana-koyu: #7d4527;
    --ana-acik: #cb8161;

    /* Derin yesil: kadife kutu cagrisimi ve gozun tarayabilecegi
       ikinci eksen. Bakir tek basina kalinca sayfa tek renkli ve
       yorucu oluyor. */
    --vurgu: #3f5c4a;
    --vurgu-koyu: #2c4234;
    --vurgu-acik: #6f8f7c;

    --zemin: #ffffff;
    --zemin-2: #faf7f3;
    --metin: #1c1a17;
    --metin-2: #5f584f;
    --cizgi: #e7e0d7;
    --koyu: #14120f;

    /*
        KOSE YUMUSAKLIGI SIFIRA YAKIN.

        Temelin 14px'lik yuvarlagi sicak ve "uygulama" hissi verir;
        mucevher vitrini kesin kenar ister - vitrin cami, kadife kutu,
        sertifika karti hep dik acidir.
    */
    --yumusak: 2px;
    --kap: 1240px;
    --golge: 0 24px 60px -34px rgb(28 26 23 / .28);

    /* Sistem serif zinciri: harici font istegi YOK. */
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}

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

/* ---------------------------------------------------------------
   TIPOGRAFI
   --------------------------------------------------------------- */

h1, h2, h3,
.marka-ad,
.urun-ad {
    font-family: var(--serif);
    font-weight: 500;
    letter-spacing: 0.01em;
}

h1 {
    font-size: clamp(2.4rem, 5.5vw, 4.2rem);
    line-height: 1.08;
}

h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }

/*
    UST ETIKET - BOLUMLERIN SESSIZ BASLIGI.

    Cok genis harf araligi ve kucuk punto: editoryal dergilerin
    "kicker" satiri. Bakiri METIN olarak kullanmiyoruz (3.06:1);
    `--ana` (4.96:1) kullaniliyor.
*/
.ust-etiket {
    font-family: var(--serif);
    font-size: 0.78rem;
    font-style: italic;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--ana);
}

.slogan {
    max-width: 46ch;
    font-size: clamp(1rem, 1.3vw, 1.12rem);
    line-height: 1.75;
    color: var(--metin-2);
}

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

/* ---------------------------------------------------------------
   RITIM - PAHALI HIS BOSLUKTAN GELIR
   --------------------------------------------------------------- */

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

.bolum-basi {
    align-items: baseline;
    margin-bottom: clamp(1.8rem, 3vw, 3rem);
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--cizgi);
}

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

.serit {
    background: var(--koyu);
    color: #ffffff;
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

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

.marka-ad {
    font-size: 1.35rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.menu a {
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--metin);
}

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

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

.dugme {
    border-radius: 0;
    background: var(--ana);
    color: #ffffff;
    font-size: 0.8rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding-inline: 2.2rem;
}

.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); background: transparent; color: var(--ana); }

/* Odak halkasi KALDIRILMADI; ogenin disinda durur. */
:where(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--ana);
    outline-offset: 3px;
}

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

.vitrin {
    position: relative;
    overflow: hidden;
    background: var(--zemin-2);
    padding-block: clamp(4.5rem, 12vw, 11rem);
    text-align: center;
}

/*
    ISIK LEKELERI - FOTOGRAF DEGIL.

    Vitrine konan her stok fotograf, musterinin satmadigi bir seyi
    vaat etme riski tasir. Soyut bir isik dokusu hicbir sey vaat etmez
    ve her magazada dogru durur.
*/
.vitrin-leke {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.5;
    pointer-events: none;
}

.vitrin-leke-1 {
    width: 34rem; height: 34rem;
    top: -12rem; left: -10rem;
    background: radial-gradient(circle, var(--ana-acik), transparent 68%);
}

.vitrin-leke-2 {
    width: 28rem; height: 28rem;
    right: -8rem; bottom: -12rem;
    background: radial-gradient(circle, var(--vurgu-acik), transparent 68%);
}

.vitrin-ic { position: relative; }
.vitrin-ic .slogan { margin-inline: auto; }

/* ---------------------------------------------------------------
   URUN IZGARASI VE KARTLAR
   --------------------------------------------------------------- */

/*
    22rem ALT SINIR - AZ SAYIDA AMA BUYUK KART.

    Temelin 16rem'i bir satira dort-bes kart sigdirir; mucevherde
    kucuk kart, urunu gorunmez kilar. Genis kart ayni ekranda daha az
    urun gosterir ve bu BILINCLI: vitrin katalog degil, secki.
*/
.izgara { grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr)); gap: clamp(1.5rem, 3vw, 2.6rem); }

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

.urun-kart:hover { border-color: var(--ana-acik); transform: translateY(-3px); }

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

.urun-govde { text-align: center; padding: 1.4rem 1.2rem 1.6rem; }

.urun-ad { font-size: 1.12rem; letter-spacing: 0.02em; }

.urun-fiyat {
    font-family: var(--serif);
    font-size: 1.15rem;
    color: var(--ana);
}

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

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

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

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

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

.kategori-kutu:hover { border-color: var(--ana-acik); }

.kategori-kutu-ad {
    font-family: var(--serif);
    letter-spacing: 0.08em;
}

.kategori-kutu-adet { color: var(--metin-2); }

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

.zanaat-izgara {
    display: grid;
    gap: clamp(1.5rem, 3vw, 3rem);
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.zanaat-oge { text-align: center; }

.zanaat-oge svg {
    width: 2.4rem;
    height: 2.4rem;
    margin-bottom: 0.9rem;
    color: var(--ana);
}

.zanaat-baslik {
    font-family: var(--serif);
    font-size: 1.1rem;
    margin: 0 0 0.4rem;
}

.zanaat-metin { margin: 0; color: var(--metin-2); line-height: 1.7; }

/* Koleksiyon seridi: iki genis panel. */
.koleksiyon-izgara {
    display: grid;
    gap: clamp(1rem, 2vw, 2rem);
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

.koleksiyon-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 20rem;
    padding: clamp(1.5rem, 3vw, 2.6rem);
    border: 1px solid var(--cizgi);
    background: var(--zemin-2);
    overflow: hidden;
}

.koleksiyon-panel h3 {
    margin: 0 0 0.4rem;
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
}

.koleksiyon-panel p { margin: 0 0 1.2rem; color: var(--metin-2); max-width: 34ch; }

.koleksiyon-doku {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 78% 22%, color-mix(in srgb, var(--ana-acik) 45%, transparent), transparent 58%),
        radial-gradient(circle at 20% 80%, color-mix(in srgb, var(--vurgu-acik) 32%, transparent), transparent 60%);
}

/* ---------------------------------------------------------------
   ALT BILGI
   --------------------------------------------------------------- */

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

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

/*
    KOYU ALT BILGININ TUZAGI - OLCULDU.

    Zemini koyuya cevirmek yetmiyor: temel `\.alt p` icin `--metin-2`,
    `\.alt li a` icin `--metin` yaziyor ve bunlar acik zemine gore
    secilmis renkler. Koyu zeminde olculdugunde 2.67:1 ve 1.08:1
    cikiyorlar - yani alt bilgi neredeyse okunamaz haldeydi ve bu
    gozle fark edilmiyordu cunku metin "var" gorunuyor.

    Temelin secicileri (`\.alt li a`) benimkinden guclu oldugu icin
    tek tek ayni guclukte ezilmek zorunda.
*/
.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 (WCAG 2.2 2.5.8).

    Olculdu: alt menu baglantilari 81x17 piksel - genis ama ince.
    Yatay boyutun buyuk olmasi yetmez; parmak dikeyde de kayar.
*/
.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: 0;
    /* Denetim cercevesi 3:1 istiyor; `--cizgi` (1.31:1) yetmez. */
    border-color: var(--metin-2);
}

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

/* ---------------------------------------------------------------
   HAREKET
   =====================================================================
   Bu blok temelde de var ama 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;
    }

    .urun-kart:hover { transform: none; }
}