/* ===========================================================================
   CBT — UJIAN DI LAB
   ---------------------------------------------------------------------------
   Satu dunia visual dengan Progressive Test (akademik/evaluasi/progtest/situs/css/gaya.css):
   kertas cetak dingin, tinta pekat, garis rambut, kepala biru tua. Token
   disalin dari sana per 14 Oktober 2026; kalau berbeda, progtest yang menang.

   BEDANYA: ujian dibaca puluhan menit, jadi teks soal tidak memakai Archivo.
     - Teks soal, wacana, dan pilihan: LITERATA (serif variabel yang dirancang
       Google untuk membaca layar lama; lisensi SIL OFL, subset latin + yunani
       untuk simbol farmasi seperti α, β, μ). 19-21px, tinggi baris 1,7, lebar
       baris dibatasi ~66 karakter. Italic sungguhan untuk nama spesies.
     - Label, tombol, angka, tabel data, dan penunjuk: Archivo / Archivo Narrow
       seperti progtest, supaya antarmuka tetap terasa satu keluarga.
   YANG MENGIKAT
     1. Sasaran sentuh minimal 44px; pilihan jawaban 56px.
     2. Pilihan terpilih ditandai garis tebal + tanda centang, bukan hanya warna.
     3. Warna sinyal --belum hanya untuk "belum dijawab" dan sisa waktu kritis.
     4. Ukuran teks bisa diubah peserta (3 tingkat) dan diingat di perangkat.
   =========================================================================== */

@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap }
@font-face { font-family: "Archivo Narrow"; src: url("../fonts/archivo-narrow-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap }
@font-face { font-family: "Literata"; src: url("../fonts/literata-latin-wght-normal.woff2") format("woff2"); font-weight: 200 900; 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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: "Literata"; src: url("../fonts/literata-latin-wght-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; 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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: "Literata"; src: url("../fonts/literata-greek-wght-normal.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap;
  unicode-range: U+0370-03FF }

:root {
  --kertas: #f2f3f1;  --kertas-2: #e9ebe8;  --kertas-tepi: #dfe2de;
  --tinta: #16181c;   --tinta-2: #4d5259;   --tinta-3: #60666e;
  --garis: #c9ccc6;   --garis-kuat: #9aa09a;
  --belum: #c8380d;   --belum-tipis: #f7e3dc;
  --bahaya: #a93a34;  --bahaya-tua: #872e29;
  --pita: #1b3a5c;
  --tepi: 18px;       --kolom: 560px;

  --baca: Literata, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --antarmuka: Archivo, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sempit: "Archivo Narrow", Archivo, sans-serif;
  /* Ukuran teks baca; diubah lewat data-teks pada <html> (tombol A- A A+). */
  --ukuran-baca: 19px;
}
html[data-teks="besar"]  { --ukuran-baca: 21px }
html[data-teks="kecil"]  { --ukuran-baca: 17px }
@media (min-width: 900px) {
  :root { --ukuran-baca: 20px }
  html[data-teks="besar"] { --ukuran-baca: 23px }
  html[data-teks="kecil"] { --ukuran-baca: 18px }
}

*, *::before, *::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--kertas); color: var(--tinta); font: 400 16px/1.5 var(--antarmuka); font-feature-settings: "tnum" 1 }
:focus-visible { outline: 2px solid var(--pita); outline-offset: 2px }
::selection { background: var(--pita); color: #fff }
input, button, select, textarea { font: inherit; color: inherit }
a { color: var(--pita); text-underline-offset: 3px }
[hidden] { display: none !important }

/* ================================== KEPALA ================================ */
.kepala { background: linear-gradient(155deg, var(--pita) 0%, color-mix(in srgb, var(--pita) 78%, black) 100%); color: #fff; padding: 22px 0 16px }
.kepala > * { max-width: var(--kolom); margin-left: auto; margin-right: auto; padding-left: var(--tepi); padding-right: var(--tepi) }
.kepala-label { margin: 0 auto 4px; font: 600 12px var(--sempit); letter-spacing: .14em; text-transform: uppercase }
.kepala-judul { text-transform: capitalize; margin: 0 auto; font: 700 26px/1.15 var(--sempit) }

/* ================================== TOMBOL ================================ */
.tombol { display: block; width: 100%; min-height: 48px; padding: 12px 16px; background: var(--pita); color: #fff; border: 0; font-weight: 700; font-size: 16px; cursor: pointer }
.tombol:hover { background: color-mix(in srgb, var(--pita) 85%, black) }
.tombol:disabled { opacity: .55; cursor: not-allowed }
.tombol-sekunder { background: #fff; color: var(--pita); border: 1.5px solid var(--pita) }
.tombol-sekunder:hover { background: var(--kertas-2) }
.tombol-kecil { display: inline-block; width: auto; min-height: 44px; padding: 8px 14px; font-size: 15px }

.catatan { margin: 0 0 16px; padding: 10px 12px; background: var(--kertas-2); border-left: 4px solid var(--tinta); font-size: 15px }
.catatan-galat { border-left-color: var(--bahaya); background: #fff }

/* ================================== BORANG ================================ */
.bidang { display: block; margin: 0 0 18px; padding: 0; border: 0 }
.bidang > span { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--tinta-2) }
.bidang input { display: block; width: 100%; min-height: 52px; padding: 10px 12px; background: #fff; border: 1.5px solid var(--garis-kuat); border-radius: 0; font-size: 18px; letter-spacing: .02em }
.bidang .bantu { display: block; margin-top: 5px; font-size: 13px; color: var(--tinta-3) }

/* ============================== GERBANG MASUK ============================= */
.gerbang { min-height: 100vh; display: grid; grid-template-columns: 1fr }
.merek { background: linear-gradient(155deg, var(--pita) 0%, color-mix(in srgb, var(--pita) 78%, black) 100%); color: #fff; padding: 26px var(--tepi) 22px }
.merek-isi { max-width: var(--kolom); margin: 0 auto }
.merek-lambang { display: block; width: 150px; height: auto; margin-bottom: 14px }
.merek-label { margin: 0 0 4px; font: 600 12px var(--sempit); letter-spacing: .14em; text-transform: uppercase }
.merek-judul { margin: 0 0 10px; font: 700 28px/1.1 var(--sempit) }
.merek-ket, .merek-poin { display: none }
.sisi-form { padding: 26px var(--tepi) 40px }
.kartu-masuk { max-width: 440px; margin: 0 auto }
.kartu-kepala h1 { margin: 0 0 6px; font: 700 26px/1.15 var(--sempit) }
.kartu-kepala p { margin: 0 0 20px; color: var(--tinta-2) }
.folio-masuk { margin: 30px 0 0; font-size: 13px; color: var(--tinta-3) }
@media (min-width: 900px) {
  .gerbang { grid-template-columns: minmax(360px, 5fr) 6fr }
  .merek { display: flex; align-items: center; padding: 48px 56px }
  .merek-lambang { width: 220px; margin-bottom: 36px }
  .merek-judul { font-size: 40px; margin-bottom: 16px }
  .merek-ket { display: block; margin: 0 0 24px; font-size: 17px; line-height: 1.6; opacity: .92; max-width: 34em }
  .merek-poin { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; max-width: 34em }
  .merek-poin li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5 }
  .merek-poin svg { flex: none; margin-top: 4px }
  .sisi-form { display: flex; align-items: center; padding: 48px }
  .kartu-masuk { width: 100% }
}

/* Menunggu persetujuan */
.menunggu { padding: 18px; background: #fff; border: 1.5px solid var(--garis-kuat) }
.menunggu h2 { margin: 0 0 6px; font: 700 20px/1.2 var(--sempit) }
.menunggu p { margin: 0 0 8px }
.denyut { display: inline-block; width: 10px; height: 10px; margin-right: 8px; background: var(--pita); animation: denyut 1.4s ease-in-out infinite }
@keyframes denyut { 50% { opacity: .25 } }
@media (prefers-reduced-motion: reduce) { .denyut { animation: none } }

/* Bilah kemajuan memuat */
.bilah { height: 10px; background: var(--kertas-tepi); margin: 12px 0 6px }
.bilah > i { display: block; height: 100%; width: 0; background: var(--pita); transition: width .2s linear }
.bilah-ket { font-size: 14px; color: var(--tinta-2) }

/* ============================== HALAMAN UJIAN ============================= */
.ujian-atas { position: sticky; top: 0; z-index: 5; background: var(--pita); color: #fff }
.ujian-atas-isi { max-width: 1120px; margin: 0 auto; padding: 8px var(--tepi); display: flex; align-items: center; gap: 14px; min-height: 56px }
.ujian-nama { flex: 1; min-width: 0; font: 600 14px var(--sempit); letter-spacing: .06em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ujian-kemajuan { font: 600 14px var(--antarmuka); white-space: nowrap }
.sisa-waktu { font: 700 24px/1 var(--antarmuka); font-variant-numeric: tabular-nums; padding: 6px 10px; background: rgba(255,255,255,.14); min-width: 4.6em; text-align: center }
.sisa-waktu.kritis { background: var(--belum); }
.ukuran-teks { display: flex; gap: 2px }
.ukuran-teks button { min-width: 44px; min-height: 44px; background: rgba(255,255,255,.12); color: #fff; border: 0; font: 700 15px var(--antarmuka); cursor: pointer }
.ukuran-teks button[aria-pressed="true"] { background: #fff; color: var(--pita) }
.status-simpan { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; padding: 4px 8px; background: rgba(255,255,255,.12) }
.status-simpan i { width: 8px; height: 8px; background: #fff; border-radius: 50% }
.status-simpan[data-keadaan="menyimpan"] i { background: transparent; border: 2px solid #fff; animation: denyut 1s ease-in-out infinite }
.status-simpan[data-keadaan="galat"] { background: #fff; color: var(--bahaya-tua) }
.status-simpan[data-keadaan="galat"] i { background: var(--bahaya) }
@media (max-width: 600px) { .status-simpan #status-simpan-teks { display: none } .ujian-atas-isi { gap: 8px } .ujian-kemajuan { font-size: 13px } .sisa-waktu { font-size: 21px; min-width: 4.2em } }

.ujian-badan { max-width: 1120px; margin: 0 auto; padding: 18px var(--tepi) 120px; display: grid; gap: 18px; grid-template-columns: 1fr }
@media (min-width: 900px) { .ujian-badan { grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; padding-top: 28px } }

.soal-kartu { background: #fff; border: 1.5px solid var(--garis); padding: 22px var(--tepi) 26px }
@media (min-width: 900px) { .soal-kartu { padding: 34px 44px 38px } }
.soal-nomor { margin: 0 0 14px; font: 700 13px var(--sempit); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2) }

/* Teks bacaan: serif, tinggi baris longgar, lebar baris terbatas. */
.baca { font-family: var(--baca); font-size: var(--ukuran-baca); line-height: 1.7; font-weight: 400; max-width: 66ch; font-optical-sizing: auto; hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty }
.baca p { margin: 0 0 1em }
.baca em, .baca i { font-style: italic }
.baca sub, .baca sup { font-size: .72em; line-height: 0 }
.soal-teks { font-weight: 450; color: var(--tinta); margin: 0 0 22px }

.wacana { margin: 0 0 24px; padding: 16px 0 6px; border-top: 1px solid var(--garis); border-bottom: 1px solid var(--garis) }
.wacana-label { margin: 0 0 8px; font: 700 12px var(--sempit); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-3) }
/* Tabel data: antarmuka sans dengan angka tabular, bergaris agar sel kosong tetap terlihat. */
.wacana table { border-collapse: collapse; margin: 0 0 1em; font: 400 calc(var(--ukuran-baca) - 3px)/1.4 var(--antarmuka); font-variant-numeric: tabular-nums; max-width: 100%; display: block; overflow-x: auto }
.wacana th, .wacana td { border: 1px solid var(--garis-kuat); padding: 6px 12px; text-align: left }
.wacana th { background: var(--kertas-2) }
.wacana td:not(:first-child) { text-align: right }
.wacana img { display: block; max-width: 100%; height: auto; margin: 0 0 1em; background: var(--kertas-2); border: 1px solid var(--garis) }
.gambar-tunda { display: flex; align-items: center; justify-content: center; min-height: 140px; margin: 0 0 1em; background: var(--kertas-2); border: 1px dashed var(--garis-kuat); font: 500 14px var(--antarmuka); color: var(--tinta-2) }

.pilihan { display: grid; gap: 10px; margin: 0; padding: 0; border: 0 }
.pilihan label { display: flex; align-items: flex-start; gap: 14px; min-height: 56px; padding: 12px 14px; background: #fff; border: 1.5px solid var(--garis-kuat); cursor: pointer }
.pilihan label:hover { background: var(--kertas) }
.pilihan input { position: absolute; opacity: 0; pointer-events: none }
.pilihan .huruf { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 1.5px solid var(--tinta-2); font: 700 15px var(--sempit); }
.pilihan .isi-pilihan { padding-top: 2px }
.pilihan label:has(input:checked) { border: 3px solid var(--pita); padding: 10.5px 12.5px; background: #eef2f7 }
.pilihan label:has(input:checked) .huruf { background: var(--pita); color: #fff; border-color: var(--pita) }
.pilihan .huruf { position: relative }
.pilihan label:has(input:checked) .huruf::after { content: "✓"; position: absolute; top: -9px; right: -9px; display: grid; place-items: center; width: 18px; height: 18px; background: #fff; color: var(--pita); border: 1.5px solid var(--pita); border-radius: 50%; font: 700 11px/1 var(--antarmuka) }
.pilihan label:has(input:focus-visible) { outline: 2px solid var(--pita); outline-offset: 2px }
.pilihan.terkunci label { opacity: .5; cursor: wait }
.catatan-kunci { margin: 12px 0 0; font-size: 14px; color: var(--tinta-2) }

/* Navigasi soal */
.navigasi { align-self: start }
@media (min-width: 900px) { .navigasi { position: sticky; top: 76px } }
.navigasi summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; cursor: pointer }
@media (min-width: 900px) { .navigasi summary { pointer-events: none } .navigasi summary::marker { content: "" } }
/* NOMOR SOAL, tiga keadaan yang bisa dibedakan tanpa warna:
   belum dijawab  = garis putus-putus, latar putih;
   sedang dibuka  = latar biru tua, huruf putih, bingkai tebal;
   sudah dijawab  = latar abu tegas + lencana centang di sudut (gambar SVG, bukan huruf).
   Sedang dibuka DAN sudah dijawab: biru tua dengan lencana putih. */
.peta { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; margin: 10px 0 14px }
.peta button { position: relative; min-height: 46px; background: #fff; color: var(--tinta-2); border: 1.5px dashed var(--garis-kuat); font: 600 16px var(--antarmuka); cursor: pointer }
.peta button:hover { background: var(--kertas-2) }
.peta button.terjawab { background: var(--kertas-tepi); color: var(--tinta); border: 1.5px solid var(--tinta-2); font-weight: 700 }
.peta button.terjawab::after, .kotak-jawab::after { content: ""; position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--kertas);
  background: var(--pita) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.6 9.4l2.8 2.8 5.4-5.8' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat }
.peta button.sedang { background: var(--pita); color: #fff; border: 3px solid var(--pita); outline: 2px solid var(--pita); outline-offset: 2px; font-weight: 700 }
.peta button.sedang.terjawab::after { background-color: #fff; border-color: var(--pita);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.6 9.4l2.8 2.8 5.4-5.8' fill='none' stroke='%231b3a5c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") }
.peta-ringkas { margin: 0 0 6px; font-size: 15px }
.bilah-tipis { height: 6px; margin: 0 0 14px }
.legenda { display: grid; gap: 8px; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--garis); list-style: none; font-size: 14px; color: var(--tinta-2) }
.legenda li { display: flex; align-items: center; gap: 10px }
.kotak { position: relative; flex: none; width: 24px; height: 24px; background: #fff }
.kotak-belum { border: 1.5px dashed var(--garis-kuat) }
.kotak-sedang { background: var(--pita); border: 3px solid var(--pita); outline: 2px solid var(--pita); outline-offset: 1px }
.kotak-jawab { background: var(--kertas-tepi); border: 1.5px solid var(--tinta-2) }
.kotak-jawab::after { top: -6px; right: -6px; width: 14px; height: 14px }

.ujian-bawah { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; background: var(--kertas); border-top: 1px solid var(--garis-kuat) }
.ujian-bawah-isi { max-width: 1120px; margin: 0 auto; padding: 10px var(--tepi); display: flex; gap: 10px }
.ujian-bawah .tombol { flex: 1 }
.ujian-bawah .tombol-selesai { flex: 0 0 auto; width: auto; padding-inline: 20px }

/* Dialog selesai & layar petunjuk */
.panel { max-width: 640px; margin: 0 auto; padding: 26px var(--tepi) 60px }
.panel h2 { margin: 0 0 10px; font: 700 24px/1.2 var(--sempit) }
.tata-tertib { margin: 0 0 22px; padding-left: 1.2em; font-family: var(--baca); font-size: 18px; line-height: 1.7 }
.tata-tertib li { margin-bottom: 6px }
dialog { max-width: 440px; width: calc(100% - 36px); padding: 22px; border: 2px solid var(--tinta); background: #fff }
dialog::backdrop { background: rgba(22,24,28,.55) }
dialog h2 { margin: 0 0 8px; font: 700 21px var(--sempit) }
.dialog-tombol { display: flex; gap: 10px; margin-top: 18px }

/* ================================ PENGAWAS ================================ */
.pengawas-isi { max-width: 1000px; margin: 0 auto; padding: 22px var(--tepi) 50px }
.form-sempit { max-width: 420px }
.token-sesi { display: inline-block; padding: 8px 16px; background: #fff; border: 2px solid var(--tinta); font: 700 34px/1.1 var(--antarmuka); letter-spacing: .08em }
.judul-bagian { margin: 28px 0 10px; font: 700 13px var(--sempit); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2) }
.tabel { width: 100%; border-collapse: collapse; background: #fff; font-size: 15px }
.tabel th, .tabel td { border: 1px solid var(--garis-kuat); padding: 8px 10px; text-align: left }
.tabel th { background: var(--kertas-2); font: 700 13px var(--sempit); letter-spacing: .08em; text-transform: uppercase; position: sticky; top: 0 }
.tabel td.angka { text-align: right; font-variant-numeric: tabular-nums }
.lencana { display: inline-block; padding: 1px 8px; border: 1.5px solid var(--tinta-2); font: 600 12px var(--sempit); letter-spacing: .06em; text-transform: uppercase }
.lencana.perhatian { border: 2px solid var(--belum); color: var(--belum) }
.bar-aksi { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 12px }
.gulir-tabel { max-height: 60vh; overflow: auto }
@media print { .ujian-atas, .ujian-bawah { display: none } }

/* ================================== PESAN ==================================
   Semua pesan (info, sukses, peringatan, galat) satu bentuk: ikon + judul tebal + keterangan,
   garis tebal di kiri. Jenis dibedakan oleh IKON dan JUDUL, bukan hanya warna; --belum tidak
   dipakai di sini (artinya "belum dijawab" / sisa waktu kritis). */
.pesan { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; margin: 0 0 16px; padding: 12px 14px 12px 12px; background: #fff; border: 1.5px solid var(--garis); border-left: 5px solid var(--tinta-2); font-size: 15px; line-height: 1.45 }
.pesan .ikon { width: 24px; height: 24px; color: var(--tinta-2) }
.pesan-teks { min-width: 0 }
.pesan-judul { margin: 0; font-weight: 700; font-size: 16px }
.pesan-isi { margin: 2px 0 0; color: var(--tinta-2) }
.pesan-judul + .pesan-isi { margin-top: 3px }
.pesan-info { border-left-color: var(--pita) }
.pesan-info .ikon { color: var(--pita) }
.pesan-sukses { border-left-color: var(--tinta) }
.pesan-sukses .ikon { color: var(--tinta) }
.pesan-peringatan { border-left-color: var(--tinta); background: #fff }
.pesan-peringatan .ikon { color: var(--tinta) }
.pesan-galat { border-left-color: var(--bahaya) }
.pesan-galat .ikon { color: var(--bahaya) }
.pesan-galat .pesan-judul { color: var(--bahaya-tua) }
.ikon { flex: none; display: block }

/* Peringatan koneksi: batang penuh yang menempel di bawah bilah atas selama ujian. */
#banner-offline.pesan { position: sticky; top: 56px; z-index: 4; margin: 0; padding: 10px max(var(--tepi), calc((100% - 1120px) / 2 + var(--tepi))); border: 0; border-bottom: 3px solid var(--tinta); background: #fff }

.toast-wadah { position: fixed; left: 0; right: 0; bottom: 84px; z-index: 20; display: grid; justify-items: center; gap: 8px; padding: 0 var(--tepi); pointer-events: none }
.toast { display: flex; align-items: center; gap: 10px; max-width: 520px; padding: 11px 16px; background: var(--tinta); color: #fff; font-size: 15px; font-weight: 600; animation: toast-masuk .25s ease-out }
.toast .ikon { width: 20px; height: 20px }
@keyframes toast-masuk { from { opacity: 0; transform: translateY(8px) } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none } }

.dialog-catatan { margin: 0; font-size: 14px; color: var(--tinta-2) }
dialog .pesan { margin: 0 0 12px }
#selesai-pesan.pesan { padding: 18px 18px 18px 16px; grid-template-columns: 34px 1fr }
#selesai-pesan .ikon { width: 34px; height: 34px }
#selesai-pesan .pesan-judul { font: 700 22px/1.2 var(--sempit) }
#selesai-pesan .pesan-isi { font-size: 17px; margin-top: 6px }
.selesai-lanjut { margin: 0 }
#catatan-kunci { margin-top: 14px }