/* ============================================================
   Ortak temel — scroll-driven stüdyo siteleri
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: var(--accent); color: var(--bg); }

.mono {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "JetBrains Mono", monospace;
  font-variant-numeric: tabular-nums;
}

/* ---------- sabit üst bar ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(20px, 4vw, 54px);
  pointer-events: none;
  mix-blend-mode: normal;
}
.topbar .brand {
  display: flex; align-items: center; gap: 12px;
  font-size: 15px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
}
.topbar .brand .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 14px var(--accent);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
.topbar .meta { display: flex; gap: 20px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.topbar a { pointer-events: auto; color: inherit; text-decoration: none; }
.topbar a:hover { color: var(--accent); }

/* ---------- sahne ---------- */
/* kaydırma uzunluğu = anlatının temposu (8 bölüm) */
.track { position: relative; height: 1100vh; }
.stage {
  position: sticky; top: 0; height: 100vh; width: 100%;
  overflow: hidden;
}
.stage canvas { display: block; width: 100%; height: 100%; }
.stage .vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 40%, var(--vignette) 100%);
}
.grain {
  position: absolute; inset: -18%; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 8s steps(6) infinite;
}
@keyframes grainShift {
  0%{transform:translate(0,0)} 20%{transform:translate(-1.5%,1%)} 40%{transform:translate(1%,-1.5%)}
  60%{transform:translate(-1%,-1%)} 80%{transform:translate(1.5%,.5%)} 100%{transform:translate(0,0)}
}

/* ---------- bölüm metinleri ---------- */
.chapters { position: absolute; inset: 0; pointer-events: none; }
.chap {
  position: absolute; opacity: 0;
  will-change: opacity, transform;
  max-width: min(520px, 42vw);
}
.chap::before {
  content: ""; position: absolute; inset: -60px -90px; z-index: -1; pointer-events: none;
  background: radial-gradient(58% 62% at 32% 50%, var(--bg) 0%, transparent 74%);
  opacity: .88;
}
.chap.pos-right::before { background: radial-gradient(58% 62% at 68% 50%, var(--bg) 0%, transparent 74%); }
.chap.pos-center::before, .chap.pos-bottom::before { background: radial-gradient(62% 70% at 50% 50%, var(--bg) 0%, transparent 78%); }
.chap h2, .chap p, .chap .facts { position: relative; }
.chap.pos-left  { left: clamp(20px, 6vw, 96px); top: 50%; transform: translateY(-50%); }
.chap.pos-right { right: clamp(20px, 6vw, 96px); top: 50%; transform: translateY(-50%); text-align: right; }
.chap.pos-center{ left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; max-width: min(760px, 80vw); }
.chap.pos-bottom{ left: 50%; bottom: clamp(60px, 12vh, 140px); transform: translateX(-50%); text-align: center; max-width: min(680px, 84vw); }

.chap .step {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 18px;
}
.chap .step::before { content: ""; width: 26px; height: 1px; background: var(--accent); opacity: .7; }
.chap.pos-right .step { flex-direction: row-reverse; }
.chap.pos-right .step::before { content: ""; }
.chap h2 {
  margin: 0 0 14px; font-weight: 600;
  font-size: clamp(30px, 4.2vw, 56px); line-height: 1.02; letter-spacing: -.028em;
}
.chap p { margin: 0; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.62; color: var(--dim); }
.chap .facts {
  display: flex; gap: 26px; margin-top: 26px; flex-wrap: wrap;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.chap.pos-right .facts { justify-content: flex-end; }
.chap.pos-center .facts, .chap.pos-bottom .facts { justify-content: center; }
.chap .fact .v { display: block; font-size: 21px; color: var(--fg); letter-spacing: -.01em; }
.chap .fact .k { display: block; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); margin-top: 5px; }

/* hero */
.hero-title {
  font-size: clamp(56px, 12vw, 168px); font-weight: 650; line-height: .88;
  letter-spacing: -.05em; margin: 0;
}
.hero-sub { margin-top: 26px; font-size: clamp(15px, 1.5vw, 20px); color: var(--dim); line-height: 1.5; }
.hero-tags {
  margin-top: 34px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.hero-tags span {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--dim);
  background: var(--chipBg);
}

/* ---------- sağ ray (bölüm göstergesi) ---------- */
.rail {
  position: fixed; right: clamp(14px, 2.4vw, 34px); top: 50%; transform: translateY(-50%);
  z-index: 30; display: flex; flex-direction: column; gap: 14px; align-items: flex-end;
  pointer-events: none;
}
.rail .r {
  display: flex; align-items: center; gap: 10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); transition: color .35s ease;
}
.rail .r .bar { width: 18px; height: 2px; background: currentColor; opacity: .45; transition: width .4s cubic-bezier(.2,.8,.2,1), opacity .35s; }
.rail .r .lbl { opacity: 0; transition: opacity .35s ease; white-space: nowrap; }
.rail .r.on { color: var(--accent); }
.rail .r.on .bar { width: 40px; opacity: 1; }
.rail .r.on .lbl { opacity: 1; }

/* ---------- kaydırma ipucu ---------- */
.scrollhint {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint);
  transition: opacity .5s ease; pointer-events: none;
}
.scrollhint .line { width: 1px; height: 42px; background: linear-gradient(var(--faint), transparent); position: relative; overflow: hidden; }
.scrollhint .line::after {
  content: ""; position: absolute; left: 0; width: 1px; height: 14px; background: var(--accent);
  animation: drop 2s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes drop { 0% { top: -14px; } 100% { top: 42px; } }

/* ---------- alt içerik ---------- */
.outro { position: relative; z-index: 5; background: var(--bg); border-top: 1px solid var(--line); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); }
.outro section { padding: clamp(70px, 10vh, 130px) 0; border-bottom: 1px solid var(--line); }
.eyebrow {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px;
}
.outro h3 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; letter-spacing: -.03em; margin: 0 0 18px; line-height: 1.06; }
.outro p.lead { font-size: 17px; line-height: 1.65; color: var(--dim); max-width: 62ch; margin: 0; }

.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 1px; margin-top: 52px; background: var(--line); border: 1px solid var(--line); }
.fgrid .f { background: var(--bg); padding: 30px 28px 34px; transition: background .3s ease; }
.fgrid .f:hover { background: var(--cardHover); }
.fgrid .f .n { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; color: var(--accent); letter-spacing: .18em; }
.fgrid .f h4 { margin: 16px 0 10px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.fgrid .f p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--dim); }

.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 30px 24px; margin-top: 46px; }
.specs .s { border-top: 1px solid var(--line); padding-top: 16px; }
.specs .s .k { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.specs .s .v { font-size: 16px; margin-top: 8px; letter-spacing: -.01em; }

.cta { text-align: center; }
.cta .price { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; color: var(--dim); margin-top: 22px; letter-spacing: .06em; }
.btn {
  display: inline-flex; align-items: center; gap: 11px; margin-top: 30px;
  padding: 15px 30px; border-radius: 999px; text-decoration: none;
  background: var(--accent); color: var(--btnFg); font-weight: 600; font-size: 15px;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
  box-shadow: 0 10px 40px -12px var(--accent);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 18px 52px -12px var(--accent); }
.btn.ghost { background: transparent; color: var(--fg); border: 1px solid var(--line2); box-shadow: none; margin-left: 12px; }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); }

footer.f { padding: 40px 0 56px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; color: var(--faint); letter-spacing: .08em; }
footer.f a { color: var(--dim); text-decoration: none; }
footer.f a:hover { color: var(--accent); }

/* ---------- yükleme ---------- */
.loader {
  position: fixed; inset: 0; z-index: 90; background: var(--bg);
  display: grid; place-items: center; transition: opacity .8s ease, visibility .8s;
}
.loader.gone { opacity: 0; visibility: hidden; }
.loader .l {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px;
  letter-spacing: .24em; text-transform: uppercase; color: var(--faint);
}
.loader .lbar { width: 180px; height: 1px; background: var(--line2); margin-top: 18px; overflow: hidden; }
.loader .lbar i { display: block; height: 100%; width: 40%; background: var(--accent); animation: sweep 1.1s ease-in-out infinite; }
@keyframes sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }

@media (max-width: 780px) {
  .track { height: 820vh; }
  .chap.pos-left, .chap.pos-right { left: 20px; right: 20px; max-width: none; text-align: left; top: auto; bottom: 12vh; transform: none; }
  .chap.pos-right .facts { justify-content: flex-start; }
  .rail { display: none; }
  .topbar .meta { display: none; }
}