/* ===========================================================================
   AsetHoki — sistem desain
   Ditulis tangan 15 September 2026. Tanpa framework, tanpa langkah build:
   berkas ini adalah sumbernya sendiri, jadi tidak ada kelas yang bisa gagal
   SENYAP karena lupa membangun ulang CSS.

   PALET DIAMBIL DARI PIKSEL LOGO, BUKAN DITEBAK.
   Sampel 1.177x1.172 px koin (alfa>200) memberi tangga emas:
     persentil  5 #914c02 · 25 #c4831a · 50 #e8ac31 · 75 #fbd85c · 95 #fdf6aa
   dan gelapnya hangat, bukan netral: #130f08 (median), bukan #0d0d0d.
   Itu sebabnya seluruh abu-abu di sini condong hangat — abu netral di sebelah
   emas terbaca hijau kebiruan.

   ⚠️ EMAS TERANG TIDAK BOLEH JADI WARNA TEKS DI TEMA TERANG.
   #e8ac31 di atas putih hanya 2,2:1 — gagal AA, dan gagalnya tidak terlihat
   oleh penulisnya karena di tema gelap warna yang sama mencapai 9,7:1. Tema
   terang memakai --emas-teks #8a5a06 (5,9:1) untuk teks/tautan, sementara emas
   terang tetap dipakai untuk hal DEKORATIF (garis, aksen, gradien) yang tidak
   membawa informasi. Dua peran berbeda, dua token berbeda.
   =========================================================================== */

/* ---------------------------------------------------------------- font ---- */
/* Plus Jakarta Sans — huruf yang dibuat untuk identitas kota Jakarta (Tokotype).
   Dipilih bukan cuma karena bentuknya cocok untuk antarmuka, tapi karena ini
   proyek Indonesia dan hurufnya pun demikian. Self-host, bukan CDN: mesin ini
   di balik CGNAT dan satu permintaan pihak ketiga di jalur render adalah satu
   titik gagal yang tidak dikendalikan siapa pun di sini.
   Keduanya font VARIABEL — satu berkas untuk seluruh bobot 400..800. */
@font-face{font-family:'Jakarta';src:url('font/jakarta-latin.woff2') format('woff2');
  font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jakarta';src:url('font/jakarta-latinext.woff2') format('woff2');
  font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JB Mono';src:url('font/jbmono-latin.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JB Mono';src:url('font/jbmono-latinext.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* --------------------------------------------------------------- token ---- */
:root{
  /* tangga emas — sama di kedua tema, karena ini warna MEREK */
  --emas-900:#5c3102; --emas-700:#914c02; --emas-600:#b47818; --emas-500:#c4831a;
  --emas-400:#e8ac31; --emas-300:#fbd85c; --emas-200:#fdf6aa;

  /* tema TERANG = bawaan */
  --latar:#faf8f4; --latar-2:#f3efe6; --permukaan:#ffffff; --permukaan-2:#fbf9f5;
  --garis:#e5dece; --garis-kuat:#d4c9b1;
  --teks:#191510; --teks-2:#3f382d; --redup:#6a6152;
  --emas-teks:#8a5a06;           /* 5,9:1 di atas putih — lihat catatan kepala */
  --emas-garis:rgba(180,120,24,.35);
  --bayang:0 1px 2px rgba(25,21,16,.06), 0 8px 24px -12px rgba(25,21,16,.18);
  --bayang-kuat:0 2px 4px rgba(25,21,16,.08), 0 18px 48px -18px rgba(25,21,16,.3);
  --cahaya:radial-gradient(60rem 30rem at 50% -14rem, rgba(232,172,49,.16), transparent 72%);
  --kaca:rgba(255,255,255,.82);
  --kaca-pekat:rgba(255,255,255,.93);
  --bayang-gulir:rgba(25,21,16,.16);
  --pita-latar:rgba(232,172,49,.1);
  --skema:light;

  /* ── Variabel daisyUI, DIPETAKAN KE TOKEN DI ATAS ───────────────────────
     daisyUI dipasang dengan `themes: false`, jadi ia tidak memancarkan tema
     apa pun sendiri. Warnanya diambil dari sini.

     ⚠️ Kenapa begitu, dan bukan `@plugin "daisyui/theme"`: dua sistem tema
     yang berjalan sendiri-sendiri adalah cara paling pasti mendapat tombol
     emas yang benar di halaman terang dan emas yang salah di halaman gelap —
     karena keduanya harus diubah bersamaan setiap kali palet disentuh, dan
     yang satu tidak pernah mengingatkan kalau yang lain terlewat. Di sini
     hanya ada SATU sumber kebenaran, dan ops/periksa-tema.py menjaga ketiga
     blok tema tetap sinkron termasuk variabel-variabel ini.

     ⚠️ --color-primary di tema terang memakai --emas-teks (#8a5a06), BUKAN
     emas terang: daisyUI memakai primary untuk TEKS dan garis tepi, dan emas
     terang di atas putih hanya 2,2:1. */
  --color-base-100:#ffffff; --color-base-200:#faf8f4; --color-base-300:#f3efe6;
  --color-base-content:#191510;
  --color-primary:#8a5a06;   --color-primary-content:#fffdf8;
  --color-secondary:#b47818; --color-secondary-content:#fffdf8;
  --color-accent:#e8ac31;    --color-accent-content:#2a1a02;
  --color-neutral:#3f382d;   --color-neutral-content:#faf8f4;
  --color-info:#2563eb;      --color-info-content:#ffffff;
  --color-success:#15803d;   --color-success-content:#ffffff;
  --color-warning:#a16207;   --color-warning-content:#ffffff;
  --color-error:#b91c1c;     --color-error-content:#ffffff;
  --radius-selector:999px; --radius-field:.65rem; --radius-box:.9rem;
  --size-selector:.25rem;  --size-field:.25rem;   --border:1px;
  --depth:0; --noise:0;
}

@media (prefers-color-scheme:dark){
  :root:not([data-tema="terang"]){
    --latar:#0d0b07; --latar-2:#100d09; --permukaan:#15120c; --permukaan-2:#1b1710;
    --garis:#2b2419; --garis-kuat:#3d3322;
    --teks:#f4efe6; --teks-2:#d8d0c1; --redup:#a89c88;
    --emas-teks:#e8ac31;         /* 9,7:1 di atas latar gelap */
    --emas-garis:rgba(232,172,49,.28);
    --bayang:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.8);
    --bayang-kuat:0 2px 6px rgba(0,0,0,.6), 0 24px 60px -20px rgba(0,0,0,.9);
    --cahaya:radial-gradient(60rem 30rem at 50% -14rem, rgba(232,172,49,.13), transparent 72%);
    --kaca:rgba(13,11,7,.78);
    --kaca-pekat:rgba(18,15,10,.94);
    --bayang-gulir:rgba(0,0,0,.55);
    --pita-latar:rgba(232,172,49,.08);
    --skema:dark;
    --color-base-100:#15120c; --color-base-200:#0d0b07; --color-base-300:#1b1710;
    --color-base-content:#f4efe6;
    --color-primary:#e8ac31;   --color-primary-content:#2a1a02;
    --color-secondary:#fbd85c; --color-secondary-content:#2a1a02;
    --color-accent:#e8ac31;    --color-accent-content:#2a1a02;
    --color-neutral:#2b2419;   --color-neutral-content:#f4efe6;
    --color-info:#60a5fa;      --color-info-content:#0d0b07;
    --color-success:#4ade80;   --color-success-content:#0d0b07;
    --color-warning:#fbbf24;   --color-warning-content:#0d0b07;
    --color-error:#f87171;     --color-error-content:#0d0b07;
    --radius-selector:999px; --radius-field:.65rem; --radius-box:.9rem;
    --size-selector:.25rem;  --size-field:.25rem;   --border:1px;
    --depth:0; --noise:0;
  }
}
:root[data-tema="gelap"]{
  --latar:#0d0b07; --latar-2:#100d09; --permukaan:#15120c; --permukaan-2:#1b1710;
  --garis:#2b2419; --garis-kuat:#3d3322;
  --teks:#f4efe6; --teks-2:#d8d0c1; --redup:#a89c88;
  --emas-teks:#e8ac31;
  --emas-garis:rgba(232,172,49,.28);
  --bayang:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.8);
  --bayang-kuat:0 2px 6px rgba(0,0,0,.6), 0 24px 60px -20px rgba(0,0,0,.9);
  --cahaya:radial-gradient(60rem 30rem at 50% -14rem, rgba(232,172,49,.13), transparent 72%);
  --kaca:rgba(13,11,7,.78);
  --kaca-pekat:rgba(18,15,10,.94);
  --bayang-gulir:rgba(0,0,0,.55);
  --pita-latar:rgba(232,172,49,.08);
  --skema:dark;
  --color-base-100:#15120c; --color-base-200:#0d0b07; --color-base-300:#1b1710;
  --color-base-content:#f4efe6;
  --color-primary:#e8ac31;   --color-primary-content:#2a1a02;
  --color-secondary:#fbd85c; --color-secondary-content:#2a1a02;
  --color-accent:#e8ac31;    --color-accent-content:#2a1a02;
  --color-neutral:#2b2419;   --color-neutral-content:#f4efe6;
  --color-info:#60a5fa;      --color-info-content:#0d0b07;
  --color-success:#4ade80;   --color-success-content:#0d0b07;
  --color-warning:#fbbf24;   --color-warning-content:#0d0b07;
  --color-error:#f87171;     --color-error-content:#0d0b07;
  --radius-selector:999px; --radius-field:.65rem; --radius-box:.9rem;
  --size-selector:.25rem;  --size-field:.25rem;   --border:1px;
  --depth:0; --noise:0;
}

/* --------------------------------------------------------------- dasar ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:var(--skema)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
body{
  margin:0;background:var(--latar);color:var(--teks);
  font-family:'Jakarta',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:1rem;line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{margin:0;line-height:1.18;letter-spacing:-.022em;font-weight:700;color:var(--teks)}
h1{font-size:clamp(2.1rem,1.35rem + 3.1vw,3.5rem);font-weight:800;letter-spacing:-.033em}
h2{font-size:clamp(1.6rem,1.2rem + 1.7vw,2.35rem);font-weight:750;letter-spacing:-.028em}
h3{font-size:clamp(1.12rem,1rem + .5vw,1.35rem);font-weight:700}
h4{font-size:1rem;font-weight:700}
p{margin:0 0 1.1em}
a{color:var(--emas-teks);text-decoration-color:var(--emas-garis);text-underline-offset:.2em}
a:hover{text-decoration-color:currentColor}
strong{font-weight:700;color:var(--teks)}
small{font-size:.86rem}
ul,ol{margin:0 0 1.2em;padding-left:1.25em}
li{margin-bottom:.45em}
li::marker{color:var(--emas-400)}
img{max-width:100%;height:auto;display:block}
hr{border:0;border-top:1px solid var(--garis);margin:3rem 0}
code,kbd{font-family:'JB Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em}
:focus-visible{outline:2px solid var(--emas-400);outline-offset:3px;border-radius:.3rem}
::selection{background:rgba(232,172,49,.3);color:var(--teks)}

/* ------------------------------------------------------------- layout ----- */
.bungkus{width:100%;max-width:74rem;margin-inline:auto;padding-inline:clamp(1.15rem,4vw,2rem)}
/* ⚠️ `.bungkus-sempit` (52 rem, di-tengah-kan warisan `.bungkus`) TIDAK boleh
   dipakai untuk isi yang rata kiri: tepi kirinya jatuh ~11 rem di dalam tepi
   kiri `.bungkus` 74 rem, sehingga lini masa dan paragraf terlihat menjorok
   dibanding judul halaman di atasnya. Dua sumbu vertikal berbeda di satu
   halaman terbaca sebagai kesalahan tata letak, bukan sebagai hierarki.
   Pakai `.bungkus > .sempit` untuk isi rata kiri, dan sisakan
   `.bungkus-sempit` khusus untuk isi yang memang dipusatkan (404, seruan). */
.bungkus-sempit{max-width:52rem}
.sempit{max-width:52rem}
.bagian{padding-block:clamp(3.5rem,7vw,6rem)}
.bagian--rapat{padding-block:clamp(2.5rem,5vw,4rem)}
/* ⚠️ Tanpa scroll-margin, melompat ke #tentang menaruh judul seksi PERSIS di
   bawah bilah nav yang lengket — judulnya tertutup dan pengunjung mengira
   tautannya meleset. Tingginya nav (4,15rem) plus sedikit ruang napas. */
.bagian[id]{scroll-margin-top:5rem}
.bagian--alt{background:var(--latar-2);border-block:1px solid var(--garis)}
/* Seksi judul halaman dalam (bukan beranda). Dibuat kelas tersendiri karena
   `.bagian--rapat` + `.kepala{margin-bottom}` menumpuk jadi ±170 px ruang mati
   di bawah judul yang seksinya TIDAK berisi apa pun selain judul itu. Di layar
   ponsel jaraknya setinggi separuh layar dan terbaca seperti halaman yang
   gagal memuat. */
.bagian--judul{padding-block:clamp(2.6rem,5vw,4rem) clamp(1.6rem,3vw,2.2rem);
  background-image:var(--cahaya);background-repeat:no-repeat}
.bagian--judul .kepala{margin-bottom:0;max-width:48rem}
/* Seksi isi PERTAMA sesudah judul halaman menempel langsung: dua padding yang
   bertemu (bawah judul + atas isi) menghasilkan jurang yang terbaca sebagai
   "ada yang gagal dimuat", bukan sebagai pemisah. Hanya adjacency ini yang
   terpengaruh — seksi kedua dan seterusnya tetap berjarak penuh. */
.bagian--judul + .bagian--rapat,
.bagian--judul + .bagian{padding-top:0}
.bagian--judul + .bagian--alt{padding-top:clamp(2.5rem,5vw,4rem)}
.lewati{position:absolute;left:-9999px;top:0;background:var(--permukaan);color:var(--teks);
  padding:.7rem 1.1rem;border:1px solid var(--garis);border-radius:.5rem;z-index:100}
.lewati:focus{left:1rem;top:1rem}

/* ---------------------------------------------------------------- nav ----- */
.nav{position:sticky;top:0;z-index:50;background:var(--kaca);
  backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--garis)}
.nav__dalam{display:flex;align-items:center;gap:1rem;min-height:4.15rem}
.merek{display:inline-flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.06rem;
  letter-spacing:-.025em;color:var(--teks);text-decoration:none;flex:none}
/* ⚠️ `flex:none` BUKAN hiasan. Tanpa itu logo adalah item flex yang boleh
   menyusut, dan ketika wadahnya terjepit (persis yang terjadi di footer ponsel
   sebelum grid di bawah diperbaiki) ia menyusut sampai LEBAR NOL — hilang sama
   sekali, tanpa galat, tanpa ruang kosong yang menandakan ada sesuatu yang
   hilang. Lantai grid mencegah penyebabnya; `flex:none` mencegah gejalanya
   muncul lagi lewat wadah lain di kemudian hari. */
.merek img{width:2.1rem;height:2.1rem;flex:none;
  filter:drop-shadow(0 2px 6px rgba(146,76,2,.35))}
.merek span{white-space:nowrap}
.merek em{font-style:normal;color:var(--emas-teks)}
.nav__tautan{display:flex;align-items:center;gap:.15rem;margin-left:auto}
.nav__tautan a{padding:.5rem .72rem;border-radius:.55rem;font-size:.925rem;font-weight:500;
  color:var(--teks-2);text-decoration:none;white-space:nowrap;transition:background .18s,color .18s}
.nav__tautan a:hover{background:var(--pita-latar);color:var(--teks)}
.nav__tautan a[aria-current="page"]{color:var(--emas-teks);font-weight:650;background:var(--pita-latar)}
.nav__alat{display:flex;align-items:center;gap:.4rem;margin-left:.5rem}
.tombol-ikon{display:grid;place-items:center;width:2.4rem;height:2.4rem;flex:none;
  background:transparent;border:1px solid var(--garis);border-radius:.6rem;color:var(--teks-2);
  cursor:pointer;transition:background .18s,border-color .18s,color .18s}
.tombol-ikon:hover{background:var(--permukaan);border-color:var(--garis-kuat);color:var(--teks)}
.tombol-ikon svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.tombol-ikon .ikon-bulan{display:none}
:root[data-tema="gelap"] .tombol-ikon .ikon-bulan{display:block}
:root[data-tema="gelap"] .tombol-ikon .ikon-mata-hari{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="terang"]) .tombol-ikon .ikon-bulan{display:block}
  :root:not([data-tema="terang"]) .tombol-ikon .ikon-mata-hari{display:none}}
.nav__buka{display:none}
/* ⚠️ AMBANG 63.9em DIPAKAI DI TIGA TEMPAT: di sini, di kelas `lg:hidden`
   Tailwind pada laci & dock (Tailwind `lg` = 64rem = 1024px = 64em pada root
   16px), dan di `matchMedia` aset.js. Ketiganya harus menunjuk titik yang
   sama; kalau tidak, ada jendela lebar sempit tempat menu desktop DAN dock
   ponsel sama-sama tampil, atau keduanya sama-sama hilang. */
@media (max-width:63.9em){
  .nav__buka{display:grid}
  /* Tautan desktop disembunyikan total di ponsel — penggantinya laci geser,
     bukan lagi dropdown melebar di bawah bilah nav. */
  .nav__tautan{display:none}
  /* 🔴 WAJIB `auto`, BUKAN jarak tetap.
     Di desktop yang mendorong isi ke kanan adalah `.nav__tautan{margin-left:auto}`.
     Begitu tautan itu jadi `display:none` di ponsel, ia berhenti mendorong apa
     pun — dan `.nav__alat` yang hanya punya `margin-left:.5rem` ikut menempel
     di sebelah logo. Terukur pada layar 390 px: tombol tema dan pembuka laci
     berhenti di x=242 sementara tepi kanan konten ada di x=371 — menggantung
     148 px dari pojok. Cacat ini LAHIR DARI PERUBAHAN YANG BENAR DI TEMPAT
     LAIN (mengganti dropdown jadi laci geser) dan tidak menghasilkan satu pun
     galat; hanya pengukuran tata letak yang bisa menemukannya. */
  .nav__alat{margin-left:auto}
  /* Ruang untuk dock mengambang supaya baris terakhir footer tidak tertutup.
     Diukur, bukan ditebak: dock 0,8rem dari tepi + tinggi ±4,2rem = ±5rem,
     ditambah ruang napas. */
  body{padding-bottom:7rem}
}

/* ─────────────────────── DROPDOWN "EKOSISTEM" (desktop) ────────────────────
   Komponen `dropdown` daisyUI di atas <details>/<summary>. Yang di sini hanya
   menyelaraskan pemicunya dengan tautan nav lain, plus panah yang berputar.

   ⚠️ `list-style:none` SAJA TIDAK CUKUP untuk menghilangkan segitiga bawaan
   <summary>: Safari/WebKit memakai pseudo-elemen ::-webkit-details-marker yang
   tidak terpengaruh list-style, dan segitiganya tetap muncul di sana saja.
   Keduanya wajib ditulis. */
.nav__jatuh{position:relative}
.nav__jatuh > summary{
  display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;list-style:none;
  padding:.5rem .72rem;border-radius:.55rem;font-size:.925rem;font-weight:500;
  color:var(--teks-2);white-space:nowrap;
  transition:background .18s,color .18s}
.nav__jatuh > summary::-webkit-details-marker{display:none}
.nav__jatuh > summary::after{
  content:"";width:.4rem;height:.4rem;flex:none;margin-top:-.18em;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);transition:transform .2s ease}
.nav__jatuh > summary:hover{background:var(--pita-latar);color:var(--teks)}
.nav__jatuh[open] > summary{background:var(--pita-latar);color:var(--emas-teks)}
.nav__jatuh[open] > summary::after{transform:rotate(-135deg);margin-top:.14em}
.nav__jatuh .dropdown-content{
  background:var(--permukaan);border:1px solid var(--garis);box-shadow:var(--bayang-kuat)}
.nav__jatuh .dropdown-content button{
  width:100%;text-align:left;font-size:.92rem;font-weight:500;color:var(--teks-2);
  border-radius:.5rem;cursor:pointer;background:transparent;border:0;
  font-family:inherit;padding:.55rem .7rem;transition:background .18s,color .18s}
.nav__jatuh .dropdown-content button:hover{background:var(--pita-latar);color:var(--emas-teks)}

/* Submenu di dalam laci ponsel — daisyUI `menu` sudah menangani <details>,
   ini hanya menyamakan warnanya dengan tema. */
#laci .menu summary{font-weight:500}
#laci .menu button{width:100%;text-align:left;font-family:inherit;font-size:.95rem;
  background:transparent;border:0;color:var(--teks-2);cursor:pointer}
#laci .menu button:hover{color:var(--emas-teks)}

/* ───────────────────────────── DOCK BAWAH (ponsel) ─────────────────────────
   Komponen `dock` daisyUI, dibentuk ulang jadi PIL MENGAMBANG.

   🔴 SELEKTOR GANDA `.dock.aset-dock` (0,2,0) BUKAN GAYA PENULISAN.
   `.dock` milik daisyUI juga (0,1,0); dengan spesifisitas sama, yang menang
   adalah yang BELAKANGAN di berkas hasil — dan posisi itu ditentukan bundler,
   bukan oleh saya. Di proyek lain di mesin ini persis itu yang terjadi:
   aturannya ada di CSS terpasang, build hijau, dan nol piksel berubah.
   0,2,0 menang tanpa bergantung urutan sama sekali. */
.dock.aset-dock{
  display:grid;
  position:fixed; z-index:45;
  left:50%; bottom:calc(.8rem + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);
  width:calc(100% - 1.6rem); max-width:26rem; height:auto; min-height:0;
  grid-auto-flow:column; grid-auto-columns:1fr; gap:.25rem;
  padding:.4rem; border-radius:1.45rem;
  /* ⚠️ LEBIH PEKAT daripada bilah nav (--kaca). Dock melayang TEPAT DI ATAS
     badan teks, bukan di atas ruang kosong seperti bilah nav yang menempel di
     puncak halaman. Pada .78 alfa, kalimat di belakangnya masih terbaca
     menembus label dock dan keduanya saling mengganggu. Diperiksa pada
     tangkapan layar 3x, bukan dikira-kira. */
  background:var(--kaca-pekat); border:1px solid var(--garis);
  backdrop-filter:saturate(1.7) blur(16px);
  -webkit-backdrop-filter:saturate(1.7) blur(16px);
  box-shadow:var(--bayang-kuat);
}
.dock.aset-dock > *{
  position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.24rem;
  padding:.55rem .25rem .5rem; border-radius:1.08rem;
  color:var(--redup); text-decoration:none;
  font-size:.64rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  transition:color .2s ease, background .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.dock.aset-dock > *:hover{color:var(--teks)}
.dock.aset-dock > *:active{background:var(--pita-latar)}
.dock.aset-dock > .dock-active{color:var(--emas-teks);background:var(--pita-latar)}
/* Garis aksen tipis di tepi atas item aktif — penanda yang terbaca bahkan
   ketika warna teksnya sendiri sulit dibedakan pada layar terang di luar. */
.dock.aset-dock > .dock-active::before{
  content:"";position:absolute;top:.28rem;left:50%;transform:translateX(-50%);
  width:1.6rem;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--emas-600),var(--emas-300),var(--emas-600));
}
/* ⚠️ daisyUI SUDAH menggambar penanda aktifnya sendiri lewat
   `.dock-active::after` — batang 40x4 px di TEPI BAWAH item. Digabung dengan
   `::before` di atas, satu keadaan jadi punya DUA penanda yang saling
   bertentangan arah. Terukur: after 40x4px di bottom:3.2px, before 25,6x2px di
   top:4,5px. Rujukan desainnya menaruh aksen di ATAS, jadi milik daisyUI yang
   dimatikan — bukan milik kita yang dipindah. Spesifisitas (0,3,0) menang atas
   `.dock-active::after` (0,1,0) tanpa bergantung urutan. */
.dock.aset-dock > .dock-active::after{display:none}
.dock.aset-dock .dock-label{font-size:inherit;letter-spacing:inherit;line-height:1.1}
.aset-dock__ikon{width:1.32rem;height:1.32rem;flex:none}

/* 🔴 PENYEMBUNYIAN DI DESKTOP WAJIB DI SINI — SESUDAH aturan dasar di atas,
   dan dengan spesifisitas yang SAMA (0,2,0).
   Dua jebakan sekaligus, dan saya kena keduanya berurutan:
   1. `.lg\:hidden` milik Tailwind hanya 0,1,0, jadi ia KALAH dari
      `.dock.aset-dock` — markup `lg:hidden` pada dock tidak berpengaruh
      sama sekali dan dock tetap tampil di desktop.
   2. Percobaan pertama memperbaikinya dengan `display:none` di aturan dasar
      lalu `display:grid` di media query ponsel — tapi media query itu berada
      LEBIH DULU di berkas. Spesifisitas sama, yang belakangan menang, jadi
      dock ikut hilang DI PONSEL. Dan asersi "mengambang" tetap hijau, karena
      `getBoundingClientRect()` elemen `display:none` semuanya nol sehingga
      "bottom > 4" dan "lebar < layar" kebetulan benar. Uji yang hijau karena
      elemennya tidak ada bukan uji yang hijau — sejak itu asersinya menuntut
      lebar > 200 px dan tinggi > 40 px lebih dulu. */
@media (min-width:64em){
  .dock.aset-dock{display:none}
}
@media (prefers-reduced-motion:no-preference){
  .dock.aset-dock > *{animation:dock-masuk .5s cubic-bezier(.2,.8,.2,1) backwards;
    animation-delay:calc(var(--i,0) * 65ms + 140ms)}
  @keyframes dock-masuk{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}

/* ───────────────────────────── LACI GESER ──────────────────────────────────
   Animasi dan tata letaknya utilitas Tailwind di markup; yang di sini hanya
   hal yang tidak punya padanan utilitas.

   ⚠️ `overscroll-behavior:contain` menahan GULIR BERANTAI: tanpa itu, menggulir
   sampai ujung daftar di dalam laci meneruskan gulirannya ke halaman di
   belakang, dan pengguna menutup laci lalu menemukan dirinya di tempat lain. */
.laci-buka{overflow:hidden}
#laci{overscroll-behavior:contain}
#laci .menu{--color-base-content:var(--teks)}
/* ⚠️ `text-decoration:none` WAJIB DISEBUT DI SINI.
   Aturan `a` global situs ini hanya menyetel WARNA garis bawah, bukan
   mematikannya — di bilah nav desktop garisnya hilang karena `.nav__tautan a`
   mematikannya, dan laci tidak mewarisi apa pun dari sana. Akibatnya seluruh
   tautan laci tampil bergaris bawah emas dan terbaca seperti teks tertaut di
   tengah paragraf, bukan seperti menu.
   ⚠️ <summary> "Ekosistem" ikut disebut: ia BUKAN <a>, jadi tanpa ini ia satu-
   satunya baris yang warnanya berbeda dari yang lain — terlihat seperti
   kesalahan, bukan seperti kelompok. */
#laci .menu a,
#laci .menu summary{
  border-radius:.6rem;text-decoration:none;color:var(--teks-2);font-weight:500}
#laci .menu a:hover,
#laci .menu summary:hover{background:var(--pita-latar);color:var(--teks)}
#laci .menu .menu-active{background:var(--pita-latar);color:var(--emas-teks);font-weight:650}

/* --------------------------------------------------------------- hero ----- */
.hero{position:relative;padding-block:clamp(2.5rem,6vw,4.5rem) clamp(3rem,7vw,5.5rem);
  background-image:var(--cahaya);background-repeat:no-repeat;overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:
  linear-gradient(90deg,transparent,var(--emas-garis) 25%,var(--emas-garis) 75%,transparent)}
.lockup{max-width:58rem;margin:0 auto clamp(1.8rem,4vw,2.8rem)}
.lockup img{width:100%;height:auto}
/* Dua lockup, satu per tema. Yang tidak aktif disembunyikan dengan `display:none`
   pada <picture>-nya — BUKAN opacity/visibility, karena keduanya tetap membuat
   peramban mengunduh gambarnya dan pengunjung membayar dua kali untuk satu
   banner yang terlihat.

   ⚠️ SELURUH ATURAN DI BAWAH WAJIB BERSPESIFISITAS SAMA ATAU NAIK.
   Versi pertama memakai `.lockup picture{display:block}` (0,1,1) untuk tata
   letak lalu `.lockup--gelap{display:none}` (0,1,0) untuk menyembunyikan —
   dan yang (0,1,1) MENANG. Akibatnya KEDUA banner tampil bertumpuk di setiap
   tema, dan pengunjung mengunduh dua gambar besar untuk melihat satu.
   Tidak ada galat, tidak ada peringatan; `curl` melihat HTML yang benar dan
   CSS yang benar. Hanya peramban yang bisa memberitahu — dan hanya kalau
   ditanya `display` dari elemennya, bukan dilihat sekilas: pada tema gelap
   kedua banner sama-sama gelap sehingga tumpukannya nyaris tak kentara. */
.lockup picture{display:none}
.lockup .lockup--terang{display:block}
:root[data-tema="gelap"] .lockup .lockup--terang{display:none}
:root[data-tema="gelap"] .lockup .lockup--gelap{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="terang"]) .lockup .lockup--terang{display:none}
  :root:not([data-tema="terang"]) .lockup .lockup--gelap{display:block}}
.hero__teks{max-width:44rem}
.hero h1{margin-bottom:1rem}
.hero .utama{font-size:clamp(1.05rem,1rem + .35vw,1.2rem);color:var(--redup);max-width:40rem;margin-bottom:1.8rem}
.hero__aksi{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:2rem}

/* -------------------------------------------------------------- tombol ---- */
.tombol{display:inline-flex;align-items:center;gap:.5rem;padding:.72rem 1.3rem;border-radius:.65rem;
  font-size:.95rem;font-weight:650;text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform .16s,box-shadow .18s,background .18s,border-color .18s;line-height:1.4}
.tombol:hover{transform:translateY(-1px)}
.tombol svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.tombol--utama{background:linear-gradient(135deg,var(--emas-300),var(--emas-400) 45%,var(--emas-600));
  color:#2a1a02;box-shadow:0 1px 2px rgba(92,49,2,.3),0 10px 24px -12px rgba(180,120,24,.7)}
.tombol--utama:hover{box-shadow:0 2px 4px rgba(92,49,2,.35),0 16px 32px -12px rgba(180,120,24,.8)}
.tombol--kedua{background:var(--permukaan);color:var(--teks);border-color:var(--garis-kuat);box-shadow:var(--bayang)}
.tombol--kedua:hover{border-color:var(--emas-400)}
.tombol--sunyi{background:transparent;color:var(--teks-2);border-color:var(--garis)}
.tombol--sunyi:hover{background:var(--permukaan);color:var(--teks)}

/* ---------------------------------------------------------------- pita ---- */
.pita{display:inline-flex;align-items:center;gap:.5rem;padding:.34rem .8rem;border-radius:999px;
  font-size:.79rem;font-weight:600;letter-spacing:.01em;
  background:var(--pita-latar);border:1px solid var(--emas-garis);color:var(--emas-teks)}
.pita__titik{width:.42rem;height:.42rem;border-radius:50%;background:currentColor;flex:none}
@media (prefers-reduced-motion:no-preference){
  .pita__titik{animation:denyut 2.6s ease-in-out infinite}
  @keyframes denyut{0%,100%{opacity:1}50%{opacity:.3}}}

/* ------------------------------------------------------------- kepala ----- */
.kepala{max-width:44rem;margin-bottom:clamp(1.8rem,4vw,2.6rem)}
.kepala--tengah{margin-inline:auto;text-align:center}
.alis{display:block;font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--emas-teks);margin-bottom:.7rem}
.kepala p{color:var(--redup);margin-top:.9rem;margin-bottom:0;font-size:1.02rem}

/* -------------------------------------------------------------- kartu ----- */
.kisi{display:grid;gap:1rem}
.kisi--2{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.kisi--3{grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr))}
.kisi--4{grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr))}
.kartu{background:var(--permukaan);border:1px solid var(--garis);border-radius:.9rem;
  padding:1.4rem 1.4rem 1.5rem;box-shadow:var(--bayang);position:relative;overflow:hidden}
.kartu--sorot{border-color:var(--emas-garis)}
.kartu--sorot::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,var(--emas-600),var(--emas-300),var(--emas-600))}
.kartu h3{margin-bottom:.5rem}
.kartu p:last-child{margin-bottom:0}
.kartu p{color:var(--redup);font-size:.96rem}
.kartu__no{display:grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:.6rem;
  background:var(--pita-latar);border:1px solid var(--emas-garis);color:var(--emas-teks);
  font-weight:800;font-size:.9rem;margin-bottom:.9rem}
.kartu__ikon{width:2.3rem;height:2.3rem;margin-bottom:.9rem;color:var(--emas-teks);
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ------------------------------------------------------------- statistik -- */
.statistik{display:grid;gap:1px;background:var(--garis);border:1px solid var(--garis);
  border-radius:.9rem;overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.statistik > div{background:var(--permukaan);padding:1.15rem 1.25rem}
.statistik dt{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--redup);margin-bottom:.35rem}
.statistik dd{margin:0;font-size:1.12rem;font-weight:750;letter-spacing:-.02em;color:var(--teks)}
.statistik dd small{display:block;font-size:.8rem;font-weight:500;color:var(--redup);
  letter-spacing:0;margin-top:.15rem}

/* --------------------------------------------------------------- tabel ---- */
/* ⚠️ Setiap tabel WAJIB dibungkus .tabel-gulir. Tabel lebar tanpa pembungkus
   membuat SELURUH halaman menggulir mendatar di ponsel — dan itu cacat yang
   hanya muncul di lebar yang jarang diuji penulisnya. */
.tabel-gulir{overflow-x:auto;border:1px solid var(--garis);border-radius:.9rem;
  background:var(--permukaan);box-shadow:var(--bayang);-webkit-overflow-scrolling:touch;
  /* Bayangan gulir murni CSS. Dua lapis pertama ikut menggulir (`local`) dan
     menutupi dua lapis berikutnya yang DIAM (`scroll`); jadi bayangan tepi
     hanya terlihat ketika masih ada isi di arah itu. Tanpa petunjuk ini tabel
     di layar 390 px terlihat seperti tabel yang kolomnya terpotong, bukan
     tabel yang bisa digeser — dan pengunjung tidak mencoba menggesernya. */
  background-image:
    linear-gradient(to right, var(--permukaan) 40%, rgba(0,0,0,0)),
    linear-gradient(to left,  var(--permukaan) 40%, rgba(0,0,0,0)),
    radial-gradient(farthest-side at 0% 50%, var(--bayang-gulir), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, var(--bayang-gulir), rgba(0,0,0,0));
  background-position:left center, right center, left center, right center;
  background-size:44px 100%, 44px 100%, 16px 100%, 16px 100%;
  background-repeat:no-repeat;
  background-attachment:local, local, scroll, scroll}
table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:34rem}

/* ⚠️ KETERANGAN TABEL DITARUH DI LUAR PEMBUNGKUS GULIR, BUKAN SEBAGAI <caption>.
   <caption> adalah bagian dari kotak tabel, jadi ia mewarisi `min-width:34rem`
   milik tabel. Di layar 390 px akibatnya kalimat keterangan TERPOTONG di tepi
   kanan dan sisanya hanya bisa dibaca dengan menggulir tabel ke samping —
   padahal keterangan itu justru yang menjelaskan tabelnya. Tidak terlihat sama
   sekali di layar lebar. Karena itu polanya <figure> + <figcaption>, dengan
   `aria-describedby` menjaga kaitan semantiknya untuk pembaca layar. */
figure.tabel{margin:0}
figure.tabel figcaption{color:var(--redup);font-size:.87rem;line-height:1.6;margin-top:.7rem}
thead th{background:var(--permukaan-2);text-align:left;font-size:.74rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--redup);
  padding:.85rem 1.1rem;border-bottom:1px solid var(--garis);white-space:nowrap}
tbody td,tbody th{padding:.85rem 1.1rem;border-bottom:1px solid var(--garis);vertical-align:top;text-align:left}
tbody th{font-weight:650;color:var(--teks)}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
tbody tr:hover{background:var(--permukaan-2)}
td.angka,th.angka{text-align:right;font-family:'JB Mono',ui-monospace,monospace;
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* ------------------------------------------------------------- catatan ---- */
.catatan{display:flex;gap:.9rem;padding:1.1rem 1.25rem;border-radius:.8rem;
  border:1px solid var(--garis);background:var(--permukaan-2);margin-block:1.5rem}
.catatan svg{width:1.25rem;height:1.25rem;flex:none;margin-top:.22rem;
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.catatan p:last-child{margin-bottom:0}
.catatan p{font-size:.95rem;color:var(--teks-2)}
.catatan__judul{display:block;font-weight:700;color:var(--teks);margin-bottom:.25rem;font-size:.95rem}
.catatan--emas{border-color:var(--emas-garis);background:var(--pita-latar)}
.catatan--emas svg{color:var(--emas-teks)}
.catatan--batas{border-left:3px solid var(--emas-400)}

/* ---------------------------------------------------------------- tier ---- */
.tier{display:flex;flex-direction:column;height:100%}
.tier__nama{font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--emas-teks);margin-bottom:.6rem}
.tier__jumlah{font-size:2rem;font-weight:800;letter-spacing:-.03em;line-height:1.1;
  font-variant-numeric:tabular-nums}
.tier__jumlah span{font-size:.92rem;font-weight:600;color:var(--redup);letter-spacing:0;margin-left:.3rem}
.tier__garis{height:1px;background:var(--garis);margin:1.1rem 0}
.tier ul{margin:0;padding-left:1.15em;font-size:.94rem;color:var(--redup)}

/* -------------------------------------------------------------- alokasi --- */
.alokasi{display:flex;flex-direction:column;gap:.95rem}
.alokasi__baris{display:grid;grid-template-columns:1fr auto;gap:.2rem .9rem;align-items:baseline}
.alokasi__nama{font-weight:600;font-size:.95rem}
.alokasi__nilai{font-family:'JB Mono',ui-monospace,monospace;font-size:.88rem;color:var(--redup);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.alokasi__rel{grid-column:1/-1;height:.5rem;border-radius:999px;background:var(--latar-2);
  border:1px solid var(--garis);overflow:hidden}
.alokasi__isi{height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--emas-600),var(--emas-400) 60%,var(--emas-300))}

/* ------------------------------------------------------------- lini masa -- */
.linimasa{position:relative;padding-left:2.1rem;margin:0;list-style:none}
.linimasa::before{content:"";position:absolute;left:.52rem;top:.55rem;bottom:.55rem;width:1px;
  background:linear-gradient(var(--emas-garis),var(--garis))}
.linimasa > li{position:relative;padding-bottom:1.8rem;margin:0}
.linimasa > li:last-child{padding-bottom:0}
.linimasa > li::before{content:"";position:absolute;left:-1.85rem;top:.5rem;width:.72rem;height:.72rem;
  border-radius:50%;background:var(--latar);border:2px solid var(--emas-400)}
.linimasa__waktu{font-family:'JB Mono',ui-monospace,monospace;font-size:.82rem;font-weight:600;
  color:var(--emas-teks);letter-spacing:.02em}
.linimasa h3{margin:.2rem 0 .4rem;font-size:1.08rem}
.linimasa p{color:var(--redup);font-size:.95rem;margin-bottom:0}

/* ---------------------------------------------------------------- kode ---- */
.kode{position:relative;background:var(--permukaan-2);border:1px solid var(--garis);
  border-radius:.8rem;overflow:hidden;margin-block:1.3rem}
.kode__kepala{display:flex;align-items:center;gap:.6rem;padding:.6rem 1rem;
  border-bottom:1px solid var(--garis);background:var(--permukaan);
  font-size:.78rem;font-weight:650;color:var(--redup);letter-spacing:.04em}
.kode__kepala .berkas{font-family:'JB Mono',ui-monospace,monospace;color:var(--emas-teks)}
.kode pre{margin:0;padding:1.1rem 1.25rem;overflow-x:auto;font-size:.83rem;line-height:1.65;
  font-family:'JB Mono',ui-monospace,monospace;color:var(--teks-2);-webkit-overflow-scrolling:touch}
.kode pre code{font-size:inherit}

/* ---------------------------------------------------------------- unduh --- */
.unduh{display:flex;align-items:center;gap:1rem;padding:1.15rem 1.3rem;background:var(--permukaan);
  border:1px solid var(--garis);border-radius:.85rem;text-decoration:none;color:inherit;
  box-shadow:var(--bayang);transition:border-color .18s,transform .16s}
.unduh:hover{border-color:var(--emas-400);transform:translateY(-1px)}
.unduh__ikon{display:grid;place-items:center;width:2.7rem;height:2.7rem;flex:none;border-radius:.6rem;
  background:var(--pita-latar);border:1px solid var(--emas-garis);color:var(--emas-teks)}
.unduh__ikon svg{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.unduh__isi{min-width:0}
.unduh__judul{display:block;font-weight:700;font-size:.98rem;margin-bottom:.1rem}
.unduh__meta{display:block;font-size:.83rem;color:var(--redup)}

/* --------------------------------------------------------------- footer --- */
.kaki{border-top:1px solid var(--garis);background:var(--latar-2);
  padding-block:clamp(2.5rem,5vw,3.5rem) 2rem;margin-top:clamp(3rem,6vw,5rem)}
/* 🔴 `repeat(auto-fit, minmax(9rem,1fr))` MELAHAP RUANG SAMPAI TREK MEREK
   TINGGAL 1 PIKSEL.
   Versi lama: `minmax(0,1.6fr) repeat(auto-fit,minmax(9rem,1fr))`. `auto-fit`
   memasang sebanyak mungkin kolom 9rem (144px) lebih dulu; sisanya baru
   diberikan ke trek pertama. Pada layar 390 px terukur:
       grid-template-columns = 1.21875px 144px 144px
   — kolom merek 1,2 px, LOGONYA 0 px, dan paragraf deskripsi jadi pita setinggi
   400 px selebar satu huruf. Kolom keempat ("Lainnya") terlempar ke baris
   berikutnya, juga 1 px. `minmax(0,…)` yang dimaksudkan mencegah luber justru
   MEMBOLEHKAN trek itu menyusut sampai nol.

   Obatnya dua lapis:
   1. lantai NYATA untuk trek merek (15rem) dan jumlah kolom EKSPLISIT — bukan
      `auto-fit`, yang jumlahnya ditentukan ruang sisa dan karena itu tak bisa
      diperkirakan dari membaca kode;
   2. di bawah 48em susunannya diganti total: merek membentang penuh di atas,
      tiga kelompok tautan turun jadi dua kolom. Memaksa empat kolom muat di
      390 px hanya menghasilkan kolom yang sama-sama terlalu sempit. */
.kaki__kisi{display:grid;gap:2rem;
  grid-template-columns:minmax(0,1.6fr) repeat(auto-fit,minmax(9rem,1fr));
  margin-bottom:2.2rem}
@media (max-width:47.9em){
  /* TIGA kolom, bukan dua. Dengan dua kolom, baris pertama setinggi kelompok
     TERBANYAK (Jelajahi, 3 tautan) sementara Dokumen hanya punya 1 — menyisakan
     ruang mati setinggi dua baris sebelum Lainnya, yang terbaca seperti ada
     sesuatu yang gagal dimuat. Tiga kolom membuat ketiganya satu baris dan
     ruang matinya hilang. Terukur pada 390 px: 104 px per kolom, cukup untuk
     label terpanjang ("Token & Utilitas") dalam dua baris tanpa meluber. */
  .kaki__kisi{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.9rem 1rem}
  .kaki__tentang{grid-column:1/-1}
  .kaki li a{overflow-wrap:break-word}
}
/* ⚠️ AMBANG SATU-KOLOM AWALNYA 26em — DAN ITU SALAH.
   26em = 416 px pada root 16 px, LEBIH LEBAR daripada hampir semua ponsel
   (320–430 px). Akibatnya aturan "sangat sempit" ini berlaku untuk layar
   ponsel BIASA dan susunan dua kolom yang baru saja dibuat tidak pernah
   terpakai: terukur pada 390 px, `grid-template-columns` memulangkan satu trek
   353 px. Satuan `em` di media query selalu relatif ke 16 px, bukan ke ukuran
   font halaman — mudah terbaca lebih kecil daripada kenyataannya.
   19em = 304 px: benar-benar hanya perangkat di bawah 320 px. */
/* ⚠️ Di bawah 352 px, tiga kolom tinggal ~84 px dan `overflow-wrap:break-word`
   mulai memutus DI TENGAH KATA — terukur: "Tokenomics" terpecah jadi
   "Tokenomic" + "s". Pemutusan di tengah kata itu jalan terakhir, bukan tata
   letak; kalau ia sampai terpicu, kolomnya yang terlalu sempit. Dua kolom
   (~131 px) memberi ruang untuk memutus di SPASI seperti seharusnya. */
@media (max-width:22em){
  .kaki__kisi{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.9rem 1.25rem}
}
@media (max-width:19em){
  .kaki__kisi{grid-template-columns:minmax(0,1fr)}
}
.kaki h4{font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--redup);margin-bottom:.85rem}
.kaki ul{list-style:none;margin:0;padding:0}
.kaki li{margin-bottom:.5rem}
.kaki li a{color:var(--teks-2);text-decoration:none;font-size:.93rem}
.kaki li a:hover{color:var(--emas-teks)}
.kaki__tentang p{font-size:.92rem;color:var(--redup);max-width:26rem;margin-top:.9rem}
@media (max-width:47.9em){
  .kaki__tentang p{max-width:34rem}
  .kaki h4{margin-bottom:.7rem}
}
.kaki__bawah{border-top:1px solid var(--garis);padding-top:1.5rem;display:flex;flex-wrap:wrap;
  gap:.6rem 1.5rem;justify-content:space-between;align-items:center;font-size:.85rem;color:var(--redup)}
/* ───────────────────────────── TEKS BERJALAN ───────────────────────────────
   Animasinya utilitas Tailwind `animate-lari` (keyframes didaftarkan di
   ops/tailwind/masuk.css). Yang di sini hanya hal yang tidak punya padanan
   utilitas.

   ⚠️ DUA SALINAN TEKS, dan yang kedua `aria-hidden`. Gulungan mulus menuntut
   jalur selebar dua blok yang digeser tepat -50%; tanpa salinan kedua akan ada
   celah kosong tiap putaran. Tapi salinan itu tidak boleh dibacakan pembaca
   layar dua kali — makanya `aria-hidden` pada yang kedua, bukan pada keduanya.

   ⚠️ BERHENTI SAAT DISENTUH/DIFOKUS. Di dalamnya ada dua tautan; tautan yang
   bergerak praktis tidak bisa diklik, dan pada keyboard fokusnya akan berpindah
   ke elemen yang sedang meluncur keluar layar. */
.lari{position:relative;overflow:hidden;margin-top:1.6rem;padding-block:.75rem;
  border-top:1px solid var(--garis);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3.5rem,#000 calc(100% - 3.5rem),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 3.5rem,#000 calc(100% - 3.5rem),transparent)}
.lari__jalur{display:flex;width:max-content}
.lari:hover .lari__jalur,.lari:focus-within .lari__jalur{animation-play-state:paused}
.lari__blok{margin:0;padding-inline:2.4rem;white-space:nowrap;font-size:.85rem;
  line-height:1.6;color:var(--redup)}
.lari__blok strong{color:var(--teks);font-weight:650}
.lari__blok a{color:var(--emas-teks);font-weight:600;text-decoration-color:var(--emas-garis)}
.lari__pemisah{color:var(--emas-400);padding-inline:.15rem}

/* ⚠️ Tanpa blok ini, pengguna yang meminta gerak dikurangi hanya melihat
   POTONGAN AWAL kalimat: animasinya mati tapi jalurnya tetap selebar dua blok
   dan sisanya tetap terpotong `overflow:hidden`. Pengumuman yang tidak terbaca
   sama saja dengan tidak ada. */
@media (prefers-reduced-motion:reduce){
  .lari{-webkit-mask-image:none;mask-image:none}
  .lari__jalur{width:auto;justify-content:center}
  .lari__blok{white-space:normal;text-align:center;padding-inline:1rem}
  .lari__blok[aria-hidden="true"]{display:none}
}

.sangkalan{font-size:.82rem;line-height:1.65;color:var(--redup);border-left:2px solid var(--garis);
  padding-left:1rem;margin-top:1.6rem}

/* ------------------------------------------------------------- bantuan ---- */
.tengah{text-align:center}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mono{font-family:'JB Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.redup{color:var(--redup)}
.tumpuk-sm > * + *{margin-top:.6rem}
.tumpuk > * + *{margin-top:1.15rem}
.tumpuk-lg > * + *{margin-top:2.2rem}

@media print{
  .nav,.kaki__kisi,.hero__aksi,.tombol{display:none!important}
  body{background:#fff;color:#000}
  .kartu,.tabel-gulir{box-shadow:none;break-inside:avoid}
}