/* ============================================================================
   tokens-v7.css : BarsChair v7 "Açık Atölye" tasarım sözleşmesi.
   YALNIZ custom property. Kaynak: docs/design-system-v7.md
   v6 token adlarıyla (--bg, --ink, --space-*, --radius-*, --fs-*, --ease-*)
   ÇAKIŞMAZ; v7 önekleri: --c --f --t --lh --tr --sp --r --sh --ez --du --z.
   Saf #FFFFFF / #000000 yok. Tek tema (açık), tek aksan (Apricot).
   ========================================================================= */

:root{
  color-scheme: light;

  /* ───────────── RENK · marka çekirdeği (kullanıcı kararı, değişmez) ───────────── */
  --c-ivory:        #F5E6C5; /* bant / ikincil zemin; metin ZEMİNİ olabilir, metin rengi olamaz */
  --c-apricot:      #D78B30; /* TEK aksan: dolgu, ikon, çizgi. Açık zeminde METİN YASAK (2.66:1) */
  --c-natural:      #9F886F; /* form kenarlığı, ikincil ikon, büyük metin (>=24px). 3.26:1 */
  --c-organic:      #3F422E; /* ana mürekkep + tek koyu bant (footer) + birincil düğme */

  /* ───────────── RENK · yüzey merdiveni (açıktan koyuya) ───────────── */
  --c-paper:        #FCFBF8; /* sayfa zemini (off-white) */
  --c-raised:       #FEFDFB; /* form alanı, açılır menü, mobil menü yaprağı */
  --c-stage:        #FAF4E6; /* ürün sahnesi (paper + %35 ivory) */
  --c-ivory-soft:   #F8EED9; /* ara bant, katalog ara-şeridi (paper + %60 ivory) */
  /* --c-ivory (#F5E6C5) = en yoğun açık yüzey: arama bloğu, CTA bandı */

  /* ───────────── RENK · mürekkep ───────────── */
  --c-ink:          #303221; /* başlıklar (organic koyulaştırılmış) 12.65:1 paper */
  --c-text:         #3F422E; /* gövde metni = organic. 10.00:1 paper */
  --c-text-2:       #6E5D4A; /* ikincil metin (natural koyulaştırılmış) 6.10:1 paper, 5.11:1 ivory */

  /* ───────────── RENK · çizgi ───────────── */
  --c-hair:         #E8E2DA; /* dekoratif ayraç (kontrast muaf) */
  --c-hair-strong:  #D2C7BA; /* grup ayracı, sahne alt çizgisi */
  --c-field-line:   var(--c-natural); /* form/chip sınırı: 3.26:1 paper, 3.32:1 raised (UI >=3:1) */

  /* ───────────── RENK · etkileşim durumları ───────────── */
  --c-action:       var(--c-organic); /* birincil düğme dolgusu */
  --c-action-hover: #343725;          /* paper metin 11.80:1 */
  --c-on-action:    var(--c-paper);   /* 10.00:1 */
  --c-focus:        var(--c-organic); /* odak halkası: 9.43:1 stage, 10.00:1 paper */
  --c-selected:     var(--c-organic); /* seçili chip/kartela çerçevesi */
  --c-accent-line:  var(--c-apricot); /* aktif nav alt çizgisi, ölçü çizgisi, ray ilerleme çizgisi */

  /* ───────────── RENK · koyu bağlam (YALNIZ footer bandı) ───────────── */
  --c-dark:         var(--c-organic);
  --c-on-dark:      var(--c-paper);   /* 10.00:1 */
  --c-on-dark-2:    #C6BEA3;          /* ikincil metin 5.56:1 */
  --c-on-dark-hair: rgba(252,251,248,.14);
  --c-on-dark-accent: var(--c-apricot); /* ikon / büyük vurgu 3.76:1 (UI + büyük metin) */

  /* ───────────── RENK · anlamsal ───────────── */
  --c-success:      #4F6B3A; /* 5.80:1 paper */
  --c-error:        #A3412B; /* 6.06:1 paper */

  /* ───────────── TİPOGRAFİ · aileler (self-host, bkz. fonts-v7.css) ───────────── */
  --f-display: "Cabinet Grotesk", "Switzer", system-ui, "Segoe UI", sans-serif;
  --f-body:    "Switzer", system-ui, "Segoe UI", sans-serif;

  /* ───────────── TİPOGRAFİ · ölçek (akışkan; clamp boşlukları ZORUNLU) ───────────── */
  --t-display-xl: clamp(2.75rem, 1.6rem + 4.2vw, 5rem);      /* 44 → 80  hero H1 */
  --t-display-l:  clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);     /* 36 → 56  sayfa başlığı, ürün adı */
  --t-heading-l:  clamp(1.75rem, 1.45rem + 1.2vw, 2.375rem);  /* 28 → 38  bölüm başlığı */
  --t-heading-m:  clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem); /* 22 → 26  alt başlık, ölçü rakamı */
  --t-heading-s:  1.25rem;     /* 20  kart başlığı (Cabinet 500) */
  --t-index:      clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);    /* 28 → 44  sektör dizini satırı */
  --t-lead:       clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);/* 18 → 21 */
  --t-body:       1.0625rem;   /* 17 */
  --t-body-s:     0.9375rem;   /* 15 */
  --t-label:      0.8125rem;   /* 13  chip, form etiketi, eyebrow */
  --t-caption:    0.8125rem;   /* 13  görsel altı, künye */

  --lh-tight:  1.04;  /* display */
  --lh-snug:   1.15;  /* heading */
  --lh-copy:   1.6;   /* body */
  --lh-ui:     1.3;   /* label, chip, button */

  --tr-display: -0.03em;
  --tr-heading: -0.018em;
  --tr-body:    0;
  --tr-label:   0.01em;
  --tr-eyebrow: 0.08em; /* yalnız izinli tek eyebrow, uppercase */

  --w-display: 500;  /* Cabinet Medium */
  --w-strong:  700;  /* Cabinet Bold: yalnız ürün adı (detay) ve footer telefon */
  --w-body:    400;  /* Switzer */
  --w-ui:      500;  /* Switzer: düğme, chip, label */
  --w-emph:    600;  /* Switzer: inline vurgu */

  --measure:      64ch; /* gövde satır uzunluğu */
  --measure-head: 18ch; /* display başlık satır sınırı */

  /* ───────────── BOŞLUK · 8pt (4 = yarım adım) ───────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  16px;
  --sp-4:  24px;
  --sp-5:  32px;
  --sp-6:  48px;
  --sp-7:  64px;
  --sp-8:  96px;
  --sp-9:  128px;
  --sp-10: 160px;
  --sp-section: clamp(64px, 40px + 7vw, 128px); /* bölüm dikey boşluğu (DENSITY 3) */
  --sp-section-tight: clamp(48px, 32px + 4vw, 96px);

  /* ───────────── IZGARA / KAP ───────────── */
  --wrap-max:    1320px;
  --wrap-gutter: clamp(16px, 4vw, 48px); /* mobil 16px yan boşluk */
  --grid-cols:   12;
  --grid-gap:    clamp(16px, 2vw, 24px);
  --hdr-h:       72px;  /* mobilde 60px: @media (max-width:767px) içinde --hdr-h: 60px */
  --hdr-h-mobile: 60px;
  --callbar-h:   64px;  /* ürün sayfası mobil arama çubuğu */

  /* ───────────── RADIUS · şekil kilidi (v7.2) ─────────────
     İki değer, karışmaz:
     --r      yumuşak radius: kart, medya (fotoğraf/video), input, panel, liste satırı.
     --r-pill tam pill: etkileşimli öğe (düğme, chip, tema anahtarı, ikon düğme, telefon karosu,
              kartela seçeneği, cam çip). Daire = pill'in kare kutudaki hali. */
  --r:      12px;
  --r-pill: 999px;
  --r-none: 0;    /* tam-genişlik bantlar, footer */
  /* iç içe öğe: calc(var(--r) - padding); kart içi düğme pill kalır */

  /* ───────────── DÜĞME (v7.2) ───────────── */
  --btn-h:        52px;  /* düğme yüksekliği (44px hedefin üstü) */
  --btn-orb:      40px;  /* "button-in-button" ikon dairesi */
  --btn-orb-bg:   rgb(252 251 248 / .14);  /* birincil üstünde daire (açık tema: organic dolgu) */
  --btn-orb-bg-2: rgb(63 66 46 / .08);     /* ikincil üstünde daire */
  --btn-shine:    rgb(255 255 255 / .20);  /* hover ışık süpürmesi (birincil) */
  --btn-spot:     rgb(245 230 197 / .24);  /* pointer spotu (birincil, Ivory sıcaklığı) */
  --btn-spot-2:   rgb(63 66 46 / .07);     /* pointer spotu (ikincil) */
  --btn-shine-2:  rgb(63 66 46 / .06);

  /* ───────────── CAM · Liquid Glass (v7.2) ─────────────
     Cam yalnız ARKASINDA gerçek içerik varken: kaydırılmış header, yapışkan filtre şeridi,
     ürün mobil çağrı çubuğu (altından sayfa akar), video üstü hero düğmesi, fotoğraf üstü çip.
     390px'te aynı anda en fazla 3 yüzey (header dahil). Mobil blur <= 12px. */
  --glass-blur:  18px;
  --glass-sat:   1.5;
  --glass-bar:        rgb(252 251 248 / .74);  /* header/filtre/çağrı çubuğu dolgusu */
  --glass-bar-solid:  var(--c-paper);          /* fallback: blur yok, şeffaflık azaltıldı */
  --glass-hair:  linear-gradient(90deg, rgb(63 66 46 / 0), rgb(63 66 46 / .20) 16%, rgb(63 66 46 / .20) 84%, rgb(63 66 46 / 0)); /* gradient hairline (düz border değil) */
  --glass-spec:  inset 0 1px 0 rgb(255 255 255 / .6);
  /* görüntü ÜSTÜ cam: iki temada aynı (zemin her zaman video/fotoğraf) */
  --glass-media-fill:   rgb(245 230 197 / .14);   /* hero düğmesi; koyu scrim'li video üstünde */
  --glass-media-hover:  rgb(245 230 197 / .22);
  --glass-media-solid:  #2A2C20;                  /* fallback: Ivory metin 11.0:1 */
  --glass-media-edge:   linear-gradient(160deg, rgb(245 230 197 / .62), rgb(245 230 197 / .08) 42%, rgb(245 230 197 / .28));
  --glass-media-spec:   inset 0 1px 0 rgb(245 230 197 / .22);
  --glass-chip-fill:    rgb(252 251 248 / .66);   /* kart çipi; açık stüdyo fotoğrafı üstünde */
  --glass-chip-solid:   #F3F1EC;
  --glass-chip-ink:     #303221;                  /* çip metni: en kötü durumda (altında siyah piksel) 5.4:1 */
  --glass-shadow:       0 1px 2px rgb(27 29 20 / .10), 0 14px 32px -14px rgb(27 29 20 / .38);

  /* ───────────── KART ışığı (v7.2) ───────────── */
  --card-spot:  rgb(255 255 255 / .9);  /* pointer'ı izleyen kenar ışığı (fotoğraf kenarında) */
  --sh-lift:    0 24px 40px -24px rgb(48 50 33 / .42), 0 6px 14px -8px rgb(48 50 33 / .16); /* yalnız hover kalkışında, opacity ile */

  /* ───────────── GÖLGE / DERİNLİK ───────────── */
  /* Arayüzde gölge yok. Tek "gölge" ürünün zemine temas gölgesidir. */
  --sh-contact: radial-gradient(50% 50% at 50% 50%, rgba(63,66,46,.22) 0%, rgba(63,66,46,.10) 45%, rgba(63,66,46,0) 100%);
  --sh-contact-w: 62%;  /* sahne genişliğine oran */
  --sh-contact-h: 5%;   /* sahne yüksekliğine oran */
  --sh-float: 0 1px 2px rgba(63,66,46,.06), 0 12px 32px -14px rgba(63,66,46,.22); /* yalnız yüzen katman: mobil menü, açılır liste, mobil arama çubuğu */
  --hairline:        1px solid var(--c-hair);
  --hairline-strong: 1px solid var(--c-hair-strong);
  --ring-focus: 0 0 0 2px var(--c-paper), 0 0 0 4px var(--c-focus); /* 2px boşluk + 2px organic */

  /* ───────────── SAHNE (ürün kartı 4:5) ───────────── */
  --stage-ratio:     4 / 5;
  --stage-pad-x:     8%;   /* ürün yan boşluğu */
  --stage-pad-top:   10%;
  --stage-floor:     88%;  /* ürün tabanının oturduğu yükseklik (üstten) */
  --stage-lift:      -6px; /* hover'da ürün kalkışı */

  /* ───────────── HAREKET · eğriler ───────────── */
  --ez-out:    cubic-bezier(0.22, 1, 0.36, 1);   /* giriş, hover, reveal  (GSAP: power3.out) */
  --ez-inout:  cubic-bezier(0.65, 0, 0.35, 1);   /* durum değişimi, Flip, crossfade (GSAP: power2.inOut) */
  --ez-in:     cubic-bezier(0.4, 0, 1, 1);       /* çıkış (girişten %30 kısa) */
  --ez-draw:   cubic-bezier(0.33, 0, 0.15, 1);   /* ölçü çizgisi stroke çizimi */

  /* ───────────── HAREKET · süreler ───────────── */
  --du-micro:  160ms; /* renk, kenarlık, chip seçimi */
  --du-hover:  240ms; /* kart kalkışı, ok kayması */
  --du-state:  420ms; /* filtre Flip, galeri crossfade, menü */
  --du-draw:   600ms; /* ölçü çizgisi */
  --du-reveal: 640ms; /* bölüm girişi */
  --du-hero:   900ms; /* yalnız ilk yüklemede hero */
  --du-theme:  300ms; /* tema anahtarı ikon dönüşü */
  --du-roll:   420ms; /* düğme etiket "roll" ve ikon dairesi kayması */
  --du-shine:  760ms; /* düğme ışık süpürmesi */
  --stagger:   70ms;
  --reveal-y:  16px;
  --rise-y:    110%;  /* başlık kelime maskesi yükselişi */

  /* ───────────── KATMAN ───────────── */
  --z-base:    0;
  --z-callbar: 40;
  --z-header:  50;
  --z-menu:    60;
  --z-toast:   70;

  /* ───────────── İKON (Phosphor Regular, self-host SVG) ───────────── */
  --icon-s: 16px;
  --icon-m: 20px;  /* varsayılan UI */
  --icon-l: 24px;  /* kanal ikonları, footer */
}

/* Mobil başlık yüksekliği (yalnız property; kural dosyası değil) */
@media (max-width: 767px){
  :root{ --hdr-h: var(--hdr-h-mobile); --glass-blur: 12px; }  /* mobil blur <= 12px */
}

/* Azaltılmış hareket: süreleri sıfırla; bileşenler bu token'ları okur */
@media (prefers-reduced-motion: reduce){
  :root{
    --du-hover: 0ms; --du-state: 0ms; --du-draw: 0ms; --du-reveal: 0ms; --du-hero: 0ms;
    --du-theme: 0ms; --du-roll: 0ms; --du-shine: 0ms;
    --stagger: 0ms; --reveal-y: 0px; --stage-lift: 0px; --rise-y: 0%;
  }
}