/* Tesis MM — gaya mengikuti web Unpam (biru tua + kuning) */
:root {
  --biru: #0B1F8F;
  --biru-tua: #07155F;
  --biru-muda: #E6EAFB;
  --biru-lembut: #F5F7FE;
  --kuning: #EAB308;
  --kuning-lembut: #FFF7DB;
  --kuning-garis: #F2D36B;
  --coklat: #5C3D00;
  --hijau: #1A6E37;
  --hijau-teks: #14632F;
  --hijau-lembut: #E3F4E8;
  --oranye: #C2410C;
  --oranye-teks: #8A3300;
  --oranye-lembut: #FDEBDD;
  --tinta: #1E2433;
  --abu: #5B6475;
  --abu-tua: #3A4152;
  --garis: #E3E6EE;
  --garis-input: #C9CFDD;
  --latar: #F4F6FB;
  --putih: #FFFFFF;
  --radius: 14px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--latar);
  color: var(--tinta);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
a { color: var(--biru); }
a:hover { color: var(--biru-tua); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wadah { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.sempit { width: 100%; margin-left: auto; margin-right: auto; }
.isi > *, .tata-admin > *, .kartu > * { min-width: 0; }
@media (min-width: 720px) { .wadah { padding: 0 24px; } }

.memuat { padding: 64px 16px; text-align: center; color: var(--abu); }

/* ---------- Header ---------- */
.header { background: var(--biru); color: var(--putih); }
.header .wadah {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 20px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px;
}
.merek { display: flex; align-items: center; gap: 12px; color: var(--putih); text-decoration: none; }
.merek img { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.merek-nama { display: flex; flex-direction: column; line-height: 1.15; }
.merek-nama b { font-size: 18px; font-weight: 800; letter-spacing: .04em; }
.merek-nama span { font-size: 12px; color: #D6DCF5; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a {
  color: #D6DCF5; text-decoration: none; padding: 10px 12px; font-size: 15px;
  border-bottom: 3px solid transparent; display: inline-flex; align-items: center; gap: 8px;
}
.nav a[aria-current="page"] { color: var(--putih); font-weight: 600; border-bottom-color: var(--kuning); }
.nav a:hover { color: var(--putih); }
.pengguna { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--kuning); color: var(--tinta);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex: none;
}
.pengguna-teks { display: flex; flex-direction: column; line-height: 1.2; }
.pengguna-teks b { font-size: 14px; font-weight: 600; }
.pengguna-teks span { font-size: 12px; color: #D6DCF5; }
.tombol-keluar {
  background: transparent; color: var(--putih); border: 1px solid rgba(255,255,255,.45);
  border-radius: 8px; min-height: 40px; padding: 0 12px; cursor: pointer; font-size: 14px;
}
.tombol-keluar:hover { background: rgba(255,255,255,.1); }

/* ---------- Pita kuning ---------- */
.pita { background: var(--kuning); color: #2A2A2A; }
.pita .wadah { padding-top: 28px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 8px; }
.pita h1 { font-size: 28px; font-weight: 800; }
.pita p { margin: 0; font-size: 16px; max-width: 680px; }
.pita .label { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #3B2F00; }
@media (min-width: 720px) { .pita h1 { font-size: 34px; } }
.pita-besar .wadah { padding-top: 40px; padding-bottom: 56px; }
.pita-besar h1 { font-size: 34px; letter-spacing: -.02em; }
@media (min-width: 720px) { .pita-besar h1 { font-size: 50px; } }

.isi { padding-top: 24px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 24px; }
.isi-naik { margin-top: -28px; }
.baris { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.baris > * { flex: 1 1 340px; min-width: 0; }

/* ---------- Kartu ---------- */
.kartu {
  background: var(--putih); border: 1px solid var(--garis); border-radius: var(--radius);
  padding: 24px; display: flex; flex-direction: column; gap: 16px;
}
.kartu-timbul { box-shadow: 0 8px 24px rgba(11,31,143,.08); }
.kartu h2 { font-size: 20px; font-weight: 700; color: var(--biru); }
.kartu-kepala { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.kartu-tabel { padding: 0; gap: 0; overflow: hidden; }
.kartu-tabel .kartu-kepala { padding: 20px 24px; border-bottom: 1px solid var(--garis); }
.ket { font-size: 13px; color: var(--abu); margin: 0; }

/* ---------- Form ---------- */
.kolom { display: flex; flex-direction: column; gap: 6px; }
.kolom label, .judul-kolom { font-size: 14px; font-weight: 600; }
.input, .pilih {
  height: 46px; padding: 0 14px; border: 1px solid var(--garis-input); border-radius: 10px;
  font-size: 15px; background: var(--putih); width: 100%;
}
.pilih { padding: 0 12px; }
.input:focus, .pilih:focus, textarea:focus { outline: 3px solid rgba(11,31,143,.25); border-color: var(--biru); }
.input[aria-invalid="true"] { border-color: var(--oranye); }
.kisi { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.kisi-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kotak-biru { padding: 16px; background: var(--biru-lembut); border: 1px solid #D5DBF3; border-radius: 12px; display: flex; flex-direction: column; gap: 10px; }
.kotak-biru .judul-kolom { color: var(--biru); }
.pilihan-peran { display: flex; gap: 10px; flex-wrap: wrap; border: 0; margin: 0; padding: 0; }
.pilihan-peran legend { font-size: 14px; font-weight: 600; margin-bottom: 8px; padding: 0; }
.pilihan-peran label {
  flex: 1 1 150px; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px;
  border: 1px solid var(--garis-input); border-radius: 10px; font-size: 15px; cursor: pointer;
}
.pilihan-peran label:has(input:checked) { border: 2px solid var(--biru); background: #EEF1FC; color: var(--biru); font-weight: 600; }
.sandi { position: relative; }
.sandi .input { padding-right: 84px; }
.sandi button {
  position: absolute; right: 6px; top: 6px; height: 34px; padding: 0 10px; border: 0; border-radius: 8px;
  background: var(--biru-lembut); color: var(--biru); font-size: 13px; font-weight: 600; cursor: pointer;
}

/* ---------- Tombol ---------- */
.tombol {
  min-height: 46px; padding: 0 20px; border: 0; border-radius: 10px; cursor: pointer;
  font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none;
}
.tombol:disabled { opacity: .6; cursor: progress; }
.tombol-utama { background: var(--biru); color: var(--putih); }
.tombol-utama:hover { background: var(--biru-tua); color: var(--putih); }
.tombol-kuning { background: var(--kuning); color: var(--tinta); }
.tombol-hijau { background: var(--hijau); color: var(--putih); }
.tombol-garis { background: var(--putih); color: var(--biru); border: 1px solid var(--biru); }
.tombol-abu { background: var(--putih); color: var(--tinta); border: 1px solid var(--garis-input); }
.tombol-kecil { min-height: 38px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.tombol-penuh { width: 100%; }
.tautan-tombol { background: none; border: 0; padding: 4px; color: var(--biru); text-decoration: underline; cursor: pointer; font-size: 14px; }
.aksi { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Pesan ---------- */
.pesan { display: flex; gap: 12px; align-items: flex-start; border-radius: 10px; padding: 14px 16px; font-size: 14px; line-height: 1.45; }
.pesan b { display: block; margin-bottom: 2px; }
.pesan-kuning { background: var(--kuning-lembut); border: 1px solid var(--kuning-garis); color: var(--coklat); }
.pesan-merah { background: var(--oranye-lembut); color: #6B2800; }
.pesan-biru { background: var(--biru-lembut); color: var(--biru-tua); }
.pesan-hijau { background: var(--hijau-lembut); color: var(--hijau-teks); }
.pesan svg { flex: none; margin-top: 1px; }

/* ---------- Tabel ---------- */
.gulir { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { background: #F7F8FC; text-align: left; color: var(--abu); font-weight: 600; padding: 12px; white-space: nowrap; }
td { padding: 14px 12px; border-top: 1px solid #EDEFF5; vertical-align: middle; }
th:first-child, td:first-child { padding-left: 24px; }
th:last-child, td:last-child { padding-right: 24px; }
td .kecil { font-size: 12px; color: var(--abu); }
.kosong { padding: 32px 24px; text-align: center; color: var(--abu); }

/* ---------- Lencana ---------- */
.lencana {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.lencana-admin { background: var(--tinta); color: var(--putih); }
.lencana-dosen { background: var(--biru-muda); color: var(--biru); }
.lencana-mahasiswa { background: #FFF4CC; color: var(--coklat); }
.lencana-aktif { background: var(--hijau-lembut); color: var(--hijau-teks); }
.lencana-pending { background: var(--kuning-lembut); color: #6B4A00; border: 1px solid var(--kuning-garis); }
.lencana-ditolak { background: var(--oranye-lembut); color: var(--oranye-teks); }
.lencana-uji { border: 1px dashed #8A5A00; color: var(--coklat); border-radius: 6px; }
.lencana-angka { background: var(--kuning); color: var(--tinta); padding: 1px 8px; }

/* ---------- Tab admin ---------- */
.tata-admin { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.menu-samping {
  flex: 1 1 220px; max-width: 100%; background: var(--putih); border: 1px solid var(--garis);
  border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 4px;
}
.menu-samping a {
  display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 0 12px;
  border-radius: 8px; color: var(--tinta); text-decoration: none; font-size: 14px;
}
.menu-samping a:hover { background: var(--biru-lembut); }
.menu-samping a[aria-current="page"] { background: var(--biru); color: var(--putih); font-weight: 600; }
.menu-samping .judul-grup { padding: 14px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--abu); }
.menu-samping .segera { color: var(--abu); font-size: 12px; }
.konten-admin { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }

.saring { display: flex; flex-wrap: wrap; gap: 4px; background: #F0F2F8; border-radius: 8px; padding: 3px; }
.saring button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--abu-tua); font-size: 13px; cursor: pointer; }
.saring button[aria-pressed="true"] { background: var(--putih); color: var(--tinta); font-weight: 700; }

/* ---------- Dialog ---------- */
dialog { border: 0; border-radius: var(--radius); padding: 0; width: min(520px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(7,21,95,.3); }
dialog::backdrop { background: rgba(7,21,95,.35); }
dialog form { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
dialog h2 { font-size: 20px; color: var(--biru); }

/* ---------- Statistik ---------- */
.statistik { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.stat { background: var(--putih); border-radius: 12px; padding: 16px 20px; display: flex; flex-direction: column; gap: 2px; }
.stat span { font-size: 13px; font-weight: 600; color: var(--abu); }
.stat b { font-size: 30px; font-weight: 800; color: var(--biru); }
.stat-biru { background: var(--biru); }
.stat-biru span { color: #D6DCF5; }
.stat-biru b { color: var(--putih); }

/* ---------- Daftar bab ---------- */
.daftar-bab { list-style: none; margin: 0; padding: 0; }
.daftar-bab li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 24px; border-top: 1px solid #EDEFF5; flex-wrap: wrap; }
.daftar-bab b { display: block; }
.daftar-bab span.kecil { font-size: 13px; color: var(--abu); }

/* ---------- Toast ---------- */
#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  background: var(--tinta); color: var(--putih); padding: 12px 18px; border-radius: 10px; font-size: 14px;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: calc(100vw - 32px); z-index: 10;
}
#toast.tampil { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.galat { background: var(--oranye-teks); }

/* ---------- Footer ---------- */
.footer { background: var(--biru-tua); color: #C7CEEE; font-size: 13px; }
.footer .wadah { padding-top: 16px; padding-bottom: 16px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.halaman-penuh { min-height: 100vh; display: flex; flex-direction: column; }
.halaman-penuh .footer { margin-top: auto; }

/* ---------- Modul 2: status review & unggah ---------- */
.lencana .titik { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.lencana-review { background: var(--biru-muda); color: var(--biru); }
.lencana-revisi { background: var(--oranye-lembut); color: var(--oranye-teks); }
.lencana-selesai { background: var(--hijau-lembut); color: var(--hijau-teks); }
.lencana-kosong { background: #F0F1F5; color: #4A5263; }
.lencana-kosong .titik { background: transparent; border: 2px solid currentColor; box-sizing: border-box; }
.lencana-arsip { background: #F0F1F5; color: #4A5263; border: 1px dashed #9AA1B0; }
.lencana-baru { background: var(--oranye); color: var(--putih); }

.zona-unggah {
  border: 2px dashed #9AA6D6; background: var(--biru-lembut); border-radius: 12px; padding: 28px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; cursor: pointer;
  transition: background .15s, border-color .15s; position: relative;
}
.zona-unggah:hover, .zona-unggah.seret { background: #E9EDFC; border-color: var(--biru); }
.zona-unggah:focus-within { outline: 3px solid rgba(11,31,143,.25); }
.zona-unggah b { font-size: 16px; }
.zona-unggah input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-terpilih { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--putih); border: 1px solid var(--garis); border-radius: 10px; padding: 12px 14px; }
.nama-file { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: #F7F8FC; border: 1px solid var(--garis); border-radius: 6px; padding: 2px 6px; word-break: break-all; }

.riwayat { background: #F9FAFD; }
.riwayat td { padding-top: 10px; padding-bottom: 10px; }
.riwayat ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.riwayat li { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--putih); border: 1px solid var(--garis); border-radius: 10px; padding: 10px 14px; }
.baris-sorot td { background: #FFFBEB; }

.matriks { border-collapse: separate; border-spacing: 6px; }
.matriks th, .matriks td { border: 0; padding: 6px 8px; }
.matriks th { background: transparent; text-align: center; }
.matriks th:first-child { text-align: left; }
.sel { border-radius: 8px; text-align: center; height: 44px; font-weight: 600; font-size: 13px; white-space: nowrap; padding: 0 10px !important; }
.sel-selesai { background: var(--hijau); color: var(--putih); }
.sel-review { background: var(--biru); color: var(--putih); }
.sel-revisi { background: #F6C89F; color: #5A2400; }
.sel-kosong { border: 1px dashed #9AA1B0 !important; color: var(--abu); font-weight: 400; }
.legenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: #4A5263; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }

/* Tabel bab jadi kartu di layar HP */
@media (max-width: 640px) {
  .tabel-kartu thead { display: none; }
  .tabel-kartu tr:not(.riwayat) {
    display: grid; grid-template-columns: 1fr auto; gap: 8px 12px;
    grid-template-areas: "bab status" "versi versi" "aksi aksi";
    padding: 16px; border-top: 1px solid #EDEFF5;
  }
  .tabel-kartu tr:not(.riwayat) td { display: block; padding: 0 !important; border: 0; }
  .tabel-kartu td:nth-child(1) { grid-area: bab; }
  .tabel-kartu td:nth-child(2) { grid-area: versi; }
  .tabel-kartu td:nth-child(3) { grid-area: status; }
  .tabel-kartu td:nth-child(4) { grid-area: aksi; }
  .tabel-kartu tr.baris-sorot { background: #FFFBEB; }
  .tabel-kartu tr.riwayat, .tabel-kartu tr.riwayat td { display: block; padding: 0 16px 16px !important; border: 0; }
}

/* ---------- Modul 3: halaman review ---------- */
.tombol-oranye { background: var(--putih); color: var(--oranye-teks); border: 2px solid var(--oranye); }
.tombol-oranye:hover:not(:disabled) { background: var(--oranye-lembut); }
.tombol-garis-hijau { background: var(--putih); color: var(--hijau-teks); border: 1px solid var(--hijau); }
.tombol:disabled:not([class*="utama"]) { cursor: default; }

.review-kepala { background: var(--putih); border-bottom: 1px solid var(--garis); }
.review-kepala .wadah { padding-top: 16px; padding-bottom: 16px; display: flex; flex-direction: column; gap: 12px; max-width: none; }
.review-judul { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.review-judul h1 { font-size: 22px; color: var(--biru); }
.review-alat { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.tautan-kembali { font-size: 14px; font-weight: 600; text-decoration: none; }

.tata-review { display: flex; flex-wrap: wrap; align-items: flex-start; }
.wadah-pdf { flex: 999 1 560px; min-width: 0; background: #E4E7EF; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 16px; min-height: 60vh; }
.halaman-pdf { position: relative; width: 100%; max-width: 860px; background: var(--putih); box-shadow: 0 4px 18px rgba(20,30,60,.15); }
.halaman-pdf canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lapisan-pdf { position: absolute; inset: 0; }
.mode-area .lapisan-pdf { cursor: crosshair; touch-action: none; outline: 3px dashed rgba(234,179,8,.8); outline-offset: -3px; }
.nomor-halaman { position: absolute; left: 8px; bottom: 8px; font-size: 11px; color: var(--abu); background: rgba(255,255,255,.85); padding: 1px 6px; border-radius: 4px; pointer-events: none; }

.penanda { position: absolute; border: 2px solid var(--kuning); background: rgba(234,179,8,.18); border-radius: 4px; padding: 0; cursor: pointer; }
.penanda.aktif { border-color: var(--oranye); background: rgba(194,65,12,.12); box-shadow: 0 0 0 3px rgba(194,65,12,.25); }
.penanda.selesai { border-color: #9AA1B0; background: rgba(154,161,176,.12); }
.penanda.pratinjau { border-style: dashed; border-color: var(--biru); background: rgba(11,31,143,.1); pointer-events: none; }
.pin {
  min-width: 26px; height: 26px; padding: 0 6px; border-radius: 50% 50% 50% 4px; background: var(--oranye); color: var(--putih);
  font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; border: 0; flex: none;
}
.penanda .pin { position: absolute; right: -13px; top: -13px; }
.penanda.selesai .pin, .pin.selesai { background: #7A8193; }
.pin-halaman { position: absolute; right: 8px; cursor: pointer; background: var(--biru); }
.pin-halaman.aktif, .penanda.aktif .pin { box-shadow: 0 0 0 3px rgba(194,65,12,.35); }

.panel-komentar {
  flex: 1 1 360px; min-width: 0; background: var(--putih); border-left: 1px solid var(--garis);
  display: flex; flex-direction: column; position: sticky; top: 0; max-height: 100vh; overflow-y: auto;
}
@media (max-width: 920px) { .panel-komentar { position: static; max-height: none; border-left: 0; border-top: 1px solid var(--garis); } }
.panel-kepala { padding: 16px 20px; border-bottom: 1px solid var(--garis); display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; position: sticky; top: 0; background: var(--putih); z-index: 1; }
.panel-kepala h2 { font-size: 18px; color: var(--biru); }
.wadah-form { padding: 16px 20px; border-bottom: 1px solid var(--garis); }
.form-komentar { display: flex; flex-direction: column; gap: 10px; }
.pilihan-jenis { display: flex; gap: 8px; flex-wrap: wrap; }
.pilihan-jenis label { flex: 1 1 120px; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--garis-input); border-radius: 8px; font-size: 14px; cursor: pointer; }
.pilihan-jenis label:has(input:checked) { border: 2px solid var(--biru); background: #EEF1FC; color: var(--biru); font-weight: 600; }
.daftar-komentar { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.kartu-komentar { border: 1px solid var(--garis); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; }
.kartu-komentar:hover { border-color: #C9CFDD; }
.kartu-komentar:focus-visible { outline: 3px solid rgba(11,31,143,.3); }
.kartu-komentar.aktif { border: 2px solid var(--kuning); background: #FFFCF0; }
.kartu-komentar.selesai { opacity: .8; }
.komentar-kepala { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.komentar-kepala .ket { margin-left: auto; font-size: 12px; }
.komentar-isi { margin: 0; font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.daftar-balas { display: flex; flex-direction: column; gap: 10px; border-left: 3px solid var(--garis-input); padding-left: 12px; }
.balas { display: flex; flex-direction: column; gap: 4px; }
.avatar-kecil { width: 24px; height: 24px; font-size: 10px; }
.form-balas { display: flex; flex-direction: column; gap: 8px; cursor: default; }
.sel-tautan { color: inherit; text-decoration: none; display: flex; align-items: center; justify-content: center; height: 100%; min-height: 44px; }
.sel-tautan:hover { text-decoration: underline; }
@media (max-width: 920px) { .tata-review .panel-komentar { order: -1; } }
.tombol-status { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tombol-status span { font-size: 11px; color: var(--abu); text-align: center; }
.tombol.status-aktif:disabled { opacity: 1; }
.tombol-oranye.status-aktif { background: var(--oranye-lembut); }
.tombol-hijau.status-aktif { background: var(--hijau-lembut); color: var(--hijau-teks); border: 2px solid var(--hijau); }
.pengingat { align-items: center; flex-wrap: wrap; }
.pengingat b { display: block; }
.wadah-pengingat:not(:empty) { padding: 16px 20px 0; }
.wadah-pengingat .pengingat { flex-direction: column; align-items: stretch; }
.wadah-pengingat .pengingat .aksi { justify-content: flex-end; }

/* ---------- Modul 4 ---------- */
.kolom-centang { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.kolom-centang input { margin-top: 3px; width: 18px; height: 18px; }
.kolom-centang span { display: flex; flex-direction: column; gap: 2px; }
.batang-kuota { position: relative; height: 22px; background: #EEF0F5; border-radius: 99px; overflow: hidden; display: flex; }
.garis-ambang { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--oranye); }
.ringkas-arsip { background: var(--biru-lembut); border: 1px solid #D5DBF3; border-radius: 12px; padding: 16px 20px; display: flex; flex-wrap: wrap; gap: 16px 28px; }
.ringkas-arsip > div { display: flex; flex-direction: column; gap: 2px; }
.ringkas-arsip span { font-size: 13px; color: var(--abu); }
.ringkas-arsip b { font-size: 22px; font-weight: 800; color: var(--biru); }
.langkah-arsip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px; }
.langkah-arsip li { flex: 1 1 280px; border: 1px solid var(--garis); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 10px; background: #FAFBFD; }
.langkah-arsip li.aktif { border: 2px solid var(--biru); background: var(--putih); }
.langkah-arsip li.selesai { border-color: var(--hijau); background: var(--hijau-lembut); }
.label-langkah { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--biru); }
.cara-pakai ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.cara-pakai li { line-height: 1.55; }
.tab-peran { display: flex; gap: 8px; flex-wrap: wrap; }
.menu-samping a[aria-current="page"] .segera { color: #FFFFFF !important; }