:root{
  /* palet filmin kendi zemininden türetildi */
  --ground:#C6CCCA;
  --graphite:#1B1F1E;
  --slate:#5C6664;
  --rule:#8E9A97;
  --yolk:#D8850E;

  --pad:clamp(20px,4vw,56px);
  --font-display:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
  --font-body:"Instrument Sans",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",monospace;

  --surface:76%;   /* filmdeki yüzey çizgisinin ekrandaki yeri, JS günceller */
  --release:22%;   /* bırakma yüksekliği */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ground);color:var(--graphite);
  font-family:var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:clip;
}

/* üst çubuk */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:6;
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--pad) var(--pad) 0;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--slate);pointer-events:none;
}
.mark{color:var(--graphite)}
.mark-sep{opacity:.4;margin:0 .6em}
.topline{position:fixed;top:0;left:0;right:0;height:2px;background:rgba(27,31,30,.1)}
.topline i{display:block;height:100%;width:0;background:var(--graphite)}

/* sahne */
.track{height:820vh;position:relative}
.stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--ground)}

.film{position:absolute;inset:0;width:100%;height:100%;display:block;will-change:transform}
.wash{
  position:absolute;inset:0;opacity:0;pointer-events:none;mix-blend-mode:multiply;
  background:radial-gradient(88% 58% at 50% var(--surface),rgba(216,133,14,.92),rgba(216,133,14,0) 68%);
}
.grain{
  /* Film greyn'li, hesaplanan dolgu pürüzsüz; ortak bir doku ikisinin
     birleştiği yeri görünmez kılıyor. */
  position:absolute;inset:0;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  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='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 92% at 50% 46%,transparent 52%,rgba(27,31,30,.16));
}

/* ölçüm donanımı */
.rig{position:absolute;inset:0;pointer-events:none;z-index:2}
.rig i{position:absolute;display:block;background:var(--rule)}
.rule{height:1px;top:var(--surface)}
.rule-l{left:var(--pad);width:clamp(60px,12vw,160px)}
.rule-r{right:var(--pad);width:clamp(60px,12vw,160px)}
.ruler{
  width:1px;left:calc(var(--pad) + clamp(60px,12vw,160px) + 26px);
  top:var(--release);height:calc(var(--surface) - var(--release));
}
.tick{
  width:15px;height:1px;background:var(--rule);
  left:calc(var(--pad) + clamp(60px,12vw,160px) + 19px);
}
.tick-top{top:var(--release)}
.tick-bot{top:var(--surface)}
.mark{
  width:27px;height:1px;background:var(--graphite);
  left:calc(var(--pad) + clamp(60px,12vw,160px) + 13px);
  top:var(--release);
}

/* telemetri */
.rail{
  position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);
  width:174px;font-family:var(--font-mono);z-index:4;
  border-left:1px solid var(--rule);padding-left:18px;
}
.rail-phase{font-size:10px;letter-spacing:.24em;color:var(--slate);margin-bottom:22px}
.rail-phase b{font-weight:500;color:var(--graphite)}
.rail dl{margin:0}
.rail .row{padding:9px 0;border-bottom:1px solid rgba(142,154,151,.55)}
.rail dt{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--slate)}
.rail dd{margin:3px 0 0;font-size:19px;font-weight:300;font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;gap:5px}
.rail dd i{font-style:normal;font-size:10px;color:var(--slate)}
.rail .is-peak{opacity:0;transition:opacity .4s}
.rail .is-peak.on{opacity:1}
.rail .is-peak.on dd{color:var(--yolk)}
.rail-note{margin:16px 0 0;font-size:9.5px;letter-spacing:.14em;color:var(--slate);text-transform:uppercase}

/* metin */
.chapters{position:absolute;inset:0;pointer-events:none;z-index:5}
.ch{position:absolute;opacity:0;will-change:transform,opacity;max-width:min(480px,42vw)}
.ch h1,.ch h2{
  font-family:var(--font-display);font-weight:750;
  font-size:clamp(38px,5.4vw,76px);line-height:.94;letter-spacing:-.035em;
  margin:0 0 20px;text-wrap:balance;
}
.ch h2{font-size:clamp(32px,4.2vw,58px)}
.ch p{margin:0;font-size:clamp(15px,1.15vw,17px);line-height:1.55;color:#333A38;max-width:38ch}
.eyebrow{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--slate);margin:0 0 22px !important;
}
.lede{margin-top:4px !important}

.ch1{left:var(--pad);top:50%;transform:translateY(-50%);max-width:min(620px,52vw)}
.ch2{right:calc(var(--pad) + 210px);top:20%}
.ch3{left:var(--pad);bottom:15%}
.ch4{right:calc(var(--pad) + 210px);top:19%}
.ch5{left:var(--pad);bottom:15%}

.hint{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--slate);margin-top:44px !important;
  display:flex;align-items:center;gap:10px;
}
.hint span{display:inline-block;animation:nudge 1.9s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(6px);opacity:1}}

.replay{
  pointer-events:auto;margin-top:30px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  background:none;border:1px solid var(--graphite);color:var(--graphite);
  padding:13px 24px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s;
}
.replay:hover,.replay:focus-visible{background:var(--graphite);color:var(--ground)}
:focus-visible{outline:2px solid var(--graphite);outline-offset:3px}

/* yükleme */
.loader{
  position:absolute;inset:0;z-index:9;background:var(--ground);
  display:grid;place-content:center;gap:14px;justify-items:center;
  transition:opacity .6s ease;
}
.loader.done{opacity:0;pointer-events:none}
.loader p{
  margin:0;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--slate);
}
.loader-bar{width:180px;height:1px;background:rgba(142,154,151,.5)}
.loader-bar i{display:block;height:100%;width:0;background:var(--graphite)}

@media (max-width:900px){
  .track{height:700vh}
  .rail{
    top:auto;bottom:calc(var(--pad) - 4px);right:var(--pad);left:var(--pad);
    transform:none;width:auto;border-left:0;border-top:1px solid var(--rule);
    padding:12px 0 0;display:flex;justify-content:space-between;align-items:flex-end;
  }
  .rail-phase{margin:0;align-self:center}
  .rail dl{display:flex;gap:18px}
  .rail .row{border-bottom:0;padding:0}
  .rail dd{font-size:15px}
  .rail-note{display:none}
  .ch,.ch1{max-width:none;left:var(--pad);right:var(--pad);top:auto;bottom:26%;transform:none}
  .ch p{max-width:32ch}
  .replay{margin-top:20px;padding:11px 20px}
  .rig .ruler,.rig .tick,.rig .mark{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hint span{animation:none}
}