:root {
  color-scheme: light;

  /* ── Palette ─────────────────────────────────────────── */
  --color-ink-950: #122033;
  --color-ink-800: #26384f;
  --color-ink-600: #5d7089;
  --color-ink-400: #8b9aaf;
  --color-surface: #ffffff;
  --color-surface-soft: #f5f8fc;
  --color-surface-tint: #eef5fa;
  --color-line: #dfe7f0;

  /* ── Marka Renkleri (tek kaynak gerçeği) ─────────────── */
  --color-brand:        #1098a2;
  --color-brand-strong: #087f8a;
  --color-brand-deep:   #0a2540;
  --color-brand-slate:  #425466;
  --color-brand-soft:   rgba(16, 152, 162, .08);
  --color-brand-shadow: rgba(16, 152, 162, .22);
  --color-warm:   #ce7934;
  --color-focus:  #0e9faa;

  /* Alias — kısa isimler */
  --fg:     var(--color-ink-950);
  --muted:  var(--color-ink-600);
  --line:   var(--color-line);
  --accent: var(--color-brand);

  /* ── Sayfa arka planı ────────────────────────────────── */
  --page-bg:      #ffffff;
  --page-bg-soft: #f7fafc;

  /* ── Layout ──────────────────────────────────────────── */
  --max: 1200px;
  /* Sabit 1200px yerine viewport'a göre esner: geniş ekranlarda (1920px+)
     kenarlarda aşırı boşluk bırakmadan ölçülü şekilde büyür, 1400px'te durur. */
  --container-max:      clamp(1200px, 80vw, 1400px);
  --container-readable: 960px;
  --container-narrow:   760px;
  --container-gutter:   32px;
  --section-y:    88px;
  --section-y-sm: 56px;

  /* ── Breakpoint referansları (JS'de de okunabilir) ────── */
  --bp-sm: 640px;
  --bp-md: 820px;
  --bp-lg: 980px;
  --bp-xl: 1220px;

  /* ── Boşluk skalası ──────────────────────────────────── */
  --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-20: 80px;

  /* ── Border radius ───────────────────────────────────── */
  --radius-sm:      10px;
  --radius-md:      16px;
  --radius-lg:      24px;
  --radius-xl:      30px;
  --radius-control:  8px;
  --radius-pill:   999px;

  /* ── Shadow ──────────────────────────────────────────── */
  --shadow-soft: 0 18px 48px rgba(31, 53, 79, 0.08);
  --shadow-lift: 0 24px 64px rgba(31, 53, 79, 0.12);
  --shadow-btn:  0 4px 12px var(--color-brand-shadow);

  /* ── Geçiş ───────────────────────────────────────────── */
  --transition-ui:   220ms cubic-bezier(.2, .7, .2, 1);
  --transition-slow: 420ms cubic-bezier(.2, .7, .2, 1);

  /* ── Buton boyutları ─────────────────────────────────── */
  --btn-h-sm:   36px;
  --btn-h-md:   44px;
  --btn-h-lg:   52px;
  --btn-px-sm:  14px;
  --btn-px-md:  22px;
  --btn-px-lg:  28px;
  --btn-fs-sm:  .82rem;
  --btn-fs-md:  .9rem;
  --btn-fs-lg:  .95rem;

  /* ── Z-index katmanları ──────────────────────────────── */
  --z-base:     0;
  --z-raised:   100;
  --z-dropdown: 400;
  --z-backdrop: 1100;
  --z-header:   1200;
  --z-modal:    1300;
  --z-toast:    1400;
}

@media (max-width: 980px) {
  :root {
    --container-gutter: 20px;
    --section-y: 72px;
    --section-y-sm: 48px;
  }
}

@media (max-width: 640px) {
  :root {
    --container-gutter: 16px;
    --section-y: 56px;
    --section-y-sm: 40px;
  }
}