/* ============================================================
 *  variables.css — Merkezi CSS değişkenleri (Design Tokens)
 * ============================================================
 *  Sitedeki tüm tekrar eden değerler bu dosyadadır.
 *  Renk, tipografi, spacing, efekt değişikliği için
 *  sadece bu dosya düzenlenir.
 * ============================================================ */

:root {

  /* ---- Renkler ---- */
  --color-void: #000;                /* Siyah arka plan */
  --color-border: #1E1E28;           /* Border ve ayırıcı çizgiler */
  --color-text-muted: #777;          /* En soluk metin (footer, toggle) */
  --color-text-secondary: #888;      /* İkincil metin (nav linkleri, etiketler) */
  --color-text-primary: #999;        /* Ana gövde metni */
  --color-text-light: #BBB;          /* Açık metin (başlıklar, e-posta) */
  --color-white: #fff;               /* Beyaz — başlıklar ve vurgular */
  --color-orange: #F57C20;           /* Marka vurgu rengi (turuncu — SVG logolarla aynı) */
  --color-orange-dim: #F57C2012;     /* Turuncu glow efekti (düşük opaklık) */

  /* ---- Renkler — RGB versiyonları (rgba kullanımı için) ---- */
  --color-void-rgb: 0, 0, 0;              /* rgba(var(--color-void-rgb), 0.75) şeklinde */
  --color-orange-rgb: 245, 124, 32;       /* rgba(var(--color-orange-rgb), 0.2) şeklinde */
  --color-surface-rgb: 6, 6, 8;           /* Mobil menü ve banner arka planı */

  /* ---- Tipografi — sabit boyutlar ---- */
  --text-2xs: 10px;                  /* work-meta */
  --text-xs: 11px;                   /* footer-link */
  --text-sm: 12px;                   /* nav-links, store-link, cta-card-label, consent-text, consent-btn */
  --text-base: 13px;                 /* mobile-menu, work-detail, consent-title */
  --text-md: 14px;                   /* about-text, cta-sub, legal-box, cta-card-email */
  --text-lg: 16px;                   /* work-toggle, legal-box h2 */

  /* ---- Tipografi — responsive (clamp) ---- */
  --text-hero-title: clamp(28px, 5vw, 52px);     /* Hero ana başlık */
  --text-hero-sub: clamp(11px, 1.4vw, 14px);     /* Hero alt yazı */
  --text-section-title: clamp(32px, 5vw, 48px);  /* Hikayemiz başlığı */
  --text-work-title: clamp(28px, 4vw, 48px);     /* Proje kartı başlığı */
  --text-cta-title: clamp(26px, 4vw, 42px);      /* İletişim başlığı */
  --text-manifesto: clamp(11px, 1.2vw, 14px);    /* Manifesto tek satır */
  --text-legal-title: clamp(22px, 3vw, 32px);    /* KVKK sayfa başlığı */

  /* ---- Spacing — temel skala ---- */
  --space-xs: 8px;                   /* Küçük boşluklar (margin-bottom, padding) */
  --space-sm: 10px;                  /* Buton iç boşluk, menü satır padding */
  --space-md: 16px;                  /* Paragraf arası, banner metin altı, hamburger çizgi genişliği */
  --space-lg: 20px;                  /* Mobil padding, gap, banner boşluk */
  --space-xl: 24px;                  /* Banner padding, store margin, section arası */
  --space-2xl: 32px;                 /* Tablet padding, büyük margin */
  --space-3xl: 40px;                 /* Footer padding, başlık altı, logo mobil boyutu */
  --space-4xl: 48px;                 /* Sayfa yatay padding (masaüstü) */
  --space-5xl: 80px;                 /* Mobil dikey section padding */
  --space-6xl: 120px;               /* Masaüstü dikey section padding */
  --space-7xl: 160px;               /* CTA ve legal-content dikey padding */

  /* ---- Spacing — ek değerler (hardcode'dan tokenize edilen) ---- */
  --space-1: 1px;                    /* Hero-line genişliği, sr-only boyutu */
  --space-3: 3px;                    /* Section-dot boyutu, outline-offset */
  --space-4: 4px;                    /* Void-dot boyutu, pozisyon offset */
  --space-5: 5px;                    /* Hamburger çizgi aralığı */
  --space-6: 6px;                    /* Store-link ikon aralığı */
  --space-12: 12px;                  /* Mobil menü padding, legal h2 margin-bottom */
  --space-14: 14px;                  /* Store-badges aralığı, cta-title margin-bottom */
  --space-18: 18px;                  /* About-text paragraf arası, cta-card padding */
  --space-22: 22px;                  /* Nav padding (tablet/masaüstü) */
  --space-28: 28px;                  /* Nav-links aralığı, cta-card tablet padding */
  --space-30: 30px;                  /* Hero-line landscape yüksekliği */
  --space-36: 36px;                  /* Section-dot margin */
  --space-50: 50px;                  /* Void-dot margin, hero-line yüksekliği */
  --space-54: 54px;                  /* Logo/preloader tablet boyutu */
  --space-60: 60px;                  /* Nav gradient, legal/landscape padding */
  --space-100: 100px;                /* Legal/section tablet padding */
  --space-140: 140px;                /* Legal tablet üst padding */

  /* ---- Erişilebilirlik — dokunma hedefi ---- */
  --touch-min: 44px;                 /* WCAG minimum tıklama alanı (44x44px) */

  /* ---- Kenarlık kalınlıkları ---- */
  --line-thin: 0.5px;               /* İnce kenarlık ve dekoratif çizgi */
  --outline-focus: 1.5px;           /* Focus-visible çerçeve kalınlığı */

  /* ---- Letter-spacing ---- */
  --tracking-xs: 0.5px;             /* Footer-link, consent-title */
  --tracking-sm: 1px;               /* Manifesto, cta-card-label/email, consent-btn tablet */
  --tracking-md: 2px;               /* CTA-title, legal-box h2, store-link tablet */
  --tracking-lg: 3px;               /* Hero-title mobil */
  --tracking-xl: 4px;               /* Hero-sub, story-title mobil */
  --tracking-2xl: 5px;              /* Work-meta */
  --tracking-3xl: 6px;              /* Work-title, hero-title tablet */
  --tracking-4xl: 8px;              /* Story-title tablet */
  --tracking-5xl: 10px;             /* Hero-sub tablet */

  /* ---- Max-width (layout kısıtlamaları) ---- */
  --max-w-xs: 380px;                /* Consent banner (tablet) */
  --max-w-sm: 480px;                /* CTA alt metin */
  --max-w-md: 500px;                /* Proje detay */
  --max-w-lg: 560px;                /* E-posta kartları grid */
  --max-w-xl: 640px;                /* Hikaye metin */
  --max-w-2xl: 800px;               /* Projeler bölümü */
  --max-w-3xl: 960px;               /* KVKK sayfa */
  --max-w-4xl: 1100px;              /* Ana section */

  /* ---- Max-height (accordion) ---- */
  --max-h-work-expand: 400px;       /* Proje detay açılma (mobil) */
  --max-h-work-expand-md: 300px;    /* Proje detay açılma (tablet) */

  /* ---- Border radius ---- */
  --radius-sm: 6px;                  /* Butonlar, store-link, hamburger */
  --radius-md: 8px;                  /* Mobil menü, cta-card */
  --radius-lg: 10px;                 /* Consent banner, legal-box */

  /* ---- Geçiş efektleri ---- */
  --transition-fast: 0.3s;           /* Hızlı geçiş (hamburger, menü, consent) */
  --transition-base: 0.4s;           /* Standart geçiş (nav, store, footer) */
  --transition-slow: 0.5s;           /* Yavaş geçiş (work-item, cta-card) */
  --transition-accordion: 0.6s;      /* Proje kartı açılma geçişi */

  /* ---- Animasyon süreleri ---- */
  --animation-preloader: 0.6s;       /* Preloader kaybolma süresi */
  --animation-preloader-delay: 2s;   /* Preloader başlangıç gecikmesi */
  --animation-logo-fade: 2s;         /* Logo belirme süresi */
  --animation-reveal: 1.5s;          /* Hero/banner görünme süresi */
  --animation-reveal-delay: 2.2s;    /* Hero/banner başlangıç gecikmesi */
  --animation-pulse: 4s;             /* Void-dot nabız süresi */
  --animation-fade: 1s;              /* Scroll fade-in geçiş süresi */

  /* ---- Glow/gölge yarıçapları ---- */
  --glow-sm: 10px;                   /* Section-dot glow */
  --glow-md: 20px;                   /* Kart hover glow */
  --glow-lg: 30px;                   /* Void-dot/text glow iç */
  --glow-xl: 60px;                   /* Void-dot glow dış */

  /* ---- Hamburger geometri ---- */
  --hamburger-shift: 2.75px;         /* Hamburger X dönüşüm mesafesi */

  /* ---- Arka plan bulanıklığı ---- */
  --blur-backdrop: blur(20px);       /* Nav, mobil menü, consent banner */

  /* ---- Z-index katmanları ---- */
  --z-nav: 100;                      /* Navigasyon çubuğu */
  --z-consent: 1000;                 /* Çerez onay banneri */
  --z-preloader: 10000;              /* Preloader (en üst) */
}