/* beranda.css — halaman depan (pengunjung belum masuk). Arah seni taste-skill "split stage":
   halaman putusan asli diam di separuh layar, kolom baca di sebelahnya. Warna & huruf dari
   token.css (merek); sudut persegi di seluruh halaman, satu bentuk tombol.

   Lima ukuran huruf saja (--u1..--u5). Garis hanya di dalam potongan antarmuka [data-ui],
   tabel, dan isian formulir. */

.beranda {
  --u1:15px; --u2:18px; --u3:clamp(26px, 2.3vw, 32px); --u4:clamp(38px, 3.6vw, 56px); --u5:clamp(56px, 7vw, 112px);
  --tepi-hal:12px;                          /* tepi luar halaman, kiri = kanan */
  --dalam:clamp(24px, 5vw, 72px);           /* jarak isi dari tepi panel */
  --dasar:#ECE7DB;                          /* tanah halaman */
  --lembar:#F8F5EE;                         /* kertas kolom baca */
  --pekat:var(--navy-pekat);
  --kabul:#3F8B52; --sebagian:#C87A2E; --tolak:#B24442; --lain:#9AA3AE;
  margin:0; background:var(--dasar); color:var(--ink); font-family:var(--sans); font-size:var(--u2); line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.beranda *, .beranda *::before, .beranda *::after { box-sizing:border-box; }
/* :where() = tanpa bobot, supaya margin di kelas-kelas di bawah tidak kalah oleh reset ini */
:where(.beranda) :where(h1, h2, h3) { font-family:var(--serif); font-weight:500; color:var(--navy-pekat); margin:0; text-wrap:balance; }
:where(.beranda) p { margin:0; }
.beranda a { color:var(--navy); text-underline-offset:3px; }
.beranda :focus-visible { outline:3px solid var(--emas-terang); outline-offset:3px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* satu tombol untuk seluruh halaman: persegi, satu warna */
.tombol-utama { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 30px;
  border:0; border-radius:0; background:var(--navy); color:#fff; font:600 var(--u2)/1 var(--sans); text-decoration:none; cursor:pointer;
  transition:background .15s, transform .25s var(--pegas); }
.beranda a.tombol-utama { color:#fff; }
.tombol-utama:hover { background:var(--navy-tua); transform:translateY(-2px); }
.tombol-utama:active { transform:translateY(0) scale(.98); }

/* ===================== panggung + kolom baca ===================== */
.panggung-wadah { display:grid; grid-template-columns:1fr 1fr; gap:var(--tepi-hal); padding:var(--tepi-hal); }
.kolom-baca { order:1; background:var(--lembar); min-width:0; }
.panggung { order:2; position:sticky; top:var(--tepi-hal); height:calc(100svh - 2 * var(--tepi-hal)); margin:0;
  display:flex; flex-direction:column; background:var(--pekat); overflow:hidden; }
.pg-lembar { position:relative; flex:1; min-height:0; container-type:size; display:grid; place-items:center; }
.pg-bilah { flex:none; padding:0 24px 18px; display:grid; gap:2px; text-align:center; }
#pg-bilah { font-size:var(--u1); font-weight:600; color:#E4EAF2; transition:opacity .18s ease, translate .25s var(--mulus); }
#pg-bilah.ganti { opacity:0; translate:0 6px; }
.pg-bilah small { font-size:13px; color:#93A5BC; }

/* --- lembar putusan buatan sendiri. Semua ukuran dalam em; font-size menyesuaikan panggung
   (lebar 44em, tinggi 62em muat), jadi isinya selalu utuh di layar mana pun. --- */
.dok-wadah { position:relative; font-size:min(calc(100cqw / 46), calc(100cqh / 64)); }
/* tumpukan lembar di belakang: arsip, bukan satu halaman. Bergeser sedikit tiap keadaan berganti */
.dok-tumpuk span { position:absolute; inset:0; background:#F1ECE0; transition:rotate 1s var(--mulus), translate 1s var(--mulus); }
.dok-tumpuk span:first-child { rotate:3.2deg; translate:1.4em .6em; background:#E4DDCC; }
.dok-tumpuk span:last-child { rotate:1.4deg; translate:.6em .3em; }
.panggung[data-tahap="pindai"] .dok-tumpuk span:first-child { rotate:4.6deg; translate:2em 1em; }
.panggung[data-tahap="majelis"] .dok-tumpuk span:first-child { rotate:-3deg; translate:-1.4em .8em; }
.panggung[data-tahap="majelis"] .dok-tumpuk span:last-child { rotate:-1.6deg; translate:-.7em .4em; }
.panggung[data-tahap="kutip"] .dok-tumpuk span { rotate:-4deg; translate:-2.4em 2em; }
.dok { --tinta:#1F2328; position:relative; width:40em; padding:3.4em 3.6em 3em;
  background:#FFFDF8; color:var(--tinta); font-family:var(--serif);
  box-shadow:0 2.4em 5em -1.6em rgba(0,0,0,.55), 0 .2em .5em rgba(0,0,0,.25);  /* taste-skill-ignore: lembar kertas melayang di atas panggung gelap (objek, bukan permukaan) */
  rotate:-.8deg; animation:dok-datang 1.1s var(--mulus) both; transition:rotate .9s var(--mulus), translate .9s var(--mulus), scale .9s var(--mulus); }
@keyframes dok-datang { from { opacity:0; translate:0 6em; rotate:3deg; } }
.dk-judul { text-align:center; font-size:1.25em; font-weight:700; letter-spacing:.32em; }
.dk-nomor { text-align:center; font-size:.82em; margin-top:.35em; color:#3a3f45; }
.dk-teks { position:relative; margin-top:2.2em; display:grid; gap:.95em; font-size:.8em; line-height:1.7; text-align:justify; hyphens:auto; }
.dk-bagian { font-weight:700; letter-spacing:.06em; }
.dk-hal { justify-self:start; margin:.3em 0 -.4em -.4em; padding:0 .45em; font:600 .78em/1.6 var(--sans); color:var(--emas-tua); background:var(--emas-pucat); }
.dk-tabel { width:100%; border-collapse:collapse; font:.78em/1.35 var(--sans); text-align:right; }   /* tabel sungguhan: bergaris */
.dk-tabel th, .dk-tabel td { border:1px solid #6b7078; padding:.35em .5em; }
.dk-tabel th { font-weight:600; text-align:center; background:#F4F1EA; }
.dk-tabel td:nth-child(2) { text-align:left; }
.dk-tabel td:first-child { text-align:center; }
.dk-tabel td:last-child { font-weight:700; }
.dk-majelis b { font-weight:700; }
/* sorotan temuan (kotak cari di kiri): spidol menyapu dari kiri */
.dok mark { color:inherit; padding:0 .08em; margin:0 -.08em; background:linear-gradient(var(--stabilo), var(--stabilo)) 0 0 / 0% 100% no-repeat;  /* taste-skill-ignore: sorotan spidol, satu warna rata */
  -webkit-box-decoration-break:clone; box-decoration-break:clone; transition:background-size .5s var(--mulus); }
.dok mark.nyala { background-size:100% 100%; }

/* --- dibaca ulang (OCR): lembar mulai sebagai pindaian buram berbutir; garis emas menyapu dari atas,
   tiap baris menjadi tajam saat garis lewat (penundaan per baris = --i, diisi beranda.js) --- */
.dok-butir { position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .8s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .33  0 0 0 0 .3  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.dok-pindai { position:absolute; left:0; right:0; top:0; height:.3em; background:var(--emas-terang); opacity:0;
  box-shadow:0 0 1.6em .4em rgba(217,169,63,.55); pointer-events:none; }  /* taste-skill-ignore: cahaya garis pemindai (gerak) */
.dok.buram .dok-butir { opacity:1; transition:none; }
.dok.buram .dk-baris { filter:blur(.09em) grayscale(1); opacity:.5; transition:none; }
.dk-baris { transition:filter .5s ease, opacity .5s ease; transition-delay:calc(var(--i, 0) * 110ms); }
.dok.memindai .dok-pindai { animation:pindai 2.4s cubic-bezier(.45,0,.55,1) forwards; }
@keyframes pindai { 0% { opacity:0; top:0; } 6% { opacity:1; } 94% { opacity:1; } 100% { opacity:0; top:100%; } }

/* --- keadaan panggung, mengikuti bagian kiri yang sedang dibaca --- */
.dk-teks > * { transition:opacity .6s ease, filter .5s ease; transition-delay:calc(var(--i, 0) * 110ms), calc(var(--i, 0) * 110ms); }
.panggung[data-tahap="majelis"] .dk-teks > :not(.dk-majelis):not(.dk-hal) { opacity:.45; transition-delay:0s; }
.panggung[data-tahap="majelis"] .dk-majelis { background:var(--emas-pucat); box-shadow:0 0 0 .6em var(--emas-pucat); }  /* taste-skill-ignore: latar sorotan paragraf (perpanjangan warna), bukan bayangan */
.panggung[data-tahap="kutip"] .dok { rotate:-2.2deg; translate:-1.5em 1em; scale:.94; }
.panggung[data-tahap="kutip"] .dk-teks > :not(#dk-kutip-asal):not(.dk-hal) { opacity:.45; }
.dok-kutip { position:absolute; width:min(max(26em, 300px), 88%); font-size:min(calc(100cqw / 46), calc(100cqh / 64)); z-index:2; right:6%; bottom:12%;
  padding:1.6em 1.8em 1.4em; background:var(--navy); color:#F3F5F8; font-family:var(--serif);
  box-shadow:0 2em 3.4em -1em rgba(0,0,0,.6);  /* taste-skill-ignore: kartu kutipan melayang (objek terangkat) */
  opacity:0; translate:3em 2em; rotate:2deg; pointer-events:none;
  transition:opacity .5s ease, translate .8s var(--mulus), rotate .8s var(--mulus); }
.dok-kutip p { font-size:max(14px, 1.08em); line-height:1.5; }
.dok-kutip .dkk-rujuk { margin-top:.9em; font:500 max(13px, .82em)/1.45 var(--sans); color:#C4CFDD; }
.dkk-rujuk b { color:var(--emas-terang); }
.dkk-tanda { position:absolute; top:-1em; left:1.8em; padding:.25em .8em; background:var(--emas-terang); color:var(--navy-pekat);
  font:700 max(13px, .78em)/1.6 var(--sans); scale:0; transition:scale .45s var(--pegas) .55s; }
.panggung[data-tahap="kutip"] .dok-kutip { opacity:1; translate:0 0; rotate:-1deg; }
.panggung[data-tahap="kutip"] .dkk-tanda { scale:1; }

/* cap "dibaca ulang": jatuh ke pojok lembar begitu pemindaian selesai (milik kita, bukan cap resmi) */
.dok-cap { position:absolute; top:2.2em; right:2.4em; display:grid; place-items:center; width:6.4em; height:6.4em; border-radius:50%;
  border:.18em solid var(--emas); color:var(--emas-tua); font:700 .62em/1.15 var(--sans); text-align:center; letter-spacing:.06em; text-transform:uppercase;
  rotate:-14deg; opacity:0; scale:1.7; transition:opacity .25s ease, scale .45s var(--mulus); pointer-events:none; }  /* taste-skill-ignore: cap bulat di atas kertas (benda), bukan garis tepi */
.dok-cap b { display:block; font-size:1.7em; letter-spacing:.12em; }
.dok.terbaca .dok-cap { opacity:.85; scale:1; }

/* --- gerak pembuka (resep taste-skill): baris judul naik dari balik masker, lalu kalimat,
   kotak cari, dan angka; selesai dalam ~1,2 dtk. Tanpa JS / gerak dikurangi: langsung tampil. --- */
.baris-judul .line { display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.baris-judul [data-line] { display:block; }
@media (prefers-reduced-motion: no-preference) {
  .js .baris-judul [data-line] { transform:translateY(105%); animation:naik-baris .9s cubic-bezier(.16,1,.3,1) forwards; }
  .js .baris-judul .line:nth-child(2) [data-line] { animation-delay:.11s; }
  .js .baris-judul .line:first-child [data-line] { animation-delay:0s; }
  .js [data-load] { opacity:0; transform:translateY(12px); animation:naik-muat .5s cubic-bezier(.22,1,.36,1) forwards; }
  .js .pengantar[data-load] { animation-delay:.42s; } .js .cari-depan[data-load] { animation-delay:.5s; } .js .angka-depan[data-load] { animation-delay:.6s; }
  .cari-depan input.baru { animation:kata-baru .45s cubic-bezier(.22,1,.36,1); }
}
@keyframes naik-baris { to { transform:none; } }
@keyframes naik-muat { to { opacity:1; transform:none; } }
@keyframes kata-baru { from { opacity:0; transform:translateY(8px); } }

/* angka bergulir */
.roll-angka { display:inline-flex; align-items:flex-start; line-height:1.1; font-variant-numeric:tabular-nums; white-space:pre; }
.roll-kol { display:inline-block; height:1.1em; line-height:1.1; overflow:clip; }
.roll-pita { display:flex; flex-direction:column; transform:translateY(calc(var(--d) * -1.1em)); }
.roll-pita > span { height:1.1em; }
@media (prefers-reduced-motion: no-preference) {
  .roll:not(.is-in) .roll-pita { transform:none; }
  .roll.is-in .roll-pita { transition:transform 1.1s cubic-bezier(.16,1,.3,1) calc(.6s + var(--i) * 70ms); }
}

/* tautan: garis bawah tumbuh dari kiri saat disentuh */
.nav-depan a, .pembuka-akun a, .kaki-depan nav a, .hp-tautan, .dp-pindah a { text-decoration:none;
  background:linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition:background-size .3s cubic-bezier(.22,1,.36,1), color .18s ease; }  /* taste-skill-ignore: garis bawah tautan (satu warna), bukan isian */
.nav-depan a:hover, .pembuka-akun a:hover, .kaki-depan nav a:hover, .hp-tautan:hover, .dp-pindah a:hover { background-size:100% 1.5px; text-decoration:none; }
.pembuka-akun a, .hp-tautan, .dp-pindah a { background-size:100% 1.5px; }
.pembuka-akun a:hover, .hp-tautan:hover, .dp-pindah a:hover { background-size:0 1.5px; background-position:100% 100%; }

/* --- lembar depan: seperti kartu menu, semua di tengah --- */
.lembar-depan { min-height:calc(100svh - 2 * var(--tepi-hal)); display:flex; flex-direction:column; padding:28px var(--dalam) 32px; text-align:center; }
.nav-depan { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; font-size:var(--u1); }
.nav-depan > a:first-child { justify-self:start; }
.nav-depan > a:last-child { justify-self:end; }
.nav-depan a { color:var(--ink); text-decoration:none; font-weight:600; }
.nav-depan a:hover { color:var(--navy); text-decoration:underline; }
.merek { font-family:var(--serif); font-size:var(--u3); font-weight:600; letter-spacing:-.01em; color:var(--navy-pekat) !important; }
.merek > span > span { color:var(--emas-tua); }
.merek { display:inline-flex; align-items:center; gap:10px; }
.merek .lambang { width:36px; height:36px; flex:none; padding:3px; box-sizing:border-box; background:var(--navy); border-radius:7px; }
/* lambang di beranda: sekali saat dibuka, pita turun lalu baris disorot (sama dengan halaman Masuk) */
.lambang-sorot { transform-origin:left center; transform-box:fill-box; }
.lambang-pita { transform-box:fill-box; }
@media (prefers-reduced-motion: no-preference) {
  .js .merek .lambang-pita { animation:lambang-pita .5s var(--mulus) .15s both; }
  .js .merek .lambang-sorot { animation:lambang-sapu .8s var(--mulus) .5s both; }
}
@keyframes lambang-pita { from { transform:translateY(-6px); opacity:0; } }
@keyframes lambang-sapu { from { transform:scaleX(0); } }
.merek:hover { text-decoration:none !important; }
.pembuka { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; padding:48px 0; }
.pembuka h1 { font-size:var(--u4); line-height:1.04; letter-spacing:-.02em; color:var(--navy); max-width:18ch; }
.pengantar { max-width:42ch; color:var(--ink); }
.cari-depan { width:min(100%, 520px); margin-top:8px; display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  background:#fff; border:2px solid var(--navy); text-align:left; position:relative;
  transition:box-shadow .25s var(--mulus); }   /* taste-skill-ignore: isian formulir */
.cari-depan:focus-within { box-shadow:0 0 0 4px rgba(217,169,63,.45); }  /* taste-skill-ignore: cincin fokus isian */
.cd-ikon { margin:0 6px 0 16px; color:var(--navy); }
.cari-depan input[type=search] { min-width:0; height:56px; border:0; outline:0; background:transparent; padding:0 8px; font:inherit; font-size:var(--u2); color:var(--ink); }
.cari-depan input::placeholder { color:var(--redup2); }
.cari-depan input::-webkit-search-cancel-button { display:none; }
.cari-depan .tombol-utama { min-height:56px; }
.cd-hasil { position:absolute; left:0; top:calc(100% + 10px); font-size:var(--u1); color:var(--emas-tua); font-weight:600;
  opacity:0; translate:0 -4px; transition:opacity .3s, translate .3s var(--mulus); }
.cd-hasil.tampil { opacity:1; translate:0 0; }
.cd-ketik { display:inline-block; width:2px; height:1.2em; background:var(--navy); vertical-align:-.2em; animation:kedip 1s steps(1) infinite; }
@keyframes kedip { 50% { opacity:0; } }
.pembuka-akun { margin-top:40px; font-size:var(--u1); color:var(--redup); }
.angka-depan { margin:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; padding-top:28px; }
.angka-depan div { display:flex; flex-direction:column-reverse; gap:2px; }
.angka-depan dd { margin:0; font-family:var(--serif); font-size:var(--u3); color:var(--navy-pekat); font-variant-numeric:lining-nums; }
.angka-depan dt { font-size:var(--u1); color:var(--redup); }

/* --- bagian baca: tiap bagian menggerakkan lembar di panggung --- */
.baca { min-height:92svh; display:flex; flex-direction:column; justify-content:center; gap:24px; padding:96px var(--dalam); }
.baca > * { max-width:46ch; }
.baca h2 { font-size:var(--u3); line-height:1.15; letter-spacing:-.01em; }
.angka-besar { font-family:var(--serif); font-size:var(--u5); line-height:.95; letter-spacing:-.03em; color:var(--navy); font-variant-numeric:lining-nums; }
.angka-besar span { display:block; margin-top:8px; font-size:var(--u3); letter-spacing:-.01em; color:var(--ink); }
.daftar-bagian { margin:0; padding:0; list-style:none; display:grid; gap:18px; }
.daftar-bagian b { display:block; font-family:var(--serif); font-size:var(--u2); color:var(--navy-pekat); }

/* ===================== coba: masukan gelap | hasil terang ===================== */
.coba { display:grid; grid-template-columns:1fr 1fr; min-height:90svh; margin:0 var(--tepi-hal); }
.coba-gelap, .coba-terang { position:relative; padding:30svh var(--dalam) 140px; }
.coba-gelap { background:var(--pekat); color:#E7ECF3; }
.coba-terang { background:#fff; display:flex; flex-direction:column; align-items:flex-start; }
.coba-form { display:flex; flex-direction:column; gap:14px; max-width:34ch; }
.coba-form label { font-size:var(--u2); color:#C3CDDA; }
.coba-form input { width:100%; padding:6px 0 10px; border:0; border-bottom:2px solid rgba(255,255,255,.35); background:transparent;
  color:#fff; font:400 var(--u3)/1.2 var(--serif); caret-color:var(--emas-terang); border-radius:0; }
.coba-form input:focus { outline:none; border-bottom-color:var(--emas-terang); }
.coba-contoh { font-size:var(--u1); color:#C3CDDA; display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline; }
.coba-contoh button { all:unset; cursor:pointer; color:#fff; font-weight:600; text-decoration:underline; text-decoration-color:rgba(255,255,255,.35);
  text-underline-offset:4px; transition:text-decoration-color .15s, color .15s; }
.coba-contoh button:hover { color:var(--emas-terang); text-decoration-color:currentColor; }
.coba-contoh button:focus-visible { outline:3px solid var(--emas-terang); outline-offset:3px; }
.coba-judul { position:absolute; bottom:32px; font-family:var(--serif); font-size:var(--u5); line-height:1; letter-spacing:-.03em; font-weight:500; white-space:nowrap; }
.coba-gelap .coba-judul { left:var(--dalam); color:#fff; }
.coba-judul--kanan { right:var(--dalam); color:var(--navy-pekat); }

.hasil-pasal { width:min(100%, 480px); padding:28px; border:1px solid #D9DFE8; background:#fff;  /* taste-skill-ignore: potongan antarmuka [data-ui] */
  font-size:var(--u1); color:var(--ink2); }
.hp-pasal { font-family:var(--serif); font-size:20px; color:var(--navy-pekat); }
.hp-jumlah { margin-top:6px; font-size:var(--u2); color:var(--ink); }
.hp-jumlah b { display:block; font-family:var(--serif); font-size:var(--u4); line-height:1.05; font-weight:600; color:var(--navy); font-variant-numeric:tabular-nums; }
.hp-batang { display:flex; height:14px; margin:22px 0 14px; background:#EEF1F5; overflow:hidden; }
.hp-batang { transform-origin:left; transition:transform .7s var(--mulus); }
.hp-batang.ulang { transform:scaleX(0); transition:none; }
.hp-batang span { height:100%; width:0; }
.b-kabul, .t-kabul { background:var(--kabul); } .b-sebagian, .t-sebagian { background:var(--sebagian); }
.b-tolak, .t-tolak { background:var(--tolak); } .b-lain, .t-lain { background:var(--lain); }
.hp-rincian { margin:0; display:grid; gap:6px; }
.hp-rincian div { display:flex; justify-content:space-between; gap:12px; }
.hp-rincian dt { display:flex; align-items:center; gap:8px; }
.hp-rincian i { width:10px; height:10px; flex:none; }
.hp-rincian dd { margin:0; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.hp-catatan { margin-top:16px; color:var(--redup); }
.hp-tautan { display:inline-block; margin-top:14px; font-weight:600; }
.hasil-pasal.kosong .hp-batang, .hasil-pasal.kosong .hp-rincian { opacity:.35; }

/* ===================== cara kerja: tiga langkah (tab) + potongan antarmuka, satu layar ===================== */
.cara { display:grid; grid-template-columns:repeat(12, 1fr); gap:0 24px; align-items:center; padding:140px calc(var(--tepi-hal) + var(--dalam)); }
.cara-teks { grid-column:1 / 6; display:grid; gap:20px; }
.cara-teks h2 { font-size:var(--u4); line-height:1.05; letter-spacing:-.02em; }
.cara-pengantar { max-width:40ch; color:var(--ink2); }
.langkah-daftar { display:grid; gap:10px; margin-top:12px; }
.langkah { all:unset; box-sizing:border-box; position:relative; isolation:isolate; overflow:hidden; cursor:pointer; display:grid; padding:18px 22px 10px;
  background:#E2DCCD; transition:background .3s ease, transform .3s cubic-bezier(.22,1,.36,1); }
.langkah:hover { background:#DAD3C1; }
.langkah:focus-visible { outline:3px solid var(--emas-terang); outline-offset:3px; }
.lg-judul { font-family:var(--serif); font-size:var(--u2); line-height:1.3; color:var(--ink2); transition:color .3s ease, font-size .3s ease; }
.lg-isi { display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1); }
.lg-isi > span { overflow:hidden; color:var(--ink2); font-size:var(--u1); line-height:1.55; padding-top:8px; opacity:0; transform:translateY(-4px);
  transition:opacity .3s ease, transform .45s cubic-bezier(.22,1,.36,1); }
.langkah.aktif { background:#fff; }
.langkah.aktif .lg-judul { color:var(--navy-pekat); font-size:var(--u3); }
.langkah.aktif .lg-isi { grid-template-rows:1fr; }
.langkah.aktif .lg-isi > span { opacity:1; transform:none; }
/* sisa waktu sebelum langkah berikutnya: isian warna menyapu kartu aktif (bukan garis) */
.langkah::before { content:""; position:absolute; inset:0; z-index:-1; background:var(--navy-muda); transform:scaleX(0); transform-origin:left; }
.langkah.jalan::before { transform:scaleX(1); transition:transform var(--lama, 6s) linear; }
.cara-panggung { grid-column:7 / 13; }
.ui-potongan { width:100%; min-height:500px; padding:40px; background:#DCE5F0; display:grid; overflow:hidden; font-size:15px; line-height:1.5; color:var(--ink2); }
.ui-tahap { grid-area:1 / 1; align-self:center; opacity:0; transform:translateY(16px) scale(.985); transition:opacity .45s ease, transform .6s cubic-bezier(.16,1,.3,1); pointer-events:none; }
.ui-potongan[data-tahap="1"] .ut-1, .ui-potongan[data-tahap="2"] .ut-2, .ui-potongan[data-tahap="3"] .ut-3 { opacity:1; transform:none; transition-delay:.12s; }
/* isi potongan: gaya aplikasi sebenarnya (lihat daftar.css / detail.css), di sini boleh bergaris */
.ui-cari { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:10px; background:#fff; border:1px solid #CFD8E3; }  /* taste-skill-ignore: potongan antarmuka [data-ui], gaya aplikasi asli */
.ui-chip { padding:3px 10px; background:var(--navy-muda); color:var(--navy); font-weight:600; border:1px solid #CAD7E6; border-radius:14px; }  /* taste-skill-ignore: potongan antarmuka [data-ui], gaya aplikasi asli */
.ui-tombol { margin-left:auto; padding:6px 14px; background:var(--navy); color:#fff; font-weight:600; border-radius:6px; }
.ui-jumlah { margin:14px 0 10px; font-size:14px; color:var(--redup); }
.ui-jumlah b { font-family:var(--serif); font-size:20px; color:var(--navy-pekat); }
.ui-baris { padding:14px 16px; background:#fff; border:1px solid #DDE3EA; display:grid; gap:4px; }  /* taste-skill-ignore: potongan antarmuka [data-ui], gaya aplikasi asli */
.ui-nomor { font-weight:700; color:var(--navy); text-decoration:underline; text-underline-offset:3px; }
.ui-sub { font-size:13.5px; color:var(--redup); display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.ui-hasil { padding:1px 8px; border:1px solid; border-radius:5px; font-size:12.5px; font-weight:600; }  /* taste-skill-ignore: potongan antarmuka [data-ui], gaya aplikasi asli */
.ui-hasil.kabul { background:#E3F0E5; color:#1B5E2A; border-color:#C3DFC9; }
.ui-cup { margin-top:6px; font-family:var(--serif); font-size:14px; line-height:1.6; color:var(--ink2); }
.ui-cup mark { background:linear-gradient(to bottom, transparent 14%, var(--stabilo) 14%, var(--stabilo) 90%, transparent 90%); color:inherit; padding:0 1px; }  /* taste-skill-ignore: stabilo aplikasi asli, di dalam [data-ui] */
.ui-hal { display:inline-block; margin-right:8px; padding:0 7px; border:1px solid var(--emas-tepi); border-radius:6px; background:var(--emas-pucat);  /* taste-skill-ignore: potongan antarmuka [data-ui], gaya aplikasi asli */
  color:var(--emas-tua); font:600 12.5px/1.6 var(--sans); vertical-align:1px; }
.ui-hal.aktif { box-shadow:0 0 0 3px rgba(217,169,63,.35); }  /* taste-skill-ignore: cincin fokus tanda halaman aktif, di dalam [data-ui] */
.ui-label { margin-bottom:10px; font-family:var(--serif); font-size:20px; color:var(--navy-pekat); }
.ui-pokok { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; }
.ui-pokok table { width:100%; border-collapse:collapse; background:#fff; font-size:12.5px; }
.ui-pokok th, .ui-pokok td { padding:7px 8px; border:1px solid #DDE3EA; text-align:right; }
.ui-pokok th:first-child, .ui-pokok td:first-child { text-align:left; }
.ui-pokok th { background:#F4F6F9; font-weight:600; color:var(--ink2); }
.ui-pokok td b { color:var(--navy-pekat); }
.ui-label .ui-hal { margin-left:8px; vertical-align:3px; }
.ui-jendela { background:#525659; box-shadow:0 18px 40px -16px rgba(16,36,63,.55); }  /* taste-skill-ignore: jendela PDF terbuka (dialog), di dalam [data-ui] */
.ui-jendela-kepala { padding:8px 12px; background:var(--rak); font-size:12.5px; color:var(--redup); }
.ui-jendela-kepala b { color:var(--navy-pekat); }
.ui-jendela img { display:block; width:100%; height:auto; }
.ui-pdf { margin-top:14px; padding:10px 14px; background:var(--navy-pekat); color:#E8EDF4; font-size:13.5px; font-weight:600; }
.ui-kutip { padding:14px 16px; background:#fff; border:1px solid #DDE3EA; font-family:var(--serif); font-size:14.5px; line-height:1.6; color:var(--ink); }
.ui-kabar { margin-top:16px; padding:12px 16px; background:var(--navy-pekat); color:#E8EDF4; display:grid; gap:2px; font-size:13.5px;
  box-shadow:0 14px 30px -12px rgba(16,36,63,.6); }  /* taste-skill-ignore: kabar mengambang di atas potongan [data-ui] */
.ui-kabar b { color:#fff; }

/* ===================== isi aplikasinya: disusun seperti peraturan, di kertas lembar putusan ===================== */
.tersedia { margin:0 var(--tepi-hal); padding:140px var(--dalam); background:var(--pekat); color:#E7ECF3;
  display:grid; grid-template-columns:repeat(12, 1fr); gap:40px 24px; align-items:start; }
.tersedia-kepala { grid-column:1 / 4; position:sticky; top:96px; display:grid; gap:16px; }
.tersedia-kepala h2 { color:#fff; font-size:var(--u4); line-height:1.05; letter-spacing:-.02em; }
.tersedia-kepala p { color:#B9C6D6; max-width:28ch; }
.aturan { grid-column:4 / 13; background:#FFFDF8; color:#1F2328; padding:56px 56px 64px; font-family:var(--serif);
  box-shadow:0 30px 60px -28px rgba(0,0,0,.6); }  /* taste-skill-ignore: lembar kertas yang sama dengan lembar putusan di atas (objek) */
.aturan-judul { text-align:center; font-size:var(--u2); font-weight:700; letter-spacing:.28em; text-transform:uppercase; }
.aturan-isi { margin-top:44px; display:grid; grid-template-columns:repeat(3, 1fr); gap:40px; }
.bab h3 { display:grid; gap:2px; text-align:center; font-family:var(--serif); font-size:var(--u2); font-weight:700; color:#1F2328; letter-spacing:.06em; text-transform:uppercase; }
.bab h3 span { font-size:var(--u1); font-weight:600; letter-spacing:.14em; color:var(--emas-tua); }
.pasal { margin-top:22px !important; text-align:center; font-weight:600; font-size:var(--u1); }
.bab ol { margin:14px 0 0; padding:0; list-style:none; counter-reset:ayat; display:grid; gap:14px; }
.bab li { counter-increment:ayat; position:relative; padding-left:2.2em; font-size:var(--u1); line-height:1.65; text-align:left; }
.bab li::before { content:"(" counter(ayat) ")"; position:absolute; left:0; top:0; color:var(--ink2); }
.bab mark { color:inherit; font-weight:700; padding:0 .1em; margin:0 -.1em;
  background:linear-gradient(var(--stabilo), var(--stabilo)) 0 0 / 0% 100% no-repeat;  /* taste-skill-ignore: sorotan spidol, motif lembar putusan */
  -webkit-box-decoration-break:clone; box-decoration-break:clone; }
@media (prefers-reduced-motion: no-preference) {
  .js .bab mark { transition:background-size .6s cubic-bezier(.22,1,.36,1); }
  .js .bab.tampak li:nth-child(1) mark { transition-delay:.35s; } .js .bab.tampak li:nth-child(2) mark { transition-delay:.5s; }
  .js .bab.tampak li:nth-child(3) mark { transition-delay:.65s; } .js .bab.tampak li:nth-child(4) mark { transition-delay:.8s; }
}
.bab.tampak mark, html:not(.js) .bab mark { background-size:100% 100%; }
@media (prefers-reduced-motion: reduce) { .bab mark { background-size:100% 100%; } }

/* ===================== isi arsip: kolom nama, tanpa kotak ===================== */
.isi-arsip { display:grid; grid-template-columns:repeat(12, 1fr); gap:0 24px; padding:140px calc(var(--tepi-hal) + var(--dalam)); }
.isi-arsip h2 { grid-column:1 / 4; align-self:start; font-size:var(--u3); }
.kolom-nama { grid-column:5 / 13; columns:4; column-gap:32px; font-size:var(--u2); line-height:1.5; color:var(--ink); }
.kolom-nama p { break-inside:avoid; }
.kolom-nama .jenis { color:var(--redup); }
.kolom-nama .jenis-baru { break-before:column; }

/* ===================== penutup: formulir daftar yang sudah terbuka ===================== */
.penutup { margin:0 var(--tepi-hal); min-height:90svh; background:var(--navy); color:#E7ECF3; display:grid;
  grid-template-columns:repeat(12, 1fr); gap:0 24px; padding:var(--dalam); }
.penutup-teks { grid-column:1 / 6; align-self:end; display:grid; gap:20px; padding-bottom:16px; }
.penutup-teks h2 { color:#fff; font-size:var(--u5); line-height:.92; letter-spacing:-.03em; }
.penutup-teks p { max-width:36ch; font-size:17px; }
.daftar-potongan { grid-column:7 / 12; align-self:center; width:min(100%, 440px); justify-self:start; padding:32px; background:#fff; color:var(--ink);
  border-radius:12px; box-shadow:0 30px 70px -24px rgba(5,15,30,.65); display:grid; gap:8px; font-size:var(--u1); }  /* taste-skill-ignore: bayangan dialog daftar yang terbuka (cetak biru: dialog membawa bayangannya) */
.dp-judul { font-family:var(--serif); font-size:24px; color:var(--navy-pekat); margin-bottom:10px; }
.daftar-potongan label { font-weight:600; color:var(--ink); }
.daftar-potongan input { height:46px; padding:0 12px; border:1px solid var(--tepi-input); border-radius:8px; font:inherit; font-size:16px; color:var(--ink); background:#fff; }
.daftar-potongan input:focus { outline:2px solid var(--navy); outline-offset:-1px; border-color:var(--navy); }
.dp-bantu { color:var(--redup); }
.daftar-potongan .tombol-utama { margin-top:12px; width:100%; border-radius:8px; }
.dp-pindah { text-align:center; color:var(--redup); margin-top:4px; }
.penutup-masuk { grid-column:7 / 12; align-self:center; }
.penutup-masuk .tombol-utama { background:#fff; color:var(--navy-pekat) !important; min-height:60px; padding:0 40px; font-size:var(--u2); }
.penutup-masuk .tombol-utama:hover { background:var(--emas-pucat); }

/* ===================== kaki: satu baris tenang ===================== */
.kaki-depan { display:grid; grid-template-columns:1fr auto 1fr; align-items:baseline; gap:16px; margin-top:30svh;
  padding:0 calc(var(--tepi-hal) + var(--dalam)) 30px; font-size:var(--u1); color:var(--redup); }
.kaki-depan nav { display:flex; gap:24px; }
.kaki-depan nav a { color:var(--ink); }
.kaki-depan > span:last-child { justify-self:end; text-align:right; }

/* ===================== masuk: bagian-bagian muncul berurutan ===================== */
.js .muncul > * { opacity:0; transform:translateY(24px); transition:opacity .7s var(--mulus), transform .8s var(--mulus); }
.js .muncul.tampak > * { opacity:1; transform:none; }
.js .muncul.tampak > :nth-child(2) { transition-delay:.08s; }
.js .muncul.tampak > :nth-child(3) { transition-delay:.16s; }
.js .muncul.tampak > :nth-child(4) { transition-delay:.24s; }
.js .muncul.tampak > :nth-child(5) { transition-delay:.32s; }

/* ===================== HP & tablet sempit ===================== */
@media (max-width: 900px) {
  .beranda { --dalam:20px; }
  .panggung-wadah { grid-template-columns:1fr; padding:var(--tepi-hal); }
  .panggung { order:0; position:sticky; top:var(--tepi-hal); height:56svh; z-index:0; }
  .kolom-baca { position:relative; z-index:1; }
  .pg-bilah { padding:0 14px 10px; font-size:13px; }
  .lembar-depan { min-height:auto; padding-top:20px; }
  .merek { font-size:24px; }
  .pembuka { padding:56px 0 40px; gap:20px; }
  .pembuka h1 { font-size:9vw; }
  .cari-depan .tombol-utama { padding:0 18px; }
  .angka-depan { gap:10px; }
  .angka-depan dd { font-size:22px; }
  .angka-depan dt { font-size:13px; }
  .baca { min-height:auto; padding:72px var(--dalam); }

  .coba { grid-template-columns:1fr; }
  .coba-gelap, .coba-terang { min-height:62svh; padding:48px var(--dalam) 96px; }
  .coba-terang { padding-top:72px; padding-bottom:88px; }
  .coba-judul { font-size:11vw; bottom:20px; }
  .coba-judul--kanan { top:20px; bottom:auto; left:var(--dalam); right:auto; }

  .cara { display:flex; flex-direction:column; align-items:stretch; gap:28px; padding:88px var(--dalam) 56px; }
  .cara-teks h2 { font-size:34px; }
  .ui-potongan { min-height:420px; padding:18px; font-size:14px; }

  .tersedia { display:block; padding:72px 0 0; }
  .tersedia-kepala { position:static; padding:0 var(--dalam) 32px; }
  .tersedia-kepala h2 { font-size:34px; }
  .aturan { padding:36px 20px 44px; }
  .aturan-judul { letter-spacing:.14em; font-size:16px; }
  .aturan-isi { grid-template-columns:1fr; gap:36px; margin-top:28px; }

  .isi-arsip { display:block; padding:96px var(--dalam); }
  .isi-arsip h2 { font-size:26px; margin-bottom:20px; }
  .kolom-nama { columns:2; column-gap:20px; font-size:17px; }
  .kolom-nama .jenis-baru { break-before:auto; margin-top:32px; }

  .penutup { display:flex; flex-direction:column; justify-content:space-between; gap:40px; min-height:84svh; padding:28px 16px; }
  .penutup-teks { align-self:auto; }
  .penutup-teks h2 { font-size:13vw; }
  .penutup-teks p { font-size:16px; }
  .daftar-potongan { width:100%; }
  .daftar-potongan .tombol-utama { min-height:52px; }

  .kaki-depan { display:flex; flex-direction:column; gap:8px; margin-top:20svh; padding:0 var(--dalam) 24px; font-size:14px; }
  .kaki-depan > span:last-child { justify-self:auto; text-align:left; }
}

@media (prefers-reduced-motion: reduce) {
  .dok, .dok *, .dok-kutip, .ui-tahap, .hp-batang, .js .muncul > * { transition:none !important; animation:none !important; }
  .dok.buram .dk-baris { filter:none; opacity:1; } .dok.buram .dok-butir { opacity:0; }
  .js .muncul > * { opacity:1; transform:none; }
  .tombol-utama:hover { transform:none; }
}