/* Gaya situs bantuan Copia. Warna, sudut, bayangan, menu samping, dan batang gulir mengikuti aplikasi (app/src/index.css, ui/Kerangka.jsx). */
:root {
  --navy: #16308a; --navy-deep: #102263; --navy-mist: #e8eaf3;
  --ink: #101828; --teks: #344054; --mute: #667085;
  --caramel: #7a4a2b; --caramel-mist: #f4ece5; --cream: #fbf7f2; --cream-deep: #f3ebe2; --line: #e7ded4;
  --judul: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --angka: Manrope, ui-sans-serif, system-ui, sans-serif;
  --r-kartu: 20px; --r-kontrol: 14px; --r-panel: 28px;
  --lembut: cubic-bezier(0.65, 0, 0.35, 1);
  --b-soft: 0 1px 2px rgb(16 24 40 / .05), 0 1px 3px rgb(16 24 40 / .04);
  --b-lift: 0 2px 4px rgb(16 24 40 / .05), 0 10px 24px rgb(16 24 40 / .07);
  --b-float: 0 1px 2px rgb(16 24 40 / .06), 0 12px 28px rgb(16 24 40 / .1), 0 32px 64px rgb(122 74 43 / .12);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgb(102 112 133 / .4) transparent; }
.gulir-tipis, .bilah-isi { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
/* Batang gulir tipis berujung bulat dengan jalur transparan, sama seperti halaman pengelolaan di aplikasi. */
@supports selector(::-webkit-scrollbar) {
  html { scrollbar-width: auto; scrollbar-color: auto; }
  html::-webkit-scrollbar { width: 12px; }
  html::-webkit-scrollbar-track { background: transparent; }
  html::-webkit-scrollbar-thumb { background: rgb(102 112 133 / .35); border: 3px solid transparent; background-clip: content-box; border-radius: 999px; min-height: 48px; }
  html::-webkit-scrollbar-thumb:hover { background: rgb(102 112 133 / .6); background-clip: content-box; }
  .gulir-tipis, .bilah-isi { scrollbar-width: auto; scrollbar-color: auto; }
  .gulir-tipis::-webkit-scrollbar, .bilah-isi::-webkit-scrollbar { width: 12px; }
  .gulir-tipis::-webkit-scrollbar-track, .bilah-isi::-webkit-scrollbar-track { background: transparent; margin-block: 14px; }
  .gulir-tipis::-webkit-scrollbar-thumb, .bilah-isi::-webkit-scrollbar-thumb { background: rgb(102 112 133 / .4); border: 4px solid transparent; background-clip: content-box; border-radius: 999px; }
  .gulir-tipis::-webkit-scrollbar-thumb:hover, .bilah-isi::-webkit-scrollbar-thumb:hover { background: rgb(102 112 133 / .65); background-clip: content-box; }
}
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 16px/1.6 Figtree, ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--navy); text-underline-offset: 3px; }
button, input { font-family: inherit; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
::selection { background: var(--navy); color: #fff; }
[hidden] { display: none !important; }
svg { flex-shrink: 0; }
.angka { font-family: var(--angka); font-variant-numeric: tabular-nums; }
.lompat { position: absolute; left: -999px; }
.lompat:focus { left: 12px; top: 12px; z-index: 60; background: #fff; padding: 8px 12px; border-radius: var(--r-kontrol); }

/* Tombol */
.tombol { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: var(--r-kontrol); background: var(--navy); color: #fff; font: 600 14.5px var(--angka); text-decoration: none; white-space: nowrap; transition: background-color .2s var(--lembut), box-shadow .2s var(--lembut), border-color .2s var(--lembut), color .2s var(--lembut); }
.tombol:hover { background: var(--navy-deep); box-shadow: var(--b-lift); }
.tombol.kedua { height: 36px; padding: 0 14px; background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: var(--b-soft); font-size: 13.5px; }
.tombol.kedua:hover { background: #fff; border-color: var(--caramel); color: var(--caramel); }
.bulat { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; transition: background-color .2s var(--lembut); }
.bulat:hover { background: var(--cream-deep); }

/* Menu samping: panel melayang seperti di aplikasi */
.bilah { position: fixed; top: 12px; bottom: 12px; left: 12px; width: 256px; z-index: 40; display: flex; flex-direction: column; overflow: hidden;
  background: rgb(255 255 255 / .78); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--line); border-radius: var(--r-panel); box-shadow: var(--b-lift); }
.bilah-kepala { display: flex; align-items: center; justify-content: space-between; height: 68px; flex-shrink: 0; padding: 0 12px 0 20px; border-bottom: 1px solid rgb(231 222 212 / .7); }
.merek { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.merek > img { transition: transform .5s var(--lembut); }
.merek:hover > img { transform: rotate(-8deg) scale(1.05); }
.merek span img { display: block; height: 19px; width: auto; }
.merek small { display: block; font-size: 11.5px; color: var(--mute); line-height: 1.4; }
.tutup-menu { display: none; }
.bilah-isi { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px; }
.bilah summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 12px 6px; list-style: none; cursor: pointer; color: rgb(102 112 133 / .75); font: 700 11px var(--angka); text-transform: uppercase; letter-spacing: .08em; transition: color .2s var(--lembut); }
.bilah summary::-webkit-details-marker { display: none; }
.bilah summary:hover { color: var(--ink); }
.bilah summary i { font-style: normal; }
.bilah details[open] summary i { display: none; }
.bilah summary svg { transition: transform .22s var(--lembut); transform: rotate(-90deg); }
.bilah details[open] summary svg { transform: none; }
.bilah details { margin-bottom: 6px; }
.butir { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; margin-top: 2px; border-radius: 20px; color: rgb(16 24 40 / .75); font-size: 14px; line-height: 1.35; text-decoration: none; transition: color .2s var(--lembut), background-color .2s var(--lembut); }
.butir:hover { color: var(--ink); background: rgb(243 235 226 / .8); }
.butir[aria-current] { color: var(--caramel); font-weight: 600; background: var(--caramel-mist); box-shadow: inset 0 0 0 1px rgb(122 74 43 / .15); }
.bilah-kaki { flex-shrink: 0; margin: 4px 12px 12px; padding: 10px 16px; border-radius: var(--r-kontrol); background: rgb(244 236 229 / .7); color: var(--mute); font-size: 12px; line-height: 1.5; }
.bilah-kaki strong { display: block; color: var(--ink); font-weight: 600; }
.bilah-kaki a { color: var(--caramel); font-weight: 600; overflow-wrap: anywhere; }
.temu-kaki strong { color: var(--ink); font-weight: 600; }
.beranda .tanya { margin-top: 40px; max-width: 860px; }
.tirai { position: fixed; inset: 0; z-index: 45; background: rgb(16 24 40 / .4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* Badan halaman */
.badan { display: flex; flex-direction: column; min-height: 100dvh; padding-left: 272px; }
.atas { position: sticky; top: 0; z-index: 30; padding: 12px 20px 0; }
.palang { position: relative; display: flex; align-items: center; gap: 8px; max-width: 1320px; height: 60px; margin: 0 auto; padding: 0 8px 0 12px;
  background: rgb(255 255 255 / .4); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgb(231 222 212 / .6); border-radius: var(--r-panel);
  transition: background-color .3s var(--lembut), box-shadow .3s var(--lembut), border-color .3s var(--lembut); }
.palang.tergulir { background: rgb(255 255 255 / .55); backdrop-filter: blur(8px) saturate(1.5); -webkit-backdrop-filter: blur(8px) saturate(1.5); border-color: var(--line); box-shadow: var(--b-lift); }
.buka-menu { display: none; }
.cari { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r-kontrol); background: #fff; color: var(--mute); transition: border-color .2s var(--lembut), box-shadow .2s var(--lembut); }
.cari:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-mist); }
.cari input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font-size: 16px; color: var(--ink); }
.cari input::placeholder { color: var(--mute); }
.cari input::-webkit-search-cancel-button { cursor: pointer; }

/* Hasil pencarian: panel melayang di bawah kotak cari */
.hasil-cari { position: absolute; top: calc(100% + 8px); left: 0; right: 0; max-height: min(70vh, 640px); overflow-y: auto; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-kartu); box-shadow: var(--b-float); }
.temu-kepala { margin: 0; padding: 8px 12px 6px; color: var(--mute); font: 700 11px var(--angka); text-transform: uppercase; letter-spacing: .08em; }
.temu { display: block; padding: 10px 12px; border-radius: var(--r-kontrol); text-decoration: none; color: var(--ink); transition: background-color .15s var(--lembut); }
.temu:hover, .temu.pilih { background: var(--caramel-mist); }
.temu strong { display: block; font-weight: 600; font-size: 15.5px; line-height: 1.35; }
.temu small { display: block; margin-top: 1px; color: var(--caramel); font-size: 12.5px; font-weight: 500; }
.temu span { display: block; margin-top: 3px; color: var(--mute); font-size: 14px; line-height: 1.5; }
.temu mark { background: #fde9c8; color: var(--ink); border-radius: 4px; padding: 0 2px; }
.temu-kosong { margin: 0; padding: 2px 12px 8px; color: var(--teks); font-size: 14.5px; }
.temu-kaki { margin: 6px 0 0; padding: 12px 12px 6px; border-top: 1px solid var(--line); color: var(--mute); font-size: 13.5px; }

main { flex: 1; width: 100%; max-width: 1320px; margin: 0 auto; padding: 28px 28px 56px; }
h1 { font: 800 clamp(28px, 4vw, 38px)/1.15 var(--judul); letter-spacing: -0.02em; margin: 0 0 12px; }

/* Beranda */
.sambut { max-width: 720px; padding-top: 12px; }
.sambut > p { color: var(--teks); font-size: 17px; margin: 0 0 20px; }
.saring { display: flex; flex-wrap: wrap; gap: 8px; }
.saring button { height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; box-shadow: var(--b-soft); color: var(--ink); font: 600 13.5px var(--angka); cursor: pointer; transition: background-color .2s var(--lembut), color .2s var(--lembut), border-color .2s var(--lembut); }
.saring button:hover { border-color: var(--caramel); color: var(--caramel); }
.saring button[aria-pressed="true"] { background: var(--caramel-mist); border-color: rgb(122 74 43 / .4); color: var(--caramel); box-shadow: none; }
.kelompok { padding-top: 40px; }
.kelompok h2 { font: 700 22px/1.25 var(--judul); letter-spacing: -0.02em; margin: 0; }
.ket { color: var(--mute); font-size: 14.5px; margin: 4px 0 14px; }
.daftar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.daftar a { display: block; height: 100%; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-kartu); box-shadow: var(--b-soft); text-decoration: none; color: var(--ink); transition: border-color .2s var(--lembut), box-shadow .2s var(--lembut); }
.daftar a:hover { border-color: var(--caramel); box-shadow: var(--b-lift); }
.daftar strong { font-weight: 600; font-size: 16px; }
.daftar span:last-child { display: block; color: var(--mute); font-size: 14px; line-height: 1.5; margin-top: 4px; }
.lencana { display: inline-block; margin-left: 8px; color: var(--caramel); font: 700 10.5px var(--angka); text-transform: uppercase; letter-spacing: .04em; vertical-align: 1px; white-space: nowrap; }

/* Halaman topik */
.topik { max-width: 860px; }
.remah { margin: 0 0 10px; font-size: 14px; color: var(--mute); }
.remah a { color: var(--mute); }
.keterangan { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 20px; }
.keterangan > span { padding: 4px 12px; border-radius: 999px; background: var(--cream-deep); color: var(--caramel); font-size: 13px; font-weight: 500; }
.keterangan .tombol { margin-left: auto; }
.lembar { padding: 28px 32px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-kartu); box-shadow: var(--b-soft); color: var(--teks); font-size: 16px; line-height: 1.65; }
.lembar > :first-child { margin-top: 0; font-size: 17.5px; color: var(--ink); }
.lembar > :last-child { margin-bottom: 0; }
.lembar h2 { font: 700 21px/1.3 var(--judul); letter-spacing: -0.02em; color: var(--ink); margin: 36px 0 10px; padding-top: 28px; border-top: 1px solid var(--line); }
.lembar h3 { font: 700 17px/1.35 var(--judul); color: var(--ink); margin: 24px 0 6px; }
.lembar p { margin: 0 0 14px; }
.lembar strong { color: var(--ink); font-weight: 600; }
.lembar ul, .lembar ol { margin: 0 0 16px; padding-left: 0; }
.lembar ul { padding-left: 22px; }
.lembar li { margin: 6px 0; }
.lembar ol { list-style: none; counter-reset: langkah; }
.lembar ol > li { counter-increment: langkah; position: relative; padding-left: 42px; margin: 12px 0; }
.lembar ol > li::before { content: counter(langkah); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; font: 700 13.5px/28px var(--angka); text-align: center; }
.lembar li > ul { margin: 6px 0 0; }
.jalur { display: inline-block; padding: 1px 9px; border-radius: 8px; background: var(--navy-mist); color: var(--navy); font-weight: 600; font-size: .93em; }
.catatan, .awas { margin: 18px 0; padding: 14px 18px; border-radius: var(--r-kontrol); background: var(--caramel-mist); border: 1px solid rgb(122 74 43 / .15); }
.awas { background: #fdf0d9; border-color: rgb(180 83 9 / .25); }
.catatan > :last-child, .awas > :last-child { margin-bottom: 0; }
.gulir { overflow-x: auto; margin: 0 0 16px; border: 1px solid var(--line); border-radius: var(--r-kontrol); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: 0; }
th { background: var(--cream); color: var(--mute); font: 700 11px var(--angka); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.lembar figure { margin: 20px 0 24px; }
.lembar img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-kontrol); box-shadow: var(--b-lift); background: var(--cream); }
.perbesar { display: block; cursor: zoom-in; }
/* Gambar selebar ponsel: dua gambar berurutan berdampingan, supaya halaman tidak terlalu panjang. */
.lembar figure.ponsel { display: inline-block; vertical-align: top; width: 280px; max-width: 100%; margin-right: 16px; }
.lembar figure.ponsel img { width: 100%; }
.lembar figcaption { margin-top: 8px; color: var(--mute); font-size: 13.5px; line-height: 1.5; }

/* Sebelumnya / Berikutnya: kartu berpanah. Berikutnya selalu di kolom kanan, walau tidak ada Sebelumnya. */
.lanjut { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.lanjut a { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 14px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-kartu); box-shadow: var(--b-soft); text-decoration: none; color: var(--ink); transition: border-color .2s var(--lembut), box-shadow .2s var(--lembut); }
.lanjut a:hover { border-color: var(--caramel); box-shadow: var(--b-lift); }
.lanjut .sesudah { grid-column: 2; text-align: right; }
/* Teks mengisi sisa lebar kartu, jadi selalu menempel ke panahnya: rata kiri di Sebelumnya, rata kanan di Berikutnya. */
.lanjut a > span { flex: 1; min-width: 0; }
.lanjut .sesudah small { margin-right: -.08em; }
.lanjut small { display: block; margin-bottom: 3px; color: var(--mute); font: 700 11px var(--angka); text-transform: uppercase; letter-spacing: .08em; }
.lanjut b { display: block; font-weight: 600; font-size: 15.5px; line-height: 1.35; transition: color .2s var(--lembut); }
.lanjut i { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--caramel-mist); color: var(--caramel); transition: background-color .2s var(--lembut), color .2s var(--lembut), transform .2s var(--lembut); }
.lanjut a:hover i { background: var(--caramel); color: #fff; }
.lanjut .sebelum:hover i { transform: translateX(-3px); }
.lanjut .sesudah:hover i { transform: translateX(3px); }
.lanjut a:hover b { color: var(--caramel); }
/* Kotak "Belum ketemu jawabannya?": rupa yang sama dengan kotak di menu samping. */
.tanya { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; padding: 16px 20px; border-radius: var(--r-kartu); background: rgb(244 236 229 / .7); color: var(--mute); font-size: 14.5px; }
.tanya strong { color: var(--ink); font-weight: 600; }
.tanya a, .temu-kaki a { color: var(--caramel); font-weight: 600; }

/* Kaki: palang tipis seperti di aplikasi */
.kaki { padding: 0 20px 12px; }
.kaki > div { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 20px; max-width: 1320px; min-height: 36px; margin: 0 auto; padding: 6px 16px; border: 1px solid rgb(231 222 212 / .6); border-radius: var(--r-panel); background: rgb(255 255 255 / .4); color: var(--mute); font-size: 12px; }
.kaki a { color: var(--navy); text-decoration: none; }
.kaki a:hover { text-decoration: underline; }
.kaki .kanan { margin-left: auto; }

@media (max-width: 1023.98px) {
  .badan { padding-left: 0; }
  .bilah { top: 8px; bottom: 8px; left: 8px; width: 282px; max-width: 86vw; z-index: 50; background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--b-float); border: 0;
    transform: translateX(-310px); visibility: hidden; transition: transform .38s var(--lembut), visibility 0s .38s; }
  .bilah.terbuka { transform: none; visibility: visible; transition: transform .38s var(--lembut); }
  .tutup-menu, .buka-menu { display: grid; }
  .atas { padding: 8px 8px 0; }
  .palang { padding: 0 8px; }
  main { padding: 20px 14px 40px; }
  .kaki { padding: 0 8px 8px; }
}
@media (max-width: 640px) {
  .tombol:not(.kedua) svg { display: none; }
  .tombol:not(.kedua) { padding: 0 14px; }
  .cari { padding: 0 12px; }
  .lembar { padding: 20px 18px; }
  .keterangan .tombol { margin-left: 0; }
  .lanjut { grid-template-columns: 1fr; }
  .lanjut .sesudah { grid-column: 1; }
  .kaki .kanan { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }
@media print {
  .bilah, .atas, .lanjut, .tanya, .kaki, .keterangan .tombol { display: none; }
  .badan { padding: 0; }
  .lembar { border: 0; box-shadow: none; padding: 0; }
  body { background: #fff; }
}