/* SatışRehberi — Design tokens v6 (lighter charcoal cockpit) */

:root {
  /* Layer stack — 15–20% lighter perceived darkness */
  --layer-bg: #0b0b0e;
  --layer-section: #101014;
  --layer-surface: #17171c;
  --layer-input: #1e1e24;
  --layer-result: #23232b;

  /* Legacy aliases (do not break Tailwind / PHP) */
  --bg-primary: var(--layer-bg);
  --bg-secondary: var(--layer-section);
  --surface-1: var(--layer-section);
  --surface-2: var(--layer-surface);
  --surface-3: var(--layer-input);

  /* Elevation — Linear-style separation */
  --edge-highlight: rgba(255, 255, 255, 0.1);
  --edge-highlight-soft: rgba(255, 255, 255, 0.065);
  --shadow-ambient: 0 10px 36px -14px rgba(0, 0, 0, 0.52);
  --shadow-card: 0 4px 24px -8px rgba(0, 0, 0, 0.45);
  --shadow-card-hover: 0 18px 48px -14px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(209, 63, 91, 0.1);

  /* Brand */
  --primary: #7a2030;
  --primary-hover: #92273a;
  --accent-crimson: #b4233c;
  --accent-glow: #d13f5b;

  --success: #22c55e;
  --success-soft: #4ade80;
  --warning: #f59e0b;
  --danger: #ef4444;

  /* Text — lifted for charcoal readability */
  --text-primary: #f5f5f7;
  --text-secondary: #b8b8c0;
  --text-muted: #91919c;

  --border-hairline: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.11);
  --border-accent: rgba(180, 35, 60, 0.38);

  --glow-brand: rgba(209, 63, 91, 0.14);
  --glow-brand-strong: rgba(209, 63, 91, 0.24);
  --glow-ambient-a: rgba(122, 32, 48, 0.09);
  --glow-ambient-b: rgba(209, 63, 91, 0.06);

  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --section-y: clamp(4.5rem, 8vw, 7rem);
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

  --bg-deep: var(--layer-bg);
  --bg-base: var(--layer-section);
  --surface-elevated: var(--layer-surface);
  --primary-light: var(--accent-crimson);
  --primary-glow: var(--accent-glow);
  --card: var(--layer-surface);
}

.elevation-card {
  background: var(--layer-surface);
  box-shadow:
    inset 0 1px 0 0 var(--edge-highlight),
    0 0 0 1px var(--border-hairline),
    var(--shadow-card);
}

.elevation-input {
  background: var(--layer-input);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.07),
    inset 0 0 0 1px var(--border-strong);
}

.elevation-result {
  background: var(--layer-result);
  box-shadow:
    inset 0 1px 0 0 var(--edge-highlight),
    inset 0 0 0 1px rgba(209, 63, 91, 0.22),
    0 0 40px -12px var(--glow-brand);
}

.page-band {
  background: linear-gradient(180deg, var(--layer-section) 0%, rgba(16, 16, 20, 0.97) 100%);
  box-shadow:
    inset 0 1px 0 var(--border-hairline),
    inset 0 -1px 0 var(--border-hairline);
}

.page-band::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 40% at 50% 0%, var(--glow-ambient-a), transparent 70%);
  opacity: 0.5;
}

.page-band {
  position: relative;
}

/* Typography */
.type-display {
  font-size: clamp(2.75rem, 6vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--text-primary);
}

.type-h1 {
  font-size: clamp(2.25rem, 4.5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--text-primary);
}

.type-h2 {
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--text-primary);
}

.type-h3 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.type-body {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.type-body-sm {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.type-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-crimson);
}

.type-muted {
  color: var(--text-muted);
}

.section-y {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

.link-subtle {
  color: var(--text-muted);
  transition: color 0.2s;
}
.link-subtle:hover {
  color: var(--accent-glow);
}

.bg-surface-0 { background-color: var(--layer-bg); }
.bg-surface-1 { background-color: var(--layer-section); }
.bg-surface-2 { background-color: var(--layer-surface); }
.bg-surface-3 { background-color: var(--layer-input); }

.pill-link {
  border-radius: 9999px;
  background: var(--layer-input);
  padding: 0.375rem 1rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  transition: color 0.2s, background 0.2s;
}
.pill-link:hover {
  color: var(--accent-glow);
  background: var(--layer-surface);
}

.hero-grid-glow {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 75% 55% at 50% 25%, black, transparent);
  pointer-events: none;
  opacity: 0.45;
}

.hero-section {
  position: relative;
  overflow: hidden;
}

.hero-calc-result-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-glow);
}