/* ==========================================================================
   Kursi Produser: proposal investasi Sociopictures
   Konsep: proposal ini diputar, bukan dibaca. Leader, slate, naskah, layar.
   ========================================================================== */

:root {
  /* dasar */
  --black: #000;
  --light: #f2eee6;          /* cahaya proyektor di layar */
  --light-2: rgba(242, 238, 230, .74);
  --light-3: rgba(242, 238, 230, .6);   /* 6,5:1 di atas hitam, dipakai sampai 11px */
  --line: rgba(242, 238, 230, .16);
  --line-2: rgba(242, 238, 230, .08);
  --gold: #c9a24b;           /* emas Sociopictures */
  --gold-hi: #e8c874;
  --rec: #e3241b;            /* lampu REC: hanya untuk Rekaman 401 dan status langsung */
  --paper: #ffffff;          /* kertas naskah */
  --classroom: #f2f2f2;      /* kertas Masterclass (sama dengan situsnya) */
  --oxblood: #891a20;        /* aksen Masterclass */
  --steel: #8c8a85;
  --bezel: #232323;          /* bingkai monitor */

  /* warna lini bisnis (tervalidasi untuk grafik di latar gelap) */
  --s-jasa: #a8842f;
  --s-kelas: #22a07c;
  --s-film: #d43a2f;
  --s-lab: #4a8fe0;

  --f-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-script: "Courier Prime", "Courier New", Courier, monospace;

  --gutter: clamp(16px, 4vw, 48px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --bar-h: 52px;
}

*, *::before, *::after { box-sizing: border-box; }
/* tanpa scroll-behavior: smooth: aturan itu membuat ScrollTrigger salah ukur saat refresh di tengah halaman.
   Gulir halus untuk tautan jangkar ditangani JS. Padding bawah menjaga fokus tidak jatuh di bawah playbar. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; scroll-padding-bottom: calc(var(--bar-h) + 32px); scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--black);
  color: var(--light);
  font-family: var(--f-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.is-gated { overflow: hidden; }
/* viewer modal terbuka: halaman di belakangnya tidak ikut tergulir (overflow body diteruskan ke viewport,
   jadi elemen sticky tetap bekerja; scrollbar-gutter di html mencegah lompatan lebar) */
body:has(.viewer[open]) { overflow: hidden; }
[hidden] { display: none !important; }   /* .btn dan kawan-kawan tidak boleh mengalahkan atribut hidden */
img, video, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
sup { font-size: .72em; line-height: 0; }
sup a { color: var(--gold); text-decoration: none; padding: .25em .35em; margin: -.25em -.1em; }   /* area ketuk lebih besar tanpa menggeser baris */
sup a:hover { text-decoration: underline; }
em { font-style: italic; }
::selection { background: var(--gold); color: #000; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }

.skip { position: fixed; left: 12px; top: -60px; z-index: 300; background: var(--gold); color: #000; padding: 10px 14px; font-weight: 700; text-decoration: none; transition: top .2s; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.scene { position: relative; padding-block: clamp(88px, 13vh, 168px); }
.muted { color: var(--light-3); font-size: .95rem; }
.footnote { color: var(--light-3); font-size: .82rem; line-height: 1.55; margin-top: 18px; max-width: 72ch; }
.lede { font-size: clamp(1.08rem, 1.6vw, 1.28rem); line-height: 1.55; color: var(--light-2); max-width: 62ch; margin-top: 22px; }

/* ---------- type ---------- */
.slug {
  font-family: var(--f-script); font-weight: 700; font-size: .98rem; letter-spacing: .02em;
  color: var(--light-2); display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px;
}
.slug__n {
  display: inline-grid; place-items: center; min-width: 2.2em; height: 1.9em; padding: 0 .4em;
  border: 1px solid var(--line); color: var(--gold); font-size: .92em;
}
.h2 {
  font-weight: 800; font-size: clamp(2.2rem, 5.4vw, 4.9rem); line-height: .98; letter-spacing: -.018em;
  max-width: 17ch; font-variation-settings: "wdth" var(--w, 112); text-wrap: balance;
}
.h3 { font-weight: 700; font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.15; font-variation-settings: "wdth" 104; margin-bottom: 10px; }
.h4 { font-weight: 700; font-size: 1.05rem; margin: 26px 0 10px; }
.desq { will-change: font-variation-settings; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px;
  font-weight: 700; font-size: 1rem; text-decoration: none; border: 1px solid transparent;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s;
}
.btn--gold { background: var(--gold); color: #000; }
.btn--gold:hover { background: var(--gold-hi); }
.btn--ghost { border-color: var(--line); color: var(--light); background: rgba(0, 0, 0, .25); }
.btn--ghost:hover { border-color: var(--light-2); }
.btn--sm { min-height: 38px; padding: 0 14px; font-size: .9rem; }

/* ==========================================================================
   GERBANG, LEADER, KARTU JUDUL
   ========================================================================== */
.gate { position: fixed; inset: 0; z-index: 200; background: #000; display: grid; place-items: center; }
.gate[hidden] { display: none; }
.gate__inner { display: grid; justify-items: center; gap: 22px; text-align: center; padding: 24px; position: relative; z-index: 2; transition: opacity .4s; }
.gate.is-playing .gate__inner { opacity: 0; pointer-events: none; }
.gate__mark { width: 64px; height: 64px; opacity: .9; }
.gate__for { font-family: var(--f-script); color: var(--light-2); font-size: 1rem; }
.gate__for strong { color: var(--gold); font-weight: 700; }
.gate__play {
  display: inline-flex; align-items: center; gap: 14px; background: none; border: 1px solid var(--light-3);
  padding: 18px 30px 18px 24px; font-size: 1.2rem; font-weight: 700; font-variation-settings: "wdth" 115;
  transition: border-color .3s, background .3s;
}
.gate__play svg { width: 28px; height: 28px; color: var(--gold); }
.gate__play:hover, .gate__play:focus-visible { border-color: var(--gold); background: rgba(201, 162, 75, .08); }
.gate__sound { font-size: .88rem; color: var(--light-3); display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.gate__sound input { accent-color: var(--gold); }
.gate__skip { background: none; border: 0; color: var(--light-3); font-size: .85rem; text-decoration: underline; text-underline-offset: 3px; position: fixed; right: 20px; bottom: 18px; z-index: 3; }
.gate.is-playing .gate__skip { opacity: 1; pointer-events: auto; color: var(--light-2); }

.leader { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.gate.is-playing .leader { opacity: 1; }
.titlecards { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.tc { grid-area: 1 / 1; display: grid; justify-items: center; gap: 14px; opacity: 0; text-align: center; padding: 24px; }
.tc img { width: min(560px, 78vw); height: auto; }
.tc span { font-family: var(--f-script); color: var(--light-2); font-size: clamp(.95rem, 1.6vw, 1.15rem); }
.tc strong { font-size: clamp(1.8rem, 5vw, 3.6rem); font-weight: 800; font-variation-settings: "wdth" 118; color: var(--gold); line-height: 1.05; }

/* grain: satu bingkai noise statis (dari JS), digetarkan hanya lewat transform agar jalan di compositor.
   Lebihan 40px di tiap sisi > geseran terbesar 18px, jadi tepi lapisan tidak pernah terlihat. */
.grain {
  position: fixed; inset: -40px; z-index: 150; pointer-events: none;
  background-size: 180px 180px; opacity: .9; mix-blend-mode: normal;
  will-change: transform; animation: grain-shift .72s steps(1, end) infinite;
}
@keyframes grain-shift {
  0%    { transform: translate(0, 0); }
  12.5% { transform: translate(-14px, 9px); }
  25%   { transform: translate(11px, -17px); }
  37.5% { transform: translate(-8px, 15px); }
  50%   { transform: translate(17px, 4px); }
  62.5% { transform: translate(-18px, -6px); }
  75%   { transform: translate(5px, 18px); }
  87.5% { transform: translate(13px, -11px); }
  100%  { transform: translate(0, 0); }
}

/* ==========================================================================
   JUDUL (HERO)
   ========================================================================== */
/* --fw: lebar layar 2.39:1. Tinggi layar = 100svh dikurangi ~260px untuk bar atas dan slate, sehingga slate
   selalu di atas lipatan (juga di laptop 1366x768, area tampil ~657px) dan layar menjadi pillarbox sungguhan
   di monitor ultrawide. Judul ikut tinggi layar (svh) supaya tetap muat di bingkai yang lebih pendek. */
.hero {
  --fw: min(100vw, max(calc((100svh - 260px) * 2.39), 640px));
  min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; padding: 0;
  background: #000; overflow: hidden;
}
.hero__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px var(--gutter); min-height: 9svh; width: var(--fw); justify-self: center; }
.hero__wordmark { width: clamp(132px, 14vw, 190px); height: auto; }
.hero__meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 22px; font-family: var(--f-script); font-size: .88rem; color: var(--light-3); }
.hero__for { color: var(--gold); }
.hero__frame {
  position: relative; align-self: center; justify-self: center; overflow: hidden;
  width: var(--fw); aspect-ratio: 2.39 / 1;
  background: #000;
}
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.5) 42%, rgba(0,0,0,.05) 75%), linear-gradient(0deg, rgba(0,0,0,.55), transparent 50%); }
.hero__copy { position: absolute; left: var(--gutter); bottom: clamp(20px, 6%, 64px); width: min(860px, 88%); }
.hero__title {
  font-weight: 800; font-size: clamp(2.3rem, min(5.6vw, 9.5svh), 6.2rem); line-height: .94; letter-spacing: -.02em;
  font-variation-settings: "wdth" var(--w, 118); max-width: 13ch; text-wrap: balance;
}
.hero__lede { margin-top: 18px; max-width: 54ch; color: var(--light-2); font-size: clamp(1rem, 1.35vw, 1.2rem); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.flare {
  position: absolute; left: -40%; top: 38%; width: 60%; height: 2px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(120, 170, 255, .0) 10%, rgba(150, 190, 255, .85) 50%, rgba(120, 170, 255, 0) 90%, transparent);
  filter: blur(1px); box-shadow: 0 0 24px 4px rgba(120, 170, 255, .35);
}
/* bar bawah = container: billing hanya muncul kalau lebarnya cukup di samping slate (lebar bar ikut --fw) */
.hero__bar--bottom { align-items: flex-end; flex-direction: row-reverse; container-type: inline-size; }
.hero__scroll { font-family: var(--f-script); font-size: .85rem; color: var(--light-3); display: flex; align-items: center; gap: 10px; margin-right: auto; }
/* billing block poster: urutan visual kiri ke kanan = billing, isyarat gulir, slate */
.billing {
  order: 1; flex: 0 1 46ch; min-width: 0; max-width: 46ch;
  font-weight: 600; font-variation-settings: "wdth" 62; text-transform: uppercase; letter-spacing: .06em;
  font-size: .78rem; line-height: 1.35; color: var(--light-3);
}
/* lebar konten bar < slate 440 + isyarat gulir ~166 + 2 gap + ~250px billing: sembunyikan, jangan dihimpit */
@container (max-width: 899px) { .billing { display: none; } }
.hero__scroll span { width: 1px; height: 28px; background: var(--light-3); animation: drip 2.4s var(--ease) infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- slate (papan klep) ---------- */
.slate { width: min(440px, 46vw, calc(var(--fw) * .45)); position: relative; z-index: 3; margin-top: -9svh; filter: drop-shadow(0 18px 40px rgba(0,0,0,.6)); cursor: pointer; }
.slate__sticks { position: relative; height: 30px; }
.slate__sticks span {
  position: absolute; left: 0; right: 0; height: 22px; border: 2px solid var(--light);
  background: repeating-linear-gradient(-55deg, var(--light) 0 22px, #000 22px 44px);
}
.slate__base { bottom: 0; }
.slate__top { bottom: 10px; transform-origin: 0 100%; transform: rotate(0deg); transition: transform .18s cubic-bezier(.5, 0, .9, .4); }
.slate.is-open .slate__top { transform: rotate(-17deg); transition: transform .5s var(--ease); }
.slate__board {
  display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--light); border-top: 0; background: #000;
  font-family: var(--f-script);
}
.slate__cell { padding: 8px 12px 10px; border-top: 2px solid var(--light); }
/* "Produksi: Sociopictures" mengulang wordmark tepat di atasnya; disembunyikan lewat CSS agar aturan nth-child(2)/(3) tetap berlaku */
.slate__cell:first-child { display: none; }
.slate__cell:nth-child(2) { border-right: 2px solid var(--light); }
.slate__cell--wide { grid-column: 1 / -1; }
.slate dt { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--light-3); }
.slate dd { font-weight: 700; font-size: 1.02rem; line-height: 1.3; color: var(--light); }
.slate__cell:nth-child(2) dd, .slate__cell:nth-child(3) dd { font-size: 1.5rem; color: var(--gold); }
/* jendela desktop yang sangat pendek: lede disembunyikan, slate dipadatkan supaya tidak menabrak tombol */
@media (min-width: 861px) and (max-height: 620px) {
  .hero__lede { display: none; }
  .hero__cta { margin-top: 18px; }
  .slate { margin-top: -5svh; }
  .slate dd { font-size: .92rem; }
  .slate__cell:nth-child(2) dd, .slate__cell:nth-child(3) dd { font-size: 1.25rem; }
}

/* ==========================================================================
   SINOPSIS (storyboard)
   ========================================================================== */
.board { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 28px); margin-top: 48px; counter-reset: p; }
.board__panel { display: grid; align-content: start; gap: 10px; }
.board__panel figure { aspect-ratio: 16 / 10; border: 1px solid var(--line); overflow: hidden; background: #000; }
.board__panel figure img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.25) contrast(1.05); }
.board__shot { font-family: var(--f-script); font-size: .82rem; color: var(--gold); margin-top: 4px; }
.board__panel h3 { font-size: 1.22rem; font-weight: 700; line-height: 1.2; font-variation-settings: "wdth" 106; }
.board__panel p:last-child { color: var(--light-2); font-size: .98rem; }
.board__slate { display: grid; place-content: center; gap: 2px; text-align: center; background: repeating-linear-gradient(-55deg, rgba(242,238,230,.06) 0 18px, transparent 18px 36px) !important; }
.board__slate span { font-weight: 900; font-variation-settings: "wdth" 125; font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1; color: var(--gold); }
.board__slate span + span { color: var(--light); }

/* ==========================================================================
   ADEGAN 1: STUDIO
   ========================================================================== */
.studio__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(24px, 4vw, 64px); margin-top: 52px; align-items: start; }

/* halaman naskah */
.page {
  position: relative; background: var(--paper); color: #000; font-family: var(--f-script);
  font-size: clamp(.92rem, 1.1vw, 1.02rem); line-height: 1.5;
  padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px) clamp(40px, 6vw, 72px) clamp(40px, 7vw, 88px);
  transform: rotate(-.6deg);
}
.page::before, .page::after {
  content: ""; position: absolute; left: clamp(14px, 2.4vw, 30px); width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f3d98a, #a9852f 60%, #6d5420);
}
.page::before { top: 18%; }
.page::after { bottom: 18%; }
.page__no { position: absolute; right: clamp(20px, 4vw, 48px); top: 26px; }
.page p + p { margin-top: 1em; }
.sp-slug { font-weight: 700; text-transform: uppercase; }
.sp-char { margin-left: 34%; text-transform: uppercase; margin-top: 1.4em !important; }
.sp-paren { margin-left: 27%; margin-top: 0 !important; }
.sp-dial { margin-left: 18%; margin-right: 12%; margin-top: 0 !important; }
.sp-char + .sp-dial { margin-top: 0 !important; }
.sp-trans { text-align: right; text-transform: uppercase; }
.sp-trans.sp-left { text-align: left; }

.founder { display: grid; gap: 12px; }
.founder__photo { aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--line); }
.founder__photo img { width: 100%; height: 100%; object-fit: cover; }
.founder__name { font-size: 1.6rem; font-weight: 800; font-variation-settings: "wdth" 112; margin-top: 8px; line-height: 1.1; }
.founder__role { font-family: var(--f-script); color: var(--gold); font-size: .95rem; }
.founder p { color: var(--light-2); font-size: .98rem; }
.founder__films { font-size: .9rem !important; color: var(--light-3) !important; }

.credits-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: clamp(56px, 8vw, 96px); padding-top: 32px; border-top: 1px solid var(--line); }
.credits-stats strong { display: block; font-weight: 900; font-variation-settings: "wdth" 125; font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1; color: var(--gold); }
.credits-stats span { display: block; margin-top: 10px; color: var(--light-2); font-size: .95rem; max-width: 30ch; }

.laurels { margin-top: 56px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
/* padding-right = gap: dua salinan jadi persis sama lebar, jadi translateX(-50%) menyambung tanpa lompatan */
.laurels__track { display: flex; gap: 48px; padding-right: 48px; width: max-content; animation: slide 60s linear infinite; }
.laurels__track img { height: 74px; width: auto; opacity: .88; }
@keyframes slide { to { transform: translateX(-50%); } }

.reel { margin-top: clamp(64px, 9vw, 112px); }
.reel__wall { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; margin-top: 24px; }
.tile { position: relative; overflow: hidden; background: #000; border: 1px solid var(--line-2); grid-column: span 3; aspect-ratio: 16 / 9; cursor: pointer; padding: 0; text-align: left; }
.tile--poster { grid-column: span 4; aspect-ratio: 2 / 3; }
.tile img, .tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .4s, transform 1.2s var(--ease); }
.tile video { opacity: 0; }
.tile.is-playing video { opacity: 1; }
.tile:hover img { transform: scale(1.03); }
.tile__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; background: linear-gradient(0deg, rgba(0,0,0,.85), transparent); display: grid; gap: 2px; }
.tile__cap strong { font-weight: 700; font-size: .98rem; line-height: 1.2; }
.tile__cap span { font-family: var(--f-script); font-size: .78rem; color: var(--light-2); }

.pricing-proof { margin-top: clamp(56px, 8vw, 96px); }
.tickets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.ticket {
  position: relative; display: grid; gap: 8px; padding: 22px 24px 22px 30px; color: #000;
  background:
    radial-gradient(circle at 0 50%, transparent 10px, var(--gold) 10.5px) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent 10px, var(--gold) 10.5px) right / 51% 100% no-repeat;
}
.ticket::before { content: ""; position: absolute; left: 14px; top: 12px; bottom: 12px; border-left: 2px dashed rgba(0,0,0,.35); }
.ticket__price { font-weight: 900; font-variation-settings: "wdth" 120; font-size: 1.7rem; line-height: 1; }
.ticket span:last-child { font-size: .95rem; line-height: 1.45; }

.clients { margin-top: clamp(56px, 8vw, 96px); }
.marquee { --logo-h: clamp(44px, 5.2vw, 72px); overflow: hidden; margin-top: 18px; border-block: 1px solid var(--line-2); padding-block: 18px; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee__track { display: flex; align-items: center; gap: 64px; padding-right: 64px; width: max-content; animation: slide 70s linear infinite; }
.marquee__track img { height: var(--logo-h); width: auto; opacity: .88; }
/* clients-1/2 tingginya 196px, clients-3 118px dengan skala piksel yang sama: render 118/196 agar logo sama besar */
.marquee__track img[src$="clients-3.webp"] { height: calc(var(--logo-h) * 118 / 196); }
.team { margin-top: 40px; }
.team img { width: 100%; height: auto; }
.team figcaption { font-family: var(--f-script); font-size: .85rem; color: var(--light-3); margin-top: 10px; }

/* ==========================================================================
   ADEGAN 2: PASAR
   ========================================================================== */
.pasar__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); margin-top: 56px; }
.shot { display: grid; align-content: start; gap: 22px; padding-top: 22px; border-top: 1px solid var(--line); }
.shot__tag { font-family: var(--f-script); color: var(--gold); font-size: .9rem; }
.bignum strong { display: block; font-weight: 900; font-variation-settings: "wdth" 125; font-size: clamp(2.8rem, 6.4vw, 5.6rem); line-height: .95; letter-spacing: -.02em; }
.bignum small { font-size: .42em; font-variation-settings: "wdth" 100; font-weight: 800; letter-spacing: 0; margin-left: .18em; }   /* satuan (juta) lebih kecil: angka tidak patah baris */
.shot--layar .bignum strong { color: var(--gold); }
.bignum span { display: block; margin-top: 12px; color: var(--light-2); max-width: 44ch; }
.facts { display: grid; gap: 14px; }
.facts li { padding-left: 18px; position: relative; color: var(--light-2); }
.facts li::before { content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 1px; background: var(--gold); }
.facts strong { color: var(--light); }
.callout { border-left: 3px solid var(--gold); padding: 6px 0 6px 18px; font-size: 1.1rem; }

/* grafik */
.chart { width: 100%; }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart .ax { stroke: var(--line); stroke-width: 1; }
.chart .gl { stroke: var(--line-2); stroke-width: 1; }
.chart text { fill: var(--light-3); font-family: var(--f-sans); font-size: 12px; }
.chart .lbl { fill: var(--light); font-weight: 700; font-size: 13px; }
.chart .bar { fill: var(--gold); }
.chart .bar--dim { fill: rgba(201, 162, 75, .38); }
.chart .hit { fill: transparent; cursor: default; }
.tip {
  position: fixed; z-index: 250; pointer-events: none; background: #000; color: var(--light);
  border: 1px solid var(--line); padding: 8px 10px; font-size: .85rem; line-height: 1.35; max-width: 240px;
  opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s;
}
.tip.is-on { opacity: 1; transform: none; }
.tip b { display: block; font-weight: 700; }

/* ==========================================================================
   ADEGAN 3: MESIN
   ========================================================================== */
.mesin__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: start; margin-top: 48px; }
.flywheel { position: sticky; top: 12vh; }   /* roda ikut turun bersama empat track di layar lebar */
.flywheel svg { width: 100%; max-width: 520px; margin-inline: auto; }
.fw__ring { fill: none; stroke: var(--line); stroke-width: 1.5; }
.fw__flow { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 6 18; transform-origin: 260px 260px; animation: spin 24s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.fw__node text { text-anchor: middle; font-family: var(--f-sans); font-weight: 700; font-size: 15px; fill: #fff; }
.fw__node:first-of-type text { fill: #000; }
.fw__edge { fill: var(--light-3); font-family: var(--f-script); font-size: 13px; text-anchor: middle; }
.tracks { display: grid; gap: 14px; }
.track { border-left: 3px solid var(--c); padding: 16px 0 16px 22px; display: grid; gap: 4px; }
.track__id { font-family: var(--f-script); font-size: .8rem; color: var(--light-3); }
.track h3 { font-size: 1.35rem; font-weight: 800; font-variation-settings: "wdth" 110; line-height: 1.1; }
.track__role { color: var(--light); font-weight: 600; }
.track p:not(.track__id):not(.track__role):not(.status) { color: var(--light-2); font-size: .97rem; }

.status { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; color: var(--light-2); margin-top: 6px; white-space: nowrap; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--steel); flex: none; }
.status--live::before { background: var(--s-kelas); box-shadow: 0 0 0 3px rgba(34, 160, 124, .22); }
.status--ready::before { background: var(--gold); }
.status--beta::before { background: var(--s-lab); }
.status--plan::before { background: transparent; border: 1px solid var(--steel); }

/* ==========================================================================
   ADEGAN 4: REKAMAN 401
   ========================================================================== */
.r401 { padding-top: 0; }
.r401__hero { position: relative; min-height: min(92svh, 860px); display: grid; align-items: end; overflow: hidden; margin-bottom: clamp(56px, 8vw, 96px); }
/* senter found footage: --mx/--my diisi JS dari pointermove; di perangkat tanpa hover JS memasang .is-auto
   dan senter menyapu pelan sendiri. Didaftarkan dengan @property supaya bisa dianimasikan. */
@property --mx { syntax: "<length-percentage>"; inherits: true; initial-value: 68%; }
@property --my { syntax: "<length-percentage>"; inherits: true; initial-value: 42%; }
.r401__hero { --mx: 68%; --my: 42%; --beam: 320px; }
/* fotonya gelap (rata-rata 13% kecerahan): dicerahkan, lalu ditutup lagi oleh gelap di luar sorot senter */
.r401__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.55) contrast(1.2) brightness(1.7); }
.r401__hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle var(--beam) at var(--mx) var(--my), rgba(0,0,0,0) 0, rgba(0,0,0,.3) 38%, rgba(0,0,0,.78) 72%, rgba(0,0,0,.95) 100%),
    linear-gradient(0deg, #000 2%, transparent 45%);
}
.r401__hero.is-auto { animation: torch 16s ease-in-out infinite; }
@keyframes torch {
  0%, 100% { --mx: 24%; --my: 36%; }
  22% { --mx: 62%; --my: 26%; }
  45% { --mx: 82%; --my: 46%; }
  70% { --mx: 50%; --my: 58%; }
}
.viewfinder { position: absolute; inset: clamp(18px, 4vw, 48px); z-index: 2; font-family: var(--f-script); font-weight: 700; font-size: clamp(.8rem, 1.2vw, 1rem); color: #fff; pointer-events: none; }
.vf__corner { position: absolute; width: 38px; height: 38px; border: 2px solid rgba(255,255,255,.85); }
.vf__corner--tl { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.vf__corner--tr { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.vf__corner--bl { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.vf__corner--br { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.vf__rec { position: absolute; left: 54px; top: 8px; display: inline-flex; align-items: center; gap: 8px; }
.vf__rec i { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--rec); animation: blink 1.2s steps(1, end) infinite; }
@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .15; } }
.vf__tc { position: absolute; right: 54px; top: 8px; }
.vf__bat { position: absolute; right: 54px; bottom: 8px; color: var(--rec); }
.vf__note { position: absolute; left: 54px; bottom: 8px; text-transform: uppercase; letter-spacing: .04em; }
.r401__head { position: relative; z-index: 3; padding-bottom: clamp(70px, 10vh, 120px); }
.r401__title {
  font-weight: 900; font-variation-settings: "wdth" 62; text-transform: uppercase; color: var(--rec);
  font-size: clamp(4rem, 15vw, 13.5rem); line-height: .82; letter-spacing: -.01em;
}
.r401__genre { margin-top: 18px; font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--light-2); max-width: 52ch; }
.r401__story { max-width: 820px; margin-bottom: clamp(48px, 7vw, 80px); }
.logline { font-size: clamp(1.25rem, 2.2vw, 1.85rem); line-height: 1.38; font-weight: 500; font-variation-settings: "wdth" 96; margin-bottom: 14px; }
.lean { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-top: 18px; }
.lean li { border-top: 2px solid var(--rec); padding-top: 14px; }
.lean strong { display: block; font-weight: 900; font-variation-settings: "wdth" 125; font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; }
.lean span { display: block; color: var(--light-2); font-size: .93rem; margin-top: 8px; }

.r401__money { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); margin-top: clamp(56px, 8vw, 96px); }
.budget__bars { display: grid; gap: 9px; margin-top: 16px; }
.bb { display: grid; grid-template-columns: minmax(0, 1fr) 72px; gap: 4px 12px; align-items: center; font-size: .92rem; }
.bb__label { color: var(--light-2); }
.bb__val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.bb__track { grid-column: 1 / -1; height: 8px; background: var(--line-2); }
.bb__fill { display: block; height: 100%; width: 0; background: var(--rec); border-radius: 0 4px 4px 0; transition: width 1.2s var(--ease); }
.stackbar { display: flex; gap: 2px; height: 14px; margin: 14px 0 12px; }
.stackbar span { display: block; height: 100%; }
.stackbar span:first-child { border-radius: 4px 0 0 4px; }
.stackbar span:last-child { border-radius: 0 4px 4px 0; }
.stack-legend { display: grid; gap: 8px; font-size: .9rem; color: var(--light-2); }
.stack-legend li { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: baseline; }
.stack-legend i { width: 12px; height: 12px; display: block; transform: translateY(2px); }
.stack-legend b { color: var(--light); font-variant-numeric: tabular-nums; }

.seats__screen { margin: 18px auto 18px; width: 78%; height: 22px; border-top: 3px solid var(--light-2); border-radius: 50% 50% 0 0 / 100% 100% 0 0; text-align: center; font-family: var(--f-script); font-size: .7rem; color: var(--light-3); padding-top: 4px; letter-spacing: .2em; transition: color .4s, border-color .4s, box-shadow .6s; }
.seats__grid { position: relative; display: grid; grid-template-columns: repeat(5, 1fr) 14px repeat(5, 1fr); gap: 6px 5px; max-width: 460px; margin: 0 auto 22px; }
/* lampu gedung: begitu film balik modal (JS memasang .is-profit di #seats) layar menyala emas dan kursi tersiram cahaya hangat */
.seats__grid::before { content: ""; position: absolute; inset: -26px 0 -8px; background: radial-gradient(ellipse at 50% 0, rgba(232, 200, 116, .16), transparent 70%); opacity: 0; transition: opacity .8s var(--ease); pointer-events: none; }
.seats.is-profit .seats__screen { color: var(--gold-hi); border-top-color: var(--gold-hi); box-shadow: 0 -6px 40px -6px rgba(232, 200, 116, .55); }
.seats.is-profit .seats__grid::before { opacity: 1; }
.seat { aspect-ratio: 1 / .86; border-radius: 5px 5px 2px 2px; background: var(--line-2); border: 1px solid var(--line); transition: background .25s, border-color .25s; position: relative; }
.seat.is-on { background: var(--gold); border-color: var(--gold); }
.seat.is-be { outline: 2px solid var(--rec); outline-offset: 1px; }
.seat.is-ibe { outline: 2px dashed var(--light); outline-offset: 1px; }
.seats.is-profit .seat.is-be { outline-color: var(--gold-hi); }
.aisle { width: 14px; }
.range { display: grid; gap: 8px; margin: 6px 0 18px; }
.range__label { font-size: .92rem; color: var(--light-2); }
.range__label strong { color: var(--light); }
.range__ends { display: flex; justify-content: space-between; font-family: var(--f-script); font-size: .78rem; color: var(--light-3); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 34px; background: transparent; margin: 0; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, var(--gold) var(--p, 50%), var(--line) var(--p, 50%)); }
input[type="range"]::-moz-range-track { height: 4px; background: var(--line); }
input[type="range"]::-moz-range-progress { height: 4px; background: var(--gold); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: var(--light); border: 3px solid var(--gold); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--light); border: 3px solid var(--gold); }
.seats__out { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.seats__out div { background: #000; padding: 14px 16px; }
.seats__out dt, .sim__out dt { font-size: .82rem; color: var(--light-3); }
.seats__out dd { font-weight: 800; font-variation-settings: "wdth" 115; font-size: clamp(1.3rem, 2.2vw, 1.75rem); font-variant-numeric: tabular-nums; line-height: 1.15; margin-top: 4px; }
.seats__marks { display: grid; gap: 10px; margin-top: 18px; font-size: .95rem; color: var(--light-2); }
.seats__marks li { position: relative; padding-left: 28px; }
.mk { position: absolute; left: 2px; top: .4em; width: 14px; height: 12px; border-radius: 4px 4px 1px 1px; display: block; }
.mk--film { outline: 2px solid var(--rec); background: var(--gold); }
.mk--inv { outline: 2px dashed var(--light); background: var(--gold); }
.mk--full { background: var(--gold-hi); box-shadow: 0 0 10px rgba(232, 200, 116, .6); }

.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: clamp(56px, 8vw, 96px); }
.plan { background: #000; padding: clamp(24px, 3vw, 40px); display: grid; gap: 12px; align-content: start; }
.plan__tag { font-family: var(--f-script); font-weight: 700; color: var(--rec); }
.plan h3 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 800; font-variation-settings: "wdth" 112; line-height: 1.05; }
.plan p:last-child { color: var(--light-2); }

.departures { margin-top: 28px; font-family: var(--f-script); font-weight: 700; }
.departures__head, .departures li { display: grid; grid-template-columns: minmax(150px, .9fr) minmax(0, 1.6fr) minmax(130px, .7fr); gap: 16px; align-items: center; }
.departures__head { font-size: .75rem; color: var(--light-3); padding: 0 16px 8px; text-transform: uppercase; letter-spacing: .08em; }
.departures li { padding: 12px 16px; border-top: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)); transform-origin: 50% 0; }
.departures li span:first-child { color: var(--gold-hi); font-size: 1.05rem; letter-spacing: .04em; }
.departures li span:nth-child(2) { font-weight: 400; color: var(--light-2); }
.dep { font-size: .86rem; justify-self: start; padding: 3px 8px; border: 1px solid var(--line); }
.dep--on { color: #000; background: var(--gold); border-color: var(--gold); }
.dep--go { color: var(--light-2); }

.sched { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: clamp(48px, 7vw, 80px); border-top: 1px solid var(--line); }
.sched li { padding: 16px 16px 0 0; position: relative; color: var(--light-2); font-size: .95rem; }
.sched li::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--rec); }
.sched span { display: block; font-family: var(--f-script); font-weight: 700; color: var(--light); font-size: .88rem; margin-bottom: 4px; }

/* ==========================================================================
   ADEGAN 5: MASTERCLASS (kertas)
   ========================================================================== */
.paper-scene { background: var(--classroom); color: #000; }
.paper-scene .slug { color: rgba(0,0,0,.65); }
.paper-scene .slug__n { border-color: rgba(0,0,0,.2); color: var(--oxblood); }
.paper-scene .lede, .paper-scene .muted, .paper-scene .footnote { color: rgba(0,0,0,.66); }
.paper-scene sup a { color: var(--oxblood); }
.paper-scene :focus-visible { outline-color: var(--oxblood); }
/* enam fakta sebagai kolom sejajar (sebaris dengan .credits-stats di Studio), bukan baris yang patah acak */
.kelas__facts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 24px; margin-top: 36px; font-size: 1.02rem; }
.kelas__facts li { display: grid; align-content: start; gap: 4px; border-top: 2px solid #000; padding-top: 12px; line-height: 1.3; }
.kelas__facts strong { font-weight: 900; font-variation-settings: "wdth" 122; font-size: clamp(1.8rem, 3vw, 2.6rem); margin-right: 0; line-height: 1; }
.modboard { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 44px; }
.modcol h3 { font-size: .95rem; font-weight: 700; margin-bottom: 10px; display: flex; justify-content: space-between; gap: 8px; border-bottom: 2px solid #000; padding-bottom: 6px; }
.modcol h3 span { font-family: var(--f-script); font-weight: 400; color: rgba(0,0,0,.62); }
.modcol ol { display: grid; gap: 6px; }
.mod { background: #fff; border: 1px solid rgba(0,0,0,.12); padding: 8px 10px; font-size: .8rem; line-height: 1.3; display: grid; grid-template-columns: 2.6em 1fr; gap: 6px; transition: transform .25s var(--ease), border-color .25s; }
.mod:hover { transform: translateX(3px); border-color: #000; }
.mod b { font-family: var(--f-script); font-weight: 700; }
.mod--free { border-color: var(--oxblood); }
.mod--free i { grid-column: 2; font-style: normal; font-size: .72rem; color: var(--oxblood); font-weight: 700; }

.kelas__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); margin-top: clamp(56px, 8vw, 96px); align-items: start; }
.kelas__grid--market { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); align-items: center; }
.price-card { border: 2px solid #000; padding: clamp(22px, 3vw, 36px); display: grid; gap: 14px; background: #fff; }
.price-card__big { font-size: 1.1rem; }
.price-card__big span { display: block; font-weight: 900; font-variation-settings: "wdth" 118; font-size: clamp(2.6rem, 4.4vw, 4.1rem); line-height: .95; color: var(--oxblood); }
.chart--light text { fill: rgba(0,0,0,.6); }
.chart--light .lbl { fill: #000; }
.chart--light .bar { fill: rgba(0,0,0,.78); }
.chart--light .bar--ours { fill: var(--oxblood); }
.chart--light .gl { stroke: rgba(0,0,0,.08); }
.aperture svg { width: 100%; max-width: 400px; margin-inline: auto; }
.ap { fill: none; stroke: #000; }
.ap--1 { stroke-width: 1; stroke-dasharray: 3 5; }
.ap--2 { stroke-width: 1.5; fill: rgba(0,0,0,.04); }
.ap--3 { stroke-width: 2; fill: var(--oxblood); stroke: var(--oxblood); }
.ap__t { font-family: var(--f-sans); font-weight: 900; font-size: 26px; text-anchor: middle; fill: #000; }
.ap__s { font-family: var(--f-sans); font-size: 13px; text-anchor: middle; fill: rgba(0,0,0,.65); }
.ap__t--sm { fill: #fff; font-size: 20px; }
.ap__s--sm { fill: rgba(255,255,255,.85); font-size: 11px; }
.tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin-top: 14px; font-size: .95rem; }
.tbl th, .tbl td { padding: 10px 12px; text-align: right; border-bottom: 1px solid rgba(0,0,0,.12); }
.tbl th:first-child, .tbl td:first-child { text-align: left; }
.tbl thead th { font-size: .78rem; font-weight: 700; color: rgba(0,0,0,.62); }
.tbl tbody th { font-weight: 600; }
.tbl tr.note td { text-align: left; }   /* baris kalimat penjelas (colspan) di #invTbl */
.tbl tr.is-base td, .tbl tr.is-base th { font-weight: 800; }
.upsell { display: grid; gap: 2px; margin-top: 12px; }
.upsell li { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; font-size: .97rem; }
.upsell li span:first-child { flex: 1; display: flex; gap: 10px; }
.upsell li span:first-child::after { content: ""; flex: 1; border-bottom: 1px dotted rgba(0,0,0,.35); transform: translateY(-4px); }
.upsell li span:last-child { font-weight: 700; white-space: nowrap; }
.road { display: grid; gap: 0; margin-top: 12px; border-left: 2px solid #000; }
.road li { padding: 8px 0 12px 20px; position: relative; }
.road li::before { content: ""; position: absolute; left: -6px; top: 15px; width: 10px; height: 10px; background: var(--classroom); border: 2px solid #000; border-radius: 50%; }
.road li:first-child::before { background: var(--oxblood); border-color: var(--oxblood); }
.road span { display: block; font-family: var(--f-script); font-weight: 700; font-size: .85rem; color: var(--oxblood); }

/* ==========================================================================
   ADEGAN 6: VIDEO VILLAGE
   ========================================================================== */
.monitors { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 40px); margin-top: 56px; }
.monitor { background: none; border: 0; padding: 0; text-align: left; display: grid; gap: 0; position: relative; }
.monitor__screen {
  display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #000;
  border: clamp(8px, 1vw, 14px) solid var(--bezel); border-bottom-width: clamp(18px, 2vw, 26px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.monitor__screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.07), transparent 40%); pointer-events: none; }
.monitor__screen img { width: 100%; height: auto; transform: translateY(0); transition: transform 1.2s var(--ease); will-change: transform; }
.monitor.is-scrolling .monitor__screen img { transition: transform var(--dur, 18s) linear; transform: translateY(var(--ty, 0)); }
.monitor::after { content: ""; display: block; width: 26%; height: 22px; margin: 0 auto; background: linear-gradient(90deg, #111, #2c2c2c, #111); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }
.monitor__tape {
  position: absolute; z-index: 2; top: clamp(-10px, -1vw, -6px); left: 18px; transform: rotate(-2.5deg);
  background: #f4f1e8; color: #000; font-family: var(--f-script); font-weight: 700; font-size: .85rem; padding: 3px 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.monitor__tape--rec { background: var(--rec); color: #fff; }
.monitor__tape--kelas { background: var(--classroom); }
.monitor__label { display: grid; gap: 4px; margin-top: 14px; }
.monitor__label strong { font-weight: 700; font-size: 1.05rem; }
.monitor__label span { color: var(--light-2); font-size: .93rem; }
.monitor:hover .monitor__screen, .monitor:focus-visible .monitor__screen { border-color: #2f2f2f; }

.viewer { width: min(1180px, 96vw); height: min(88vh, 900px); max-width: none; max-height: none; padding: 0; border: 1px solid var(--line); background: #000; color: var(--light); display: grid; grid-template-rows: auto auto 1fr; }
.viewer:not([open]) { display: none; }
.viewer::backdrop { background: rgba(0, 0, 0, .82); backdrop-filter: blur(4px); }
.viewer__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.viewer__title { font-family: var(--f-script); font-weight: 700; }
.viewer__actions { display: flex; align-items: center; gap: 10px; }
.viewer__close { background: none; border: 1px solid var(--line); width: 38px; height: 38px; font-size: 1.4rem; line-height: 1; }
.viewer__note { padding: 10px 20px; font-size: .88rem; color: #000; background: var(--gold); }
.viewer__body { overflow: auto; background: #0a0a0a; }
.viewer__body img { width: 100%; height: auto; }
.viewer__body iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ==========================================================================
   ADEGAN 7: LAB
   ========================================================================== */
.lab__demos { display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); margin-top: 52px; align-items: end; }
.demo { display: grid; gap: 14px; }
.demo video { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 1px solid var(--line); background: #000; }   /* rasio tetap sebelum poster dimuat: tata letak tidak bergeser */
.demo--tall video { aspect-ratio: 9 / 16; object-fit: cover; max-height: 640px; }
.demo figcaption { color: var(--light-2); font-size: .95rem; }
.demo figcaption strong { display: block; color: var(--light); font-size: 1.08rem; margin-bottom: 4px; }
.callsheet { margin-top: clamp(48px, 7vw, 80px); overflow-x: auto; border: 1px solid var(--line); }
.callsheet table { width: 100%; min-width: 860px; border-collapse: collapse; }
.callsheet caption { text-align: left; padding: 14px 18px; font-family: var(--f-script); font-weight: 700; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.03); }
.callsheet th, .callsheet td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line-2); vertical-align: top; font-size: .95rem; }
.callsheet thead th { font-family: var(--f-script); font-size: .78rem; color: var(--light-3); font-weight: 700; }
.callsheet tbody th { font-weight: 700; width: 20%; }
.callsheet td { color: var(--light-2); }
.callsheet td:nth-child(3) { width: 14%; }
.callsheet td .status { margin-top: 0; }

/* ==========================================================================
   ADEGAN 8: PENAWARAN
   ========================================================================== */
.schemes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); margin-top: 52px; }
.scheme { --pad: clamp(24px, 3vw, 40px); border: 1px solid var(--line); padding: 0 var(--pad) var(--pad); display: grid; gap: 16px; align-content: start; transition: border-color .3s, background .3s; }
.scheme.is-active { border-color: var(--gold); background: rgba(201, 162, 75, .05); }
/* kepala papan klep di setiap skema; skema yang sedang dipilih di simulator (.is-active dari JS) berubah emas */
.scheme::before {
  content: ""; display: block; height: 18px; margin: 0 calc(-1 * var(--pad)) 8px;
  background: repeating-linear-gradient(-55deg, var(--light-2) 0 18px, #000 18px 36px); border-bottom: 2px solid var(--light-2);
}
.scheme.is-active::before { background: repeating-linear-gradient(-55deg, var(--gold) 0 18px, #000 18px 36px); border-bottom-color: var(--gold); }
.scheme__tag { font-family: var(--f-script); font-weight: 700; color: var(--gold); }
.scheme h3 { font-size: clamp(1.6rem, 2.8vw, 2.4rem); font-weight: 800; font-variation-settings: "wdth" 112; line-height: 1.04; }
.steps { counter-reset: s; display: grid; gap: 12px; }
.steps li { counter-increment: s; position: relative; padding-left: 42px; min-height: 26px; color: var(--light-2); }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 30px; height: 26px; font-family: var(--f-script); font-weight: 700; color: var(--gold); border: 1px solid var(--line); display: grid; place-items: center; font-size: .85rem; }
.scheme__foot { font-weight: 700; border-top: 1px solid var(--line); padding-top: 14px; }

.sim { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 64px); margin-top: clamp(48px, 7vw, 80px); padding: clamp(22px, 3vw, 40px); border: 1px solid var(--line); background: rgba(255,255,255,.02); }
.filmstrip { display: grid; grid-template-columns: repeat(50, 1fr); gap: 2px; margin: 18px 0 10px; padding: 9px 0; background: #111 radial-gradient(circle, #000 1.4px, transparent 1.8px) 0 2px / 8px 5px repeat-x; position: relative; }
.filmstrip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 5px; background: radial-gradient(circle, #000 1.4px, transparent 1.8px) 0 0 / 8px 5px repeat-x; }
.frame { aspect-ratio: 3 / 4; background: rgba(242,238,230,.16); transition: background .35s; }
.frame.is-inv { background: var(--gold); }
.filmstrip__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: .9rem; color: var(--light-2); margin-bottom: 18px; }
.sw { width: 12px; height: 12px; display: inline-block; }
.sw--inv { background: var(--gold); }
.sw--own { background: rgba(242,238,230,.3); margin-left: 8px; }
.seg { border: 0; padding: 0; margin: 4px 0 14px; display: flex; flex-wrap: wrap; gap: 0; }
.seg legend { font-size: .85rem; color: var(--light-3); margin-bottom: 8px; padding: 0; width: 100%; }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: inline-block; padding: 9px 16px; border: 1px solid var(--line); margin-right: -1px; font-size: .92rem; transition: background .2s, color .2s; }
.seg input:checked + span { background: var(--light); color: #000; border-color: var(--light); }
.seg input:focus-visible + span { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.sim__out { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); align-self: start; }
.sim__out div { background: #000; padding: 18px 20px; }
.sim__out dd { font-weight: 900; font-variation-settings: "wdth" 120; font-size: clamp(1.8rem, 3.2vw, 2.8rem); line-height: 1.05; font-variant-numeric: tabular-nums; margin-top: 4px; }
.sim__out div:first-child dd { color: var(--gold); }

.deal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); margin-top: clamp(56px, 8vw, 96px); }
.tbl--uof td, .tbl--uof th { border-bottom-color: var(--line-2); color: var(--light-2); vertical-align: top; }
.tbl--uof th { color: var(--light); }
.tbl--uof td:last-child { color: var(--light); font-weight: 700; white-space: nowrap; }
.tbl--uof small { display: block; font-weight: 400; color: var(--light-3); font-size: .82rem; margin-top: 2px; }
.tbl--uof i { display: inline-block; width: 10px; height: 10px; margin-right: 8px; }
.checks { display: grid; gap: 12px; margin-top: 12px; }
.checks li { position: relative; padding-left: 32px; color: var(--light-2); }
.checks li::before { content: ""; position: absolute; left: 2px; top: .35em; width: 14px; height: 8px; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg); }
.checks strong { color: var(--light); }
.howto { margin-top: clamp(56px, 8vw, 96px); }
.sched--steps li::before { background: var(--gold); }

/* ==========================================================================
   ADEGAN 9: TIMELINE (NLE)
   ========================================================================== */
.nle { margin-top: 44px; border-block: 1px solid var(--line); background: #0b0b0b; }
.nle__head { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; padding: 14px var(--gutter); border-bottom: 1px solid var(--line-2); min-height: 74px; }
.nle__tc { font-family: var(--f-script); font-weight: 700; font-size: clamp(1.3rem, 2.4vw, 1.9rem); color: var(--rec); min-width: 8.5ch; }
.nle__now { display: flex; flex-wrap: wrap; gap: 8px 10px; font-size: .88rem; }
.nle__now li { padding: 4px 10px; border-left: 3px solid var(--c, var(--gold)); background: rgba(255,255,255,.04); color: var(--light-2); }
.nle__scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.nle__inner { position: relative; min-width: 1100px; padding: 0 var(--gutter) 18px calc(var(--gutter) + 150px); }
.nle__ruler { position: relative; height: 34px; border-bottom: 1px solid var(--line); font-family: var(--f-script); font-size: .72rem; color: var(--light-3); }
.nle__ruler span { position: absolute; bottom: 0; height: 8px; border-left: 1px solid var(--line); }
.nle__ruler span.is-year { height: 30px; border-left-color: var(--light-3); }
.nle__ruler span b { position: absolute; left: 5px; top: -2px; font-weight: 700; color: var(--light-2); white-space: nowrap; }
.nle__tracks { position: relative; }
.nle__track { position: relative; height: 54px; border-bottom: 1px solid var(--line-2); }
.nle__track::before { content: attr(data-name); position: absolute; right: 100%; margin-right: 14px; width: 136px; top: 0; bottom: 0; display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 700; color: var(--light-2); border-left: 3px solid var(--c); padding-left: 10px; }
.clip { position: absolute; top: 9px; bottom: 9px; background: color-mix(in srgb, var(--c) 72%, #000); border: 1px solid color-mix(in srgb, var(--c) 100%, #fff 15%); padding: 0 8px; font-size: .76rem; font-weight: 600; display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #fff; }
.clip--mark { background: none; border: 0; border-left: 2px solid var(--c); padding-left: 6px; color: var(--light); }
.clip--mark::before { content: ""; position: absolute; left: -6px; top: -4px; width: 10px; height: 10px; background: var(--c); transform: rotate(45deg); }
.clip.is-now { box-shadow: 0 0 0 2px var(--light); }
/* A2 Investor: emas 72% + hitam terlalu terang untuk teks putih (4,37:1); teks hitam 4,8:1 */
.nle__track[data-name^="A2"] .clip:not(.clip--mark) { color: #000; }
/* klip terlalu pendek untuk labelnya (JS memasang .is-tight): tampil sebagai blok warna saja, label lengkap ada di
   readout #nleNow dan title. Cincin .is-now di atas tetap menandai klip yang aktif. */
.clip.is-tight, .nle__track[data-name^="A2"] .clip.is-tight { color: transparent; }
.nle__playhead { position: absolute; top: 0; bottom: 18px; width: 2px; margin-left: -1px; background: var(--rec); cursor: ew-resize; z-index: 3; touch-action: none; }
.nle__playhead span { position: absolute; top: 0; left: -8px; width: 18px; height: 18px; background: var(--rec); clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); }
.nle__playhead::after { content: ""; position: absolute; top: 0; bottom: 0; left: -12px; right: -12px; }
.nle__playhead:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }

/* ==========================================================================
   ADEGAN 10: PROYEKSI
   ========================================================================== */
.seg--dark { margin-top: 32px; }
.proj__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); margin-top: 24px; align-items: start; }
.chart--bars .seg-rect { transition: y .6s var(--ease), height .6s var(--ease); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: .88rem; color: var(--light-2); }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 12px; height: 12px; display: block; }
.tbl--dark th, .tbl--dark td { border-bottom-color: var(--line-2); }
.tbl--dark thead th { color: var(--light-3); }
.tbl--dark tbody th { color: var(--light-2); font-weight: 500; }
.tbl--dark tr.is-key th, .tbl--dark tr.is-key td { color: var(--light); font-weight: 800; }
.tbl--dark td.neg, .tbl--dark tr.is-key td.neg { color: #ff8a80; }   /* angka negatif tetap merah, juga di baris kunci */
.tbl--dark tr.note td { color: var(--light-2); }
.assume { margin-top: 40px; border-top: 1px solid var(--line); padding-top: 18px; }
.assume summary, .sources summary { cursor: pointer; font-weight: 700; }
.assume ul { display: grid; gap: 8px; margin-top: 14px; color: var(--light-2); font-size: .93rem; max-width: 88ch; }
.assume li { padding-left: 16px; position: relative; }
.assume li::before { content: "*"; position: absolute; left: 0; color: var(--gold); font-family: var(--f-script); }

/* ==========================================================================
   ADEGAN 11: RISIKO (catatan revisi)
   ========================================================================== */
.notes { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 5vw, 72px); margin-top: 48px; }
.notes li { position: relative; padding: 22px 40px 22px 0; border-top: 1px solid var(--line); }
.notes li::after { content: "*"; position: absolute; right: 6px; top: 18px; font-family: var(--f-script); font-weight: 700; font-size: 1.6rem; color: var(--gold); }
.notes h3, .notes h4 { font-size: 1.18rem; font-weight: 700; font-variation-settings: "wdth" 106; margin-bottom: 6px; }
.notes p { color: var(--light-2); font-size: .97rem; }

/* halaman revisi berwarna, seperti naskah produksi sungguhan (biru, merah muda, kuning, hijau, emas, krem, salem).
   Hanya untuk #risiko; .notes di tempat lain (mis. FAQ di Penawaran) tetap gelap. */
.risiko .notes { gap: 18px clamp(18px, 3vw, 40px); }
.risiko .notes li {
  --rev: #cfe0f7; --rev-tag: "REV. BIRU";
  background: var(--rev); color: #000; font-family: var(--f-script); border: 0;
  padding: 22px 48px 26px 28px; transform: rotate(var(--r, -.4deg));
}
.risiko .notes li:nth-child(2) { --rev: #f7d3dc; --rev-tag: "REV. MERAH MUDA"; --r: .35deg; }
.risiko .notes li:nth-child(3) { --rev: #f5ecb0; --rev-tag: "REV. KUNING"; }
.risiko .notes li:nth-child(4) { --rev: #cfeccb; --rev-tag: "REV. HIJAU"; --r: .3deg; }
.risiko .notes li:nth-child(5) { --rev: #f0d48a; --rev-tag: "REV. EMAS"; }
.risiko .notes li:nth-child(6) { --rev: #efe2c4; --rev-tag: "REV. KREM"; --r: .3deg; }
.risiko .notes li:nth-child(7) { --rev: #f6c6b0; --rev-tag: "REV. SALEM"; }
/* kepala halaman revisi; teks alternatif kosong agar pembaca layar tidak membacanya
   (browser tanpa dukungan sintaks "/ alt" cukup tidak menampilkan kepala ini) */
.risiko .notes li::before { content: var(--rev-tag) / ""; display: block; margin-bottom: 10px; font-size: .7rem; font-weight: 700; letter-spacing: .12em; color: rgba(0, 0, 0, .62); }
.risiko .notes li::after { color: #000; right: 18px; }
.risiko .notes h3 { font-family: var(--f-script); text-transform: uppercase; font-size: 1rem; }
.risiko .notes p { color: rgba(0, 0, 0, .78); }

/* FAQ investor di dalam #penawaran memakai gaya .notes gelap bawaan */
.faq { margin-top: clamp(56px, 8vw, 96px); }
.faq .notes { margin-top: 24px; }

/* ==========================================================================
   KREDIT
   ========================================================================== */
.kredit { padding-top: 0; }
/* kredit bergulir mengikuti gulir halaman: tidak pernah ada layar kosong */
.crawl { position: relative; padding-block: clamp(120px, 22vh, 220px) clamp(80px, 14vh, 160px); }
.crawl__inner { display: grid; justify-items: center; text-align: center; padding: 0 var(--gutter); }
.crawl__inner > * { transition: opacity .6s var(--ease); }
.crawl__mark { width: 72px; height: 72px; margin-bottom: 26px; }
.cr-big { font-weight: 900; font-variation-settings: "wdth" 125; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1; }
.cr-sm { font-family: var(--f-script); color: var(--light-2); margin: 10px 0 64px; }
.cr { display: grid; gap: 18px; width: min(760px, 100%); }
.cr div { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cr dt { text-align: right; color: var(--light-3); font-size: .95rem; padding-top: .2em; }
.cr dd { text-align: left; font-weight: 700; font-size: 1.15rem; }
.cr__ep dd { color: var(--gold); }
.cr-head { margin-top: 72px; color: var(--light-3); font-size: .95rem; }
.cr-list { margin-top: 14px; max-width: 56ch; font-weight: 600; line-height: 1.9; color: var(--light-2); }

/* kartu terakhir mengikuti irama kredit: rata tengah. Alamat, sumber, dan disclaimer (footer.cta__foot) tetap rata kiri. */
.cta { text-align: center; padding-top: clamp(40px, 6vw, 80px); }
.cta .slug { color: var(--gold); justify-content: center; }
.cta .h2, .cta .lede { margin-inline: auto; }
.cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.cta__foot { text-align: left; margin-top: clamp(56px, 8vw, 96px); }
.cta__addr { font-style: normal; margin-top: 30px; color: var(--light-2); font-family: var(--f-script); line-height: 1.7; }
.cta__foot > .cta__addr:first-child { margin-top: 0; }
.sources { margin-top: 56px; border-top: 1px solid var(--line); padding-top: 18px; }
.sources ol { list-style: decimal; padding-left: 22px; display: grid; gap: 8px; margin-top: 14px; color: var(--light-3); font-size: .86rem; max-width: 96ch; }
/* sumber yang dituju dari superskrip catatan kaki (.is-target untuk JS: history.pushState tidak memperbarui :target) */
.sources li:target, .sources li.is-target { color: var(--light); background: rgba(201, 162, 75, .12); box-shadow: -10px 0 0 rgba(201, 162, 75, .12); }
.disclaimer { margin-top: 32px; color: var(--light-3); font-size: .85rem; max-width: 86ch; }
.fin { margin-top: 18px; color: var(--light-3); font-size: .8rem; padding-bottom: calc(var(--bar-h) + 40px); }

/* ==========================================================================
   PLAYBAR (navigasi)
   ========================================================================== */
.playbar {
  position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translate(-50%, 140%);
  z-index: 120; width: min(980px, calc(100% - 24px)); height: var(--bar-h);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 0 16px 0 8px;
  background: rgba(0, 0, 0, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 10px; transition: transform .6s var(--ease);
}
.playbar.is-on { transform: translate(-50%, 0); }
.playbar__toggle { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; padding: 8px 10px; font-weight: 700; font-size: .92rem; min-width: 150px; text-align: left; }
.playbar__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rec); animation: blink 1.2s steps(2, start) infinite; }
.playbar__track { position: relative; height: 22px; cursor: pointer; }
.playbar__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--line); }
.playbar__fill { position: absolute; left: 0; top: 50%; height: 2px; width: 0; background: var(--gold); }
.playbar__tick { position: absolute; top: 4px; width: 2px; height: 14px; background: var(--light-3); border: 0; padding: 0; }
.playbar__tick::after { content: ""; position: absolute; inset: -6px -8px; }
.playbar__tick.is-past { background: var(--gold); }
.playbar__tick:hover::before { content: attr(data-label); position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: #000; border: 1px solid var(--line); padding: 3px 8px; font-size: .75rem; color: var(--light); }
.playbar__tc { font-family: var(--f-script); font-weight: 700; font-size: .9rem; color: var(--light-2); font-variant-numeric: tabular-nums; }
.playbar__list {
  position: absolute; left: 0; bottom: calc(100% + 10px); width: min(320px, 100%); max-height: 62vh; overflow: auto;
  background: #000; border: 1px solid var(--line); border-radius: 10px; padding: 8px; list-style: none;
}
.playbar__list a { display: grid; grid-template-columns: 2.4em 1fr; gap: 6px; padding: 9px 10px; text-decoration: none; font-size: .95rem; color: var(--light-2); }
.playbar__list a:hover, .playbar__list a[aria-current="true"] { background: rgba(255,255,255,.06); color: var(--light); }
.playbar__list b { font-family: var(--f-script); color: var(--gold); font-weight: 700; }

/* tanda pergantian rol (changeover cue): dua kedipan oval di kanan atas setiap kali adegan berganti (JS: .is-on) */
.cue {
  position: fixed; top: 7vh; right: 6vw; z-index: 160; width: 30px; height: 24px; border-radius: 50%;
  background: radial-gradient(#fff 35%, rgba(255, 255, 255, .55) 60%, transparent 72%);
  opacity: 0; pointer-events: none;
}
.cue.is-on { animation: cue .42s steps(1, end) 1; }
@keyframes cue { 0% { opacity: 1; } 20% { opacity: 0; } 55% { opacity: 1; } 75%, 100% { opacity: 0; } }

/* ==========================================================================
   RESPONSIF
   ========================================================================== */
@media (max-width: 1080px) {
  .board { grid-template-columns: repeat(2, 1fr); }
  .lean { grid-template-columns: repeat(3, 1fr); }
  .modboard { grid-template-columns: repeat(3, 1fr); }
  .credits-stats { grid-template-columns: repeat(2, 1fr); }
  .sched { grid-template-columns: repeat(3, 1fr); row-gap: 22px; }
}
@media (max-width: 860px) {
  .hero { grid-template-rows: auto auto auto; }
  .hero__frame { width: 100%; aspect-ratio: auto; height: 64svh; min-height: 420px; }
  .hero__shade { background: linear-gradient(0deg, rgba(0,0,0,.92) 8%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.25)); }
  .hero__copy { left: var(--gutter); right: var(--gutter); width: auto; }
  .hero__meta span:nth-child(2) { display: none; }
  .hero__bar { width: 100%; }
  .hero__title { font-size: clamp(2.3rem, 7.6vw, 4.2rem); }   /* tablet potret: judul tidak tenggelam di layar 64svh */
  .hero__bar--bottom { flex-direction: column; align-items: stretch; }
  .slate { margin-top: 0; width: min(470px, 100%); }
  .hero__scroll, .billing { display: none; }
  .flywheel { position: static; }
  .kelas__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .studio__grid, .pasar__grid, .mesin__grid, .r401__money, .kelas__grid, .kelas__grid--market,
  .deal__grid, .proj__grid, .sim, .schemes, .plans, .lab__demos, .notes { grid-template-columns: 1fr; }
  .page { transform: none; }
  .founder { grid-template-columns: 120px 1fr; column-gap: 18px; align-items: start; }
  .founder__photo { grid-row: span 3; }
  .tile { grid-column: span 6; }
  .tile--poster { grid-column: span 4; }
  .tickets { grid-template-columns: 1fr; }
  .monitors { grid-template-columns: 1fr; max-width: 560px; }
  .demo--tall { max-width: 320px; }
  .departures__head { display: none; }
  .departures li { grid-template-columns: 1fr auto; }
  .departures li span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; font-size: .9rem; }
  .departures li span:nth-child(3) { grid-row: 1; grid-column: 2; }
  .sched { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--line); }
  .sched li { padding: 0 0 18px 20px; }
  .sched li::before { left: -5px; top: 6px; }
  .filmstrip { grid-template-columns: repeat(25, 1fr); }
  .nle__head { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 560px) {
  body { font-size: 1rem; }
  .board { grid-template-columns: 1fr; }
  .lean { grid-template-columns: repeat(2, 1fr); }
  .credits-stats { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
  /* dinding karya tetap 3 poster + 2 kolom (span dari blok 860), cukup keterangannya yang dirapatkan */
  .tile__cap { padding: 18px 8px 6px; }
  .tile__cap strong { font-size: .82rem; }
  .tile__cap span { font-size: .68rem; }
  /* papan modul: bentuk kurikulumnya yang penting, bukan 44 judul. Kode modul dalam kisi 6 kolom per level. */
  .modboard { grid-template-columns: 1fr; gap: 18px; }
  .modcol ol { grid-template-columns: repeat(6, 1fr); gap: 4px; }
  .mod { grid-template-columns: 1fr; padding: 8px 0; text-align: center; }
  .mod span, .mod--free i { display: none; }
  .kelas__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* roda gila: teks SVG ikut mengecil bersama viewBox 520, jadi dibesarkan agar terbaca ~12-13px */
  .fw__node text { font-size: 20px; font-variation-settings: "wdth" 88; }
  .fw__edge { font-size: 17px; }
  /* lembar panggilan menjadi kartu bertumpuk: tanpa gulir horizontal, keempat kolom terlihat */
  .callsheet { overflow: visible; }
  .callsheet table { min-width: 0; }
  .callsheet thead { display: none; }
  .callsheet tbody, .callsheet tr, .callsheet th, .callsheet td { display: block; }
  .callsheet tbody th, .callsheet td, .callsheet td:nth-child(3) { width: auto; }
  .callsheet tr { padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
  .callsheet tr:last-child { border-bottom: 0; }
  .callsheet th, .callsheet td { padding: 2px 0; border: 0; }
  .callsheet tbody th { font-size: 1rem; }
  .callsheet td:nth-child(3) { margin: 4px 0; }
  .callsheet td:nth-child(4) { margin-top: 6px; }
  .callsheet td:nth-child(4)::before { content: "Model pendapatan"; content: "Model pendapatan" / ""; display: block; font-family: var(--f-script); font-weight: 700; font-size: .74rem; color: var(--light-3); }
  .seats__out { grid-template-columns: 1fr; }
  .r401__hero { --beam: 210px; }
  .cr div { grid-template-columns: 1fr; gap: 2px; }
  .cr dt, .cr dd { text-align: center; }
  .playbar { grid-template-columns: 1fr auto; gap: 10px; }
  .playbar__track { display: none; }
  .playbar__toggle { min-width: 0; }
  .viewer { width: 100vw; height: 100svh; border: 0; }
  .vf__note { display: none; }
  .r401__title { font-size: 22vw; }
}

/* gerak minimal */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .grain, .cue { display: none; }
  .r401__hero.is-auto { animation: none; }
  /* laurel dan logo klien diam: tampilkan satu set saja (salinan aria-hidden untuk loop disembunyikan), tanpa masker tepi */
  .laurels__track, .marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; row-gap: 24px; padding-right: 0; }
  .laurels__track img[aria-hidden="true"], .marquee__track img[aria-hidden="true"] { display: none; }
  .laurels, .marquee { mask-image: none; }
  /* strip logo yang lebih lebar dari layar diperkecil utuh, tidak digepeng atau terpotong */
  .marquee__track img { max-width: 100%; object-fit: contain; }
  .monitor.is-scrolling .monitor__screen img { transform: none; }
}

/* tujuan lompatan jangkar menerima fokus lewat JS; tidak perlu cincin fokus di blok besar */
[data-jump]:focus { outline: none; }

/* cetak / simpan PDF: tinta gelap di kertas putih, keadaan akhir semua animasi */
@media print {
  .gate, .grain, .playbar, .viewer, .skip, .cue, .tip, .flare, .hero__video, .hero__shade, .hero__scroll, .billing,
  .viewfinder, .r401__bg, .laurels, .marquee, .slate__sticks { display: none !important; }
  :root { --light: #000; --light-2: #222; --light-3: #555; --line: #bbb; --line-2: #ddd; --bezel: #ccc; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body { overflow: visible !important; background: #fff !important; color: #000 !important; }
  .scene, .hero, .hero__frame, .hero__bar, .slate__board, .r401__hero, .nle, .plan, .seats__out div, .sim__out div,
  .tile, .board__panel figure, .btn--ghost, .filmstrip, .departures, .callsheet, .demo video { background: none !important; }
  .r401__hero::after { display: none; }
  .hero { min-height: 0; }
  .hero__frame { width: 100%; aspect-ratio: auto; }
  .hero__copy { position: static; width: auto; padding: 24px 0; }
  .slate { margin-top: 0; filter: none; }
  .desq, .crawl__inner > * { opacity: 1 !important; }
  .pin-spacer { padding: 0 !important; height: auto !important; }
  #linimasa { position: static !important; transform: none !important; top: auto !important; left: auto !important; width: auto !important; max-width: none !important; }
  .flywheel { position: static; }
  h2, h3, h4 { break-after: avoid; }
  .notes li, .ticket, .plan, .scheme, .track, .board__panel, tr { break-inside: avoid; }
  a { color: inherit; }
  .seg input:checked + span { background: #000; color: #fff; }
}