/* ═══════════════════════════════════════════════════════
   SayPartner & SayMeet — ortak tasarım sistemi

   Tek tema (gece/gündüz yok). Orta tonda sıcak grafit zemin; marka fildişi,
   vişne ve zümrüt. Sayfanın taşıyıcısı tam ekran 3B sahnedir; kaydırma
   hikâyeyi ilerletir, metin yalnız etiket kadardır.
   ═══════════════════════════════════════════════════════ */

:root {
  --bg: #3c3a36;
  --bg-low: #332f2c;
  --bg-up: #4a4743;
  --ink: #fefdef;
  --ink-2: rgba(254, 253, 239, .7);
  --ink-3: rgba(254, 253, 239, .42);
  --line: rgba(254, 253, 239, .14);
  --line-2: rgba(254, 253, 239, .26);
  --accent: #aa0159;
  --accent-up: #e04b90;
  --green: #10b981;

  --gut: clamp(1rem, 0.6rem + 2.4vw, 2.6rem);
  --shell: 1320px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  /* Üçüncü taraf yazı tipi YOK (30.08.2026 kararı): sistem yüzü, yoksa kendi sunucumuzdan Inter. */
  font: 400 16px/1.45 'Helvetica Neue', Helvetica, Arial, Inter, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.02em; line-height: 1.04; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
:where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent-up); outline-offset: 3px; }

.shell { width: min(100% - 2 * var(--gut), var(--shell)); margin-inline: auto; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gut); top: .6rem; z-index: 60; padding: .5rem .9rem; background: var(--ink); color: var(--bg); }

/* ── Sahne: sayfanın zemini ───────────────────────────── */
#stage {
  position: fixed; left: 0; top: 0; z-index: 0;
  width: 100%; height: 100vh; height: 100lvh;
  background: radial-gradient(118% 88% at 56% 46%, #47443f 0%, var(--bg) 48%, var(--bg-low) 100%);
  pointer-events: none;
}
#scene { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .7s ease; }
html.gl #scene { opacity: 1; }

/* Metnin arkasındaki gölge: nesne metnin altından geçtiğinde okunur kalsın. */
.scrim {
  position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(90deg, rgba(56, 53, 49, .95) 0%, rgba(56, 53, 49, .84) 27%, rgba(56, 53, 49, 0) 50%);
}

/* Hareketsiz görünüm: WebGL yoksa ya da hareket azaltılmışsa aynı kompozisyonun posteri. */
html.still #stage { background-size: cover; background-position: center; background-repeat: no-repeat; }
html.still #stage[data-poster="rail"] { background-image: url(/media/poster-rail-wide.webp); }
html.still #stage[data-poster="month"] { background-image: url(/media/poster-month-wide.webp); }
html.still .scrim { opacity: .9; }

/* Sahnedeki noktalara yapışan etiketler. */
.pin {
  position: absolute; left: 0; top: 0; display: none;
  font-size: 13px; color: var(--ink-3); white-space: nowrap;
  transition: color .3s ease;
}
html.gl .pin { display: block; }
.pin[data-state="pass"] { color: var(--green); }
.pin[data-state="hold"] { color: var(--accent-up); }
.pin[data-state="wait"] { color: var(--ink); }

/* ── Katmanlar ────────────────────────────────────────── */
.layer { position: relative; z-index: 1; }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: var(--gut); }
.brand { display: flex; align-items: center; gap: .9rem; }
.logo {
  background: var(--ink); flex: none;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.logo--sayp { -webkit-mask-image: url(sayp_logo.svg); mask-image: url(sayp_logo.svg); width: 124px; height: 83px; }
.logo--meet { -webkit-mask-image: url(media/saymeet-logo.svg); mask-image: url(media/saymeet-logo.svg); width: 108px; height: 82px; }
.kicker { font-size: 14px; color: var(--ink-2); }

.topnav { display: none; gap: 1.6rem; margin-left: auto; }
.topnav a { font-size: 15px; color: var(--ink-2); text-decoration: none; }
.topnav a:hover { color: var(--ink); }
@media (min-width: 62rem) { .topnav { display: flex; } }

.btn {
  display: inline-block; text-decoration: none; cursor: pointer; font: inherit;
  font-size: 15px; font-weight: 600;
  padding: .7rem 1.15rem; border: 1px solid var(--line-2); background: transparent; color: var(--ink);
}
.btn:hover { border-color: var(--ink); }
.btn--solid { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn:disabled { cursor: default; background: transparent; color: var(--green); border-color: var(--green); }

/* ── Bölümler: her ekran tek fikir ────────────────────── */
.chapter { position: relative; min-height: 118vh; padding: 0 var(--gut); }
.chapter--hero { min-height: 100vh; min-height: 100svh; }
.caption { position: sticky; top: 33vh; width: min(30rem, 38vw); padding-block: 1rem; }
.chapter--hero .caption { position: relative; top: auto; width: auto; max-width: 40rem; padding-top: clamp(.5rem, 2vh, 1.4rem); }

.claim { font-size: clamp(2rem, 1.1rem + 2.6vw, 3.5rem); max-width: 22ch; }
.claim b { display: block; font-weight: 700; color: var(--accent-up); }
.lede { margin-top: 1.1rem; max-width: 34ch; font-size: clamp(1rem, .9rem + .4vw, 1.2rem); color: var(--ink-2); }

.caption h2 { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.4rem); }
.caption h2.quote { font-size: clamp(1.6rem, 1.05rem + 1.9vw, 2.6rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.12; }
.caption p { margin-top: .9rem; max-width: 30ch; font-size: clamp(1rem, .92rem + .35vw, 1.2rem); color: var(--ink-2); }
.caption .request {
  --q: 0;
  margin-top: 1.4rem; max-width: 24ch; color: var(--ink);
  font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); font-weight: 600; line-height: 1.25;
  -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / .26) calc(var(--q) * 100%), #000 calc(var(--q) * 100% + 14%));
  mask-image: linear-gradient(90deg, rgb(0 0 0 / .26) calc(var(--q) * 100%), #000 calc(var(--q) * 100% + 14%));
}

/* Hareketli görünümde metin altyazı gibi tek yerde durur; bölümler yalnız kaydırma payıdır. */
html.motion .chapter:not(.chapter--hero) .caption {
  position: fixed; left: var(--gut); top: 50%; transform: translateY(-50%); z-index: 2;
  opacity: 0; visibility: hidden;
}

/* Onay kapısı: düğme ve dürüst durum satırı. */
.gate { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1.3rem; }
.status { font-size: 15px; color: var(--ink-2); }
.status[data-state="pass"] { color: var(--green); }
.status[data-state="hold"] { color: var(--accent-up); }
html:not(.motion):not(.still) .gate { display: none; }

/* ── Başlık girişleri: her bölüm kendi fikriyle girer ─── */
html.motion .caption h2, html.motion .caption p, html.motion .caption .gate {
  transition: opacity .5s var(--ease) .18s, transform .5s var(--ease), clip-path .7s var(--ease);
}
html.motion .chapter:not(.chapter--hero):not(.on) .caption p,
html.motion .chapter:not(.chapter--hero):not(.on) .caption .gate { opacity: 0; }

/* Okuma: soldan sağa okunur. */
html.motion .chapter:not(.on) [data-enter="scan"] { clip-path: inset(0 100% 0 0); }
html.motion [data-enter="scan"] { clip-path: inset(0 0 0 0); }
/* Plan: gelir, çarpar, geri seker. */
html.motion .chapter:not(.on) [data-enter="rebound"] { opacity: 0; transform: translateX(-.6em); }
html.motion .chapter.on [data-enter="rebound"] { animation: rebound .9s var(--ease) both; }
@keyframes rebound {
  0% { opacity: 0; transform: translateX(-.6em); }
  55% { opacity: 1; transform: translateX(.22em); }
  78% { transform: translateX(-.07em); }
  100% { opacity: 1; transform: none; }
}
/* Hesap: sayar gibi, basamak basamak. */
html.motion .chapter:not(.on) [data-enter="count"] { clip-path: inset(0 100% 0 0); }
html.motion .chapter.on [data-enter="count"] { transition: clip-path .7s steps(7, end); }
/* Yazma: bıçak gibi yukarıdan iner ve kalır. */
html.motion .chapter:not(.on) [data-enter="drop"] { opacity: 0; transform: translateY(-.55em); }
html.motion .chapter.on [data-enter="drop"] { transition: opacity .25s linear, transform .45s cubic-bezier(.3, 1.5, .5, 1); }
/* Teslim: belirir, altı yeşil bir çizgiyle işaretlenir. */
[data-enter="tick"] { display: inline-block; position: relative; padding-bottom: .12em; }
[data-enter="tick"]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--green);
  transform-origin: left; transition: transform .6s var(--ease) .35s;
}
html.motion .chapter:not(.on) [data-enter="tick"] { opacity: 0; }
html.motion .chapter:not(.on) [data-enter="tick"]::after { transform: scaleX(0); }
/* SayMeet: sütun gibi yükselir; blok gibi sağdan gelir; bir hafta aşağı adım atar; sahibi değişir gibi sağdan açılır. */
html.motion .chapter:not(.on) [data-enter="rise"] { opacity: 0; transform: translateY(.5em); }
html.motion .chapter:not(.on) [data-enter="slide"] { opacity: 0; transform: translateX(1.4em); }
html.motion .chapter:not(.on) [data-enter="step"] { opacity: 0; transform: translateY(-.7em); }
html.motion .chapter.on [data-enter="step"] { transition: opacity .2s linear, transform .5s steps(2, end); }
html.motion .chapter:not(.on) [data-enter="swap"] { clip-path: inset(0 0 0 100%); }
html.motion [data-enter="swap"] { clip-path: inset(0 0 0 0); }

/* ── Sayı şeridi ──────────────────────────────────────── */
.figures {
  position: relative; display: grid; grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line); background: var(--bg-low);
}
@media (min-width: 46rem) { .figures { grid-template-columns: repeat(4, 1fr); } }
.figures div { padding: 1.5rem var(--gut); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.figures div:last-child { border-right: 0; }
.figures span { display: block; font-size: clamp(1.6rem, 1rem + 1.8vw, 2.4rem); font-weight: 700; letter-spacing: -.02em; }
.figures small { display: block; margin-top: .25rem; font-size: 14px; color: var(--ink-2); max-width: 20ch; }

/* ── Bantlar: sahnenin bittiği yer ────────────────────── */
.band { position: relative; background: var(--bg-low); padding-block: clamp(2.6rem, 1.6rem + 4vw, 5rem); }
.band + .band { border-top: 1px solid var(--line); }
.band h2 { font-size: clamp(1.5rem, 1rem + 1.7vw, 2.4rem); max-width: 20ch; }
.status-line { font-size: 15px; color: var(--ink-2); margin-bottom: .7rem; }

.appendix { margin-top: 1.6rem; border-top: 1px solid var(--line); }
.appendix details { border-bottom: 1px solid var(--line); }
.appendix summary {
  display: flex; gap: 1rem; align-items: baseline; padding: 1rem 0;
  cursor: pointer; font-size: 16px; font-weight: 500; list-style: none;
}
.appendix summary::-webkit-details-marker { display: none; }
.appendix summary::after { content: '+'; margin-left: auto; color: var(--ink-3); }
.appendix details[open] summary::after { content: '−'; }
.appendix p { padding: 0 0 1.1rem; max-width: 62ch; font-size: 15px; color: var(--ink-2); line-height: 1.6; }

.contact { display: grid; gap: 1.8rem; margin-top: 1.6rem; }
@media (min-width: 56rem) { .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); align-items: start; } }
.lead { font-size: 16px; color: var(--ink-2); max-width: 46ch; }
.field { display: grid; gap: .3rem; margin-bottom: .8rem; }
.field label { font-size: 14px; color: var(--ink-2); }
.field input, .field textarea {
  width: 100%; padding: .6rem .7rem; font: inherit;
  border: 1px solid var(--line-2); background: var(--bg); color: var(--ink);
}
.field textarea { min-height: 5rem; resize: vertical; }

/* ── Alt ──────────────────────────────────────────────── */
.foot {
  position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 1rem; padding: var(--gut); background: var(--bg-low);
  color: var(--ink-3); font-size: 13px;
  border-top: 1px solid var(--line);
}
.foot .logo { background: var(--ink-3); }
.foot .logo--sayp { width: 78px; height: 52px; }
.foot .logo--meet { width: 70px; height: 53px; }
.foot nav { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; }
.foot nav a { text-decoration: none; }
.foot nav a:hover { color: var(--ink); }

/* ── Çerez bandı ──────────────────────────────────────── */
/* analytics.js kendi <style>'ını bu dosyadan SONRA enjekte ediyor; üstünlük fazladan bir `html` ile alınıyor. */
html #sayp-consent-banner {
  border-radius: 0;
  background: var(--bg-up);
  border: 1px solid var(--line-2);
  box-shadow: 0 10px 40px rgb(0 0 0 / .35);
  color: var(--ink);
  font-family: inherit;
  backdrop-filter: none;
}
html #sayp-consent-banner p { color: var(--ink-2); }
html #sayp-consent-banner a { color: var(--accent-up); text-decoration: underline; text-underline-offset: 2px; }
html #sayp-consent-banner button { border-radius: 0; font-family: inherit; border: 1px solid var(--line-2); }
html #sayp-consent-banner .sayp-accept { background: var(--ink); color: var(--bg); border-color: var(--ink); }
html #sayp-consent-banner .sayp-reject { background: transparent; color: var(--ink-2); }

/* ── Dar ekran: nesne üstte, metin altta ──────────────── */
@media (max-width: 47.99rem) {
  .logo--sayp { width: 86px; height: 58px; }
  .logo--meet { width: 76px; height: 58px; }
  /* Üstteki eylem düğmesi dar ekranda satıra sığmıyor; sayfa içinde zaten var. */
  .topbar .brand:last-child .btn--solid { display: none; }

  .chapter { min-height: 104svh; }
  .caption { position: sticky; top: .9rem; width: auto; padding: 1rem 0 1.6rem; }
  .chapter--hero .caption { position: relative; top: auto; padding-bottom: 0; }
  .caption h2 { font-size: clamp(2rem, 1.2rem + 5vw, 2.8rem); }
  .caption p { max-width: none; }
  .figures div { padding: 1.1rem var(--gut); }
  .scrim { background: linear-gradient(180deg, rgba(51, 47, 44, .96) 0%, rgba(51, 47, 44, .86) 26%, rgba(51, 47, 44, 0) 44%); }
  html.motion .chapter:not(.chapter--hero) .caption { left: var(--gut); right: var(--gut); top: .9rem; transform: none; width: auto; }
  html.still .chapter:not(.chapter--hero) .caption { margin-inline: -.8rem; padding-inline: .8rem; background: rgba(51, 47, 44, .92); }
  html.still #stage[data-poster="rail"] { background-image: url(/media/poster-rail-tall.webp); }
  html.still #stage[data-poster="month"] { background-image: url(/media/poster-month-tall.webp); }
  .pin { font-size: 12px; }
}