/* Markas Kru Kompas.
   Langit mint seperti peta navigasi, teal mesin, emas Kompas. Terang secara bawaan, gelap mengikuti sistem.
   Semua warna ada di :root; tiga tugas (navigator, mekanik, pencatat) memakai --r dan --r-bg lewat kelas .r-*. */

@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/nunito-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/nunito-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/nunito-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/fredoka-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/fredoka-latin-700-normal.woff2") format("woff2"); }

:root {
  --bg: #e6f6f3;
  --bg-2: #d3efe9;
  --surface: #ffffff;
  --surface-2: #f2fbf9;
  --ink: #14303e;
  --muted: #4a6670;
  --teal: #12a095;
  --teal-strong: #0c7b72;
  --teal-ink: #0a625c;
  --gold: #f6b93b;
  --gold-edge: #d9961a;
  --on-gold: #14303e;
  --num: #d96a06;
  --line: #bfe0da;
  --line-strong: #8fc9c0;
  --danger: #a3261c;
  --danger-bg: #fde8e6;
  --danger-line: #f1b3ad;
  --ok-bg: #e0f5ee;
  --ok-line: #9bd8bf;
  --dot: rgba(18, 160, 149, 0.16);
  --shadow: 0 10px 28px rgba(20, 48, 62, 0.12);
  --nav: #0c7b72;
  --nav-bg: #d4f1ed;
  --mek: #a85a05;
  --mek-bg: #fdebc6;
  --pen: #a8335a;
  --pen-bg: #fbdbe6;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b2530;
    --bg-2: #0e3340;
    --surface: #123442;
    --surface-2: #0f2d3a;
    --ink: #e9f6f3;
    --muted: #a6c5c1;
    --teal: #3fd3c6;
    --teal-strong: #1d6f69;
    --teal-ink: #8fe9de;
    --gold: #ffc94d;
    --gold-edge: #b9841b;
    --num: #ffb547;
    --line: #245361;
    --line-strong: #3a7585;
    --danger: #ff9b92;
    --danger-bg: #4a1f1c;
    --danger-line: #7d3a35;
    --ok-bg: #13443f;
    --ok-line: #2c7a70;
    --dot: rgba(63, 211, 198, 0.1);
    --shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    --nav: #6fe3d6;
    --nav-bg: #12433f;
    --mek: #ffbf66;
    --mek-bg: #4a3310;
    --pen: #ff9fbe;
    --pen-bg: #4d1f31;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg);
  background-image: radial-gradient(circle at 1px 1px, var(--dot) 1.3px, transparent 0);
  background-size: 24px 24px;
  color: var(--ink);
  font: 400 1.0625rem/1.55 "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--teal-ink); }
p { margin: 0.6em 0; }
h1, h2, h3 { margin: 0; font-family: "Fredoka", "Nunito", system-ui, sans-serif; line-height: 1.15; text-wrap: balance; }
h1 { font-size: clamp(1.75rem, 6.2vw, 2.4rem); font-weight: 700; }
h2 { font-size: 1.5rem; font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 600; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
h1:focus { outline: none; }
[hidden] { display: none !important; }

.wrap {
  max-width: 1040px;
  margin-inline: auto;
  padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
}
.sr, .lewati:not(:focus) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lewati { position: absolute; top: 8px; left: 8px; z-index: 30; padding: 10px 14px; border-radius: 10px; background: var(--gold); color: var(--on-gold); font-weight: 800; }

/* Kepala dan menu */
.atas { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: calc(14px + env(safe-area-inset-top, 0px)); padding-bottom: 10px; }
.merek { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 700 1.3rem/1 "Fredoka", "Nunito", sans-serif; }
.merek img { width: 42px; height: 42px; border: 2px solid var(--gold); border-radius: 50%; background: var(--teal); }
.chip { padding: 7px 12px; border-radius: 999px; background: var(--teal-strong); color: #fff; font: 800 0.75rem/1 "Nunito", sans-serif; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.menu-luar { position: sticky; top: 0; z-index: 10; background: var(--bg); }
.menu { display: flex; gap: 8px; padding-block: 8px; }
.menu a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 44px; border: 2px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 800; text-decoration: none; }
.menu a:hover { border-color: var(--teal); }

/* Bagian */
main { display: grid; gap: 18px; padding-block: 10px 28px; }
.bagian { min-width: 0; padding: 22px 18px 24px; border: 2px solid var(--line); border-radius: 26px; background: var(--surface); box-shadow: 0 5px 0 var(--line), var(--shadow); scroll-margin-top: 66px; }
.bagian > h1, .bagian > h2 { margin-bottom: 4px; }
.sub { margin: 6px 0 0; color: var(--muted); }
.memuat { margin: 0; color: var(--muted); font-weight: 700; }
.bantu { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.4; }
.tengah { text-align: center; }
.kosong { margin: 16px 0 0; padding: 14px; border: 2px dashed var(--line-strong); border-radius: 16px; color: var(--muted); text-align: center; }
.teks-panjang h2 { margin: 26px 0 6px; font-size: 1.25rem; }
.teks-panjang ul { margin: 8px 0; padding-left: 1.2em; }
.teks-panjang li { margin: 6px 0; }
.teks-panjang .tombol { margin-top: 20px; }

@media (min-width: 940px) {
  .menu-luar { display: none; }
  main { grid-template-columns: minmax(340px, 400px) minmax(0, 1fr); align-items: start; gap: 22px; padding-top: 16px; }
  #kartu { grid-row: 1 / span 2; }
  .teks-panjang { grid-column: 1 / -1; max-width: 70ch; }
}

/* Pesan */
.pesan { margin: 12px 0 0; padding: 10px 14px; border-radius: 14px; font-weight: 700; line-height: 1.4; }
.pesan.galat { border: 2px solid var(--danger-line); background: var(--danger-bg); color: var(--danger); }
.pesan.ok { border: 2px solid var(--ok-line); background: var(--ok-bg); color: var(--teal-ink); }

/* Tombol */
.tombol { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 10px 22px; border: 2px solid transparent; border-radius: 999px; background: none; font: 800 1.05rem "Nunito", sans-serif; text-decoration: none; cursor: pointer; }
.utama { background: var(--gold); color: var(--on-gold); box-shadow: 0 4px 0 var(--gold-edge); }
.utama:hover { filter: brightness(1.04); }
.utama:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--gold-edge); }
.sekunder { border-color: var(--teal); color: var(--teal-ink); }
.sekunder:hover { border-color: var(--teal-strong); background: var(--teal-strong); color: #fff; }
.bahaya { border-color: var(--danger); color: var(--danger); }
.bahaya:hover { background: var(--danger); color: var(--surface); }
.tombol[disabled] { opacity: 0.6; cursor: progress; }
.tombol.kecil { min-height: 42px; padding: 6px 16px; font-size: 0.95rem; }

/* Sapaan Kompas */
.sapa { display: flex; align-items: flex-end; gap: 12px; margin-top: 16px; }
.sapa img { flex: none; width: 64px; height: 64px; border: 3px solid var(--gold); border-radius: 50%; background: var(--teal); }
.gelembung { margin: 0; min-width: 0; padding: 12px 14px; border: 2px solid var(--line); border-radius: 18px 18px 18px 4px; background: var(--surface-2); font-weight: 700; }

/* Formulir */
.form { display: grid; gap: 20px; margin-top: 20px; }
.medan { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.medan > label, .medan > legend { padding: 0; font-weight: 800; }
input[type="text"] { width: 100%; min-height: 50px; padding: 10px 14px; border: 2px solid var(--line-strong); border-radius: 14px; background: var(--surface); color: var(--ink); font: 700 1.05rem "Nunito", sans-serif; }
input[type="text"]::placeholder { color: var(--muted); font-weight: 400; opacity: 0.85; }
input[type="text"]:focus { border-color: var(--teal); outline: 3px solid var(--gold); outline-offset: 2px; }
input[aria-invalid="true"] { border-color: var(--danger); }
.jebakan { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.opsional { border: 2px dashed var(--line-strong); border-radius: 16px; padding: 4px 14px; }
.opsional > summary { padding: 10px 0; font-weight: 800; cursor: pointer; }
.opsional[open] > summary { margin-bottom: 4px; }
.opsional > .medan, .opsional > form, .opsional > div, .opsional > p { margin-bottom: 14px; }

.peran-daftar { display: grid; gap: 10px; margin-top: 8px; }
.peran-pilih { position: relative; display: block; }
.peran-pilih input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.peran-pilih .kotak { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 2px solid var(--line); border-radius: 16px; background: var(--surface); }
.peran-pilih:hover .kotak { border-color: var(--r); }
.peran-pilih input:focus-visible + .kotak { outline: 3px solid var(--gold); outline-offset: 2px; }
.peran-pilih input:checked + .kotak { border-color: var(--r); background: var(--r-bg); box-shadow: 0 3px 0 var(--r); }
.ikon-lingkar { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--r-bg); color: var(--r); }
.peran-pilih input:checked + .kotak .ikon-lingkar { background: var(--r); color: var(--surface); }
.kotak strong { display: block; font: 600 1.1rem/1.2 "Fredoka", sans-serif; }
.kotak small { display: block; margin-top: 2px; color: var(--muted); font-size: 0.9rem; line-height: 1.35; }

.r-navigator { --r: var(--nav); --r-bg: var(--nav-bg); }
.r-mekanik { --r: var(--mek); --r-bg: var(--mek-bg); }
.r-pencatat { --r: var(--pen); --r-bg: var(--pen-bg); }

/* Kartu kru */
.kartu-img { width: min(100%, 300px); aspect-ratio: 9 / 16; margin: 18px auto 0; border-radius: 22px; background: #0b2530; box-shadow: var(--shadow); }
.aksi { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.kode-kotak { margin-top: 20px; padding: 14px 16px; border: 2px dashed var(--line-strong); border-radius: 16px; background: var(--surface-2); }
.kode-kotak.baru { border-style: solid; border-color: var(--teal); background: var(--ok-bg); }
.kode-kotak h2 { font-size: 1.1rem; }
.kode { display: block; margin: 8px 0; font: 700 1.55rem/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: 0.08em; overflow-wrap: anywhere; user-select: all; }
.kode-kotak .aksi { justify-content: flex-start; margin-top: 10px; }
.lanjut { margin-top: 18px; display: grid; gap: 10px; }
.lanjut .form { margin-top: 6px; gap: 14px; }
.baris-tombol { display: flex; flex-wrap: wrap; gap: 10px; }

/* Suara */
.tanya { margin-top: 16px; padding: 16px; border: 2px solid var(--line); border-radius: 20px; background: var(--surface-2); }
.tanya .meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; color: var(--teal-ink); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.tanya h3 { margin: 6px 0 12px; font-size: 1.25rem; }
.opsi-daftar { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.opsi { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 54px; padding: 12px 16px; overflow: hidden; border: 2px solid var(--line-strong); border-radius: 16px; background: var(--surface); color: var(--ink); font: 800 1.02rem "Nunito", sans-serif; text-align: left; }
button.opsi { cursor: pointer; }
button.opsi:hover { border-color: var(--teal); background: var(--surface-2); }
button.opsi:active { transform: translateY(2px); }
button.opsi[disabled] { opacity: 0.6; cursor: progress; }
.opsi.dipilih { border-color: var(--teal-strong); box-shadow: 0 3px 0 var(--teal-strong); }
.opsi.hasil { flex-wrap: wrap; row-gap: 10px; }
.opsi .teks { min-width: 0; }
.opsi .angka { flex: none; font: 700 1.1rem "Fredoka", sans-serif; font-variant-numeric: tabular-nums; }
.opsi .jalur { flex: 0 0 100%; height: 10px; overflow: hidden; border-radius: 999px; background: var(--bg-2); }
.opsi .isi { display: flex; width: var(--pct, 0%); height: 100%; overflow: hidden; border-radius: 999px; }
.opsi .isi i { flex: var(--n, 0) 1 0; background: var(--r); }
.opsi .centang { display: inline-block; margin-right: 6px; color: var(--teal-ink); vertical-align: -3px; }
.legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 12px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 0.85rem; font-weight: 700; }
.legenda li::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; background: var(--r); }
.lama { margin-top: 18px; }
.lama > summary { padding: 8px 0; font-weight: 800; cursor: pointer; }

/* Papan */
.angka-papan { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 16px; }
.angka-papan strong { color: var(--num); font: 700 3.2rem/1 "Fredoka", sans-serif; font-variant-numeric: tabular-nums; }
.angka-papan span { color: var(--muted); font-weight: 800; }
.bar { height: 24px; margin-top: 10px; overflow: hidden; border: 2px solid var(--line-strong); border-radius: 999px; background: var(--bg-2); }
.bar i { display: block; width: var(--pct, 0%); height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--num)); }
.ket { margin: 8px 0 0; color: var(--muted); }
.onderdil { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.onderdil .nama { margin-right: 4px; font-weight: 800; }
.slot { width: 32px; height: 32px; border: 3px dashed var(--line-strong); border-radius: 50%; }
.slot.penuh { border: 3px solid var(--gold-edge); background: var(--gold); }
.tugas-papan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.tugas-papan li { padding: 12px 6px 10px; border: 2px solid var(--line); border-radius: 16px; background: var(--r-bg); color: var(--r); text-align: center; }
.tugas-papan strong { display: block; color: var(--ink); font: 700 1.8rem/1.1 "Fredoka", sans-serif; font-variant-numeric: tabular-nums; }
.tugas-papan span { display: block; font-size: 0.82rem; font-weight: 800; }
.tugas-papan svg { display: block; margin: 0 auto 2px; }
.sub-judul { margin: 24px 0 0; font-size: 1.15rem; }
.daftar-kru { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.daftar-kru li { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 9px 12px; border: 2px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.daftar-kru li.aku { border-color: var(--teal); background: var(--ok-bg); }
.daftar-kru .no { flex: 0 0 3.7rem; color: var(--num); font: 700 1.05rem "Fredoka", sans-serif; font-variant-numeric: tabular-nums; }
.daftar-kru .isi-kru { flex: 1; display: grid; min-width: 0; line-height: 1.25; }
.daftar-kru .nama { display: flex; align-items: center; gap: 8px; min-width: 0; }
.daftar-kru .nama b { min-width: 0; overflow: hidden; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.daftar-kru .nama em { color: var(--muted); font-weight: 700; }
.daftar-kru .meta-kru { color: var(--muted); font-size: 0.85rem; }
.daftar-kru .lencana { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--r-bg); color: var(--r); }
.daftar-kru .kamu { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--teal-strong); color: #fff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.lagi { margin-top: 14px; }
.catatan-lama { margin-top: 18px; padding-top: 14px; border-top: 2px dashed var(--line); }

/* Kaki */
.kaki { padding-block: 20px calc(34px + env(safe-area-inset-bottom, 0px)); color: var(--muted); font-size: 0.95rem; }
.kaki p { margin: 6px 0; }
.kaki a { margin-right: 14px; color: var(--teal-ink); font-weight: 800; }

@media (prefers-reduced-motion: no-preference) {
  .tombol, .opsi { transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.15s ease, border-color 0.15s ease; }
  .opsi .isi { transition: width 0.6s ease; }
  .opsi .isi i { transition: flex-grow 0.6s ease; }
  .bar i { transition: width 0.6s ease; }
}
@media (max-width: 380px) {
  .tugas-papan { gap: 6px; }
  .kode { font-size: 1.3rem; letter-spacing: 0.04em; }
}