/* ==========================================================================
   TÜLAY TASARIM — DESIGN TOKENS
   v1.0 · Temmuz 2026
   --------------------------------------------------------------------------
   Bu dosya markanın "tek doğru kaynağı"dır. Renk, tipografi, boşluk, köşe,
   gölge ve hareket değerleri SADECE burada tanımlanır. Bileşen dosyalarında
   asla ham (hard-coded) değer kullanılmaz.

   Palet logodan türetildi: bakır tel, krem porselen, toz pembe, adaçayı
   yeşili, mat altın yaprak ve doğal taş tonları.
   ========================================================================== */

:root {
  /* ----------------------------------------------------------------------
     1. RENK — TEMEL YÜZEYLER (Porselen ailesi)
     Sitenin %80'i bu üç tondan oluşur. Ürün fotoğrafı her zaman kahramandır;
     arka plan asla onunla yarışmaz.
     ---------------------------------------------------------------------- */
  --renk-porselen:      #FDFAF6;  /* Sayfa zemini — pişmiş porselen beyazı */
  --renk-krem:          #F7F0E7;  /* Alternatif bölüm zemini */
  --renk-kum:           #EFE4D7;  /* Yumuşak dolgu, ayırıcı, kart zemini */
  --renk-ipek:          #FFFFFF;  /* Kart / modal — en üst katman */

  /* ----------------------------------------------------------------------
     2. RENK — MÜREKKEP (Metin)
     Saf siyah kullanılmaz. Sıcak kahve tonu el emeği hissini korur.
     ---------------------------------------------------------------------- */
  --renk-murekkep:      #3B2E27;  /* Başlık ve gövde metni — 11.2:1 kontrast */
  --renk-murekkep-2:    #6B584D;  /* İkincil metin — 5.9:1 */
  --renk-murekkep-3:    #8E7C70;  /* Yardımcı / meta metin — 3.8:1, sadece ≥16px */

  /* ----------------------------------------------------------------------
     3. RENK — BİRİNCİL: BAKIR GÜLÜ
     Logodaki tel rengi. Markanın imzası. Buton, link, ikon, çerçeve.
     ---------------------------------------------------------------------- */
  --renk-bakir:         #B0714F;  /* Birincil aksiyon — beyaz üstünde 4.6:1 */
  --renk-bakir-koyu:    #8E5739;  /* Hover / basılı hâl — 6.7:1 */
  --renk-bakir-orta:    #C68A66;  /* Dekoratif çizgi, ikon */
  --renk-bakir-acik:    #DEAF92;  /* İnce çerçeve, süsleme */
  --renk-bakir-sis:     #F4E4DA;  /* Etiket zemini, seçili hâl */

  /* ----------------------------------------------------------------------
     4. RENK — İKİNCİL AKSANLAR
     Ürün kategorilerini sessizce kodlar. Asla ikisi bir arada baskın olmaz.
     ---------------------------------------------------------------------- */
  --renk-pembe:         #E0AEA6;  /* Toz pembe — soğuk porselen çiçekler */
  --renk-pembe-koyu:    #B87D74;
  --renk-pembe-sis:     #F9EBE8;

  --renk-adacayi:       #8AAEA3;  /* Adaçayı yeşili — logodaki yapraklar */
  --renk-adacayi-koyu:  #558074;  /* Metin olarak kullanılabilir — 4.7:1 */
  --renk-adacayi-sis:   #E9F1EE;

  --renk-altin:         #BF9C4E;  /* Mat altın — yaprak detayları, ödül/rozet */
  --renk-altin-sis:     #F6EFDC;

  /* Doğal taş tonları — bileklik/kolye görsellerinde ve etiketlerde */
  --renk-labradorit:    #7C90A2;
  --renk-ametist:       #A991B4;
  --renk-akik:          #C08A78;
  --renk-inci:          #F0E7DD;

  /* ----------------------------------------------------------------------
     5. RENK — DURUM
     ---------------------------------------------------------------------- */
  --renk-basari:        #5F8558;
  --renk-basari-sis:    #EAF1E7;
  --renk-uyari:         #A8762A;
  --renk-uyari-sis:     #F8EFDC;
  --renk-hata:          #A64B45;
  --renk-hata-sis:      #F8E9E7;

  /* Çizgi / kenarlık */
  --renk-cizgi:         #E7DACB;
  --renk-cizgi-koyu:    #D6C4B0;
  --renk-cizgi-bakir:   rgba(176, 113, 79, .28);

  /* ----------------------------------------------------------------------
     6. TİPOGRAFİ
     İki aile: zarif serif (ses) + sakin sans (bilgi).
     Türkçe diyakritikler (ğ ş ı İ ç ö ü) için latin-ext desteği zorunlu.
     ---------------------------------------------------------------------- */
  --font-baslik: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-govde:  "DM Sans", "Helvetica Neue", Arial, sans-serif;

  /* Akışkan ölçek — 1.25 oranı, clamp ile mobil→masaüstü */
  --fs-devasa:   clamp(2.5rem, 6.4vw, 4.25rem);  /* sadece hero */
  --fs-1:        clamp(2.1rem, 4.6vw, 3.4rem);   /* h1 */
  --fs-2:        clamp(1.7rem, 3.2vw, 2.5rem);   /* h2 — bölüm başlığı */
  --fs-3:        clamp(1.32rem, 2.1vw, 1.65rem); /* h3 — kart başlığı */
  --fs-4:        1.125rem;                        /* h4 */
  --fs-buyuk:    1.0625rem;                       /* giriş paragrafı */
  --fs-govde:    1rem;
  --fs-kucuk:    0.9375rem;
  --fs-mini:     0.8125rem;
  --fs-kas:      0.75rem;                         /* eyebrow / etiket */

  --lh-siki:     1.08;   /* devasa başlıklar */
  --lh-baslik:   1.18;
  --lh-orta:     1.45;
  --lh-govde:    1.68;
  --lh-genis:    1.8;    /* uzun okuma metni */

  --ls-devasa:  -0.022em;
  --ls-baslik:  -0.012em;
  --ls-govde:    0;
  --ls-kas:      0.18em;  /* uppercase eyebrow */
  --ls-marka:    0.14em;  /* wordmark */

  --fw-hafif:    300;
  --fw-normal:   400;
  --fw-orta:     500;
  --fw-kalin:    600;
  --fw-siyah:    700;

  /* ----------------------------------------------------------------------
     7. BOŞLUK — 4px tabanlı ölçek
     ---------------------------------------------------------------------- */
  --bo-1:  0.25rem;   /*  4 */
  --bo-2:  0.5rem;    /*  8 */
  --bo-3:  0.75rem;   /* 12 */
  --bo-4:  1rem;      /* 16 */
  --bo-5:  1.5rem;    /* 24 */
  --bo-6:  2rem;      /* 32 */
  --bo-7:  3rem;      /* 48 */
  --bo-8:  4rem;      /* 64 */
  --bo-9:  6rem;      /* 96 */
  --bo-10: 8rem;      /* 128 */

  /* Bölüm dikey nefesi — akışkan */
  --bolum-y: clamp(3.5rem, 8vw, 7rem);
  --bolum-y-genis: clamp(5rem, 11vw, 9rem);

  /* ----------------------------------------------------------------------
     8. YERLEŞİM
     ---------------------------------------------------------------------- */
  --en-max:     1220px;  /* ana konteyner */
  --en-dar:     880px;   /* odaklı içerik */
  --en-metin:   64ch;    /* okuma satır uzunluğu */
  --oluk:       clamp(1.25rem, 4vw, 2.5rem); /* sayfa kenar boşluğu */
  --ust-bar:    72px;    /* sabit header yüksekliği */

  /* ----------------------------------------------------------------------
     9. KÖŞE YARIÇAPI
     Marka dili organik: takı ve seramik köşesi olmaz. Kemer (arch) formu
     el emeği/atölye çağrışımı yapar ve görsel imzadır.
     ---------------------------------------------------------------------- */
  --kose-xs:   4px;
  --kose-sm:   10px;
  --kose-md:   16px;
  --kose-lg:   24px;
  --kose-xl:   32px;
  --kose-hap:  999px;
  --kose-kemer: 999px 999px var(--kose-md) var(--kose-md); /* İMZA FORM */
  --kose-damla: 60% 60% 60% 60% / 70% 70% 50% 50%;         /* taş/damla */

  /* ----------------------------------------------------------------------
     10. GÖLGE — sıcak tonlu, çok yumuşak. Asla nötr gri gölge.
     ---------------------------------------------------------------------- */
  --golge-1: 0 1px 2px rgba(59,46,39,.045), 0 2px 8px rgba(59,46,39,.035);
  --golge-2: 0 2px 6px rgba(59,46,39,.05), 0 10px 28px rgba(59,46,39,.055);
  --golge-3: 0 6px 14px rgba(59,46,39,.06), 0 22px 56px rgba(59,46,39,.09);
  --golge-ic: inset 0 1px 0 rgba(255,255,255,.7);
  --golge-odak: 0 0 0 3px var(--renk-bakir-sis), 0 0 0 4.5px var(--renk-bakir);

  /* ----------------------------------------------------------------------
     11. HAREKET — yavaş, yumuşak, el işi gibi telaşsız
     ---------------------------------------------------------------------- */
  --sure-hizli: 160ms;
  --sure:       280ms;
  --sure-yavas: 560ms;
  --sure-iskelet: 1600ms;  /* iskelet kartların parlama döngüsü */
  --egri:       cubic-bezier(.22, .61, .36, 1);
  --egri-yumusak: cubic-bezier(.4, 0, .2, 1);

  /* ----------------------------------------------------------------------
     12. KATMAN (z-index)
     ---------------------------------------------------------------------- */
  --z-zemin: 0;
  --z-yukselti: 10;
  --z-sabit: 100;
  --z-menu: 200;
  --z-katman: 300;
  --z-ipucu: 400;
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
  :root { --sure-hizli: 1ms; --sure: 1ms; --sure-yavas: 1ms; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}