/* BYSA PTN — shared palette: royal blue, sky blue, white. */

:root{
  --indigo:#0066ee; --indigo-2:#2380f8; --indigo-lembut:#eaf2ff;
  --brand-strong:#134ba8; --brand-soft:#d8eaff;
  --bg:#f5f7fb; --kartu:#ffffff; --garis:#dfe6f0; --garis-2:#edf1f7;
  --tinta:#17223b; --redup:#59677e; --samar:#65738b;
  --hijau:#245fa7; --hijau-lembut:#e7f0ff;
  --kuning:#936a16; --kuning-lembut:#fff6e0;
  --merah:#be4a40; --merah-lembut:#fdecec;
  --fokus:#0066ee80; --fokus-lembut:#0066ee1f;
  --radius:8px; --bayang:0 2px 8px #1c385c08;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--tinta);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
a{color:var(--indigo);text-decoration:none}
[hidden]{display:none!important}

/* ── kerangka ─────────────────────────────────────────── */
#app{display:flex;min-height:100vh}
.rail{width:224px;flex:0 0 224px;background:#fff;border-right:1px solid var(--garis);padding:18px 14px;position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.merek{display:flex;align-items:center;gap:10px;padding:4px 8px 18px}
.logo{width:30px;height:30px;border-radius:9px;background:var(--indigo);color:#fff;display:grid;place-items:center;font-weight:800;font-size:16px}
.merek b{font-size:15px;font-weight:800;letter-spacing:-.01em}
.merek span{display:block;font-size:11px;color:var(--samar);font-weight:500;letter-spacing:.02em}
.nav{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;font-size:14px;font-weight:500;color:var(--redup);width:100%;text-align:left;transition:background .12s,color .12s}
.nav:hover{background:var(--garis-2);color:var(--tinta)}
.nav.aktif{background:var(--indigo-lembut);color:var(--indigo);font-weight:600}
.nav .ic{width:18px;text-align:center;font-size:15px}
.nav .lonceng{margin-left:auto;background:var(--merah);color:#fff;font-size:10px;font-weight:700;border-radius:999px;padding:1px 6px;min-width:18px;text-align:center}
.rail-bawah{margin-top:auto;padding-top:14px;border-top:1px solid var(--garis-2);font-size:12px;color:var(--samar)}

main{flex:1;min-width:0;padding:26px 32px 64px;max-width:1180px}
.kepala{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.kepala h1{font-size:24px;font-weight:800;letter-spacing:-.02em}
.kepala p{color:var(--redup);font-size:13.5px;margin-top:2px;max-width:70ch}
.kepala-aksi{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* ── komponen ─────────────────────────────────────────── */
.kartu{background:var(--kartu);border:1px solid var(--garis);border-radius:var(--radius);padding:18px}
.kartu h2{font-size:15px;font-weight:700;margin-bottom:12px;letter-spacing:-.01em}
.kartu h2 small{font-weight:500;color:var(--samar);font-size:12px;margin-left:6px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}

.tbl{background:var(--kartu);border:1px solid var(--garis);border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column;gap:3px}
.tbl .angka{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.tbl .label{font-size:11.5px;color:var(--samar);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.tbl .sub{font-size:12px;color:var(--redup)}

.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:10px;font-size:13.5px;font-weight:600;background:var(--indigo);color:#fff;transition:filter .12s}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.hantu{background:#fff;color:var(--tinta);border:1px solid var(--garis)}
.btn.hantu:hover{background:var(--garis-2)}
.btn.kecil{padding:6px 11px;font-size:12.5px;border-radius:8px}
.btn.bahaya{background:var(--merah)}

.lencana{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;background:var(--garis-2);color:var(--redup)}
.lencana.hijau{background:var(--hijau-lembut);color:var(--hijau)}
.lencana.kuning{background:var(--kuning-lembut);color:var(--kuning)}
.lencana.merah{background:var(--merah-lembut);color:var(--merah)}
.lencana.indigo{background:var(--indigo-lembut);color:var(--indigo)}

.bar{height:7px;border-radius:999px;background:var(--garis-2);overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;background:var(--indigo)}
.bar-tumpuk{display:flex;height:9px;border-radius:999px;overflow:hidden;background:var(--garis-2)}
.bar-tumpuk i{display:block;height:100%}

input[type=text],input[type=password],input[type=number],input[type=date],select,textarea{
  width:100%;padding:9px 12px;border:1px solid var(--garis);border-radius:10px;background:#fff;outline:none;transition:border-color .12s,box-shadow .12s;font-size:14px}
input:focus,select:focus,textarea:focus{border-color:var(--indigo);box-shadow:0 0 0 3px var(--fokus-lembut)}
label.f{display:block;font-size:12px;font-weight:600;color:var(--redup);margin-bottom:5px}
.baris{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}

.kosong{text-align:center;padding:40px 20px;color:var(--samar);font-size:13.5px}
.catat{font-size:12.5px;color:var(--samar);line-height:1.6}

/* ── masuk ────────────────────────────────────────────── */
#masuk{min-height:100vh;display:grid;place-items:center;padding:24px;width:100%}
.masuk-kotak{width:100%;max-width:380px;background:#fff;border:1px solid var(--garis);border-radius:18px;padding:32px;box-shadow:var(--bayang)}
.masuk-kotak .logo{width:44px;height:44px;font-size:22px;border-radius:13px;margin-bottom:16px}
.masuk-kotak h1{font-size:20px;font-weight:800;letter-spacing:-.02em}
.masuk-kotak p{color:var(--redup);font-size:13px;margin:4px 0 22px}
.masuk-kotak label.f{margin-top:12px}
.masuk-kotak .btn{width:100%;justify-content:center;margin-top:18px;padding:11px}
.galat{color:var(--merah);font-size:12.5px;margin-top:10px;min-height:16px}

/* ── silabus ──────────────────────────────────────────── */
.subtes-kepala{display:flex;align-items:center;gap:12px;cursor:pointer;padding:14px 16px;width:100%;text-align:left}
.subtes-kepala .pita{width:4px;height:34px;border-radius:2px;flex:0 0 4px}
.subtes-kepala .nm{font-weight:700;font-size:14.5px}
.subtes-kepala .mt{font-size:12px;color:var(--samar)}
.subtes-kepala .kanan{margin-left:auto;display:flex;align-items:center;gap:14px}
.subtes-isi{border-top:1px solid var(--garis-2);padding:6px 16px 14px}
.kel-judul{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--samar);margin:16px 0 8px}
.topik{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--garis-2)}
.topik:last-child{border-bottom:none}
.topik .isi{flex:1;min-width:0}
.topik .jd{font-size:13.5px;font-weight:500}
.topik .it{font-size:12px;color:var(--samar);margin-top:1px}
.topik .kd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;color:var(--samar);flex:0 0 54px}
.tahap{display:flex;gap:3px;flex:0 0 auto}
.tahap button{width:26px;height:26px;border-radius:7px;border:1px solid var(--garis);background:#fff;font-size:10px;font-weight:700;color:var(--samar);display:grid;place-items:center}
.tahap button:hover{border-color:var(--indigo);color:var(--indigo)}
.tahap button.on{background:var(--indigo);border-color:var(--indigo);color:#fff}
.tahap button.on.penuh{background:var(--hijau);border-color:var(--hijau)}
.tahap button.lampau{background:var(--indigo-lembut);border-color:var(--indigo-lembut);color:var(--indigo)}

/* ── ruang ujian ──────────────────────────────────────── */
.ujian-atas{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--garis);padding:10px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.jam{font-variant-numeric:tabular-nums;font-weight:800;font-size:19px;letter-spacing:-.02em;padding:5px 12px;border-radius:10px;background:var(--garis-2)}
.jam.awas{background:var(--kuning-lembut);color:var(--kuning)}
.jam.gawat{background:var(--merah-lembut);color:var(--merah)}
.ujian-tata{display:grid;grid-template-columns:1fr 216px;gap:22px;align-items:start;padding:22px 20px 80px;max-width:1180px;margin:0 auto}
.stimulus{background:#fff;border:1px solid var(--garis);border-radius:var(--radius);padding:18px;margin-bottom:16px;max-height:46vh;overflow-y:auto}
.stimulus h3{font-size:13px;font-weight:700;margin-bottom:8px}
.stimulus p{margin-bottom:10px;font-size:14.5px;line-height:1.75}
.soal-kotak{background:#fff;border:1px solid var(--garis);border-radius:var(--radius);padding:20px}
.soal-nomor{font-size:11.5px;font-weight:700;color:var(--samar);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.soal-teks{font-size:15.5px;line-height:1.7;margin-bottom:16px;white-space:pre-wrap}
.opsi{display:flex;flex-direction:column;gap:8px}
.opsi button{display:flex;gap:11px;align-items:flex-start;padding:11px 14px;border:1px solid var(--garis);border-radius:11px;text-align:left;font-size:14.5px;line-height:1.55;transition:border-color .12s,background .12s}
.opsi button:hover{border-color:var(--indigo-2);background:#fafaff}
.opsi button.pilih{border-color:var(--indigo);background:var(--indigo-lembut)}
.opsi button.benar{border-color:var(--hijau);background:var(--hijau-lembut)}
.opsi button.salah{border-color:var(--merah);background:var(--merah-lembut)}
.opsi .huruf{flex:0 0 22px;height:22px;border-radius:6px;background:var(--garis-2);display:grid;place-items:center;font-size:11.5px;font-weight:700;color:var(--redup)}
.opsi button.pilih .huruf{background:var(--indigo);color:#fff}
.opsi button.benar .huruf{background:var(--hijau);color:#fff}
.opsi button.salah .huruf{background:var(--merah);color:#fff}
.peta{background:#fff;border:1px solid var(--garis);border-radius:var(--radius);padding:14px;position:sticky;top:74px}
.peta>summary{cursor:pointer;font-size:13px;font-weight:700;min-height:44px;align-content:center}.peta>summary span{float:right;color:var(--redup);font-weight:500}
.peta-isi{max-height:65vh;overflow:auto;padding:4px}.peta-isi select{font-size:16px}
.peta-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px;margin-top:8px}
.peta-grid button{min-width:44px;min-height:44px;aspect-ratio:1;border-radius:7px;border:1px solid var(--garis);font-size:12px;font-weight:600;color:var(--redup);display:grid;place-items:center}
.peta-grid button.terisi{background:var(--indigo-lembut);border-color:var(--indigo-lembut);color:var(--indigo)}
.peta-grid button.ragu{background:var(--kuning-lembut);border-color:var(--kuning);color:var(--kuning)}
.peta-grid button.kini{outline:2px solid var(--indigo);outline-offset:1px}
.peta-grid button.bnr{background:var(--hijau-lembut);border-color:var(--hijau-lembut);color:var(--hijau)}
.peta-grid button.slh{background:var(--merah-lembut);border-color:var(--merah-lembut);color:var(--merah)}
.peta-legenda{display:flex;flex-direction:column;gap:5px;margin-top:12px;font-size:11.5px;color:var(--samar)}
.peta-legenda span{display:flex;align-items:center;gap:7px}
.peta-legenda i{width:11px;height:11px;border-radius:3px;display:block}
.pembahasan{margin-top:16px;padding:14px;border-radius:11px;background:var(--indigo-lembut);font-size:14px;line-height:1.7}
.pembahasan b{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--indigo);margin-bottom:5px}

/* ── lain ─────────────────────────────────────────────── */
.daftar{display:flex;flex-direction:column}
.item{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--garis-2)}
.item:last-child{border-bottom:none}
.item .isi{flex:1;min-width:0}
.item .jd{font-size:13.5px;font-weight:600}
.item .it{font-size:12px;color:var(--samar)}
.tab{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.tab button{padding:7px 13px;border-radius:9px;font-size:13px;font-weight:600;color:var(--redup);border:1px solid var(--garis);background:#fff}
.tab button.on{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.sparkline{display:flex;align-items:flex-end;gap:3px;height:56px;margin-top:8px}
.sparkline i{flex:1;background:var(--indigo);border-radius:3px 3px 0 0;min-height:2px;display:block}
.roti{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--tinta);color:#fff;padding:10px 18px;border-radius:11px;font-size:13.5px;font-weight:500;z-index:200;box-shadow:var(--bayang)}

@media (max-width:860px){
  #app{flex-direction:column}
  .rail{width:100%;flex:none;height:auto;position:static;flex-direction:row;overflow-x:auto;padding:10px;gap:6px;border-right:none;border-bottom:1px solid var(--garis)}
  .merek,.rail-bawah{display:none}
  .nav{width:auto;white-space:nowrap;padding:8px 12px}
  main{padding:18px 14px 60px}
  .ujian-tata{grid-template-columns:1fr;padding:16px 14px 90px}
  .peta{position:static;order:-1}
  .peta-grid{grid-template-columns:repeat(auto-fill,minmax(44px,1fr))}
}

dialog.tirai{width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0}dialog.tirai:not([open]){display:none}dialog.tirai::backdrop{background:transparent}
.review-soal{width:min(720px,calc(100% - 28px));max-height:90dvh;overflow:auto;margin:auto;padding:24px;border:1px solid var(--garis);border-radius:8px;color:var(--tinta);background:white}
.review-soal::backdrop{background:#121d3490}.review-soal p{margin:12px 0;line-height:1.65}.review-soal .btn{margin:8px 8px 8px 0}.review-soal summary{min-height:44px;align-content:center;cursor:pointer}
.review-check{display:flex;align-items:flex-start;gap:10px;line-height:1.6;margin:14px 0}.review-check input{flex:0 0 20px;width:20px;height:20px;margin:3px 0}
.notice-koreksi{border-left:4px solid #b66b15;background:#fff6e8;color:#74440e;padding:14px;line-height:1.65;margin:14px 0}
.opsi button:focus-visible,.peta-grid button:focus-visible{outline:3px solid var(--indigo);outline-offset:3px}
@media(max-width:600px){.review-soal{padding:16px}.review-soal input,.review-soal select,.review-soal textarea{font-size:16px}.item{flex-wrap:wrap}.item>.isi{flex-basis:100%}.roti{max-width:calc(100vw - 28px);width:max-content;white-space:normal}}

/* ── dialog konfirmasi ────────────────────────────────── */
.tirai{position:fixed;inset:0;background:rgba(24,28,46,.42);display:grid;place-items:center;z-index:300;padding:20px}
.tirai-kotak{background:#fff;border-radius:16px;padding:22px;max-width:420px;width:100%;box-shadow:var(--bayang)}
.tirai-kotak p{font-size:14.5px;line-height:1.65;margin-bottom:18px}
.tirai-aksi{display:flex;gap:8px;justify-content:flex-end}