/* ============================================================================
   RADIO DAD · SITE V2 · v2.css — taban + ilkeller
   Kural: renk yalnız tokens.css'ten; yeni hex bu dosyada YASAK (token-guard
   v2 portu bunu denetleyecek). Hareket yalnız "settle" ailesinden.
   ========================================================================== */

@font-face { font-family: "Fraunces"; src: url("../fonts/Fraunces.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "InterVariable"; src: url("../fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap; }

* { box-sizing: border-box; }
html { background: var(--n0); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--n0); color: var(--ink);
  font-family: var(--sans); font-size: var(--fs-body); line-height: 1.6;
  -webkit-font-smoothing: antialiased; }

/* ---- paspartu + yayın kartı (kenar parası) ------------------------------ */
.mat  { padding: var(--mat); }
.broadcast { background: var(--n1); border: 1px solid var(--hair-2);
  border-radius: var(--r-card); position: relative;
  /* Köşe kırpması clip-path ile, overflow ile DEĞİL. overflow:hidden sticky'yi
     öldürür; overflow:clip Chromium'da yaşatır ama WebKit'te sticky'nin
     İSABET HARİTASINI kaydırır (görsel doğru, tıklama düzen konumunda kalır;
     ölçüldü 2026-08-17: npPlay rect y=1234, elementFromPoint=null, dokunuş
     .beat'e gitti — Safari'de kürenin bütün etkileşimi bu yüzden ölüydü).
     clip-path scroll bağlamı da kurmaz, isabet testini de bozmaz. */
  clip-path: inset(0 round var(--r-card)); }

/* ---- tip ---------------------------------------------------------------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.06;
  letter-spacing: var(--track-h2); text-wrap: balance; margin: 0; color: var(--ink); }
.display { font-size: var(--fs-display); font-weight: 550; letter-spacing: var(--track-display); }
h2 { font-size: var(--fs-h2); }
h1 em, h2 em, .display em { font-style: italic; color: var(--ember); font-weight: 500; }
p { margin: 0 0 1em; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-70); }
a { color: var(--ember); text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }
.wrap { max-width: 1140px; margin: 0 auto; padding: 0 clamp(18px, 3.4vw, 40px); }

/* mobilya: frekans, koordinat, ledger */
.mono, .coord, .eyebrow { font-family: var(--mono); font-size: var(--fs-mono);
  letter-spacing: .1em; text-transform: uppercase; }
.eyebrow { color: var(--ink-50); display: block; }
.coord { color: var(--ink-50); }
.coord b { color: var(--ember); font-weight: 600; }

/* ---- ON AIR lambası (gerçek: küre çalarken yanar) ------------------------ */
.onair { display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-50); }
.onair i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-50);
  transition: background var(--settle-t) var(--settle-ease), box-shadow var(--settle-t) var(--settle-ease); }
.onair.live { color: var(--ember); }
.onair.live i { background: var(--ember); box-shadow: 0 0 12px var(--ember-glow); }

/* ---- tek hareket fiili: settle -------------------------------------------
   Gizli durum yalnız html.v2-anim altında kurulur (main script'i sınıfı en
   başta atar); JS yok = her şey görünür. Reveal observer .in ekler. */
.v2-anim .settle { opacity: 0; filter: blur(var(--settle-blur));
  transform: translateX(var(--settle-shift)); }
.v2-anim .settle.in { opacity: 1; filter: blur(0); transform: none;
  transition: opacity var(--settle-t) var(--settle-ease),
              filter var(--settle-t) var(--settle-ease),
              transform var(--settle-t) var(--settle-ease); }
.v2-anim .settle.in.jit { animation: settle-jit .18s var(--settle-ease) 1; }
@keyframes settle-jit { 0% { transform: translateX(-1px); } 60% { transform: translateX(1px); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .v2-anim .settle { opacity: 1 !important; filter: none !important; transform: none !important; }
  .v2-anim .settle.in.jit { animation: none; }
}

/* ---- butonlar ------------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px;
  border-radius: var(--r-pill); font-weight: 600; font-size: 16px;
  text-decoration: none; border: 1px solid var(--hair); color: var(--ink); }
.btn-primary { background: var(--ember-deep); border-color: var(--ember-deep); color: var(--n0); }
.btn:hover { border-color: var(--ink-50); }
.btn-primary:hover { border-color: var(--ember); background: var(--ember); }
.btn, .appstore, .np-spin, .np-play, .bt-opt { transition:
  background-color var(--settle-fast) var(--settle-ease), border-color var(--settle-fast) var(--settle-ease),
  color var(--settle-fast) var(--settle-ease), transform var(--settle-fast) var(--settle-ease); }
.btn:active, .appstore:active, .np-play:active, .np-spin:active, .bt-opt:active { transform: translateY(1px); }

/* ---- perde iskeleti ------------------------------------------------------ */
.act { position: relative; padding: clamp(64px, 10vw, 140px) 0; }
.act-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 28px; }
.act-head .freq { font-family: var(--mono); font-size: var(--fs-mono); color: var(--ember); letter-spacing: .08em; }
.act-head .rule { flex: 1; height: 1px; background: var(--hair); }
.act-head .name { font-family: var(--mono); font-size: var(--fs-mono-sm); letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-50); }
.scene .act-head .name { background: var(--glass); border: 1px solid var(--hair-2);
  border-radius: var(--r-pill); padding: 5px 12px; }

/* tam kanama sahne plakası */
.scene { position: relative; overflow: hidden; }
.scene img.bg, .scene video.bg { position: absolute; inset: 0; width: 100%;
  height: 100%; object-fit: cover; }
.scene .veil { position: absolute; inset: 0; pointer-events: none; }
.v2-anim .scene:not(.hero-scene) .bg { filter: blur(var(--settle-blur)); transform: scale(1.02); }
.v2-anim .scene:not(.hero-scene).in .bg { filter: blur(0); transform: none;
  transition: filter calc(var(--settle-t) * 2) var(--settle-ease), transform calc(var(--settle-t) * 2) var(--settle-ease); }
@media (prefers-reduced-motion: reduce) {
  .v2-anim .scene:not(.hero-scene) .bg { filter: none; transform: none; }
}

/* ==========================================================================
   PERDE 00 · SIGN-ON + HERO (kule sahnesi + Veo loop + dev tipografi)
   ========================================================================== */
.hero-scene { min-height: min(94svh, 900px); display: flex; align-items: stretch; }
.hero-scene .bg { object-position: 72% center; }
.hero-scene .veil { background:
  linear-gradient(100deg, var(--n1) 0%, rgba(22,19,16,.86) 26%, rgba(22,19,16,.45) 52%, rgba(22,19,16,0) 74%); }
.hero-scene .wrap { display: flex; align-items: center; width: 100%; position: relative; z-index: 2; }
.hero-copy { align-self: center; padding: clamp(28px, 5vw, 72px) 0; max-width: 700px; }
.hero-copy .lead { max-width: 44ch; margin: 22px 0 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-coordline { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px 20px; }
/* 721-1100 bandında kopya peçenin dışına taşıyordu; degrade sona kadar tutulur */
@media (max-width: 1100px) and (min-width: 721px) {
  .hero-scene .veil { background:
    linear-gradient(100deg, var(--n1) 0%, rgba(22,19,16,.86) 30%, rgba(22,19,16,.55) 62%, rgba(22,19,16,.35) 100%); }
}
@media (max-width: 720px) {
  /* Portre hero karesi (K2): Dad + fener ust ucte, alt ucte kopya icin sakin
     bosluk; peche eskisi kadar agir olmak zorunda degil. */
  .hero-scene .bg { object-position: 62% top; }   /* poster VE dikey loop ayni kadraj */
  .hero-scene .veil { background: linear-gradient(180deg, rgba(22,19,16,.12) 0%, rgba(22,19,16,.45) 52%, var(--n1) 90%); }
  .hero-scene { min-height: 100svh; }
  .hero-copy { align-self: flex-end; padding-bottom: 32px; }
}

/* App Store rozeti + listen butonu (v1 dilinin v2 hali) */
.appstore { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px;
  border-radius: var(--r-pill); background: var(--ink); color: var(--n0);
  text-decoration: none; font-weight: 600; font-size: 15px; }
.appstore svg { width: 22px; height: 22px; }
.appstore span { display: flex; flex-direction: column; line-height: 1.15; }
.appstore .s { font-size: var(--fs-mono-sm); font-weight: 500; opacity: .75; }

/* sabit ON AIR lambası: yayın kartının köşesinde, gerçek */
.lamp { position: fixed; z-index: 40;
  top: calc(var(--mat) + clamp(14px, 2vw, 24px)); right: calc(var(--mat) + clamp(14px, 2vw, 24px));
  background: var(--glass); border: 1px solid var(--hair); border-radius: var(--r-pill);
  padding: 6px 12px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
@keyframes lamp-warmup { 0% { opacity: .2; } 30% { opacity: 1; } 45% { opacity: .35; } 60% { opacity: 1; } 100% { opacity: 1; } }
.onair.live i { animation: lamp-warmup .5s var(--settle-ease) 1; }

/* hareket anahtarı (WCAG 2.2.2): lambanın altında sessiz bir hap */
.motion-toggle { position: fixed; z-index: 40; top: calc(var(--mat) + clamp(52px, 5vw, 68px)); right: calc(var(--mat) + clamp(14px, 2vw, 24px));
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hair);
  background: var(--glass); color: var(--ink-70); cursor: pointer; display: grid; place-items: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.motion-toggle svg { width: 15px; height: 15px; }
.motion-toggle .mt-play { display: none; }
body.motion-paused .motion-toggle .mt-pause { display: none; }
body.motion-paused .motion-toggle .mt-play { display: block; }
/* 720px alti: cipler cam degil KATI zemin (altlarindan gecen metin cam
   karisimiyla okunmaz olmasin) ve scroll basladiktan sonra KUCULUR (furl):
   lamba noktaya iner, anahtar 28px'e. Olculdu 2026-08-24: eski halde 30
   cakisma, biri primary CTA'nin ustunde. Durum noktasi hep gorunur kalir. */
@media (max-width: 720px) {
  .lamp, .motion-toggle { background: var(--n0); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .lamp { transition: padding var(--settle-fast) var(--settle-ease); }
  .motion-toggle { transition: width var(--settle-fast) var(--settle-ease),
    height var(--settle-fast) var(--settle-ease), opacity var(--settle-fast) var(--settle-ease),
    top var(--settle-fast) var(--settle-ease); }
  body.furled .lamp { padding: 6px; }
  body.furled .lamp #onairTxt { position: absolute; width: 1px; height: 1px;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
  body.furled .motion-toggle { width: 28px; height: 28px; opacity: .85; top: calc(var(--mat) + 46px); }
  body.furled .motion-toggle svg { width: 12px; height: 12px; }
}
@media (prefers-reduced-motion: reduce) { .lamp, .motion-toggle { transition: none; } }

/* ==========================================================================
   PERDE 01 · TUNE (sticky küre + scroll vuruşları + manifesto)
   ========================================================================== */
.tune-track { position: relative; }
.tune-stage { position: sticky; top: 0; min-height: 100svh; display: grid;
  align-content: center; justify-items: center; overflow: hidden; padding: 24px 0; }
.globe-stage { transition: transform .9s var(--settle-ease), opacity .9s var(--settle-ease); }
.tune-track[data-beat="0"] .globe-stage { transform: translateX(7%); }
.tune-track[data-beat="1"] .globe-stage { transform: translateX(-7%); }
.tune-track[data-beat="2"] .globe-stage { transform: translateX(7%); }
.tune-track[data-beat="3"] .globe-stage { opacity: .26; transform: scale(.96); }
/* Manifesto vurusunda konsol da cekilir: siir plakanin ustune boyaniyordu ve
   gorunen play dugmesine dokunus siire gidiyordu (elementFromPoint ile olculdu
   2026-08-24). Ses calmaya devam eder; plaka yalniz gorunmez ve tiklanamaz olur. */
.tune-track[data-beat="3"] .console { opacity: .1; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .tune-track .globe-stage { transform: none !important; opacity: 1 !important; }
  .cx-needle { transition: none; } }
body.motion-paused .globe-stage { transition: none; }
body.motion-paused .cx-needle.jit { animation: none; }
.tune-beats { position: relative; z-index: 5; margin-top: -100svh;
  /* Vuruş şeridi sahnenin ÜSTÜNE biner (negatif marj + z-index). Şeffaf
     .beat kutuları tam ekrandır ve isabet testinde konsolu/küreyi YUTAR:
     gerçek tıklama play'e hiç ulaşmaz (ölçüldü 2026-08-17, dokunuş .beat'e
     gitti; "radyolar çalmıyor" raporunun kökü). Şerit tıklamaya şeffaf,
     yalnız kartların kendisi etkileşimli. */
  pointer-events: none; }
.beat-card { pointer-events: auto; }
/* .mani kutusu tam ekrandir; auto olsaydi siir konsolun tiklamasini yutar.
   Etkilesim yalniz metnin kendi satirlarinda. */
.mani { pointer-events: none; }
.mani .w, .mani .sub { pointer-events: auto; }
.beat { min-height: 100svh; display: flex; align-items: center; }
.beat:nth-child(2) .beat-card { margin-left: auto; margin-right: clamp(18px, 6vw, 84px); }
.beat-card { margin-left: clamp(18px, 6vw, 84px); max-width: 380px;
  background: var(--glass); border: 1px solid var(--hair);
  border-radius: var(--r-plate); padding: 22px 24px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.beat-card .coord { display: block; margin-bottom: 10px; }
.beat-card .bh { font-size: clamp(22px, 2.6vw, 28px); }
.beat-card p { margin: 10px 0 0; font-size: 15px; color: var(--ink-70); }
.beat-card .bstn { margin: 12px 0 0; font-family: var(--mono); font-size: var(--fs-mono-sm);
  letter-spacing: .08em; text-transform: uppercase; color: var(--ember); min-height: 1.2em; }
.beat-mani { min-height: 110svh; }
.beat-mani .mani { margin-inline: auto; text-align: center; max-width: 700px; padding: 0 20px; }
.mani .sub { margin-top: 18px; }
.mani .poem { font-family: var(--serif); font-weight: 500; margin: 0;
  font-size: clamp(21px, 3vw, 34px); line-height: 1.5; letter-spacing: -.015em; }
.mani .poem .w { display: block; }
.mani .poem em { font-style: italic; color: var(--ember); }
.dadline-in { font-family: var(--serif); font-style: italic; font-size: clamp(16px, 1.9vw, 20px);
  color: var(--ink-70); margin: 0; }
.rules-ledger { list-style: none; margin: 26px 0; padding: 0; display: grid; gap: 12px; max-width: 640px; }
.rules-ledger li { font-size: 15.5px; color: var(--ink-70); display: grid;
  grid-template-columns: 64px 1fr; gap: 14px; align-items: baseline; }
.rules-ledger b { font-family: var(--mono); font-size: var(--fs-mono-sm); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ember); font-weight: 700; }
.v2-anim .mani .w { display: inline-block; opacity: 0; filter: blur(var(--settle-blur)); transform: translateY(12px); }
.v2-anim .mani.in .w { opacity: 1; filter: blur(0); transform: none;
  transition: opacity .5s var(--settle-ease) calc(var(--wi) * 90ms),
              filter .5s var(--settle-ease) calc(var(--wi) * 90ms),
              transform .5s var(--settle-ease) calc(var(--wi) * 90ms); }
@media (prefers-reduced-motion: reduce) {
  .v2-anim .mani .w { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
  .tune-stage { position: relative; min-height: 0; }
  .tune-beats { margin-top: 0; }
  .beat { min-height: 0; padding: 40px 0; }
  /* RM'de sahne sticky degil: bindirme yok, konsol her vurusta gorunur kalir */
  .tune-track[data-beat="3"] .console { opacity: 1; pointer-events: auto; }
}
@media (max-width: 720px) {
  .beat-card { margin-inline: auto !important; }
}

/* ---- küre sahnesi (v1 motorunun v2 kostümü) ------------------------------ */
.globe-stage { position: relative; width: min(640px, 92vw, calc(100svh - 220px)); aspect-ratio: 1; }
.globe-stage::before { content: ""; position: absolute; inset: -5%; border-radius: 50%;
  background: radial-gradient(circle at 50% 44%, var(--halo), transparent 66%);
  filter: blur(8px); pointer-events: none; }
.globe-sphere { position: absolute; inset: 1.5%; border-radius: 50%;
  background: radial-gradient(circle at 37% 30%, var(--sphere-1), var(--sphere-2) 56%, var(--sphere-3) 100%);
  box-shadow: inset -24px -30px 70px rgba(0,0,0,.45), 0 50px 90px -40px rgba(0,0,0,.6); }
.globe-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.globe-canvas.grabbing { cursor: grabbing; }
.globe-stage .reticle { position: absolute; z-index: 4; top: 50%; left: 50%; width: 72px; height: 72px;
  transform: translate(-50%, -50%); color: var(--ink); pointer-events: none; }
.globe-stage .reticle svg { width: 100%; height: 100%; filter: drop-shadow(0 1px 6px rgba(0,0,0,.6));
  transition: transform var(--settle-t) var(--settle-ease), color var(--settle-t) var(--settle-ease); }
.globe-canvas.grabbing ~ .reticle svg { transform: scale(.93); color: var(--ember); }
.globe-hint { position: absolute; z-index: 5; top: -4px; left: 50%; transform: translateX(-50%);
  pointer-events: none; font-family: var(--mono); font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink); white-space: nowrap;
  background: var(--glass); border: 1px solid var(--hair); padding: 7px 14px; border-radius: var(--r-pill);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: opacity .6s ease; }
.globe-hint.done { opacity: 0; visibility: hidden; }
.globe-aim { position: absolute; z-index: 5; top: -8px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 180px; max-width: 86%;
  padding: 9px 18px 8px; border-radius: 14px; text-align: center;
  background: var(--glass); border: 1px solid var(--hair);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transition: opacity .6s ease .25s; pointer-events: none; }
.globe-aim.on { opacity: 1; visibility: visible; }
.globe-aim.on.dup { opacity: 0; visibility: hidden; }
.globe-aim strong { font-family: var(--serif); font-weight: 600; font-size: 1.02rem; color: var(--ink);
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.globe-aim span { font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-70); }

/* ---- RADYO KONSOLU (v2'nin kendi tuner'ı) --------------------------------
   Sahte MHz yok: ibrenin konumu çalan istasyonun BOYLAMI (W → E). Kadran
   dünyanın kendisidir. Aynı id'ler home.js'i sürdürür. */
.console { position: absolute; left: 50%; transform: translateX(-50%); bottom: 4%;
  z-index: 6; display: flex; align-items: center; gap: 14px;
  background: linear-gradient(180deg, var(--n3), var(--n2));
  border: 1px solid var(--hair); border-radius: 14px 14px 18px 18px;
  padding: 12px 14px; min-width: min(420px, 92%);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.75), inset 0 1px 0 var(--hair-2);
  transition: opacity .5s var(--settle-ease); }
.cx-dial { display: flex; align-items: center; gap: 8px; flex: none; width: 96px; }
.cx-dial .cx-w, .cx-dial .cx-e { font-family: var(--mono); font-size: var(--fs-mono-sm); color: var(--ink-35); }
.cx-ruler { position: relative; flex: 1; height: 22px; border-radius: 4px;
  background: repeating-linear-gradient(90deg, var(--hair) 0 1px, transparent 1px 7px);
  border: 1px solid var(--hair-2); }
.cx-needle.jit { animation: needle-lock .18s var(--settle-ease) 1; }
@keyframes needle-lock { 0% { opacity: .3; } 60% { opacity: 1; } 80% { opacity: .55; } 100% { opacity: 1; } }
.cx-needle { position: absolute; top: -3px; bottom: -3px; left: 50%; width: 2px;
  background: var(--ember); box-shadow: 0 0 8px var(--ember-glow);
  transition: left 1.1s var(--settle-ease); }
.np-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.np-meta strong { font-family: var(--serif); font-size: 1.02rem; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 20ch; }
.np-meta small { font-size: .76rem; color: var(--ink-50);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 25ch; }
.np-live { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: .56rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-50); }
.np-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-50); }
.np-eq { display: none; align-items: flex-end; gap: 2px; height: 9px; margin-left: 3px; }
.np-eq b { width: 2px; height: 100%; background: var(--ember); border-radius: 1px;
  transform: scaleY(.4); transform-origin: 50% 100%; }
/* eqbar/lamp-pulse yalniz CALARKEN oynar: isaret sesi izler (app'in playback-claim
   kuralinin web ikizi). RM altinda app gibi donmus seviye kapsullerine duser. */
@keyframes eqbar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@keyframes lamp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.console.playing .np-eq b { animation: eqbar .9s ease-in-out infinite; }
.console.playing .np-eq b:nth-child(2) { animation-delay: .18s; }
.console.playing .np-eq b:nth-child(3) { animation-delay: .36s; }
.console.playing .np-eq b:nth-child(4) { animation-delay: .54s; }
@media (prefers-reduced-motion: reduce) {
  .console.playing .np-eq b { animation: none; }
  .console.playing .np-eq b:nth-child(1) { transform: scaleY(.55); }
  .console.playing .np-eq b:nth-child(2) { transform: scaleY(.9); }
  .console.playing .np-eq b:nth-child(3) { transform: scaleY(.45); }
  .console.playing .np-eq b:nth-child(4) { transform: scaleY(.75); }
  .console.playing .np-live i { animation: none; }
}
body.motion-paused .np-eq b, body.motion-paused .np-live i { animation-play-state: paused; }
.np-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.np-spin, .np-play { width: 44px; height: 44px; border: 0; padding: 0; cursor: pointer; border-radius: 50%;
  display: grid; place-items: center; }
.np-spin { background: transparent; border: 1px solid var(--hair); color: var(--ink-70); }
.np-play { background: var(--ember-deep); color: var(--n0); }
.np-play:hover { background: var(--ember); }
.np-spin svg, .np-play svg { width: 18px; height: 18px; }
.np-play .np-ic-pause { display: none; }
.console.playing .np-play .np-ic-play { display: none; }
.console.playing .np-play .np-ic-pause { display: block; }
/* Canlilik tek ailede (karar 2026-08-24): calan konsol lambayla ayni ember'i
   giyer, DEMO durumu ink'e duser. Ember yalniz gercekten yayindayken yanar. */
.console.playing { border-color: color-mix(in srgb, var(--ember) 34%, transparent); }
.console.playing .np-live { color: var(--ember); }
.console.playing .np-live i { background: var(--ember); animation: lamp-pulse 2s infinite; }
.console.playing .np-eq { display: inline-flex; }
@media (max-width: 720px) { .console { position: relative; left: auto; bottom: auto;
  transform: none; margin: -6% auto 0; width: min(96%, 420px); z-index: 6; } }

/* ==========================================================================
   SEAM: perdeler arası FM cetveli dikişi
   ========================================================================== */
.seam { display: flex; align-items: center; gap: 16px; padding: 26px clamp(18px, 4vw, 44px); }
.seam .sf { font-family: var(--mono); font-size: var(--fs-mono); color: var(--ember); letter-spacing: .08em; }
.seam .sr { position: relative; flex: 1; height: 14px;
  background: repeating-linear-gradient(90deg, var(--hair) 0 1px, transparent 1px 12px),
              repeating-linear-gradient(90deg, var(--hair-2) 0 1px, transparent 1px 4px);
  background-position: calc(var(--seam-p, 0) * 96px) 0, calc(var(--seam-p, 0) * 48px) 0;
  mask: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  -webkit-mask: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); }
.seam .sr::after { content: ""; position: absolute; top: -3px; bottom: -3px;
  left: calc(var(--f, .5) * 100%); width: 2px; background: var(--ember);
  box-shadow: 0 0 8px var(--ember-glow); }

/* ==========================================================================
   PERDE 02 · THE INTERPRETER
   ========================================================================== */
.interp { min-height: 92svh; display: flex; align-items: center; }
/* captions3 sahnesi hero grade'inde: ilk kare ancak .68 opaklikta oturuyordu,
   yenisi .85'te tek veil ile yasar (K3). captions2 regen'lendi: arkadan bakista
   biyik tek yanakta tek kivrim gibi okunuyordu (sahip: "biyik yamuk", 2026-08-24);
   c3 adayi profilden, kivrim kanonla birebir. */
.interp .bg { object-position: 70% 40%; opacity: .85; }
.interp .veil { background:
  linear-gradient(96deg, var(--n1) 0%, rgba(22,19,16,.9) 36%, rgba(22,19,16,.46) 66%, rgba(22,19,16,.42) 100%),
  linear-gradient(180deg, var(--n1) 0%, transparent 14%, transparent 86%, var(--n1) 100%);
  background:
  linear-gradient(96deg, var(--n1) 0%, color-mix(in srgb, var(--n1) 90%, transparent) 36%, color-mix(in srgb, var(--n1) 46%, transparent) 66%, color-mix(in srgb, var(--n1) 42%, transparent) 100%),
  linear-gradient(180deg, var(--n1) 0%, transparent 14%, transparent 86%, var(--n1) 100%); }
@media (max-width: 720px) {
  .interp .veil { background: linear-gradient(180deg, var(--n1) 0%, rgba(22,19,16,.6) 30%, var(--n1) 92%); }
}
.interp-wrap { position: relative; z-index: 2; width: 100%; }
.interp-wrap > .coord { margin-top: 28px; display: inline-block; }
.subtitle-card { margin-top: 34px; max-width: 720px; background: var(--glass);
  border: 1px solid var(--hair); border-radius: var(--r-plate);
  padding: clamp(22px, 3.4vw, 36px);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.st-src { font-family: var(--serif); font-weight: 550; font-size: clamp(21px, 3vw, 30px);
  line-height: 1.3; margin: 0; min-height: 2.6em; }
.st-src .caret { display: inline-block; width: 2px; height: 1em; background: var(--ember);
  margin-left: 3px; vertical-align: -2px; animation: caret-blink 1s steps(1) infinite; }
.st-dst { margin: 14px 0 0; font-size: clamp(15px, 1.8vw, 18px); color: var(--ink-70); }
.st-chips { display: flex; align-items: center; gap: 10px; margin: 20px 0 0; }
.st-chips span { font-family: var(--mono); font-size: var(--fs-mono-sm); letter-spacing: .1em;
  border: 1px solid var(--hair); border-radius: var(--r-pill); padding: 4px 12px; color: var(--ink-70); }
.st-chips svg { width: 15px; height: 15px; color: var(--ember); }
.st-chips em { font-family: var(--mono); font-style: normal; font-size: var(--fs-mono-sm);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-50); margin-left: auto; }
@keyframes caret-blink { 50% { opacity: 0; } }
body.motion-paused .st-src .caret { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .st-src .caret { display: none; } }

/* ==========================================================================
   PERDE 03 · THE KEEPER: arşiv duvarı sahnesi + pinli artefaktlar
   ========================================================================== */
.keeper { min-height: 96svh; display: flex; align-items: center; }
.keeper .bg { object-position: 78% center; }
.keeper .veil { background:
  linear-gradient(96deg, var(--n1) 0%, rgba(22,19,16,.88) 30%, rgba(22,19,16,.55) 60%, transparent 100%),
  linear-gradient(180deg, var(--n1) 0%, transparent 16%, transparent 84%, var(--n1) 100%);
  background:
  linear-gradient(96deg, var(--n1) 0%, color-mix(in srgb, var(--n1) 88%, transparent) 30%, color-mix(in srgb, var(--n1) 55%, transparent) 60%, transparent 100%),
  linear-gradient(180deg, var(--n1) 0%, transparent 16%, transparent 84%, var(--n1) 100%); }
.keeper-wrap { position: relative; z-index: 2; width: 100%; }
.pins { margin-top: 30px; display: flex; flex-direction: column; gap: 18px; max-width: 380px; }
.keeper-wrap > .coord { display: inline-block; max-width: 52ch; line-height: 1.9;
  background: rgba(22,19,16,.72);
  background: color-mix(in srgb, var(--n1) 72%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--hair-2); border-radius: 10px; padding: 10px 14px;
  color: var(--ink-70); }
.pin { position: relative; margin: 0; background: var(--n2); border: 1px solid var(--hair);
  border-radius: 8px; padding: 16px 18px 14px;
  box-shadow: 0 24px 48px -26px rgba(0,0,0,.85); }
.pindot { position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, var(--ember), var(--ember-deep));
  box-shadow: 0 2px 5px rgba(0,0,0,.6); }
.ticket2 { transform: rotate(-1.4deg); display: flex; flex-direction: column; gap: 5px;
  -webkit-mask: radial-gradient(circle 7px at 0 62%, transparent 7px, black 7.5px),
                radial-gradient(circle 7px at 100% 62%, transparent 7px, black 7.5px);
  -webkit-mask-composite: source-in;
          mask: radial-gradient(circle 7px at 0 62%, transparent 7px, black 7.5px),
                radial-gradient(circle 7px at 100% 62%, transparent 7px, black 7.5px);
          mask-composite: intersect; }
.ticket2 strong { font-family: var(--serif); font-size: 1.2rem; color: var(--ink); }
.tk2-artist { font-size: .9rem; color: var(--ink-70); }
.tk2-foot { margin-top: 6px; }
.lyric2 { transform: rotate(1deg); }
.lyric2 .ly-src { font-family: var(--serif); font-style: italic; font-size: 1.08rem; margin: 2px 0 0; color: var(--ink); }
.lyric2 .ly-dst { margin: 4px 0 0; font-size: .92rem; color: var(--ink-70); }
@media (max-width: 720px) {
  .keeper .veil { background: linear-gradient(180deg, var(--n1) 0%, rgba(22,19,16,.55) 30%, var(--n1) 92%); }
}

/* ==========================================================================
   PERDE 04 · THE SIMULCAST: gece sürüşü + set defteri
   ========================================================================== */
.simulcast { min-height: 96svh; display: flex; align-items: center; }
.simulcast .bg { object-position: 30% center; }
.simulcast .veil { background:
  linear-gradient(276deg, var(--n1) 0%, rgba(22,19,16,.86) 32%, rgba(22,19,16,.45) 62%, transparent 100%),
  linear-gradient(180deg, var(--n1) 0%, transparent 16%, transparent 84%, var(--n1) 100%);
  background:
  linear-gradient(276deg, var(--n1) 0%, color-mix(in srgb, var(--n1) 86%, transparent) 32%, color-mix(in srgb, var(--n1) 45%, transparent) 62%, transparent 100%),
  linear-gradient(180deg, var(--n1) 0%, transparent 16%, transparent 84%, var(--n1) 100%); }
/* Tek sutun: sagdaki telefon karesi 2026-09-02'de kaldirildi (sahip: "sacma duruyor"). */
.sim-wrap { position: relative; z-index: 2; width: 100%; display: grid;
  grid-template-columns: 1fr; gap: 24px 40px; align-items: center; }
.sim-wrap .act-head, .sim-wrap h2, .sim-wrap .lead { grid-column: 1; }
.sim-wrap h2, .sim-wrap .lead { margin-left: auto; text-align: right; }
.sim-wrap .act-head { justify-content: flex-end; }
.setledger { grid-column: 1; margin-top: 8px; max-width: 460px; margin-left: auto;
  display: grid; gap: 11px; width: 100%;
  background: rgba(22,19,16,.66);
  background: color-mix(in srgb, var(--n1) 66%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--hair-2); border-radius: var(--r-plate);
  padding: clamp(16px, 2.4vw, 24px); }
.sl-row { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.sl-k { flex: none; font-family: var(--mono); font-size: var(--fs-mono-sm); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ember); min-width: 72px; }
.sl-d { flex: 1; border-bottom: 1px dotted var(--hair); transform: translateY(-4px); }
.sl-v { font-size: 14.5px; color: var(--ink); text-align: right; }
@media (max-width: 860px) {
  .sim-wrap { grid-template-columns: 1fr; }
  .sim-wrap h2, .sim-wrap .lead, .setledger { margin-left: 0; text-align: left; }
  .sim-wrap .act-head { justify-content: flex-start; }
  .sl-v { text-align: right; }
  .simulcast .veil { background: linear-gradient(180deg, var(--n1) 0%, rgba(22,19,16,.55) 30%, var(--n1) 92%); }
}

/* ==========================================================================
   PERDE 04B · THE LATE PROGRAMS: akisin kalani, uyku sahnesinde
   ========================================================================== */
.latep { min-height: 88svh; display: flex; align-items: center; }
.latep .bg { object-position: 78% center; }
.latep .veil { background:
  linear-gradient(96deg, var(--n1) 0%, rgba(22,19,16,.88) 34%, rgba(22,19,16,.5) 70%, rgba(22,19,16,.55) 100%),
  linear-gradient(180deg, var(--n1) 0%, transparent 16%, transparent 84%, var(--n1) 100%);
  background:
  linear-gradient(96deg, var(--n1) 0%, color-mix(in srgb, var(--n1) 88%, transparent) 34%, color-mix(in srgb, var(--n1) 50%, transparent) 70%, color-mix(in srgb, var(--n1) 55%, transparent) 100%),
  linear-gradient(180deg, var(--n1) 0%, transparent 16%, transparent 84%, var(--n1) 100%); }
.latep-wrap { position: relative; z-index: 2; width: 100%; }
.latep .setledger { margin-left: 0; max-width: 560px; }
@media (max-width: 720px) {
  .latep .veil { background: linear-gradient(180deg, var(--n1) 0%, rgba(22,19,16,.55) 30%, var(--n1) 92%); }
}

/* ==========================================================================
   PERDE 05 · HOUSE RULES + PLANS
   ========================================================================== */
.monolith { margin-top: 10px; padding: clamp(30px, 5vw, 56px) clamp(22px, 4vw, 44px);
  background: var(--n2); border: 1px solid var(--hair); border-radius: var(--r-plate);
  text-align: center; }
.mono-big { font-family: var(--serif); font-weight: 600; margin: 0;
  font-size: clamp(28px, 4.6vw, 54px); letter-spacing: var(--track-h2); color: var(--ink); }
.mono-sub { margin: 16px 0 0; font-size: 15.5px; color: var(--ink-70); }
.plans2 { display: grid; grid-template-columns: 1fr 1.2fr; gap: 0; margin-top: 28px;
  align-items: stretch; border: 1px solid var(--hair); border-radius: var(--r-plate);
  background: var(--n2); overflow: hidden; }
.freeset { border-right: 1px solid var(--hair-2); padding: 26px;
  display: flex; flex-direction: column; }
.fs-list { list-style: none; margin: auto 0; padding: 14px 0; display: grid; gap: 10px; }
.fs-ledger { margin: 14px 0 0; color: var(--ink-35); }
.fs-list li { font-size: 15px; color: var(--ink-70); padding-left: 18px; position: relative; }
.fs-list li::before { content: "·"; position: absolute; left: 2px; color: var(--ember); font-weight: 700; }
.fs-cta { margin-top: 20px; }
.fs-cta a { color: var(--ember); text-decoration: none; }
.fs-cta a:hover { text-decoration: underline; }
.plan.featured { padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.bill-row { display: inline-flex; gap: 6px; background: var(--n1); border: 1px solid var(--hair-2);
  border-radius: var(--r-pill); padding: 4px; width: max-content; }
.bt-opt { border: 0; background: transparent; color: var(--ink-70); font-family: var(--sans);
  font-size: var(--fs-mono); font-weight: 600; padding: 7px 16px; border-radius: var(--r-pill); cursor: pointer; }
.bt-opt.is-on { background: var(--ember-deep); color: var(--n0); }
.price { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 3.6vw, 42px); color: var(--ink); }
.price small { font-size: .45em; color: var(--ink-50); font-weight: 500; }
.plan.featured[data-bill="year"] .bill-m { display: none; }
.plan.featured[data-bill="month"] .bill-y { display: none; }
.pr-list { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 9px; }
.pr-list li { font-size: 15px; color: var(--ink-70); padding-left: 18px; position: relative; }
.pr-list li::before { content: "+"; position: absolute; left: 0; color: var(--ember); font-weight: 700; }
.plan-honest2 { margin: 4px 0 0; font-size: var(--fs-mono); color: var(--ink-50); }
@media (max-width: 860px) { .plans2 { grid-template-columns: 1fr; }
  .freeset { border-right: 0; border-bottom: 1px solid var(--hair-2); } }

/* ==========================================================================
   PERDE 06 · SIGN-OFF + COLOPHON
   ========================================================================== */
.signoff { min-height: 92svh; display: flex; align-items: flex-end; }
.signoff .bg { object-position: center 38%; }
.signoff .veil { background: linear-gradient(180deg, var(--n1) 0%, rgba(22,19,16,.25) 34%, rgba(22,19,16,.88) 88%); }
.so-wrap { position: relative; z-index: 2; padding-bottom: clamp(44px, 8vw, 90px); }
.so-wrap .display { font-size: clamp(34px, 5vw, 72px); }
/* Resmi rozet (K7): tarayan gazetecinin aradigi kanonik isaret, butonlarin
   altinda sessizce. Apple'in kendi SVG'si, oldugu gibi. */
.so-badge { margin: 20px 0 0; }
.so-badge img { height: 44px; width: auto; display: block; }
.colophon { background: var(--n0); padding: clamp(40px, 6vw, 70px) 0 60px; }
.colophon .coord { display: block; text-align: center; margin: 0 0 14px; }
.colophon .coord.dadline { color: var(--ember); }
.colophon .links a { color: var(--ink-50); text-decoration: none; }
.colophon .links a:hover { color: var(--ember); }

[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus-visible { position: fixed; top: 12px; left: 12px; z-index: 50;
  background: var(--n3); color: var(--ink); padding: 10px 16px; border-radius: var(--r-pill);
  text-decoration: none; border: 1px solid var(--hair); }

/* ==========================================================================
   MOBIL SAHNE KADRAJI (2026-08-24)
   16:9 bir kare object-fit:cover ile 390px'lik bir telefona oturunca genisligin
   yalnizca %29'u gorunuyordu: her kompozisyonun ucte ikisi kirpiliyor, sahne
   turuncu bir lekeye doniyordu (sahip: "resimler mobilde kesik"). Her perde
   artik kendi 9:16 kadrajini aliyor (picture + media), o yuzden object-position
   merkeze doner: kirpacak fazlalik kalmadi.
   ========================================================================== */
@media (max-width: 720px) {
  .interp .bg, .keeper .bg, .simulcast .bg, .latep .bg, .signoff .bg { object-position: center; }
  /* Perde adi hapi sag kenarda duruyordu ve sabit lamba/anahtar ciplerinin tam
     altina denk geliyordu (olculdu: THE LATE PROGRAMS ve THE HOUSE RULES
     kirpiliyordu). Mobilde ad frekansin yanina gecer, cetvel arkada kalir:
     carpisacak bir sey kalmaz, okuma yonu de dogal. */
  .act-head { flex-wrap: nowrap; }
  .act-head .freq { order: 1; }
  .act-head .name { order: 2; }
  .act-head .rule { order: 3; }
  /* Portre kareler kopya icin sakin bir bolge tasiyor, o yuzden pece hafifler:
     sahne gorunur olur ama metin hala kremin uzerinde okunur kalir. */
  .interp .veil { background: linear-gradient(180deg, var(--n1) 0%, rgba(22,19,16,.52) 34%, rgba(22,19,16,.72) 74%, var(--n1) 96%); }
  .keeper .veil { background: linear-gradient(180deg, var(--n1) 0%, rgba(22,19,16,.5) 30%, rgba(22,19,16,.74) 72%, var(--n1) 96%); }
  .simulcast .veil { background: linear-gradient(180deg, rgba(22,19,16,.55) 0%, rgba(22,19,16,.5) 32%, rgba(22,19,16,.78) 74%, var(--n1) 96%); }
  .latep .veil { background: linear-gradient(180deg, var(--n1) 0%, rgba(22,19,16,.5) 30%, rgba(22,19,16,.74) 72%, var(--n1) 96%); }
  .signoff .veil { background: linear-gradient(180deg, rgba(22,19,16,.35) 0%, rgba(22,19,16,.58) 44%, rgba(22,19,16,.9) 88%); }
}

/* ---- film greni (v1'den; çok hafif) -------------------------------------- */
.grain::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9;
  opacity: .04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: no-preference) { /* gren statiktir; sorun yok */ }