/* ============================================================
   YDS Publishing — Design Tokens
   Kaynak: kilitlenen landing (yds-stack.html), 2026-06-29
   Ürün/set sayfaları + yönetim paneli bunu import etmeli.
   Felsefe: dark-first eşit-light · OKLCH semantic · fluid clamp() · per-section --act kimliği
   ============================================================ */

:root {
  color-scheme: light;

  /* — Yüzey & metin (semantic, theme'e göre değişir) — */
  --bg:         oklch(99% 0.0025 95);
  --surface:    oklch(100% 0 0);
  --fg:         oklch(18% 0.013 72);
  --fg-soft:    oklch(29% 0.016 72);
  --muted:      oklch(49% 0.016 68);
  --border:     oklch(91% 0.005 90);
  --ink-strong: #0E0B07;

  /* — Marka (theme-invariant) — */
  --blue:       #2348FF;   /* birincil aksiyon */
  --blue-deep:  #1A35C9;
  --yellow:     #FFD200;   /* vurgu / öne çıkan */
  --black:      #0E0B07;
  --on-accent:  #ffffff;
  --green:      #1D7A4F;   /* readers / yeşil aksan */
  --wa:         #25D366;   /* WhatsApp */

  /* — Section kimlik rengi (set'e göre JS ile değişir; default mavi) — */
  --act:        #2348FF;

  /* — Elevation — */
  --shadow:      0 6px 24px rgba(20,14,8,.08), 0 2px 8px rgba(20,14,8,.05);
  --shadow-book: 0 1.5px 2px rgba(20,14,8,.12), 0 12px 26px rgba(20,14,8,.16), 0 30px 60px rgba(20,14,8,.2);

  /* — Tipografi — */
  --font-display: 'Bricolage Grotesque', -apple-system, system-ui, sans-serif;  /* başlık */
  --font-body:    'Inter Tight', -apple-system, system-ui, sans-serif;          /* gövde */
  --font-script:  'Caveat', 'Bradley Hand', cursive;                            /* el-yazısı vurgu (slogan) */
  /* kısa alias'lar (ürün/set sayfaları --fd/--fb/--fs kullanıyor) */
  --fd: var(--font-display);  --fb: var(--font-body);  --fs: var(--font-script);

  /* — Fluid tip ölçeği (clamp: min, tercih, max) — */
  --t-eyebrow:  clamp(11px, 1.4vw, 14px);
  --t-body:     clamp(14px, 1.6vw, 17px);
  --t-h3:       clamp(17px, 2vw, 22px);
  --t-h2:       clamp(30px, 5vw, 56px);
  --t-display:  clamp(64px, 12vw, 140px);   /* hero / watermark seviyesi */

  /* — Radius — */
  --r-xs:   3px;    /* kitap kapağı */
  --r-sm:   4px;
  --r-md:   9px;    /* kart / tooltip */
  --r-lg:   14px;
  --r-pill: 999px;  /* buton / çip */

  /* — Motion — */
  --ease:        cubic-bezier(.4, 0, .2, 1);     /* standart */
  --ease-out:    cubic-bezier(.2, .7, .3, 1);    /* yumuşak çıkış (hover/lift) */
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);/* zıplama (bounce-in) */
  --dur-1: .18s;  --dur-2: .26s;  --dur-3: .55s;  --dur-slow: .85s;

  /* — Layout — */
  --header-h: 64px;
  --maxw:     1200px;
  --pad-x:    clamp(18px, 5vw, 72px);

  /* — Atmosfer (landing dekoru; opsiyonel) — */
  --header-bg:        rgba(255,254,252,.82);
  --scrim:            255 254 252;
  --grain-dot:        oklch(30% 0.016 72 / 0.04);
  --page-edge:        #f1ece2;
  --const-ink:        oklch(42% 0.015 75 / 0.5);
  --const-amber:      oklch(76% 0.16 88 / 0.78);
  --const-blue:       oklch(56% 0.18 265 / 0.72);
  --const-edge-ink:   oklch(42% 0.015 75 / 0.18);
  --const-edge-amber: oklch(70% 0.14 88 / 0.3);
  --blob-blend:       normal;
  --blob-blue:        oklch(52% 0.24 262 / 0.58);
  --blob-yellow:      oklch(87% 0.17 92 / 0.52);
  --blob-indigo:      oklch(45% 0.21 261 / 0.5);
  --blob-amber:       oklch(81% 0.15 76 / 0.38);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:         oklch(18% 0.006 80);
  --surface:    oklch(22% 0.008 80);
  --fg:         oklch(94% 0.005 88);
  --fg-soft:    oklch(80% 0.008 86);
  --muted:      oklch(62% 0.011 82);
  --border:     oklch(32% 0.008 80);
  --ink-strong: oklch(96% 0.01 88);
  --shadow:      0 6px 24px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.35);
  --shadow-book: 0 1.5px 2px rgba(0,0,0,.5), 0 12px 28px rgba(0,0,0,.5), 0 32px 64px rgba(0,0,0,.55);
  --header-bg:        rgba(24,22,19,.72);
  --scrim:            24 22 19;
  --grain-dot:        oklch(92% 0.01 88 / 0.05);
  --page-edge:        oklch(30% 0.01 80);
  --const-ink:        oklch(72% 0.015 85 / 0.45);
  --const-amber:      oklch(82% 0.15 88 / 0.85);
  --const-blue:       oklch(72% 0.16 265 / 0.8);
  --const-edge-ink:   oklch(70% 0.015 85 / 0.16);
  --const-edge-amber: oklch(80% 0.14 88 / 0.3);
  --blob-blend:       screen;
  --blob-blue:        oklch(60% 0.25 262 / 0.55);
  --blob-yellow:      oklch(82% 0.17 92 / 0.34);
  --blob-indigo:      oklch(54% 0.23 261 / 0.5);
  --blob-amber:       oklch(78% 0.15 76 / 0.3);
}

/* --act'in set geçişlerinde yumuşak renk geçişi yapabilmesi için */
@property --act { syntax: '<color>'; inherits: true; initial-value: #2348FF; }

/* ============================================================
   Base reset + tipografi
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}
a { color: inherit; }

/* ============================================================
   Primitive komponentler (ürün/set/panel ortak)
   ============================================================ */

/* Birincil aksiyon — marka mavi, pill */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  background: var(--blue); color: var(--on-accent);
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  cursor: pointer; text-decoration: none;
  transition: filter var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }

/* Aksiyon — section rengiyle (--act) */
.btn-act { background: var(--act); color: var(--on-accent); }

/* İkincil — kenarlıklı pill */
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface); color: var(--fg);
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  cursor: pointer; text-decoration: none;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.btn-ghost:hover { color: var(--blue); border-color: var(--blue); }

/* Çip / etiket */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface);
  font-size: 12.5px; font-weight: 600; color: var(--muted);
}

/* Eyebrow (başlık üstü küçük etiket) */
.eyebrow {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-eyebrow); letter-spacing: .16em; text-transform: uppercase;
  color: var(--blue);
}

/* Kart */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow);
}

/* Erişilebilirlik */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }