/* ─────────────────────────────────────────────────────────────
   JIVA LOFT — v2 "PEMATANG" (WEB2, 9 Nov 2026). Spesifikasi: bahan/desain-v2/ARAH-V2-FABLE.md (§3 token, §4 tata letak,
   §5 anotasi, §6 gerak) + nilai CSS persis dari render mockup (bahan/desain-v2/render/*.html, putaran 2 CATATAN.md).
   Dua bahan saja: KERTAS (plester, untuk dibaca) dan TINTA (tanah, untuk dioperasikan). Satu garis rambut untuk semua gambar.
   Tidak ada teks 16–21 px ("forbidden middle").
   ───────────────────────────────────────────────────────────── */

@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/InstrumentSerif-400-normal-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: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/InstrumentSerif-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap;
  src: url(../fonts/InstrumentSerif-400-italic-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: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap;
  src: url(../fonts/InstrumentSerif-400-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Instrument Sans = satu berkas variabel (berkas 400/500/600 dari Google identik byte-per-byte, md5 sama) */
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-stretch: 100%; font-display: swap;
  src: url(../fonts/InstrumentSans-400-normal-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: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-stretch: 100%; font-display: swap;
  src: url(../fonts/InstrumentSans-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/DMMono-400-normal-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: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/DMMono-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --plester: #F4EFE4; --tanah: #1B221A; --padi: #55702A; --padi-muda: #A8C85A;
  --galvalum: #B9BDB6; --jati: #8A5A30; --kabut: #E3E4DC;
  --plester-85: rgba(244, 239, 228, .85);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'DM Mono', ui-monospace, 'DejaVu Sans Mono', Menlo, monospace;
  --tepi: 32px;
  --aman-atas: env(safe-area-inset-top, 0px); --aman-bawah: env(safe-area-inset-bottom, 0px);
  --aman-kiri: env(safe-area-inset-left, 0px); --aman-kanan: env(safe-area-inset-right, 0px);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { height: 100dvh; overflow: hidden; background: var(--kabut); color: var(--plester);
  font: 400 14px/1.4 var(--sans); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; text-transform: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; letter-spacing: inherit; }
a { color: inherit; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lewati { position: fixed; z-index: 100; left: 16px; top: -60px; padding: 12px 16px; border-radius: 999px; background: var(--tanah); color: var(--plester); text-decoration: none; }
.lewati:focus { top: 16px; }

/* ── gaya huruf (§3.3) ── */
.wm { font: 400 22px/1 var(--serif); letter-spacing: 0; margin: 0; }
.stmt { font: 400 44px/1.05 var(--serif); letter-spacing: -.01em; margin: 0; }
.tag { font: italic 400 22px/1.3 var(--serif); }
.ui { font: 500 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.ui12 { font-size: 12px; } .ui11 { font-size: 11px; }
.lbl { font: 500 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.desc { font: 400 14px/1.4 var(--sans); }
.meta { font: 400 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.meta10 { font-size: 10px; }
.sec { color: var(--plester-85); }
.ts { text-shadow: 0 1px 2px rgba(27, 34, 26, .5); }

/* fokus terlihat: satu cincin plester di atas tinta, tanah di atas kertas */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--plester); outline-offset: 2px; border-radius: 999px; }
.kertas :focus-visible, .kedatangan :focus-visible { outline-color: var(--tanah); }
.tekan:active { transform: scale(.98); transition: transform 80ms; }

/* ── panggung 3D: kabut, bukan hitam ── */
.panggung { position: fixed; inset: 0; background: linear-gradient(to bottom, #C9D6DC 0, var(--kabut) 55%, var(--kabut) 100%); }
.wadah-3d { position: absolute; inset: 0; }
.wadah-3d canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
.vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(27, 34, 26, 0) 0, rgba(27, 34, 26, .38) 100%); }
/* scrim: plateau diperpanjang agar semua teks duduk di plateau (CATATAN penyimpangan 1) */
.scrim { position: absolute; left: 0; right: 0; pointer-events: none; }
.scrim-atas { top: 0; height: 140px; background: linear-gradient(to bottom, rgba(27, 34, 26, .78) 0, rgba(27, 34, 26, .78) 72px, rgba(27, 34, 26, 0) 140px); }
.scrim-bawah { bottom: 0; height: 236px; background: linear-gradient(to top, rgba(27, 34, 26, .78) 0, rgba(27, 34, 26, .78) 176px, rgba(27, 34, 26, 0) 236px); }

/* krom muncul sesudah koreografi (§6 langkah 6) */
.krom { opacity: 0; visibility: hidden; transition: opacity 320ms var(--ease-out), visibility 0s 320ms; }
body.krom-tampak .krom { opacity: 1; visibility: visible; transition: opacity 320ms var(--ease-out) var(--tunda, 0ms), visibility 0s; }

/* ── kepala ── */
.kepala-kiri { position: fixed; z-index: 20; left: calc(var(--tepi) + var(--aman-kiri)); top: calc(28px + var(--aman-atas)); }
.kepala-kiri .wm a { text-decoration: none; }
.kepala-sub { display: block; margin-top: 6px; }
.kepala-kanan { position: fixed; z-index: 20; right: calc(var(--tepi) - 0px + var(--aman-kanan)); top: calc(24px + var(--aman-atas)); height: 44px; display: flex; gap: 12px; }
.tbl { height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--plester); }
.tbl:hover { opacity: 1; }
.bahasa { padding: 0 4px; }
.bahasa span[data-b] { opacity: .75; text-decoration: none; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: opacity 160ms; }
.bahasa span[data-b].aktif { opacity: 1; text-decoration-line: underline; }
.bahasa .titik-b { margin: 0 6px; }
.tbl-i { font: italic 400 22px/1 var(--serif); letter-spacing: 0; text-transform: none; }
.tbl svg { width: 20px; height: 20px; }
.hanya-ponsel { display: none !important; }
/* WEB5: tombol Batas (pola Pande). Ikon = bentuk tapak dari gambar kedatangan; menyala = garis utuh + garis bawah (idiom EN·ID),
   padam = garis putus + .75. Lebar tetap agar ABOUT/TENTANG tidak bergeser saat ganti bahasa. */
.tbl-batas { width: 118px; gap: 8px; justify-content: flex-start; padding: 0 4px; }
.tbl-batas svg { width: 22px; height: 22px; flex: none; }
.tbl-batas-teks { text-decoration: none; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: opacity 160ms; }
.tbl-batas[aria-pressed="true"] .tbl-batas-teks { text-decoration-line: underline; }
.tbl-batas[aria-pressed="false"] .tbl-batas-teks, .tbl-batas[aria-pressed="false"] svg { opacity: .75; }
.tbl-batas[aria-pressed="false"] path { stroke-dasharray: 2.2 2; }

/* ── pin "patok" (§5) ── */
.lapisan-pin { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.pin { position: absolute; left: 0; top: 0; width: 0; height: 0; transition: opacity 200ms; will-change: transform; }
.pin.luar { opacity: 0 !important; visibility: hidden; transition: opacity 200ms, visibility 0s 200ms; }
.pin.luar .pin-kapsul { pointer-events: none; }
.pin.redup { opacity: .5; transition: opacity 240ms; }
.pin.muncul-belum { opacity: 0; }
.pin-halo-bt, .pin-batang { position: absolute; left: -1.5px; top: -36px; width: 3px; height: 36px; background: rgba(27, 34, 26, .25); }
.pin-batang { left: -.75px; width: 1.5px; background: var(--plester-85); transition: width 160ms, left 160ms; }
.pin-titik { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--plester); box-shadow: 0 0 0 1px var(--tanah); }
.pin-cincin { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--padi-muda); opacity: 0; pointer-events: none; }
.pin-cincin.pulsa { animation: halo 600ms var(--ease-out) 1; }
@keyframes halo { 0% { opacity: .5; transform: scale(1); } 100% { opacity: 0; transform: scale(1.6); } }
.pin-kapsul { position: absolute; left: 0; bottom: 36px; transform: translateX(-50%); height: 28px; padding: 0 10px; display: flex; align-items: center; gap: 8px;
  white-space: nowrap; border-radius: 999px; color: var(--plester); pointer-events: auto;
  background: rgba(27, 34, 26, .72); -webkit-backdrop-filter: blur(12px) saturate(120%); backdrop-filter: blur(12px) saturate(120%);
  transition: background-color 160ms, color 160ms; }
.pin-kapsul::before { content: ''; position: absolute; left: -4px; right: -4px; top: -8px; bottom: -44px; } /* target ≥ 44 px, termasuk batang */
.pin-kapsul .meta { color: var(--plester-85); }
.pin-desk { position: absolute; left: 0; bottom: 36px; white-space: nowrap; padding-left: 12px; opacity: 0; transform: translate(var(--desk-x, 0), 6px);
  transition: opacity 200ms, transform 200ms var(--ease-out); pointer-events: none; color: var(--plester); }
.pin-desk span { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; background: rgba(27, 34, 26, .72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.pin.sorot .pin-kapsul, .pin.aktif .pin-kapsul { background: var(--plester); color: var(--tanah);
  box-shadow: 0 2px 8px rgba(27, 34, 26, .28), 0 0 0 1px rgba(27, 34, 26, .24); }   /* WEB3 P3: terbaca di atas atap galvalum putih */
.pin.sorot .pin-kapsul .meta, .pin.aktif .pin-kapsul .meta { color: rgba(27, 34, 26, .7); }
.pin.sorot .pin-batang, .pin.aktif .pin-batang { width: 2px; left: -1px; }
.pin.sorot .pin-desk { opacity: 1; transform: translate(var(--desk-x, 0), 0); }
.pin.sorot { z-index: 2; opacity: 1 !important; }

/* kapsul luas pada batas (hover desktop) */
.kapsul-luas { position: absolute; left: 0; top: 0; z-index: 6; height: 28px; padding: 0 12px; display: flex; align-items: center; border-radius: 999px;
  background: rgba(27, 34, 26, .72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--plester);
  font: 400 12px/1 var(--sans); letter-spacing: .02em; pointer-events: none; opacity: 0; transition: opacity 160ms; white-space: nowrap; }
.kapsul-luas.tampak { opacity: 1; }

/* ── blok judul (§4b) ── */
.blok-judul { position: fixed; z-index: 10; left: calc(var(--tepi) + var(--aman-kiri)); top: 728px; top: calc(100dvh - 172px); width: min(560px, 60vw); }
.hitung { display: flex; align-items: center; height: 44px; }
.hitung .meta { min-width: 64px; }
.panah { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; margin-left: 4px; }
.panah:first-of-type { margin-left: 0; }
.panah svg { width: 20px; height: 20px; }
.blok-judul h2 { margin-top: 4px; transition: opacity 240ms; }
.blok-judul p { margin: 4px 0 0; max-width: 460px; transition: opacity 240ms; }   /* WEB3 P1: tanpa elipsis, boleh 2 baris */
.blok-judul.ganti h2, .blok-judul.ganti p { opacity: 0; }

/* ── dok pemindah mode (§4g) ── */
.dok-wadah { position: fixed; z-index: 15; left: 50%; bottom: calc(24px + var(--aman-bawah)); transform: translateX(-50%); }
.dok { height: 48px; padding: 4px; display: flex; align-items: center; border-radius: 999px; position: relative;
  background: rgba(27, 34, 26, .72); -webkit-backdrop-filter: blur(12px) saturate(120%); backdrop-filter: blur(12px) saturate(120%); }
.seg { position: relative; z-index: 1; height: 44px; margin: -2px 0; min-width: 140px; white-space: nowrap; display: flex; align-items: center; justify-content: center; border-radius: 999px; }
.seg-isi { height: 40px; width: 100%; padding: 0 20px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: var(--plester-85); transition: color 160ms; }
.seg:hover .seg-isi { color: var(--plester); }
.seg[aria-checked="true"] .seg-isi { color: var(--tanah); }
.dok-pil { position: absolute; z-index: 0; top: 4px; left: 4px; height: 40px; width: 140px; border-radius: 999px; background: var(--plester); transition: transform 240ms var(--ease-out), width 240ms var(--ease-out); }
.seg-titik { width: 6px; height: 6px; border-radius: 50%; background: var(--jati); margin-right: 8px; flex: none; }
.seg[aria-disabled="true"] .seg-teks { opacity: .55; }
.seg[aria-disabled="true"] { cursor: default; }
.pratinjau { position: absolute; left: 50%; bottom: calc(100% + 8px); width: 120px; height: 68px; border-radius: 10px; overflow: hidden; pointer-events: none;
  opacity: 0; transform: translate(-50%, 8px); transition: opacity 160ms, transform 160ms var(--ease-out); background: var(--tanah); }
.pratinjau img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pratinjau-mata { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%; }
.pratinjau-mata .lbl { color: var(--padi-muda); font-size: 10px; }
@media (hover: hover) and (min-width: 1024px) {
  .seg:hover .pratinjau, .seg:focus-visible .pratinjau { opacity: 1; transform: translate(-50%, 0); }
}
.tip { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%); width: max-content; max-width: min(480px, calc(100vw - 32px));
  padding: 10px 16px; border-radius: 999px; background: rgba(27, 34, 26, .82); color: var(--plester); font: 400 13px/1.35 var(--sans); text-align: center;
  opacity: 0; transition: opacity 200ms; pointer-events: none; }
.tip.tampak { opacity: 1; }

.meta-rekam { position: fixed; z-index: 10; right: calc(var(--tepi) + var(--aman-kanan)); bottom: calc(40px + var(--aman-bawah)); }

/* ── Tentang (kertas, §4 About) ── */
.tentang { position: fixed; z-index: 40; right: 0; top: 0; bottom: 0; width: 440px; padding: 40px; overflow-y: auto; color: var(--tanah);
  border-radius: 16px 0 0 16px; background: rgba(244, 239, 228, .86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 8px 24px rgba(27, 34, 26, .18); transform: translateX(100%); visibility: hidden;
  transition: transform 320ms var(--ease-out), visibility 0s 320ms; }
.tentang.buka { transform: none; visibility: visible; transition: transform 320ms var(--ease-out), visibility 0s; }
.tentang-tutup { position: absolute; right: 24px; top: 24px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--tanah); }
.tentang h2 { margin: 56px 0 24px; }
.tentang .isi { font: 400 15px/1.5 var(--sans); margin: 0 0 32px; max-width: 60ch; }
.fakta { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid rgba(27, 34, 26, .16); }
.fakta > div { border-top: 1px solid rgba(27, 34, 26, .16); padding: 20px 0; }
.fakta > div:nth-child(2n) { border-left: 1px solid rgba(27, 34, 26, .16); padding-left: 20px; }
.fakta .stmt { white-space: nowrap; }
.fakta .meta, .kredit .meta { color: rgba(27, 34, 26, .72); }
.fakta .meta { margin-top: 12px; }
.kredit { list-style: none; margin: 28px 0 0; padding: 0; }
.kredit li { padding: 7px 0; }
.kredit a { text-decoration: none; } .kredit a:hover { text-decoration: underline; text-decoration-color: var(--jati); }
@media (min-width: 761px) { .baris-layar { display: none !important; } }   /* WEB3 K1: baris LAYAR PENUH hanya ponsel */
.baris-layar { margin-top: 20px; height: 44px; padding: 0 20px; border-radius: 999px; background: var(--tanah); color: var(--plester); display: inline-flex; align-items: center; gap: 10px; }

/* ── tirai peralihan (crossfade lewat plester) ── */
.tirai { position: fixed; inset: 0; z-index: 90; background: var(--plester); opacity: 0; pointer-events: none; transition: opacity 420ms var(--ease-inout); }
.tirai.tutup { opacity: .3; pointer-events: auto; }
.tirai.penuh { opacity: 1; pointer-events: auto; }

/* ── Kedatangan (§4a) ── */
.kedatangan { position: fixed; inset: 0; z-index: 60; color: var(--tanah);
  background: radial-gradient(ellipse 55% 50% at 50% 50%, rgba(227, 228, 220, .9) 0, rgba(227, 228, 220, 0) 100%), var(--plester);
  -webkit-mask-image: radial-gradient(circle at 50% 55%, transparent var(--iris, -130px), #000 calc(var(--iris, -130px) + 120px));
  mask-image: radial-gradient(circle at 50% 55%, transparent var(--iris, -130px), #000 calc(var(--iris, -130px) + 120px)); }
.kedatangan.iris-mati { -webkit-mask-image: none; mask-image: none; }
.kedatangan.pudar { opacity: 0; transition: opacity 300ms; }
.k-wm { position: absolute; left: 32px; top: 28px; }
.k-bahasa { position: absolute; right: 32px; top: 24px; height: 44px; padding: 0 4px; color: var(--tanah); }
.k-bahasa span[data-b] { text-decoration-color: var(--jati); }
.k-gambar { position: absolute; left: 440px; top: 300px; width: 560px; height: 300px; transition: left 800ms var(--ease-inout), top 800ms var(--ease-inout), opacity 400ms; }
.k-gambar svg { display: block; width: 100%; height: 100%; overflow: visible; }
.k-progres { position: absolute; left: 0; right: 0; top: 640px; text-align: center; color: rgba(27, 34, 26, .75); transition: opacity 300ms; }
.k-alamat { position: absolute; left: 32px; bottom: 32px; color: rgba(27, 34, 26, .8); }
.k-meta { position: absolute; right: 32px; bottom: 32px; color: rgba(27, 34, 26, .75); }
.k-pernyataan { position: absolute; left: 0; top: 300px; width: 100%; margin: 0; font: 400 128px/.92 var(--serif); letter-spacing: -.02em; pointer-events: none; }
.k-pernyataan span { display: block; padding-left: 32px; opacity: 0; transform: translateY(16px); }
.k-pernyataan span.it { font-style: italic; padding-left: 382px; }
.k-masuk { position: absolute; left: 32px; top: 640px; height: 48px; padding: 0 24px; border-radius: 999px; background: var(--tanah); color: var(--plester);
  opacity: 0; visibility: hidden; transition: opacity 320ms var(--ease-out), visibility 0s 320ms; }
.kedatangan.siap .k-gambar { left: 848px; top: 120px; }
.kedatangan.siap .k-gambar svg { opacity: .25; transition: opacity 400ms; }
.kedatangan.siap .k-progres { opacity: 0; }
.kedatangan.siap .k-pernyataan span { opacity: 1; transform: none; transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out); }
.kedatangan.siap .k-pernyataan span:nth-child(2) { transition-delay: 90ms; }
.kedatangan.siap .k-pernyataan span:nth-child(3) { transition-delay: 180ms; }
.kedatangan.siap .k-masuk { opacity: 1; visibility: visible; transition: opacity 320ms var(--ease-out) 600ms, visibility 0s; }
.kedatangan.galat .k-progres { color: var(--jati); }

/* ── ponsel (§4c, 4e) ── */
@media (max-width: 760px) {
  :root { --tepi: 16px; }
  .wm { font-size: 18px; }
  .stmt { font-size: 28px; }
  .ui { font-size: 12px; }
  .meta { font-size: 10px; }
  .hanya-desktop { display: none !important; }
  .hanya-ponsel { display: inline-flex !important; }
  .scrim-atas { height: 120px; background: linear-gradient(to bottom, rgba(27, 34, 26, .78) 0, rgba(27, 34, 26, .78) 92px, rgba(27, 34, 26, 0) 120px); }
  .scrim-bawah { height: 244px; background: linear-gradient(to top, rgba(27, 34, 26, .78) 0, rgba(27, 34, 26, .78) 176px, rgba(27, 34, 26, 0) 244px); }
  .kepala-kiri { top: calc(52px + var(--aman-atas)); }
  .kepala-sub { display: none; }
  .kepala-kanan { top: calc(44px + var(--aman-atas)); right: calc(16px + var(--aman-kanan)); gap: 0; }
  .bahasa { width: 48px; padding: 0; }
  /* WEB5: Batas di ponsel = ikon bulat 44 px di kepala (tanpa krom baru di bawah); menyala = isi plester, ikon tanah (idiom pin aktif) */
  .tbl-batas { position: relative; width: 44px; padding: 0; justify-content: center; }
  /* lingkaran 34 px = hiasan (::after); area tekan = tombol 44 × 44 */
  .tbl-batas::after { content: ''; position: absolute; z-index: 0; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--plester-85); transition: background 160ms; }
  .tbl-batas svg { position: relative; z-index: 1; width: 20px; height: 20px; }
  .tbl-batas[aria-pressed="true"]::after { background: var(--plester); border-color: var(--plester); }
  .tbl-batas[aria-pressed="true"] { color: var(--tanah); }
  .tbl-batas-teks { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pin-kapsul, .dok, .pin-desk span, .kapsul-luas, .tentang { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  /* medali angka 24 px, batang 20 px, hit 44 */
  .pin-halo-bt, .pin-batang { top: -20px; height: 20px; }
  .pin-kapsul { bottom: 20px; width: 24px; height: 24px; padding: 0; justify-content: center; background: rgba(27, 34, 26, .82); }
  .pin-kapsul .ui { display: none; }
  .pin-kapsul .meta { color: var(--plester); letter-spacing: 0; }
  .pin-kapsul::before { left: -10px; right: -10px; top: -10px; bottom: -10px; }
  .pin-desk { display: none; }
  .blok-judul { left: calc(16px + var(--aman-kiri)); right: calc(16px + var(--aman-kanan)); width: auto; top: auto; bottom: calc(98px + var(--aman-bawah)); }
  .hitung { position: relative; height: 44px; }
  .hitung .meta { min-width: 0; }
  .hitung .panah-grup { position: absolute; right: -16px; top: 0; display: flex; gap: 4px; }
  .blok-judul p { font-size: 13px; position: absolute; left: 0; right: 0; top: 84px; max-width: none; opacity: 0; pointer-events: none; }
  .blok-judul p.sekejap { opacity: 1; }
  .dok-wadah { left: calc(16px + var(--aman-kiri)); right: calc(16px + var(--aman-kanan)); transform: none; bottom: calc(24px + var(--aman-bawah)); }
  .dok { width: 100%; background: rgba(27, 34, 26, .82); }
  .seg { flex: 1 1 auto; min-width: 0; }
  .seg-isi { padding: 0 10px; }
  .dok-pil { width: calc((100% - 8px) / 3); }
  .pratinjau { display: none; }
  .meta-rekam { display: none; }
  .tentang { width: 100%; border-radius: 20px 20px 0 0; top: calc(96px + var(--aman-atas)); padding: 24px 16px calc(32px + var(--aman-bawah)); background: var(--plester);
    transform: translateY(100%); }
  /* WEB3 B1: lembar Tentang/pemilih padat; krom di belakangnya disembunyikan seketika (tanpa transisi) agar tidak tembus */
  body.tentang-buka .kepala-kiri, body.tentang-buka .kepala-kanan, body.tentang-buka .blok-judul, body.tentang-buka .blok-judul *,
  body.tentang-buka .dok-wadah, body.tentang-buka .lapisan-pin, body.tentang-buka .tombol-pilih, body.tentang-buka .meta-rekam,
  body.tentang-buka .kapsul-luas, body.tentang-buka .petunjuk,
  body.lembar-buka .kepala-kiri, body.lembar-buka .kepala-kanan, body.lembar-buka .blok-judul, body.lembar-buka .blok-judul *,
  body.lembar-buka .dok-wadah, body.lembar-buka .tombol-pilih, body.lembar-buka .petunjuk { visibility: hidden !important; transition: none !important; }
  /* WEB3 P2: tooltip Setinggi mata di tengah layar (seperti petunjuk 360), tidak menimpa judul */
  .tip { position: fixed; left: 50%; top: calc(50% - 30px); bottom: auto; transform: translate(-50%, -50%); max-width: calc(100vw - 48px); padding: 12px 20px; }
  .tentang h2 { margin: 32px 0 16px; font-size: 28px; }
  .tentang-tutup { right: 8px; top: 10px; }
  .fakta .stmt { font-size: 28px; }
  /* kedatangan ponsel */
  .k-wm { left: 16px; top: 52px; }
  .k-bahasa { right: 16px; top: 44px; }
  .k-gambar, .kedatangan.siap .k-gambar { left: 32px; top: 200px; width: 326px; height: 180px; }
  .k-progres { top: 420px; }
  .k-meta { display: none; }
  .k-alamat { left: 16px; bottom: calc(24px + var(--aman-bawah)); }
  .k-pernyataan { font-size: 52px; line-height: .96; letter-spacing: -.01em; top: auto; bottom: calc(100% - 640px); left: 16px; width: 358px; }
  .k-pernyataan span, .k-pernyataan span.it { padding-left: 0; }
  .k-masuk { left: 16px; top: 672px; width: calc(100% - 32px); max-width: 358px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .k-gambar, .kedatangan.siap .k-gambar { top: 120px; }
  .k-progres { top: 330px; }
  .k-pernyataan { bottom: auto; top: calc(100dvh - 300px); }
  .k-masuk { top: auto; bottom: calc(64px + var(--aman-bawah)); }
}
@media (min-width: 761px) and (max-width: 1180px) {
  .k-pernyataan { font-size: 96px; }
  .k-pernyataan span.it { padding-left: 160px; }
  .k-gambar { left: calc(50% - 280px); }
  .kedatangan.siap .k-gambar { left: calc(100% - 592px); }
}
@media (min-width: 761px) and (max-height: 820px) {
  .k-gambar { top: calc(50% - 150px); }
  .k-progres { top: calc(50% + 190px); }
  .k-pernyataan { top: 200px; }
  .k-masuk { top: 540px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .k-pernyataan span, .kedatangan.siap .k-pernyataan span { transform: none; transition: opacity 300ms !important; }
  .k-gambar { transition: none; }
  .pin-desk { transform: none !important; }
  .tentang, .tentang.buka { transition: opacity 250ms, visibility 0s; }
  .dok-pil { transition: none; }
}
/* merek = tautan ke ikhtisar: area tekan ≥ 44 px tanpa mengubah rupa */
.kepala-kiri .wm a { position: relative; display: inline-block; color: inherit; }
.kepala-kiri .wm a::before { content: ''; position: absolute; left: -8px; right: -8px; top: -14px; bottom: -14px; }   /* WEB3: ≥ 44 px juga di ponsel (huruf 18 px) */