/* ============================================================
 * Oylarım Design Tokens
 * Single source of truth — import at the top of every artifact.
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Brand ---------- */
  --brand-50:  #EFF6FF;
  --brand-100: #DBEAFE;
  --brand-200: #BFDBFE;
  --brand-300: #93C5FD;
  --brand-400: #60A5FA;
  --brand-500: #3B82F6;
  --brand-600: #2563EB;   /* primary */
  --brand-700: #1D4ED8;
  --brand-800: #1E40AF;
  --brand-900: #1E3A8A;

  /* ---------- Ink (neutrals) ---------- */
  --ink-50:  #F8FAFC;
  --ink-100: #F1F5F9;
  --ink-200: #E2E8F0;
  --ink-300: #CBD5E1;
  --ink-400: #94A3B8;
  --ink-500: #64748B;
  --ink-600: #475569;
  --ink-700: #334155;
  --ink-800: #1E293B;
  --ink-900: #0F172A;   /* secondary brand */

  /* ---------- Surfaces ---------- */
  --surface-0: #FFFFFF;
  --surface-1: #F8FAFC;
  --surface-2: #F1F5F9;
  --surface-3: #E2E8F0;

  /* ---------- Semantic ---------- */
  --success-50:  #ECFDF5;
  --success-500: #10B981;
  --success-600: #059669;
  --success-700: #047857;

  --warning-50:  #FFFBEB;
  --warning-500: #F59E0B;
  --warning-600: #D97706;

  --danger-50:  #FEF2F2;
  --danger-500: #EF4444;
  --danger-600: #DC2626;

  --info-50:  #EFF6FF;
  --info-500: #3B82F6;

  /* ---------- Semantic aliases (use these in components) ---------- */
  --fg-1: var(--ink-900);
  --fg-2: var(--ink-700);
  --fg-3: var(--ink-500);
  --fg-on-brand: #FFFFFF;
  --fg-link: var(--brand-600);
  --bg-page: var(--surface-1);
  --bg-card: var(--surface-0);
  --bg-inset: var(--surface-2);
  --border-1: rgba(15, 23, 42, 0.06);
  --border-2: rgba(15, 23, 42, 0.10);
  --border-strong: rgba(15, 23, 42, 0.18);

  /* ---------- Gradients ---------- */
  --grad-brand:     linear-gradient(135deg, #3B82F6 0%, #2563EB 50%, #1D4ED8 100%);
  --grad-brand-soft:linear-gradient(180deg, #EFF6FF 0%, #DBEAFE 100%);
  --grad-hero:      radial-gradient(1200px 600px at 20% 0%, #DBEAFE 0%, transparent 60%),
                    radial-gradient(900px 500px at 90% 10%, #EFF6FF 0%, transparent 55%),
                    linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
  --grad-success:   linear-gradient(135deg, #34D399 0%, #10B981 100%);
  --grad-glass:     linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.55));

  /* ---------- Type ---------- */
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* size ramp */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-lg:    18px;
  --text-xl:    20px;
  --text-2xl:   24px;
  --text-3xl:   30px;
  --text-4xl:   36px;
  --text-5xl:   48px;
  --text-6xl:   60px;
  --text-display: 72px;

  /* line-heights */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* tracking */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow: 0.12em;

  /* weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-black:   800;

  /* ---------- Spacing (4px base) ---------- */
  --space-0:  0;
  --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;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------- Radii ---------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ---------- Shadows ---------- */
  --shadow-xs:    0 1px 2px rgba(15,23,42,0.04);
  --shadow-sm:    0 2px 4px rgba(15,23,42,0.04), 0 1px 2px rgba(15,23,42,0.03);
  --shadow-md:    0 8px 24px rgba(15,23,42,0.06), 0 2px 6px rgba(15,23,42,0.04);
  --shadow-lg:    0 20px 48px rgba(15,23,42,0.10), 0 4px 12px rgba(15,23,42,0.05);
  --shadow-xl:    0 32px 64px rgba(15,23,42,0.14), 0 8px 20px rgba(15,23,42,0.06);
  --shadow-brand: 0 12px 32px rgba(37,99,235,0.28);
  --shadow-success: 0 12px 32px rgba(16,185,129,0.24);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(15,23,42,0.04);

  /* glass */
  --glass-blur:   saturate(180%) blur(20px);
  --glass-bg:     rgba(255,255,255,0.72);
  --glass-border: rgba(255,255,255,0.6);

  /* ---------- Motion ---------- */
  --ease-out-expo:   cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-overshoot:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 400ms;
  --dur-4: 700ms;

  /* ---------- Icons ---------- */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;
  --icon-stroke: 1.5;

  /* ---------- Layout ---------- */
  --container-max: 1440px;
  --container-wide: 1680px;
  --container-gutter: clamp(20px, 4vw, 56px);
  --pwa-width: 390px;
  --pwa-bottom-nav: 64px;
  --header-h: 64px;

  /* ---------- Z-index ---------- */
  --z-base: 0;
  --z-sticky: 50;
  --z-overlay: 80;
  --z-modal: 100;
  --z-toast: 120;
}

/* ============================================================
 * Dark mode — flip surfaces and ink, keep brand & semantics.
 * Apply via [data-theme="dark"] or @media prefers-color-scheme.
 * ============================================================ */

[data-theme="dark"] {
  --surface-0: #0F172A;
  --surface-1: #020617;
  --surface-2: #1E293B;
  --surface-3: #334155;

  --fg-1: #F8FAFC;
  --fg-2: #CBD5E1;
  --fg-3: #94A3B8;
  --bg-page: var(--surface-1);
  --bg-card: var(--surface-0);
  --bg-inset: var(--surface-2);
  --border-1: rgba(248,250,252,0.06);
  --border-2: rgba(248,250,252,0.10);
  --border-strong: rgba(248,250,252,0.18);

  --grad-hero: radial-gradient(1200px 600px at 20% 0%, rgba(37,99,235,0.18) 0%, transparent 60%),
               radial-gradient(900px 500px at 90% 10%, rgba(59,130,246,0.12) 0%, transparent 55%),
               linear-gradient(180deg, #020617 0%, #0F172A 100%);
  --glass-bg:     rgba(15,23,42,0.6);
  --glass-border: rgba(248,250,252,0.08);

  --shadow-sm: 0 2px 4px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
  --shadow-lg: 0 20px 48px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4);
}

/* ============================================================
 * Element defaults
 * ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--text-5xl); line-height: var(--lh-tight);   font-weight: var(--weight-black); }
h2 { font-size: var(--text-4xl); line-height: var(--lh-tight);   font-weight: var(--weight-bold);  }
h3 { font-size: var(--text-2xl); line-height: var(--lh-snug);    font-weight: var(--weight-bold);  }
h4 { font-size: var(--text-xl);  line-height: var(--lh-snug);    font-weight: var(--weight-semi);  }
h5 { font-size: var(--text-lg);  line-height: var(--lh-snug);    font-weight: var(--weight-semi);  }
h6 { font-size: var(--text-sm);  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fg-3); font-weight: var(--weight-semi); }

p { margin: 0; color: var(--fg-2); text-wrap: pretty; }

.eyebrow {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--weight-semi);
  color: var(--brand-600);
}

.num, .tabular { font-variant-numeric: tabular-nums; }

a { color: var(--fg-link); text-decoration: none; }
a:hover { text-decoration: none; }

/* Underline is opt-in for prose contexts only (article body, legal text, lede paragraphs). */
.ed-lede a:hover,
.ed-byline a:hover,
.legal-body a:hover,
.prose a:hover,
p > a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

code, pre { font-family: var(--font-mono); font-size: 0.95em; }

/* Focus ring — universal */
:focus-visible {
  outline: 3px solid rgba(37,99,235,0.35);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ============================================================
 * Live-pulse keyframe (used on "Canlı" badges)
 * ============================================================ */
@keyframes oy-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(37,99,235,0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(37,99,235,0);    }
  100% { box-shadow: 0 0 0 0   rgba(37,99,235,0);    }
}
@keyframes oy-pulse-success {
  0%   { box-shadow: 0 0 0 0   rgba(16,185,129,0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(16,185,129,0);    }
  100% { box-shadow: 0 0 0 0   rgba(16,185,129,0);    }
}