:root {
  --latar: #f4f6f9; --kartu: #fff; --teks: #1c2430; --redup: #647084; --garis: #dde2ea;
  --utama: #1f5fbf; --utama-gelap: #184c99; --bahaya: #b3261e;
  --ok-latar: #e3f4e8; --ok-teks: #1b6b34; --galat-latar: #fde8e6; --info-latar: #fff5d6; --info-teks: #6b5200;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--latar); color: var(--teks); }
a { color: var(--utama); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.5rem; margin: 0 0 .25rem; }
h2 { font-size: 1.1rem; margin: 0 0 .25rem; }
.redup { color: var(--redup); margin: .25rem 0 .75rem; }
.pra { white-space: pre-wrap; }

.atas { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding: .75rem 1.25rem; background: var(--kartu); border-bottom: 1px solid var(--garis); }
.atas .merek { font-weight: 700; color: var(--teks); }

.sisi { position: fixed; inset: 0 auto 0 0; width: 220px; display: flex; flex-direction: column; gap: 1rem; padding: 1rem .75rem; background: var(--kartu); border-right: 1px solid var(--garis); overflow-y: auto; }
.sisi .merek { font-weight: 700; color: var(--teks); padding: 0 .6rem; }
.sisi nav { display: flex; flex-direction: column; gap: .15rem; flex: 1; }
.sisi nav a, .sisi .akun a { display: block; padding: .45rem .6rem; border-radius: 6px; color: var(--teks); }
.sisi nav a:hover, .sisi .akun a:hover { background: var(--latar); text-decoration: none; }
.sisi a.aktif { background: #e4edfb; color: var(--utama-gelap); font-weight: 600; }
.sisi .akun { border-top: 1px solid var(--garis); padding-top: .75rem; }
.sisi .akun .nama, .sisi .akun .redup { padding: 0 .6rem; margin: 0; }
.sisi .akun .nama { font-weight: 600; overflow-wrap: anywhere; }
.sisi .akun form { padding: .45rem .6rem; }
body.bersisi { padding-left: 220px; }

main { max-width: 1100px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.kepala { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.kartu { background: var(--kartu); border: 1px solid var(--garis); border-radius: 8px; padding: 1.25rem; margin-bottom: 1rem; }
.kartu.sempit { max-width: 420px; margin: 3rem auto; }

.pesan { padding: .65rem .9rem; border-radius: 6px; margin-bottom: 1rem; }
.pesan.ok { background: var(--ok-latar); color: var(--ok-teks); }
.pesan.galat { background: var(--galat-latar); color: var(--bahaya); }
.pesan.info { background: var(--info-latar); color: var(--info-teks); }

input, select, textarea, button, .tombol { font: inherit; padding: .45rem .65rem; border: 1px solid var(--garis); border-radius: 6px; background: #fff; color: var(--teks); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--utama); outline-offset: -1px; }
input[type=checkbox] { width: auto; }
textarea { width: 100%; resize: vertical; }
button, .tombol { cursor: pointer; display: inline-block; white-space: nowrap; }
button:hover, .tombol:hover { background: var(--latar); text-decoration: none; }
.utama { background: var(--utama); border-color: var(--utama); color: #fff; }
.utama:hover { background: var(--utama-gelap); }
.bahaya { color: var(--bahaya); }
.tautan { border: 0; background: none; padding: 0; color: var(--utama); }

.tumpuk { display: flex; flex-direction: column; gap: .85rem; }
.tumpuk label:not(.centang) { display: flex; flex-direction: column; gap: .25rem; font-weight: 600; }
.tumpuk label input, .tumpuk label select, .tumpuk label textarea { font-weight: 400; }
.dua { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.aksi { display: flex; align-items: center; gap: .75rem; }
.centang { display: flex; align-items: center; gap: .35rem; font-weight: 400; white-space: nowrap; }

.baris { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .4rem 0; border-top: 1px solid var(--garis); }
.baris.baru { border-top: 2px solid var(--garis); margin-top: .4rem; padding-top: .75rem; }
.baris .lebar { flex: 1 1 260px; min-width: 0; }
.baris .sedang { flex: 0 1 200px; min-width: 0; }
.baris .kecil { width: 4.5rem; }

table { width: 100%; border-collapse: collapse; background: var(--kartu); border: 1px solid var(--garis); border-radius: 8px; overflow: hidden; }
th, td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--garis); }
th { background: #eef1f6; font-size: .85rem; color: var(--redup); }
tr:last-child td { border-bottom: 0; }

.lencana { font-size: .75rem; font-weight: 600; padding: .15rem .5rem; border-radius: 999px; vertical-align: middle; }
.lencana.draf { background: var(--info-latar); color: var(--info-teks); }
.lencana.dibuka { background: var(--ok-latar); color: var(--ok-teks); }
.lencana.ditutup { background: #e6e9ee; color: var(--redup); }

.lencana.sesuai, .lencana.dipilih, .lencana.st-terpenuhi { background: var(--ok-latar); color: var(--ok-teks); }
.lencana.dipertimbangkan, .lencana.antre, .lencana.st-sebagian { background: var(--info-latar); color: var(--info-teks); }
.lencana.tidak_sesuai, .lencana.gagal, .lencana.st-tidak_terpenuhi { background: var(--galat-latar); color: var(--bahaya); }
.lencana.belum, .lencana.tidak_dipilih, .lencana.st-tidak_ada_info { background: #e6e9ee; color: var(--redup); }

.tautan-kartu { display: block; color: var(--teks); }
.tautan-kartu:hover { border-color: var(--utama); text-decoration: none; }
.sembunyi { position: absolute; left: -9999px; }
.setuju { align-items: flex-start; white-space: normal; }
.setuju input { margin-top: .3rem; }
.bawah-tabel { margin: .75rem 0 .25rem; flex-wrap: wrap; }
.peringatan { color: var(--bahaya); font-size: .85rem; margin-top: .25rem; }
.kecil-teks { font-size: .85rem; }
.pesan.aksi { justify-content: space-between; }
details summary { cursor: pointer; font-weight: 600; }
.kartu table { margin: .75rem 0; }
td { vertical-align: top; }

@media (max-width: 800px) {
  body.bersisi { padding-left: 0; }
  .sisi { position: static; width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--garis); }
  .sisi nav { flex-direction: row; flex-wrap: wrap; }
  .sisi .akun { display: flex; align-items: center; flex-wrap: wrap; border-top: 0; padding-top: 0; }
  .sisi .akun .redup { display: none; }
}

@media (max-width: 640px) {
  .dua { grid-template-columns: 1fr; }
  table { display: block; overflow-x: auto; }
}

.jarak-atas { margin-top: 1rem; }
code { background: var(--latar); padding: .1rem .35rem; border-radius: 4px; }

/* wawancara */
.wawancara { max-width: 720px; margin: 0 auto 1rem; }
.wawancara .soal { font-size: 1.3rem; line-height: 1.4; margin: .25rem 0 .5rem; }
.bingkai-video { position: relative; background: #111; border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; max-height: 60vh; margin: .75rem auto; }
.bingkai-video video { width: 100%; height: 100%; object-fit: contain; display: block; }
.hitung { position: absolute; top: .6rem; right: .6rem; background: rgba(179, 38, 30, .9); color: #fff; font-weight: 700; padding: .2rem .6rem; border-radius: 6px; font-variant-numeric: tabular-nums; }
.hitung.mepet { animation: kedip 1s steps(2) infinite; }
@keyframes kedip { 50% { opacity: .4; } }
.meter { height: 8px; background: #e6e9ee; border-radius: 4px; overflow: hidden; }
#meter-isi { height: 100%; width: 0; background: var(--ok-teks); transition: width .1s; }
#kemajuan { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; }
#kemajuan progress { flex: 1; }
button:disabled { opacity: .5; cursor: not-allowed; }
h3 { font-size: 1rem; margin: 0 0 .4rem; }
.jawaban { border-top: 1px solid var(--garis); padding-top: .75rem; margin-top: .75rem; }
.jawaban video { width: 100%; max-width: 480px; border-radius: 6px; background: #111; }
.lencana.w-selesai { background: var(--ok-latar); color: var(--ok-teks); }
.lencana.w-terkirim, .lencana.w-berlangsung, .lencana.w-antre { background: var(--info-latar); color: var(--info-teks); }
.lencana.w-gagal_kirim { background: var(--galat-latar); color: var(--bahaya); }
.lencana.w-kedaluwarsa, .lencana.w-dibatalkan { background: #e6e9ee; color: var(--redup); }

/* penilaian wawancara dan keputusan */
.skor { font-size: 1.4rem; font-weight: 700; color: var(--utama-gelap); margin-left: .35rem; }
.skor small { font-size: .8rem; font-weight: 400; color: var(--redup); }
.lencana.sk-5, .lencana.sk-4, .lencana.ka-lanjut { background: var(--ok-latar); color: var(--ok-teks); }
.lencana.sk-3 { background: var(--info-latar); color: var(--info-teks); }
.lencana.sk-2, .lencana.sk-1, .lencana.ka-tidak_lanjut { background: var(--galat-latar); color: var(--bahaya); }
.lencana.ka-belum { background: #e6e9ee; color: var(--redup); }
.jawaban details { margin-top: .4rem; }

.siap { font-weight: 600; color: var(--bahaya); font-variant-numeric: tabular-nums; }
.catatan-pengerjaan { color: var(--info-teks); background: var(--info-latar); padding: .3rem .6rem; border-radius: 6px; font-size: .85rem; margin: .3rem 0; }
.lencana.w-dikunci { background: var(--galat-latar); color: var(--bahaya); }