/* ===========================================================
   THE TURN ROASTERY — Tasarım Token'ları  (Faz 1 · rev 2)

   rev 2 — referans denetiminden sonra:
   · Site tek bir görsel dünyaya bağlanıyor: KOYU.
     Onyx'in gövde zemini rgb(43,41,42); bizimki markanın kendi
     laciverti. Krem artık sayfa zemini değil, koyunun içinde
     araya giren bir MALZEME (.paper). Tema çevirme yok —
     bilinçli bir bağlanma, eksiklik değil.
   · İmza display fontu eklendi: Big Shoulders Display.
     Onyx'in blackletter'ının tuttuğu yeri tutar (poster ölçeği,
     yüksek karakter) ama kurumsal geometrik logoyla çatışmaz.
   · Hareket süreleri yavaşlatıldı. Ölçüm: Onyx'te en yaygın
     geçiş 1.1s ve 1.7s (110 element). Bizim 560 ms'lik ritmimiz
     referansın sinematik temposunun yanında telaşlı kalıyordu.
   =========================================================== */

:root{
  /* ---- Ölçekler: Lacivert ---- */
  --navy-50:#F1F4F9;  --navy-100:#E3E9F1; --navy-200:#C7D2E1;
  --navy-300:#9CAEC9; --navy-400:#6C86AC; --navy-500:#43618F;
  --navy-600:#2F4A75; --navy-700:#22375A; --navy-800:#172742;
  --navy-900:#101D33; --navy-950:#0B1526; --navy-1000:#070E1A;

  /* ---- Ölçekler: Bakır ---- */
  --copper-50:#FCF7F2;  --copper-100:#F7EDE3; --copper-200:#F0DCC8;
  --copper-300:#E6C2A4; --copper-400:#D8A57C; --copper-500:#C88A57;
  --copper-600:#B67340; --copper-700:#9D5F31; --copper-800:#7A4826;
  --copper-900:#5C361C; --copper-950:#3D2412;

  /* ---- Ölçekler: Kum ---- */
  --sand-0:#FFFFFF;   --sand-50:#F7F3EC;  --sand-100:#EFE9DE;
  --sand-200:#E0D7C8; --sand-300:#C4B9AA; --sand-500:#857A6E;
  --sand-700:#4A423B; --sand-900:#2B2622;

  /* ---- Semantik: koyu dünya (varsayılan ve tek) ---- */
  --surface:var(--navy-1000);
  --surface-raised:var(--navy-900);
  --surface-sunken:#050A13;
  --text:#F3F5F9;
  --text-muted:var(--navy-300);
  --text-subtle:#6A7A96;
  --accent:var(--copper-400);        /* koyu zeminde AA: 6.9:1 */
  --accent-hover:var(--copper-300);
  --accent-contrast:var(--navy-1000);
  --border:rgba(243,245,249,.14);
  --border-strong:rgba(243,245,249,.32);
  --focus:var(--copper-300);
  --in-stock:#7FCBA4;
  --low-stock:#E0B166;
  --sold-out:#E88C8C;
  --scrim:rgba(3,7,14,.72);

  /* ---- Tipografi ----
     display : imza. Yalnızca ürün adı, bölüm başlığı, poster anı.
     body    : arayüz ve okuma. Logodaki geometrik sansın devamı.
     mono    : kahve verisi, etiket, ölçü.                      */
  --font-display:"Big Shoulders Display","Haettenschweiler","Arial Narrow",sans-serif;
  --font-body:"Figtree","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Kondens bir display çok daha büyük yaşar — ölçek buna göre */
  --fs-display-xl:clamp(4rem,12vw,10.5rem);
  --fs-display-l:clamp(3rem,7.5vw,6rem);
  --fs-display-m:clamp(2.25rem,4.5vw,3.5rem);
  --fs-h1:clamp(1.75rem,3.4vw,2.5rem);
  --fs-h2:clamp(1.375rem,2.2vw,1.625rem);
  --fs-h3:1.0625rem;
  --fs-body-l:1.125rem;
  --fs-body:1rem;
  --fs-sm:0.875rem;
  --fs-label:0.6875rem;
  --fs-data:0.8125rem;

  /* TR diakritikleri için gövde satır yüksekliği 1.6'nın altına inmez */
  /* 0.86 denendi ve Türkçe'de kırıldı: üst üste binen satırlarda
     Ö/Ü umlautu ve Ş/Ç sedillası komşu satır tarafından kırpılıyor,
     "DÖNÜŞ" ekranda "DONUS" oluyor. Kondens display için tavan 0.95. */
  --lh-tight:0.95;
  --lh-heading:1.2;
  --lh-body:1.7;

  --track-display:-0.005em;
  --track-label:0.16em;
  --track-data:0.04em;

  /* ---- Boşluk (4px tabanlı) ---- */
  --space-1:4px;   --space-2:8px;   --space-3:12px;  --space-4:16px;
  --space-5:20px;  --space-6:24px;  --space-8:32px;  --space-10:40px;
  --space-12:48px; --space-16:64px; --space-24:96px; --space-32:128px;

  /* ---- Biçim ---- */
  --radius-none:0;
  --radius-input:2px;
  --radius-pill:999px;
  --gutter:24px;
  --page-max:1600px;
  --measure:64ch;
  /* Akış rayı: içerik hiçbir kenara yaslanmasın */
  --page-pad:clamp(24px,7vw,116px);
  --buybar-h:104px;
  --ctl-h:44px;        /* tüm form kontrolleri tek yükseklikte */

  /* ---- Hareket ----
     Dokunulabilir her şey yayla (assets/spring.js).
     Süreler referans ölçümüne göre: reveal 1.2 s, sinematik 1.7 s. */
  --spring-ui-damping:1;      --spring-ui-response:.35;
  --spring-sheet-damping:.82; --spring-sheet-response:.32;
  --spring-pop-damping:.6;    --spring-pop-response:.3;
  --ease-reveal:cubic-bezier(.19,1,.22,1);
  --ease-swap:cubic-bezier(.76,0,.24,1);
  --ease-hover:cubic-bezier(.25,.46,.45,.94);
  --dur-instant:120ms;
  --dur-fast:220ms;
  --dur-base:360ms;
  --dur-slow:1200ms;
  --dur-cinematic:1700ms;
  --dur-page:800ms;
}

/* ---- Krem malzeme: koyu dünyanın içinde araya giren bölüm ---- */
.paper{
  background:var(--sand-50);
  --surface:var(--sand-50);
  --surface-raised:var(--sand-0);
  --surface-sunken:var(--sand-100);
  --text:var(--navy-900);
  --text-muted:var(--sand-700);
  --text-subtle:var(--sand-500);
  --accent:var(--copper-700);        /* krem üzerinde AA: 4.7:1 */
  --accent-hover:var(--copper-800);
  --accent-contrast:var(--sand-0);
  --border:rgba(11,21,38,.16);
  --border-strong:rgba(11,21,38,.34);
  --focus:var(--copper-600);
  --in-stock:#2F6B4F;
  --low-stock:#8A5A12;
  --sold-out:#9B2C2C;
  color:var(--text);
}

/* ---- Fotoğraf üzerindeki bölge: metin her zaman açık ---- */
.on-media{
  --text:#FFFFFF;
  --text-muted:rgba(255,255,255,.78);
  --text-subtle:rgba(255,255,255,.6);
  --accent:var(--copper-300);
  --accent-contrast:var(--navy-1000);
  --border:rgba(255,255,255,.3);
  --border-strong:rgba(255,255,255,.55);
  --focus:#FFFFFF;
  color:var(--text);
}

/* ---- Hareket azaltma ---- */
@media (prefers-reduced-motion:reduce){
  :root{
    --dur-fast:1ms; --dur-base:1ms;
    --dur-slow:1ms; --dur-cinematic:1ms; --dur-page:1ms;
  }
}

/* ---- Saydamlığı azalt ---- */
@media (prefers-reduced-transparency:reduce){
  .header{
    background:var(--surface) !important;
    backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
    border-bottom-color:var(--border) !important;
  }
  .header::after{display:none}
  .scrim{backdrop-filter:none !important}
}

/* ---- Yüksek kontrast ---- */
@media (prefers-contrast:more){
  :root{
    --border:rgba(243,245,249,.45);
    --border-strong:rgba(243,245,249,.8);
    --text-muted:#DCE3EE;
  }
  .paper{--border:rgba(11,21,38,.45);--border-strong:rgba(11,21,38,.8);--text-muted:var(--navy-900)}
  .media__shade{background:rgba(3,7,14,.72) !important}
  .header{background:var(--surface);backdrop-filter:none}
}