/* =====================================================================
   CBT Sekolah — tema mengikuti aplikasi ANBK/TKA Pusmendik

   Palet, bentuk tombol, dan bayangan diambil dari aplikasi rujukan:
   biru baja #326698 dengan gradien ke #4a7fb8, tombol pil, dan kartu
   berbayang tebal.
   ===================================================================== */

:root {
    /* Warna utama aplikasi asli */
    --biru:        #326698;
    --biru-terang: #4a7fb8;
    --biru-muda:   #74b9ff;
    --biru-sejuk:  #56baed;
    --biru-pucat:  #e8f1f8;
    --navy:        #012970;

    --hijau:       #00a65a;
    --hijau-muda:  #e6f7ef;
    --merah:       #dc3545;
    --merah-muda:  #fdecee;
    --kuning:      #f0932b;
    --kuning-muda: #fef6ec;

    --teks:        #2d3436;
    --teks-samar:  #7f8c8d;
    --garis:       #dfe6e9;
    --garis-halus: #eee;
    --latar:       #f4f7fa;
    --putih:       #ffffff;

    /* Bentuk khas aplikasi asli: sudut membulat & tombol pil */
    --radius:      10px;
    --radius-kecil: 6px;
    --radius-pil:  30px;

    --bayang:      0 0 30px rgba(127, 137, 161, .25);
    --bayang-tebal: 0 30px 60px 0 rgba(0, 0, 0, .3);
    --bayang-halus: 0 2px 12px rgba(1, 41, 112, .08);
    --bayang-biru: 0 5px 25px rgba(50, 102, 152, .35);

    --gradien: linear-gradient(135deg, #326698 0%, #4a7fb8 100%);
    --sisi-lebar: 250px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* Atribut hidden harus selalu menang atas aturan display apa pun di bawah.
   Tanpa ini, elemen seperti .tirai (display:grid) tetap tampil meski diberi
   atribut hidden, karena gaya penulis mengalahkan gaya bawaan peramban. */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: "Poppins", "Segoe UI", system-ui, -apple-system, "Open Sans", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--teks);
    background: var(--latar);
}

h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.35; font-weight: 600; color: var(--navy); }
h1 { font-size: 1.4rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: .98rem; }
p  { margin: 0 0 .75rem; }
a  { color: var(--biru); text-decoration: none; }
a:hover { color: var(--biru-terang); text-decoration: underline; }

.samar  { color: var(--teks-samar); }
.kecil  { font-size: .82rem; }
.tengah { text-align: center; }
.kanan  { text-align: right; }
.tebal  { font-weight: 600; }
.mt     { margin-top: 1rem; }
.mb     { margin-bottom: 1rem; }

/* ---------------------------------------------------- Animasi khas asli */
.fadeInDown { animation: fadeInDown 1s both; }
@keyframes fadeInDown {
    0%   { opacity: 0; transform: translateY(-40px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------- Kepala bergambar (asli) */
.kepala-pusmendik {
    background: var(--biru) url('../img/bg-top.png') no-repeat left;
    background-size: contain;
    color: #fff;
    padding: .85rem 1.5rem;
}
.kepala-pusmendik-isi {
    display: flex; align-items: center; gap: .85rem;
    max-width: 1200px; margin: 0 auto;
}
.kepala-pusmendik img { height: 58px; width: auto; }
.kepala-pusmendik .nama-lembaga { font-weight: 700; letter-spacing: .02em; line-height: 1.2; }
.kepala-pusmendik .sub-lembaga { font-size: .78rem; opacity: .9; }
.kepala-pusmendik .kanan-kepala { margin-left: auto; text-align: right; font-size: .84rem; }

/* ---------------------------------------------------------- Tata letak */
.tata-letak { display: flex; min-height: 100vh; }

.bilah-sisi {
    width: var(--sisi-lebar); flex: 0 0 var(--sisi-lebar);
    background: var(--putih); border-right: 1px solid var(--garis);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
    box-shadow: var(--bayang-halus);
}

.merek {
    display: flex; align-items: center; gap: .6rem;
    padding: 1rem 1.1rem; border-bottom: 1px solid var(--garis-halus);
    font-weight: 700; color: var(--navy);
}
.merek-ikon {
    width: 34px; height: 34px; flex: 0 0 34px;
    display: grid; place-items: center;
    background: var(--gradien); color: #fff;
    border-radius: 50%; font-size: .95rem;
    box-shadow: var(--bayang-biru);
}
.merek-ikon.besar { width: 60px; height: 60px; flex-basis: 60px; font-size: 1.6rem; margin: 0 auto .8rem; }
.merek-logo { height: 34px; width: auto; }
.merek-teks { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.navigasi { padding: .7rem .6rem; flex: 1; overflow-y: auto; }
.nav-tautan {
    display: flex; align-items: center; gap: .65rem;
    padding: .6rem .8rem; margin-bottom: 3px;
    border-radius: var(--radius-pil);
    color: #5a6570; font-size: .88rem; font-weight: 500;
}
.nav-tautan:hover { background: var(--biru-pucat); color: var(--biru); text-decoration: none; }
.nav-tautan.aktif {
    background: var(--gradien); color: #fff; font-weight: 600;
    box-shadow: var(--bayang-biru);
}
.nav-ikon { width: 18px; text-align: center; }

.bilah-kaki { padding: .8rem; border-top: 1px solid var(--garis-halus); }
.pengguna-kartu { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.avatar {
    width: 38px; height: 38px; flex: 0 0 38px;
    display: grid; place-items: center;
    background: var(--gradien); color: #fff;
    border-radius: 50%; font-weight: 700;
}
.pengguna-info { min-width: 0; line-height: 1.3; }
.pengguna-info strong { display: block; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pengguna-info small  { color: var(--teks-samar); font-size: .76rem; }

.isi-utama { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.bilah-atas {
    display: flex; align-items: center; gap: .75rem;
    padding: .8rem 1.5rem; background: var(--putih);
    border-bottom: 1px solid var(--garis); position: sticky; top: 0; z-index: 20;
    box-shadow: var(--bayang-halus);
}
.bilah-atas h1 { margin: 0; flex: 1; font-size: 1.1rem; }
.aksi-atas { display: flex; gap: .5rem; }
.tombol-menu {
    display: none; background: none; border: 1px solid var(--garis);
    border-radius: var(--radius-pil); padding: .3rem .6rem; font-size: 1.05rem; cursor: pointer;
}

.konten { padding: 1.5rem; max-width: 1200px; width: 100%; }

/* -------------------------------------------------------- Halaman polos */
.halaman-polos {
    min-height: 100vh; margin: 0;
    background: var(--latar);
    display: flex; flex-direction: column;
}
.kotak-tengah { width: 100%; max-width: 430px; margin: 2.5rem auto; padding: 0 1rem; }
.kartu-masuk {
    padding: 2.25rem 2rem;
    border-radius: var(--radius);
    box-shadow: var(--bayang-tebal);
    border: 0;
}
.masuk-kepala { text-align: center; margin-bottom: 1.5rem; }
.masuk-kepala h1 { font-size: 1.25rem; margin-bottom: .2rem; }

/* ------------------------------------------------------------ Komponen */
.kartu {
    background: var(--putih);
    border: 1px solid rgba(1, 41, 112, .06);
    border-radius: var(--radius);
    box-shadow: var(--bayang);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}
.kartu-kepala {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin: -1.25rem -1.25rem 1.15rem;
    padding: .95rem 1.25rem;
    border-bottom: 1px solid var(--garis-halus);
}
.kartu-kepala h2 { margin: 0; font-size: 1rem; }

.kisi { display: grid; gap: 1.1rem; }
.kisi-4 { grid-template-columns: repeat(4, 1fr); }
.kisi-3 { grid-template-columns: repeat(3, 1fr); }
.kisi-2 { grid-template-columns: repeat(2, 1fr); }

.statistik { display: flex; align-items: center; gap: .9rem; }
.statistik-angka { font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: var(--navy); }
.statistik-label { color: var(--teks-samar); font-size: .82rem; }
.statistik-ikon {
    width: 48px; height: 48px; flex: 0 0 48px;
    display: grid; place-items: center; border-radius: 50%;
    font-size: 1.2rem; background: var(--biru-pucat); color: var(--biru);
}

/* Tombol pil, mengikuti gaya aplikasi asli */
.tombol {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .5rem 1.1rem;
    border: 1px solid var(--garis);
    border-radius: var(--radius-pil);
    background: var(--putih); color: var(--teks);
    font: inherit; font-size: .86rem; font-weight: 500;
    cursor: pointer; text-decoration: none;
    transition: all .15s ease;
}
.tombol:hover { background: var(--latar); text-decoration: none; transform: translateY(-1px); }
.tombol-utama {
    background: var(--gradien); border-color: transparent; color: #fff;
    box-shadow: var(--bayang-biru);
}
.tombol-utama:hover { background: var(--biru); color: #fff; }
.tombol-bahaya { background: var(--merah); border-color: var(--merah); color: #fff; }
.tombol-bahaya:hover { background: #c82333; color: #fff; }
.tombol-sukses { background: var(--hijau); border-color: var(--hijau); color: #fff; }
.tombol-sukses:hover { background: #008d4c; color: #fff; }
.tombol-peringatan { background: var(--kuning); border-color: var(--kuning); color: #fff; }
.tombol-halus { background: var(--latar); }
.tombol-penuh { width: 100%; }
.tombol-kecil { padding: .3rem .8rem; font-size: .8rem; }
.tombol-besar { padding: .75rem 1.4rem; font-size: .98rem; }
.tombol:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* Form */
.bidang { display: block; margin-bottom: 1rem; }
.bidang > span { display: block; margin-bottom: .35rem; font-size: .84rem; font-weight: 500; color: #55606a; }
input[type=text], input[type=password], input[type=number], input[type=email],
input[type=date], input[type=datetime-local], select, textarea {
    width: 100%; padding: .55rem .8rem;
    border: 1px solid var(--garis); border-radius: var(--radius-kecil);
    font: inherit; font-size: .88rem; background: var(--putih); color: var(--teks);
    transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--biru-sejuk);
    box-shadow: 0 0 0 3px rgba(86, 186, 237, .18);
}
textarea { min-height: 100px; resize: vertical; }
.bidang-baris { display: flex; gap: .9rem; flex-wrap: wrap; }
.bidang-baris > .bidang { flex: 1 1 180px; }
.bantuan { display: block; font-size: .78rem; color: var(--teks-samar); margin-top: .3rem; }

/* Tabel */
.tabel-bungkus { overflow-x: auto; }
table.tabel { width: 100%; border-collapse: collapse; font-size: .86rem; }
table.tabel th, table.tabel td { padding: .65rem .7rem; text-align: left; border-bottom: 1px solid var(--garis-halus); vertical-align: middle; }
table.tabel th { font-weight: 600; color: var(--navy); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; background: #fafcfe; }
table.tabel tbody tr:hover { background: #f8fbfd; }
table.tabel td.aksi { white-space: nowrap; text-align: right; }

/* Lencana & notifikasi */
.lencana {
    display: inline-block; padding: .2rem .6rem;
    border-radius: var(--radius-pil); font-size: .75rem; font-weight: 600;
    background: var(--garis-halus); color: var(--teks-samar);
}
.lencana-biru   { background: var(--biru-pucat);  color: var(--biru); }
.lencana-hijau  { background: var(--hijau-muda);  color: var(--hijau); }
.lencana-merah  { background: var(--merah-muda);  color: var(--merah); }
.lencana-kuning { background: var(--kuning-muda); color: var(--kuning); }

.notifikasi {
    padding: .75rem 1rem; border-radius: var(--radius-kecil);
    margin-bottom: 1rem; font-size: .87rem; border-left: 4px solid transparent;
}
.notifikasi-sukses { background: var(--hijau-muda); color: #1d6f4e; border-color: var(--hijau); }
.notifikasi-galat  { background: var(--merah-muda); color: #a12833; border-color: var(--merah); }
.notifikasi-info   { background: var(--biru-pucat); color: var(--biru); border-color: var(--biru); }

.kosong-pesan { text-align: center; padding: 2.75rem 1rem; color: var(--teks-samar); }
.kosong-ikon { font-size: 2.2rem; opacity: .3; display: block; margin-bottom: .5rem; }

/* ----------------------------------------------------------- Editor soal */
.baris-opsi {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: .65rem; margin-bottom: .5rem;
    background: #fafcfe; border: 1px solid var(--garis); border-radius: var(--radius-kecil);
}
.baris-opsi > textarea, .baris-opsi > input[type=text] { flex: 1; }
.opsi-kunci { display: flex; align-items: center; gap: .3rem; padding-top: .45rem; font-weight: 600; white-space: nowrap; }
.opsi-kunci input { width: auto; }

.stimulus {
    padding: 1rem 1.1rem; margin-bottom: 1rem;
    background: var(--biru-pucat); border-left: 4px solid var(--biru);
    border-radius: var(--radius-kecil);
}
.isi-soal { margin-bottom: 1rem; }
.isi-soal img, .stimulus img, .daftar-opsi-pratinjau img { max-width: 100%; height: auto; }
.isi-soal table, .stimulus table { border-collapse: collapse; }
.isi-soal table td, .isi-soal table th,
.stimulus table td, .stimulus table th { border: 1px solid var(--garis); padding: .4rem .6rem; }

.daftar-opsi-pratinjau { list-style: none; padding: 0; margin: 0; }
.daftar-opsi-pratinjau li {
    padding: .6rem .8rem; margin-bottom: .45rem;
    border: 1px solid var(--garis); border-radius: var(--radius-kecil);
}
.daftar-opsi-pratinjau li.opsi-kunci-benar { background: var(--hijau-muda); border-color: #a8e6c9; }
.opsi-salah-pilih { background: var(--merah-muda); border-color: #f5c2c7; }

/* -------------------------------------------------------- Tampilan siswa */
.bilah-siswa { background: var(--putih); box-shadow: var(--bayang-halus); position: sticky; top: 0; z-index: 20; }
.bilah-siswa-isi {
    max-width: 1100px; margin: 0 auto; padding: .75rem 1.25rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.bilah-siswa .merek { padding: 0; border: 0; }
.siswa-identitas { display: flex; align-items: center; gap: .85rem; text-align: right; }
.siswa-identitas strong { display: block; font-size: .88rem; }
.konten-siswa { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.25rem; width: 100%; }
.judul-halaman { margin-bottom: 1.15rem; }

.kartu-ujian { display: flex; flex-direction: column; }
.kartu-ujian-kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .85rem; }
.kartu-ujian-kepala h2 { margin: 0; font-size: 1.02rem; }

.rincian-ujian { margin: 0 0 1.15rem; font-size: .87rem; }
.rincian-ujian > div { display: flex; justify-content: space-between; padding: .35rem 0; border-bottom: 1px dashed var(--garis); }
.rincian-ujian dt { color: var(--teks-samar); margin: 0; }
.rincian-ujian dd { margin: 0; font-weight: 600; }

.info-kotak { text-align: center; padding: .9rem; background: var(--biru-pucat); border-radius: var(--radius-kecil); }
.info-angka { font-size: 1.7rem; font-weight: 700; line-height: 1.2; color: var(--biru); }

.nilai-besar { font-size: 2.8rem; font-weight: 700; text-align: center; margin: .5rem 0; line-height: 1.1; }
.nilai-lulus { color: var(--hijau); }
.nilai-kurang { color: var(--merah); }

.kartu-konfirmasi { max-width: 640px; margin: 0 auto; box-shadow: var(--bayang-tebal); }
.daftar-aturan { margin: 0 0 1.25rem; padding-left: 1.15rem; font-size: .88rem; }
.daftar-aturan li { margin-bottom: .45rem; }

.pilihan-kotak {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: .65rem .8rem; border: 1px solid var(--garis);
    border-radius: var(--radius-kecil); background: var(--putih); cursor: pointer;
}
.pilihan-kotak:hover { background: var(--biru-pucat); border-color: var(--biru-sejuk); }
.pilihan-kotak input { width: auto; margin-top: .25rem; }

/* ---------------------------------------------------------- Mode ujian */
.mode-ujian { background: var(--latar); }
.ujian-bingkai { min-height: 100vh; display: flex; flex-direction: column; }

.ujian-kepala {
    background: var(--biru) url('../img/bg-top.png') no-repeat left;
    background-size: contain;
    color: #fff;
    padding: .7rem 1.5rem;
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.ujian-kepala-kiri { display: flex; align-items: center; gap: .8rem; }
.ujian-kepala img { height: 46px; width: auto; }
.ujian-judul strong { display: block; font-size: .95rem; }
.ujian-judul span { font-size: .78rem; opacity: .9; }

.ujian-waktu {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .4rem 1.1rem; border-radius: var(--radius-pil);
    background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .5);
    color: #fff; font-size: .82rem;
}
.waktu-angka { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ujian-waktu.waktu-hampir { background: var(--kuning); border-color: var(--kuning); }
.ujian-waktu.waktu-kritis { background: var(--merah); border-color: var(--merah); animation: denyut 1.2s infinite; }
@keyframes denyut { 50% { opacity: .6; } }

.ujian-isi { flex: 1; display: flex; gap: 1.25rem; max-width: 1250px; width: 100%; margin: 0 auto; padding: 1.25rem; align-items: flex-start; }
.ujian-soal-panel { flex: 1; min-width: 0; }

.soal-kartu {
    background: var(--putih); border-radius: var(--radius);
    padding: 1.5rem; box-shadow: var(--bayang);
}
.soal-kepala {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1.15rem; padding-bottom: .8rem; border-bottom: 1px solid var(--garis-halus);
}
.soal-nomor { font-size: 1.05rem; color: var(--navy); }
.soal-nomor b { font-size: 1.3rem; color: var(--biru); }
.tanda-ragu { display: flex; align-items: center; gap: .4rem; font-size: .85rem; cursor: pointer; }
.tanda-ragu input { width: auto; }

.daftar-opsi { display: flex; flex-direction: column; gap: .55rem; margin: 1.15rem 0; }
.opsi-jawab {
    display: flex; align-items: flex-start; gap: .7rem;
    padding: .8rem .95rem; border: 1.5px solid var(--garis);
    border-radius: var(--radius-kecil); cursor: pointer; background: var(--putih);
    transition: all .15s ease;
}
.opsi-jawab:hover { border-color: var(--biru-sejuk); background: #f7fcff; }
.opsi-jawab.terpilih { border-color: var(--biru); background: var(--biru-pucat); box-shadow: 0 2px 10px rgba(50, 102, 152, .12); }
.opsi-jawab input { width: auto; margin-top: .3rem; }
.opsi-label {
    font-weight: 700; min-width: 1.6rem; height: 1.6rem;
    display: grid; place-items: center; border-radius: 50%;
    background: var(--garis-halus); color: var(--teks-samar); font-size: .8rem;
}
.opsi-jawab.terpilih .opsi-label { background: var(--biru); color: #fff; }
.opsi-isi { flex: 1; }
.opsi-isi img { max-width: 100%; height: auto; }

.tabel-kategori td, .tabel-kategori th { vertical-align: middle; }
.tabel-kategori input { width: auto; transform: scale(1.2); }

.soal-navigasi {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin-top: 1.5rem; padding-top: 1.15rem; border-top: 1px solid var(--garis-halus);
}
.status-simpan { font-size: .82rem; color: var(--teks-samar); }
.status-simpan.status-ok { color: var(--hijau); }
.status-simpan.status-galat { color: var(--merah); }

.ujian-navigator {
    width: 270px; flex: 0 0 270px; position: sticky; top: 5.5rem;
    background: var(--putih); border-radius: var(--radius);
    padding: 1.15rem; box-shadow: var(--bayang);
}
.ujian-navigator h3 { font-size: .9rem; margin-bottom: .85rem; padding-bottom: .5rem; border-bottom: 1px solid var(--garis-halus); }
.kisi-nomor { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; margin-bottom: 1rem; }

/* Tombol nomor bulat dengan tanda centang di sudut, seperti aplikasi asli */
.nomor-soal {
    position: relative; aspect-ratio: 1;
    border: 1px solid var(--garis); background: var(--putih);
    border-radius: 50%; font: inherit; font-size: .82rem; font-weight: 600;
    cursor: pointer; color: var(--teks-samar); transition: all .15s;
}
.nomor-soal:hover { border-color: var(--biru); color: var(--biru); }
.nomor-soal.nomor-terisi { background: var(--biru); border-color: var(--biru); color: #fff; }
.nomor-soal.nomor-ragu { background: var(--kuning); border-color: var(--kuning); color: #fff; }
.nomor-soal.nomor-aktif { box-shadow: 0 0 0 3px rgba(86, 186, 237, .45); transform: scale(1.06); }
.nomor-soal.nomor-terisi::after {
    content: "✓"; position: absolute; top: -4px; right: -4px;
    width: 15px; height: 15px; font-size: 9px; line-height: 15px;
    background: #fff; color: var(--hijau); border: 1px solid var(--hijau);
    border-radius: 50%;
}

.keterangan-warna { list-style: none; padding: 0; margin: 0 0 1rem; font-size: .78rem; color: var(--teks-samar); }
.keterangan-warna li { display: flex; align-items: center; gap: .45rem; margin-bottom: .3rem; }
.titik { width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--garis); }
.titik-terisi { background: var(--biru); border-color: var(--biru); }
.titik-ragu { background: var(--kuning); border-color: var(--kuning); }
.ringkas-jawab {
    font-size: .85rem; margin-bottom: .9rem; padding: .6rem;
    background: var(--biru-pucat); border-radius: var(--radius-kecil); text-align: center; color: var(--biru);
}

.tirai {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(1, 41, 112, .78); display: grid; place-items: center; padding: 1.5rem;
}
.tirai-kotak { max-width: 470px; text-align: center; margin: 0; box-shadow: var(--bayang-tebal); }
.tirai-kotak h2 { margin-bottom: .5rem; }
#tiraiAksi { display: flex; gap: .5rem; justify-content: center; margin-top: 1.25rem; }

/* ---------------------------------------------------------- Responsif */
@media (max-width: 1024px) {
    .ujian-navigator { width: 220px; flex-basis: 220px; }
    .kisi-nomor { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 900px) {
    .kisi-4 { grid-template-columns: repeat(2, 1fr); }
    .kisi-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .ujian-isi { flex-direction: column; }
    .ujian-navigator { width: 100%; flex-basis: auto; position: static; order: -1; }
    .kisi-nomor { grid-template-columns: repeat(8, 1fr); }
    .ujian-kepala { flex-wrap: wrap; gap: .6rem; padding: .6rem 1rem; }
    .ujian-kepala img { height: 36px; }
    .kepala-pusmendik img { height: 44px; }
}

@media (max-width: 720px) {
    .bilah-sisi {
        position: fixed; z-index: 40; left: 0; top: 0;
        transform: translateX(-100%); transition: transform .2s ease;
        box-shadow: var(--bayang-tebal);
    }
    .bilah-sisi.terbuka { transform: translateX(0); }
    .tombol-menu { display: block; }
    .konten { padding: 1rem; }
    .kisi-4, .kisi-3, .kisi-2 { grid-template-columns: 1fr; }
    .soal-kartu { padding: 1.1rem; }
    .soal-navigasi { flex-wrap: wrap; }
    .soal-navigasi .tombol { flex: 1 1 45%; }
}