/* ============================================================
   EC GELLÉRT — Design System Tokens
   "Tuna Geçidi" — Bürokrasiyi karşıya geçiren köprü
   Shared across desktop + mobile experiences
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Inter:wght@400;450;500;600;700&display=swap');

:root {
  /* — Brand palette — */
  --paper:        #F3F5F9;   /* cool light ground */
  --paper-2:      #FAFBFD;   /* raised card */
  --paper-3:      #FFFFFF;   /* pure surface */
  --ink:          #14203A;   /* navy near-black */
  --ink-soft:     #454F68;   /* secondary text */
  --ink-faint:    #8892A6;   /* tertiary / captions */
  --line:         #E3E8F1;   /* hairline */
  --line-strong:  #CED6E4;

  /* PRIMARY brand = deep navy (var kept as --red so all accents flip site-wide) */
  --red:          #15325F;   /* EC Gellért navy */
  --red-deep:     #0D2144;
  --red-tint:     #E9EEF7;
  /* SECONDARY accent = gold (var kept as --green) */
  --green:        #B8923E;   /* EC Gellért gold */
  --green-deep:   #8A6A1E;
  --green-tint:   #F4ECD9;

  --danube:       #0E2447;   /* deep navy, dark sections */
  --danube-2:     #16325F;
  --danube-soft:  #4A6A9C;   /* mid navy accent */
  --sand:         #C8A24C;   /* gold accent */

  /* — Type — */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* — Motion (Emil curves) — */
  --ease-out:     cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:  cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer:  cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  /* — Radius — */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 36px;
  --r-pill: 999px;

  /* — Elevation — */
  --shadow-xs: 0 1px 2px rgba(22,18,13,.05);
  --shadow-sm: 0 1px 2px rgba(22,18,13,.06), 0 4px 12px rgba(22,18,13,.05);
  --shadow-md: 0 6px 16px rgba(22,18,13,.08), 0 14px 40px rgba(22,18,13,.08);
  --shadow-lg: 0 18px 50px rgba(22,18,13,.16), 0 4px 12px rgba(22,18,13,.08);
  --shadow-red: 0 10px 30px rgba(21,50,95,.30);
  --shadow-green: 0 10px 30px rgba(184,146,62,.28);

  /* — Layout — */
  --container: 1200px;
  --gutter: clamp(20px, 5vw, 56px);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv05' 1, 'ss01' 1;
}
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--red); color: #fff; }

/* ---------- Type utilities ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-optical-sizing: auto;
}
.serif-italic { font-family: var(--font-display); font-style: italic; font-weight: 400; }
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  width: 22px; height: 1.5px;
  background: var(--red);
  display: inline-block;
}
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--ink);
  --fg: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 26px;
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--fg);
  font-weight: 550;
  font-size: 15px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform .16s var(--ease-out), box-shadow .25s var(--ease-out), background .25s var(--ease-out);
  will-change: transform;
}
.btn:active { transform: scale(0.97); }
.btn--red   { --bg: var(--red); box-shadow: var(--shadow-red); }
.btn--green { --bg: var(--green); box-shadow: var(--shadow-green); }
.btn--ghost { --bg: transparent; --fg: var(--ink); border: 1.5px solid var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); }
.btn .arrow { transition: transform .25s var(--ease-out); }
@media (hover:hover) and (pointer:fine) {
  .btn--red:hover, .btn--green:hover { transform: translateY(-2px); }
  .btn:hover .arrow { transform: translateX(3px); }
}

/* ---------- Scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(6px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), filter .8s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .12s !important; }
  [data-reveal] { filter: none; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Shared logo mark ---------- */
.df-mark { display: inline-block; line-height: 0; }