/* =========================================================================
   TAM Randevu — Landing · base.css
   Tasarım dili: Apple iOS sistem yüzeyleri. Nötr gri-beyaz / derin siyah,
   tek mavi vurgu (#0a84ff). Tipografi: yalnız Inter.
   ========================================================================= */

/* ---- Inter (Google Fonts, variable) ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&display=swap');

/* ============================ DESIGN TOKENS ============================ */
:root {
  /* Surfaces — açık tema */
  --bg:           #f3f3f7;
  --bg-elev:      #ffffff;
  --bg-overlay:   rgba(245,245,247,0.78);
  --surface-2:    #ebebef;
  --surface-3:    #e2e2e7;

  /* Text — açık tema */
  --text:         #0a0a0c;
  --text-2:       #6e6e73;
  --text-3:       #aeaeb2;

  /* Hairline — açık tema */
  --hair:         rgba(60,60,67,0.12);
  --hair-soft:    rgba(60,60,67,0.08);

  /* Accent — tek, her iki temada da #0a84ff */
  --accent:       #0a84ff;
  --accent-soft:  rgba(10,132,255,0.14);
  --text-on-accent: #ffffff;

  /* Durum renkleri (iOS) — yalnız anlam taşıyan yerlerde */
  --green:  #34c759;
  --orange: #ff9500;
  --red:    #ff3b30;
  --amber:  #ffcc00;
  --purple: #af52de;
  --pink:   #ff2d55;
  --teal:   #5ac8fa;

  /* Radii */
  --r-card:  18px;
  --r-tile:  14px;
  --r-pill:  999px;
  --r-sheet: 22px;

  /* Shadows — çok hafif, neredeyse hairline */
  --sh-sm: 0 1px 2px rgba(15,15,20,.05), 0 0 0 .5px rgba(0,0,0,.04);
  --sh-md: 0 2px 6px rgba(15,15,20,.05), 0 8px 24px rgba(15,15,20,.06);
  --sh-lg: 0 12px 40px rgba(15,15,20,.14), 0 2px 8px rgba(15,15,20,.06);

  /* Layout */
  --maxw: 1180px;
  --pad:  clamp(20px, 5vw, 40px);
  --gutter: 20px;

  /* Type spacing */
  --ls: -0.012em;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg:           #000000;
  --bg-elev:      #1c1c1e;
  --bg-overlay:   rgba(20,20,22,0.72);
  --surface-2:    #2c2c2e;
  --surface-3:    #3a3a3c;

  --text:         #ffffff;
  --text-2:       rgba(235,235,245,0.6);
  --text-3:       rgba(235,235,245,0.3);

  --hair:         rgba(84,84,88,0.45);
  --hair-soft:    rgba(84,84,88,0.25);

  --accent-soft:  rgba(10,132,255,0.22);

  --sh-sm: 0 1px 2px rgba(0,0,0,.5), 0 0 0 .5px rgba(255,255,255,.04);
  --sh-md: 0 2px 8px rgba(0,0,0,.5), 0 10px 28px rgba(0,0,0,.45);
  --sh-lg: 0 16px 48px rgba(0,0,0,.6), 0 2px 10px rgba(0,0,0,.5);

  color-scheme: dark;
}

/* ============================ RESET / BASE ============================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-feature-settings: "cv11" 1, "ss01" 1, "ss03" 1;
  letter-spacing: var(--ls);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  overflow-x: hidden;
  transition: background-color .5s ease, color .5s ease;
}

img, svg, canvas { display: block; max-width: 100%; }
button { font-family: inherit; letter-spacing: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent-soft); color: var(--text); }

/* ============================ TYPE SCALE ============================ */
.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--text-2);
}
.display {
  font-weight: 800;
  font-size: clamp(40px, 11vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.h2 {
  font-weight: 700;
  font-size: clamp(30px, 7vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.h3 {
  font-weight: 700;
  font-size: clamp(22px, 4.5vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.lead {
  font-size: clamp(17px, 4.4vw, 21px);
  line-height: 1.45;
  color: var(--text-2);
  font-weight: 450;
  text-wrap: pretty;
}
.kicker { font-size: 14px; font-weight: 600; color: var(--accent); letter-spacing: 0; }
.mono {
  font-family: ui-monospace, 'SF Mono', Menlo, Monaco, 'Cascadia Code', monospace;
  letter-spacing: 0;
}

/* ============================ LAYOUT HELPERS ============================ */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
section { position: relative; }
.section-pad { padding-block: clamp(72px, 13vw, 140px); }

/* ============================ BUTTONS ============================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 16px; font-weight: 600; letter-spacing: var(--ls);
  border: none; border-radius: var(--r-pill);
  padding: 14px 24px; min-height: 48px;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), background-color .25s ease, box-shadow .25s ease, color .25s ease;
  will-change: transform;
}
.btn-primary { background: var(--accent); color: var(--text-on-accent); box-shadow: var(--sh-sm); }
.btn-primary:hover { box-shadow: 0 6px 18px rgba(10,132,255,.28); }
.btn-primary:active { transform: scale(.97); }
.btn-ghost {
  background: var(--bg-elev); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--hair);
}
.btn-ghost:hover { background: var(--surface-2); }
.btn-ghost:active { transform: scale(.97); }
.btn-text { background: transparent; color: var(--accent); padding-inline: 10px; }

:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* ============================ REVEAL ANIMATION ============================ */
/* İçerik VARSAYILAN olarak görünür; gizleme yalnız JS aktifken (.js) uygulanır,
   böylece JS/animasyon çalışmasa bile sayfa asla boş kalmaz. */
.reveal { transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.js .reveal { opacity: 0; transform: translateY(26px); }
.js .reveal.in { opacity: 1; transform: none; }
[data-stagger] > * { transition-delay: var(--d, 0ms); }

/* Hero kelime reveal — rAF değil saf CSS animasyon (arka planda da çalışır) */
@keyframes wordIn { from { opacity: 0; transform: translateY(0.5em) rotate(2deg); } to { opacity: 1; transform: none; } }
.js [data-split] .word { display: inline-block; opacity: 0; animation: wordIn .7s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--wd, 0ms); }

/* Sayfa arka planda (hidden) yüklenirse animasyon zaman çizelgesi donar;
   bu durumda her şeyi anında görünür kıl — içerik asla kaybolmasın. */
.reveal-now .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.reveal-now [data-split] .word { opacity: 1 !important; transform: none !important; animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}