/* Pusat Bantuan DPR - token warna dan huruf sama dengan depot-app (static/css/app.css). */
@font-face { font-family: "Montserrat"; src: url(huruf/Montserrat-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url(huruf/Montserrat-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Boogaloo"; src: url(huruf/Boogaloo-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --green: #006D10; --green-dark: #01510A; --orange: #F18A22; --terracotta: #954000;
  --merah: #e0262b;
  --latar: #EBE8E1; --kertas: #fffdf8; --garis: #D1C7B4; --krem: #F4DBB3;
  --tinta: #171310; --tinta-lembut: #6d6459; --tautan: #006D10; --peran-teks: #954000;
  --huruf: "Montserrat", system-ui, -apple-system, sans-serif;
  --judul: "Boogaloo", "Montserrat", sans-serif;
  --r: 10px; --gut: clamp(16px, 3vw, 32px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --latar: #14120f; --kertas: #1e1b17; --garis: #3a342c; --krem: #3a2a14;
    --tinta: #efe9df; --tinta-lembut: #b3a999; --tautan: #6cc97a; --peran-teks: #f4c48c; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --latar: #14120f; --kertas: #1e1b17; --garis: #3a342c; --krem: #3a2a14;
  --tinta: #efe9df; --tinta-lembut: #b3a999; --tautan: #6cc97a; --peran-teks: #f4c48c; color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--latar); color: var(--tinta); font: 400 16px/1.6 var(--huruf); }
a { color: var(--tautan); }
a:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
img { max-width: 100%; height: auto; }
.hanya-suara { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.lewati { position: absolute; left: -999px; }
.lewati:focus { left: 8px; top: 8px; background: #fff; padding: 8px; z-index: 10; }

/* Kepala */
.kepala { background: var(--green); color: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) var(--gut) 12px; }
/* HP: merek dan tombol aplikasi sebaris, kotak cari selebar layar di bawahnya.
   Tidak lengket - kepala setinggi ini memakan seperlima layar HP. */
.ke-aplikasi { margin-left: auto; }
.cari { order: 3; flex-basis: 100%; }
@media (min-width: 760px) {
  .kepala { position: sticky; top: 0; z-index: 5; flex-wrap: nowrap; }
  .cari { order: 0; flex-basis: auto; }
  .ke-aplikasi { margin-left: 0; }
}
.merek { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.merek img { height: 40px; width: auto; }
.merek span { font: 400 22px/1 var(--judul); letter-spacing: .02em; }
.cari { flex: 1 1 280px; position: relative; max-width: 560px; }
@media (max-width: 759px) { .cari { max-width: none; } .ke-aplikasi { padding: 4px 12px; font-size: 14px; } }
.cari input { width: 100%; font: inherit; padding: 10px 14px; border-radius: 999px; border: 0; background: #fff; color: #171310; }
.hasil-cari { position: absolute; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none;
  background: var(--kertas); color: var(--tinta); border: 1px solid var(--garis); border-radius: var(--r);
  box-shadow: 0 10px 30px rgb(0 0 0 / .18); max-height: 70vh; overflow: auto; }
.hasil-cari a { display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: inherit; }
.hasil-cari a:hover, .hasil-cari a:focus { background: var(--latar); }
.hasil-cari b { display: block; color: var(--tautan); }
.hasil-cari small { color: var(--tinta-lembut); }
.hasil-cari .kosong { padding: 8px 10px; color: var(--tinta-lembut); }
.ke-aplikasi { color: #fff; font-weight: 700; text-decoration: none; border: 2px solid rgb(255 255 255 / .7); border-radius: 999px; padding: 6px 14px; white-space: nowrap; }

/* Tata letak: isi dulu, navigasi sesudahnya di HP; kolom samping di layar lebar. */
.tata { display: flex; flex-direction: column; gap: 24px; max-width: 1180px; margin: 0 auto; padding-inline: var(--gut); padding-block: 24px 48px; }
main { order: 1; min-width: 0; }
.samping { order: 2; }
@media (min-width: 960px) {
  .tata { flex-direction: row; align-items: flex-start; }
  .samping { order: 0; flex: 0 0 260px; position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow: auto; }
  .laci > summary { display: none; }
}
.laci > summary { font-weight: 700; cursor: pointer; padding: 10px 14px; background: var(--kertas); border: 1px solid var(--garis); border-radius: var(--r); }
.samping details details { margin-top: 10px; }
.samping details details summary { font-weight: 700; cursor: pointer; color: var(--tinta); }
.samping ul { list-style: none; margin: 6px 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--garis); }
.samping li a { display: block; padding: 5px 8px; text-decoration: none; color: var(--tinta-lembut); border-radius: 6px; font-size: 15px; }
.samping li a[aria-current] { color: var(--tautan); font-weight: 700; background: var(--kertas); }

/* Artikel */
.remah { font-size: 14px; color: var(--tinta-lembut); margin-bottom: 8px; }
article { max-width: 72ch; }
h1, h2 { font-family: var(--judul); font-weight: 400; color: var(--green); letter-spacing: .01em; text-wrap: balance; line-height: 1.1; }
:root[data-theme="dark"] h1, :root[data-theme="dark"] h2 { color: #6cc97a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) h1, :root:not([data-theme="light"]) h2 { color: #6cc97a; } }
h1 { font-size: clamp(34px, 6vw, 48px); margin: 0 0 8px; }
h2 { font-size: 28px; margin: 40px 0 12px; scroll-margin-top: 90px; }
.ringkas { font-size: 18px; color: var(--tinta-lembut); margin: 0 0 14px; }
.meta { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; font-size: 14px; margin-bottom: 18px; }
.peran { background: var(--krem); color: var(--peran-teks); font-weight: 700; padding: 3px 10px; border-radius: 999px; font-size: 13px; }
.tgl { color: var(--tinta-lembut); }
.buka-layar { margin-left: auto; font-weight: 700; }
.daftar-isi { background: var(--kertas); border: 1px solid var(--garis); border-radius: var(--r); padding: 10px 16px; }
.daftar-isi summary { font-weight: 700; cursor: pointer; }
.daftar-isi ol { margin: 6px 0 0; padding-left: 20px; }
article ol > li { margin-bottom: 14px; }
article ol > li::marker, .daftar-isi li::marker { font-weight: 700; color: var(--tautan); }
.no { display: inline-block; min-width: 22px; height: 22px; line-height: 22px; border-radius: 50%; background: var(--merah); color: #fff;
  font-size: 13px; font-weight: 700; text-align: center; vertical-align: 1px; margin: 0 2px; }
.tangkapan { margin: 14px 0 6px; }
.tangkapan img { display: block; border: 1px solid var(--garis); border-radius: 12px; background: #fff; }
.layar-hp img { width: 390px; }
.layar-desktop img { width: 100%; }
.tabel { overflow-x: auto; border: 1px solid var(--garis); border-radius: var(--r); background: var(--kertas); }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--garis); }
tr:last-child td { border-bottom: 0; }
th { background: var(--latar); }
td:first-child { font-weight: 700; min-width: 9em; }
.perhatian { margin: 14px 0; padding: 12px 16px; background: var(--krem); border-left: 5px solid var(--orange); border-radius: 0 var(--r) var(--r) 0; }
.perhatian p { margin: 0; }
.perhatian p + p { margin-top: 4px; }
code { background: var(--kertas); border: 1px solid var(--garis); border-radius: 5px; padding: 0 5px; font-size: .92em; }
.berikut { display: block; max-width: 72ch; margin-top: 40px; padding: 14px 18px; border: 1px solid var(--garis); border-radius: var(--r);
  background: var(--kertas); text-decoration: none; font-weight: 700; }
.berikut small { display: block; color: var(--tinta-lembut); font-weight: 400; }

/* Beranda */
.sambut { padding: 8px 0 12px; }
.sambut p { font-size: 18px; color: var(--tinta-lembut); max-width: 60ch; }
.kelompok-kisi { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.kelompok { background: var(--kertas); border: 1px solid var(--garis); border-radius: 14px; padding: 18px 20px; }
.kelompok h2 { margin: 0 0 4px; font-size: 26px; }
.kelompok p { margin: 0 0 10px; color: var(--tinta-lembut); font-size: 15px; }
.kelompok ul, .per-peran ul { margin: 0; padding-left: 18px; }
.per-peran { margin-top: 32px; }
.per-peran li { margin-bottom: 6px; }
.kaki { border-top: 1px solid var(--garis); padding: 18px var(--gut) calc(18px + env(safe-area-inset-bottom, 0px)); color: var(--tinta-lembut); font-size: 14px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }