/* APLIKASI PDIH UNISSULA — tema resmi "Pilihan A Segilima S3" (disetujui 18 Oktober 2026)
   Hijau UNISSULA #0B5D35 · Emas #E9C46A · Marun PDIH #7A1F2B · Krem #FBF7EC · Hitam teks #1C1C1A
   Huruf: Cinzel (logo dan judul besar) · Atkinson Hyperlegible (semua teks). Teks minimal 18 px, tombol minimal 48 px. */
:root {
  --hijau: #0B5D35; --hijau-1: #0E6B3E; --hijau-2: #064027; --hijau-teks: #0B5D35; --hijau-lembut: #E3F0E8;
  --emas: #E9C46A; --emas-1: #F6DC8C; --emas-2: #D4AA34; --emas-3: #A47E16; --emas-teks: #7A5C0E; --emas-lembut: #FBF1D6;
  --marun: #7A1F2B; --marun-lembut: #F6E4E6; --kuning: #F5D90A;
  --latar: #FBF7EC; --kartu: #FFFFFF; --kartu-2: #F4EFE2; --teks: #1C1C1A; --teks-2: #55524C; --garis: #E2D9C4;
  --sukses: #1B6E47; --peringatan: #8A5A00; --bahaya: #A3262E;
  --bayang: 0 1px 2px rgb(11 93 53 / .06), 0 6px 20px rgb(11 93 53 / .07);
  --huruf: 18px; --jari: 14px;
  --f-judul: 'Cinzel', Georgia, 'Times New Roman', serif;
  --f-teks: 'Atkinson Hyperlegible', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color-scheme: light;
}
:root[data-tema="gelap"] {
  --hijau: #3FB37A; --hijau-teks: #7FD3A6; --hijau-lembut: #16352A;
  --emas-teks: #E9C46A; --emas-lembut: #3A3218; --marun-lembut: #3A1A1E;
  --latar: #10170F; --kartu: #1A231C; --kartu-2: #222D25; --teks: #F1EEE6; --teks-2: #B8B2A6; --garis: #33402F;
  --sukses: #6BCF9B; --peringatan: #E7B550; --bahaya: #F2867E; --bayang: 0 1px 2px rgb(0 0 0 / .5); color-scheme: dark;
}
@media (prefers-color-scheme: dark) { :root:not([data-tema]) {
  --hijau: #3FB37A; --hijau-teks: #7FD3A6; --hijau-lembut: #16352A;
  --emas-teks: #E9C46A; --emas-lembut: #3A3218; --marun-lembut: #3A1A1E;
  --latar: #10170F; --kartu: #1A231C; --kartu-2: #222D25; --teks: #F1EEE6; --teks-2: #B8B2A6; --garis: #33402F;
  --sukses: #6BCF9B; --peringatan: #E7B550; --bahaya: #F2867E; --bayang: 0 1px 2px rgb(0 0 0 / .5); color-scheme: dark; } }
:root[data-ukuran="besar"] { --huruf: 21px; }
:root[data-ukuran="sangat-besar"] { --huruf: 24px; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 400 var(--huruf)/1.55 var(--f-teks); background: var(--latar); color: var(--teks); -webkit-text-size-adjust: 100%; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .45em; }
h1 { font: 700 1.55em/1.2 var(--f-judul); letter-spacing: .3px; }
h2 { font-size: 1.25em; } h3 { font-size: 1.08em; }
p { margin: 0 0 .8em; }
a { color: var(--hijau-teks); }
:focus-visible { outline: 3px solid var(--emas); outline-offset: 2px; border-radius: 6px; }
.lewati { position: absolute; left: -999px; top: 0; background: var(--emas); color: #000; padding: .6em 1em; z-index: 100; }
.lewati:focus { left: 8px; top: 8px; }
.noscript { padding: 2em; text-align: center; }
.ik { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.22em; }
.tersembunyi { display: none !important; }
.kecil { font-size: .88em; color: var(--teks-2); }

/* tombol & isian (tombol selalu berlabel kata, bukan ikon saja) */
button, .tombol {
  font: 700 1em/1.2 var(--f-teks); min-height: 48px; padding: .55em 1.1em; border-radius: var(--jari);
  border: 2px solid var(--hijau); background: var(--hijau); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em; text-decoration: none; white-space: nowrap;
}
button:hover, .tombol:hover { filter: brightness(1.08); }
button.kedua, .tombol.kedua { background: var(--kartu); color: var(--hijau-teks); }
button.kedua:hover { background: var(--hijau-lembut); filter: none; }
button:disabled { opacity: .55; cursor: not-allowed; }
label { display: block; font-weight: 700; margin: 0 0 .35em; }
input, select, textarea { font: inherit; width: 100%; min-height: 52px; padding: .55em .8em; border-radius: var(--jari); border: 2px solid var(--garis); background: var(--kartu); color: var(--teks); }
input:focus, select:focus, textarea:focus { border-color: var(--emas-2); outline: none; }
.bidang { margin-bottom: 1.1em; }
.pesan { padding: .8em 1em; border-radius: var(--jari); margin: 0 0 1em; }
.pesan.galat { background: var(--marun-lembut); border-left: 6px solid var(--marun); }
.pesan.info { background: var(--emas-lembut); border-left: 6px solid var(--emas-2); }
.pesan.oke { background: var(--hijau-lembut); border-left: 6px solid var(--hijau); }

/* memuat */
.memuat { min-height: 70vh; display: grid; place-content: center; text-align: center; color: var(--teks-2); }
.putar { width: 44px; height: 44px; margin: 0 auto 1em; border: 5px solid var(--garis); border-top-color: var(--hijau); border-radius: 50%; animation: putar 1s linear infinite; }
@keyframes putar { to { transform: rotate(360deg); } }
.berputar .ik { animation: putar 1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .putar, .berputar .ik { animation-duration: 3s; } }

/* layar masuk: lengkung hijau–emas */
.masuk { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; position: relative; overflow: hidden;
  background: linear-gradient(165deg, var(--hijau-1) 0%, var(--hijau-2) 100%); }
.masuk::before, .masuk::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.masuk::before { width: 120vmax; height: 120vmax; right: -92vmax; top: -92vmax; border: 14px solid var(--emas-2); opacity: .9; }
.masuk::after { width: 120vmax; height: 120vmax; left: -96vmax; bottom: -96vmax; border: 8px solid var(--emas-1); opacity: .55; }
.masuk .kotak { width: 100%; max-width: 460px; background: var(--kartu); border-radius: 22px; padding: 28px 24px; box-shadow: 0 14px 44px rgb(0 0 0 / .3); border-top: 6px solid var(--emas-2); position: relative; }
.masuk .kepala { text-align: center; margin-bottom: 1.3em; }
.masuk .kepala img { width: 104px; height: 104px; }
.merek-teks { display: flex; flex-direction: column; line-height: 1; }
.merek-teks b { font: 700 1.9em/1 var(--f-judul); color: var(--hijau-teks); letter-spacing: 1px; }
.merek-teks i { font: 700 .85em/1 var(--f-judul); font-style: normal; color: var(--emas-teks); letter-spacing: .38em; margin-top: 5px; }
.masuk .kepala .merek-teks { align-items: center; margin-top: .5em; }
.masuk .kepala p { color: var(--teks-2); margin: .7em 0 0; }
.masuk form button[type=submit] { width: 100%; margin-top: .3em; }
.masuk .kaki { text-align: center; margin-top: 1.1em; color: var(--teks-2); font-size: .92em; }
.lihat-sandi { display: flex; gap: .5em; } .lihat-sandi input { flex: 1; min-width: 0; } .lihat-sandi button { flex: none; }

/* kerangka */
.kerangka { display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 100vh; }
.kerangka > * { min-width: 0; }
.atas { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .7em; padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top));
  background: linear-gradient(90deg, var(--hijau-1), var(--hijau-2)); color: #fff; border-bottom: 3px solid var(--emas-2); }
.atas .merek { display: flex; align-items: center; gap: .55em; color: #fff; text-decoration: none; flex: none; }
.atas .merek img { width: 44px; height: 44px; }
.atas .merek .merek-teks b { color: #fff; font-size: 1.15em; } .atas .merek .merek-teks i { color: var(--emas); font-size: .6em; }
.atas .cari { flex: 1; max-width: 560px; position: relative; }
.atas .cari input { min-height: 46px; border: 0; padding-left: 2.4em; background: #FFFFFF; color: #1C1C1A; }
.atas .cari > .ik { position: absolute; left: .75em; top: 23px; transform: translateY(-50%); color: #55524C; }
.atas .kanan { margin-left: auto; display: flex; gap: .4em; align-items: center; }
.atas button { background: transparent; border-color: rgb(255 255 255 / .55); color: #fff; min-height: 46px; padding: .35em .75em; font-size: .88em; }
.atas button:hover { background: rgb(255 255 255 / .14); filter: none; }
.hasil-cari { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--kartu); color: var(--teks); border: 1px solid var(--garis); border-radius: var(--jari); box-shadow: 0 12px 30px rgb(0 0 0 / .2); max-height: 60vh; overflow: auto; z-index: 40; }
.hasil-cari a, .hasil-cari p { display: block; padding: .65em .9em; margin: 0; color: var(--teks); text-decoration: none; border-bottom: 1px solid var(--garis); }
.hasil-cari a:hover, .hasil-cari a:focus { background: var(--hijau-lembut); }
.hasil-cari small { color: var(--teks-2); display: block; }

.samping { background: var(--kartu); border-right: 1px solid var(--garis); padding: 12px 10px 24px; }
.samping .siapa { padding: 8px 10px 14px; border-bottom: 1px solid var(--garis); margin-bottom: 8px; }
.samping .siapa b { display: block; } .samping .siapa small { color: var(--teks-2); }
.samping nav a { display: flex; align-items: center; gap: .7em; min-height: 50px; padding: .45em .8em; border-radius: 12px; color: var(--teks); text-decoration: none; border: 2px solid transparent; margin-bottom: 3px; }
.samping nav a:hover { background: var(--hijau-lembut); }
.samping nav a[aria-current="page"] { background: var(--emas-lembut); border-color: var(--emas-2); font-weight: 700; }
.samping nav a .ik { color: var(--hijau-teks); }
.samping nav a .tanda { margin-left: auto; font-size: .72em; white-space: nowrap; flex: none; color: var(--teks-2); display: inline-flex; align-items: center; gap: .25em; }
.samping nav a.terkunci { opacity: .6; }
.samping nav a.belum { border: 2px dashed var(--garis); opacity: .8; }
.samping .bawah { margin-top: 14px; padding: 12px 10px 0; border-top: 1px solid var(--garis); display: grid; gap: 8px; }
/* tombol bawah samping tetap di dalam kolom pada huruf besar: kolom tidak melebar mengikuti email yang panjang */
.samping .bawah { grid-template-columns: minmax(0, 1fr); }
.samping .bawah button { width: 100%; min-width: 0; white-space: normal; text-align: center; }
.samping .bawah .kecil { overflow-wrap: anywhere; line-height: 1.4; }
@media (min-width: 900px) {
  .kerangka { grid-template-columns: minmax(320px, 16em) minmax(0, 1fr); } .atas { grid-column: 1 / -1; }
  .samping { position: sticky; top: 66px; align-self: start; height: calc(100vh - 66px); overflow-y: auto; }
  .navbawah { display: none !important; }
}
@media (max-width: 899px) {
  .samping { position: fixed; inset: 0 auto 0 0; width: min(86vw, 340px); z-index: 30; transform: translateX(-105%); transition: transform .2s ease; overflow-y: auto; box-shadow: var(--bayang); padding-top: max(16px, env(safe-area-inset-top)); }
  .samping.buka { transform: none; }
  .tirai { position: fixed; inset: 0; background: rgb(0 0 0 / .45); z-index: 25; }
  .atas .merek .merek-teks, .atas .sembunyi-hp { display: none; }
  main { padding-bottom: 110px !important; }
}
/* menu bawah di ponsel: lima tombol berlabel */
.navbawah { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--kartu); border-top: 3px solid var(--emas-2); padding-bottom: env(safe-area-inset-bottom); }
.navbawah a, .navbawah button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 66px; font: 700 .68em/1.1 var(--f-teks); color: var(--teks); text-decoration: none; background: none; border: 0; border-radius: 0; padding: 4px 2px; white-space: normal; text-align: center; }
.navbawah .ik { width: 1.8em; height: 1.8em; color: var(--hijau-teks); }
.navbawah [aria-current="page"] { background: var(--emas-lembut); box-shadow: inset 0 3px 0 var(--emas-2); }
.navbawah .terkunci { opacity: .5; }

main { padding: 20px 16px 48px; max-width: 1200px; width: 100%; }
@media (min-width: 900px) { main { padding: 28px 32px 56px; } }
.judul-halaman { display: flex; flex-wrap: wrap; gap: .8em; align-items: flex-end; justify-content: space-between; margin-bottom: 1.1em; }
.judul-halaman p { color: var(--teks-2); margin: 0; }
.alat-beranda { display: flex; gap: .6em; align-items: center; flex-wrap: wrap; }
.status-sambung { display: inline-flex; align-items: center; gap: .4em; font-size: .88em; color: var(--teks-2); }
.status-sambung.luring { color: var(--bahaya); font-weight: 700; }
.kartu { background: var(--kartu); border: 1px solid var(--garis); border-radius: 18px; padding: 18px; box-shadow: var(--bayang); }
.kisi { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); margin-bottom: 22px; }
.angka { display: flex; flex-direction: column; gap: .2em; text-decoration: none; color: var(--teks); }
.angka .nilai { font: 700 2em/1.1 var(--f-teks); color: var(--hijau-teks); }
.angka .label { font-weight: 700; } .angka .ket { color: var(--teks-2); font-size: .88em; }
a.kartu:hover { border-color: var(--emas-2); }
.modul { display: flex; gap: .8em; align-items: flex-start; text-decoration: none; color: var(--teks); }
.modul > .ik { width: 2em; height: 2em; color: var(--hijau-teks); }
.modul b { display: block; } .modul small { color: var(--teks-2); display: block; }
.lencana { display: inline-flex; align-items: center; gap: .3em; font-size: .78em; font-weight: 700; padding: .15em .6em; border-radius: 999px; margin-top: .4em; }
.lencana.aktif { background: var(--hijau-lembut); color: var(--hijau-teks); }
.lencana.kunci { background: var(--kartu-2); color: var(--teks-2); }
.lencana.belum { border: 1.5px dashed var(--teks-2); color: var(--teks-2); }
.modul.terkunci { opacity: .62; } .modul.belum { border-style: dashed; border-width: 2px; }
.bagian { margin: 6px 0 22px; } .bagian h2 { display: flex; align-items: center; gap: .45em; font-size: 1.15em; }
.daftar-tenggat { list-style: none; margin: 0; padding: 0; }
.daftar-tenggat li { display: flex; gap: .9em; align-items: center; padding: .65em 0; border-bottom: 1px solid var(--garis); }
.daftar-tenggat li:last-child { border-bottom: 0; }
.daftar-tenggat .tgl { flex: none; width: 4.3em; text-align: center; background: var(--emas-lembut); border-radius: 10px; padding: .3em 0; font-weight: 700; line-height: 1.15; }
.daftar-tenggat .tgl small { display: block; font-weight: 400; font-size: .75em; }
.segera { text-align: center; padding: 40px 18px; }
.pasang { display: flex; gap: 1em; align-items: center; flex-wrap: wrap; justify-content: space-between; margin-bottom: 18px; background: var(--emas-lembut); border-color: var(--emas-2); }
.pasang p { margin: 0; }
.dialog-latar { position: fixed; inset: 0; background: rgb(0 0 0 / .5); display: grid; place-items: center; padding: 16px; z-index: 50; }
.dialog { background: var(--kartu); color: var(--teks); border-radius: 18px; padding: 22px; max-width: 480px; width: 100%; }
.dialog ol { padding-left: 1.3em; } .dialog li { margin-bottom: .5em; }
.pilihan { display: grid; gap: .5em; margin: .6em 0 1em; }
.pilihan button[aria-pressed="true"] { background: var(--emas-lembut); color: var(--teks); border-color: var(--emas-2); }

/* ===== tahap 2: daftar, saringan, tabel, kartu mahasiswa 360°, formulir ===== */
.saring { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 14px; align-items: end; margin-bottom: 18px; }
.saring .bidang { margin: 0; } .saring .bidang.lebar { grid-column: span 2; }
.saring .tombol-saring { display: flex; gap: .5em; flex-wrap: wrap; }
.nav-halaman { display: flex; justify-content: space-between; align-items: center; gap: .8em; flex-wrap: wrap; margin: 10px 0; }
.nav-halaman > span:last-child { display: inline-flex; align-items: center; gap: .6em; }
.gulir { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabel { width: 100%; border-collapse: collapse; background: var(--kartu); border-radius: 14px; overflow: hidden; border: 1px solid var(--garis); }
.tabel th, .tabel td { text-align: left; padding: .6em .75em; border-bottom: 1px solid var(--garis); vertical-align: top; }
.tabel th { background: var(--kartu-2); font-size: .88em; white-space: nowrap; }
.tabel tbody tr:nth-child(even) { background: color-mix(in srgb, var(--kartu-2) 45%, var(--kartu)); }
.tabel tbody tr:hover { background: var(--hijau-lembut); }
.tabel td.angka, .tabel th.angka { text-align: right; white-space: nowrap; }
@media (min-width: 721px) { .tabel td.angka, .tabel th.angka { display: table-cell; } }   /* bukan kotak angka beranda (.angka) */
.tabel td.aksi { text-align: right; white-space: nowrap; }
.tabel a { font-weight: 700; }
.kecil-tombol { min-height: 40px; padding: .3em .8em; font-size: .88em; }
.aksi-kelompok { display: inline-flex; gap: .35em; flex-wrap: wrap; justify-content: flex-end; }
.kosong { color: var(--teks-2); padding: 1em 0; margin: 0; }
.merah { color: var(--bahaya); }
.pita { display: inline-block; font-size: .78em; font-weight: 700; padding: .1em .6em; border-radius: 999px; white-space: nowrap; background: var(--kartu-2); color: var(--teks-2); }
.pita.aktif { background: var(--hijau-lembut); color: var(--hijau-teks); }
.pita.emas { background: var(--emas-lembut); color: var(--emas-teks); }
.pita.marun { background: var(--marun-lembut); color: var(--marun); } :root[data-tema="gelap"] .pita.marun { color: #F2867E; }
@media (prefers-color-scheme: dark) { :root:not([data-tema]) .pita.marun { color: #F2867E; } }
.pita.biru { background: #E3ECF7; color: #1F4E88; } :root[data-tema="gelap"] .pita.biru { background: #1C2C40; color: #9CC3F0; }
@media (prefers-color-scheme: dark) { :root:not([data-tema]) .pita.biru { background: #1C2C40; color: #9CC3F0; } }
@media (max-width: 720px) {   /* tabel menjadi kartu bertumpuk di ponsel */
  .tabel thead { display: none; }
  .tabel, .tabel tbody, .tabel tr, .tabel td { display: block; width: 100%; }
  .tabel tr { border-bottom: 6px solid var(--latar); padding: .4em 0; }
  .tabel td { border: 0; padding: .3em .9em; display: grid; grid-template-columns: 9em 1fr; gap: .6em; text-align: left !important; white-space: normal !important; }
  .tabel td::before { content: attr(data-judul); font-size: .85em; color: var(--teks-2); font-weight: 700; }
  .tabel td.aksi { display: flex; justify-content: flex-end; } .tabel td.aksi::before { display: none; }
  .saring .bidang.lebar { grid-column: 1 / -1; }
}
.jejak-tautan { margin-bottom: .6em; }
.profil { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 16px; border-top: 6px solid var(--emas-2); }
.profil-foto { flex: none; width: 96px; height: 120px; border-radius: 12px; background: var(--hijau-lembut); display: grid; place-items: center; color: var(--hijau-teks); overflow: hidden; }
.profil-foto .ik { width: 48px; height: 48px; } .profil-foto img { width: 100%; height: 100%; object-fit: cover; }
.profil-isi { flex: 1; min-width: 0; } .profil-isi h1 { margin-bottom: .15em; } .profil-pita { line-height: 1.9; }
.profil-aksi { display: flex; gap: .5em; flex-wrap: wrap; margin-top: .5em; }
@media (max-width: 600px) { .profil { flex-direction: column; align-items: center; text-align: center; } .profil-aksi { justify-content: center; } }
.keping { display: flex; gap: .5em; overflow-x: auto; padding: 2px 0 10px; margin-bottom: 6px; position: sticky; top: 66px; background: var(--latar); z-index: 5; }
.keping a { flex: none; padding: .35em .9em; border-radius: 999px; border: 2px solid var(--garis); background: var(--kartu); color: var(--teks); text-decoration: none; font-weight: 700; font-size: .9em; }
.keping a:hover { border-color: var(--emas-2); }
.definisi { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .5em 1.6em; margin: 0; }
.definisi > div { display: grid; grid-template-columns: 10em 1fr; gap: .5em; padding: .35em 0; border-bottom: 1px dashed var(--garis); }
.definisi dt { color: var(--teks-2); font-size: .9em; } .definisi dd { margin: 0; overflow-wrap: anywhere; }
.blok-nim + hr { border: 0; border-top: 1px solid var(--garis); margin: 1em 0; }
.blok-ujian { padding: .7em 0; border-bottom: 1px solid var(--garis); } .blok-ujian:last-child { border-bottom: 0; }
.blok-kepala { display: flex; gap: .5em; align-items: center; flex-wrap: wrap; margin-bottom: .3em; }
.kisi-3 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 14px; }
.kisi-3 .angka { background: var(--kartu-2); border-radius: 14px; padding: 12px 14px; } .kisi-3 .nilai { font-size: 1.35em; }
.rahasia { margin-top: 1.2em; padding: 14px; border-radius: 14px; background: var(--marun-lembut); border: 1px solid var(--marun); }
.rahasia h3 { display: flex; align-items: center; gap: .4em; }
.arsip-lama { margin-top: .8em; } .arsip-lama summary { cursor: pointer; font-weight: 700; color: var(--teks-2); }
.formulir { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 0 16px; }
.formulir .bidang.penuh { grid-column: 1 / -1; } .formulir .bidang { margin-bottom: .9em; }
.formulir small { display: block; margin-top: .25em; }
.wajib { color: var(--bahaya); } .centang { display: flex; align-items: center; gap: .6em; font-weight: 400; } .centang input { width: 1.4em; height: 1.4em; min-height: 0; }
.dialog { max-height: 92vh; overflow-y: auto; }
.dialog-kaki { display: flex; gap: .6em; justify-content: flex-end; flex-wrap: wrap; margin: 1em 0 0; }
button.bahaya { background: var(--marun); border-color: var(--marun); }
.cari-dalam { position: relative; margin-bottom: .8em; } .cari-dalam input { padding-left: 2.4em; }
.cari-dalam > .ik { position: absolute; left: .75em; top: 50%; transform: translateY(-50%); color: var(--teks-2); }
.hasil-pilih { max-height: 50vh; overflow: auto; }
.baris-pilih { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; background: var(--kartu); color: var(--teks); border: 0; border-bottom: 1px solid var(--garis); border-radius: 0; padding: .55em .6em; font-weight: 400; white-space: normal; }
.baris-pilih:hover, .baris-pilih:focus { background: var(--hijau-lembut); filter: none; } .baris-pilih small { color: var(--teks-2); }
.pilih-mhs { display: flex; gap: .6em; align-items: center; justify-content: space-between; min-height: 52px; padding: .3em .3em .3em .8em; border: 2px solid var(--garis); border-radius: var(--jari); }
.unggah-kotak { border: 2px dashed var(--emas-2); border-radius: var(--jari); padding: 12px; background: var(--emas-lembut); }
.unggah-kotak input[type=file] { background: var(--kartu); }
.kecil-memuat { min-height: 120px; }
#beritahu { position: fixed; left: 50%; bottom: max(80px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; width: min(92vw, 520px); display: grid; gap: 6px; pointer-events: none; }
#beritahu .pesan { margin: 0; box-shadow: 0 10px 30px rgb(0 0 0 / .25); }
/* tahap 3 */
.keping-mhs { display: flex; gap: .4em; flex-wrap: wrap; margin-bottom: .5em; }
.hapus-keping { background: none; border: 0; color: inherit; min-height: 0; padding: 0 .2em; font-size: 1.1em; cursor: pointer; }
.daftar-tenggat .pita { margin-left: auto; }
/* susun jadwal */
.cek { border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; border: 2px solid var(--garis); }
.cek.buruk { border-color: var(--marun); background: var(--marun-lembut); } .cek.sedang { border-color: var(--emas-2); background: var(--emas-lembut); } .cek.baik { border-color: var(--hijau); background: var(--hijau-lembut); }
.cek ul { margin: .5em 0 0; padding-left: 1.2em; } .cek li { margin-bottom: .25em; } .cek li.err { color: var(--bahaya); font-weight: 700; } .cek li.info { color: var(--teks-2); }
.baris-rancangan { border: 1px solid var(--garis); border-radius: 14px; padding: 12px; margin-bottom: 12px; background: var(--kartu); }
.br-kepala { display: flex; gap: .6em; align-items: center; flex-wrap: wrap; }
.br-no { background: var(--emas-lembut); border-radius: 999px; min-width: 2em; height: 2em; display: inline-grid; place-items: center; font-weight: 700; }
.br-waktu { white-space: nowrap; } .br-nama { flex: 1; min-width: 200px; }
.br-kepala select { width: auto; min-height: 44px; padding: .3em .6em; }
.br-isi { margin-top: 8px; } .br-isi textarea { margin-bottom: 8px; }
.br-penguji { border-top: 1px dashed var(--garis); padding-top: 8px; }
.br-penguji-kepala { display: flex; gap: .6em; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.pg-baris { display: flex; gap: .5em; align-items: center; flex-wrap: wrap; padding: .3em 0; border-bottom: 1px solid var(--garis); }
.pg-baris:last-child { border-bottom: 0; } .pg-baris.kosong { opacity: .75; } .pg-nama { flex: 1; min-width: 180px; }
.pg-baris select { width: auto; min-height: 40px; padding: .2em .5em; font-size: .9em; }
/* cetak jadwal: templat berkas jadwal PDIH (A4 lanskap 842×595 pt, Times New Roman, margin kiri 47 pt, atas 32 pt) */
.jd-lembar { background: #fff; color: #000; font-family: 'Times New Roman', Times, serif; padding: 32pt 20pt 24pt 47pt; width: 842pt; max-width: 100%; overflow-x: auto; box-sizing: border-box; border-radius: 14px; }
.jd-judul-atas { text-align: center; font-weight: 700; font-size: 12pt; line-height: 14pt; width: 751.6pt; max-width: 100%; margin-bottom: 24pt; }
.jd-tabel { border-collapse: collapse; width: 751.6pt; max-width: 100%; table-layout: fixed; border: 2.2pt solid #000; font-size: 12pt; color: #000; }
.jd-tabel td { border: .5pt solid #000; vertical-align: top; }
.jd-kepala td { border-bottom: 2.2pt solid #000; text-align: center; vertical-align: middle; font-weight: 700; padding: 0 2pt; height: 40pt; }
.jd-bar td { background: #ffff00; border-bottom: 2.2pt solid #000; text-align: center; vertical-align: middle; font-weight: 700; font-size: 11pt; padding: 0; height: 22pt; letter-spacing: .5pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* pita moda ujian: warna berbeda, tidak sama dengan sorotan jenis ujian (kuning/sian/hijau) */
.jd-bar-online td { background: #9dc3e6; } .jd-bar-offline td { background: #f8cbad; } .jd-bar-hybrid td { background: #d9d2e9; }
.jd-baris td { border-bottom: 2.2pt solid #000; line-height: 13.4pt; page-break-inside: avoid; break-inside: avoid; }
.jd-no { text-align: center; padding: 1.5pt 2pt 2pt; }
.jd-nama { text-align: center; padding: 1.5pt 3pt 2pt; font-size: 11.6pt; }
.jd-nama span { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.jd-judul { text-align: center; padding: 1.5pt 2pt 2pt; font-size: 11pt; line-height: 12.7pt; }
.jd-dewan { padding: 1.5pt 4pt 2pt 4pt; line-height: 13.8pt; }
.jd-pg { margin-left: 18pt; text-indent: -18pt; } .jd-pg span { display: inline-block; width: 18pt; text-indent: 0; } .jd-pg.tebal { font-weight: 700; }
@media print { body { background: #fff; } .atas, .samping, .navbawah, .sembunyi-cetak, #beritahu { display: none !important; } .kerangka { display: block; } main { padding: 0; max-width: none; }
  .jd-lembar { border-radius: 0; padding: 0; width: auto; overflow: visible; } .jd-tabel thead { display: table-header-group; } .jd-baris { page-break-inside: avoid; break-inside: avoid; }
  .jd-judul-atas, .jd-tabel { width: 100%; }
  /* tabel cetak mengikuti lebar kertas; kepala tabel diulang tiap halaman; baris tidak terpotong */
  main table { width: 100% !important; max-width: none !important; } main thead { display: table-header-group; } main tr { break-inside: avoid; page-break-inside: avoid; }
  @page { size: A4 landscape; margin: 28pt 40pt 24pt 44pt; } }

.bahaya-teks { color: var(--bahaya) !important; border-color: var(--bahaya) !important; }
.agenda-hari h2 { gap: .6em; flex-wrap: wrap; } .agenda-hari.lewat { opacity: .8; } .agenda-hari.hari-ini .kartu { border-color: var(--emas-2); border-width: 2px; }
.tgl-besar { background: var(--emas-lembut); border-radius: 10px; padding: .05em .45em; font-size: 1.2em; }

.keping a.aktif, .keping a[aria-current="page"] { background: var(--emas-lembut); border-color: var(--emas-2); }

/* ---- bukti pembayaran (tahap 4b) ---- */
.bukti-pratinjau{background:#fff;border:1px solid var(--garis);border-radius:12px;padding:8px;margin:10px 0;overflow:auto}
.bukti-pratinjau img{display:block;width:100%;height:auto;max-width:980px;margin:0 auto}
.bukti-opsi{display:flex;flex-wrap:wrap;gap:8px 24px;margin:6px 0}
.bukti-opsi .cek,.daftar-cek .cek{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
.bukti-opsi input,.daftar-cek input{width:24px;height:24px}
.daftar-cek{display:flex;flex-direction:column;gap:4px;max-height:50vh;overflow:auto;padding:4px 0}
.bukti-aksi{flex-wrap:wrap}
.kw-unduh{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 10px}

/* ---- perkuliahan (tahap 5) ---- */
.radio-hadir{display:flex;flex-wrap:wrap;gap:6px 14px}.radio-hadir .cek{min-height:36px;gap:6px}.radio-hadir input{width:20px;height:20px}
.nilai-isi{width:96px;min-height:40px;text-align:right}
.alat-beranda select{min-height:44px;font-size:1em}

/* ---- tautan isian (tahap 6) ---- */
.hijau { color: var(--sukses); }
button.lebar, .tombol.lebar { width: 100%; }
.isi-publik { min-height: 100vh; display: flex; flex-direction: column; background: var(--latar); }
.isi-kop { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--kartu); border-bottom: 4px solid var(--emas-2); }
.isi-kop img { width: 52px; height: 52px; object-fit: contain; flex: none; }
.isi-kop .isi-unggul { width: 56px; height: 50px; margin-left: auto; }
.isi-kop div { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.isi-kop b { font: 700 1em/1.2 var(--f-judul); color: var(--hijau-teks); letter-spacing: .3px; }
.isi-kop span { font-size: .78em; color: var(--marun); font-weight: 700; }
.isi-badan { width: 100%; max-width: 680px; margin: 0 auto; padding: 16px; flex: 1; outline: none; }
.isi-kaki { text-align: center; font-size: .82em; color: var(--teks-2); padding: 16px; border-top: 1px solid var(--garis); }
.isi-kartu { padding: 20px 18px; border-top: 6px solid var(--hijau); }
.isi-kartu h1 { font-size: 1.35em; }
.isi-jenis { display: inline-block; margin: 0 0 .5em; padding: .15em .7em; border-radius: 999px; background: var(--emas-lembut); color: var(--emas-teks); font-weight: 700; font-size: .85em; }
.isi-rinci { background: var(--kartu-2); border-radius: 12px; padding: .6em .9em; }
.isi-sapa { border-left: 6px solid var(--emas-2); padding: .4em .8em; background: var(--emas-lembut); border-radius: 8px; }
.langkah-kemajuan { display: flex; gap: 6px; margin: 14px 0 4px; }
.langkah-kemajuan span { flex: 1; height: 8px; border-radius: 999px; background: var(--garis); }
.langkah-kemajuan span.aktif { background: var(--hijau); }
.langkah-label { font-weight: 700; color: var(--teks-2); margin-bottom: .6em; }
.langkah-isi h2 { margin-top: .4em; }
.langkah-tombol { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; }
.langkah-tombol button { flex: 1; max-width: 50%; }
.tgl3 { display: grid; grid-template-columns: .9fr 1.5fr 1.25fr; gap: 6px; }
.tgl3 select { padding-left: .5em; padding-right: .2em; }
.dialog h3 { margin-top: 1em; }
.unggah-baris { border: 2px dashed var(--emas-2); background: var(--emas-lembut); border-radius: var(--jari); padding: 12px; margin-bottom: 12px; }
.unggah-baris.terisi, .unggah-baris.selesai { border-style: solid; border-color: var(--hijau); background: var(--hijau-lembut); }
.unggah-baris.sibuk { opacity: .75; }
.unggah-judul { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 8px; }
.unggah-judul small { flex-basis: 100%; }
.catatan-periksa { color: var(--bahaya); font-weight: 700; }
.pilih-berkas { position: relative; width: 100%; white-space: normal; }
.pilih-berkas input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; min-height: 0; }
.unggah-status { margin: .5em 0 0; }
.persetujuan { border: 2px solid var(--garis); border-radius: var(--jari); padding: 12px 14px; background: var(--kartu-2); font-size: .92em; }
.persetujuan .centang { font-weight: 700; margin-top: .6em; }
.ubah-data { border: 1px solid var(--garis); border-radius: 12px; margin-bottom: 8px; background: var(--kartu); }
.ubah-data summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; min-height: 48px; list-style: none; }
.ubah-data summary::-webkit-details-marker { display: none; }
.ubah-data summary span:first-child { font-weight: 700; flex: 1; }
.ubah-data .bidang { padding: 0 12px 4px; }
.tombol-kecil { border: 2px solid var(--hijau); color: var(--hijau-teks); border-radius: 999px; padding: .1em .8em; font-weight: 700; font-size: .85em; }
.ubah-data[open] .tombol-kecil { background: var(--hijau); color: #fff; }
.tanda-terima { text-align: center; }
.centang-besar { width: 84px; height: 84px; border-radius: 50%; background: var(--hijau); color: #fff; display: grid; place-items: center; font-size: 46px; margin: 0 auto 10px; }
.nomor-terima { display: flex; flex-direction: column; gap: 4px; background: var(--emas-lembut); border: 2px solid var(--emas-2); border-radius: 14px; padding: 10px; }
.nomor-terima b { font: 700 1.5em/1.2 var(--f-teks); letter-spacing: .06em; }
.aksi-terima { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.kartu-dalam { background: var(--kartu-2); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; }
.riwayat-kirim { margin: 0; padding-left: 1.2em; font-size: .92em; }
.bagikan-kisi { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: start; }
.qr-kotak { margin: 0; text-align: center; background: #fff; border-radius: 12px; padding: 8px; border: 1px solid var(--garis); }
.qr-kotak img { width: 100%; height: auto; image-rendering: pixelated; display: block; }
.bagikan-kiri { display: grid; gap: 12px; }
.pamflet-kotak img { image-rendering: auto; border-radius: 6px; min-height: 60px; background: var(--garis); }
.pamflet-atur { display: grid; grid-template-columns: 140px 1fr; gap: 14px; align-items: start; }
.pamflet-atur img { width: 140px; height: auto; border-radius: 8px; border: 1px solid var(--garis); }
.pamflet-atur img.tersembunyi + div { grid-column: 1 / -1; }
@media (max-width: 560px) { .pamflet-atur { grid-template-columns: 1fr; } .pamflet-atur img { width: 100%; max-width: 260px; } }
.bagikan-tombol { flex-wrap: wrap; }
.layar-kelas { text-align: center; }
.layar-kelas img { width: min(70vh, 100%); height: auto; image-rendering: pixelated; }
.url-besar { font-size: 1.4em; font-weight: 700; word-break: break-all; }
.pilih-jenis { flex-direction: column; align-items: flex-start; text-align: left; white-space: normal; gap: .2em; }
.pilih-jenis small { font-weight: 400; color: var(--teks-2); }
.pilih-dok { border: 2px solid var(--garis); border-radius: var(--jari); padding: 10px 14px; margin: 0 0 1em; }
.pilih-dok legend { font-weight: 700; padding: 0 .4em; }
.pilih-dok-kisi { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 16px; max-height: 340px; overflow: auto; }
.pilih-dok-baris { display: flex; justify-content: space-between; gap: 8px; align-items: center; border-bottom: 1px solid var(--garis); }
.syarat-baris { display: grid; grid-template-columns: 2fr 1.3fr auto auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.periksa-berkas select { margin-bottom: 6px; }
.atur-tautan h2 { margin-top: 1.2em; } .atur-tautan h2:first-child { margin-top: 0; }
@media (max-width: 640px) {
  .bagikan-kisi { grid-template-columns: 1fr; } .qr-kotak { max-width: 260px; margin: 0 auto; }
  .syarat-baris { grid-template-columns: 1fr 1fr; } .syarat-baris input { grid-column: 1 / -1; }
  .isi-kop span { font-size: .72em; } .isi-kop img { width: 44px; height: 44px; } .isi-kop .isi-unggul { width: 46px; height: 42px; }
}
@media print { .isi-kaki, .aksi-terima, .langkah-tombol { display: none !important; } .isi-publik { min-height: 0; } }

/* ---- verifikasi (tahap 7) ---- */
.ver-kisi .kartu.angka.terpilih { border: 2px solid var(--emas-2); background: var(--emas-lembut); }
.ver-layar h2 { display: flex; flex-wrap: wrap; gap: .4em; align-items: center; }
.ver-atas { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: .6em; }
.ver-nav { display: flex; gap: 6px; }
.ver-dua { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ver-dua > div { background: var(--kartu-2); border-radius: 12px; padding: 10px 14px; }
.ver-calon { display: grid; gap: 6px; margin: .4em 0 .8em; }
.ver-pilih { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; border: 2px solid var(--garis); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.ver-pilih:has(input:checked) { border-color: var(--hijau); background: var(--hijau-lembut); }
.ver-pilih input[type=radio] { width: 22px; height: 22px; min-height: 0; flex: none; margin-top: 2px; }
.ver-pilih input:not([type]) { min-height: 40px; margin-top: 4px; }
.ver-tombol { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; margin-top: 8px; }
.ver-tombol button.besar { min-height: 60px; font-size: 1.1em; }
.pesan.emas-latar { background: var(--emas-lembut); border-left: 6px solid var(--emas-2); }
@media (max-width: 640px) { .ver-kisi { grid-template-columns: 1fr 1fr; gap: 8px; } .ver-kisi .kartu.angka { padding: 10px 12px; } .ver-kisi .nilai { font-size: 1.5em; } .ver-kisi .ket { display: none; }
  .ver-dua { grid-template-columns: 1fr; } .ver-tombol { grid-template-columns: 1fr 1fr; } .ver-tombol button:first-child { grid-column: 1 / -1; } }

/* ---------- Pengaturan (tahap 7b) ---------- */
.panduan summary { cursor: pointer; min-height: 32px; } .panduan ol, .panduan ul { margin: .6em 0 .4em; padding-left: 1.3em; } .panduan li { margin-bottom: .35em; }
.tabel.matriks th, .tabel.matriks td { text-align: center; padding: .45em .5em; }
.tabel.matriks tbody th { text-align: left; font-weight: 700; white-space: normal; min-width: 11em; background: var(--kartu); }
.tabel.matriks thead th { white-space: normal; min-width: 6.5em; vertical-align: bottom; font-size: .82em; }
.tabel.matriks thead a[aria-current] { background: var(--emas-lembut); border-radius: 6px; padding: 0 .3em; }
.tabel.matriks td { font-weight: 700; font-size: .9em; }
.tabel.matriks td.t-tidak-ada { color: var(--teks-2); font-weight: 400; }
.tabel.matriks td.t-lihat { background: color-mix(in srgb, #1F4E88 10%, var(--kartu)); }
.tabel.matriks td.t-usulkan, .tabel.matriks td.t-ubah { background: var(--hijau-lembut); color: var(--hijau-teks); }
.tabel.matriks td.t-setujui, .tabel.matriks td.t-penuh { background: var(--emas-lembut); color: var(--emas-teks); }
.tabel.hak-edit select { min-height: 44px; padding: .3em .6em; }
.tabel.hak-edit tbody th { background: none; white-space: normal; font-weight: 700; }
.ttd-kisi { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.ttd-kartu { display: flex; flex-direction: column; gap: .35em; } .ttd-kartu.redup { opacity: .6; }
.ttd-gambar { height: 120px; display: grid; place-items: center; background: repeating-conic-gradient(var(--kartu-2) 0 25%, var(--kartu) 0 50%) 0 0 / 16px 16px; border-radius: 10px; }
.ttd-gambar img { max-width: 100%; max-height: 110px; object-fit: contain; }
.kop-cetak { display: flex; align-items: center; gap: 12px; border-bottom: 3px solid #1D6B33; padding: 10px 6px 8px; margin-top: .6em; background: #fff; color: #000; font-family: 'Times New Roman', Times, serif; border-radius: 10px 10px 0 0; }
.kop-cetak img { width: 56px; height: 56px; object-fit: contain; flex: none; } .kop-cetak div { flex: 1; text-align: center; line-height: 1.2; }
.kop-cetak b { display: block; color: #1D6B33; font-size: .9em; } .kop-cetak span { font-size: .72em; }
.kop-pita { background: #1D6B33; color: #fff; text-align: right; padding: 2px 10px; font-size: .75em; border-radius: 0 0 10px 10px; margin-bottom: 1em; }
input.centang-kecil { width: 24px; height: 24px; min-height: 0; }
.daftar-tautan { padding-left: 1.2em; margin: .3em 0 0; } .daftar-tautan li { margin-bottom: .4em; }
.tabel.jejak-rinci td { word-break: break-word; max-width: 32em; font-size: .9em; }
@media (max-width: 720px) {
  .tabel.matriks { display: table; width: auto; } .tabel.matriks thead { display: table-header-group; } .tabel.matriks tbody { display: table-row-group; }
  .tabel.matriks tr { display: table-row; border: 0; padding: 0; } .tabel.matriks td, .tabel.matriks th { display: table-cell; width: auto; padding: .4em .45em; }
  .tabel.matriks td::before { display: none; }
  .tabel tbody th { display: block; padding: .5em .9em .1em; border: 0; background: none; white-space: normal; }
}
#bagianAtur > .alat-beranda { margin: 0 0 14px; } #bagianAtur > .panduan, #bagianAtur > .kartu { margin-bottom: 14px; }
@media (max-width: 720px) { .tabel.hak-edit td { grid-template-columns: 5.5em 1fr; align-items: center; } }

/* ---------- Laporan Terpadu (tahap 7c) ---------- */
.bidang .label { display: block; font-weight: 700; margin: 0 0 .35em; }
.lap-alat { margin: 4px 0 10px; } .lap-bagian h2 { margin-top: .4em; }
.tabel.lap th, .tabel.lap td { padding: .45em .6em; } .tabel.lap tfoot th { background: var(--emas-lembut); }
.tabel.lap td.angka, .tabel.lap th.angka { font-variant-numeric: tabular-nums; }
.dt-kisi { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 12px; margin-top: .6em; }
@media (max-width: 720px) {
  .tabel.lap { display: table; width: auto; min-width: 100%; } .tabel.lap thead { display: table-header-group; } .tabel.lap tbody { display: table-row-group; } .tabel.lap tfoot { display: table-footer-group; }
  .tabel.lap tr { display: table-row; border: 0; padding: 0; } .tabel.lap td, .tabel.lap th { display: table-cell; width: auto; padding: .35em .5em; white-space: nowrap; }
  .tabel.lap td::before { display: none; }
}
@media (max-width: 720px) { .tabel.lap td.angka { text-align: right !important; } .tabel.lap td:first-child { white-space: nowrap !important; } .lap-alat { flex-wrap: nowrap; } .lap-alat button { padding: .5em .8em; } }

/* ---------- Kegiatan PDIH (Dokumentasi) (tahap 7d) ---------- */
.tindakan-massal { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.tindakan-massal .centang { margin: 0 auto 0 0; }
code.letak { display: block; padding: .6em .8em; background: var(--kartu-2); border-radius: 10px; word-break: break-all; font-size: .9em; }
.tabel td.pilih { width: 3em; }

/* ---------- Tautan Isian: paket berkas, folder pendaftar, kelengkapan dokumen ---------- */
.paket-kartu { border: 2px solid var(--garis); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.paket-kartu label input, .paket-kartu label select { margin-top: .3em; font-weight: 400; }
.minta-berkas { margin: .4em 0 .8em; } .minta-berkas summary { cursor: pointer; }
.tabel.kelengkapan tr.tanpa-hp td, .tabel.kelengkapan tbody tr.tanpa-hp:hover td { background: color-mix(in srgb, var(--marun) 13%, var(--kartu)); }
.tabel.kelengkapan tr.tanpa-hp td:first-child { box-shadow: inset 5px 0 0 var(--marun); }
@media (max-width: 720px) { .tabel.kelengkapan tr.tanpa-hp { box-shadow: inset 5px 0 0 var(--marun); } .tabel.kelengkapan tr.tanpa-hp td:first-child { box-shadow: none; } }

/* ===== formulir Lainnya: penyusun, isian publik, rekap ===== */
.penyusun h3 { margin: 1.1em 0 .4em; }
.pengisi-atur { border: 1px solid var(--garis); border-radius: var(--jari); padding: .6em 1em .9em; margin: 1em 0; display: grid; gap: .5em; }
.pengisi-atur legend { font-weight: 700; padding: 0 .3em; }
.pilih-pengisi { align-items: flex-start; } .pilih-pengisi span { display: grid; gap: .1em; } .pilih-pengisi small { font-weight: 400; }
.atur-mahasiswa { margin-left: 2em; display: grid; gap: .3em; }
.tanya-kartu { border: 1px solid var(--garis); border-left: 4px solid var(--hijau); border-radius: 10px; background: var(--kartu); padding: .7em .8em; margin: 0 0 .7em; display: grid; gap: .45em; }
.tanya-kartu.tanya-bagian { border-left-color: var(--emas-2); background: var(--emas-lembut); }
.tanya-kepala { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; }
.tanya-kepala select { width: auto; min-width: 0; max-width: 100%; flex: 1 1 14em; }
.tanya-kartu { grid-template-columns: minmax(0, 1fr); } .tanya-kartu > * { min-width: 0; }
.tanya-no { font-weight: 700; min-width: 2em; color: var(--hijau-teks); }
.tanya-alat { display: flex; gap: .3em; margin-left: auto; flex-wrap: wrap; }
.tanya-skala-atur { display: flex; flex-wrap: wrap; gap: .6em; } .tanya-skala-atur label { display: grid; gap: .2em; flex: 1 1 9em; font-weight: 400; }
.tanya-skala-atur select, .tanya-skala-atur input { width: 100%; }
.tanya-tambah { display: flex; flex-wrap: wrap; gap: .5em; }
fieldset.tanya { border: 0; padding: 0; margin: 0 0 1.1em; min-width: 0; }
fieldset.tanya legend { font-weight: 700; padding: 0; margin-bottom: .35em; }
.bidang.tanya { margin-bottom: 1.1em; }
.tanya-nomor { color: var(--hijau-teks); }
.tanya-opsi { display: grid; gap: .45em; margin-top: .3em; }
.tanya-opsi .centang { align-items: flex-start; } .tanya-opsi .centang input[type=radio], .tanya-opsi .centang input[type=checkbox] { flex: none; margin-top: .1em; }
.tanya-lain { flex-wrap: wrap; } .tanya-lain input[type=text] { flex: 1 1 12em; min-width: 0; }
.skala-baris { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: .35em; margin-top: .4em; max-width: 36em; }
.skala-titik { position: relative; } .skala-titik input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.skala-titik span { display: grid; place-items: center; min-height: 48px; border: 2px solid var(--garis); border-radius: 10px; font-weight: 700; background: var(--kartu); }
.skala-titik input:checked + span { background: var(--hijau); border-color: var(--hijau); color: #fff; }
.skala-titik input:focus-visible + span { outline: 3px solid var(--emas); outline-offset: 2px; }
.skala-ujung { display: flex; justify-content: space-between; gap: 1em; max-width: 36em; margin-top: .25em; }
.tanya-kelompok + .tanya-kelompok { border-top: 1px solid var(--garis); margin-top: .6em; padding-top: .3em; }
.rekap-tanya { border-top: 1px solid var(--garis); padding: .4em 0 .8em; } .rekap-tanya h3 { margin: .4em 0 .1em; font-size: 1em; }
.tabel.rekap-batang { margin: .3em 0; } .tabel.rekap-batang td { padding: .3em .5em; vertical-align: middle; }
.tabel.rekap-batang td.angka { display: table-cell; text-align: right; white-space: nowrap; width: 4.5em; font-variant-numeric: tabular-nums; }
.tabel.rekap-batang td.batang-sel { width: 38%; } .batang { display: block; height: 12px; border-radius: 6px; background: var(--hijau); min-width: 2px; }
.rekap-teks { margin: .3em 0 0 1.1em; display: grid; gap: .25em; }
@media (max-width: 720px) {
  .tabel.rekap-batang { display: table; width: 100%; } .tabel.rekap-batang tbody { display: table-row-group; } .tabel.rekap-batang tr { display: table-row; border: 0; padding: 0; }
  .tabel.rekap-batang td { display: table-cell; width: auto; padding: .3em .4em; } .tabel.rekap-batang td::before { display: none; }
  .tabel.rekap-batang td.angka { text-align: right !important; white-space: nowrap !important; width: 3.6em; }
  .tabel.rekap-batang td.batang-sel { width: 30%; min-width: 72px; } .tanya-alat { margin-left: 0; } .atur-mahasiswa { margin-left: 0; }
}
.grup-templat { margin: 1em 0 .4em; font-size: 1em; color: var(--hijau-teks); }
.edom-daftar { display: grid; gap: .4em; max-height: 46vh; overflow: auto; border: 1px solid var(--garis); border-radius: 10px; padding: .5em .7em; }
.edom-baris { align-items: flex-start; padding: .35em 0; border-bottom: 1px solid var(--garis); } .edom-baris:last-child { border-bottom: 0; }
.edom-baris input { flex: none; margin-top: .2em; }
.rekap-bagian { margin: 1.2em 0 .2em; color: var(--hijau-teks); font-size: 1.05em; }
.rekap-ringkas { background: var(--hijau-lembut); border-radius: 10px; padding: .4em .8em .7em; border-top: 0; }

/* ---------- bilah judul jendela aplikasi terpasang (Window Controls Overlay, Chrome/Edge komputer) ---------- */
.judul-jendela { display: none; }
@media (display-mode: window-controls-overlay) {
  .judul-jendela { display: block; position: fixed; z-index: 1000; top: 0; left: 0; right: 0;
    height: env(titlebar-area-height, 34px); line-height: env(titlebar-area-height, 34px); padding-left: calc(env(titlebar-area-x, 0px) + 12px);
    padding-right: calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw) + 12px);
    background: var(--hijau-2); color: #fff; font: 600 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; app-region: drag; -webkit-app-region: drag; user-select: none; }
  body { padding-top: env(titlebar-area-height, 0px); }
  .atas { top: env(titlebar-area-height, 0px); }
}

/* ---------- Mahasiswa: tandai beberapa NIM, ubah status sekaligus ---------- */
.tabel th.tanda, .tabel td.tanda { width: 64px; text-align: center; }
.centang-tanda { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; cursor: pointer; }
.centang-tanda input { width: 1.4em; height: 1.4em; min-height: 0; cursor: pointer; }
.bilah-tanda { display: flex; flex-wrap: wrap; gap: .6em 1.2em; align-items: center; margin: .6em 0; }
.bilah-massal { position: sticky; bottom: calc(69px + env(safe-area-inset-bottom)); z-index: 15; display: flex; flex-wrap: wrap; gap: .6em 1em; align-items: center; justify-content: space-between;
  margin-top: 1em; padding: .8em 1em; border-radius: var(--jari);
  background: var(--hijau-2); color: #fff; box-shadow: 0 -6px 20px rgb(0 0 0 / .18); }
.bilah-massal p { margin: 0; } .bilah-massal p span { opacity: .85; margin-left: .4em; }
.bilah-massal .alat { display: flex; flex-wrap: wrap; gap: .5em; }
.bilah-massal button { background: var(--emas); border-color: var(--emas); color: #1C1C1A; }
.bilah-massal button.kedua { background: transparent; border-color: rgb(255 255 255 / .6); color: #fff; }
@media (min-width: 900px) { .bilah-massal { bottom: 0; border-radius: var(--jari) var(--jari) 0 0; } }

/* ---------- Riwayat ubah status, aksi baris daftar mahasiswa ---------- */
.aksi-baris { display: inline-flex; flex-wrap: wrap; gap: .4em; justify-content: flex-end; }
.blok-riwayat { border: 1px solid var(--garis); border-radius: var(--jari); padding: .8em 1em; margin: .7em 0; background: var(--kartu); }
.blok-riwayat .blok-kepala { display: flex; flex-wrap: wrap; gap: .5em; align-items: center; }
.blok-riwayat p { margin: .35em 0; }
.alat-riwayat { display: flex; flex-wrap: wrap; gap: .5em; }
button.bahaya-garis { color: var(--bahaya); border-color: var(--bahaya); }
.rincian-riwayat { margin-top: .5em; max-height: 50vh; overflow: auto; }

/* Keuangan › buat tagihan sekaligus */
.tagihan-massal h3 { margin: 1em 0 .4em; }
.baris-komp { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 10px; align-items: end; margin-bottom: 8px; }
.baris-komp .bidang { margin: 0; } .baris-komp [data-hapus-komp] { min-height: 48px; }
.daftar-pilih { list-style: none; padding: 0; margin: 0 0 .5em; display: grid; gap: 6px; }
.daftar-pilih li { display: flex; justify-content: space-between; align-items: center; gap: .6em; padding: .4em .7em; border: 1px solid var(--garis); border-radius: 10px; }
@media (max-width: 640px) { .baris-komp { grid-template-columns: 1fr 1fr; } .baris-komp .bidang:first-child { grid-column: 1 / -1; } }
.tagihan-massal .kecil-judul { font-size: 1em; color: var(--teks-2); margin-top: 1.2em; }
.tagihan-massal .pilih-semester { align-items: center; gap: .4em; margin: .4em 0; }
.tagihan-massal td.pilih input { width: 22px; height: 22px; }

/* Keuangan › Surat tagihan */
.st-berkas { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.st-tata { display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.st-kiri h3 { margin: 1em 0 .4em; } .st-kiri details { margin: .8em 0; } .st-kiri summary { cursor: pointer; padding: .3em 0; }
.st-kanan { position: sticky; top: 80px; }
.st-pratinjau { background: #8a8f8c; border-radius: var(--jari); padding: 10px; max-height: calc(100vh - 110px); overflow: auto; }
.st-pratinjau .kosong { color: #fff; }
.st-halbungkus { margin: 0 auto 10px; width: max-content; box-shadow: 0 1px 6px rgb(0 0 0 / .35); }
.st-ed { display: grid; gap: 6px; margin: .3em 0 .6em; }
.st-baris { display: grid; grid-template-columns: minmax(0, 1fr) 150px auto; gap: 6px; align-items: center; }
.st-baris input { min-width: 0; }
@media (max-width: 1100px) { .st-tata { grid-template-columns: 1fr; } .st-kanan { position: static; } }
@media (max-width: 520px) { .st-baris { grid-template-columns: 1fr 120px auto; } }
.st-wa { border-top: 1px solid var(--garis); margin-top: 12px; padding-top: 8px; }
.st-wa h3 { display: flex; align-items: center; gap: 8px; }
.st-wa textarea { width: 100%; font-size: 14px; }
.st-wa-daftar { max-height: 46vh; overflow: auto; border: 1px solid var(--garis); border-radius: 10px; margin: 8px 0; }
.st-wa-baris { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--garis); }
.st-wa-baris:last-child { border-bottom: 0; }
.st-wa-baris input { width: 100%; }
.st-wa-baris.terkirim { background: color-mix(in srgb, #1f8a4c 10%, transparent); }
.galat-teks { color: var(--bahaya); }
@media (max-width: 560px) { .st-wa-baris { grid-template-columns: 1fr auto; } .st-wa-baris > div:nth-child(2) { grid-column: 1 / -1; grid-row: 2; } }

/* Menu Masukan */
.m-pratinjau { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.m-cip { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 92px; font-size: .72rem; text-align: center; }
.m-cip img { width: 92px; height: 70px; object-fit: cover; border-radius: 8px; border: 1px solid var(--garis); }
.m-cip small { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--teks-2); }
.m-cip button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; min-height: 0; padding: 0; border-radius: 50%; }
.m-kartu { border: 1px solid var(--garis); border-radius: 12px; padding: 12px 14px; margin-top: 12px; }
.m-atas { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.m-teks { margin: 8px 0; }
.m-foto { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.m-thumb { width: 96px; height: 74px; padding: 0; overflow: hidden; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.m-thumb img { width: 100%; height: 100%; object-fit: cover; }
.m-memuat { width: 18px; height: 18px; border: 2px solid var(--garis); border-top-color: var(--hijau, #1f6b3b); border-radius: 50%; display: inline-block; animation: m-putar .8s linear infinite; }
@keyframes m-putar { to { transform: rotate(360deg); } }
.m-tanggapan { background: var(--kartu-2); border-radius: 8px; padding: 8px 12px; margin-top: 8px; font-size: .92rem; }
/* sunting langsung komponen tagihan (Koordinator & Pembayaran) */
#tmTarif .ed-komp { width: 100%; min-width: 12rem; font-weight: 600; }
#tmTarif .ed-smt { width: 4.5rem; }
#tmTarif .ed-nom { width: 100%; min-width: 8.5rem; text-align: right; }
@media (max-width: 640px) { #tmTarif .ed-komp { min-width: 0; } #tmTarif .ed-nom { min-width: 0; } }

/* Surat › Buat surat: formulir + pratinjau langsung */
.surat-susun { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; } .surat-susun > * { min-width: 0; } .pratinjau-surat { overflow: hidden; }
@media (min-width: 1100px) { .surat-susun { grid-template-columns: minmax(0, 1fr) minmax(360px, 46%); } .surat-susun .pratinjau-kotak { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; } }
.pratinjau-kotak h2 { font-size: 1.05rem; margin: 0 0 10px; } .pratinjau-kotak h2 .kecil { font-weight: 400; }
.pratinjau-surat { background: #e9e6df; padding: 10px; border-radius: 10px; min-height: 120px; }
.pratinjau-alat { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 8px; } .pratinjau-alat [data-zm-teks] { min-width: 3.2em; text-align: center; }
.pratinjau-surat.diperbesar { overflow: auto; max-height: calc(100vh - 140px); }
@media (min-width: 1100px) { .surat-susun.pratinjau-lebar { grid-template-columns: minmax(0, 1fr) minmax(420px, 62%); } }
.hasil-hal { display: grid; gap: 4px; margin: 6px 0 2px; } .hasil-hal:empty { display: none; }
.hal-pilih { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; background: var(--permukaan, #fff); color: inherit; border: 1px solid var(--garis, #ddd); border-radius: 10px; padding: 8px 12px; min-height: 0; font-weight: 600; }
.hal-pilih:hover, .hal-pilih:focus-visible { border-color: var(--emas-2, #c9a227); background: var(--emas-muda, #fbf3dc); }
.hal-pilih mark { background: #fde68a; color: inherit; padding: 0 1px; border-radius: 2px; } .hal-pilih small { font-weight: 400; }
@media (min-width: 1100px) { .ke-pratinjau { display: none; } }

/* Keuangan › Kwitansi rutin dan kwitansi langsung */
.kwr-rutin { display: grid; gap: 8px; } .kwr-kartu { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; border: 1px solid var(--garis, #ddd); border-radius: 12px; padding: 10px 14px; }
.kwr-kartu.selesai { opacity: .85; } @media (max-width: 640px) { .kwr-kartu { grid-template-columns: 1fr; } }
.dialog-kwr .dialog { width: 100%; }
.kwr { display: grid; gap: 6px; margin: 8px 0; max-height: 52vh; overflow: auto; }
.kwr-baris { display: grid; grid-template-columns: 30px minmax(150px, 2fr) minmax(130px, 2fr) 140px 40px; gap: 6px; align-items: center; }
.kwr-baris.jab { grid-template-columns: 30px minmax(150px, 2fr) minmax(110px, 1.2fr) minmax(130px, 2fr) 140px 40px; }
.kwr-baris input { min-width: 0; } .kwr-kepala { font-weight: 700; font-size: .85rem; position: sticky; top: 0; background: var(--permukaan, #fff); z-index: 1; }
.kwr-komp { grid-column: 2 / -1; margin-top: -2px; } .kwr-no { text-align: right; } .kwr-aksi { justify-content: space-between; align-items: center; } .kwr-total { font-size: 1.05rem; }
@media (max-width: 760px) { .kwr-baris, .kwr-baris.jab { grid-template-columns: 26px 1fr 40px; } .kwr-baris > input:not([data-f="nama"]) { grid-column: 2 / 3; } .kwr-kepala { display: none; } }

/* Mahasiswa › Unggah & selaraskan */
.sl-jatuh { display: block; border: 2px dashed var(--garis, #cbb); border-radius: 14px; padding: 18px; text-align: center; cursor: pointer; } .sl-jatuh.aktif { border-color: var(--emas-2, #c9a227); background: var(--emas-muda, #fbf3dc); }
.sl-jatuh input { display: block; margin: 0 auto 8px; }
.sl-mode { display: grid; gap: 8px; margin-bottom: 8px; } .sl-mode .centang { align-items: flex-start; }
.sl-tab { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; max-width: 100%; overflow: visible; } .sl-tab button { white-space: normal; } .sl-daftar { display: grid; gap: 8px; max-height: 62vh; overflow: auto; padding: 2px 4px 2px 0; }
.sl-item { border: 1px solid var(--garis, #ddd); border-radius: 12px; padding: 10px 12px; display: grid; gap: 4px; } .sl-item.periksa { border-color: #d9a400; background: #fffaf0; }
.sl-ubah { width: 100%; border-collapse: collapse; font-size: .92rem; } .sl-ubah th, .sl-ubah td { text-align: left; padding: 4px 6px; border-top: 1px solid var(--garis, #eee); vertical-align: top; } .sl-ubah td:first-child, .sl-ubah th:first-child { width: 28px; }
.sl-terapkan { background: var(--permukaan, #fff); border-top: 1px solid var(--garis, #ddd); padding-top: 8px; margin-top: 10px; }
.sl-sumber { opacity: .8; } .sl-kandidat { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
@media (max-width: 640px) { .sl-ubah thead { display: none; } .sl-ubah tr { display: grid; grid-template-columns: 28px 1fr; } .sl-ubah td:nth-child(3), .sl-ubah td:nth-child(4) { grid-column: 2; } }
.sl-terapkan p:last-child { display: flex; flex-wrap: wrap; gap: 8px; } .sl-terapkan button { white-space: normal; max-width: 100%; }
.sl-jatuh input { max-width: 100%; } .sl-jatuh { overflow: hidden; }
.putus { overflow-wrap: anywhere; word-break: break-word; min-width: 0; }
#slBanding, #slTerapkan, #slUlang { white-space: normal; max-width: 100%; text-align: left; }
.sl-ubah input[type=checkbox] { width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; } .sl-ubah td, .sl-ubah th { line-height: 1.35; } .sl-ubah td:nth-child(2) { width: 26%; } .sl-ubah td:nth-child(3) { width: 30%; }

/* Dokumen ujian otomatis */
.du-tata{display:grid;grid-template-columns:minmax(260px,1fr) minmax(300px,1.25fr);gap:16px;align-items:start}
.du-isian{grid-template-columns:1fr 1fr}
.du-pratinjau{max-height:70vh;overflow:auto;background:#e9e9e9;padding:10px;border-radius:8px}
.du-tombol{flex-wrap:wrap}
.du-tunggu{margin:0;padding-left:18px}.du-tunggu li{margin:4px 0}
@media (max-width:760px){.du-tata{grid-template-columns:1fr}.du-isian{grid-template-columns:1fr}.du-pratinjau{max-height:none}}

/* Penggunaan tarik tunai */
.tn-judul{text-align:center;margin:0 0 8px;font-size:1rem}
.tn-total{display:grid;grid-template-columns:1fr repeat(3,minmax(90px,auto));gap:12px;justify-items:end;font-variant-numeric:tabular-nums;border-top:2px solid var(--garis,#ccc);padding-top:6px;margin:6px 0 0}
.tn-total span{justify-self:start;font-weight:700}
.tn-pindah{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tn-pindah select{max-width:100%}
@media (max-width:560px){.tn-total{grid-template-columns:1fr auto;gap:4px 10px}.tn-total span{grid-column:1/-1}}
.surat-tombol{flex-wrap:wrap;gap:8px}
.ttd-aksi{display:flex;flex-wrap:wrap;gap:6px;align-items:center}

/* Masukan: tempel tangkapan layar dan ketik dengan suara */
.m-alat { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.m-tempel { display: flex; flex-direction: column; gap: 4px; border: 2px dashed var(--garis, #c9c2b2); border-radius: 10px; padding: 12px; margin-bottom: 8px; cursor: text; }
.m-tempel:focus, .m-tempel.aktif { outline: none; border-color: var(--emas-2, #b8913a); background: var(--emas-lembut, #f6efdc); }
.m-tempel kbd { display: inline; width: auto; font-family: inherit; font-size: .85em; border: 1px solid currentColor; border-radius: 4px; padding: 0 .3em; }
.m-tempel-tombol { margin-top: 4px; }
#mSuara[aria-pressed="true"] { border-color: var(--bahaya, #b42318); color: var(--bahaya, #b42318); }
/* usulan status Lulus; pilihan perihal bawaan */
button.sorot { border-color: var(--emas-2); background: var(--emas-lembut); color: var(--emas-teks); font-weight: 700; }
.lulus-tabel input { width: 100%; min-width: 7em; }
.hasil-hal .hasil-judul { margin: 4px 6px; }
/* pembagi panel yang dapat ditarik (menu samping, formulir–pratinjau) */
.pembagi { display: none; }
@media (min-width: 900px) {
  .kerangka { grid-template-columns: var(--lebar-samping, minmax(320px, 16em)) minmax(0, 1fr); }
  .samping { position: sticky; }
  .pembagi-samping { display: block; position: fixed; top: 66px; bottom: 0; left: calc(var(--lebar-samping-px, 320px) - 5px); width: 10px; z-index: 6; cursor: col-resize; touch-action: none; }
}
.pembagi-samping::after, .pembagi-surat::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-1px); background: transparent; transition: background .15s; }
.pembagi-samping:hover::after, .pembagi-samping:focus-visible::after, .pembagi-samping.aktif::after,
.pembagi-surat:hover::after, .pembagi-surat:focus-visible::after, .pembagi-surat.aktif::after { background: var(--emas-2); }
.pembagi:focus-visible { outline: none; }
@media (min-width: 1100px) {
  .surat-susun.dapat-dibagi { grid-template-columns: minmax(0, 1fr) 14px var(--lebar-pratinjau, minmax(360px, 46%)); column-gap: 2px; }
  .surat-susun.dapat-dibagi.pratinjau-lebar { grid-template-columns: minmax(0, 1fr) 14px var(--lebar-pratinjau, minmax(420px, 62%)); }
  .pembagi-surat { display: block; position: sticky; top: 12px; align-self: start; height: calc(100vh - 24px); cursor: col-resize; touch-action: none; }
  .pembagi-surat span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6px; height: 44px; border-radius: 3px; background: var(--garis); }
}
body.sedang-menarik { cursor: col-resize; user-select: none; }
body.sedang-menarik iframe, body.sedang-menarik .pratinjau-surat { pointer-events: none; }
/* halaman Buat surat memakai seluruh lebar layar agar pratinjau dapat diperbesar; fokus pindah halaman tanpa garis tepi */
main:has(.surat-susun) { max-width: none; }
#isi:focus { outline: none; }
/* pegangan di antara isian dan pratinjau (Surat Tagihan, dokumen ujian) */
@media (min-width: 1101px) { .st-tata.tata-bagi { grid-template-columns: minmax(0, 470px) 12px minmax(0, 1fr); } }
@media (min-width: 761px) { .du-tata.tata-bagi { grid-template-columns: minmax(260px, 1fr) 12px minmax(300px, 1.25fr); } }
.pembagi-tata { position: relative; align-self: stretch; min-height: 120px; cursor: col-resize; touch-action: none; }
.pembagi-tata[hidden] { display: none; }
.pembagi-tata::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-1px); background: transparent; transition: background .15s; }
.pembagi-tata:hover::after, .pembagi-tata:focus-visible::after, .pembagi-tata.aktif::after { background: var(--emas-2); }
.pembagi-tata span { position: sticky; top: 45vh; display: block; margin: 40px auto 0; width: 6px; height: 44px; border-radius: 3px; background: var(--garis); }
.pembagi-tata:focus-visible { outline: none; }
main:has(.st-tata) { max-width: none; }

/* 0.15.1: pratinjau berkas surat di arsip */
.pratinjau-berkas { margin-top: 10px; }
.pratinjau-pdf { width: 100%; height: min(85vh, 1100px); border: 1px solid var(--garis, #ddd); border-radius: 10px; background: #fff; }
.pratinjau-gambar { max-width: 100%; border: 1px solid var(--garis, #ddd); border-radius: 10px; }
/* 0.15.1: ujian akan datang per tanggal, tambah/ubah/keluarkan peserta */
.sesi-dekat + .sesi-dekat { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--garis, #e5dcc5); }
.sesi-kepala { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sesi-kepala h3 { margin: 0; font-size: 1.05rem; }
.alat-peserta { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-left: 8px; }
@media (max-width: 700px) { .daftar-tenggat li { flex-wrap: wrap; } .alat-peserta { margin-left: 0; width: 100%; justify-content: flex-end; } }

/* isian jam 24 jam */
input[data-jam] { font-variant-numeric: tabular-nums; }
input[data-jam][aria-invalid=true] { border-color: var(--bahaya); outline-color: var(--bahaya); }
.sesi-tabel input[data-jam] { width: 6.5em; }

/* menu turun (kartu mahasiswa › Ubah data) */
.menu-turun { position: relative; display: inline-block; }
.menu-turun-isi { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 300px; background: var(--kartu); border: 1px solid var(--garis, #E2D9C2); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 6px; display: flex; flex-direction: column; gap: 4px; text-align: left; }
.menu-turun-isi button { justify-content: flex-start; width: 100%; border: 0; text-align: left; flex-wrap: wrap; }
.menu-turun-isi button small { flex-basis: 100%; font-weight: 400; font-size: .85em; opacity: .8; padding-left: 2em; }
@media (max-width: 600px) { .menu-turun-isi { left: 50%; transform: translateX(-50%); min-width: min(320px, 90vw); } }
.foto-atur { display: flex; gap: 1em; align-items: flex-start; } .foto-atur .profil-foto { width: 120px; height: 160px; }
/* atur urutan sesi ujian */
.urut-sesi { list-style: decimal; margin: .8em 0; padding-left: 1.6em; }
.urut-sesi li { display: flex; flex-wrap: wrap; gap: .4em 1em; align-items: center; padding: .5em .4em; border-bottom: 1px solid var(--garis); }
.urut-sesi li.diubah { background: var(--emas-lembut); border-radius: 8px; }
.urut-sesi .urut-jam { min-width: 8.5em; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.urut-sesi .urut-nama { flex: 1; min-width: 12em; }