/* ═══════════════════════════════════════════════════════════════════════
   CELIK — variables.css · REDESIGN v2 (AÇIK TEMA)
   Tüm design tokenlar. Renkler spec §0 — başka renk YOK; türev tonlar
   yalnız bu renklerin opaklıklarıyla üretilir (R0).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* ── Palet (spec §0 — KESIN) ─────────────────────────────────────── */
  --color-graphite:  #1B1F24;   /* grafit — başlık/gövde metni, koyu bloklar */
  --color-black:     #0D1014;   /* derin siyah — degrade/gölge tabanı        */
  --color-gold:      #C89F2D;   /* altın — vurgu, CTA                        */
  --color-gold-soft: #E1C36A;   /* yumuşak altın — hover, foto üstü vurgu    */
  --color-white:     #FFFFFF;
  --color-gray:      #AAB2BD;   /* açık gri — koyu zeminde ikincil metin     */

  /* ── Zeminler (R0) ───────────────────────────────────────────────── */
  --color-bg:      #FFFFFF;                 /* body                          */
  --color-bg-alt:  #F4F5F6;                 /* alternatif bölüm (grafit %4)  */

  /* ── Metin (açık zemin — AA) ─────────────────────────────────────── */
  --color-text:        #1B1F24;             /* gövde metni — grafit          */
  --color-text-muted:  rgba(27, 31, 36, 0.66);  /* ikincil metin             */
  --color-text-faint:  rgba(27, 31, 36, 0.46);  /* alt metin, breadcrumb     */

  /* ── Çizgiler (açık zemin) ───────────────────────────────────────── */
  --color-line:        rgba(27, 31, 36, 0.12);  /* ince 1px çerçeve          */
  --color-line-soft:   rgba(27, 31, 36, 0.07);  /* daha silik çizgi          */
  --color-line-strong: rgba(27, 31, 36, 0.26);  /* hover çerçeve             */

  /* ── Altın türevleri ─────────────────────────────────────────────── */
  --color-gold-tint:   rgba(200, 159, 45, 0.10);  /* altın yıkama zemin      */
  --color-gold-line:   rgba(200, 159, 45, 0.55);  /* altın çerçeve           */

  /* ── Yüzeyler ────────────────────────────────────────────────────── */
  --color-surface:     rgba(27, 31, 36, 0.04);    /* hafif kutu zemini       */
  --color-overlay:     rgba(13, 16, 20, 0.94);    /* lightbox                */

  /* ── Ters bağlam (koyu bloklar: footer, CTA, foto üstü) ──────────── */
  --color-inv-text:      rgba(255, 255, 255, 0.92);
  --color-inv-muted:     #AAB2BD;
  --color-inv-faint:     rgba(170, 178, 189, 0.72);
  --color-inv-line:      rgba(255, 255, 255, 0.14);
  --color-inv-line-soft: rgba(255, 255, 255, 0.08);

  /* ── Foto üstü ince okunabilirlik degradesi (R1 — tek izinli scrim) ─ */
  --veil-top:    linear-gradient(180deg, rgba(13, 16, 20, 0.55), transparent 30%);
  --veil-bottom: linear-gradient(0deg,  rgba(13, 16, 20, 0.5),  transparent 28%);

  /* ── Tipografi (R4 — büyütülmüş ölçek) ───────────────────────────── */
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-extrabold: 800;

  --text-xs:   0.75rem;      /* 12 — etiket, eyebrow, badge                 */
  --text-sm:   0.875rem;     /* 14 — meta, küçük gövde                      */
  --text-base: 1.0625rem;    /* 17 — gövde (R4)                             */
  --text-md:   1.1875rem;    /* 19 — lead, kart başlığı                     */
  --text-lg:   clamp(1.1875rem, 1.1rem + 0.5vw, 1.375rem);  /* büyük lead   */

  --text-h3:      1.25rem;                                       /* 20      */
  --text-h2:      clamp(2rem, 1.45rem + 2.4vw, 3.25rem);         /* 32–52   */
  --text-h1:      clamp(2.75rem, 1.95rem + 3.5vw, 4.75rem);      /* 44–76   */
  --text-display: clamp(2.75rem, 1.95rem + 3.5vw, 4.75rem);      /* 44–76   */
  --text-stat:    clamp(4rem, 3.3rem + 2.4vw, 5rem);             /* 64–80   */

  --leading-tight:  1.04;
  --leading-snug:   1.22;
  --leading-normal: 1.7;

  --tracking-tight: -0.02em;
  --tracking-wide:  0.08em;
  --tracking-caps:  0.18em;   /* etiketler 12px uppercase 0.18em (R4)       */

  /* ── Aralık skalası (spec §2: 4/8/12/16/24/32/48/64/96/128) ──────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ── Konteyner ───────────────────────────────────────────────────── */
  --container-max: 1200px;
  --container-pad: 24px;

  /* ── Şekil ───────────────────────────────────────────────────────── */
  --radius:      8px;      /* kart                                          */
  --radius-lg:   10px;     /* büyük foto kartlar (project-row, detay hero)  */
  --radius-sm:   4px;      /* buton, input                                  */
  --radius-pill: 999px;    /* badge                                         */

  /* ── Geçişler (R5 — yalnız izinli animasyonlar) ──────────────────── */
  --ease:            cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition-fast: 0.18s var(--ease);
  --transition:      0.3s var(--ease);
  --transition-slow: 0.5s var(--ease);   /* kart görsel scale + reveal      */
  --transition-fade: 0.6s ease;          /* hero slider fade                */

  /* ── Katmanlar ───────────────────────────────────────────────────── */
  --z-header:   50;
  --z-drawer:   80;
  --z-lightbox: 100;

  /* ── Gölge (açık temada çok hafif) ───────────────────────────────── */
  --shadow-card:   0 16px 40px rgba(13, 16, 20, 0.10);
  --shadow-header: 0 6px 24px rgba(13, 16, 20, 0.06);

  /* ── Ölçüler ─────────────────────────────────────────────────────── */
  --header-h: 78px;
}