/* Tes Calon Tenaga Ahli IT. Arah: lembar ujian cetak. Satu lembar, soal dipisah garis,
   nomor di margin, tinta navy di atas kertas putih. Huruf IBM Plex: Sans untuk teks,
   Mono hanya untuk kode dan angka yang diukur (timer, kode akses). */

:root {
  --kertas: #f4f5f7;
  --lembar: #ffffff;
  --tinta: #141c2b;
  --tinta-2: #4a5568;
  --tinta-3: #6b7587;
  --garis: #e2e5ea;
  --garis-tegas: #c9ced7;
  --navy: #1c4a87;
  --navy-tua: #133661;
  --navy-muda: #edf2f9;
  --navy-sedang: #c8d6ea;
  --hijau: #1d6b45;
  --hijau-muda: #e9f4ee;
  --merah: #a8261b;
  --merah-muda: #fbeceb;
  --kuning: #7a5200;
  --kuning-muda: #fdf4e1;
  --huruf: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --huruf-kode: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --sudut: 4px;
  --bayang: 0 1px 2px rgba(20, 28, 43, .06), 0 4px 16px rgba(20, 28, 43, .05);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; scrollbar-color: var(--garis-tegas) var(--kertas); }
body {
  margin: 0;
  background: var(--kertas);
  color: var(--tinta);
  font: 400 16px/1.6 var(--huruf);
  font-feature-settings: "tnum" 0;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--navy);
}
::selection { background: var(--navy-sedang); color: var(--tinta); }
h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 .9rem; }
h2 { font-size: 1.15rem; line-height: 1.3; margin: 1.6rem 0 .7rem; }
h2:first-child, h1 + h2 { margin-top: 0; }
h3 { font-size: 1rem; margin: 1.2rem 0 .5rem; }
p { margin: 0 0 .8rem; }
a { color: var(--navy); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--navy-tua); }
strong { font-weight: 600; }
code { font: 500 .9em var(--huruf-kode); background: var(--navy-muda); color: var(--navy-tua); padding: .05em .3em; border-radius: 3px; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* Kepala halaman */
.kepala { background: var(--navy-tua); color: #fff; position: sticky; top: 0; z-index: 20; }
.kepala-isi { max-width: 1160px; margin: 0 auto; padding: .8rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.kepala-kecil { margin: 0; font-size: .8rem; color: #c9d6ea; }
.kepala-judul { margin: 0; font-weight: 600; font-size: 1.05rem; letter-spacing: -0.005em; }
.kepala-peserta { font-size: .92rem; color: #e6edf7; text-align: right; }
.kepala-admin { display: flex; gap: 1.25rem; align-items: center; font-size: .92rem; }
.kepala-admin a, .kepala-admin .tautan { color: #fff; }
.kepala :focus-visible { outline-color: #fff; }

.isi { max-width: 1160px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
.kartu { background: var(--lembar); border: 1px solid var(--garis); border-radius: var(--sudut); padding: 1.5rem; margin-bottom: 1.25rem; box-shadow: var(--bayang); }
.sempit { max-width: 440px; margin: 3rem auto; }
.tumpuk { display: grid; gap: .65rem; }
.baris-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 1rem; align-items: end; }
.judul-baris { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.judul-baris h1 { margin: 0; }

label, .label { display: block; font-weight: 500; font-size: .92rem; margin-bottom: .35rem; color: var(--tinta); }
.isian {
  width: 100%; padding: .62rem .8rem; font: inherit; color: var(--tinta); background: #fff;
  border: 1px solid var(--garis-tegas); border-radius: var(--sudut);
  transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
.isian:focus, .kode-area:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-sedang); }
.isian::placeholder { color: var(--tinta-3); }
.isian.kode { font: 600 1.45rem var(--huruf-kode); letter-spacing: .3em; text-align: center; text-transform: uppercase; padding: .7rem; }
.isian.kode::placeholder { font-size: 1rem; letter-spacing: .05em; font-weight: 400; text-transform: none; }
.isian.pendek { max-width: 8rem; font-variant-numeric: tabular-nums; }

.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: var(--navy); color: #fff; border: 1px solid var(--navy); border-radius: var(--sudut);
  padding: .62rem 1.15rem; font: 600 .95rem var(--huruf); cursor: pointer; text-decoration: none;
  transition: background-color .15s ease-out, border-color .15s ease-out, transform .1s ease-out;
}
.tombol:hover { background: var(--navy-tua); border-color: var(--navy-tua); color: #fff; }
.tombol:active { transform: translateY(1px); }
.tombol-besar { padding: .8rem 1.5rem; font-size: 1rem; }
.tombol-garis { background: #fff; color: var(--navy); border-color: var(--garis-tegas); }
.tombol-garis:hover { background: var(--navy-muda); color: var(--navy-tua); border-color: var(--navy-sedang); }
.tombol-bahaya { background: #fff; color: var(--merah); border-color: #e3b4ae; }
.tombol-bahaya:hover { background: var(--merah-muda); color: var(--merah); border-color: #d99a92; }
.tombol:disabled { opacity: .5; cursor: not-allowed; }
.tautan { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
.sebaris { display: inline; }
.sebaris-tombol { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.sebaris-tombol.tengah { justify-content: center; }

.pesan { padding: .8rem 1rem; border-radius: var(--sudut); margin-bottom: 1.25rem; border: 1px solid; font-size: .95rem; }
.pesan-sukses { background: var(--hijau-muda); border-color: #b7dcc6; color: #134a30; }
.pesan-galat { background: var(--merah-muda); border-color: #ecbdb7; color: #7c1b13; }
.pesan-info { background: var(--navy-muda); border-color: var(--navy-sedang); color: var(--navy-tua); }

.daftar { padding-left: 1.2rem; margin: 0 0 1.2rem; }
.daftar li { margin-bottom: .45rem; padding-left: .2rem; }
.kecil { font-size: .87rem; color: var(--tinta-2); }
.label-kecil { font-size: .85rem; color: var(--tinta-2); margin: 0 0 .15rem; }
.angka { font-variant-numeric: tabular-nums; white-space: nowrap; }
.gulir { overflow-x: auto; }

/* Tabel */
.tabel { width: 100%; border-collapse: collapse; margin: .6rem 0 1.2rem; font-size: .94rem; font-variant-numeric: tabular-nums; }
.tabel th, .tabel td { border-bottom: 1px solid var(--garis); padding: .55rem .7rem; text-align: left; vertical-align: top; }
.tabel th { font-weight: 600; font-size: .85rem; color: var(--tinta-2); border-bottom-color: var(--garis-tegas); }
.tabel tbody tr:hover td { background: #fafbfc; }
.tabel-jawaban tr.benar td:nth-child(3) { color: var(--hijau); font-weight: 600; }
.tabel-jawaban tr.salah td:nth-child(3) { color: var(--merah); font-weight: 600; }
.tabel-jawaban tr.kosong td:nth-child(3) { color: var(--tinta-3); }
.kode-akses { font: 600 1rem var(--huruf-kode); letter-spacing: .14em; background: var(--navy-muda); color: var(--navy-tua); padding: .1em .45em; border-radius: 3px; }
.lencana { display: inline-block; font-size: .82rem; font-weight: 500; padding: .1rem .5rem; border-radius: 3px; border: 1px solid var(--garis); background: #fafbfc; color: var(--tinta-2); white-space: nowrap; }
.lencana-teori, .lencana-praktik { background: var(--kuning-muda); border-color: #efd9a8; color: var(--kuning); }
.lencana-jeda { background: var(--navy-muda); border-color: var(--navy-sedang); color: var(--navy-tua); }
.lencana-selesai { background: var(--hijau-muda); border-color: #b7dcc6; color: var(--hijau); }

/* Ringkasan nilai di halaman admin */
.ringkas { display: grid; grid-template-columns: repeat(4, 1fr); margin: 1rem 0; border-top: 1px solid var(--garis); border-bottom: 1px solid var(--garis); }
.ringkas > div { padding: .9rem 1rem .8rem 0; }
.ringkas > div + div { border-left: 1px solid var(--garis); padding-left: 1rem; }
.besar { font: 600 1.7rem/1.2 var(--huruf); margin: .1rem 0 .1rem; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.tugas-nilai { border-top: 1px solid var(--garis); padding-top: .4rem; margin-bottom: 1.2rem; }
.kode-tampil { background: #10192a; color: #e3eaf5; padding: 1rem; border-radius: var(--sudut); overflow: auto; max-height: 420px; font: .86rem/1.55 var(--huruf-kode); white-space: pre; }

/* ── Halaman ujian ───────────────────────────────────────── */
.tata-ujian { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.panel { position: sticky; top: 82px; }
.panel-isi { padding: 1.1rem 1.1rem 1rem; }
.timer { font: 500 2.1rem/1.1 var(--huruf-kode); font-variant-numeric: tabular-nums; margin: 0 0 .7rem; color: var(--navy-tua); letter-spacing: -0.02em; }
.timer.menipis { color: var(--merah); }
.nav-soal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: .7rem 0 .8rem; }
.nav-soal.tiga { grid-template-columns: repeat(3, 1fr); }
.nav-no {
  display: block; text-align: center; padding: .3rem 0; border: 1px solid var(--garis); border-radius: 3px;
  text-decoration: none; color: var(--tinta-2); font-size: .85rem; font-variant-numeric: tabular-nums;
  transition: background-color .15s ease-out, color .15s ease-out;
}
.nav-no:hover { border-color: var(--navy-sedang); color: var(--navy-tua); }
.nav-no.terjawab { background: var(--navy); border-color: var(--navy); color: #fff; }
.status-simpan { font-size: .84rem; color: var(--tinta-2); margin: 0; }
.status-simpan.galat { color: var(--merah); font-weight: 500; }
.pelanggaran-info { font-size: .84rem; color: var(--tinta-2); margin: .5rem 0 0; padding-top: .55rem; border-top: 1px solid var(--garis); font-variant-numeric: tabular-nums; }

/* Lembar soal: satu lembar, soal dipisah garis, nomor di margin */
.daftar-soal { background-color: var(--lembar); border: 1px solid var(--garis); border-radius: var(--sudut); box-shadow: var(--bayang); padding: 1.6rem 1.8rem .6rem; }
.daftar-soal > h1 { padding-bottom: 1rem; margin-bottom: 0; border-bottom: 2px solid var(--tinta); }
.soal { border: 0; border-bottom: 1px solid var(--garis); margin: 0; padding: 1.35rem 0 1.25rem; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: .6rem; min-width: 0; }
.soal legend { display: contents; }
.soal .no { grid-column: 1; grid-row: 1 / span 3; font: 600 1.05rem var(--huruf); color: var(--navy-tua); font-variant-numeric: tabular-nums; padding-top: .05rem; }
.soal .kelompok { grid-column: 2; font-size: .82rem; color: var(--tinta-3); margin-bottom: .2rem; }
.soal .tanya { grid-column: 2; font-weight: 500; margin-bottom: .75rem; }
.soal .opsi { grid-column: 2; display: grid; gap: .3rem; }
.pilihan {
  display: grid; grid-template-columns: auto 1.3rem minmax(0, 1fr); align-items: start; gap: .55rem;
  font-weight: 400; border: 1px solid transparent; border-radius: var(--sudut); padding: .5rem .65rem; margin: 0; cursor: pointer;
  transition: background-color .12s ease-out, border-color .12s ease-out;
}
.pilihan:hover { background: #f7f9fb; border-color: var(--garis); }
.pilihan input { margin: .32rem 0 0; accent-color: var(--navy); width: 1rem; height: 1rem; }
.pilihan:has(input:checked) { background: var(--navy-muda); border-color: var(--navy-sedang); }
.pilihan:has(input:focus-visible) { outline: 2px solid var(--navy); outline-offset: 1px; }
.huruf { font-weight: 600; color: var(--tinta-2); }
.pilihan:has(input:checked) .huruf { color: var(--navy-tua); }
.akhir { text-align: center; border: 0; box-shadow: none; padding: 1.6rem 0 1.4rem; margin: 0; background: transparent; }

/* Halaman teori: soal tidak bisa diblok atau dicetak */
.mode-teori .daftar-soal { -webkit-user-select: none; user-select: none; }
.soal-tertutup .daftar-soal, .soal-tertutup .panel .nav-soal { filter: blur(9px); pointer-events: none; }
@media print { .mode-teori .isi, .mode-teori .kepala { display: none !important; } }

/* Tirai pengawasan dan konfirmasi */
.tirai { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 1.25rem; background: rgba(13, 24, 42, .72); }
.tirai[hidden] { display: none; }
.tirai-kotak { background: var(--lembar); border-radius: var(--sudut); max-width: 470px; width: 100%; padding: 1.8rem 1.8rem 1.6rem; text-align: center; box-shadow: 0 10px 40px rgba(0, 0, 0, .25); animation: muncul .2s ease-out; }
.tirai-kotak h2 { margin: 0 0 .6rem; font-size: 1.25rem; }
.tirai-kotak p { color: var(--tinta-2); }
.tirai-kotak .tombol { margin-top: .4rem; }
.tirai-tanda { display: inline-block; font-size: .85rem; font-weight: 600; color: var(--merah); background: var(--merah-muda); border-radius: 3px; padding: .15rem .55rem; margin-bottom: .8rem; font-variant-numeric: tabular-nums; }
@keyframes muncul { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Praktik */
.tugas h2 { margin-top: 0; }
.tugas .poin { font-size: .85rem; font-weight: 400; color: var(--tinta-2); display: block; margin-top: .15rem; }
.uraian { margin-bottom: 1.2rem; }
.uraian ul, .uraian ol { padding-left: 1.2rem; }
.uraian li { margin-bottom: .3rem; }
.kode-area {
  width: 100%; min-height: 300px; padding: .85rem 1rem; border: 1px solid var(--garis-tegas); border-radius: var(--sudut);
  font: .9rem/1.55 var(--huruf-kode); background: #fbfcfd; color: var(--tinta); tab-size: 4; resize: vertical;
}
.unggah { margin-top: .9rem; }
input[type=file] { font: inherit; font-size: .9rem; color: var(--tinta-2); }
input[type=file]::file-selector-button { font: 500 .88rem var(--huruf); border: 1px solid var(--garis-tegas); background: #fff; color: var(--navy); border-radius: var(--sudut); padding: .4rem .8rem; margin-right: .7rem; cursor: pointer; }
input[type=file]::file-selector-button:hover { background: var(--navy-muda); }

@media (max-width: 860px) {
  .tata-ujian { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
  .panel { position: sticky; top: 70px; z-index: 10; }
  .panel-isi { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; padding: .65rem .9rem; }
  .panel .timer { font-size: 1.45rem; margin: 0; }
  .panel .nav-soal { display: none; }
  .pelanggaran-info { border: 0; padding: 0; margin: 0; }
  .daftar-soal { padding: 1.1rem 1rem .4rem; }
  .soal { grid-template-columns: 2rem minmax(0, 1fr); }
  .ringkas { grid-template-columns: 1fr 1fr; }
  .ringkas > div:nth-child(3) { border-left: 0; padding-left: 0; border-top: 1px solid var(--garis); }
  .ringkas > div:nth-child(4) { border-top: 1px solid var(--garis); }
  .baris-form { grid-template-columns: 1fr; }
  .kartu { padding: 1.15rem; }
}
@media (max-width: 560px) {
  .kepala { position: static; }
  .kepala-isi { padding: .7rem 1rem; }
  .kepala-peserta { display: none; }
  .panel { top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}