/* ═══════════════════════════════════════════════════════════════════════════
   APRESIA — HALAMAN MUKA
   ───────────────────────────────────────────────────────────────────────────
   Tata letak: satu kolom asimetris yang berganti keluarga bentuk tiap seksi —
   split hero, pita berjalan, panel mendatar, kalkulator dua kolom, timeline
   lengket, bento, akordeon, pernyataan penuh. Tidak ada dua seksi yang
   bentuknya sama, karena deretan seksi sebangun itulah yang membuat halaman
   lama terbaca sebagai templat.

   Warna dan huruf TIDAK dibuat baru: keduanya diwarisi dari apresia.css yang
   sudah memegang identitas Apresia. Yang dibangun di sini hanya lapisan
   halaman muka di atasnya.

   Satu aksen untuk seluruh halaman: --ungu. Emas BUKAN aksen kedua — ia warna
   semantik untuk angka uang, dan tidak dipakai untuk apa pun selain itu.

   Satu skala sudut: kartu 20px, kolom isian 12px, kendali bulat penuh.

   Gerakannya digerakkan linimasa gulir CSS (animation-timeline), bukan
   pendengar scroll yang menyala tiap bingkai. Yang tak terjangkau CSS
   dikerjakan IntersectionObserver di landing.js. Semuanya mati di
   prefers-reduced-motion, dan keadaan istirahat tiap elemen adalah keadaan
   TERLIHAT — kalau tak satu pun animasi jalan, halamannya tetap utuh.
   ═══════════════════════════════════════════════════════════════════════════ */

.lp {
  /* Dua warna sorot judul hero. Dijadikan token karena keduanya berbeda di
     tema terang — lihat .lp-hero h1 .sorot-* untuk angkanya. */
  --hero-iris: #7F64FF;
  --hero-emas: #DCA81C;
  /* Paletnya TIDAK di sini. Ia tinggal di apresia.css sebagai .tema-muka,
     karena halaman daftar kreator memakainya juga dan berkas ini hanya
     dimuat halaman muka. Yang tinggal di sini cuma nama singkat untuk
     dipakai aturan di bawah. */
  --aksen: var(--ungu);
  --aksen-isi: var(--ungu-isi);
  --aksen-mud: var(--ungu-mud);
  --uang: var(--emas);

  --r-kartu: 20px;
  --r-isian: 12px;
  --r-kendali: 999px;

  --kolom: 1180px;
  --tepi-h: clamp(20px, 5vw, 56px);
  /* Jarak antar seksi.

     Nilainya dipasang sebagai padding ATAS dan BAWAH tiap seksi, jadi di
     antara dua seksi ia selalu berlipat dua. Pada 184px itu berarti 368px
     ruang kosong di antara seksi, atau 41% layar di 900px tinggi, dan yang
     terbaca bukan kelegaan melainkan halaman yang terputus.

     96px di layar lebar, jadi 192px antar seksi. */
  --sela: clamp(64px, 6.6vw, 96px);

  --t-cepat: 180ms;
  --t-sedang: 420ms;
  --t-lambat: 900ms;
  --pegas: cubic-bezier(.16, 1, .3, 1);

  /* Latarnya di badan, dipasang .tema-muka — dipakai bersama halaman daftar
     kreator. Di sini cukup tembus supaya bidang miringnya terlihat. */
  background: transparent;
  color: var(--krem);
  font-family: var(--sans);
  overflow-x: clip;
  position: relative;
}

.lp *,
.lp *::before,
.lp *::after { box-sizing: border-box; }

.lp img { max-width: 100%; display: block; }

.lp ::selection { background: var(--aksen); color: #0B0F1C; }

.lp :focus-visible {
  outline: 2px solid var(--uang);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Lebar baca dipegang satu tempat. Seksi yang perlu melebar menimpanya sendiri. */
.lp-in {
  width: 100%;
  max-width: var(--kolom);
  margin-inline: auto;
  padding-inline: var(--tepi-h);
}

/* header DAN section: hero adalah <header>, dan tanpa baris ini bidang
   cahayanya memposisikan diri ke seluruh halaman, bukan ke hero. */
.lp section,
.lp header { position: relative; }

/* ───────────────────────────── tipografi ───────────────────────────── */

.lp h1, .lp h2, .lp h3 {
  font-family: var(--tampil);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.02;
  text-wrap: balance;
  margin: 0;
}

.lp h1 { font-size: clamp(32px, 4.2vw, 48px); }
.lp h2 { font-size: clamp(32px, 5vw, 60px); }
.lp h3 { font-size: clamp(19px, 2.1vw, 26px); letter-spacing: -.02em; line-height: 1.16; }

/* Instrument Serif miring membawa separuh kalimat judul. Ini bahasa merek yang
   sudah tertulis di apresia.css, bukan rupa yang dipungut dari mana-mana — dan
   dipakai SEKALI di halaman ini, di hero, supaya ia tetap jadi kejadian.

   line-height 1.1 dan padding bawah: tanpa keduanya, turunan huruf y/g/j/p/q
   terpotong garis kotaknya. */
.lp .serif {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -.012em;
  line-height: 1.1;
  padding-bottom: .07em;
  display: inline-block;
  color: var(--aksen);
}

.lp p { margin: 0; line-height: 1.62; color: var(--krem-2); }
.lp .teks { max-width: 58ch; font-size: clamp(16px, 1.3vw, 19px); }
.lp .kecil { font-size: 14px; color: var(--krem-3); line-height: 1.6; }

.lp .mata {
  font-family: var(--tampil);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--aksen);
  margin: 0 0 18px;
}

.lp .rp { color: var(--uang); font-variant-numeric: tabular-nums; }

/* ───────────────────────────── kendali ───────────────────────────── */

.lp .tbl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--r-kendali);
  border: 1px solid var(--tepi-2);
  background: var(--malam-3);
  color: var(--krem);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-cepat) ease, border-color var(--t-cepat) ease,
              transform 90ms ease, color var(--t-cepat) ease;
}
.lp .tbl:hover { background: var(--malam-4); border-color: var(--aksen); }
.lp .tbl:active { transform: translateY(1px); }

.lp .tbl.utama {
  background: var(--aksen-isi);
  border-color: var(--aksen-isi);
  color: #FFFFFF;
  font-weight: 700;
}
.lp .tbl.utama:hover { background: #6D4FE6; border-color: #6D4FE6; }

.lp .tbl.kecil { min-height: 42px; padding: 0 17px; font-size: 14px; }

.lp .tbl .ic { width: 18px; height: 18px; flex: none; }

/* ═══════════════════════════ NAVIGASI ═══════════════════════════
   Satu baris di desktop, tinggi 68px. Jadi bilah padat setelah hero lewat;
   pemicunya IntersectionObserver di landing.js, bukan pendengar scroll. */

.lp-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: 68px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background var(--t-sedang) ease, border-color var(--t-sedang) ease;
}
/* Tinggi satu layar penuh dikurangi tinggi navigasi: selama penanda ini masih
   terlihat, pembaca masih di bidikan pembuka. */
.lp-puncak {
  position: absolute;
  top: 0; left: 0;
  width: 1px;
  height: calc(100svh - 80px);
  pointer-events: none;
}

.lp-nav[data-rapat="1"] {
  /* --kaca, bukan warna tetap. Kacanya dulu hitam-ungu apa pun temanya, dan
     di tema terang tautan navigasinya jadi tinta gelap di atas kaca gelap
     begitu bilahnya memadat. */
  background: var(--kaca);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom-color: var(--tepi);
}

.lp-nav .lp-in { display: flex; align-items: center; gap: 26px; }

.lp-nav .tanda {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--tampil);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--krem);
  text-decoration: none;
  flex: none;
}
.lp-nav .tanda .ic { width: 28px; height: 28px; }

.lp-nav .tautan { display: flex; align-items: center; gap: 22px; }
.lp-nav .tautan a {
  font-size: 14.5px;
  font-weight: 550;
  color: var(--krem-2);
  text-decoration: none;
  padding: 7px 0;
  position: relative;
  white-space: nowrap;
  transition: color var(--t-cepat) ease;
}
.lp-nav .tautan a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1.5px;
  background: var(--aksen);
  transition: right var(--t-sedang) var(--pegas);
}
.lp-nav .tautan a:hover { color: var(--krem); }
.lp-nav .tautan a:hover::after { right: 0; }

.lp-nav .ujung { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; flex: none; }

@media (max-width: 900px) {
  .lp-nav .tautan { display: none; }
}
/* Di layar sempit, tombol Masuk di navigasi terpotong tepi kanan. Yang
   disembunyikan yang sekunder, bukan yang utama: Masuk tetap ada di seksi
   penutup dan di kaki halaman, sementara tombol utama tidak punya pengganti
   di mana pun. */
@media (max-width: 560px) {
  .lp-nav .ujung .tbl:not(.utama) { display: none; }
}

/* ═══════════════════════════ TIRAI PEMBUKA ═══════════════════════════
   Layar hitam sebelum dunianya terbuka. Ia TIDAK boleh bisa mengunci halaman:
   animasi `lp-angkat` menjalankan dirinya sendiri setelah 3,4 detik, jadi
   kegagalan skrip apa pun tetap berakhir dengan tirai terangkat. */
.lp-tirai {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--malam);
  display: grid;
  place-items: center;
  animation: lp-angkat .9s var(--pegas) 3.4s forwards;
}
.lp-tirai[data-angkat="1"] { animation: lp-angkat .9s var(--pegas) forwards; }
@keyframes lp-angkat {
  to { opacity: 0; visibility: hidden; transform: translate3d(0, -2%, 0); }
}
.tirai-isi { display: flex; flex-direction: column; align-items: center; gap: 18px; width: min(260px, 70vw); }
.tirai-tanda { width: 52px; height: 52px; color: var(--aksen); }
.tirai-bar { width: 100%; height: 2px; background: var(--tepi); border-radius: 2px; overflow: hidden; }
.tirai-bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--aksen), var(--uang));
  transition: width .3s linear;
}
.tirai-ket {
  font-family: var(--tampil);
  font-size: 11.5px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
  color: var(--krem-3); margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .lp-tirai { display: none; }
}

/* ═══════════════════════════ FILM ═══════════════════════════
   Satu seksi setinggi (jumlah bab × 100svh). Isinya dipaku, dan gulirnya
   menggerakkan kamera di dalam dunia. */
/* Film ini SELALU gelap, di tema mana pun.

   Bukan selera: yang digambarkannya studio pada malam hari, dan dunianya satu
   berkas SVG dengan isian gelap yang tidak bisa dibalik tanpa menggambar
   ulang seluruhnya. Teks babnya melayang DI ATAS dunia itu, bukan di dalam
   sebuah kotak — jadi tidak ada satu pun leluhur yang bisa memberi tahu
   bahwa latarnya gelap. Di tema terang, --krem jadi tinta gelap dan judul
   babnya hilang di atas studio yang tetap hitam.

   Caranya sama dengan .layar-gelap di apresia.css: token dasarnya dipatok di
   sini, dan seluruh isinya ikut tanpa satu pun selektor anak perlu ditulis
   ulang. */
.lp-film {
  --malam:#070A12; --malam-2:#0C1019; --malam-3:#111726; --malam-4:#19202F;
  --tepi:#1C2333; --tepi-2:#283145; --tepi-3:#3A4560;
  --krem:#EFF3FA; --krem-2:#A4AEC4; --krem-3:#7A8499;
  --ungu:#9A86FF; --ungu-isi:#5B3FD6; --ungu-mud:#15163A;
  --emas:#E9B949; --emas-2:#C8992F; --emas-mud:#2A2110;
  --hijau:#4FD494; --hijau-mud:#123528;
  --laju:#4FD6C4;

  --aksen:var(--ungu); --aksen-isi:var(--ungu-isi);
  --aksen-mud:var(--ungu-mud); --uang:var(--emas);

  --inset:#0E1422; --field:#0E1422;
  --tinta:var(--krem); --tinta-3:var(--krem-3);
  --kertas:var(--malam-3); --kertas-2:var(--malam-4); --kertas-3:var(--tepi);
  --txt:var(--krem); --mut:var(--krem-2); --dim:var(--krem-3);
  --bg:var(--malam); --card:var(--malam-3); --card2:var(--malam-4);
  --line:var(--tepi); --line2:var(--tepi-2); --line3:var(--tepi-3);
  --cy:var(--ungu); --gn:var(--hijau);

  height: calc(var(--bab, 7) * 100svh);
  background: var(--malam);
  color: var(--krem);
}
.film-paku {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

/* ─────────────────── PANGGUNG 3D ───────────────────
   Dinding: latar .film-paku sendiri, bukan persegi di dalam SVG. SVG-nya kini
   tembus pandang di luar benda-bendanya supaya lantai 3D terlihat di bawah
   mereka. */
.film-paku {
  background:
    radial-gradient(70% 55% at 50% 38%, #141A33, transparent 70%),
    linear-gradient(180deg, #0B0F1E 0%, #070A12 72%);
  perspective: 1700px;
  perspective-origin: 50% 42%;
}

/* Seluruh panggung berayun pelan mengikuti gulir — dari sedikit condong ke
   kiri di bab pertama sampai sedikit condong ke kanan di bab terakhir.
   Diperbesar 1,06 — cukup untuk menutupi tepi yang mundur saat panggungnya
   condong 5 derajat. Pada 1,1 lampu cincin di bidikan lebar ikut terpotong. */
.film-dunia {
  position: absolute; inset: 0;
  transform: rotateY(calc(var(--ayun, 0) * 1deg)) scale(1.06);
  /* Perspektif kedua, khusus untuk lantainya. Titik hilangnya setinggi
     mata — sedikit di atas tengah — sehingga lantainya terlihat dari atas,
     seperti dilihat orang yang berdiri di depan set. */
  perspective: 900px;
  perspective-origin: 50% 40%;
}
.dn-lapis {
  position: absolute; inset: 0;
  /* Titik asal transformnya titik (0,0) viewBox di layar — dihitung
     landing.js dari ukuran layar, karena svg `slice` memusatkan viewBox-nya
     dan titik itu jatuh di luar layar. Dengan asal di sana, transform CSS
     pembungkus sama persis dengan transform kamera di dalam viewBox. */
  transform-origin: var(--o-x, 0) var(--o-y, 0);
  backface-visibility: hidden;
}
/* overflow: visible WAJIB. viewBox 3200x1000 dengan `slice` lebih lebar dari
   kotak svg-nya, dan svg memotong isinya di batas kotaknya sendiri SEBELUM
   transform pembungkusnya diterapkan. Tanpa ini, saat kamera menjauh yang
   tersisa cuma pita selebar layar dari tengah set, diperkecil — meja,
   buku besar, dan bank terpotong habis. */
.dn-lapis > svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* Lantai: bidang yang engselnya di garis lantai (--hy) dan rebah ke arah
   penonton. Tingginya dibatasi 760px: dengan rotateX 78 derajat, titik
   terdekatnya sudah 740px ke arah penonton, dan bidang yang melewati jarak
   pandang (900px) terbalik dan pecah di layar. */
.dn-lantai3d {
  position: absolute;
  left: -100%; width: 300%;
  top: 0;
  height: 760px;
  transform-origin: 50% 0;
  /* Cakrawalanya digeser lewat translate, bukan `top`: mengubah `top` tiap
     bingkai gulir berarti menghitung ulang tata letak tiap bingkai. */
  transform: translate3d(0, var(--hy, 86vh), 0) rotateX(78deg);
  background-color: #0A0E1C;
  background-image:
    linear-gradient(rgb(154 134 255 / .16) 2px, transparent 2px),
    linear-gradient(90deg, rgb(154 134 255 / .16) 2px, transparent 2px),
    linear-gradient(180deg, #121733, #070A12 80%);
  background-size: var(--ubin, 180px) var(--ubin, 180px), var(--ubin, 180px) var(--ubin, 180px), 100% 100%;
  background-position: var(--lantai-x, 0px) 0, var(--lantai-x, 0px) 0, 0 0;
  box-shadow: inset 0 3px 0 rgb(154 134 255 / .35);
}

/* Sisi samping tiap benda — ketebalannya. */
.dn-sisi { fill: #03050B; stroke: #1C2333; stroke-width: 4; }
.dn-sisi-garis { fill: none; stroke: #03050B; stroke-width: 18; }
.dn-pantul { opacity: .9; pointer-events: none; }

/* Gelap di tepi. Begitu tepi gambarnya terlihat, ruangannya berhenti terasa
   sebagai ruangan dan kembali jadi gambar di dalam kotak. */
.film-vignet {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(130% 100% at 50% 50%, transparent 38%, rgba(12, 9, 24, .72) 78%, rgba(12, 9, 24, .95) 100%),
    linear-gradient(to right, rgba(12, 9, 24, .92) 0%, transparent 34%, transparent 66%, rgba(12, 9, 24, .5) 100%);
}
/* Butiran halus. Tetap, tidak ikut bergulir, dan pointer-events:none —
   menempelkannya pada wadah yang bergulir memaksa GPU menggambar ulang
   seluruh layar tiap bingkai. */
.film-butir {
  position: absolute; inset: 0; pointer-events: none; opacity: .055;
  background-image: radial-gradient(rgba(243, 237, 225, .9) .5px, transparent .5px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
}

/* ── HUD ──
   Dipinjam dari papan monitor siaran, bukan dari antarmuka web: angka bab
   besar di kiri, deret titik di kanan, persen di kaki. */
.film-hud {
  position: absolute; inset: 0; pointer-events: none;
  padding: calc(76px + env(safe-area-inset-top, 0px)) var(--tepi-h) 28px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: space-between;
  font-family: var(--tampil);
}
.hud-kiri { display: flex; align-items: center; gap: 14px; }
.hud-no {
  font-size: 13px; font-weight: 800; letter-spacing: .12em;
  color: var(--uang); font-variant-numeric: tabular-nums;
}
.hud-garis { width: 42px; height: 1px; background: var(--tepi-2); }
.hud-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .24em;
  text-transform: uppercase; color: var(--krem-3);
}
.hud-kanan {
  grid-column: 2; grid-row: 1 / span 2;
  align-self: center;
  display: flex; flex-direction: column; gap: 11px;
}
.hud-titik {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--tepi-2);
  transition: background var(--t-sedang) ease, transform var(--t-sedang) var(--pegas);
}
.hud-titik[data-aktif="1"] { background: var(--uang); transform: scale(1.5); }
.hud-bawah { grid-column: 1; align-self: end; }
.hud-persen {
  font-size: 54px; font-weight: 800; letter-spacing: -.04em;
  color: var(--krem); opacity: .13; font-variant-numeric: tabular-nums; line-height: 1;
}

.film-lewati {
  position: absolute;
  right: var(--tepi-h); bottom: 28px;
  font-size: 12px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
  color: var(--krem-3); text-decoration: none;
  border-bottom: 1px solid var(--tepi-2);
  padding-bottom: 3px;
  transition: color var(--t-cepat) ease, border-color var(--t-cepat) ease;
}
.film-lewati:hover { color: var(--krem); border-color: var(--uang); }

/* ── teks bab ──
   Satu tumpukan, satu tempat. Bab yang tidak aktif tetap ada di dokumen
   supaya mesin pencari dan pembaca layar membaca seluruh ceritanya. */
.film-teks {
  position: absolute;
  left: var(--tepi-h);
  bottom: clamp(64px, 11vh, 118px);
  width: min(560px, calc(100% - var(--tepi-h) * 2));
}
/* Bab keluar cepat dan utuh, lalu bab berikutnya masuk BERTAHAP: label,
   judul, paragraf, masing-masing sedikit menyusul yang sebelumnya. Keluar
   cepat supaya dua bab tidak pernah terbaca bertumpuk; masuk bertahap
   supaya mata punya urutan baca, bukan satu blok yang muncul sekaligus. */
.film-teks .bab {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}
.film-teks .bab.aktif {
  opacity: 1; visibility: visible;
  transition: opacity 260ms ease 200ms, visibility 0s;
}
.film-teks .bab > * {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  filter: blur(4px);
  transition: opacity 200ms ease, transform 200ms ease, filter 200ms ease;
}
.film-teks .bab.aktif > * {
  opacity: 1; transform: none; filter: none;
  transition: opacity 700ms var(--pegas), transform 900ms var(--pegas), filter 600ms ease;
}
.film-teks .bab.aktif > :nth-child(1) { transition-delay: 220ms; }
.film-teks .bab.aktif > :nth-child(2) { transition-delay: 320ms; }
.film-teks .bab.aktif > :nth-child(3) { transition-delay: 430ms; }
.film-teks .bab.aktif > :nth-child(4) { transition-delay: 540ms; }
.film-teks .bab-mata {
  font-family: var(--tampil);
  font-size: 11.5px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
  color: var(--aksen); margin: 0 0 14px;
}
.film-teks h1, .film-teks h2 { margin-bottom: 16px; }
/* Dua baris judul memang dua baris, bukan satu kalimat yang kebetulan
   terbungkus. Pergantian rupa di tengahnya hanya terbaca kalau patahannya
   jatuh tepat di antara keduanya. */
.film-teks h1 .naik { display: block; }
.film-teks h2 { font-size: clamp(28px, 3.6vw, 44px); }
.film-teks .teks { font-size: clamp(15px, 1.25vw, 18px); max-width: 52ch; }
.film-teks .tombol { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.film-teks .bab-cap {
  margin-top: 16px;
  font-family: var(--tampil);
  font-size: 15px; font-weight: 800;
  color: var(--uang);
}

/* Bidang gelap di belakang teks: dunianya terang di beberapa tempat, dan teks
   krem di atas lampu cincin emas tidak terbaca di mana pun. */
.film-teks::before {
  content: "";
  position: absolute;
  inset: -56px -80px -120px -120px;
  background:
    linear-gradient(to top, rgba(12, 9, 24, .96) 0%, rgba(12, 9, 24, .86) 42%, rgba(12, 9, 24, 0) 100%),
    linear-gradient(to right, rgba(12, 9, 24, .94) 0%, rgba(12, 9, 24, .55) 55%, rgba(12, 9, 24, 0) 100%);
  pointer-events: none;
}

/* Lima alat: hanya satu yang tampak, sisanya transparan di tempat yang sama. */
.dunia-svg .dn-alat { opacity: 0; }
.dunia-svg .dn-alat[data-tampil="1"] { opacity: 1; }

@media (max-width: 920px) {
  .film-teks { bottom: clamp(56px, 9vh, 92px); }
  .film-teks h2 { font-size: clamp(26px, 6vw, 34px); }
  .hud-persen { font-size: 38px; }
  .film-lewati { bottom: 22px; }
  /* Bidang gelapnya naik lebih tinggi: di layar tegak, teks bab memakan
     separuh tinggi layar, dan separuh layar yang terang di belakangnya membuat
     tak satu baris pun terbaca. */
  .film-teks::before {
    inset: -120px -40px -120px -40px;
    background: linear-gradient(to top,
      rgba(7, 10, 18, .97) 0%, rgba(7, 10, 18, .93) 55%, rgba(7, 10, 18, 0) 100%);
  }
}

/* ── tanpa gerak ──
   Pakunya dilepas, dan tiap bab jadi blok yang berdiri sendiri di atas
   potongan dunianya. Ceritanya tetap utuh, hanya tidak lagi berupa kamera. */
@media (prefers-reduced-motion: reduce) {
  .lp-film { height: auto; }
  .film-paku { position: static; height: auto; overflow: visible; padding-block: 96px 64px; }
  .film-dunia { position: relative; inset: auto; height: 46svh; border-radius: var(--r-kartu); overflow: hidden; }
  .film-hud, .film-vignet, .film-butir, .film-lewati { display: none; }
  .film-teks { position: static; width: auto; margin-top: 36px; }
  .film-teks::before { display: none; }
  .film-teks .bab > * { opacity: 1; transform: none; filter: none; }
  .film-teks .bab {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    padding-block: 28px;
    border-top: 1px solid var(--tepi);
  }
  .film-teks .bab:first-child { border-top: none; }
  .dunia-svg .dn-alat { opacity: 0; }
  .dunia-svg .dn-alat[data-alat-nama="donasi"] { opacity: 1; }
}

/* ── gerak sendiri di dalam dunia ──
   Empat, dan hanya empat. Menggerakkan semuanya membuat set ini jadi kembang
   api, dan kembang api tidak bisa dibaca. */
.dunia-svg .dn-nyala { animation: lp-nyala 5s ease-in-out infinite alternate; }
.dunia-svg .dn-denyut { animation: lp-kedip 2.4s ease-in-out infinite; }
.dunia-svg .dn-rec { animation: lp-kedip 1.6s ease-in-out infinite; }
.dunia-svg .dn-pindai { animation: lp-sinar 2.2s linear infinite; }
.dunia-svg .dn-susut { transform-origin: 140px 0; animation: lp-susut 5s linear infinite; }
.dunia-svg .dn-putar { transform-origin: 78px 75px; animation: lp-putar 14s linear infinite; }
.dunia-svg .dn-pasang { animation: lp-pasang 2.6s linear infinite; }
.dunia-svg .dn-pasang-titik { animation: lp-nyala 2.6s ease-in-out infinite alternate; }

.dunia-svg .dn-koin { offset-path: path('M2060 540 C2180 540 2200 470 2320 470'); animation: lp-alir 3.6s linear infinite; }
.dunia-svg .dn-koin.k0 { animation-delay: 0s; }
.dunia-svg .dn-koin.k1 { animation-delay: 1.2s; }
.dunia-svg .dn-koin.k2 { animation-delay: 2.4s; }
@keyframes lp-alir {
  0%        { offset-distance: 0%; opacity: 0; }
  12%, 84%  { opacity: 1; }
  100%      { offset-distance: 100%; opacity: 0; }
}

#dnOnAir { animation: lp-onair 6s steps(1, end) infinite; }
@keyframes lp-onair {
  0%, 92%  { opacity: 1; }
  94%      { opacity: .25; }
  96%      { opacity: 1; }
  98%      { opacity: .4; }
}

@media (prefers-reduced-motion: reduce) {
  .dunia-svg [class^="dn-"], #dnOnAir { animation: none; opacity: 1; }
}


/* ═══════════════════════════ PITA KREATOR ═══════════════════════════
   Satu-satunya pita berjalan di halaman ini. Isinya nama kreator yang
   benar-benar punya halaman aktif; kalau jumlahnya belum cukup, seksinya tidak
   dirender sama sekali, bukan diisi nama karangan. */

.lp-pita {
  padding-block: clamp(26px, 4vw, 42px);
  border-block: 1px solid var(--tepi);
  background: var(--malam-2);
  overflow: hidden;
}
.lp-pita .jalur { display: flex; width: max-content; }
@media (prefers-reduced-motion: no-preference) {
  .lp-pita .jalur { animation: lp-jalan 46s linear infinite; }
  .lp-pita:hover .jalur,
  .lp-pita:focus-within .jalur { animation-play-state: paused; }
}
@keyframes lp-jalan {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.lp-pita .pos {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  padding-inline: 26px;
  font-family: var(--tampil);
  font-size: clamp(17px, 2vw, 25px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--krem-2);
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--t-cepat) ease;
}
.lp-pita a.pos:hover { color: var(--aksen); }
.lp-pita .pos .ret {
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--tepi-3);
  transform: rotate(45deg);
  flex: none;
}


/* ═══════════════════════════ PENGHASILAN TERBUKA ═══════════════════════════
   Kendali di kiri, struk di kanan. Tarifnya dikirim server dari tabel yang sama
   yang dipakai MENAGIH, jadi angka di layar ini tidak bisa berbeda dari angka
   yang sungguhan terjadi. */

.lp-hitung { padding-block: var(--sela); }
.lp-hitung .lp-in {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(28px, 4vw, 62px);
  align-items: start;
}
.lp-hitung h2 { max-width: 13ch; margin-bottom: 18px; }
.lp-hitung .kendali { display: flex; flex-direction: column; gap: 24px; margin-top: 30px; }

.lp-hitung label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--krem-3);
  margin-bottom: 11px;
}

.lp-hitung .geser {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: var(--r-kendali);
  background: var(--tepi-2);
  outline-offset: 7px;
  cursor: pointer;
}
.lp-hitung .geser::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--aksen);
  border: 5px solid var(--malam);
  box-shadow: 0 0 0 1px var(--aksen);
  cursor: grab;
}
.lp-hitung .geser::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--aksen);
  border: 5px solid var(--malam);
  box-shadow: 0 0 0 1px var(--aksen);
  cursor: grab;
}

.lp-hitung .kanal { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-hitung .kanal button {
  min-height: 44px;
  padding: 0 17px;
  border-radius: var(--r-kendali);
  border: 1px solid var(--tepi-2);
  background: var(--malam-2);
  color: var(--krem-2);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-cepat) ease, border-color var(--t-cepat) ease, color var(--t-cepat) ease;
}
.lp-hitung .kanal button:hover { border-color: var(--tepi-3); color: var(--krem); }
.lp-hitung .kanal button[aria-pressed="true"] {
  background: var(--aksen-mud);
  border-color: var(--aksen);
  color: var(--krem);
}

/* ── kanan: struk ── */
.lp-struk {
  background: var(--malam-2);
  border: 1px solid var(--tepi);
  border-radius: var(--r-kartu);
  padding: clamp(22px, 3vw, 36px);
}
.lp-struk .utama {
  font-family: var(--tampil);
  font-size: clamp(38px, 5.8vw, 66px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--uang);
  font-variant-numeric: tabular-nums;
  margin-bottom: 7px;
}
.lp-struk .utama-ket { font-size: 14px; color: var(--krem-3); margin-bottom: 26px; }

.lp-struk dl { margin: 0; }
.lp-struk .row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: 13px;
}
/* Garis hanya di ANTARA baris, bukan mengelilingi tiap baris. */
.lp-struk .row + .row { border-top: 1px solid var(--tepi); }
.lp-struk .row dt { font-size: 14.5px; color: var(--krem-2); }
.lp-struk .row dd {
  margin: 0;
  font-family: var(--tampil);
  font-weight: 700;
  font-size: 15.5px;
  font-variant-numeric: tabular-nums;
  color: var(--krem);
  text-align: right;
}
.lp-struk .row.potong dd { color: var(--merah); }
.lp-struk .row dt small {
  display: block;
  font-size: 12px;
  color: var(--krem-3);
  font-weight: 400;
}

.lp-struk .nol {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 14px;
  /* Latarnya berpindah bersama tema (#123528 gelap, #DCFCE7 terang), jadi
     tintanya harus ikut berpindah juga. Ditulis tetap, teks mint pucatnya
     hilang di atas mint terang. --hijau: 4,99:1 di tema terang. */
  background: var(--hijau-mud);
  border: 1px solid color-mix(in srgb, var(--hijau) 45%, transparent);
  color: var(--hijau);
  font-size: 13.5px;
  line-height: 1.55;
}
.lp-struk .nol b { color: var(--hijau); }

@media (max-width: 920px) {
  .lp-hitung .lp-in { grid-template-columns: 1fr; }
}

/* ═══════════════════════════ LANGKAH ═══════════════════════════
   Jalur mendatar yang digulir sendiri oleh pembaca, bukan dipaku seperti film
   di atasnya. Dua seksi terpaku di satu halaman membuat yang kedua terasa
   seperti halaman yang macet.

   Jalurnya memakai gulir asli peramban: scroll-snap, roda, jari, dan tombol
   panah papan ketik semuanya bekerja tanpa satu baris skrip pun. Tombol panah
   di bawahnya tambahan, bukan satu-satunya jalan. */

.lp-langkah { padding-block: var(--sela); }
.lp-langkah .kepala { margin-bottom: clamp(28px, 4vw, 48px); }
.lp-langkah .kepala h2 { max-width: 16ch; margin-bottom: 16px; }

.langkah-kartu {
  background: var(--malam-3);
  border: 1px solid var(--tepi);
  border-radius: var(--r-kartu);
  padding: clamp(18px, 2vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition: border-color var(--t-sedang) ease, background var(--t-sedang) ease;
}
.langkah-kartu:hover { border-color: var(--tepi-3); background: var(--malam-4); }

/* --inset, bukan hitam tetap. Kelima panel ini memangku gambar dan kode yang
   tintanya memakai --krem: dengan latar hitam tetap, isinya jadi tinta gelap
   di atas hitam begitu tema terang dipilih, dan yang hilang bukan hiasan
   melainkan seluruh ilustrasinya. */
/* Tinggi gambarnya dibatasi, dan itu yang menentukan panjang seluruh seksi.

   Pada lebar kartu penuh, gambar 200x104 itu jadi 235px tinggi, kartunya
   386px, dan enam kartu menurun jadi 3.100px — tiga setengah layar untuk
   enam langkah. Dibatasi 160px, gambarnya tetap terbaca dan seksinya turun
   ke sekitar dua layar. */
.langkah-kartu .lg-gbr {
  width: 100%;
  max-height: 160px;
  height: auto;
  display: block;
  border-radius: 12px;
  background: var(--inset);
  border: 1px solid var(--tepi);
  padding: 10px;
}
.langkah-kartu h3 { color: var(--krem); }
.langkah-kartu p { font-size: 14.5px; }

/* Langkah terakhir yang membedakan dirinya, karena ia memang berbeda: di
   sinilah uangnya keluar. */
.langkah-kartu:last-child {
  background: linear-gradient(150deg, var(--emas-mud), var(--malam-3) 72%);
  border-color: #574318;
}
.langkah-baris:last-child .langkah-simpul { border-color: var(--uang); color: var(--uang); }

/* ─────────────── ALUR MENURUN BERSELANG-SELING ───────────────
   Tiga kolom: kartu, tulang punggung, kartu. Baris ganjil memakai kolom
   kiri dan baris genap kolom kanan, jadi zig-zagnya keluar dari posisi
   petak — bukan dari margin yang dihitung satu per satu. */
.langkah-alur {
  list-style: none;
  margin: 0 auto; padding-block: 0; padding-inline: var(--tepi-h);
  max-width: var(--kolom);
  position: relative;
  display: grid;
  gap: clamp(16px, 2.2vw, 30px);
}

/* Tulang punggungnya memudar di kedua ujung. Garis yang berhenti tegas di
   kartu pertama dan terakhir terbaca seperti terpotong, bukan seperti alur
   yang dimulai dan diakhiri. */
.langkah-alur::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 50%; translate: -50% 0;
  width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, transparent, var(--tepi) 7%, var(--tepi) 93%, transparent);
}

.langkah-baris {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
}
/* grid-row: 1 pada KEDUANYA, bukan cuma kolomnya.

   Penempatan otomatis petak hanya bergerak maju: simpul yang datang lebih
   dulu di dokumen mengambil baris 1 kolom 2, lalu kartunya tidak bisa
   mundur ke kolom 1 di baris yang sama dan turun ke baris kedua. Hasilnya
   angka melayang di atas kartunya, bukan sejajar dengannya. */
.langkah-baris > .langkah-kartu { grid-column: 1; grid-row: 1; }
.langkah-baris:nth-child(even) > .langkah-kartu { grid-column: 3; }

/* Simpul bernomor duduk DI ATAS garisnya, jadi latarnya tidak boleh tembus:
   garis yang menyeberang di belakang angka membuat angkanya tidak terbaca. */
.langkah-simpul {
  grid-column: 2; grid-row: 1;
  position: relative; z-index: 1;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--malam);
  border: 1px solid var(--tepi-2);
  font-family: var(--tampil);
  font-size: 14px; font-weight: 800;
  letter-spacing: .02em;
  color: var(--krem-2);
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════ UNTUK BRAND (bento) ═══════════════════════════
   Seperlima halaman untuk seperlima pasar. Enam sel untuk enam hal, tidak ada
   sel kosong, dan tiga di antaranya punya bidangnya sendiri supaya petaknya
   tidak jadi enam kotak teks yang sama. */

.lp-brand { padding-block: var(--sela); }
.lp-brand .kepala { margin-bottom: clamp(28px, 4vw, 50px); max-width: 54ch; }
.lp-brand .kepala h2 { margin-bottom: 16px; }

.lp-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.lp-bento .sel {
  border-radius: var(--r-kartu);
  border: 1px solid var(--tepi);
  background: var(--malam-3);
  padding: clamp(19px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: flex-end;
  min-height: 186px;
  transition: border-color var(--t-sedang) ease, transform var(--t-sedang) var(--pegas);
}
.lp-bento .sel:hover { border-color: var(--tepi-3); transform: translateY(-3px); }
.lp-bento .sel h3 { color: var(--krem); }
.lp-bento .sel p { font-size: 14.5px; }

.lp-bento .s1 { grid-column: span 4; min-height: 300px; justify-content: space-between;
  background: radial-gradient(120% 100% at 86% 8%, rgba(154, 134, 255, .3), transparent 60%), var(--malam-3); }
.lp-bento .s2 { grid-column: span 2; }
.lp-bento .s3 { grid-column: span 2; }
.lp-bento .s4 { grid-column: span 2;
  background: linear-gradient(150deg, var(--emas-mud), var(--malam-3) 74%);
  border-color: #574318; }
.lp-bento .s5 { grid-column: span 2; }
.lp-bento .s6 {
  grid-column: span 6;
  min-height: 0;
  background: var(--malam-2);
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
}

.lp-bento .kode {
  align-self: flex-start;
  font-family: var(--tampil);
  font-size: clamp(28px, 4.2vw, 50px);
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--krem);
  background: var(--inset);
  border: 1px solid var(--tepi-2);
  border-radius: 14px;
  padding: 12px 20px;
  font-variant-numeric: tabular-nums;
}
.lp-bento .besar {
  font-family: var(--tampil);
  font-size: clamp(30px, 3.8vw, 44px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--uang);
}

@media (max-width: 920px) {
  .lp-bento { grid-template-columns: repeat(2, 1fr); }
  .lp-bento .s1, .lp-bento .s6 { grid-column: span 2; }
  .lp-bento .s2, .lp-bento .s3, .lp-bento .s4, .lp-bento .s5 { grid-column: span 1; }
}
@media (max-width: 560px) {
  .lp-bento { grid-template-columns: 1fr; }
  .lp-bento .sel { grid-column: span 1; min-height: 0; }
}

/* ═══════════════════════════ HERO ═══════════════════════════
   Split 6/5, dan judulnya sekarang menyebut produknya di baris pertama.
   Dua tombol untuk dua pasar. */
/* ═══════════════════ HERO ═══════════════════
   Ukurannya diambil dari rancangan rujukan, bukan dikira-kira: tinggi satu
   layar penuh dengan isi di tengah, wadah 1440px, pias 40px, petak
   1,05fr/0,95fr berjarak 64px. */
.lp-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100dvh;
  padding-top: calc(64px + env(safe-area-inset-top, 0px));
  overflow: hidden;
}
.lp-hero .lp-in {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  padding: 80px 40px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 64px;
  align-items: center;
}

/* Dua bidang miring, dimiringkan 12 derajat. Gradiennya tipis — 10% — dan
   itu memang batasnya: yang boleh terlihat arah cahayanya, bukan warnanya. */
/* Pendar bulat. Dipakai seksi penutup, BUKAN hero — hero memakai dua bidang
   miring di bawah ini. Aturannya sempat ikut terhapus bersama hero lama dan
   seksi penutup kehilangan cahayanya tanpa melempar galat apa pun. */
.lp-cahaya {
  position: absolute; inset: -30% -10% auto; height: 170%;
  pointer-events: none; z-index: 0; filter: blur(90px); opacity: .42;
}
.lp-cahaya i { position: absolute; display: block; border-radius: 50%; }
.lp-cahaya i:nth-child(1) {
  width: 44vw; height: 44vw; left: -10vw; top: 2%;
  background: radial-gradient(circle, rgba(127, 100, 255, .5), transparent 68%);
}
.lp-cahaya i:nth-child(2) {
  width: 34vw; height: 34vw; right: -6vw; top: 26%;
  background: radial-gradient(circle, rgba(220, 168, 28, .28), transparent 68%);
}
@media (prefers-reduced-motion: no-preference) {
  .lp-cahaya i:nth-child(1) { animation: lp-apung 26s ease-in-out infinite alternate; }
  .lp-cahaya i:nth-child(2) { animation: lp-apung 34s ease-in-out infinite alternate-reverse; }
}
@keyframes lp-apung {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(4vw, -5vh, 0) scale(1.12); }
}

.lp-bidang { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.lp-bidang i {
  position: absolute; top: 0; bottom: 0; display: block;
  transform: skewX(-12deg);
}
.lp-bidang .kiri {
  left: -17%; width: 55%;
  background: linear-gradient(180deg, rgb(59 218 244 / .10), transparent 58%, rgb(127 100 255 / .10));
}
.lp-bidang .kanan {
  left: 73%; width: 41%;
  background: linear-gradient(180deg, rgb(220 168 28 / .10), transparent 70%);
}

/* Space Grotesk, 72px, tebal 600, line-height 1,0 dan tanpa penyempitan
   jarak huruf — semuanya angka dari rancangan rujukan. */
.lp-hero h1 {
  font-family: "Space Grotesk", var(--tampil);
  font-size: clamp(38px, 5vw, 72px);
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1;
  margin-bottom: 24px;
}
.lp-hero h1 .naik { display: block; }

/* Kata yang disorot memakai HURUF YANG SAMA, hanya warnanya yang berganti.

   Sebelumnya sorotan di judul dibawa Instrument Serif miring — bahasa merek
   yang tertulis di apresia.css. Di sini ia diganti atas permintaan: yang
   membedakan satu kata dari kata di sebelahnya cuma warnanya, sehingga
   kalimatnya tetap satu kalimat dan tidak terbaca seperti dua potongan yang
   disambung.

   Serif miring masih dipakai di seksi "Satu rel. Tiga pemain." */
.lp-hero h1 em {
  font-style: normal;
  font-weight: inherit;
  font-family: inherit;
}
/* Iris dan emas persis dari rujukan. Keduanya dipakai sebagai TEKS besar
   di sini, dan pada ukuran 72px keduanya jauh di atas ambang AA. */
/* Iris dan emas rujukan dipakai apa adanya di tema gelap. Di tema terang
   keduanya diturunkan, dan itu bukan selera: emas #DCA81C di atas kertas
   #F5F6FB cuma 2,01:1 — gagal bahkan untuk teks besar. #8C6209, emas tema
   terang yang sudah dipakai aplikasi, mencapai 5,03:1.

   Iris #7F64FF mencapai 3,76:1 di atas kertas — lolos untuk teks 72px, dan
   judul ini memang 72px — tapi ia tetap diturunkan supaya kedua kata sorot
   punya bobot yang sama; satu kata yang jelas di sebelah kata yang samar
   terbaca seperti salah satunya tidak sengaja. */
.lp-hero h1 .sorot-aksen { color: var(--hero-iris); }
.lp-hero h1 .sorot-uang  { color: var(--hero-emas); }

.lp-hero .teks {
  font-size: 20px; line-height: 28px;
  color: var(--krem-2);
  margin-bottom: 32px; max-width: 46ch;
}

.lp-hero .tombol { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* Tombolnya mengikuti rujukan: pil, 14px, tebal 600, tinggi 44.

   SATU hal yang tidak saya salin — isiannya. Rujukan memakai iris #7F64FF
   dengan teks #F6F8FF, dan pasangan itu cuma 3,83:1: lolos untuk teks besar,
   gagal untuk teks 14px seperti label tombol ini. #6344E6 warna yang sama
   keluarganya, selisihnya nyaris tak terlihat di sebelah aslinya, dan ia
   mencapai 5,65:1. */
.lp-hero .tbl.utama {
  gap: 9px;
  background: #6344E6; border-color: #6344E6; color: #F6F8FF;
  font-size: 14px; font-weight: 600;
  padding: 0 22px; height: 44px; min-height: 44px;
  border-radius: 999px;
}
.lp-hero .tbl.utama:hover { background: #5438D4; border-color: #5438D4; }
.lp-hero .tbl.utama .ic { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ─────────────────── PERAGAAN LAYAR SIARAN ───────────────────
   Dibangun dari HTML, bukan gambar: nominalnya diformat peladen dengan rp()
   yang sama dengan seluruh aplikasi, teksnya ikut berganti bahasa, dan
   semuanya tetap tajam di layar kerapatan berapa pun. */
/* Lebarnya dipatok 520px, bukan selebar kolomnya. Kolom 0,95fr di layar
   1440 memberi 616px, dan kartu selebar itu membuat tulisan di dalamnya
   lebih besar daripada di rancangan rujukan. */
.hero-panggung {
  position: relative; width: 100%; max-width: 520px; margin-inline: auto;
  /* Jarak pandang. Lebih pendek dari ini dan sudut kartunya terdistorsi
     seperti dilihat dari terlalu dekat; lebih panjang dan kedalamannya
     hilang, kartunya kembali terbaca pipih. */
  perspective: 1400px;
  perspective-origin: 50% 40%;
}

/* Kemiringan dibawa dua angka, --px dan --py (masing-masing -1..1), yang
   didaftarkan sebagai properti bertipe. Didaftarkan, keduanya bisa
   dianimasikan dan ditransisikan — sesuatu yang tidak bisa dilakukan
   variabel CSS biasa. Satu pasang angka itu yang menggerakkan kemiringan
   kartu DAN pergeseran lapisan di dalam ilustrasinya, jadi keduanya tidak
   pernah bisa berselisih. */
@property --px { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --py { syntax: '<number>'; inherits: true; initial-value: 0; }

.hp-tilt {
  position: relative;
  transform-style: preserve-3d;
  transform:
    rotateX(calc(6deg - var(--py) * 7deg))
    rotateY(calc(-13deg + var(--px) * 11deg));
  transition: --px .7s var(--pegas), --py .7s var(--pegas);
}

/* Bayangan lantai: elips kabur jauh di belakang kartu. Yang membuat kartunya
   terbaca melayang, bukan menempel di halaman. */
.hp-tilt::after {
  content: ''; position: absolute; left: 8%; right: 8%; bottom: -16%; height: 24%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(0 0 0 / .55), transparent);
  filter: blur(14px);
  transform: translateZ(-140px);
  pointer-events: none;
}

/* Cincin putus-putus di belakang kartunya. Dua lingkaran, bukan hiasan
   acak: yang digambarkan satu siaran yang jadi pusat, dan hal-hal yang
   mengorbitnya. */
.hp-orbit {
  position: absolute; inset: -3rem; pointer-events: none; z-index: 0;
  transform: translateZ(-110px);
  border: 1px dashed rgb(59 218 244 / .3);
  border-radius: 50%;
}
.hp-orbit span {
  position: absolute; width: .45rem; height: .45rem; border-radius: 50%;
  background: #3BDAF4; box-shadow: 0 0 20px #3BDAF4;
}
.hp-orbit span:nth-child(1) { top: 8%;  left: 28%; }
.hp-orbit span:nth-child(2) { top: 53%; right: 4%; background: #DCA81C; box-shadow: 0 0 20px #DCA81C; }
.hp-orbit span:nth-child(3) { bottom: 8%; left: 20%; background: #7F64FF; box-shadow: 0 0 20px #7F64FF; }

/* Kartunya SELALU gelap, di tema mana pun — sama seperti panggung overlay
   di seksi perkakas, dan dengan alasan yang sama: yang digambarkan layar
   siaran, dan di belakang layar siaran ada tangkapan permainan, bukan kertas
   putih.

   Karena itu tintanya ditulis apa adanya, BUKAN lewat var(--krem). Di tema
   terang --krem jadi tinta gelap, dan seluruh isi kartu ini hilang di atas
   panel hitamnya tanpa melempar galat apa pun.

   Latarnya pun dipatok, bukan kaca putih 6%: di atas halaman terang, kaca
   putih 6% membuat kepala kartunya jadi putih sementara layarnya tetap
   hitam — satu kartu dengan dua tema di dalamnya. */
.hp-kartu {
  --hp-tinta: #EFF3FA;
  --hp-tinta-2: #A4AEC4;
  /* Dinaikkan dari #7A8499: di atas panel alert yang pekat ia cuma 3,76:1,
     dan kutipan penontonnya teks 13,5px. #8A94AB mencapai 6,4:1. */
  --hp-tinta-3: #8A94AB;
  --hp-tepi: #242C40;
  --hp-emas: #DCA81C;
  --hp-laju: #3BDAF4;

  position: relative; z-index: 1;
  border: 1px solid rgb(246 248 255 / .12);
  border-radius: 10px;
  background: #0A0D16;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .07),
    0 40px 80px -36px rgb(0 0 0 / .95),
    0 0 0 1px rgb(127 100 255 / .08);
  /* TANPA overflow: hidden dan TANPA backdrop-filter. Keduanya termasuk
     properti yang memaksa isinya dipipihkan ke satu bidang, dan kartu yang
     isinya dipipihkan tidak bisa menampung overlay yang melayang di atas
     layarnya. Pemotongan sudut dipindah ke kepala dan layarnya sendiri. */
  transform-style: preserve-3d;
}

/* Ketebalan kartu: dua pelat di belakangnya. Terlihat di tepi saat kartunya
   condong, persis seperti tepi tablet yang dimiringkan. */
.hp-kartu::before,
.hp-kartu::after {
  content: ''; position: absolute; inset: -1px; border-radius: 10px;
  pointer-events: none;
}
.hp-kartu::before { background: #151A2E; transform: translateZ(-7px); }
.hp-kartu::after  { background: #05070E; transform: translateZ(-14px); }

.hp-kepala {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 19px;
  border-bottom: 1px solid var(--hp-tepi);
  border-radius: 9px 9px 0 0;
  background: rgb(246 248 255 / .055);
  font-size: 13.5px;
}
.hp-live { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: .1em; color: var(--hp-tinta); }
.hp-live .ic { width: 17px; height: 17px; stroke: var(--hp-emas); fill: none; stroke-width: 1.8; }
.hp-tonton { color: var(--hp-tinta-3); font-variant-numeric: tabular-nums; }

/* Panggungnya sendiri. Rasio 16:9 — ini layar siaran, dan layar siaran
   bentuknya begitu. */
.hp-layar {
  position: relative;
  /* 5:3, bukan 16:9 — diukur dari rancangan rujukan: kartunya 520×367 dengan
     kepala setinggi 56px, jadi layarnya 520×311. */
  aspect-ratio: 5 / 3;
  border-radius: 0 0 9px 9px;
  overflow: hidden;
  background:
    radial-gradient(72% 72% at 50% 40%, rgb(91 63 214 / .34), transparent 72%),
    linear-gradient(170deg, #161B3E, #080B16 74%);
}

/* Kilau kaca: satu pita cahaya miring menyapu layar tiap tujuh detik. */
.hp-layar::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / .09) 45%, rgb(255 255 255 / .02) 60%, transparent);
  transform: translateX(-160%) skewX(-12deg);
  pointer-events: none;
}

.hp-layar-bingkai { position: relative; transform-style: preserve-3d; }
.hp-lapis {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}

/* ─────────── TATA LETAK OVERLAY ───────────
   Mengikuti siaran sungguhan: kiri atas untuk saldo, kanan atas untuk
   sponsor, sepertiga bawah kanan untuk alert. Wajah kreatornya di tengah dan
   bersih — overlay yang menutupi wajah adalah overlay yang dipasang salah.

   Tiap papan melayang di kedalamannya sendiri (translate sumbu Z), dan
   lebih dekat berarti bergeser lebih jauh saat kartunya condong. Kedalaman
   dibawa properti `translate`, bukan `transform`, supaya animasi beat yang
   memakai `transform` tidak menghapusnya. */
.hp-saldo {
  position: absolute; top: 6%; left: 4%;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 11px;
  background: rgb(7 10 18 / .8);
  border: 1.5px solid var(--hp-emas);
  font-size: 13px;
  translate: 0 0 34px;
  box-shadow: 0 14px 30px -14px rgb(0 0 0 / .9), 0 0 24px -8px rgb(220 168 28 / .35);
}
.hp-saldo .ic { width: 15px; height: 15px; stroke: var(--hp-emas); fill: none; stroke-width: 1.7; }
.hp-saldo b  { color: var(--hp-emas); font-variant-numeric: tabular-nums; }
.hp-saldo em { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--hp-tinta-2); }

/* Ilustrasi kreatornya mengisi seluruh layar, di BELAKANG papan-papan
   overlay. Urutan dokumen yang mengaturnya — ia anak pertama .hp-layar, dan
   saldo, lencana, serta alert datang sesudahnya — jadi tidak ada z-index
   yang perlu dijaga.

   Ini membalik keputusan lama yang sengaja memakai siluet tanpa wajah. Yang
   diminta sekarang ilustrasi sungguhan, dan wajahnya dijaga sesederhana
   mungkin: dua lengkung mata dan satu mulut, cukup untuk terbaca senang. */
.hp-kreator {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.hp-mulut-tawa { opacity: 0; }
.hp-hati g path { opacity: 0; }

/* Tetap di DALAM kartu. Digeser keluar tepi kanan, ia terpotong 17px oleh
   overflow:hidden milik kartunya — dan overflow itu yang menjaga sudut
   membulatnya tetap membulat, jadi yang harus mengalah posisinya. */
.hp-brand {
  position: absolute; right: 4%; top: 6%;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 13px; border-radius: 11px;
  translate: 0 0 52px;
  box-shadow: 0 16px 32px -14px rgb(0 0 0 / .9), 0 0 28px -6px rgb(220 168 28 / .45);
  /* --hp-emas, bukan --emas: lencana ini tinggal di kartu yang selalu gelap,
     dan --emas di tema terang jadi #8C6209 — cokelat tua yang menelan teks
     gelapnya sendiri. */
  background: linear-gradient(140deg, var(--hp-emas), #B8881A);
  color: #241B06;
}
.hp-brand .ic { width: 15px; height: 15px; stroke: #241B06; fill: none; stroke-width: 1.8; flex: none; }
.hp-brand span { display: flex; flex-direction: column; line-height: 1.25; }
.hp-brand em { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .11em; opacity: .72; }
.hp-brand b  { font-size: 13.5px; }

.hp-alert {
  position: absolute; right: 4%; bottom: 6%; width: 55%;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px; border-radius: 13px;
  background: rgb(10 14 26 / .9);
  translate: 0 0 64px;
  box-shadow: 0 20px 40px -16px rgb(0 0 0 / .95), 0 0 30px -10px rgb(59 218 244 / .4);
  border: 1px solid var(--hp-tepi);
  backdrop-filter: blur(6px);
}
.hp-alert .ic { width: 17px; height: 17px; stroke: var(--hp-laju); fill: none; stroke-width: 1.8; flex: none; margin-top: 2px; }
.hp-alert-isi { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hp-alert-atas { display: flex; align-items: baseline; gap: 8px; font-size: 14px; color: var(--hp-tinta); }
.hp-alert-atas b { color: var(--hp-laju); font-variant-numeric: tabular-nums; }
.hp-alert-pesan { font-size: 12.5px; color: var(--hp-tinta-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Kartu target menggantung keluar dari kartunya, dan itu disengaja: yang
   digambarkan papan yang melayang di atas layar siaran, bukan bagian dari
   layarnya. */
.hp-target {
  position: absolute; left: -11%; bottom: -13%; z-index: 2;
  width: 55%; max-width: 230px;
  /* Paling dekat ke penonton — di depan kartunya sendiri. */
  translate: 0 0 96px;
  display: flex; flex-direction: column; gap: 9px;
  padding: 15px 17px;
  border-radius: 14px;
  background: var(--malam-3);
  border: 1px solid var(--tepi-2);
  box-shadow: 0 22px 50px -26px rgb(0 0 0 / .95);
}
.hp-cap { font-size: 10px; font-weight: 700; letter-spacing: .13em; color: var(--krem-3); }
.hp-bilah { display: block; height: 7px; border-radius: 99px; background: var(--tepi); overflow: hidden; }
.hp-bilah i { display: block; height: 100%; width: var(--isi); border-radius: inherit; background: var(--laju); }
.hp-ket { font-size: 12.5px; color: var(--krem-2); }

@media (prefers-reduced-motion: no-preference) {
  .lp-hero h1 .naik { animation: lp-naik var(--t-lambat) var(--pegas) backwards; }
  .lp-hero h1 .naik:nth-child(1) { animation-delay: 60ms; }
  .lp-hero h1 .naik:nth-child(2) { animation-delay: 180ms; }
  .lp-hero .teks { animation: lp-naik var(--t-lambat) var(--pegas) 310ms backwards; }
  .lp-hero .tombol { animation: lp-naik var(--t-lambat) var(--pegas) 410ms backwards; }
  .hero-panggung { animation: lp-naik 1.1s var(--pegas) 230ms backwards; }
}
@keyframes lp-naik {
  from { opacity: 0; transform: translate3d(0, 28px, 0); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 1023px) {
  /* Pias 40px memakan 21% lebar layar 375px. Rujukannya sendiri memakai 20px
     di bawah titik putus lg dan 40px di atasnya. */
  .lp-hero .lp-in { padding-inline: 20px; }
}
@media (max-width: 920px) {
  .lp-hero .lp-in { grid-template-columns: 1fr; }
  /* Judul lebih dulu, kartunya menyusul. Kartu setinggi 16:11 yang
     ditaruh di atas judul mendorong kalimat pembukanya keluar layar di
     ponsel — yang pertama dibaca jadi peragaan, bukan apa yang ditawarkan. */
  .hero-panggung { max-width: 480px; margin-top: 34px; }
  /* Alert sekarang di kanan bawah, jadi kartu target di kiri bawah tidak
     lagi bersaing tempat dengannya. Di ponsel ia cukup dirapatkan ke tepi. */
  .hp-target { left: -2%; bottom: -16%; }
}

.lp-kreator { padding-block: var(--sela); }
.lp-kreator .kepala { margin-bottom: clamp(30px, 4vw, 52px); }
.lp-kreator .kepala h2 { max-width: 20ch; margin-bottom: 16px; }

/* Dua kolom, dan yang pertama membentang keduanya.

   Sebelumnya lima baris penuh menurun. Yang salah bukan kerapiannya: lima
   baris selebar halaman membuat kolom teksnya 62 karakter di sebelah gambar
   selebar 300px, dan sisa ruang di kanannya kosong sepanjang lima kali. */
.cara-daftar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.cara {
  background: var(--malam-2);
  border: 1px solid var(--tepi);
  border-radius: var(--r-kartu);
  padding: clamp(20px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: background var(--t-sedang) ease, border-color var(--t-sedang) ease,
              transform var(--t-sedang) var(--pegas);
}
.cara:hover { background: var(--malam-3); border-color: var(--tepi-3); transform: translateY(-3px); }

/* Kartu pertama: gambar di kiri, teks di kanan, membentang dua kolom. */
.cara-utama {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  background:
    radial-gradient(110% 100% at 88% 10%, rgba(154, 134, 255, .22), transparent 62%),
    var(--malam-2);
  border-color: var(--tepi-2);
}
.cara-utama:hover { background:
    radial-gradient(110% 100% at 88% 10%, rgba(154, 134, 255, .26), transparent 62%),
    var(--malam-3); }
.cara-gbr .gbr-wrap { background: var(--inset); border: 1px solid var(--tepi); border-radius: 14px; padding: 12px; }
.cara-gbr .gbr { width: 100%; height: auto; display: block; color: var(--krem-2); }
.cara-isi h3 { color: var(--krem); margin-bottom: 8px; }
.cara-isi p { font-size: 15px; max-width: 62ch; }
.cara-bayar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 14px; font-size: 13.5px; color: var(--krem-3);
}
.cara-bayar span {
  font-family: var(--tampil); font-size: 11px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--aksen); background: var(--aksen-mud);
  border: 1px solid var(--tepi-3); border-radius: var(--r-kendali);
  padding: 4px 11px;
}
@media (max-width: 920px) {
  .cara-daftar { grid-template-columns: minmax(0, 1fr); }
  .cara-utama { grid-column: span 1; grid-template-columns: minmax(0, 1fr); }
}

.tempel { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.tempel-sel {
  background: var(--malam-3); border: 1px solid var(--tepi);
  border-radius: var(--r-kartu); padding: clamp(20px, 2.4vw, 28px);
}
.tempel-sel h3 { color: var(--krem); margin-bottom: 8px; }
.tempel-sel p { font-size: 14.5px; }
@media (max-width: 760px) { .tempel { grid-template-columns: 1fr; } }

/* ═══════════════════════ PERKAKAS OVERLAY ═══════════════════════
   Daftar di kanan, panggung contoh di kiri. Sorotan berpindah di antara
   keduanya: satu baris aktif menyalakan satu papan.

   Ukuran di dalam panggung memakai satuan cqw, bukan px. Panggungnya
   menyempit dari 600px di layar lebar sampai 320px di ponsel, dan papan
   berukuran px akan saling menimpa jauh sebelum itu. Dengan cqw seluruh
   isinya mengecil serentak seperti siaran yang dikecilkan, yang memang
   yang digambarkannya. */

.perkakas { margin-top: clamp(40px, 5vw, 64px); }
.perkakas-judul { margin-bottom: 22px; }
.perkakas-ket { margin: 16px 0 0; max-width: 62ch; }

/* Dua blok berdampingan, tingginya sama.

   Bingkainya TIDAK 16:9 di sini. Daftar delapan baris berketerangan di
   sebelahnya setinggi 507px, dan bingkai 16:9 selebar 573px hanya 322px —
   selisih 185px yang terbaca sebagai kolom kiri yang berhenti di tengah
   jalan. Melebarkan kolomnya tidak menutup selisih itu: daftar yang
   menyempit memecah keterangannya jadi lebih banyak baris, dan ia bertambah
   tinggi lebih cepat daripada bingkainya. Diukur di enam lebar kolom,
   selisihnya tetap 185–201px.

   Jadi aspeknya yang dilepas, dan angka resolusi di kepala bingkai ikut
   dihapus bersamanya — bukan dibiarkan jadi keterangan yang salah. Letak
   papannya tetap benar: di aplikasinya posisi widget memang disimpan sebagai
   sepasang angka 0–100, bukan piksel, persis supaya ia betul di panggung
   pratinjau maupun di browser source 1080p. */
.perkakas-isi {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}
.pg { display: flex; }
.pg > .pg-tepi { flex: 1; }

/* ───────────── panggung ───────────── */

.pg-tepi {
  container-type: inline-size;
  position: relative;
  min-height: 300px;
  border: 1px solid var(--tepi-2);
  border-radius: var(--r-kartu);
  overflow: hidden;
  isolation: isolate;

  /* Token panggung. Dipakai tiap papan, dan ditimpa sekaligus saat baris
     "Tema overlay" aktif — itulah cara seksi ini memperlihatkan apa yang
     sebenarnya diubah tema: rupa semua papan, bukan satu papan baru. */
  --ov-aks: #9A86FF;
  --ov-sudut: 10px;
  --ov-panel: rgb(6 9 18 / .76);
  --ov-tepi: #2C3756;
  --ov-huruf: var(--sans);

  /* Warna di dalam bingkai ditulis apa adanya, BUKAN lewat token tema.

     Layar siaran selalu gelap — di baliknya ada tangkapan permainan, bukan
     kertas putih — jadi panggung ini tetap gelap juga saat halamannya dibaca
     dalam mode terang. Kalau isinya memakai var(--krem), teksnya ikut
     berubah jadi tinta gelap di atas panel hitam dan hilang sama sekali. */
  --ov-teks: #EFF3FA;
  --ov-teks-2: #A4AEC4;
  --ov-teks-3: #7A8499;
  --ov-teks-4: #3A4560;

  /* Latarnya bukan tangkapan layar game. Dua pendar dan satu kisi tipis —
     cukup untuk membaca "ada sesuatu di belakang papan" tanpa mengaku
     sebagai gambar permainan yang tidak pernah kami punya. */
  background:
    radial-gradient(60% 70% at 22% 18%, rgb(91 63 214 / .30), transparent 70%),
    radial-gradient(55% 65% at 82% 76%, rgb(60 120 190 / .22), transparent 72%),
    repeating-linear-gradient(0deg, rgb(255 255 255 / .022) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgb(255 255 255 / .022) 0 1px, transparent 1px 44px),
    linear-gradient(160deg, #121733, #06080F 70%);
}

/* Vignette. Tanpa ini sudut-sudut bingkainya sama terangnya dengan
   tengahnya, dan papan di tepi kanan-kiri kehilangan tepinya sendiri. */
.pg-tepi::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(110% 100% at 50% 45%, transparent 48%, rgb(3 5 10 / .62));
}

/* Pendar di belakang bingkai, bukan di dalamnya: yang ditiru cahaya monitor
   yang jatuh ke dinding di belakangnya, dan itu yang membuat bingkainya
   terbaca sebagai layar yang menyala. */
.pg { position: relative; }
.pg::before {
  content: ''; position: absolute; inset: 8% 6%; z-index: -1;
  background: radial-gradient(60% 60% at 50% 50%, rgb(91 63 214 / .34), transparent 72%);
  filter: blur(46px);
}

.pg-hud {
  position: absolute; top: 2.4cqw; left: 2.6cqw; z-index: 3;
  display: inline-flex; align-items: center; gap: 1.4cqw;
  font-family: var(--tampil); font-size: clamp(8px, 1.7cqw, 12px);
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ov-teks-3);
}
.pg-hud em { font-style: normal; color: var(--ov-teks-4); }
.pg-rec {
  width: 1.3cqw; height: 1.3cqw; min-width: 5px; min-height: 5px;
  border-radius: 50%; background: #E2585C; flex: none;
}

.pg-papan {
  position: absolute; z-index: 2;
  display: flex; flex-direction: column; gap: .8cqw;
  padding: 1.5cqw 1.8cqw;
  font-family: var(--ov-huruf);
  font-size: clamp(8.5px, 1.95cqw, 15px);
  line-height: 1.35;
  color: var(--ov-teks);
  background: var(--ov-panel);
  border: 1px solid var(--ov-tepi);
  border-radius: var(--ov-sudut);
  backdrop-filter: blur(7px);
  transition: opacity var(--t-sedang) var(--pegas),
              transform var(--t-sedang) var(--pegas),
              border-color var(--t-sedang) var(--pegas),
              box-shadow var(--t-sedang) var(--pegas);
}

.pg-cap {
  font-family: var(--tampil); font-weight: 700;
  font-size: clamp(7.5px, 1.6cqw, 12px);
  letter-spacing: .13em; text-transform: uppercase; color: var(--ov-teks-3);
}
.pg-tumpuk { display: flex; flex-direction: column; gap: .7cqw; min-width: 0; }

.pg-baris {
  display: flex; align-items: center; gap: 1.1cqw;
  color: var(--ov-teks-2); white-space: nowrap;
}
.pg-baris b {
  flex: none; width: 2.6cqw; min-width: 10px; text-align: center;
  font-size: clamp(7.5px, 1.55cqw, 12px); font-weight: 700;
  color: var(--ov-aks);
}
.pg-baris em { margin-left: auto; font-style: normal; color: var(--ov-teks-3); }
.pg-baris.sunyi { opacity: .55; }

.pg-bar {
  display: block; height: 1.1cqw; min-height: 4px; border-radius: 99px;
  background: rgb(255 255 255 / .1); overflow: hidden;
}
.pg-bar.besar { height: 1.6cqw; min-height: 6px; }
.pg-bar i { display: block; height: 100%; width: var(--isi); border-radius: inherit; background: var(--ov-aks); }

/* letak tiap papan */
.pg-alert     { top: 8%; left: 50%; width: 42%; translate: -50% 0; flex-direction: row; align-items: center; gap: 1.4cqw; }
.pg-kode      { top: 7%;  right: 4%; width: 21%; flex-direction: row; align-items: center; gap: 1.3cqw; }
.pg-antrean   { top: 32%; left: 4%;  width: 23%; }
.pg-pendukung { top: 27%; right: 4%; width: 27%; }
.pg-media     { top: 47%; left: 50%; width: 24%; translate: -50% 0; align-items: center; gap: 1cqw; padding: 2.4cqw 1.8cqw; }
.pg-milestone { bottom: 15%; left: 4%; width: 33%; }
.pg-teks      { bottom: 0; left: 0; right: 0; width: auto; border-radius: 0; border-width: 1px 0 0; padding: 1.2cqw 2cqw; overflow: hidden; }

.pg-ava {
  flex: none; width: 5.2cqw; height: 5.2cqw; min-width: 20px; min-height: 20px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--ov-aks), #4E7BD8);
}
.pg-nm { display: flex; align-items: baseline; gap: 1.2cqw; font-weight: 650; }
.pg-nm em { font-style: normal; color: var(--ov-aks); font-weight: 700; }
.pg-ps { color: var(--ov-teks-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pg-qr, .pg-main { flex: none; fill: none; stroke: var(--ov-aks); stroke-width: 1.7; }
.pg-qr  { width: 5.4cqw; height: 5.4cqw; min-width: 18px; min-height: 18px; }
.pg-main { width: 6.4cqw; height: 6.4cqw; min-width: 20px; min-height: 20px; }

.pg-jalan { display: flex; gap: 3cqw; white-space: nowrap; color: var(--ov-teks-2); width: max-content; }
.pg-jalan span::after { content: '·'; margin-left: 3cqw; color: var(--ov-teks-4); }

/* ───────────── sorotan ─────────────
   Saat satu baris aktif, papan lain TIDAK disembunyikan — hanya diredupkan.
   Papan yang hilang membuat panggungnya terbaca berubah isi tiap dua detik;
   yang diredupkan tetap memperlihatkan bahwa kedelapannya hidup bersama di
   satu layar, yang memang keadaan sebenarnya. */
.perkakas-isi[data-nyala] .pg-papan { opacity: .32; }
.perkakas-isi[data-nyala="alert"]     .pg-alert,
.perkakas-isi[data-nyala="kode"]      .pg-kode,
.perkakas-isi[data-nyala="antrean"]   .pg-antrean,
.perkakas-isi[data-nyala="pendukung"] .pg-pendukung,
.perkakas-isi[data-nyala="media"]     .pg-media,
.perkakas-isi[data-nyala="milestone"] .pg-milestone,
.perkakas-isi[data-nyala="teks"]      .pg-teks {
  opacity: 1;
  border-color: var(--ov-aks);
  box-shadow: 0 0 0 1px rgb(154 134 255 / .25), 0 10px 30px -12px rgb(91 63 214 / .55);
}
.perkakas-isi[data-nyala="alert"]     .pg-alert,
.perkakas-isi[data-nyala="kode"]      .pg-kode,
.perkakas-isi[data-nyala="antrean"]   .pg-antrean,
.perkakas-isi[data-nyala="pendukung"] .pg-pendukung,
.perkakas-isi[data-nyala="media"]     .pg-media,
.perkakas-isi[data-nyala="milestone"] .pg-milestone { scale: 1.045; }

/* Tema: tidak ada papan yang disorot, karena yang diubah tema adalah rupa
   SEMUA papan. Huruf, kepekatan panel, dan sudutnya berganti serentak —
   tiga dari empat hal yang disebut keterangannya, terlihat langsung. */
.perkakas-isi[data-nyala="tema"] .pg-papan { opacity: 1; }
.perkakas-isi[data-nyala="tema"] .pg-tepi {
  --ov-sudut: 2px;
  --ov-panel: rgb(4 6 13 / .93);
  --ov-tepi: #3A4560;
  --ov-huruf: var(--tampil);
}

/* ───────────── daftar ───────────── */

.perkakas-daftar {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--tepi); border: 1px solid var(--tepi);
  border-radius: var(--r-kartu); overflow: hidden;
  align-self: stretch;
}
.perkakas-daftar li {
  position: relative;
  background: var(--malam-2); padding: 15px 16px 16px;
  display: flex; flex-direction: column; gap: 5px;
  transition: background var(--t-cepat) ease;
}
/* Garis aksen di tepi kiri baris aktif. Warna latar saja terlalu sunyi di
   petak yang seluruhnya gelap. */
.perkakas-daftar li::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 2px;
  background: var(--aksen); opacity: 0;
  transition: opacity var(--t-cepat) ease;
}
.perkakas-daftar b { font-size: 14px; color: var(--krem); font-weight: 650; }
.perkakas-daftar span { font-size: 12.5px; color: var(--krem-2); line-height: 1.5; }

.pk-ikon {
  width: 17px; height: 17px; fill: none; stroke: var(--krem-3); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; margin-bottom: 3px;
  transition: stroke var(--t-cepat) ease;
}

.perkakas-isi[data-nyala="alert"]     li[data-pk-baris="alert"],
.perkakas-isi[data-nyala="milestone"] li[data-pk-baris="milestone"],
.perkakas-isi[data-nyala="pendukung"] li[data-pk-baris="pendukung"],
.perkakas-isi[data-nyala="teks"]      li[data-pk-baris="teks"],
.perkakas-isi[data-nyala="antrean"]   li[data-pk-baris="antrean"],
.perkakas-isi[data-nyala="kode"]      li[data-pk-baris="kode"],
.perkakas-isi[data-nyala="media"]     li[data-pk-baris="media"],
.perkakas-isi[data-nyala="tema"]      li[data-pk-baris="tema"] { background: var(--malam-3); }

.perkakas-isi[data-nyala="alert"]     li[data-pk-baris="alert"]::before,
.perkakas-isi[data-nyala="milestone"] li[data-pk-baris="milestone"]::before,
.perkakas-isi[data-nyala="pendukung"] li[data-pk-baris="pendukung"]::before,
.perkakas-isi[data-nyala="teks"]      li[data-pk-baris="teks"]::before,
.perkakas-isi[data-nyala="antrean"]   li[data-pk-baris="antrean"]::before,
.perkakas-isi[data-nyala="kode"]      li[data-pk-baris="kode"]::before,
.perkakas-isi[data-nyala="media"]     li[data-pk-baris="media"]::before,
.perkakas-isi[data-nyala="tema"]      li[data-pk-baris="tema"]::before { opacity: 1; }

.perkakas-isi[data-nyala="alert"]     li[data-pk-baris="alert"] .pk-ikon,
.perkakas-isi[data-nyala="milestone"] li[data-pk-baris="milestone"] .pk-ikon,
.perkakas-isi[data-nyala="pendukung"] li[data-pk-baris="pendukung"] .pk-ikon,
.perkakas-isi[data-nyala="teks"]      li[data-pk-baris="teks"] .pk-ikon,
.perkakas-isi[data-nyala="antrean"]   li[data-pk-baris="antrean"] .pk-ikon,
.perkakas-isi[data-nyala="kode"]      li[data-pk-baris="kode"] .pk-ikon,
.perkakas-isi[data-nyala="media"]     li[data-pk-baris="media"] .pk-ikon,
.perkakas-isi[data-nyala="tema"]      li[data-pk-baris="tema"] .pk-ikon { stroke: var(--aksen); }

@media (prefers-reduced-motion: no-preference) {
  .pg-rec { animation: pg-rec 2s ease-in-out infinite; }
  .pg-jalan { animation: pg-jalan 18s linear infinite; }
}
@keyframes pg-rec { 50% { opacity: .25; } }
@keyframes pg-jalan { to { transform: translateX(-50%); } }

/* Di bawah 1040px kedua blok bertumpuk, dan tidak ada lagi saudara yang
   tingginya harus diikuti. Di situ bingkainya kembali 16:9 — bentuk layar
   siaran yang sebenarnya, yang hanya dilepas demi kesejajaran. */
@media (max-width: 1040px) {
  .perkakas-isi { grid-template-columns: minmax(0, 1fr); }

  /* min-height ikut dicabut, bukan hanya aspeknya dikembalikan. Dibiarkan,
     bingkai beraspek 16:9 setinggi 300px memaksa lebarnya jadi 533px di layar
     375px — meluber keluar kolom, dan overflow-x: clip pada .lp menyembunyikan
     luberannya alih-alih melaporkannya. */
  .pg > .pg-tepi { aspect-ratio: 16 / 9; flex: none; min-height: 0; width: 100%; }
}
@media (max-width: 560px) {
  .perkakas-daftar { grid-template-columns: minmax(0, 1fr); }

  /* Di ponsel bingkainya tinggal 335px, dan huruf terkecil yang masih pantas
     dibaca (8,5px) jadi JAUH lebih besar dibanding bingkainya daripada di
     layar lebar. Papan yang muat di 27% lebar layar 573px tidak muat lagi.

     Yang dikorbankan isinya, bukan hurufnya: nominal dan baris ketiga tiap
     papan hilang, papannya melebar. Papan yang isinya terpotong di tengah
     kata terbaca sebagai gambar rusak; papan dengan dua baris penuh tidak. */
  .pg-baris.sunyi,
  .pg-baris em { display: none; }

  /* Kotak alert bergeser ke kiri dari tengah: selebar apa pun ia dibuat,
     di tengah layar 335px ia selalu menabrak papan kode iklan di kanan
     atas. Di layar lebar keduanya muat berdampingan dan alert tetap di
     tengah, tempatnya yang sebenarnya di siaran. */
  .pg-alert     { width: 50%; left: 36%; }
  .pg-kode      { width: 27%; }
  .pg-antrean   { width: 31%; top: 34%; }
  .pg-pendukung { width: 32%; top: 30%; }
  .pg-media     { width: 24%; top: 44%; }
  .pg-milestone { width: 33%; }
}

/* ═══════════════════════════ TIGA PEMAIN ═══════════════════════════
   Dua kolom: kalimatnya di kiri, orbitnya di kanan. Orbitnya SVG, kartunya
   HTML yang diposisikan di atasnya dalam persen — jadi ia ikut mengecil
   bersama panggungnya tanpa satu pun angka piksel yang harus diperbaiki per
   lebar layar. */
/* Satu-satunya sorotan di halaman ini yang bukan indigo. Yang dibicarakan
   seksinya tiga pihak yang bergerak pada saat yang sama, dan itu arti tosca
   di sini — sama seperti H+0 di bilah angka. */
.lp-tiga .serif { color: var(--laju); }

.lp-tiga {
  padding-block: var(--sela);
  overflow: hidden;
}
.lp-tiga .lp-in {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.tg-kata h2 { margin-bottom: 18px; }
.tg-kata h2 span { display: block; }
.tg-kata .teks { margin-bottom: 26px; }

.tg-daftar { margin: 0; display: flex; flex-direction: column; gap: 1px;
  background: var(--tepi); border: 1px solid var(--tepi); border-radius: var(--r-kartu); overflow: hidden; }
.tg-daftar > div { background: var(--malam-2); padding: 14px 16px; display: flex; gap: 14px; align-items: baseline; }
/* Label, bukan nominal. Emas di halaman ini artinya "ini sejumlah uang", dan
   "Satu akun" bukan sejumlah uang — ia nama baris. Dengan palet baru yang
   kontrasnya lebih tinggi, tiga label emas di tengah daftar terbaca seperti
   tiga angka yang lupa ditulis angkanya. */
.tg-daftar dt {
  font-family: var(--tampil); font-size: 13.5px; font-weight: 800;
  color: var(--krem); white-space: nowrap; flex: none; min-width: 112px;
}
.tg-daftar dd { margin: 0; font-size: 13.5px; color: var(--krem-2); line-height: 1.5; }

/* ── panggung ── */
.tg-panggung { position: relative; aspect-ratio: 900 / 620; }
.tg-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }

.tg-lantai { opacity: .5; }

.tg-orbit { fill: none; stroke: #3B4675; stroke-width: 1.8; }
/* Lintasan digambar sendiri saat seksinya masuk layar. Panjangnya dihitung
   peramban lewat pathLength relatif, jadi ketiganya selesai bersamaan
   walaupun panjang sebenarnya berbeda. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .tg-orbit {
      stroke-dasharray: 1 1;
      stroke-dashoffset: 1;
      animation: tg-gambar linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 34%;
    }
  }
}
/* pathLength="1" ditulis sebagai ATRIBUT SVG pada <path>-nya, bukan di sini:
   `pathLength` bukan properti CSS, jadi baris CSS-nya tidak melakukan apa pun
   dan `stroke-dasharray: 1 1` dihitung dalam piksel — orbitnya jadi
   titik-titik permanen selebar satu piksel, bukan garis yang tergambar.
   Dengan atributnya terpasang, satu satuan sama dengan satu panjang penuh. */
@keyframes tg-gambar { to { stroke-dashoffset: 0; } }

.tg-tali {
  fill: none; stroke: url(#tgGaris); stroke-width: 1.4;
  stroke-dasharray: 5 7; opacity: .75;
}
@media (prefers-reduced-motion: no-preference) {
  .tg-tali { animation: tg-tarik 3s linear infinite; }
  .tg-tali.t2 { animation-duration: 3.8s; }
  .tg-tali.t3 { animation-duration: 4.4s; }
}
@keyframes tg-tarik { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }

.tg-denyut { opacity: 0; transform-origin: 580px 330px; }
@media (prefers-reduced-motion: no-preference) {
  .tg-denyut { animation: tg-denyut 4.2s ease-out infinite; }
  .tg-denyut.d2 { animation-delay: 1.4s; }
  .tg-denyut.d3 { animation-delay: 2.8s; }
}
@keyframes tg-denyut {
  0%        { opacity: .55; transform: scale(1); }
  70%, 100% { opacity: 0;   transform: scale(2.6); }
}

/* ── partikel ──
   offset-path memakai jalur yang SAMA dengan orbitnya, ditulis ulang di sini
   karena offset-path tidak bisa menunjuk ke <path> lewat id di semua peramban.
   Kalau salah satu jalur di Blade diubah, yang di bawah ini ikut. */
.tg-partikel { offset-rotate: 0deg; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .tg-partikel { animation: tg-alir 7s linear infinite; }
}
.tg-partikel.p1  { offset-path: path("M110 318 Q480 78 846 292"); animation-duration: 6.4s; }
.tg-partikel.p1b { offset-path: path("M110 318 Q480 78 846 292"); animation-duration: 6.4s; animation-delay: .5s; }
.tg-partikel.p2  { offset-path: path("M110 318 Q480 352 846 292"); animation-duration: 5.2s; animation-delay: 1.1s; }
.tg-partikel.p3  { offset-path: path("M846 292 Q480 610 110 318"); animation-duration: 7.6s; animation-delay: .3s; }
.tg-partikel.p3b { offset-path: path("M846 292 Q480 610 110 318"); animation-duration: 7.6s; animation-delay: .8s; }
@keyframes tg-alir {
  0%        { offset-distance: 0%;   opacity: 0; }
  10%, 86%  { opacity: 1; }
  100%      { offset-distance: 100%; opacity: 0; }
}

/* ── inti ── */
.tg-inti {
  position: absolute;
  left: 64.4%; top: 53.2%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
}
/* Ubin gelap, lambang terang — mengikuti brand/apresia-appicon.svg, termasuk
   warna ubin dan sinar violet di sudut kanan atasnya. */
.tg-inti-kotak {
  width: clamp(56px, 7.2vw, 88px); aspect-ratio: 1;
  border-radius: 22%;
  background:
    radial-gradient(75% 75% at 72% 16%, rgba(109, 79, 230, .45), transparent 70%),
    linear-gradient(145deg, #1B1E46, #080C18);
  display: grid; place-items: center;
  box-shadow:
    0 0 0 1px rgba(154, 134, 255, .45),
    0 0 0 7px rgba(154, 134, 255, .07),
    0 20px 54px rgba(12, 9, 24, .7);
}
.tg-inti-kotak img { width: 62%; height: 62%; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .tg-inti-kotak { animation: tg-apung 7s ease-in-out infinite alternate; }
}
@keyframes tg-apung { from { transform: translateY(-5px); } to { transform: translateY(5px); } }

.tg-inti-label {
  font-family: var(--tampil);
  font-size: 10.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--krem-3); white-space: nowrap;
}

/* ── kartu pemain ── */
.tg-kartu {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: clamp(12px, 1.4vw, 18px) clamp(14px, 1.8vw, 22px);
  /* Diturunkan dari --malam-2 lewat color-mix, bukan ditulis tetap: warna
     tetap hitam-ungu membuat nama di dalamnya — yang memakai --krem — jadi
     tinta gelap di atas kartu gelap begitu tema terang dipilih. */
  background: color-mix(in srgb, var(--malam-2) 82%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--tepi-2);
  border-radius: 16px;
  text-align: center;
  white-space: nowrap;
}
.tg-kartu b { font-family: var(--tampil); font-size: clamp(14px, 1.3vw, 17px); font-weight: 800; color: var(--krem); }
.tg-kartu small {
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--krem-3);
}
.tg-ikon {
  width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid var(--tepi-3); background: var(--ungu-mud);
  display: grid; place-items: center; color: var(--aksen);
}
.tg-ikon .ic { width: 17px; height: 17px; }

.k-kreator  { left: 0;    top: 42%; transform: translateY(-50%); }
.k-penonton { right: 0;   top: 10%; }
.k-brand    { right: 3%;  bottom: 8%; }

@media (prefers-reduced-motion: no-preference) {
  .tg-kartu { animation: tg-apung 6s ease-in-out infinite alternate; }
  .k-penonton { animation-duration: 7.4s; animation-direction: alternate-reverse; }
  .k-brand    { animation-duration: 8.2s; }
}

/* ── layar sempit ──
   Kartu yang mengambang di atas orbit jadi tumpang tindih begitu panggungnya
   mengecil. Di bawah 860px kartunya turun jadi tiga kolom di bawah orbitnya,
   dan orbitnya tetap utuh sebagai gambar. */
@media (max-width: 860px) {
  .lp-tiga .lp-in { grid-template-columns: minmax(0, 1fr); }
  .tg-panggung { aspect-ratio: auto; }
  .tg-svg { position: relative; aspect-ratio: 900 / 620; }
  .tg-inti { left: 64.4%; top: 44%; }
  .tg-kartu {
    position: static;
    transform: none;
    animation: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }
  .tg-kartu b { font-size: 14px; }
  .tg-kartu small { display: none; }
  .tg-panggung {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  .tg-svg { grid-column: span 3; }
}

/* ═══════════════════════════ KREATOR DI APRESIA ═══════════════════════════
   Ubinnya sendiri (.kk-*) hidup di apresia.css, bukan di sini: halaman daftar
   kreator memakai ubin yang sama dan tidak memuat berkas ini. Yang tinggal di
   sini cuma bingkai seksinya. */
.lp-kreatorku {
  padding-block: var(--sela);
  background: var(--malam-2);
  border-block: 1px solid var(--tepi);
}
.lp-kreatorku .kepala { margin-bottom: clamp(26px, 3.5vw, 44px); }
.lp-kreatorku .kepala h2 { max-width: 18ch; margin-bottom: 16px; }
.lp-kreatorku .kk-kaki { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: clamp(20px, 2.4vw, 28px); }

/* ═══════════════════════════ UNTUK BRAND ═══════════════════════════ */
.lp-brand { padding-block: var(--sela); }
.lp-brand .kepala { margin-bottom: clamp(28px, 4vw, 50px); max-width: 60ch; }
.lp-brand .kepala h2 { margin-bottom: 16px; }

.bl-petak { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.bl-sel {
  grid-column: span 2;
  background: var(--malam-3);
  border: 1px solid var(--tepi);
  border-radius: var(--r-kartu);
  padding: clamp(20px, 2.4vw, 28px);
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color var(--t-sedang) ease, transform var(--t-sedang) var(--pegas);
}
.bl-sel:hover { border-color: var(--tepi-3); transform: translateY(-3px); }
.bl-sel h3 { color: var(--krem); }
.bl-sel p { font-size: 14.5px; }
.bl-besar { grid-column: span 4;
  background: radial-gradient(120% 100% at 86% 8%, rgba(154, 134, 255, .28), transparent 60%), var(--malam-3); }
.bl-uang { background: linear-gradient(150deg, var(--emas-mud), var(--malam-3) 74%); border-color: #574318; }
.bl-lebar { grid-column: span 6; }

.bl-kode {
  align-self: flex-start;
  font-family: var(--tampil);
  font-size: clamp(26px, 3.6vw, 44px);
  font-weight: 800; letter-spacing: .14em;
  color: var(--krem);
  background: var(--inset); border: 1px solid var(--tepi-2);
  border-radius: 14px; padding: 10px 18px;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.bl-besar-angka {
  font-family: var(--tampil);
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 800; letter-spacing: -.03em; line-height: 1;
  color: var(--uang);
}
.bl-butir { margin: 4px 0 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 7px; }
.bl-butir li { font-size: 13.5px; color: var(--krem-2); line-height: 1.5; }
.bl-butir li::marker { color: var(--aksen); }
.bl-cap { margin-top: auto; padding-top: 10px; font-size: 13px; color: var(--krem-3); }

.bl-hasil { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 6px 16px; }
.bl-hasil span {
  font-size: 13.5px; color: var(--krem-2);
  background: var(--malam-2); border: 1px solid var(--tepi);
  border-radius: var(--r-kendali); padding: 7px 14px;
}
.bl-lebar .tbl { align-self: flex-start; }

/* Di bawah 760px zig-zagnya dilepas. Dua kolom kartu di layar 375px
   menyisakan sekitar 140px per kartu — lebih sempit daripada kalimat
   terpendek di dalamnya. Tulang punggungnya pindah ke kiri dan keenam
   kartunya berbaris lurus. */
@media (max-width: 760px) {
  .langkah-alur::before { left: 23px; translate: none; }
  .langkah-baris { grid-template-columns: auto minmax(0, 1fr); }
  .langkah-baris > .langkah-kartu,
  .langkah-baris:nth-child(even) > .langkah-kartu { grid-column: 2; }
  .langkah-simpul { grid-column: 1; width: 40px; height: 40px; font-size: 13px; }
}

@media (max-width: 920px) {
  .bl-petak { grid-template-columns: repeat(2, 1fr); }
  .bl-sel, .bl-besar, .bl-lebar { grid-column: span 2; }
}
@media (max-width: 560px) { .bl-petak { grid-template-columns: 1fr; } .bl-sel { grid-column: span 1; } }

/* ═══════════════════════════ TANYA (akordeon) ═══════════════════════════ */

.lp-tanya {
  padding-block: var(--sela);
  background: var(--malam-2);
  border-block: 1px solid var(--tepi);
}
.lp-tanya .lp-in { max-width: 880px; }
.lp-tanya h2 { margin-bottom: clamp(26px, 4vw, 44px); }

.lp-tanya details { border-top: 1px solid var(--tepi); }
.lp-tanya details:last-of-type { border-bottom: 1px solid var(--tepi); }

.lp-tanya summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 18px;
  padding-block: 22px;
  font-family: var(--tampil);
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--krem);
  transition: color var(--t-cepat) ease;
}
.lp-tanya summary::-webkit-details-marker { display: none; }
.lp-tanya summary:hover { color: var(--aksen); }
.lp-tanya summary .ret {
  margin-inline-start: auto;
  width: 24px; height: 24px;
  flex: none;
  position: relative;
}
.lp-tanya summary .ret::before,
.lp-tanya summary .ret::after {
  content: "";
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 2px;
  margin-top: -1px;
  background: var(--aksen);
  border-radius: 2px;
  transition: transform var(--t-sedang) var(--pegas);
}
.lp-tanya summary .ret::after { transform: rotate(90deg); }
.lp-tanya details[open] summary .ret::after { transform: rotate(0deg); }

.lp-tanya details p {
  padding: 0 44px 24px 0;
  font-size: 15.5px;
  max-width: 68ch;
}
@media (prefers-reduced-motion: no-preference) {
  .lp-tanya details[open] p { animation: lp-buka var(--t-sedang) var(--pegas); }
}
@keyframes lp-buka {
  from { opacity: 0; transform: translate3d(0, -8px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ═══════════════════════════ PENUTUP ═══════════════════════════ */

.lp-tutup { padding-block: clamp(104px, 14vw, 190px); text-align: center; overflow: hidden; }
.lp-tutup .lp-in { max-width: 920px; position: relative; z-index: 1; }
.lp-tutup h2 { font-size: clamp(36px, 6.6vw, 82px); margin-bottom: 22px; }
.lp-tutup .teks { margin: 0 auto 34px; text-align: center; }
.lp-tutup .tombol { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Kakinya pindah ke apresia.css — ia sekarang dipakai halaman publik lain
   juga, dan berkas ini hanya dimuat halaman muka. */

/* ═══════════════════════════ UMUM ═══════════════════════════ */

/* Garis kemajuan baca di puncak halaman: lebarnya kemajuan gulir, digerakkan
   linimasa gulir CSS, tanpa satu baris JavaScript pun. */
.lp-maju {
  position: fixed;
  inset: 0 auto auto 0;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--aksen), var(--uang));
  z-index: 70;
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .lp-maju { animation: lp-isi linear both; animation-timeline: scroll(root block); }
}
@keyframes lp-isi { to { transform: scaleX(1); } }

/* Masuk saat terlihat, untuk bagian yang tidak punya gerakannya sendiri.
   Keadaan istirahatnya TERLIHAT: kalau skripnya gagal muat atau pengamatnya
   tidak pernah menyala, halamannya tetap lengkap terbaca. */
@media (prefers-reduced-motion: no-preference) {
  .lp [data-masuk] {
    opacity: 0;
    transform: translate3d(0, 26px, 0);
    transition: opacity var(--t-lambat) var(--pegas), transform var(--t-lambat) var(--pegas);
    transition-delay: var(--tunda, 0ms);
  }
  .lp [data-masuk].tampil { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lp *,
  .lp *::before,
  .lp *::after {
    animation: none;
    transition-duration: 1ms;
  }
  .lp [data-masuk] { opacity: 1; transform: none; }
}

/* ═══════════════════════════ ILUSTRASI ═══════════════════════════
   Aturan gerak untuk sistem ilustrasi di _gambar.blade.php. Dipindahkan apa
   adanya dari lembar gaya sebelumnya, karena adegannya tidak berubah: yang
   dirombak halamannya, bukan gambarnya.

   Titik putar ditulis dalam koordinat viewBox, jadi kotak acuannya harus
   view-box, bukan kotak masing-masing bentuk. */
.lp .gbr [class^="p-"] { transform-box: view-box; }

.lp .p-pulse { animation: lp-kedip 2s ease-in-out infinite; }
@keyframes lp-kedip {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(1.3); }
}

.lp .p-alert-cinematic { animation: lp-lompat 3.5s cubic-bezier(.34, 1.56, .64, 1) infinite; }
@keyframes lp-lompat {
  0%, 80%, 100% { transform: translateY(0) scale(1); }
  85%           { transform: translateY(-6px) scale(1.03); }
}

.lp .p-bar-animated { animation: lp-batang 2.8s ease-in-out infinite alternate; }
@keyframes lp-batang {
  from { height: 60px; y: 58px; }
  to   { height: 90px; y: 28px; }
}

.lp .p-drum-spin { transform-origin: 88px 54px; animation: lp-putar 12s linear infinite; }
@keyframes lp-putar { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.lp .p-ticket-float { animation: lp-kupon 3s ease-in-out infinite alternate; }
@keyframes lp-kupon { from { transform: translateY(0); } to { transform: translateY(-5px); } }

.lp .p-cap-cinematic { animation: lp-kupon 3.4s ease-in-out infinite alternate; }

.lp .p-koin { transform-origin: center; animation: lp-koin 3.4s ease-in-out infinite; }
.lp .p-koin.k1 { animation-delay: 0s; }
.lp .p-koin.k2 { animation-delay: .34s; }
.lp .p-koin.k3 { animation-delay: .68s; }
@keyframes lp-koin {
  0%        { transform: translateY(10px); opacity: 0; }
  18%       { opacity: 1; }
  70%, 100% { transform: translateY(-34px); opacity: 0; }
}

/* ── Tonton & Klaim ──
   Bilah hitung mundur menyusut lalu mengulang, ponselnya mengapung, dan berkas
   pindainya berjalan ke arah QR. Tiga gerakan, tiga irama yang berbeda: kalau
   ketiganya seirama, adegannya terbaca sebagai satu benda yang bergoyang. */
.lp .p-iklan-bilah { transform-origin: 70px 0; animation: lp-susut 4.5s linear infinite; }
@keyframes lp-susut {
  0%        { transform: scaleX(1); }
  88%, 100% { transform: scaleX(0); }
}

.lp .p-iklan-hp { animation: lp-kupon 5s ease-in-out infinite alternate; }

.lp .p-iklan-sinar { animation: lp-sinar 2.2s linear infinite; }
@keyframes lp-sinar {
  from { stroke-dashoffset: 22; opacity: .85; }
  to   { stroke-dashoffset: 0; opacity: .25; }
}

@media (prefers-reduced-motion: reduce) {
  .lp .gbr [class^="p-"] { animation: none; opacity: 1; }
  .lp .p-koin { opacity: 1; }
}

/* ═══════════ ILUSTRASI GARIS-TANGAN DI DALAM HALAMAN MUKA ═══════════
   Set kedua (_langkah_gambar), dipakai di perhentian studio dan di tiga sel
   bento. Paletnya palet tinta, bukan palet permukaan, jadi ia butuh bidangnya
   sendiri supaya tidak melayang di atas kartu. */
.lp .lg-gbr {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  background: var(--inset);
  border: 1px solid var(--tepi);
  padding: 10px;
}

/* ── bidang di sel bento ── */
.lp-bento .sel .lg-gbr { margin-bottom: 4px; }
.lp-bento .s2 .lg-gbr,
.lp-bento .s3 .lg-gbr,
.lp-bento .s5 .lg-gbr { max-height: 104px; object-fit: contain; }

/* ── gerak adegan studio ── */
.lp .p-studio-lampu { animation: lp-nyala 5s ease-in-out infinite alternate; }
@keyframes lp-nyala { from { opacity: .35; } to { opacity: 1; } }

.lp .p-studio-alert { animation: lp-lompat 4.2s cubic-bezier(.34, 1.56, .64, 1) infinite; }
.lp .p-studio-qr { animation: lp-kupon 6s ease-in-out infinite alternate; }

/* ── gerak dua adegan garis-tangan yang baru ── */
.lp .lg-alert { animation: lp-lompat 4s cubic-bezier(.34, 1.56, .64, 1) infinite; }
.lp .lg-pasang { animation: lp-pasang 2.6s linear infinite; }
@keyframes lp-pasang {
  from { stroke-dashoffset: 22; }
  to   { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lp .p-studio-lampu,
  .lp .p-studio-alert,
  .lp .p-studio-qr,
  .lp .lg-alert,
  .lp .lg-pasang { animation: none; opacity: 1; }
}

/* ── navigasi di layar paling sempit ──
   Pada 375px, logo lengkap + dua sakelar + tombol utama tidak muat, dan yang
   terpotong tepi kanan justru tombolnya. Yang dilepas kata "Apresia" di
   sebelah logonya: lambangnya tetap ada, nama halamannya tetap diumumkan
   pembaca layar lewat aria-label, dan tombolnya muat utuh. */
@media (max-width: 480px) {
  .lp-nav .lp-in { gap: 12px; }
  .lp-nav .ujung { gap: 8px; }
  .lp-nav .tanda .kata { display: none; }
  .lp-nav .ujung .tbl.kecil { padding: 0 14px; }
}

/* ─────────── GERAK PERAGAAN ───────────
   Yang digerakkan BUKAN hiasan: ia rantai kejadian yang memang terjadi tiap
   kali ada donasi masuk — alert muncul di layar, saldo naik sebesar donasi
   itu, dan bilah target ikut maju. Satu putaran memperagakan satu donasi,
   dan putarannya selalu persis sama, jadi ia terbaca sebagai peragaan yang
   berulang, bukan sebagai data yang sedang hidup.

   Keadaan DIAM-nya keadaan sesudah: alert terlihat, saldo Rp2.450.000, 72%.
   Tanpa skrip dan pada prefers-reduced-motion, itulah yang tampil — bukan
   kartu setengah jadi dengan alert yang hilang. */
.hp-alert, .hp-saldo b, .hp-bilah i, .hp-ket {
  transition: opacity .45s var(--pegas), transform .45s var(--pegas),
              width .9s var(--pegas), color .3s ease;
}

/* Sebelum donasi: alert belum ada, saldo dan target masih nilai lama. */
.hero-panggung[data-beat="diam"] .hp-alert {
  opacity: 0; transform: translateY(14px);
}
.hero-panggung[data-beat="masuk"] .hp-alert {
  opacity: 1; transform: none;
}
.hero-panggung[data-beat="naik"] .hp-saldo b { color: #F6D889; }
.hero-panggung[data-beat="naik"] .hp-saldo {
  border-color: var(--hp-emas);
  box-shadow: 0 0 0 4px rgb(233 185 73 / .13);
}

/* Bilah targetnya cuma bergerak satu angka, dan itu memang benar: saldo
   Rp2.450.000 di 72% berarti targetnya sekitar Rp3,4 juta, jadi donasi
   Rp50.000 bernilai 1,5 angka. Melebih-lebihkan loncatannya akan membuat
   kartunya tidak lagi cocok dengan dirinya sendiri.

   Jadi yang ditambah bukan jaraknya melainkan perhatiannya: bilahnya
   menyala sebentar supaya mata menangkap bahwa ia bergerak. */
.hero-panggung[data-beat="naik"] .hp-bilah i {
  box-shadow: 0 0 14px 1px rgb(79 214 196 / .75);
}
.hp-bilah i { transition: width .9s var(--pegas), box-shadow .5s ease; }
.hp-saldo { transition: border-color .4s ease, box-shadow .4s ease; }

@media (prefers-reduced-motion: no-preference) {
  /* Titik LIVE berdenyut. Satu-satunya gerak di kartu ini yang tidak
     menceritakan apa-apa selain dirinya sendiri — dan itu memang tugas
     lampu on-air. */
  .hp-live .ic { animation: hp-denyut 2.2s ease-in-out infinite; }

  /* Cincinnya berputar sangat pelan. Di bawah satu putaran per menit,
     geraknya tidak tertangkap sebagai gerak — yang terasa cuma bahwa
     gambarnya tidak benar-benar diam. */
  .hp-orbit i:nth-child(1) { animation: hp-putar 90s linear infinite; }
  .hp-orbit i:nth-child(2) { animation: hp-putar 70s linear infinite reverse; }
}
@keyframes hp-denyut { 50% { opacity: .35; } }

@media (prefers-reduced-motion: no-preference) {
  .hp-orbit span { animation: hp-kedip 3.4s ease-in-out infinite; }
  .hp-orbit span:nth-child(2) { animation-delay: 1.1s; }
  .hp-orbit span:nth-child(3) { animation-delay: 2.2s; }
}
@keyframes hp-kedip { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes hp-putar { to { transform: rotate(360deg); } }

/* ─────────── GERAK KREATOR ───────────
   Dua lapis gerak, dan masing-masing di elemennya sendiri supaya tidak
   saling menimpa transform:

   - .hp-badan bernapas dan .hp-kepala mengangguk pelan sepanjang waktu.
     Orang di depan kamera tidak pernah diam sempurna, dan gambar yang diam
     sempurna terbaca sebagai gambar, bukan siaran.
   - .hp-reaksi melonjak SEKALI saat donasi masuk, bersama mulut yang
     tertawa dan tiga hati yang naik dari bahunya.

   Reaksinya dipasang pada beat "masuk" DAN "naik". Putarannya bergerak
   masuk -> naik -> masuk, dan selektor yang hanya mencocokkan "masuk" akan
   lepas lalu cocok lagi — memutar lonjakannya dua kali untuk satu donasi.
   Dengan keduanya, aturannya terus cocok sejak alert muncul sampai putaran
   berikutnya, dan animasinya berjalan tepat sekali. */
@media (prefers-reduced-motion: no-preference) {
  .hp-badan  { transform-origin: 250px 300px; animation: hp-napas 4.2s ease-in-out infinite; }
  .hp-kepala { transform-origin: 250px 205px; animation: hp-angguk 6.4s ease-in-out infinite; }
  .hp-cincin circle:first-child { animation: hp-kedip 3.8s ease-in-out infinite; }
  .hp-neon { animation: hp-neon 5.6s steps(1, end) infinite; }
  .hp-lampu-headphone { animation: hp-kedip 1.6s ease-in-out infinite; }

  /* Seluruh ruangnya mengambang dan bergoyang pelan — bukan cuma kartunya.
     Goyangnya digerakkan --px/--py yang sama dengan kursor, jadi di ponsel
     (tanpa kursor) kartunya tetap condong ke sana kemari dan lapisan di
     dalam ilustrasinya ikut bergeser. Begitu kursor masuk, kelas
     .dipegang mematikan goyangan ini dan kursornya yang mengambil alih. */
  .hp-tilt {
    animation:
      hp-goyang 11s ease-in-out infinite,
      hp-mengambang 6.5s ease-in-out infinite;
  }
  .hp-tilt.dipegang { animation: hp-mengambang 6.5s ease-in-out infinite; }

  .hp-layar::after { animation: hp-kilau 7s ease-in-out infinite; }

  .hp-mata { transform-box: fill-box; transform-origin: center; animation: hp-kedip-mata 4.8s infinite; }

  .hero-panggung:is([data-beat="masuk"], [data-beat="naik"]) .hp-reaksi {
    transform-origin: 250px 300px;
    animation: hp-lonjak .7s var(--pegas) 1;
  }
  .hero-panggung:is([data-beat="masuk"], [data-beat="naik"]) .hp-hati g path {
    animation: hp-hati 1.9s cubic-bezier(.2, .7, .3, 1) 1 both;
  }
  .hero-panggung:is([data-beat="masuk"], [data-beat="naik"]) .hp-hati g:nth-child(2) path { animation-delay: .18s; }
  .hero-panggung:is([data-beat="masuk"], [data-beat="naik"]) .hp-hati g:nth-child(3) path { animation-delay: .36s; }
}

/* Tawanya tidak bergantung pada gerak: pada prefers-reduced-motion yang
   hilang lonjakan dan hatinya, bukan ekspresinya. */
.hero-panggung:is([data-beat="masuk"], [data-beat="naik"]) .hp-mulut      { opacity: 0; }
.hero-panggung:is([data-beat="masuk"], [data-beat="naik"]) .hp-mulut-tawa { opacity: 1; }
.hp-mulut, .hp-mulut-tawa { transition: opacity .25s ease; }

@keyframes hp-napas  { 50% { transform: translateY(-2.5px) scaleY(1.008); } }
@keyframes hp-angguk { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.8deg); } }
@keyframes hp-lonjak {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-10px) rotate(-1.5deg); }
  70%  { transform: translateY(2px); }
  100% { transform: translateY(0); }
}
@keyframes hp-hati {
  0%   { opacity: 0; transform: translate(0, 0) scale(.6); }
  15%  { opacity: 1; transform: translate(0, -14px) scale(1.15); }
  100% { opacity: 0; transform: translate(14px, -120px) scale(.9); }
}
/* Neon yang berkedip seperti tabung sungguhan: hampir selalu menyala, lalu
   padam sesaat dua kali berturut-turut. */
@keyframes hp-neon {
  0%, 100% { opacity: 1; }
  91% { opacity: .35; } 92% { opacity: 1; } 94% { opacity: .35; } 95% { opacity: 1; }
}
/* Goyangan melewati 0,0 di 0% — saat kursor pergi dan goyangannya
   dipasang lagi dari awal, kartunya tidak melompat. */
@keyframes hp-goyang {
  0%, 100% { --px: 0;   --py: 0; }
  25%      { --px: .55; --py: -.3; }
  50%      { --px: .1;  --py: .35; }
  75%      { --px: -.5; --py: -.15; }
}
@keyframes hp-mengambang { 50% { translate: 0 -8px; } }
@keyframes hp-kilau {
  0%, 62%  { transform: translateX(-160%) skewX(-12deg); }
  86%, 100% { transform: translateX(420%) skewX(-12deg); }
}
@keyframes hp-kedip-mata { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.1); } }

/* Lapisan di dalam ilustrasi bergeser dengan jarak berbeda — dinding paling
   sedikit dan ke arah berlawanan, meja paling jauh. Diperbesar sedikit
   supaya pergeserannya tidak memperlihatkan tepi kosong. */
.hp-dalam-belakang, .hp-dalam-tengah, .hp-dalam-depan { transform-box: view-box; }
.hp-dalam-belakang {
  transform-origin: 250px 150px;
  transform: translate(calc(var(--px) * -7px), calc(var(--py) * -4px)) scale(1.05);
}
.hp-dalam-tengah {
  transform: translate(calc(var(--px) * 4px), calc(var(--py) * 2px));
}
.hp-dalam-depan {
  transform-origin: 250px 280px;
  transform: translate(calc(var(--px) * 11px), calc(var(--py) * 5px)) scale(1.06);
}

/* Mata: terbuka dan berkedip sepanjang waktu, tersenyum saat donasi masuk. */
.hp-mata-senang { opacity: 0; transition: opacity .2s ease; }
.hp-mata-buka   { transition: opacity .2s ease; }
.hero-panggung:is([data-beat="masuk"], [data-beat="naik"]) .hp-mata-buka   { opacity: 0; }
.hero-panggung:is([data-beat="masuk"], [data-beat="naik"]) .hp-mata-senang { opacity: 1; }

/* Di ponsel layarnya tinggal sekitar 335x200, dan papan overlay berukuran px
   tidak ikut mengecil seperti ilustrasinya. Diperkecil di sini supaya
   proporsinya terhadap wajah kreator tetap seperti di layar lebar. */
@media (max-width: 560px) {
  .hp-saldo { padding: 5px 8px; gap: 5px; font-size: 11px; }
  .hp-saldo .ic { width: 12px; height: 12px; }
  .hp-saldo em { display: none; }
  .hp-brand { padding: 5px 9px; gap: 6px; }
  .hp-brand .ic { width: 12px; height: 12px; }
  .hp-brand em { font-size: 7.5px; }
  .hp-brand b { font-size: 11px; }
  .hp-alert { width: 60%; padding: 7px 9px; gap: 6px; border-radius: 10px; }
  .hp-alert .ic { width: 13px; height: 13px; }
  .hp-alert-atas { font-size: 11.5px; gap: 5px; }
  .hp-alert-pesan { font-size: 10.5px; }

  /* Kartu target paling dekat ke penonton (Z 96px), jadi di layar sempit
     proyeksinya membesar dan melebar paling jauh — sampai menutupi baris
     "Rina mengirim". Diturunkan ke bawah kartu dan dipersempit. */
  .hp-target { left: 3%; bottom: -31%; width: 46%; padding: 11px 13px; gap: 7px; }
}