/* Lark PDF Reader — gaya situs publik.
   Beranda = salinan presisi mockup 11 Okt 2026 (1024 x 1536 px). Satuan: di beranda,
   1rem = 10 px mockup dan ikut lebar layar (lihat html:has(.beranda)), jadi semua angka
   di sini = koordinat mockup / 10. Ilustrasi di panggung memakai em (= 1rem).
   Koordinat panggung relatif terhadap pojok kiri atas wadahnya (mis. pahlawan: x-36, y-70).
   Tanpa JavaScript (CSP: script-src 'none'); ilustrasi = HTML/CSS + SVG sebaris.
   Huruf: Inter (OFL), di-host sendiri. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Inter-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Inter-variable-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* === Dasar === */
:root {
  color-scheme: light;
  --fg: #0c1733;
  --fg2: #1f2a44;
  --muted: #6a7891;
  --biru: #1650f5;
  --garis: #e2e8f2;
  --bg: #f4f7fe;
}
html { font-size: 10px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 8rem; }
@media (min-width: 760px) {
  html:has(> body.beranda) { font-size: clamp(7.4px, calc(min(100vw, 1360px) / 102.4), 13.3px); }
}
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 1.5rem/1.5 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-feature-settings: 'cv11';
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--biru); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
.lewati { position: absolute; left: -9999px; }
.lewati:focus { left: 16px; top: 16px; z-index: 100; padding: 8px 12px; background: #fff; border-radius: 8px; }

.wadah { width: 95.2rem; max-width: calc(100% - 3.2rem); margin-inline: auto; }
.wadah-lebar { width: 97.6rem; max-width: calc(100% - 2.4rem); margin-inline: auto; }

/* === Kepala: x 36–988, y 22–70 === */
.kepala { position: sticky; top: 0; z-index: 50; padding-top: 2.2rem; }
.kepala-dalam {
  position: relative;
  display: flex;
  align-items: center;
  height: 4.8rem;
  padding: 0 2.1rem 0 2.4rem;
  border-radius: 1.8rem;
  background: rgba(246, 250, 255, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0.6rem 2rem rgba(37, 80, 170, 0.07);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
}
.merek { display: flex; align-items: center; gap: 0.9rem; font-size: 1.43rem; font-weight: 700; letter-spacing: -0.01em; color: #0b1630; white-space: nowrap; }
.logo { width: 2.8rem; height: 2.8rem; flex: none; filter: drop-shadow(0 0.2rem 0.4rem rgba(11, 76, 246, 0.3)); }
.nav-utama { position: absolute; left: 28.1rem; top: 0; bottom: 0; display: flex; gap: 2.3rem; }
.nav-utama a { position: relative; display: flex; align-items: center; padding: 0 0.9rem; font-size: 1.25rem; font-weight: 500; color: #1b2540; transition: color 0.2s; }
.nav-utama a:hover { color: var(--biru); }
.nav-utama a[aria-current] { color: var(--biru); font-weight: 600; }
.nav-utama a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 0.3rem; border-radius: 0.2rem 0.2rem 0 0; background: var(--biru); }
.tombol-donasi {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  height: 3.4rem;
  margin-left: auto;
  padding: 0 1.5rem 0 1.1rem;
  border-radius: 1.7rem;
  background: linear-gradient(180deg, #2a68ff, #0e4ef2);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 0.6rem 1.4rem rgba(20, 80, 240, 0.3);
}
.ik-hati { width: 1.5rem; height: 1.5rem; }

/* === Tombol === */
.aksi { display: flex; align-items: center; gap: 1.5rem; }
.tombol-play {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  height: 5.1rem;
  padding: 0 1.4rem 0 2.3rem;
  border-radius: 2.6rem;
  background: linear-gradient(180deg, #2462fc, #0f45ee 55%, #1652f6);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 1rem 2.2rem rgba(20, 80, 240, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform 0.2s;
}
.tombol-play:hover { transform: translateY(-1px); }
.ik-play { width: 2.2rem; height: 2.2rem; flex: none; }
.tombol-bulat {
  display: grid;
  place-items: center;
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 50%;
  border: 1.5px solid #c5d6fb;
  background: rgba(236, 242, 255, 0.7);
  color: var(--biru);
}
.tombol-bulat svg { width: 1.8rem; height: 1.8rem; }

/* === Pahlawan: y 0–540 (latar), konten mulai y 70 === */
.pahlawan-luar { position: relative; overflow: hidden; height: 54rem; margin-top: -7rem; padding-top: 7rem; }
.latar-pahlawan { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(#000 86%, transparent); mask-image: linear-gradient(#000 86%, transparent); }
.pahlawan { position: relative; height: 47rem; font-size: 1rem; }
.teks { position: absolute; left: 2.4rem; top: 7.3rem; z-index: 4; }
.lencana {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  height: 2.4rem;
  padding: 0 1rem 0 0.45rem;
  border-radius: 1.2rem;
  background: rgba(200, 219, 252, 0.8);
  border: 1px solid rgba(150, 183, 243, 0.7);
  color: #071447;
  font-size: 1.3rem;
  font-weight: 600;
}
.ik-perisai { width: 1.7rem; height: 1.7rem; color: #0b3ef0; }
h1 { margin-top: 1.9rem; margin-left: 0.3rem; font-size: 6rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: #070f2b; white-space: nowrap; }
.pembuka { margin-top: 1.5rem; font-size: 1.93rem; line-height: 2.7rem; color: #1d2742; white-space: nowrap; }
.pahlawan .aksi { margin-top: 2.4rem; }

/* Panggung pahlawan: koordinat = (x-36, y-70) / 10. */
.panggung-bingkai { position: absolute; inset: 0; pointer-events: none; }
.panggung { position: absolute; left: 0; top: 0; width: 95.2em; height: 47em; }
.panggung > * { position: absolute; }
.pita { left: 45em; top: 0; width: 54em; height: 47em; overflow: visible; }
.pita-belakang { z-index: 0; }
.pita-depan { z-index: 4; }
.kilat-hias { left: 48.5em; top: 5em; width: 4.6em; height: 5.7em; z-index: 1; filter: blur(0.04em) drop-shadow(0 0.4em 0.8em rgba(60, 120, 250, 0.3)); }
.bintang { display: block; color: #3b6ff6; z-index: 1; }
.bintang svg { width: 100%; height: 100%; }
.b1 { left: 63.6em; top: 6em; width: 1em; height: 1em; }
.b2 { left: 48.2em; top: 23.3em; width: 1.4em; height: 1.4em; }
.b3 { left: 89.9em; top: 30.7em; width: 4.4em; height: 4.4em; color: #1b4ff3; filter: drop-shadow(0 0 0.5em rgba(40, 100, 250, 0.45)); }
.b3::after { content: ""; position: absolute; left: 35%; top: 35%; width: 30%; height: 30%; border-radius: 50%; background: #fff; filter: blur(0.25em); opacity: 0.9; }

.kaca-hero { left: 86.9em; top: 14.4em; width: 8.2em; height: 7em; transform: rotate(10deg); z-index: 1; }
.kaca-belakang { position: absolute; left: 1.4em; top: -3.4em; width: 4.8em; height: 5em; border-radius: 1.6em 1.6em 0.8em 0.8em; background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(225, 235, 255, 0.6)); border: 1px solid rgba(255, 255, 255, 0.9); }
.kaca-depan {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75em;
  padding: 0 1.5em;
  border-radius: 1em;
  background: linear-gradient(160deg, rgba(176, 200, 252, 0.95), rgba(106, 146, 246, 0.95));
  box-shadow: 0 1em 2em rgba(40, 90, 220, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.kaca-depan i { display: block; height: 0.55em; border-radius: 0.3em; background: rgba(255, 255, 255, 0.92); }

/* HP: sudut terukur di mockup TL(723,90) TR(926,104) BR(822,480) BL(605,464); elemen
   205 x 392 px dipetakan persis lewat homografi (matrix3d). Isi layar diposisikan dalam
   koordinat lokal layar (= pemetaan balik titik-titik mockup), jadi geser/miringnya ikut. */
.hp {
  left: 68.7em;
  top: 2em;
  width: 20.5em;
  height: 39.2em;
  z-index: 2;
  transform-origin: 0 0;
  transform: matrix3d(0.987746, 0.0681204, 0, -1.23041e-5, -0.281236, 0.891375, 0, -0.000167666, 0, 0, 1, 0, 0, 0, 0, 1);
}
.hp-sisi, .hp-badan { position: absolute; inset: 0; border-radius: 3.2em; }
.hp-sisi { transform: translate(-0.45em, 0.8em); background: linear-gradient(170deg, #4b566c, #141a27 40%, #0b0f18); box-shadow: -1em 2.2em 3.6em rgba(20, 45, 120, 0.3); }
.hp-badan { padding: 0.95em; background: #1c2438; box-shadow: inset 0 0 0 0.22em #3a4560, inset 0 0 0 0.5em #1c2438; }
.hp-layar { position: relative; height: 100%; overflow: hidden; border-radius: 2.5em; background: #10151f; color: #e8ecf4; }
.hp-layar > * { position: absolute; }
.hp-status { inset: 0 0 auto; height: 3em; }
.hp-panah { position: absolute; left: 1.6em; top: 0.9em; font-size: 0.85em; color: #c9d2e3; transform: rotate(-30deg); }
.hp-pulau { position: absolute; left: 6.15em; top: 0; width: 6.2em; height: 1.6em; border-radius: 0 0 1.2em 1.2em; background: #1c2438; }
.hp-pulau b { position: absolute; left: 50%; top: 0.5em; width: 2.2em; height: 0.32em; margin-left: -1.1em; border-radius: 0.2em; background: #3b465e; }
.hp-sinyal { position: absolute; right: 1.8em; top: 1em; display: flex; align-items: flex-end; gap: 0.16em; height: 0.85em; }
.hp-sinyal i { display: block; width: 0.26em; border-radius: 0.1em; background: #dfe5ef; }
.hp-sinyal i:nth-child(1) { height: 40%; }
.hp-sinyal i:nth-child(2) { height: 70%; }
.hp-sinyal i:nth-child(3) { height: 100%; }
.hp-sinyal b { display: block; width: 0.85em; height: 0.85em; margin-left: 0.3em; border-radius: 0.15em; background: #dfe5ef; }
.hp-judul-teks { left: 1.1em; top: 3.5em; font-size: 1.1em; line-height: 1.3; font-weight: 500; white-space: nowrap; }
.hp-segar { left: 15.2em; top: 4.2em; width: 1.5em; height: 1.5em; color: #c9d2e3; }
.hp-dok { left: 1.15em; top: 8.55em; width: 15.4em; height: 22.8em; border-radius: 1.2em; background: #f3f5fa; }
.hp-dok > * { position: absolute; }
.hp-bilah { left: 1.2em; right: 1.2em; top: 1.2em; height: 0.8em; border-radius: 0.4em; background: #e2e6ee; }
.hp-atas { inset: 0; }
.hp-atas > * { position: absolute; }
.hp-gambar { left: 1.3em; top: 3.6em; width: 7.8em; height: 7.8em; overflow: hidden; border-radius: 0.7em; background: linear-gradient(160deg, #cfe0ff, #9cbcfb); }
.hp-gambar svg { width: 100%; height: 100%; }
.hp-garis-kanan, .hp-garis { display: flex; flex-direction: column; }
.hp-garis-kanan { left: 10.1em; top: 4.1em; width: 4.2em; gap: 0.95em; }
.hp-garis { left: 1.3em; right: 1.3em; top: 14.6em; gap: 1.2em; }
.hp-garis-kanan i, .hp-garis i { display: block; height: 0.7em; border-radius: 0.35em; background: #c9d2e6; }
.hp-garis-kanan i:nth-child(2) { width: 88%; }
.hp-garis-kanan i:nth-child(3) { width: 80%; }
.hp-garis-kanan i:nth-child(5) { width: 70%; }
.hp-garis i:nth-child(2) { width: 94%; }
.hp-garis i:nth-child(3) { width: 72%; }
.hp-tabs { left: -0.25em; top: 31.4em; width: 18em; display: grid; grid-template-columns: repeat(4, 1fr); }
.hp-tab { display: flex; flex-direction: column; align-items: center; gap: 0.4em; font-size: 0.92em; color: #e2e8f0; }
.hp-tab svg { width: 2.5em; height: 2.5em; fill: none; stroke: #e5e9f2; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Lencana PDF: pusat (636,200), 84 x 90 px, diputar -19°. */
.lencana-pdf { left: 55.8em; top: 8.5em; width: 8.4em; height: 9em; z-index: 3; transform: rotate(-19deg); filter: drop-shadow(0 0.8em 1.2em rgba(225, 40, 80, 0.28)); }
.lencana-pdf::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1.3em;
  background: linear-gradient(165deg, #ff7690, #f2506e 55%, #e9425f);
  clip-path: polygon(0 0, 68% 0, 100% 26%, 100% 100%, 0 100%);
}
.lencana-pdf::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 32%;
  height: 26%;
  border-bottom-left-radius: 0.5em;
  background: linear-gradient(225deg, transparent 50%, #ffd0db 50%, #f7a7b9);
}
.lencana-pdf span { position: absolute; inset: 0; display: grid; place-items: center; padding-top: 0.9em; font-size: 2.9em; font-weight: 700; letter-spacing: 0.02em; color: #fff; }

/* === Baris ikon: x 36–988, y 485–595 === */
.ikon-luar { position: relative; z-index: 3; margin-top: -5.5rem; }
.ikon-baris {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  align-items: center;
  height: 11rem;
  border-radius: 2.2rem;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #fff;
  box-shadow: 0 1rem 3rem rgba(40, 80, 170, 0.08);
}
.ikon-baris li { translate: 0 0.3rem; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1.2rem; height: 7rem; font-size: 1.45rem; font-weight: 500; color: #18213a; }
.ikon-baris li + li { border-left: 1px solid #e5eaf3; }
.ik { width: 3.6rem; height: 3.6rem; }
.ik-biru { filter: drop-shadow(0 0.4rem 0.5rem rgba(37, 99, 235, 0.25)); }
.ik-ungu { filter: drop-shadow(0 0.4rem 0.5rem rgba(109, 51, 230, 0.22)); }
.ik-hijau { filter: drop-shadow(0 0.4rem 0.5rem rgba(20, 164, 77, 0.24)); }
.ik-oranye { filter: drop-shadow(0 0.4rem 0.5rem rgba(240, 98, 15, 0.24)); }
.ik-merah { filter: drop-shadow(0 0.4rem 0.5rem rgba(224, 25, 62, 0.22)); }

/* === Label & judul bagian === */
.label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 2.2rem;
  padding: 0 1rem 0 0.3rem;
  border-radius: 1.1rem;
  background: rgba(206, 222, 252, 0.75);
  border: 1px solid rgba(160, 190, 245, 0.7);
  color: #0e2a6b;
  font-size: 1.42rem;
  font-weight: 600;
}
.ik-label { width: 1.3rem; height: 1.3rem; color: #2563eb; }
h2 { margin-top: 1.2rem; font-size: 2.8rem; font-weight: 700; line-height: 3rem; letter-spacing: -0.02em; color: #0c1733; white-space: nowrap; }
.deskripsi { margin-top: 1.2rem; font-size: 1.42rem; line-height: 2rem; color: #1f2a44; white-space: nowrap; }

/* === Fitur utama: x 36–988, y 630–960 === */
.fitur-utama { position: relative; height: 33rem; margin-top: 3.5rem; font-size: 1rem; }
.fitur-teks { position: absolute; left: 0.5rem; top: 2.1rem; z-index: 2; }
.cek { display: grid; gap: 0.9rem; margin-top: 1.9rem; }
.cek li { display: flex; align-items: center; gap: 1.2rem; font-size: 1.23rem; line-height: 1.65rem; color: #1f2a44; }
.ik-cek { width: 1.6rem; height: 1.6rem; flex: none; color: #1d63fb; }

/* Panggung pameran: koordinat = (x-36, y-630) / 10. */
.pameran-bingkai { position: absolute; inset: 0; pointer-events: none; }
.pameran { position: absolute; left: 0; top: 0; width: 95.2em; height: 33em; }
.pameran > * { position: absolute; }
.pecah { width: 1.5em; height: 0.45em; border-radius: 0.3em; background: #2563eb; }
.p1 { left: 40.1em; top: 5.2em; transform: rotate(-12deg); }
.p2 { left: 41.1em; top: 3.1em; width: 1.7em; transform: rotate(38deg); }
.p3 { left: 42.6em; top: 1.3em; width: 1.4em; transform: rotate(-75deg); }

.kartu-alat, .kartu-terjemah {
  border-radius: 1.4em;
  background: #f8fafe;
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 0 0 0.7em rgba(228, 235, 251, 0.85), inset 0 0 0 calc(0.7em + 1px) #dfe6f4, 0 1.6em 3.2em rgba(40, 80, 170, 0.1);
}
.kartu-terjemah { left: 79.2em; top: 5.7em; width: 16.2em; height: 23.6em; z-index: 1; padding: 2.6em 1.8em; transform: rotate(5deg); }
.kartu-alat { left: 62.9em; top: 2.2em; width: 16.2em; height: 27.8em; z-index: 2; padding: 2.4em 1.2em; transform: rotate(1.5deg); }
.kartu-judul { font-size: 1.2em; font-weight: 700; color: #111c38; }
.kartu-alat .kartu-judul { padding-left: 0.2em; margin-bottom: 1.5em; }
.kartu-alat ul { display: grid; gap: 0.6em; }
.kartu-alat li { display: flex; align-items: center; gap: 0.9em; height: 3.7em; padding-left: 0.5em; border-radius: 0.8em; border: 1px solid #e4e9f3; background: #fbfcff; }
.kartu-alat li span:last-child { font-size: 1.1em; font-weight: 500; color: #1b2540; white-space: nowrap; }
.ubin { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 0.6em; background: #dcebfd; }
.ik-alat { width: 1.9em; height: 1.9em; }
.kartu-terjemah .kartu-judul { padding-bottom: 1em; border-bottom: 1px solid #e3e8f2; font-size: 1.25em; }
.tj-bahasa { display: flex; align-items: center; gap: 0.5em; margin-top: 1.5em; }
.tj-bahasa span { display: flex; align-items: center; gap: 0.4em; height: 2.3em; padding: 0 0.6em; border-radius: 0.5em; background: #e8edf7; font-size: 0.95em; font-weight: 500; color: #1b2540; white-space: nowrap; }
.tj-bahasa span::after { content: ""; width: 0.4em; height: 0.4em; margin-top: -0.25em; border: solid #1b2540; border-width: 0 0.13em 0.13em 0; transform: rotate(45deg); }
.tj-bahasa svg { width: 1.1em; height: 1.1em; flex: none; color: #9aa8c4; }
.tj-tombol { display: grid; place-items: center; height: 3em; margin-top: 1.5em; border-radius: 0.6em; background: linear-gradient(180deg, #2f6bff, #1650f5); color: #fff; font-size: 1.05em; font-weight: 600; box-shadow: 0 0.5em 1em rgba(22, 80, 245, 0.25); }
.tj-hasil { display: flex; flex-direction: column; gap: 1.1em; height: 8.6em; margin-top: 0.3em; padding: 1.4em 1em; border-radius: 0.8em; background: #e8edf8; }
.tj-hasil i { display: block; height: 0.55em; border-radius: 0.3em; background: #cfd7e8; }
.tj-hasil i:nth-child(2) { width: 76%; }
.tj-hasil i:nth-child(3) { width: 92%; }
.tj-hasil i:nth-child(4) { width: 55%; }

/* Tablet: pusat (559,791.5), 230 x 286 px, d = 1200 px. */
.tablet {
  left: 40.66em;
  top: 1.75em;
  width: 23em;
  height: 28.6em;
  z-index: 3;
  padding: 0.6em;
  border-radius: 2.2em;
  background: linear-gradient(135deg, #f0f4fb, #b7c3e0 60%, #d6deef);
  box-shadow: 0 2em 4em rgba(30, 60, 140, 0.2);
  transform: perspective(120em) rotateX(1.3deg) rotateY(-26.9deg) rotateZ(2.3deg);
  -webkit-mask-image: linear-gradient(200deg, #000 64%, rgba(0, 0, 0, 0.12) 100%);
  mask-image: linear-gradient(200deg, #000 64%, rgba(0, 0, 0, 0.12) 100%);
}
.tablet-layar { position: relative; height: 100%; border-radius: 1.7em; background: #222b40; }
.tb-status { position: absolute; left: 1.4em; right: 1.4em; top: 1.1em; display: flex; justify-content: space-between; }
.tb-kiri, .tb-kanan { display: block; height: 0.55em; border-radius: 0.3em; background: #cbd3e3; }
.tb-kiri { width: 1.6em; }
.tb-kanan { width: 3.2em; }
.tb-halaman { position: absolute; left: 5.4em; right: 0.8em; top: 3em; bottom: 0.8em; display: flex; flex-direction: column; gap: 0.95em; padding: 2.2em 1.8em; border-radius: 0.4em; background: #f8fafe; }
.tb-halaman > i { display: block; height: 0.5em; border-radius: 0.25em; background: #d7dde8; }
.tb-halaman > i:nth-child(2n) { width: 90%; }
.tb-halaman > i:nth-child(3n) { width: 78%; }
.tb-halaman > i:nth-child(5n) { width: 62%; }
.tb-pilih { position: relative; display: flex; flex-direction: column; gap: 0.95em; margin: 0.2em -0.6em; padding: 0.9em 0.6em; background: rgba(96, 150, 250, 0.3); outline: 0.12em solid #5b8ff5; }
.tb-pilih i { display: block; height: 0.5em; border-radius: 0.25em; background: #5b8ff5; opacity: 0.85; }
.pg { position: absolute; width: 0.7em; height: 0.7em; border-radius: 50%; background: #3a77f2; box-shadow: 0 0 0 0.15em #fff; }
.pg-a { right: -0.4em; top: -0.4em; }
.pg-b { right: -0.4em; bottom: -0.4em; }

.mini { z-index: 4; display: flex; flex-direction: column; gap: 0.45em; padding: 0.9em 0.8em; border-radius: 0.6em; background: #f7f9fd; border: 0.45em solid #2a3349; box-shadow: 0 0.8em 1.6em rgba(20, 45, 120, 0.25); transform: rotate(2deg); }
.mini i { display: block; height: 0.35em; border-radius: 0.2em; background: #cfd6e3; }
.mini i:nth-child(2n) { width: 70%; }
.m1 { left: 42.4em; top: 9em; width: 4.7em; height: 6.7em; }
.m2 { left: 41.9em; top: 16.2em; width: 4.7em; height: 7em; }
.tb-alat { left: 49.6em; top: 19.5em; z-index: 5; display: flex; gap: 0.25em; height: 3em; padding: 0.35em 0.5em; border-radius: 0.8em; background: #172033; box-shadow: 0 0.8em 1.8em rgba(10, 20, 50, 0.3); transform: rotate(1.5deg); }
.tb-alat span { display: grid; place-items: center; width: 2.4em; height: 2.3em; border-radius: 0.5em; }
.tb-alat svg { width: 1.9em; height: 1.9em; }

/* === Arsitektur: x 24–1000, y 985–1232 === */
.arsi-luar { margin-top: 2.5rem; }
.arsi {
  position: relative;
  height: 24.7rem;
  border-radius: 3rem;
  background: linear-gradient(180deg, #ebeffd, #eaeefd);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 0 2.6rem rgba(255, 255, 255, 0.9), 0 1rem 3rem rgba(40, 80, 170, 0.05);
}
.arsi-teks { position: absolute; left: 2.3rem; top: 3.1rem; }
.arsi-teks .label { height: 2.3rem; gap: 0.5rem; padding-left: 0.6rem; font-size: 1.25rem; }
.arsi h2 { margin-top: 0.6rem; font-size: 2.6rem; line-height: 2.9rem; }
.arsi .deskripsi { margin-top: 1rem; font-size: 1.32rem; line-height: 1.8rem; }
.teknologi { display: flex; gap: 0.55rem; margin-top: 1.9rem; }
.teknologi li { display: inline-flex; align-items: center; gap: 0.6rem; height: 3.9rem; padding: 0 0.6rem 0 0.45rem; border-radius: 0.8rem; background: #fff; box-shadow: 0 0.2rem 0.6rem rgba(40, 80, 170, 0.08); font-size: 0.95rem; font-weight: 600; color: #111c38; }
.ik-tek { width: 2.2rem; height: 2.2rem; flex: none; }

/* Diagram: koordinat = (x-24, y-985) / 10. */
.diagram { position: absolute; inset: 0; }
.dg-masuk li, .dg-luar li { position: absolute; display: flex; align-items: center; border-radius: 1rem; background: #cfdffd; color: #0d2463; font-size: 1.25rem; font-weight: 600; line-height: 1.6rem; white-space: nowrap; }
.dg-masuk li { left: 41.5rem; width: 8.3rem; height: 3.5rem; justify-content: center; }
.dg-masuk li:nth-child(1) { top: 6.1rem; }
.dg-masuk li:nth-child(2) { top: 11.3rem; }
.dg-masuk li:nth-child(3) { top: 16.5rem; }
.dg-luar li { left: 85.9rem; padding: 0 1rem; }
.dg-luar li:nth-child(1) { top: 5.5rem; width: 10.5rem; height: 3.3rem; }
.dg-luar li:nth-child(2) { top: 10.6rem; width: 5.7rem; height: 3.4rem; }
.dg-luar li:nth-child(3) { top: 15.7rem; width: 8rem; height: 4.6rem; }
.dg-panah span { position: absolute; display: grid; place-items: center; width: 2.2rem; height: 1.2rem; color: #1e3a9e; }
.dg-panah svg, .dg-antar svg { width: 100%; height: 100%; }
.dg-panah-masuk span { left: 50.9rem; }
.dg-panah-masuk span:nth-child(1) { top: 7.2rem; }
.dg-panah-masuk span:nth-child(2) { top: 12.5rem; }
.dg-panah-masuk span:nth-child(3) { top: 17.6rem; }
.dg-panah-luar span { left: 83.2rem; }
.dg-panah-luar span:nth-child(1) { top: 6.6rem; }
.dg-panah-luar span:nth-child(2) { top: 11.7rem; }
.dg-panah-luar span:nth-child(3) { top: 17.4rem; }
.dg-kotak { position: absolute; left: 53.2rem; top: 2.5rem; width: 29.7rem; height: 20.2rem; border-radius: 1.6rem; border: 1.5px dashed #9db6ee; background: rgba(248, 250, 255, 0.5); }
.dg-judul { position: absolute; left: 0; right: 0; top: 1.5rem; display: flex; align-items: center; justify-content: center; gap: 0.9rem; font-size: 1.45rem; font-weight: 700; color: #0c1733; }
.dg-judul .logo { width: 2.2rem; height: 2.2rem; }
.dg-node { position: absolute; top: 5.7rem; width: 11.5rem; height: 12.5rem; display: flex; flex-direction: column; align-items: center; padding-top: 2.1rem; border-radius: 1.2rem; background: #dae9fc; text-align: center; }
.dg-inti .dg-node:first-child { left: 1.1rem; }
.dg-mesin { left: 17.7rem; }
.dg-node svg { width: 3rem; height: 3rem; }
.dg-mesin svg { color: #2563eb; }
.dg-node strong { margin-top: 1.6rem; font-size: 1.45rem; font-weight: 700; line-height: 1.8rem; color: #0c1733; }
.dg-node small { margin-top: 0.3rem; font-size: 1.1rem; line-height: 1.4rem; color: #263557; }
.dg-antar { position: absolute; left: 13.4rem; top: 11.4rem; width: 3.6rem; height: 1.4rem; color: #0c1733; }

/* === Ajakan: x 24–1000, y 1262–1503 === */
.ajakan-luar { margin-top: 3rem; padding-bottom: 3.3rem; }
.ajakan {
  --siklus: 6s;
  position: relative;
  height: 24.1rem;
  overflow: hidden;
  isolation: isolate;
  border-radius: 3rem;
  color: #fff;
  background:
    radial-gradient(42rem 13rem at 16% 112%, rgba(84, 72, 230, 0.8), transparent 70%),
    radial-gradient(40rem 13rem at 92% 112%, rgba(96, 72, 230, 0.75), transparent 70%),
    radial-gradient(50rem 26rem at 12% 18%, rgba(30, 60, 160, 0.4), transparent 70%),
    linear-gradient(180deg, #111a52 0%, #0e1542 70%, #121852 100%);
  box-shadow: 0 2rem 4rem rgba(20, 28, 90, 0.18);
}
.ajakan-seni, .ajakan-teks, .ajakan-kertas { position: absolute; z-index: 1; }
.ajakan-seni { left: 0; top: 0; width: 26rem; height: 100%; }
.ajakan-seni > * { position: absolute; }
.orbit-bungkus { left: 1.9rem; top: 3.7rem; width: 22rem; height: 13.2rem; transform: rotate(-28deg); }
.orbit-bungkus .orbit { position: absolute; inset: 0; width: 100%; height: 100%; }
.orbit-depan { z-index: 2; }
.orbit-kilau { fill: none; stroke: #f0f6ff; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 9 91; opacity: 0; }
.orbit-pusat { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: scaleY(0.2885); }
.putar { position: absolute; left: 0; top: 0; opacity: 0; }
.elektron { position: absolute; left: -0.4rem; top: -0.4rem; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: #eef5ff; box-shadow: 0 0 1rem 0.3rem rgba(110, 170, 255, 0.9); transform: translateX(10.4rem) scaleY(3.466); }
.kejut { left: 9.85rem; top: 6.55rem; width: 6rem; height: 6rem; border-radius: 50%; border: 2px solid rgba(165, 205, 255, 0.9); box-shadow: 0 0 1.8rem rgba(96, 165, 250, 0.7), inset 0 0 1.2rem rgba(96, 165, 250, 0.5); opacity: 0; }
.kilat-besar { left: 8.9rem; top: 4.3rem; width: 7.9rem; height: 10.5rem; z-index: 1; filter: drop-shadow(0 0 1.6rem rgba(96, 165, 250, 0.7)) drop-shadow(0 1rem 2rem rgba(10, 30, 120, 0.5)) brightness(1); }
.ajakan-seni .bintang { color: #bcd2ff; z-index: 2; }
.c1 { left: 4.95rem; top: 6.95rem; width: 0.8rem; height: 0.8rem; }
.c2 { left: 7rem; top: 6.2rem; width: 0.7rem; height: 0.7rem; }
.c3 { left: 18.1rem; top: 13.4rem; width: 2.4rem; height: 2.4rem; color: #e6e4ff; filter: drop-shadow(0 0 0.8rem rgba(200, 200, 255, 0.9)); }
.c4 { left: 20.95rem; top: 16.55rem; width: 0.6rem; height: 0.6rem; color: #b8a8ff; }

.ajakan-teks { left: 26.4rem; top: 4.3rem; }
.ajakan-judul { display: flex; align-items: center; gap: 1.7rem; }
.ajakan h2 { margin: 0; font-size: 2.48rem; line-height: 3rem; color: #fff; }
.pil-versi { display: inline-flex; align-items: center; height: 2.2rem; padding: 0 1rem; border-radius: 1.1rem; background: rgba(104, 96, 222, 0.5); color: #ececff; font-size: 1.2rem; font-weight: 600; white-space: nowrap; }
.ajakan-teks p { margin-top: 1.4rem; font-size: 1.62rem; line-height: 2.3rem; color: #e2e6ff; white-space: nowrap; }
.ajakan .aksi { margin-top: 2.4rem; }
.ajakan .tombol-play { height: 4.4rem; padding: 0 1.3rem 0 1.5rem; font-size: 1.3rem; gap: 0.9rem; box-shadow: 0 0.8rem 2rem rgba(10, 40, 200, 0.45); }
.ajakan .ik-play { width: 1.9rem; height: 1.9rem; }
.tombol-garis { display: inline-flex; align-items: center; gap: 0.9rem; height: 4.4rem; padding: 0 1.9rem; border-radius: 2.2rem; border: 1px solid rgba(255, 255, 255, 0.6); color: #fff; font-size: 1.3rem; font-weight: 500; white-space: nowrap; }
.tombol-garis:hover { background: rgba(255, 255, 255, 0.08); }
.tombol-garis svg { width: 1.4rem; height: 1.4rem; }

.ajakan-kertas { inset: 0; pointer-events: none; }
.ajakan-kertas > * { position: absolute; }
.kaca {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 2.2rem 1.6rem;
  border-radius: 1.2rem;
  background: linear-gradient(160deg, rgba(196, 214, 255, 0.62), rgba(118, 150, 245, 0.38));
  border: 1px solid rgba(220, 232, 255, 0.65);
  box-shadow: 0 2rem 4rem rgba(5, 10, 60, 0.35), inset 0 0 2rem rgba(255, 255, 255, 0.12);
}
.kaca i { display: block; height: 0.9rem; border-radius: 0.45rem; background: rgba(225, 233, 255, 0.5); }
.kaca i:nth-child(2n) { width: 82%; }
.kaca i:nth-child(3n) { width: 90%; }
.kaca-b { left: 79.6rem; top: 2.3rem; width: 10rem; height: 18rem; transform: rotate(9deg); }
.kaca-a { left: 69.55rem; top: 3.8rem; width: 12.5rem; height: 19rem; transform: rotate(9deg); }
.tag-pdf { left: 81.3rem; top: 11.8rem; z-index: 2; display: grid; place-items: center; width: 7.3rem; height: 6.3rem; border-radius: 1.2rem; background: linear-gradient(180deg, #4a82ff, #1d4fe6); color: #fff; font-size: 2.6rem; font-weight: 700; transform: rotate(-4deg); box-shadow: 0 1rem 2.2rem rgba(10, 30, 140, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.orbit-kanan, .orbit-kanan-depan { left: 66.1rem; top: 8.6rem; width: 30rem; height: 11rem; transform: rotate(-12deg); }
.orbit-kanan-depan { z-index: 3; }

/* Latar hidup blok ajakan — konsep logo Kilat. Satu siklus (--siklus): petir
   menyambar dan menerangi kartu, gelombang kejut memancar, denyut energi merambat
   ke dokumen kaca, baris dokumen ter-render, tag PDF melompat. Lapisan ambient:
   aurora, kisi titik, halaman melayang, elektron mengorbit petir. CSS + SVG murni.
   Gerak dikurangi = gambar diam. */
.ajakan-latar { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.ajakan-latar > * { position: absolute; }
.ajakan-latar::after { content: ""; position: absolute; inset: 0; background: radial-gradient(56rem 34rem at 13% 50%, rgba(140, 190, 255, 0.26), transparent 70%); opacity: 0; }
.aurora { width: 46rem; height: 46rem; border-radius: 50%; }
.au-1 { left: -12rem; top: -20rem; background: radial-gradient(closest-side, rgba(56, 120, 255, 0.3), transparent); }
.au-2 { right: -14rem; bottom: -24rem; background: radial-gradient(closest-side, rgba(140, 92, 255, 0.3), transparent); }
.au-3 { left: 36%; top: -28rem; width: 54rem; background: radial-gradient(closest-side, rgba(40, 200, 255, 0.14), transparent); }
.kisi { inset: -2.4rem; background-image: radial-gradient(circle, rgba(170, 200, 255, 0.2) 1px, transparent 1.6px); background-size: 2.4rem 2.4rem; -webkit-mask-image: radial-gradient(ellipse 62% 78% at 50% 50%, #000 15%, transparent 78%); mask-image: radial-gradient(ellipse 62% 78% at 50% 50%, #000 15%, transparent 78%); opacity: 0.45; }
.terbang { inset: 0; container-type: size; }
.terbang i { position: absolute; bottom: -4.4rem; display: flex; flex-direction: column; gap: 0.4rem; width: 2.4rem; height: 3.1rem; padding: 0.6rem 0.5rem; border-radius: 0.4rem; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(170, 200, 255, 0.24); opacity: 0; }
.terbang b { display: block; height: 0.2rem; border-radius: 0.1rem; background: rgba(190, 215, 255, 0.5); }
.terbang b:nth-child(2) { width: 70%; }
.terbang b:nth-child(3) { width: 85%; }
.terbang i:nth-child(1) { left: 4%; }
.terbang i:nth-child(2) { left: 15%; scale: 0.75; }
.terbang i:nth-child(3) { left: 27%; }
.terbang i:nth-child(4) { left: 38%; scale: 0.65; }
.terbang i:nth-child(5) { left: 50%; scale: 0.85; }
.terbang i:nth-child(6) { left: 61%; scale: 0.7; }
.terbang i:nth-child(7) { left: 72%; }
.terbang i:nth-child(8) { left: 84%; scale: 0.8; }
.terbang i:nth-child(9) { left: 94%; scale: 0.6; }
.arus { inset: 0; width: 100%; height: 100%; overflow: visible; }
.arus path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.arus-jalur { stroke: rgba(150, 190, 255, 0.08); stroke-width: 1.4; stroke-dasharray: 0.5 1.3; }
.arus-cahaya { stroke: rgba(120, 178, 255, 0.5); stroke-width: 8; stroke-dasharray: 12 120; stroke-dashoffset: 12; opacity: 0; }
.arus-inti { stroke: #eef5ff; stroke-width: 2.4; stroke-dasharray: 8 120; stroke-dashoffset: 8; opacity: 0; }
.arus .a-3 { stroke-opacity: 0.45; }
.kilasan { top: -30%; left: 0; width: 26%; height: 160%; background: linear-gradient(90deg, transparent, rgba(170, 205, 255, 0.12) 42%, rgba(225, 238, 255, 0.2) 50%, rgba(170, 205, 255, 0.12) 58%, transparent); transform: skewX(-18deg); translate: -160% 0; opacity: 0; }
.kaca-a::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 3.4rem 0.8rem rgba(96, 165, 250, 0.55); opacity: 0; }

/* === Kaki (di bawah bingkai mockup) === */
.kaki { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2.4rem; padding: 2rem 0 3.6rem; border-top: 1px solid var(--garis); font-size: 1.3rem; color: var(--muted); }
.kaki nav { display: flex; gap: 2rem; }
.kaki a:hover { color: var(--biru); }
.bahasa { gap: 0.4rem !important; font-weight: 600; }
.bahasa a { padding: 0.2rem 0.7rem; border-radius: 0.6rem; }
.bahasa a[aria-current] { color: var(--fg); background: #e3ebfd; }

/* === Halaman dokumen === */
.halaman main { padding-top: 2.4rem; }
.dokumen { max-width: 72rem; padding: 4rem 0 7.2rem; }
.dokumen h1 { font-size: clamp(3.4rem, 5vw, 5rem); font-weight: 800; letter-spacing: -0.03em; }
.tanggal { margin: 1.6rem 0 3.6rem; font-size: 1.5rem; color: var(--muted); }
.dokumen h2 { margin: 3.6rem 0 0.8rem; font-size: 1.9rem; line-height: 1.3; white-space: normal; }
.dokumen p { margin: 0 0 1.2rem; font-size: 1.6rem; line-height: 1.65; color: #26304a; }
.dokumen a { color: var(--biru); }
.hilang { padding: 9.6rem 0; }
.hilang h1 { font-size: clamp(3.4rem, 5vw, 5rem); white-space: normal; }
.hilang .alis { color: var(--biru); font-size: 4.8rem; font-weight: 800; }
.hilang .pembuka { white-space: normal; }
.hilang a { color: var(--biru); }

/* === Gerak === */
@media (prefers-reduced-motion: no-preference) {
  @keyframes melayang { 50% { translate: 0 -0.5em; } }
  @keyframes kedip { 50% { opacity: 0.45; scale: 0.8; } }
  .lencana-pdf { animation: melayang 5s ease-in-out infinite; }
  .kaca-hero { animation: melayang 6s ease-in-out 0.8s infinite; }
  .kilat-hias { animation: melayang 5.5s ease-in-out 0.4s infinite; }
  .bintang { animation: kedip 3.2s ease-in-out infinite; }
  .b2, .c2 { animation-delay: 1.1s; }
  .b3, .c3 { animation-delay: 2s; }

  .au-1 { animation: aurora-1 16s ease-in-out infinite alternate; }
  .au-2 { animation: aurora-2 19s ease-in-out infinite alternate; }
  .au-3 { animation: aurora-3 23s ease-in-out infinite alternate; }
  @keyframes aurora-1 { to { translate: 20rem 10rem; scale: 1.25; } }
  @keyframes aurora-2 { to { translate: -24rem -8rem; scale: 1.15; } }
  @keyframes aurora-3 { to { translate: -18rem 7rem; scale: 0.85; } }
  .kisi { animation: kisi-geser 14s linear infinite; }
  @keyframes kisi-geser { to { translate: 2.4rem 2.4rem; } }
  .terbang i { animation: naik 16s linear infinite both; }
  .terbang i:nth-child(1) { animation-duration: 15s; animation-delay: -2s; }
  .terbang i:nth-child(2) { animation-duration: 19s; animation-delay: -11s; }
  .terbang i:nth-child(3) { animation-duration: 14s; animation-delay: -6s; }
  .terbang i:nth-child(4) { animation-duration: 21s; animation-delay: -15s; }
  .terbang i:nth-child(5) { animation-duration: 17s; animation-delay: -3s; }
  .terbang i:nth-child(6) { animation-duration: 20s; animation-delay: -9s; }
  .terbang i:nth-child(7) { animation-duration: 15s; animation-delay: -12s; }
  .terbang i:nth-child(8) { animation-duration: 18s; animation-delay: -5s; }
  .terbang i:nth-child(9) { animation-duration: 22s; animation-delay: -17s; }
  @keyframes naik {
    0% { opacity: 0; translate: 0 0; rotate: -10deg; }
    14% { opacity: 0.4; }
    70% { opacity: 0.25; }
    100% { opacity: 0; translate: 2.6rem calc(-100cqh - 6rem); rotate: 14deg; }
  }
  .orbit-kilau { animation: kilau-orbit 5s linear infinite; }
  .orbit-kanan .orbit-kilau { animation-duration: 7s; animation-direction: reverse; }
  @keyframes kilau-orbit { from { stroke-dashoffset: 100; opacity: 0.9; } to { stroke-dashoffset: 0; opacity: 0.9; } }
  /* Elektron mengorbit: pusat dipipihkan scaleY, elektron diputar balik supaya tetap
     bulat. Separuh depan (bawah) di atas petir, separuh belakang di bawahnya. */
  .putar.e-dpn { animation: orbit-dpn 5s linear infinite; }
  .putar.e-blk { animation: orbit-blk 5s linear infinite; }
  .elektron { animation: lawan 5s linear infinite; }
  .putar.e-2, .putar.e-2 .elektron { animation-delay: -2.5s; }
  @keyframes orbit-dpn { 0% { rotate: 0deg; opacity: 1; } 49.9% { opacity: 1; } 50% { opacity: 0; } 100% { rotate: 360deg; opacity: 0; } }
  @keyframes orbit-blk { 0% { rotate: 0deg; opacity: 0; } 49.9% { opacity: 0; } 50% { opacity: 0.75; } 100% { rotate: 360deg; opacity: 0.75; } }
  @keyframes lawan { from { transform: translateX(10.4rem) rotate(0deg) scaleY(3.466); } to { transform: translateX(10.4rem) rotate(-360deg) scaleY(3.466); } }
  .kaca-b { animation: melayang 7s ease-in-out infinite; }

  .ajakan-latar::after { animation: terang var(--siklus) ease-out infinite; }
  @keyframes terang { 0% { opacity: 0; } 3% { opacity: 1; } 18%, 100% { opacity: 0; } }
  .kilat-besar { animation: sambar var(--siklus) ease-out infinite; }
  @keyframes sambar {
    0%, 14%, 100% { scale: 1; filter: drop-shadow(0 0 1.6rem rgba(96, 165, 250, 0.7)) drop-shadow(0 1rem 2rem rgba(10, 30, 120, 0.5)) brightness(1); }
    2.5% { scale: 1.1; filter: drop-shadow(0 0 3.6rem rgba(175, 212, 255, 1)) drop-shadow(0 1rem 2rem rgba(10, 30, 120, 0.5)) brightness(1.45); }
  }
  .kejut { animation: kejut var(--siklus) ease-out infinite both; }
  .kejut.k-2 { animation-delay: 0.2s; }
  @keyframes kejut { 0% { opacity: 0; scale: 0.3; } 1.5% { opacity: 1; } 17%, 100% { opacity: 0; scale: 4.4; } }
  .kilasan { animation: kilasan var(--siklus) cubic-bezier(0.3, 0.6, 0.4, 1) infinite; }
  @keyframes kilasan { 0% { translate: -160% 0; opacity: 0; } 2% { opacity: 1; } 22%, 100% { translate: 440% 0; opacity: 0; } }
  .arus-cahaya, .arus-inti { animation: denyut var(--siklus) cubic-bezier(0.45, 0.05, 0.35, 1) infinite both; }
  .arus .a-2 { animation-delay: 0.12s; }
  .arus .a-3 { animation-delay: 0.26s; }
  @keyframes denyut { 0%, 2% { stroke-dashoffset: 12; opacity: 0; } 4%, 24% { opacity: 1; } 28%, 100% { stroke-dashoffset: -100; opacity: 0; } }
  .kaca-a i { transform-origin: left center; animation: tulis var(--siklus) cubic-bezier(0.2, 0.7, 0.2, 1) infinite both; }
  .kaca-a i:nth-child(2) { animation-delay: 0.08s; }
  .kaca-a i:nth-child(3) { animation-delay: 0.16s; }
  .kaca-a i:nth-child(4) { animation-delay: 0.24s; }
  .kaca-a i:nth-child(5) { animation-delay: 0.32s; }
  .kaca-a i:nth-child(6) { animation-delay: 0.4s; }
  .kaca-a i:nth-child(7) { animation-delay: 0.48s; }
  @keyframes tulis { 0%, 25% { scale: 0 1; opacity: 0.3; } 33%, 88% { scale: 1 1; opacity: 1; } 97%, 100% { scale: 0 1; opacity: 0.3; } }
  .kaca-a::after { animation: menyala var(--siklus) ease-out infinite; }
  @keyframes menyala { 0%, 24% { opacity: 0; } 29% { opacity: 1; } 52%, 100% { opacity: 0; } }
  .tag-pdf { animation: lompat var(--siklus) ease-out infinite; }
  @keyframes lompat { 0%, 30%, 100% { translate: 0 0; scale: 1; } 33% { translate: 0 -0.9rem; scale: 1.08; } 37% { translate: 0 0.1rem; scale: 0.98; } 40% { translate: 0 0; scale: 1; } }
}

/* === Ponsel & tablet kecil (< 760 px): tata letak bertumpuk, root tetap 10 px === */
@media (max-width: 759.98px) {
  .wadah, .wadah-lebar { max-width: calc(100% - 3.2rem); }
  .kepala { padding-top: 1rem; }
  .kepala-dalam { height: 5.4rem; padding: 0 0.8rem 0 1.2rem; }
  .nav-utama { display: none; }
  .tombol-donasi { height: 3.8rem; padding: 0 1.4rem 0 1.2rem; font-size: 1.4rem; }

  .pahlawan-luar { height: auto; margin-top: -6.4rem; padding-top: 6.4rem; padding-bottom: 7rem; }
  .pahlawan { height: auto; }
  .teks { position: static; padding: 3.2rem 0.4rem 0; }
  h1 { font-size: clamp(3.8rem, 11.5vw, 5.4rem); white-space: normal; }
  .pembuka { font-size: 1.7rem; line-height: 2.5rem; white-space: normal; }
  .pembuka br { display: none; }
  .tombol-play { height: 5rem; padding: 0 2rem; font-size: 1.5rem; }
  .panggung-bingkai { position: relative; inset: auto; margin-top: 1.6rem; aspect-ratio: 58 / 46; container-type: inline-size; }
  .panggung { font-size: calc(100cqw / 58); left: -43em; top: -0.5em; }

  .ikon-luar { margin-top: -5rem; }
  .ikon-baris { grid-template-columns: repeat(4, 1fr); height: auto; row-gap: 1.6rem; padding: 1.8rem 0; }
  .ikon-baris li { height: 6.4rem; font-size: 1.3rem; gap: 0.9rem; }
  .ikon-baris li:nth-child(4n + 1) { border-left: 0; }

  .fitur-utama { height: auto; margin-top: 5.6rem; }
  .fitur-teks { position: static; padding: 0 0.4rem; }
  h2, .deskripsi { white-space: normal; }
  h2 { font-size: 2.6rem; line-height: 3.1rem; }
  .deskripsi br, h2 br { display: none; }
  .pameran-bingkai { position: relative; inset: auto; margin-top: 2.8rem; aspect-ratio: 60 / 33; container-type: inline-size; }
  .pameran { font-size: calc(100cqw / 60); left: -39.5em; }

  .arsi-luar { margin-top: 4.8rem; }
  .arsi { height: auto; padding: 2.8rem 1.8rem; border-radius: 2.4rem; }
  .arsi-teks { position: static; }
  .teknologi { flex-wrap: wrap; }
  .diagram { position: static; display: flex; flex-direction: column; align-items: stretch; gap: 1.2rem; margin-top: 2.8rem; }
  .dg-masuk, .dg-luar { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; }
  .dg-masuk li, .dg-luar li { position: static; width: auto !important; height: 3.6rem !important; padding: 0 1.2rem; }
  .dg-luar li br { display: none; }
  .dg-panah { display: flex; justify-content: center; }
  .dg-panah span { position: static; transform: rotate(90deg); }
  .dg-panah span:not(:first-child) { display: none; }
  .dg-kotak { position: static; width: auto; height: auto; padding: 1.6rem 1.2rem; }
  .dg-judul { position: static; margin-bottom: 1.4rem; }
  .dg-inti { display: grid; grid-template-columns: minmax(0, 1fr) 3.4rem minmax(0, 1fr); align-items: center; }
  .dg-node { position: static; width: auto; height: auto; padding: 1.6rem 0.6rem 1.4rem; }
  .dg-antar { position: static; width: 3rem; margin-inline: auto; }

  .ajakan-luar { margin-top: 4rem; }
  .ajakan { height: auto; padding: 3.2rem 2.2rem; border-radius: 2.4rem; }
  .ajakan-seni, .ajakan-kertas { display: none; }
  .ajakan-teks { position: relative; left: auto; top: auto; }
  .ajakan-judul { flex-wrap: wrap; gap: 1rem; }
  .ajakan-teks p { white-space: normal; font-size: 1.6rem; }
  .ajakan .aksi { flex-wrap: wrap; }
}
@media (max-width: 380px) {
  .merek span { display: none; }
}