@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('font/plus-jakarta-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('font/plus-jakarta-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('font/plus-jakarta-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('font/plus-jakarta-sans-700.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('font/plus-jakarta-sans-800.woff2') format('woff2'); }
/* Aplikasi Audit MOSSA -- disalin dari gaya SMKP (12 Nov 2026) dgn palet biru navy + oranye keselamatan; gaya mandiri (tidak bergantung Tailwind/Portal). */
:root {
    --hijau: #0b4f8a; --hijau-tua: #0a2540; --hijau-muda: #e7f0fa; --emas: #f59e0b;
    --teks: #1e293b; --redup: #64748b; --garis: #e2e8f0; --latar: #f8fafc; --putih: #fff;
    --baik: #059669; --sedang: #d97706; --kurang: #e11d48; --kosong: #94a3b8;
    --radius: 16px; --bayang: 0 1px 2px rgba(15, 23, 42, .05);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--latar); color: var(--teks); font: 14px/1.5 "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--hijau); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 24px; font-weight: 800; line-height: 1.25; margin: 2px 0 0; color: #1e293b; }
h2 { font-size: 16px; font-weight: 700; margin: 0 0 14px; color: #1e293b; }
.redup { color: var(--redup); } .kecil { font-size: 13px; }
.pecah { overflow-wrap: anywhere; }

/* Kerangka: sidebar + header mengikuti admin web AMIRA (sidebar_tw / header_tw) */
.sisi { position: fixed; inset: 0 auto 0 0; z-index: 50; width: 264px; display: flex; flex-direction: column; background: linear-gradient(180deg, #0d2f55, #071a30); box-shadow: inset -1px 0 0 rgba(255, 255, 255, .05); transition: transform .3s ease; }
.sisi-merek { display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 20px; color: #fff; flex: none; }
.sisi-merek:hover { text-decoration: none; }
.sisi-merek img { width: 36px; height: 36px; object-fit: contain; }
.sisi-merek strong { display: block; font-size: 18px; font-weight: 800; letter-spacing: .03em; line-height: 1.1; }
.sisi-merek small { display: block; font-size: 11px; font-weight: 600; color: #fcd34d; letter-spacing: .04em; }
.sisi-menu { flex: 1; overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; }
.sisi-menu a, .sisi-kaki button { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-radius: 12px; color: #cbd5e1; font-size: 13px; font-weight: 500; line-height: 1.3; transition: background .15s ease, color .15s ease; }
.sisi-menu a:hover { background: rgba(255, 255, 255, .05); color: #fff; text-decoration: none; }
.sisi-menu a.aktif { background: rgba(11, 79, 138, .2); color: #fff; box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .3); }
.sisi-menu a i { font-size: 16px; width: 26px; text-align: center; flex: none; }
.romawi { flex: none; display: grid; place-items: center; width: 26px; height: 24px; border-radius: 7px; background: rgba(255, 255, 255, .08); color: #fcd34d; font-size: 11px; font-weight: 800; }
.sisi-menu a.aktif .romawi { background: #f59e0b; color: #071a30; }
.sisi-judul { margin: 14px 14px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(203, 213, 225, .5); }
.sisi-kaki { border-top: 1px solid rgba(255, 255, 255, .05); padding: 12px; margin: 0; flex: none; }
.sisi-kaki button { width: 100%; border: 0; background: none; font-family: inherit; cursor: pointer; color: #fda4af; }
.sisi-kaki button:hover { background: rgba(244, 63, 94, .1); color: #fecdd3; }
.sisi-kaki button i { font-size: 16px; width: 26px; text-align: center; }
.sisi-lapis { display: none; position: fixed; inset: 0; z-index: 40; background: rgba(15, 23, 42, .5); backdrop-filter: blur(4px); }
.atas { position: fixed; top: 0; right: 0; left: 264px; z-index: 30; height: 64px; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: rgba(255, 255, 255, .85); backdrop-filter: blur(8px); border-bottom: 1px solid var(--garis); transition: left .3s ease; }
.atas-tombol { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 8px; background: none; color: #475569; font-size: 24px; cursor: pointer; flex: none; }
.atas-tombol:hover { background: #f1f5f9; }
.atas-judul { margin: 0; font-size: 16px; font-weight: 700; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atas-saya { margin-left: auto; display: flex; align-items: center; gap: 10px; padding: 5px 10px 5px 5px; border-radius: 12px; color: #1e293b; flex: none; }
.atas-saya:hover { background: #f1f5f9; text-decoration: none; }
.atas-inisial { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--hijau); color: #fff; font-weight: 800; }
.atas-nama strong { display: block; font-size: 13px; font-weight: 700; line-height: 1.2; } .atas-nama small { display: block; font-size: 11px; color: var(--redup); }
body:not(.hal-masuk) .isi { margin-left: 264px; padding-top: 88px; max-width: none; transition: margin-left .3s ease; }
/* (sidebar ciut: lihat aturan "rel ikon" di akhir berkas) */
.masuk-logo { display: block; width: 72px; height: 72px; object-fit: contain; margin: 0 auto 10px; }

.isi { padding: 24px; }
.kepala-hal { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.remah { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hijau); } .remah a { color: var(--redup); }
.kode-besar { color: var(--hijau); }
.judul-bagian { margin: 28px 0 12px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--redup); }
.pilih-tahun { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--redup); }
.pilih-tahun label { margin: 0; }

/* Kartu */
.kartu { background: var(--putih); border: 1px solid var(--garis); border-radius: var(--radius); padding: 20px; box-shadow: var(--bayang); margin-bottom: 16px; }
.kartu.tanpa-pad { padding: 0; overflow: hidden; }
.angka-utama { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 16px; }
.angka-utama .kartu { margin: 0; }
.angka .label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--redup); }
.angka strong { display: block; font-size: 38px; line-height: 1.15; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.angka .sub, .elemen .sub { font-size: 13px; color: var(--redup); }
.kisi-elemen { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.elemen { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; color: var(--teks); transition: transform .15s ease, box-shadow .15s ease; }
.elemen:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 2px 4px rgba(15, 23, 42, .06), 0 14px 30px rgba(15, 23, 42, .09); }
.elemen-kode { grid-row: span 2; display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 8px; border-radius: 12px; background: var(--hijau-muda); color: var(--hijau); font-weight: 800; }
.elemen-nama { font-weight: 700; line-height: 1.25; align-self: center; }
.elemen-pct { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.elemen progress, .elemen .sub { grid-column: 1 / -1; }

/* Batang kemajuan (elemen <progress> asli -- tanpa style="" inline, patuh CSP) */
progress { appearance: none; -webkit-appearance: none; width: 100%; height: 8px; border: 0; border-radius: 99px; background: var(--garis); overflow: hidden; display: block; }
progress::-webkit-progress-bar { background: var(--garis); border-radius: 99px; }
progress::-webkit-progress-value { background: var(--kosong); border-radius: 99px; }
progress::-moz-progress-bar { background: var(--kosong); border-radius: 99px; }
.nada-baik progress::-webkit-progress-value { background: var(--baik); } .nada-baik progress::-moz-progress-bar { background: var(--baik); }
.nada-sedang progress::-webkit-progress-value { background: var(--sedang); } .nada-sedang progress::-moz-progress-bar { background: var(--sedang); }
.nada-kurang progress::-webkit-progress-value { background: var(--kurang); } .nada-kurang progress::-moz-progress-bar { background: var(--kurang); }
.nada-baik > strong, .nada-baik .elemen-pct, .nada-baik .batang-baris span { color: var(--baik); }
.nada-sedang > strong, .nada-sedang .elemen-pct, .nada-sedang .batang-baris span { color: var(--sedang); }
.nada-kurang > strong, .nada-kurang .elemen-pct, .nada-kurang .batang-baris span { color: var(--kurang); }
.batang-baris { display: flex; align-items: center; gap: 10px; } .batang-baris span { flex: none; width: 58px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.ringkas-elemen { display: grid; grid-template-columns: auto 220px 1fr auto; align-items: center; gap: 16px; margin-bottom: 16px; }
.ringkas-elemen > strong { font-size: 26px; font-variant-numeric: tabular-nums; }
.ringkas-elemen > span { color: var(--redup); font-size: 14px; }
.saringan { display: flex; gap: 6px; }
.saringan a { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--garis); background: #fff; color: var(--teks); font-size: 13px; font-weight: 600; }
.saringan a.aktif { background: var(--hijau); border-color: var(--hijau); color: #fff; }
.saringan a:hover { text-decoration: none; }

/* Tabel */
.gulir { overflow-x: auto; }
.tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabel th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--redup); background: #f8fafc; padding: 11px 14px; border-bottom: 1px solid var(--garis); white-space: nowrap; }
.tabel td { padding: 11px 14px; border-bottom: 1px solid var(--garis); vertical-align: middle; }
.tabel tr:last-child td { border-bottom: 0; }
.tabel tbody tr:hover { background: #f8fafd; }
.angka-sel { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lebar-batang { min-width: 220px; }
.kol-kode { width: 86px; font-weight: 700; color: var(--hijau); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kol-aksi { text-align: right; white-space: nowrap; }
.kol-aksi form.sebaris { display: inline; }
.tabel-kriteria td a { color: var(--teks); font-weight: 600; }
.tabel-kriteria td.tingkat-1 { padding-left: 34px; } .tabel-kriteria td.tingkat-1 a, .tabel-kriteria td.tingkat-2 a { font-weight: 500; }
.tabel-kriteria td.tingkat-2 { padding-left: 54px; }
.baris-na td { color: var(--kosong); } .baris-na td a { color: var(--kosong); }
.kosong { text-align: center; color: var(--redup); padding: 22px; margin: 0; }
.tautan-luar { white-space: nowrap; font-weight: 600; }
.tabel-kriteria td .tautan-luar { color: var(--hijau); }

.lencana { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 99px; background: var(--hijau-muda); color: var(--hijau); font-size: 12px; font-weight: 700; white-space: nowrap; }
.lencana.hijau { background: #d1fae5; color: #047857; } .lencana.merah { background: #ffe4e6; color: #be123c; } .lencana.abu { background: #f1f5f9; color: var(--redup); }
.hitung { display: inline-block; min-width: 24px; padding: 1px 8px; border-radius: 99px; background: var(--hijau-muda); color: var(--hijau); font-size: 13px; text-align: center; }

/* Tombol & isian */
.tombol { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--garis); background: #fff; color: var(--teks); font: inherit; font-weight: 600; cursor: pointer; }
.tombol:hover { background: #f8fafc; text-decoration: none; }
.tombol.utama { background: var(--hijau); border-color: var(--hijau); color: #fff; } .tombol.utama:hover { background: #093f6e; }
.tombol.kecil { padding: 6px 11px; font-size: 13px; border-radius: 8px; }
.tombol.bahaya { color: var(--kurang); } .tombol.bahaya:hover { background: #fff1f2; border-color: #fecdd3; }
.tombol.lebar { width: 100%; margin-top: 18px; padding: 11px; }
.tombol:disabled { opacity: .55; cursor: not-allowed; }
.tombol.wa { background: #25d366; border-color: #25d366; color: #fff; margin-top: 10px; } .tombol.wa:hover { background: #1ebe5b; }
label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 5px; }
input[type=text], input[type=password], select { width: 100%; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 10px; font: inherit; background: #fff; color: var(--teks); }
.pilih-tahun select { width: auto; padding: 7px 10px; font-weight: 700; }
input:focus, select:focus, .tombol:focus-visible, a:focus-visible { outline: 3px solid rgba(11, 79, 138, .28); outline-offset: 1px; border-color: var(--hijau); }
.pesan { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; font-size: 14px; margin-bottom: 12px; }
.pesan.galat { background: #fff1f2; color: #9f1239; } .pesan.sukses { background: #ecfdf5; color: #065f46; } .pesan.info { background: #eff6ff; color: #1e40af; }
.pesan.peringatan { background: #fffbeb; color: #92400e; border: 1px solid #fcd34d; } .pesan.peringatan a { color: inherit; font-weight: 700; text-decoration: underline; }

/* Rincian & berkas */
.dua-kolom { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.dua-kolom.sempit { grid-template-columns: 1fr 1fr; max-width: 900px; }
.rinci { display: grid; grid-template-columns: 130px 1fr; gap: 8px 12px; margin: 0; font-size: 14px; }
.rinci dt { color: var(--redup); } .rinci dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.daftar-berkas, .antrean { list-style: none; margin: 0; padding: 0; }
.daftar-berkas li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--garis); }
.daftar-berkas li:last-child { border-bottom: 0; }
.ikon-berkas { font-size: 26px; color: var(--hijau); flex: none; }
.berkas-isi { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.berkas-nama { font-weight: 700; color: var(--teks); overflow-wrap: anywhere; }
.berkas-ket { font-size: 14px; }
.zona-unggah { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; padding: 26px 16px; border: 2px dashed #94a3b8; border-radius: var(--radius); background: #f8fafc; text-align: center; cursor: pointer; font-weight: 400; transition: background .15s ease, border-color .15s ease; }
.zona-unggah i { font-size: 34px; color: var(--hijau); } .zona-unggah strong { font-size: 15px; } .zona-unggah span { font-size: 13px; color: var(--redup); }
.zona-unggah input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.zona-unggah.seret, .zona-unggah:hover { background: var(--hijau-muda); border-color: var(--hijau); }
.antrean li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--garis); font-size: 14px; }
.antrean li progress { grid-column: 1 / -1; height: 6px; }
.antrean li progress::-webkit-progress-value { background: var(--hijau); } .antrean li progress::-moz-progress-bar { background: var(--hijau); }
.antrean .nama { overflow-wrap: anywhere; font-weight: 600; }
.antrean .status { font-size: 13px; color: var(--redup); white-space: nowrap; }
.antrean li.gagal .status { color: var(--kurang); white-space: normal; text-align: right; } .antrean li.selesai .status { color: var(--baik); }

/* Halaman masuk */
.hal-masuk { background: linear-gradient(160deg, var(--hijau-tua), #0a4275 60%, var(--hijau)); min-height: 100vh; }
.hal-masuk .isi { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.kartu-masuk { width: 100%; max-width: 400px; background: #fff; border-radius: 20px; padding: 30px; box-shadow: 0 30px 80px rgba(0, 0, 0, .3); }
.masuk-kop { text-align: center; margin-bottom: 18px; } .masuk-kop h1 { margin: 0 0 4px; } .masuk-kop p { margin: 0; color: var(--redup); font-size: 13px; }
.masuk-catatan { margin: 18px 0 0; font-size: 12px; color: var(--redup); text-align: center; }

@media (max-width: 900px) {
    .angka-utama { grid-template-columns: 1fr 1fr; } .angka-utama .kartu:first-child { grid-column: 1 / -1; }
    .dua-kolom, .dua-kolom.sempit { grid-template-columns: 1fr; }
    .ringkas-elemen { grid-template-columns: auto 1fr; } .ringkas-elemen .saringan { grid-column: 1 / -1; flex-wrap: wrap; }
    .isi { padding: 16px; } h1 { font-size: 21px; }
    .tabel th, .tabel td { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.rinci .tautan-luar { white-space: normal; }
.dua-kolom > * { min-width: 0; }

/* Formulir (ganti kata sandi dll.) -- jarak antar isian & tombol yang lega */
.isian { margin-top: 18px; } .isian:first-of-type { margin-top: 4px; }
.isian label { margin: 0 0 6px; }
.sandi-bungkus { position: relative; }
.sandi-bungkus input { padding-right: 46px; height: 46px; }
.lihat-sandi { position: absolute; top: 0; right: 0; width: 46px; height: 46px; display: grid; place-items: center; border: 0; background: none; color: var(--redup); font-size: 18px; cursor: pointer; border-radius: 0 10px 10px 0; }
.lihat-sandi:hover { color: var(--hijau); }
.syarat { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; padding: 0; font-size: 13px; color: var(--redup); }
.syarat li { display: inline-flex; align-items: center; gap: 6px; } .syarat i { font-size: 12px; }
.syarat li.ok { color: var(--baik); font-weight: 600; }
.cocok { margin: 8px 0 0; min-height: 20px; font-size: 13px; font-weight: 600; }
.cocok.ok { color: var(--baik); } .cocok.beda { color: var(--kurang); }
.aksi-form { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--garis); display: flex; justify-content: flex-end; }
.aksi-form .tombol { padding: 11px 20px; }
.kartu > h2 { padding-bottom: 12px; border-bottom: 1px solid var(--garis); }
.kartu .pesan { margin-top: 4px; }
.dua-kolom.sempit { gap: 20px; }
@media (max-width: 900px) { .aksi-form .tombol { width: 100%; } }

/* Sidebar di layar sempit: tersembunyi, dibuka lewat tombol menu (pola admin web AMIRA) */
@media (max-width: 1023px) {
    .sisi { transform: translateX(-100%); }
    .atas { left: 0; } body:not(.hal-masuk) .isi { margin-left: 0; padding-top: 80px; }
    body.sisi-buka .sisi { transform: none; } body.sisi-buka .sisi-lapis { display: block; }
    .atas-nama { display: none; }
}

/* Kartu "Per elemen": ketujuh elemen dalam SATU baris di layar lebar (diminta pengguna).
   Kartu disusun tegak & tingginya disamakan supaya nama elemen yang panjang tetap rapi. */
.kisi-elemen { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.kisi-elemen .elemen { display: flex; flex-direction: column; gap: 6px; padding: 16px 14px; }
.kisi-elemen .elemen-kode { min-width: 0; width: 38px; height: 34px; border-radius: 10px; font-size: 13px; }
.kisi-elemen .elemen-nama { align-self: stretch; flex: 1; font-size: 13px; line-height: 1.3; }
.kisi-elemen .elemen-pct { font-size: 20px; }
.kisi-elemen .elemen .sub { font-size: 11.5px; line-height: 1.35; }
@media (max-width: 1400px) { .kisi-elemen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .kisi-elemen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Baris tabel "Per PIC" bisa diklik -> daftar kriteria PIC itu */
.baris-klik { cursor: pointer; } .baris-klik:hover { background: var(--hijau-muda) !important; }
.tautan-baris { color: var(--teks); display: inline-flex; align-items: center; gap: 8px; } .tautan-baris:hover { text-decoration: none; color: var(--hijau); }
.tautan-baris i { font-size: 11px; color: var(--kosong); }
.judul-bagian a { color: inherit; } .judul-bagian a:hover { color: var(--hijau); text-decoration: none; }
.judul-bagian .hitung { letter-spacing: 0; margin-left: 6px; }

/* Eviden berkelompok per nama eviden + formulir unggah berbaris (satu baris = satu eviden) */
.grup-eviden { border: 1px solid var(--garis); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.grup-kepala { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #f8fafc; border-bottom: 1px solid var(--garis); }
.grup-kepala > i { color: var(--emas); font-size: 18px; } .grup-kepala strong { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.grup-kepala .hitung { flex: none; font-size: 12px; font-weight: 700; }
.grup-eviden .daftar-berkas { padding: 0 14px; }
.petunjuk-unggah { margin: 0 0 14px; }
.baris-eviden { border: 1px solid var(--garis); border-radius: 12px; padding: 14px; margin-bottom: 12px; background: #fcfdfd; }
.baris-kepala { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .baris-kepala label { margin: 0; }
.baris-eviden input[type=text].salah { border-color: var(--kurang); background: #fff1f2; }
.zona-unggah.kecil { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 4px 10px; padding: 14px; margin-top: 10px; }
.zona-unggah.kecil i { font-size: 20px; } .zona-unggah.kecil strong { font-size: 14px; }
.baris-eviden .antrean li { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 0; }
.antrean .kanan { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.tombol-buang { border: 0; background: none; color: var(--redup); cursor: pointer; padding: 2px 4px; border-radius: 6px; font-size: 16px; line-height: 1; } .tombol-buang:hover { background: #fee2e2; color: var(--kurang); }
.antrean li.selesai .tombol-buang { display: none; }
.aksi-unggah { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.pesan-unggah { margin: 12px 0 6px; min-height: 20px; font-size: 14px; font-weight: 600; color: var(--redup); }
.pesan-unggah.galat { color: var(--kurang); } .pesan-unggah.sukses { color: var(--baik); }
@media (max-width: 900px) { .aksi-unggah .tombol { flex: 1; } .grup-kepala { flex-wrap: wrap; } }

/* Pratinjau berkas (jendela lapis) + tombol lihat/batal di antrean unggah */
.pratinjau { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; padding-top: calc(24px + env(safe-area-inset-top, 0px)); padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); background: rgba(15, 23, 42, .72); backdrop-filter: blur(4px); }
.pratinjau-kotak { width: min(1100px, 100%); height: min(88vh, 100%); display: flex; flex-direction: column; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .4); }
.pratinjau-kepala { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--garis); }
.pratinjau-kepala strong { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pratinjau-badan { flex: 1; min-height: 0; display: grid; place-items: center; background: #0f172a; }
.pratinjau-badan iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.pratinjau-badan img { max-width: 100%; max-height: 100%; object-fit: contain; }
body.ada-pratinjau { overflow: hidden; }
/* Modal dialog (pengganti confirm/prompt/alert bawaan peramban; smkp.js dialog()) */
.dialog-lapis { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(15, 23, 42, .55); backdrop-filter: blur(4px); animation: dialogmuncul .15s ease-out; }
.dialog-kotak { width: min(440px, 100%); background: #fff; border-radius: 16px; padding: 22px 22px 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); border-top: 4px solid var(--hijau); }
.dialog-kotak.bahaya { border-top-color: var(--kurang); }
.dialog-kotak h2 { margin: 0 0 10px; font-size: 17px; display: flex; align-items: center; gap: 8px; color: var(--teks); }
.dialog-kotak h2 .bi { color: var(--hijau); } .dialog-kotak.bahaya h2 .bi { color: var(--kurang); }
.dialog-kotak p { margin: 0 0 6px; color: var(--redup); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.dialog-kotak input { width: 100%; box-sizing: border-box; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--garis); border-radius: 10px; font: inherit; color: var(--teks); }
.dialog-kotak input:focus { outline: 2px solid var(--hijau); outline-offset: 1px; border-color: var(--hijau); }
.dialog-label { display: block; margin: 12px 0 0; font-size: 13px; font-weight: 600; color: var(--teks); }
.dialog-label + input { margin-top: 4px; }
.dialog-pilihan { display: grid; gap: 10px; margin-top: 14px; }
.dialog-pilih { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 14px; text-align: left; background: #fff; border: 1px solid var(--garis); border-radius: 12px; font: inherit; color: var(--teks); cursor: pointer; }
.dialog-pilih:hover, .dialog-pilih:focus-visible { border-color: var(--hijau); background: var(--hijau-muda); outline: none; }
.dialog-pilih .bi { font-size: 24px; color: var(--hijau); line-height: 1; margin-top: 2px; }
.dialog-pilih span { display: flex; flex-direction: column; gap: 2px; } .dialog-pilih strong { font-size: 15px; } .dialog-pilih small { color: var(--redup); font-size: 13px; line-height: 1.4; }
.dialog-aksi { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.tombol.hapus-tegas { background: var(--kurang); border-color: var(--kurang); color: #fff; } .tombol.hapus-tegas:hover { filter: brightness(.92); }
body.ada-dialog { overflow: hidden; }
@keyframes dialogmuncul { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 900px) { .dialog-kotak input { font-size: 16px; } .dialog-aksi .tombol { flex: 1; } }
.tombol-lihat { border: 0; background: none; color: var(--hijau); cursor: pointer; padding: 2px 4px; border-radius: 6px; font-size: 16px; line-height: 1; }
.tombol-lihat:hover:not(:disabled) { background: var(--hijau-muda); } .tombol-lihat:disabled { color: #cbd5e1; cursor: not-allowed; }
.aksi-kanan { display: inline-flex; gap: 10px; flex-wrap: wrap; }
[hidden] { display: none !important; }
@media (max-width: 900px) { .pratinjau { padding: 8px; padding-top: calc(8px + env(safe-area-inset-top, 0px)); padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); } .aksi-kanan { flex: 1; } .aksi-kanan .tombol { flex: 1; } }

/* Rekap Excel & pratinjau dokumen kantor (OnlyOffice) */
.kepala-aksi { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bingkai-kantor { height: calc(100vh - 250px); min-height: 520px; margin-top: 14px; }
.bingkai-kantor iframe { display: block; }
.hal-pratinjau { margin: 0; height: 100vh; background: #fff; } .hal-pratinjau #penampilKantor { height: 100vh; }
/* Tanda tunggu pratinjau OnlyOffice (berkas besar: konversi pertama bisa 1-2 menit) */
.kantor-tunggu { position: fixed; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; background: #fff; color: var(--teks); font-family: inherit; }
.kantor-tunggu[hidden] { display: none; }
.kantor-tunggu .pemuat-putar { width: 44px; height: 44px; border: 4px solid #e2e8f0; border-top-color: var(--hijau); border-radius: 50%; animation: pemuatputar .7s linear infinite; }
.kantor-tunggu.galat .pemuat-putar { display: none; }
.kantor-tunggu strong { font-size: 16px; } .kantor-tunggu span { color: var(--redup); font-size: 13px; max-width: 420px; }
.kantor-tunggu-waktu { font-variant-numeric: tabular-nums; }

.pratinjau-kepala .tombol { flex: none; }
@media (max-width: 700px) { .hanya-lebar { display: none; } }

/* Pembaca PDF AMIRA di dalam jendela pratinjau: isi penuh, latar polos (gambar latar Portal tidak ada di subdomain ini) */
.pratinjau-badan { place-items: stretch; }
.pratinjau-badan > img { margin: auto; }
.pratinjau-tunggu { margin: auto; color: #e2e8f0; font-weight: 600; padding: 24px; text-align: center; }

/* Jendela pratinjau disamakan dgn "Pratinjau Bukti" Portal AMIRA (portal/js/bukti-list.js):
   kotak maks 896px x 90vh, kepala ringkas, tombol tutup merah, badan abu muda berisi
   pembaca PDF berbingkai dengan latar foto kantor ANTAM Malut. */
.pratinjau { padding: 16px; padding-top: calc(16px + env(safe-area-inset-top, 0px)); padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); background: rgba(15, 23, 42, .7); backdrop-filter: none; z-index: 1200; }
/* Lebih lebar & tinggi dari Portal (896px x 90vh) atas permintaan pengguna: dokumen SOP terbaca tanpa geser mendatar. */
.pratinjau-kotak { width: 100%; max-width: 1400px; height: 100%; max-height: 95vh; border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); }
.pratinjau-kepala { flex: none; gap: 6px; padding: 10px 16px; border-bottom: 1px solid #f1f5f9; }
.pratinjau-kepala strong { font-size: 14px; font-weight: 700; color: #1e293b; }
.pratinjau-luar { flex: none; display: inline-grid; place-items: center; border: 1px solid #e2e8f0; border-radius: 8px; padding: 4px 8px; font-size: 12px; font-weight: 600; color: #475569; }
.pratinjau-luar:hover { background: #f8fafc; text-decoration: none; }
.pratinjau-tutup { flex: none; display: inline-grid; place-items: center; border: 0; border-radius: 8px; padding: 5px 10px; font-size: 12px; font-weight: 700; color: #fff; background: #f43f5e; cursor: pointer; }
.pratinjau-tutup:hover { background: #e11d48; }
.pratinjau-tutup:focus-visible, .pratinjau-luar:focus-visible { outline: 3px solid rgba(11, 79, 138, .35); outline-offset: 1px; }
.pratinjau-badan { background: #f8fafc; padding: 8px; overflow: auto; }
.pratinjau-badan .pdfjs-viewer { height: 100% !important; }
.pratinjau-badan .pdfjs-stage { background: linear-gradient(rgba(15, 23, 42, .45), rgba(15, 23, 42, .45)), url("antam-malut-office.jpg") center / cover !important; }
.pratinjau-badan iframe { border-radius: 10px; border: 1px solid #dce5ec; }
.pratinjau-tunggu { color: var(--redup); }
@media (max-width: 900px) { .pratinjau { padding: 8px; padding-top: calc(8px + env(safe-area-inset-top, 0px)); padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); } }

/* Jendela pratinjau saat layar penuh: memenuhi layar, tanpa sudut membulat */
.pratinjau-kotak:fullscreen { max-width: none; max-height: none; width: 100vw; height: 100vh; border-radius: 0; }
.pratinjau-kotak:-webkit-full-screen { max-width: none; max-height: none; width: 100vw; height: 100vh; border-radius: 0; }
.pratinjau-kotak:fullscreen .pratinjau-badan iframe, .pratinjau-kotak:fullscreen .pratinjau-badan .pdfjs-viewer { border-radius: 6px; }

/* Kartu pengguna di header: nama panjang dipotong rapi (…), rata kanan, avatar bundar di ujung */
.atas-judul { flex: 1; min-width: 0; }
.atas-saya { margin-left: 0; max-width: min(320px, 46vw); gap: 10px; padding: 4px 4px 4px 12px; border-radius: 999px; border: 1px solid transparent; }
.atas-saya:hover { background: #f8fafc; border-color: var(--garis); }
.atas-nama { min-width: 0; text-align: right; }
.atas-nama strong, .atas-nama small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atas-nama strong { font-size: 13px; font-weight: 700; color: #1e293b; }
.atas-nama small { font-size: 11px; font-weight: 600; color: var(--hijau); margin-top: 1px; }
.atas-inisial { flex: none; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #0b4f8a, #0d2f55); color: #fcd34d; font-size: 13px; font-weight: 800; letter-spacing: .02em; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(11, 79, 138, .25); }
@media (max-width: 1023px) { .atas-saya { padding: 3px; max-width: none; } }

/* Bilah saringan daftar kriteria (cari + Elemen + PIC + Status) */
.bilah-saring { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding: 12px; background: #fff; border: 1px solid var(--garis); border-radius: var(--radius); box-shadow: var(--bayang); }
.saring-cari { position: relative; flex: 1 1 280px; min-width: 200px; }
.saring-cari i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--redup); pointer-events: none; }
.saring-cari input { width: 100%; height: 42px; padding: 0 12px 0 38px; border: 1px solid #cbd5e1; border-radius: 10px; font: inherit; background: #f8fafc; }
.saring-cari input:focus { background: #fff; }
.bilah-saring select { width: auto; max-width: 240px; height: 42px; padding: 0 30px 0 12px; font-weight: 600; background-color: #f8fafc; }
.bilah-saring .tombol.kecil { height: 42px; }
.saring-hitung { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--redup); white-space: nowrap; }
.hanya-pembaca { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ringkas-elemen { grid-template-columns: auto 220px 1fr; }
td .lencana[href]:hover { text-decoration: none; background: var(--hijau); color: #fff; }
@media (max-width: 900px) { .bilah-saring select { flex: 1 1 140px; max-width: none; } .saring-hitung { margin-left: 0; flex-basis: 100%; } }
.bilah-saring { min-width: 0; } .bilah-saring select { min-width: 0; text-overflow: ellipsis; }
@media (max-width: 900px) { .bilah-saring select { flex: 1 1 100%; width: 100%; } .saring-cari { flex-basis: 100%; min-width: 0; } }

/* Bilah saringan Riwayat (riwayat.php): di layar lebar div pembungkus "baris" TIDAK mengubah
   layout (display:contents) -- anak2nya mengalir sbg flex item langsung .bilah-saring spt biasa.
   Kotak tanggal (.saring-tgl) dipasang ikon kalender SENDIRI, pola sama persis spt kaca pembesar
   .saring-cari -- bukan andalkan ikon/placeholder bawaan peramban: beberapa in-app browser (mis.
   WhatsApp/Instagram) tidak menampilkan UI date-picker native sama sekali, kotaknya jadi kosong
   total tanpa petunjuk apa pun (ditemukan 13 Okt 2026 lewat tangkapan layar pengguna -- ikon kita
   sendiri menjamin ada penanda visual apa pun perambannya, tidak bergantung rendering native).
   Di HP: baris 1 SELALU 3 kolom (Cari/Pengguna/Kejadian), baris 2 jadi 4 kolom kalau sedang ada
   filter aktif (tombol "Atur ulang" ikut tampil) atau 3 kolom kalau tidak. */
#riwayatSaring .saring-baris-1, #riwayatSaring .saring-baris-2 { display: contents; }
#riwayatSaring .saring-tgl { position: relative; flex: 1 1 150px; min-width: 130px; }
#riwayatSaring .saring-tgl i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--redup); pointer-events: none; font-size: 14px; }
#riwayatSaring .saring-tgl input[type=date] { width: 100%; padding-left: 34px; }
@media (max-width: 900px) {
    #riwayatSaring .saring-baris-1 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
    /* minmax(0, 1fr) WAJIB -- bukan "1fr" polos: track "1fr" polos punya batas minimum = lebar
       KONTEN bawaannya (min-content), dan <input type=date> tidak mau menyusut di bawah situ.
       Akibatnya dua kotak tanggal melebihi lebar layar (overflow ke kanan) dan mendorong tombol
       Terapkan/Atur-ulang (kolom ke-3/4) keluar dari area yang kelihatan. minmax(0,1fr) membolehkan
       track menyusut sampai 0 kalau perlu, jadi semua kolom dipaksa muat dalam satu baris nyata. */
    #riwayatSaring .saring-baris-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; width: 100%; margin-top: 8px; }
    #riwayatSaring .saring-baris-2.terfilter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto; }
    #riwayatSaring .saring-tgl { min-width: 0; }
    #riwayatSaring .saring-cari, #riwayatSaring select, #riwayatSaring .tombol.kecil { width: 100%; max-width: none; min-width: 0; flex: none; }
    /* Teks "Terapkan"/"Atur ulang" meluber keluar kotak sekecil ini -- cukup ikonnya (aria-label
       tetap ada di tombol/tautannya, jadi pembaca layar tetap dengar namanya). */
    #riwayatSaring .tombol.kecil { padding: 0 8px; gap: 0; }
    #riwayatSaring .tombol.kecil .teks-tombol { display: none; }
    #riwayatSaring .saring-hitung { flex-basis: 100%; margin: 8px 0 0; text-align: center; }
}

/* Admin: ubah PIC di halaman kriteria + halaman tarik dari spreadsheet */
.rinci dd .tombol.kecil { padding: 3px 7px; margin-left: 6px; vertical-align: middle; }
.form-pic { display: grid; gap: 8px; margin-top: 4px; font-weight: 400; }
.form-pic input[type=text] { padding: 8px 10px; }
.form-pic .centang { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; }
.form-pic-aksi { display: flex; gap: 8px; } .form-pic p { margin: 0; }
.angka-utama.empat { grid-template-columns: repeat(4, 1fr); margin-bottom: 16px; }
.kartu > p { margin: 0 0 14px; }
@media (max-width: 900px) { .angka-utama.empat { grid-template-columns: 1fr 1fr; } }

/* Halaman Pengguna & Riwayat (admin) */
.sel-pengguna { display: flex; align-items: center; gap: 12px; min-width: 220px; }
.avatar { position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #0b4f8a, #0d2f55); color: #fcd34d; font-size: 13px; font-weight: 800; }
.titik-online { position: absolute; right: -1px; bottom: -1px; width: 13px; height: 13px; border-radius: 50%; border: 2px solid #fff; background: #cbd5e1; }
.titik-online.hidup { background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, .25); }
.nama-pengguna { min-width: 0; } .nama-pengguna strong { display: block; } .nama-pengguna small { display: block; color: var(--redup); font-size: 12px; overflow-wrap: anywhere; }
.status-online { font-size: 13px; font-weight: 600; color: var(--redup); } .status-online.hidup { color: #059669; }
.status-online.hidup::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #10b981; }
.blok { display: block; } .tak-pecah { white-space: nowrap; }
.lencana.emas { background: #fef3c7; color: #92400e; } .lencana.kuning { background: #fef3c7; color: #92400e; }
.baris-ubah > td { background: #f8fafc; padding: 18px !important; } .baris-ubah:hover { background: none; }
.form-akun { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; align-items: start; }
.form-akun label, .label-kecil { display: block; margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--redup); }
.form-akun .lebar-penuh { grid-column: 1 / -1; } .form-akun .rata-bawah { align-self: end; padding-bottom: 8px; }
.deret-centang { display: flex; flex-wrap: wrap; gap: 8px; }
.pil-centang { display: inline-flex !important; align-items: center; gap: 7px; margin: 0 !important; padding: 7px 11px; border: 1px solid var(--garis); border-radius: 10px; background: #fff; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--teks) !important; cursor: pointer; }
.pil-centang:has(input:checked) { border-color: var(--hijau); background: var(--hijau-muda); }
.form-reset { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--garis); }
.kotak-sandi code { display: inline-block; padding: 3px 9px; border-radius: 7px; background: #fff; font: 700 14px/1.4 "Plus Jakarta Sans", system-ui, sans-serif; letter-spacing: .04em; }
.kotak-sandi p { margin: 8px 0 0; }
.bilah-saring input[type=date] { width: auto; height: 42px; padding: 0 10px; border: 1px solid #cbd5e1; border-radius: 10px; font: inherit; background: #f8fafc; }
.halaman { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px 0; }
@media (max-width: 900px) {
    .form-akun { grid-template-columns: 1fr; }
    /* "Akun aktif" (.rata-bawah) sebelumnya ikut lebar KONTENnya sendiri (inline-flex) begitu
       kolom runtuh jadi 1 di HP -- jadi kotaknya terlihat jauh lebih sempit dari field Nama
       Lengkap/Peran di atasnya. Diregangkan penuh + padding disamakan dgn input/select supaya
       tingginya jg senada, HANYA di dalam .form-akun (bukan kotak centang biro .pil-biro yang
       memang sengaja kecil berderet). */
    .form-akun .rata-bawah { align-self: auto; padding-bottom: 0; }
    .form-akun .rata-bawah .pil-centang { display: flex !important; width: 100%; box-sizing: border-box; justify-content: flex-start; padding: 10px 12px; }
    .bilah-saring input[type=date] { flex: 1 1 140px; }
}
.status-online { white-space: nowrap; display: inline-flex; align-items: center; } .tabel-pengguna td { vertical-align: middle; }

/* Lencana biro PIC (boleh beberapa per kriteria) */
.lencana.biro { background: #eef2ff; color: #3730a3; margin: 1px 0; cursor: default; }
.sel-biro { min-width: 110px; line-height: 1.9; }
.rinci dd .lencana.biro { white-space: normal; }
.form-pic .deret-centang .pil-centang { font-size: 12px !important; padding: 6px 9px; }

/* Tambah akun: saran dari Master Karyawan */
.cari-karyawan { position: relative; } .cari-karyawan .saring-cari { max-width: 520px; } .cari-karyawan p { margin: 8px 0 0; }
.hasil-karyawan { position: absolute; z-index: 20; left: 0; top: 70px; width: min(520px, 100%); max-height: 320px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--garis); border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, .14); }
.hasil-karyawan li { padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.hasil-karyawan li:hover, .hasil-karyawan li:focus { background: var(--hijau-muda); outline: none; }
.hasil-karyawan strong { display: block; font-size: 14px; } .hasil-karyawan small { display: block; font-size: 12px; color: var(--redup); }
.hasil-karyawan li.sudah strong { color: var(--redup); } .hasil-karyawan li.kosong-k { cursor: default; color: var(--redup); font-size: 13px; } .hasil-karyawan li.kosong-k:hover { background: none; }

/* Tambah akun: cari karyawan + nama pengguna + nama lengkap + peran dalam SATU baris */
.form-akun.empat { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, .8fr); }
.form-akun.empat input[type=text], .form-akun.empat select, .form-akun.empat .saring-cari input { height: 44px; }
.form-akun.empat .cari-karyawan .saring-cari { max-width: none; min-width: 0; }
.form-akun.empat .hasil-karyawan { top: 72px; width: max(100%, 380px); }
.form-akun.empat .aksi-unggah { align-items: center; flex-wrap: nowrap; } .form-akun.empat .aksi-unggah .tombol { flex: none; }
@media (max-width: 1100px) { .form-akun.empat { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .form-akun.empat { grid-template-columns: 1fr; } .form-akun.empat .aksi-unggah { flex-wrap: wrap; } }

/* Pilihan biro akun: 15 biro dalam SATU baris (singkatan; kotak centang diganti tampilan tombol yang menyala saat dipilih) */
.deret-centang.satu-baris { flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.pil-biro { flex: 1 0 auto; justify-content: center; padding: 8px 9px !important; font-size: 12px !important; white-space: nowrap; position: relative; }
/* Penanda kotak centang (☐/☑) di depan teks -- tanpa ini, chip yang TERCENTANG (hijau penuh,
   teks putih) terlihat identik dgn tombol aksi biasa (mis. "Tambah eviden"), apalagi kalau
   semuanya tercentang default (unggah eviden, tidak ada chip putih sbg pembanding) -- pengguna
   jadi tidak tahu ini centang yg bisa di-toggle, dikira tombol/pilihan sekali-klik. */
.pil-biro::before { content: "\2610"; margin-right: 5px; font-size: 13px; line-height: 1; }
.pil-biro:has(input:checked)::before { content: "\2611"; }
.pil-biro input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pil-biro:has(input:checked) { background: var(--hijau); border-color: var(--hijau); color: #fff !important; }
.pil-biro:has(input:focus-visible) { outline: 3px solid rgba(11, 79, 138, .3); outline-offset: 1px; }
.pil-biro:hover { border-color: var(--hijau); }
.form-akun > * { min-width: 0; }
@media (max-width: 900px) { .deret-centang.satu-baris { flex-wrap: wrap; overflow-x: visible; } .pil-biro { flex: 1 0 auto; } }

/* Dropdown pilih-banyak (biro PIC di halaman kriteria) */
.pilih-banyak { position: relative; }
.pilih-banyak summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px; padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; font-weight: 600; color: var(--redup); cursor: pointer; }
.pilih-banyak summary::-webkit-details-marker { display: none; }
.pilih-banyak.terisi summary { color: var(--teks); }
.pilih-banyak summary span { min-width: 0; overflow-wrap: anywhere; line-height: 1.35; }
.pilih-banyak summary i { flex: none; font-size: 12px; transition: transform .15s ease; }
.pilih-banyak[open] summary { border-color: var(--hijau); box-shadow: 0 0 0 3px rgba(11, 79, 138, .15); } .pilih-banyak[open] summary i { transform: rotate(180deg); }
.pilih-banyak summary:focus-visible { outline: 3px solid rgba(11, 79, 138, .28); outline-offset: 1px; }
.pilih-banyak.mati summary { background: #f1f5f9; cursor: not-allowed; }
.pilih-daftar { position: absolute; z-index: 25; left: 0; right: 0; top: calc(100% + 6px); max-height: 300px; overflow-y: auto; padding: 6px; background: #fff; border: 1px solid var(--garis); border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, .16); }
.pilih-daftar label { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.pilih-daftar label:hover { background: #f1f5f9; } .pilih-daftar label:has(input:checked) { background: var(--hijau-muda); color: var(--hijau); }
.pilih-daftar input { flex: none; width: 16px; height: 16px; accent-color: var(--hijau); }
/* Saat PIC diubah, barisnya memakai lebar penuh kartu supaya dropdown & nama biro tidak terjepit */
.rinci dd:has(.form-pic:not([hidden])) { grid-column: 1 / -1; }
.pilih-daftar label { overflow-wrap: normal; word-break: normal; line-height: 1.3; }
.pilih-banyak summary span { overflow-wrap: break-word; word-break: normal; }

/* Eviden berupa tautan: kotak tempel tautan di tiap baris eviden */
.baris-pilih { display: flex; align-items: stretch; gap: 8px; margin-top: 8px; }
.baris-pilih > .zona-unggah { flex: 1; min-width: 0; margin: 0; }
.baris-pilih > .tombol { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; white-space: nowrap; }
.baris-tautan { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.baris-tautan > i { flex: none; font-size: 18px; color: var(--hijau); }
.baris-tautan input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid #cbd5e1; border-radius: 10px; font: inherit; background: #fff; }
.baris-tautan input.salah { border-color: var(--kurang); background: #fff1f2; }
.baris-tautan .tombol { flex: none; height: 40px; }
.antrean li.item-tautan progress { display: none; } .antrean li.item-tautan .nama { font-weight: 500; color: var(--hijau); }
.antrean a.tombol-lihat { display: inline-grid; place-items: center; text-decoration: none; }
@media (max-width: 640px) { .baris-tautan { flex-wrap: wrap; } .baris-tautan input { flex-basis: calc(100% - 30px); } .baris-tautan .tombol { margin-left: 26px; } }

/* Baris tombol aksi: tombol-tombolnya SAMA LEBAR dan bersama-sama memenuhi lebar kartu, satu baris
   (diminta pengguna). Berlaku utk semua baris tombol: unggah eviden, tarik spreadsheet, kelola akun, ganti sandi. */
.aksi-unggah, .aksi-form { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; justify-content: stretch; }
.aksi-unggah .aksi-kanan { display: contents; }
.aksi-unggah form { display: flex; margin: 0; min-width: 0; }
.aksi-unggah .tombol, .aksi-form .tombol { width: 100%; min-width: 0; padding: 11px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aksi-unggah [hidden] { display: none !important; }
.form-akun.empat .aksi-unggah { flex-wrap: initial; }
.catatan-form { margin: 0; }
.form-pic-aksi { display: grid; grid-template-columns: 1fr 1fr; } .form-pic-aksi .tombol { width: 100%; padding: 9px 10px; }
@media (max-width: 640px) { .aksi-unggah { grid-auto-flow: row; grid-auto-columns: auto; } .aksi-unggah .tombol { white-space: normal; } }

/* Halaman kriteria: kolom kiri (eviden/unggah) dan kanan (Rincian/Arsip) dibagi rata (diminta pengguna) */
.dua-kolom { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.dua-kolom .rinci { grid-template-columns: 150px minmax(0, 1fr); }
@media (max-width: 900px) { .dua-kolom { grid-template-columns: minmax(0, 1fr); } }

/* Tombol pensil (ubah PIC) di KIRI nama biro */
.rinci dd .tombol.kecil.pensil-kiri { margin-left: 0; margin-right: 8px; }

/* Formulir ganti SOP/IK */
.form-pic input[type=url] { width: 100%; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 10px; font: inherit; }
.form-pic .label-kecil { margin-bottom: -2px; }

/* Ganti SOP/IK: pilih sumber (tautan / unggah berkas) */
.pilih-sumber { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pilih-sumber label { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0; padding: 9px 10px; border: 1px solid var(--garis); border-radius: 10px; background: #fff; font-size: 13px; font-weight: 600; cursor: pointer; position: relative; }
.pilih-sumber input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pilih-sumber label:has(input:checked) { background: var(--hijau-muda); border-color: var(--hijau); color: var(--hijau); }
.pilih-sumber label:has(input:focus-visible) { outline: 3px solid rgba(11, 79, 138, .28); outline-offset: 1px; }
.form-pic input[type=file] { width: 100%; padding: 8px; border: 1px dashed #94a3b8; border-radius: 10px; background: #f8fafc; font: inherit; font-size: 13px; }
.sop-berkas-kini { color: var(--hijau); }

/* Ganti SOP/IK: berkas terpilih sebagai baris (pratinjau / batal), sama dgn antrean unggah eviden */
#sopZona { margin-top: 0; } #sopTerpilih li { grid-template-columns: minmax(0, 1fr) auto; }
.nama-tombol { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; text-align: left; color: var(--hijau); cursor: pointer; overflow-wrap: anywhere; }
.nama-tombol:hover:not(:disabled) { text-decoration: underline; } .nama-tombol:disabled { color: var(--teks); cursor: default; }

/* SOP/IK: satu baris utk SOP/IK umum kriteria + satu baris per biro PIC */
.sop-daftar { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.sop-daftar li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sop-daftar li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.rinci dd .sop-daftar .tombol.kecil.sop-tambah { margin: 0; padding: 5px 10px; }
.rinci dd .sop-daftar .tombol.kecil.pensil-kiri { margin-right: 2px; flex: none; }

/* Animasi memuat halaman (aset/pemuat.js) -- sama dgn admin web AMIRA */
html, body { overscroll-behavior-y: contain; }
#mossaPemuat { position: fixed; inset: 0; z-index: 2147483000; display: none; align-items: center; justify-content: center; background: rgba(248, 250, 252, .88); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
#mossaPemuat.tampil { display: flex; }
#mossaPemuat .pemuat-kotak { display: flex; flex-direction: column; align-items: center; gap: 16px; }
#mossaPemuat .pemuat-logo { display: none; width: 92px; height: auto; }
#mossaPemuat .pemuat-putar { width: 48px; height: 48px; border: 4px solid #e2e8f0; border-top-color: #0b4f8a; border-radius: 50%; animation: pemuatputar .7s linear infinite; }
#mossaPemuat.pembuka { background: #f3f6fb; -webkit-backdrop-filter: none; backdrop-filter: none; }
#mossaPemuat.pembuka .pemuat-logo { display: block; animation: pemuatmuncul .5s ease-out; }
@keyframes pemuatputar { to { transform: rotate(360deg); } }
@keyframes pemuatmuncul { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { #mossaPemuat .pemuat-putar { animation-duration: 1.5s; } }

/* Halaman Akun: kartu profil (kiri) + ganti kata sandi (kanan), ditengahkan */
.akun-tata { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 20px; align-items: stretch; }
.akun-tata > .kartu { margin-bottom: 0; }
.akun-tata > * { min-width: 0; }
.akun-profil { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 0; overflow: hidden; text-align: center; }
.akun-sampul { align-self: stretch; height: 84px; margin: 0 -20px; background: linear-gradient(135deg, #0d2f55, #0b4f8a 60%, #1f6fb5); }
.akun-inisial { display: grid; place-items: center; width: 84px; height: 84px; margin-top: -52px; border-radius: 24px; border: 4px solid #fff; background: var(--hijau); color: #fff; font-size: 30px; font-weight: 800; letter-spacing: .02em; box-shadow: 0 8px 20px rgba(10, 37, 64, .22); }
.akun-profil h2 { margin: 4px 0 0; padding: 0; border: 0; font-size: 18px; line-height: 1.3; overflow-wrap: anywhere; }
.akun-rinci { align-self: stretch; margin: 10px 0 0; padding-top: 14px; border-top: 1px solid var(--garis); display: grid; gap: 4px; text-align: left; }
.akun-rinci dt { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--redup); }
.akun-rinci dd { margin: 0 0 10px; font-weight: 700; display: flex; flex-wrap: wrap; gap: 6px; overflow-wrap: anywhere; }
.akun-rinci dd .lencana.biro { white-space: normal; text-align: left; }
.akun-sandi h2 { display: flex; align-items: center; gap: 8px; } .akun-sandi h2 i { color: var(--hijau); }
@media (max-width: 900px) { .akun-tata { grid-template-columns: minmax(0, 1fr); } }

/* Halaman kriteria: Rincian + Arsip berjajar di atas (sama tinggi), lalu Eviden dan Unggah selebar halaman.
   Baris unggah berjajar ke samping, jadi menambah banyak eviden tidak membuat satu kolom memanjang sendirian. */
.dua-kolom.tata-kriteria { grid-template-columns: minmax(0, 1fr); }
.dua-kolom.tata-kriteria > aside { order: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: stretch; }
.dua-kolom.tata-kriteria > aside > .kartu { margin-bottom: 0; }
/* flex (bukan grid): kotak di baris terakhir ikut melebar mengisi sisa lebar */
#barisEviden { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
#barisEviden > .baris-eviden { flex: 1 1 360px; margin-bottom: 0; min-width: 0; }
@media (max-width: 480px) { .dua-kolom.tata-kriteria > aside { grid-template-columns: minmax(0, 1fr); } #barisEviden > .baris-eviden { flex-basis: 100%; } }
/* Urutan: Unggah eviden (paling atas) -> Eviden tahun ini -> Rincian + Arsip */
.dua-kolom.tata-kriteria > div { display: flex; flex-direction: column; min-width: 0; }
.dua-kolom.tata-kriteria > div > #kotakUnggah { order: -1; }
/* Formulir unggah: tertutup dulu, terbuka saat judulnya diklik */
.buka-unggah { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.buka-unggah > span { display: inline-flex; align-items: center; gap: 8px; } .buka-unggah > span i { color: var(--hijau); }
.buka-unggah .panah { color: var(--redup); transition: transform .2s ease; }
.buka-unggah[aria-expanded=true] .panah { transform: rotate(180deg); }
.buka-unggah:focus-visible { outline: 2px solid var(--hijau); outline-offset: 4px; border-radius: 6px; }
#kotakUnggah.tutup > h2 { margin: 0; padding-bottom: 0; border-bottom: 0; }
#kotakUnggah.tutup:hover { border-color: #94a3b8; }
/* Pesan unggah yang masih kosong tidak mengambil tempat (dulu menyisakan jarak tinggi di atas keterangan jenis berkas) */
#kotakUnggah .pesan-unggah:empty { display: none; }
#kotakUnggah .pesan-unggah { min-height: 0; margin: 10px 0 0; }
#isiUnggah > p.redup.kecil { margin: 10px 0 0; }
/* SOP/IK: beberapa dokumen */
.form-pic textarea { width: 100%; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 10px; font: inherit; resize: vertical; }
.sop-daftar .sop-hapus { flex: none; }
/* Judul halaman satu baris (ukuran huruf dipaskan smkp.js) */
.kepala-hal > div:first-child { flex: 1 1 260px; min-width: 0; }
.kepala-hal h1 { max-width: 100%; }
/* Ringkasan elemen / PIC: batang kemajuan mengisi seluruh lebar yang tersisa, keterangan di ujung kanan */
.ringkas-elemen { grid-template-columns: auto minmax(0, 1fr) auto; }
.ringkas-elemen > progress { width: 100%; }
@media (max-width: 700px) { .ringkas-elemen { grid-template-columns: auto minmax(0, 1fr); } .ringkas-elemen > span { grid-column: 1 / -1; } }

/* ── Halaman masuk: foto kantor ANTAM UBPN Maluku Utara + nuansa tambang nikel (garis kontur, aksen emas) ── */
.hal-masuk { background: #08203a; min-height: 100vh; }
.hal-masuk::before { content: ""; position: fixed; inset: 0; z-index: 0; background: url("antam-malut-office.jpg") center 42% / cover no-repeat; transform: scale(1.04); animation: masukfoto 28s ease-in-out infinite alternate; }
.hal-masuk::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: url("kontur.svg") center / cover no-repeat, linear-gradient(100deg, rgba(7, 26, 48, .30) 0%, rgba(6, 30, 58, .58) 46%, rgba(7, 26, 48, .93) 100%), linear-gradient(0deg, rgba(5, 16, 32, .82) 0%, rgba(5, 16, 32, 0) 46%);
    background-blend-mode: soft-light, normal, normal; }
@keyframes masukfoto { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-1.2%, -1%, 0); } }
@media (prefers-reduced-motion: reduce) { .hal-masuk::before { animation: none; } }
.hal-masuk .isi { position: relative; z-index: 1; display: block; min-height: 100vh; padding: 0; }
.masuk-tata { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; min-height: 100vh; max-width: 1320px; margin: 0 auto; padding: 40px 56px; }
.masuk-sampul { align-self: center; padding-bottom: 0; color: #fff; min-width: 0; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.masuk-cap { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 99px; border: 1px solid rgba(245, 158, 11, .55); background: rgba(7, 26, 48, .45); color: #fde68a; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; backdrop-filter: blur(6px); text-shadow: none; }
.masuk-sampul h2 { color: #fff; margin: 18px 0 10px; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.08; font-weight: 800; letter-spacing: -.02em; }
.masuk-sampul h2 em { font-style: normal; background: linear-gradient(90deg, #fef0c2, #f59e0b); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.masuk-sampul > p { margin: 0; font-size: 15px; color: rgba(255, 255, 255, .86); }
.masuk-elemen { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; max-width: 760px; text-shadow: none; }
.masuk-elemen li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 99px; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .16); font-size: 12.5px; font-weight: 600; color: rgba(255, 255, 255, .92); backdrop-filter: blur(6px); }
.masuk-elemen li b { display: grid; place-items: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--emas); color: #08203a; font-size: 11px; font-weight: 800; }
.hal-masuk .kartu-masuk { position: relative; width: 400px; max-width: 100%; padding: 34px 30px 28px; border-radius: 22px; background: rgba(255, 255, 255, .97); box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .25); overflow: hidden; }
.hal-masuk .kartu-masuk::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--hijau), var(--emas), var(--hijau)); }
@media (max-width: 980px) {
    .masuk-tata { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 28px 20px; align-content: center; justify-items: center; }
    .masuk-sampul { align-self: auto; padding-bottom: 0; text-align: center; }
    .masuk-sampul h2 { margin-top: 14px; font-size: 28px; }
    .masuk-elemen { display: none; }
    .hal-masuk::after { background: url("kontur.svg") center / cover no-repeat, linear-gradient(180deg, rgba(7, 26, 48, .62), rgba(7, 26, 48, .93)); background-blend-mode: soft-light, normal; }
}

/* ── Halaman masuk: animasi tema tambang nikel & keselamatan (murni CSS) ── */
.masuk-sampul > * { animation: masuknaik .8s cubic-bezier(.2, .7, .2, 1) both; }
.masuk-sampul > :nth-child(2) { animation-delay: .12s; } .masuk-sampul > :nth-child(3) { animation-delay: .24s; } .masuk-sampul > :nth-child(4) { animation-delay: .38s; }
.hal-masuk .kartu-masuk { animation: masuknaik .8s cubic-bezier(.2, .7, .2, 1) .15s both; }
@keyframes masuknaik { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.masuk-lambang { display: flex; align-items: center; gap: 14px; margin-top: 28px; text-shadow: none; }
/* Ubin unsur Ni (nomor atom 28) dgn kilau logam yang menyapu */
.ubin-ni { position: relative; display: grid; grid-template: "nomor" auto "simbol" 1fr "nama" auto / 1fr; width: 74px; height: 82px; padding: 7px 9px; border-radius: 14px; overflow: hidden; color: #fff; border: 1px solid rgba(245, 158, 11, .7); background: linear-gradient(150deg, rgba(245, 158, 11, .30), rgba(10, 37, 64, .55)); backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 0 18px rgba(245, 158, 11, .18); }
.ubin-ni small { font-size: 11px; font-weight: 700; color: #fde68a; } .ubin-ni b { font-size: 32px; line-height: 1; font-weight: 800; letter-spacing: -.02em; }
.ubin-ni i { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.ubin-ni::after { content: ""; position: absolute; inset: -40% auto -40% -60%; width: 45%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); animation: nikilau 4.5s ease-in-out infinite; }
@keyframes nikilau { 0%, 55% { left: -60%; } 100% { left: 130%; } }
/* Lambang keselamatan: cincin berdenyut seperti sinyal */
.cincin { position: relative; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: #fde68a; font-size: 23px; background: rgba(7, 26, 48, .5); border: 1px solid rgba(245, 158, 11, .55); backdrop-filter: blur(8px); }
.cincin::before, .cincin::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(242, 220, 138, .7); animation: cincindenyut 3s ease-out infinite; }
.cincin::after { animation-delay: 1.5s; }
.cincin:nth-child(3)::before { animation-delay: .5s; } .cincin:nth-child(3)::after { animation-delay: 2s; }
.cincin:nth-child(4)::before { animation-delay: 1s; } .cincin:nth-child(4)::after { animation-delay: 2.5s; }
.cincin:nth-child(4) i { animation: lorigoyang 2.4s ease-in-out infinite; }
@keyframes cincindenyut { from { transform: scale(1); opacity: .8; } to { transform: scale(1.75); opacity: 0; } }
@keyframes lorigoyang { 0%, 100% { transform: translateX(-2px) rotate(-3deg); } 50% { transform: translateX(2px) rotate(3deg); } }
/* Kilau bijih nikel yang melayang naik */
.masuk-kilau { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.masuk-kilau i { position: absolute; bottom: -12px; width: 5px; height: 5px; border-radius: 50%; background: radial-gradient(circle, #fff6c9, #f59e0b 55%, transparent 72%); box-shadow: 0 0 10px 2px rgba(245, 158, 11, .55); opacity: 0; animation: kilaunaik 11s linear infinite; }
.masuk-kilau i:nth-child(1) { left: 6%; animation-delay: 0s; } .masuk-kilau i:nth-child(2) { left: 15%; animation-delay: 3.5s; width: 3px; height: 3px; }
.masuk-kilau i:nth-child(3) { left: 24%; animation-delay: 7s; } .masuk-kilau i:nth-child(4) { left: 34%; animation-delay: 1.8s; width: 4px; height: 4px; }
.masuk-kilau i:nth-child(5) { left: 43%; animation-delay: 5.6s; width: 3px; height: 3px; } .masuk-kilau i:nth-child(6) { left: 52%; animation-delay: 9s; }
.masuk-kilau i:nth-child(7) { left: 61%; animation-delay: 2.7s; width: 4px; height: 4px; } .masuk-kilau i:nth-child(8) { left: 72%; animation-delay: 6.4s; width: 3px; height: 3px; }
.masuk-kilau i:nth-child(9) { left: 84%; animation-delay: 4.4s; } .masuk-kilau i:nth-child(10) { left: 93%; animation-delay: 8.1s; width: 4px; height: 4px; }
@keyframes kilaunaik { 0% { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; } 12% { opacity: .9; } 70% { opacity: .55; } 100% { transform: translate3d(34px, -78vh, 0) scale(1.15); opacity: 0; } }
/* Truk angkut melintas di jalan tambang (bawah layar) */
.masuk-jalan { position: fixed; left: 0; right: 0; bottom: 8px; height: 66px; z-index: 1; pointer-events: none; overflow: hidden; border-bottom: 1px solid rgba(245, 158, 11, .35); }
.masuk-jalan .truk { position: absolute; left: 0; bottom: 0; overflow: visible; animation: trukjalan 26s linear infinite; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)); }
.masuk-jalan .bak { fill: #f59e0b; } .masuk-jalan .muatan { fill: #7a5a2b; } .masuk-jalan .kabin { fill: #fde68a; } .masuk-jalan .kaca { fill: #0b3258; } .masuk-jalan .sasis { fill: #1b2738; }
.masuk-jalan .roda { transform-box: fill-box; transform-origin: center; animation: rodaputar .9s linear infinite; }
.masuk-jalan .roda circle { fill: #0b1220; stroke: #97a3b3; stroke-width: 2.5; } .masuk-jalan .roda path { stroke: #97a3b3; stroke-width: 2; }
.masuk-jalan .bak, .masuk-jalan .muatan, .masuk-jalan .kabin, .masuk-jalan .kaca { animation: trukgoyang .5s ease-in-out infinite alternate; }
.masuk-jalan .debu { position: absolute; left: 0; bottom: 2px; width: 60px; height: 22px; border-radius: 50%; background: radial-gradient(ellipse, rgba(226, 204, 160, .45), transparent 70%); filter: blur(4px); animation: trukjalan 26s linear infinite, debukembang 1.2s ease-in-out infinite alternate; margin-left: -52px; }
@keyframes trukjalan { from { transform: translate3d(-160px, 0, 0); } to { transform: translate3d(calc(100vw + 60px), 0, 0); } }
@keyframes rodaputar { to { transform: rotate(360deg); } }
@keyframes trukgoyang { from { transform: translateY(0); } to { transform: translateY(-1.2px); } }
@keyframes debukembang { from { opacity: .5; } to { opacity: 1; } }
/* Garis pengaman kuning-hitam yang berjalan */
.masuk-pengaman { position: fixed; left: 0; right: 0; bottom: 0; height: 8px; z-index: 1; pointer-events: none; background: repeating-linear-gradient(-45deg, #e5b700 0 14px, #0f1b2b 14px 28px); background-size: 39.6px 100%; animation: pengamanjalan 1.6s linear infinite; opacity: .9; }
@keyframes pengamanjalan { to { background-position: 39.6px 0; } }
.hal-masuk .isi { z-index: 2; }
@media (max-width: 980px) { .masuk-lambang { justify-content: center; margin-top: 18px; } .ubin-ni { width: 62px; height: 70px; } .ubin-ni b { font-size: 26px; } .cincin { width: 46px; height: 46px; font-size: 20px; } .masuk-jalan { opacity: .75; } }
@media (prefers-reduced-motion: reduce) { .masuk-jalan, .masuk-kilau { display: none; } .masuk-pengaman, .ubin-ni::after, .cincin::before, .cincin::after, .cincin i { animation: none; } .cincin::before, .cincin::after { display: none; } }
/* Hiasan selalu DI BELAKANG teks & kartu masuk; di layar sempit truk disembunyikan supaya tidak menimpa kartu */
.masuk-tata { position: relative; z-index: 2; }
.masuk-jalan .truk { transform-origin: left bottom; scale: 1.25; }
@media (max-width: 980px) { .masuk-jalan { display: none; } .masuk-tata { padding-bottom: 36px; } }
.masuk-jalan { height: 96px; } .masuk-jalan .sasis { fill: #d97706; } .masuk-jalan .roda circle { fill: #141e2e; stroke: #e6ecf3; } .masuk-jalan .roda path { stroke: #e6ecf3; }

/* ── Kartu masuk: animasi (murni CSS) ── */
@property --sudut-kartu { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
/* Cahaya emas-hijau yang mengelilingi tepi kartu */
.hal-masuk .kartu-masuk::after { content: ""; position: absolute; inset: 0; padding: 2px; border-radius: inherit; pointer-events: none;
    background: conic-gradient(from var(--sudut-kartu), transparent 0 62%, rgba(245, 158, 11, .95) 74%, #fff3b0 80%, rgba(11, 79, 138, .9) 88%, transparent 96%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: kartukeliling 6s linear infinite; }
@keyframes kartukeliling { to { --sudut-kartu: 360deg; } }
/* Garis aksen atas mengalir + pendar lembut di sekeliling kartu */
.hal-masuk .kartu-masuk::before { background: linear-gradient(90deg, var(--hijau), var(--emas), #fff3b0, var(--emas), var(--hijau)); background-size: 200% 100%; animation: kartualir 4s linear infinite; }
@keyframes kartualir { to { background-position: -200% 0; } }
.hal-masuk .kartu-masuk { animation: masuknaik .8s cubic-bezier(.2, .7, .2, 1) .15s both, kartupendar 5s ease-in-out 1s infinite; }
@keyframes kartupendar { 0%, 100% { box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .25), 0 0 0 rgba(245, 158, 11, 0); } 50% { box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .25), 0 0 46px rgba(245, 158, 11, .38); } }
/* Logo melayang, isi kartu muncul bergantian */
.hal-masuk .masuk-logo { animation: logomuncul .9s cubic-bezier(.2, 1.4, .4, 1) .35s both, logolayang 5s ease-in-out 1.3s infinite; filter: drop-shadow(0 8px 14px rgba(10, 37, 64, .22)); }
@keyframes logomuncul { from { opacity: 0; transform: scale(.5) rotate(-12deg); } to { opacity: 1; transform: none; } }
@keyframes logolayang { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.hal-masuk .masuk-kop h1, .hal-masuk .masuk-kop p, .hal-masuk .kartu-masuk form > *, .hal-masuk .masuk-catatan { animation: isimuncul .6s ease-out both; }
.hal-masuk .masuk-kop h1 { animation-delay: .5s; } .hal-masuk .masuk-kop p { animation-delay: .58s; }
.hal-masuk .kartu-masuk form > :nth-child(2) { animation-delay: .66s; } .hal-masuk .kartu-masuk form > :nth-child(3) { animation-delay: .72s; }
.hal-masuk .kartu-masuk form > :nth-child(4) { animation-delay: .80s; } .hal-masuk .kartu-masuk form > :nth-child(5) { animation-delay: .86s; }
.hal-masuk .kartu-masuk form > :nth-child(6) { animation-delay: .96s; } .hal-masuk .masuk-catatan { animation-delay: 1.06s; }
@keyframes isimuncul { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* Kolom isian: pendar saat aktif */
.hal-masuk .kartu-masuk input { transition: border-color .2s ease, box-shadow .25s ease, transform .2s ease; }
.hal-masuk .kartu-masuk input:focus { border-color: var(--hijau); box-shadow: 0 0 0 4px rgba(11, 79, 138, .16), 0 8px 20px rgba(11, 79, 138, .12); transform: translateY(-1px); }
/* Tombol Masuk: kilau menyapu + terangkat saat disentuh */
.hal-masuk .kartu-masuk .tombol.utama { position: relative; overflow: hidden; background: linear-gradient(90deg, #093f6e, var(--hijau), #1f6fb5, var(--hijau), #093f6e); background-size: 220% 100%; transition: transform .2s ease, box-shadow .25s ease, background-position .6s ease; box-shadow: 0 10px 22px rgba(11, 79, 138, .28); }
.hal-masuk .kartu-masuk .tombol.utama::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); animation: tombolkilau 3.6s ease-in-out 1.6s infinite; }
@keyframes tombolkilau { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.hal-masuk .kartu-masuk .tombol.utama:hover { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 16px 30px rgba(11, 79, 138, .38); }
.hal-masuk .kartu-masuk .tombol.utama:active { transform: translateY(0) scale(.985); }
.hal-masuk .kartu-masuk .tombol.utama i { transition: transform .25s ease; } .hal-masuk .kartu-masuk .tombol.utama:hover i { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .hal-masuk .kartu-masuk, .hal-masuk .kartu-masuk::before, .hal-masuk .kartu-masuk::after, .hal-masuk .masuk-logo, .hal-masuk .kartu-masuk .tombol.utama::after, .hal-masuk .masuk-kop h1, .hal-masuk .masuk-kop p, .hal-masuk .kartu-masuk form > *, .hal-masuk .masuk-catatan { animation: none; } }
/* Catatan di kartu masuk: tepat dua baris (satu kalimat per baris) */
.hal-masuk .masuk-catatan { margin-left: -14px; margin-right: -14px; font-size: 11.5px; }
.hal-masuk .masuk-catatan span { display: block; white-space: nowrap; }
@media (max-width: 440px) { .hal-masuk .masuk-catatan { font-size: 10.5px; margin-left: -18px; margin-right: -18px; } }
@media (max-width: 380px) { .hal-masuk .masuk-catatan { font-size: 9.8px; } }

/* ── Kartu masuk: kaca gelap kebiruan (MOSSA) supaya menyatu dgn latar foto (dulu putih polos, terasa terpisah) ── */
.hal-masuk .kartu-masuk { background: linear-gradient(160deg, rgba(8, 44, 82, .66), rgba(4, 18, 36, .80)); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); border: 1px solid rgba(255, 255, 255, .14); color: #fff; }
.hal-masuk .kartu-masuk .masuk-kop h1 { color: #fff; }
.hal-masuk .kartu-masuk .masuk-kop p { color: rgba(255, 255, 255, .72); }
.hal-masuk .kartu-masuk label { color: rgba(255, 255, 255, .92); }
.hal-masuk .kartu-masuk .masuk-catatan { color: rgba(255, 255, 255, .62); }
.hal-masuk .masuk-logo { width: 88px; height: 88px; padding: 8px; border-radius: 24px; background: radial-gradient(circle at 50% 35%, #fff, #eef3fa); box-shadow: 0 10px 26px rgba(0, 0, 0, .35), 0 0 0 1px rgba(245, 158, 11, .55); filter: none; }
.hal-masuk .kartu-masuk input[type=text], .hal-masuk .kartu-masuk input[type=password] { background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .24); color: #fff; caret-color: #fde68a; }
.hal-masuk .kartu-masuk input::placeholder { color: rgba(255, 255, 255, .5); }
.hal-masuk .kartu-masuk input:focus { border-color: var(--emas); background: rgba(255, 255, 255, .13); box-shadow: 0 0 0 4px rgba(245, 158, 11, .22), 0 8px 22px rgba(0, 0, 0, .25); outline: none; }
/* Isian otomatis browser (biru muda bawaan) disamakan dgn kartu */
.hal-masuk .kartu-masuk input:-webkit-autofill, .hal-masuk .kartu-masuk input:-webkit-autofill:hover, .hal-masuk .kartu-masuk input:-webkit-autofill:focus { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 1000px #0c3560 inset; box-shadow: 0 0 0 1000px #0c3560 inset; caret-color: #fde68a; transition: background-color 9999s ease-out; }
.hal-masuk .kartu-masuk input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #0c3560 inset, 0 0 0 4px rgba(245, 158, 11, .22); box-shadow: 0 0 0 1000px #0c3560 inset, 0 0 0 4px rgba(245, 158, 11, .22); }
/* Tombol Masuk emas -- senada dgn aksen latar */
.hal-masuk .kartu-masuk .tombol.utama { background: linear-gradient(90deg, #d97706, #f59e0b, #fef0c2, #f59e0b, #d97706); background-size: 220% 100%; border-color: rgba(246, 231, 166, .7); color: #08203a; font-weight: 800; box-shadow: 0 10px 24px rgba(245, 158, 11, .28); }
.hal-masuk .kartu-masuk .tombol.utama:hover { box-shadow: 0 16px 32px rgba(245, 158, 11, .42); background-color: transparent; }
.hal-masuk .kartu-masuk .pesan.galat { background: rgba(190, 18, 60, .22); border: 1px solid rgba(253, 164, 175, .45); color: #ffe4e6; }
@keyframes kartupendar { 0%, 100% { box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 0 rgba(245, 158, 11, 0); } 50% { box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 46px rgba(245, 158, 11, .30); } }

/* ── Halaman masuk: armada tambang (ekskavator menggali + konvoi dump truck, ADT, bulldozer) ── */
.masuk-jalan { height: 132px; }
.masuk-jalan .truk { display: none; }
.masuk-jalan .alat { display: block; overflow: visible; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)); }
.masuk-jalan .bak, .masuk-jalan .badan { fill: #f59e0b; } .masuk-jalan .badan.gelap { fill: #92400e; } .masuk-jalan .muatan, .masuk-jalan .bijih, .masuk-jalan .tumpukan { fill: #7a5a2b; }
.masuk-jalan .kabin { fill: #fde68a; } .masuk-jalan .kaca { fill: #0b3258; } .masuk-jalan .sasis, .masuk-jalan .sendi, .masuk-jalan .poros { fill: #d97706; }
.masuk-jalan .lengan { fill: none; stroke: #f59e0b; stroke-width: 10; stroke-linecap: round; } .masuk-jalan .lengan.tipis { stroke: #fbbf24; stroke-width: 7; }
.masuk-jalan .sekop, .masuk-jalan .bilah { fill: #e6ecf3; stroke: #5b6676; stroke-width: 1.5; stroke-linejoin: round; }
.masuk-jalan .rantai { fill: #141e2e; stroke: #e6ecf3; stroke-width: 2; } .masuk-jalan .roda-rantai { fill: #5b6676; stroke: #e6ecf3; stroke-width: 1.5; }
.masuk-jalan .rantai-jalan { fill: none; stroke: #97a3b3; stroke-width: 2; stroke-dasharray: 5 5; animation: rantaijalan .5s linear infinite; }
@keyframes rantaijalan { to { stroke-dashoffset: -10; } }
.masuk-jalan .goyang { animation: trukgoyang .5s ease-in-out infinite alternate; } .masuk-jalan .goyang.lambat { animation-duration: .7s; }
/* Ekskavator: tiga engsel berantai (titik engsel dlm koordinat gambar) */
.masuk-jalan .ekskavator { position: absolute; left: 3%; bottom: 0; }
.masuk-jalan .boom { transform-origin: 92px 66px; animation: gali-boom 7s ease-in-out infinite; }
.masuk-jalan .stick { transform-origin: 150px 26px; animation: gali-stick 7s ease-in-out infinite; }
.masuk-jalan .bucket { transform-origin: 176px 68px; animation: gali-bucket 7s ease-in-out infinite; }
.masuk-jalan .ekskavator .bijih { animation: gali-bijih 7s ease-in-out infinite; }
@keyframes gali-boom { 0%, 100% { transform: rotate(-10deg); } 30% { transform: rotate(14deg); } 55% { transform: rotate(10deg); } 75% { transform: rotate(-16deg); } }
@keyframes gali-stick { 0%, 100% { transform: rotate(-22deg); } 30% { transform: rotate(6deg); } 55% { transform: rotate(-30deg); } 75% { transform: rotate(-34deg); } }
@keyframes gali-bucket { 0%, 100% { transform: rotate(30deg); } 30% { transform: rotate(40deg); } 55% { transform: rotate(-35deg); } 75% { transform: rotate(-30deg); } 88% { transform: rotate(45deg); } }
@keyframes gali-bijih { 0%, 40% { opacity: 0; } 55%, 78% { opacity: 1; } 90%, 100% { opacity: 0; } }
/* Konvoi: semua kendaraan memakai lama putaran yang sama, hanya beda waktu berangkat -> tidak pernah bertumpuk */
.masuk-jalan .kendaraan { position: absolute; left: 0; bottom: 0; animation: konvoi 42s linear infinite; will-change: transform; }
.masuk-jalan .kendaraan.k1 { animation-delay: 0s; } .masuk-jalan .kendaraan.k2 { animation-delay: -14s; } .masuk-jalan .kendaraan.k3 { animation-delay: -28s; }
.masuk-jalan .kendaraan .debu { position: absolute; left: -46px; bottom: 2px; width: 60px; height: 22px; margin: 0; border-radius: 50%; background: radial-gradient(ellipse, rgba(226, 204, 160, .45), transparent 70%); filter: blur(4px); animation: debukembang 1.2s ease-in-out infinite alternate; }
@keyframes konvoi { from { transform: translate3d(-220px, 0, 0); } to { transform: translate3d(calc(100vw + 60px), 0, 0); } }
@media (prefers-reduced-motion: reduce) { .masuk-jalan .boom, .masuk-jalan .stick, .masuk-jalan .bucket { animation: none; } }

/* ── Halaman masuk: sapaan & jam, papan keselamatan, bukit tambang, suasana waktu, lampu alat berat ── */
.masuk-sapa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .92); }
.masuk-sapa i { color: #fde68a; font-size: 17px; } .masuk-sapa time { color: rgba(255, 255, 255, .7); font-weight: 500; }
.masuk-sapa time:not(:empty)::before { content: "·"; margin-right: 8px; }
.masuk-sampul > :nth-child(5) { animation-delay: .5s; }
/* Bukit berjenjang */
.masuk-bukit { position: fixed; left: -3%; right: -3%; bottom: 8px; height: 250px; z-index: 1; pointer-events: none; }
.masuk-bukit .lapis { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform .6s ease-out; }
.masuk-bukit .belakang { transform: translate3d(calc(var(--geser, 0) * -22px), 0, 0); } .masuk-bukit .belakang path { fill: rgba(6, 24, 44, .62); }
.masuk-bukit .depan { transform: translate3d(calc(var(--geser, 0) * -48px), 0, 0); } .masuk-bukit .depan path { fill: rgba(92, 52, 28, .74); }
.masuk-bukit .depan path.garis { fill: none; stroke: rgba(226, 170, 110, .55); stroke-width: 2; vector-effect: non-scaling-stroke; }
/* Suasana waktu (kelas di <body> dipasang masuk.js; tanpa skrip = siang) */
.masuk-suasana { position: fixed; inset: 0; z-index: 1; pointer-events: none; transition: background 1.2s ease, opacity 1.2s ease; }
.waktu-pagi .masuk-suasana { background: linear-gradient(180deg, rgba(255, 214, 140, .26), rgba(255, 190, 120, .08) 55%, transparent); }
.waktu-sore .masuk-suasana { background: linear-gradient(180deg, rgba(255, 138, 60, .34), rgba(190, 70, 40, .20) 55%, rgba(60, 20, 30, .18)); }
.waktu-malam .masuk-suasana { background: radial-gradient(1.5px 1.5px at 12% 14%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 28% 8%, #fff, transparent 60%), radial-gradient(1px 1px at 41% 19%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 57% 9%, #fff, transparent 60%), radial-gradient(1px 1px at 69% 22%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 83% 12%, #fff, transparent 60%), radial-gradient(1px 1px at 93% 26%, #fff, transparent 60%), linear-gradient(180deg, rgba(3, 8, 26, .66), rgba(2, 10, 18, .52)); }
/* Lampu rotator (selalu berkedip) & sorot lampu depan (hanya malam) */
.masuk-jalan .lampu { fill: #ffb300; animation: lampukedip .9s steps(2, jump-none) infinite; }
@keyframes lampukedip { from { opacity: 1; filter: drop-shadow(0 0 5px #ffb300); } to { opacity: .25; filter: none; } }
.masuk-jalan .sorot { fill: rgba(255, 240, 170, .34); opacity: 0; transition: opacity 1s ease; } .waktu-malam .masuk-jalan .sorot { opacity: 1; }
.waktu-malam .masuk-jalan .lampu { animation-name: lampukedipmalam; } @keyframes lampukedipmalam { from { opacity: 1; filter: drop-shadow(0 0 10px #ffb300) drop-shadow(0 0 18px #ff8f00); } to { opacity: .2; filter: none; } }
/* Wheel loader: bucket naik-turun pelan; konvoi kini empat kendaraan berjarak sama */
.masuk-jalan .angkat { transform-origin: 84px 36px; animation: loaderangkat 5s ease-in-out infinite; }
@keyframes loaderangkat { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(-14deg); } }
.masuk-jalan .kendaraan.k2 { animation-delay: -10.5s; } .masuk-jalan .kendaraan.k3 { animation-delay: -21s; } .masuk-jalan .kendaraan.k4 { animation-delay: -31.5s; }
@media (max-width: 980px) { .masuk-bukit { height: 130px; opacity: .8; } .masuk-sapa { justify-content: center; } .masuk-lambang { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .masuk-jalan .lampu, .masuk-jalan .angkat { animation: none; } .masuk-bukit .lapis { transition: none; } }
/* Sapaan + jam: pil kaca di pojok kiri atas layar (dulu menumpuk di atas lencana judul) */
.hal-masuk .masuk-sapa { position: fixed; top: 22px; left: 28px; z-index: 3; margin: 0; padding: 8px 16px; border-radius: 99px; background: rgba(7, 26, 48, .5); border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 13px; animation: isimuncul .7s ease-out .3s both; }
.masuk-sampul > :nth-child(5) { animation-delay: 0s; }
@media (max-width: 980px) { .hal-masuk .masuk-sapa { position: static; width: fit-content; max-width: calc(100% - 32px); margin: 16px auto 0; font-size: 12px; } .masuk-tata { min-height: calc(100vh - 60px); } }
/* HP: rapatkan supaya tombol Masuk terlihat tanpa banyak menggulir */
@media (max-width: 600px) { .masuk-tata { min-height: 0; padding: 14px 20px 40px; gap: 14px; } .hal-masuk .masuk-logo { width: 62px; height: 62px; padding: 6px; border-radius: 18px; margin-bottom: 6px; } .hal-masuk .kartu-masuk { padding: 22px 24px 20px; } .masuk-lambang { margin-top: 12px; } .masuk-sampul h2 { font-size: 25px; margin: 10px 0 6px; } .masuk-sampul > p { font-size: 13px; } .ubin-ni { width: 54px; height: 60px; } .ubin-ni b { font-size: 22px; } .cincin { width: 40px; height: 40px; font-size: 18px; } }

/* ── Tanpa zoom di HP (PWA Android & iOS) ── */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 900px) { input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important; } } /* iOS memperbesar layar bila huruf kolom isian < 16px */

/* ── Tabel menjadi kartu di HP (label kolom dari data-label, dipasang smkp.js) ── */
@media (max-width: 760px) {
    .gulir { overflow: visible; }
    .kartu.tanpa-pad:has(> .gulir > .tabel), .kartu.tanpa-pad:has(> .tabel) { background: none; border: 0; box-shadow: none; padding: 0; }
    .tabel, .tabel tbody, .tabel tbody tr, .tabel td { display: block; width: auto; }
    .tabel thead { display: none; }
    .tabel tbody tr { background: var(--putih); border: 1px solid var(--garis); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--bayang); }
    .tabel tbody tr[hidden] { display: none !important; }
    .tabel tbody tr:hover { background: var(--putih); }
    .tabel tbody tr.baris-na { opacity: .72; }
    .tabel td, .tabel tr:last-child td { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 6px 0; border: 0; border-bottom: 1px dashed #e8edf1; text-align: right; min-width: 0; overflow-wrap: anywhere; }
    .tabel td:last-child, .tabel tr:last-child td:last-child { border-bottom: 0; padding-bottom: 0; }
    .tabel td:empty { display: none; }
    .tabel td[data-label]::before { content: attr(data-label); flex: none; max-width: 42%; padding-top: 2px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--redup); }
    .tabel td > * { min-width: 0; }
    /* Sel pertama = judul kartu */
    .tabel td:first-child { justify-content: flex-start; text-align: left; padding-top: 0; font-size: 15px; }
    .tabel td:first-child::before { display: none; }
    .tabel td[colspan] { display: block; text-align: center; border: 0; padding: 6px 0; }
    .tabel td.angka-sel { text-align: right; } .tabel td .lebar-batang, .tabel td progress { max-width: 60%; }
    /* Tabel kriteria: kode + nama kriteria sebagai kepala kartu, tombol aksi selebar kartu */
    .tabel-kriteria tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; }
    .tabel-kriteria td { grid-column: 1 / -1; }
    .tabel-kriteria td.kol-kode { grid-column: 1; width: auto; border: 0; padding: 0 0 8px; font-size: 15px; }
    .tabel-kriteria td.kol-kode::before, .tabel-kriteria td[class^="tingkat-"]::before, .tabel-kriteria td.kol-aksi::before { display: none; }
    .tabel-kriteria td[class^="tingkat-"], .tabel-kriteria td.tingkat-1, .tabel-kriteria td.tingkat-2 { grid-column: 2; padding: 0 0 8px; border: 0; text-align: left; justify-content: flex-start; font-size: 15px; }
    .tabel-kriteria td[class^="tingkat-"] a { font-weight: 700 !important; }
    .tabel-kriteria td:first-child:not(.kol-kode) { grid-column: 1 / -1; padding-bottom: 6px; border: 0; }
    .tabel-kriteria td.kol-aksi { padding-top: 10px; } .tabel-kriteria td.kol-aksi .tombol { width: 100%; justify-content: center; padding: 10px; }
    .tabel-kriteria td.sel-biro { flex-wrap: wrap; }
    /* Tabel pengguna & riwayat */
    .tabel-pengguna td:first-child { padding-bottom: 8px; } .tabel td.tak-pecah { white-space: normal; }
    .tabel td details, .tabel td form { width: 100%; text-align: left; }
}
/* HP: kartu angka pertama selebar layar, TIGA kartu berikutnya berjajar satu baris (dulu 2 + 1 menggantung) */
@media (max-width: 900px) {
    .angka-utama, .angka-utama.empat { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .angka-utama .kartu:first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .angka-utama .kartu:not(:first-child) { padding: 12px 10px; }
    .angka-utama .kartu:not(:first-child) .label { font-size: 10px; letter-spacing: .03em; line-height: 1.25; min-height: 2.5em; display: block; overflow-wrap: anywhere; }
    .angka-utama .kartu:not(:first-child) strong { font-size: 26px; }
    .angka-utama .kartu:not(:first-child) .sub { font-size: 11px; line-height: 1.3; display: block; overflow-wrap: anywhere; }
}
/* HP: saringan kriteria dua baris -- (1) pencarian + jumlah hasil, (2) semua pilihan berjajar */
@media (max-width: 900px) {
    #bilahSaring { gap: 8px; }
    #bilahSaring .saring-cari { order: 0; flex: 1 1 0; min-width: 0; }
    #bilahSaring .saring-hitung { order: 1; flex: none; margin: 0; white-space: nowrap; font-size: 12px; }
    #bilahSaring select { order: 2; flex: 1 1 0; width: auto; min-width: 0; padding: 0 22px 0 10px; }
    #bilahSaring #saringAtur { order: 3; flex: none; width: 42px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
    #bilahSaring #saringAtur i { font-size: 16px; }
}
@media (max-width: 900px) {
    /* Baris 1 dipaksa hanya pencarian + jumlah (dulu semua menciut jadi satu baris); baris 2 = pilihan berjajar */
    #bilahSaring .saring-cari { flex: 1 1 60%; min-width: 60%; }
    #bilahSaring select { flex: 1 1 25%; }
    /* "Tahun audit" (dan pilihan sejenis di kepala halaman) selebar layar */
    .kepala-hal > .pilih-tahun, .kepala-hal > .kepala-aksi { flex: 1 1 100%; width: 100%; }
    .pilih-tahun select { flex: 1 1 auto; width: 100%; min-width: 0; }
    .pilih-tahun label { flex: none; white-space: nowrap; }
}
@media (max-width: 900px) {
    /* Selalu tepat dua baris: jumlah hasil ditaruh DI DALAM kotak cari (kanan), tombol atur ulang ikut baris pilihan */
    #bilahSaring { position: relative; }
    #bilahSaring .saring-cari { flex: 1 1 100%; min-width: 100%; }
    #bilahSaring .saring-cari input { padding-right: 132px; }
    #bilahSaring .saring-hitung { position: absolute; top: 12px; right: 24px; height: 42px; display: flex; align-items: center; max-width: 120px; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
    #bilahSaring select { flex: 1 1 0; }
    .kepala-aksi > .pilih-tahun, .kepala-aksi > .tombol, .kepala-aksi > a.tombol { flex: 1 1 100%; width: 100%; justify-content: center; }
    .kepala-aksi > .pilih-tahun { justify-content: flex-start; }
}
@media (max-width: 900px) {
    /* Pilihan tahun: label di kiri, kotaknya pendek di sisi kanan */
    .pilih-tahun, .kepala-hal > .pilih-tahun, .kepala-aksi > .pilih-tahun { justify-content: space-between; }
    .pilih-tahun select { flex: none; width: auto; min-width: 104px; }
    /* Saringan: pilihan berhuruf lebih kecil supaya tulisannya terbaca saat berjajar tiga */
    #bilahSaring select { font-size: 13px !important; padding: 0 20px 0 9px; }
    #bilahSaring .saring-hitung { max-width: 140px; font-size: 11.5px; }
    #bilahSaring .saring-cari input { padding-right: 150px; }
}
@media (max-width: 900px) {
    /* Panah bawaan pilihan dibuang di HP: ruangnya dipakai untuk tulisan (ketuk tetap membuka daftar) */
    #bilahSaring select { -webkit-appearance: none; appearance: none; background-image: none; padding: 0 8px; text-align: center; text-align-last: center; font-weight: 600; letter-spacing: -.01em; }
    #bilahSaring #saringAtur { width: 38px; }
}
/* HP: kartu Rincian & Arsip -- nama isian kecil di atas, isinya di bawah selebar kartu (dulu dua kolom sempit, teks terpotong-potong) */
@media (max-width: 600px) {
    .rinci, .dua-kolom .rinci { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .rinci dt { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #e8edf1; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
    .rinci dt:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
    .rinci dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 4px; min-width: 0; font-size: 15px; }
    .rinci dd > form, .rinci dd > .sop-daftar { flex: 1 1 100%; min-width: 0; }
    .rinci dd .tombol.kecil.pensil-kiri, .rinci dd .tombol.kecil { margin: 0; }
    .rinci dd .lencana.biro { border-radius: 10px; padding: 4px 10px; }
    .sop-daftar { flex-direction: column; align-items: stretch; gap: 8px; }
    .sop-daftar li { align-items: flex-start; } .sop-daftar li > span:last-of-type { flex: 1 1 auto; }
    .sop-daftar li:has(> .sop-tambah) { display: inline-flex; }
    .rinci dd .sop-daftar .tombol.kecil.sop-tambah { width: 100%; justify-content: center; padding: 9px 10px; }
    .sop-daftar .sop-hapus { margin-left: auto; }
}
/* HP: kartu elemen 3 kolom per baris; kartu ke-7 (sendirian di baris ketiga) selebar layar */
@media (max-width: 900px) {
    .kisi-elemen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .kisi-elemen .elemen:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .kisi-elemen .elemen { padding: 12px 10px; gap: 5px; }
    .kisi-elemen .elemen-kode { width: 32px; height: 28px; font-size: 12px; border-radius: 8px; }
    .kisi-elemen .elemen-nama { font-size: 12px; line-height: 1.25; overflow-wrap: anywhere; }
    .kisi-elemen .elemen-pct { font-size: 18px; }
    .kisi-elemen .elemen .sub { font-size: 10.5px; line-height: 1.3; }
    .kisi-elemen .elemen:last-child:nth-child(3n + 1) .elemen-nama { font-size: 14px; }
}
.baris-tautan .tombol > i { display: none; }
/* HP: formulir unggah eviden lebih rapat & sejajar */
@media (max-width: 640px) {
    #kotakUnggah { padding: 16px 14px; }
    #barisEviden > .baris-eviden { padding: 12px; }
    .baris-eviden .zona-unggah.kecil { padding: 12px 10px; }
    /* Tautan: satu baris -- ikon di dalam kotak isian, tombol tambah berupa ikon + di kanan */
    .baris-tautan { position: relative; flex-wrap: nowrap; gap: 8px; }
    .baris-tautan > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
    .baris-tautan input { flex: 1 1 0; flex-basis: 0; height: 44px; padding-left: 38px; text-overflow: ellipsis; }
    .baris-tautan .tombol { flex: none; width: 44px; height: 44px; margin-left: 0; padding: 0; justify-content: center; }
    .baris-tautan .tombol > i { display: inline-block; font-size: 17px; } .baris-tautan .tombol > span { display: none; }
    /* Tambah eviden | Unggah semua berdampingan; tombol Batalkan (saat mengunggah) turun ke baris sendiri */
    #kotakUnggah .aksi-unggah { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
    #kotakUnggah .aksi-unggah .tombol { white-space: nowrap; padding: 11px 8px; font-size: 14px; }
    #kotakUnggah .aksi-unggah #batalUnggah { grid-column: 1 / -1; grid-row: 2; }
    #isiUnggah > p.redup.kecil { font-size: 12px; line-height: 1.45; }
}
/* HP: kartu Rincian lebih ringkas -- Elemen & Sub kriteria berdampingan, pensil di kanan, dokumen SOP/IK sebagai ubin */
@media (max-width: 600px) {
    .tata-kriteria > aside > .kartu-rinci .rinci { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; }
    .tata-kriteria > aside > .kartu-rinci .rinci > dt, .tata-kriteria > aside > .kartu-rinci .rinci > dd { grid-column: 1 / -1; }
    .tata-kriteria > aside > .kartu-rinci .rinci > dt:nth-of-type(1) { grid-column: 1; grid-row: 1; }
    .tata-kriteria > aside > .kartu-rinci .rinci > dd:nth-of-type(1) { grid-column: 1; grid-row: 2; }
    .tata-kriteria > aside > .kartu-rinci .rinci > dt:nth-of-type(2) { grid-column: 2; grid-row: 1; margin-top: 0; padding-top: 0; border-top: 0; }
    .tata-kriteria > aside > .kartu-rinci .rinci > dd:nth-of-type(2) { grid-column: 2; grid-row: 2; }
    .rinci dd { font-size: 14.5px; line-height: 1.35; }
    .rinci dd > .tombol.kecil.pensil-kiri { order: 5; margin-left: auto; }
    .rinci dd > #picTeks { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
    /* Daftar SOP/IK: tiap dokumen satu ubin; tombol tambah berdampingan di bawahnya */
    .sop-daftar { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 8px; }
    .sop-daftar li { flex: 1 1 100%; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--garis); border-radius: 12px; background: #f8fafc; }
    .sop-daftar li > span:not(.lencana) { flex: 1 1 0; min-width: 0; }
    .sop-daftar li .tautan-luar { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--teks); }
    .sop-daftar li .tautan-luar i { flex: none; margin-top: 1px; font-size: 16px; color: var(--hijau); }
    .rinci dd .sop-daftar .tombol.kecil.pensil-kiri { order: 5; margin: 0; flex: none; }
    .sop-daftar .sop-hapus { order: 6; margin-left: 0; }
    .sop-daftar li:has(> .sop-tambah) { flex: 1 1 40%; padding: 0; border: 0; background: none; display: flex; }
    .rinci dd .sop-daftar .tombol.kecil.sop-tambah { padding: 9px 8px; font-size: 13px; white-space: nowrap; }
}

/* ── HP / PWA: bilah atas BENAR-BENAR terkunci. Halaman tidak lagi bergulir di jendela (di iOS itu membuat
   bilah ikut "memantul" saat ditarik); yang bergulir hanya isi di bawah bilah. Juga memberi ruang utk poni /
   bilah status iPhone (viewport-fit=cover + safe-area). ── */
.atas { padding-top: env(safe-area-inset-top, 0px); height: calc(64px + env(safe-area-inset-top, 0px)); padding-left: calc(16px + env(safe-area-inset-left, 0px)); padding-right: calc(16px + env(safe-area-inset-right, 0px)); }
.sisi { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
@media (max-width: 1023px) {
    html:has(> body:not(.hal-masuk)) { height: 100%; overflow: hidden; }
    body:not(.hal-masuk) { height: 100%; overflow: hidden; position: fixed; inset: 0; width: 100%; }
    body:not(.hal-masuk) .atas { position: fixed; top: 0; left: 0; right: 0; }
    body:not(.hal-masuk) .isi { position: fixed; top: calc(64px + env(safe-area-inset-top, 0px)); left: 0; right: 0; bottom: 0; margin: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
        padding-top: 16px; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); padding-left: calc(16px + env(safe-area-inset-left, 0px)); padding-right: calc(16px + env(safe-area-inset-right, 0px)); }
}
/* Halaman masuk: beri ruang poni / bilah status */
.hal-masuk .masuk-sapa { top: calc(22px + env(safe-area-inset-top, 0px)); }
@media (max-width: 980px) { .hal-masuk .masuk-sapa { margin-top: calc(16px + env(safe-area-inset-top, 0px)); } }
/* HP: tombol ikon kecil (pensil dll.) cukup besar utk disentuh jari */
@media (max-width: 1023px) { .rinci dd .tombol.kecil.pensil-kiri, .sop-daftar .tombol.kecil.pensil-kiri { min-width: 38px; min-height: 38px; display: inline-grid; place-items: center; } .sop-daftar .sop-hapus, .tombol-buang, .tombol-lihat { min-width: 34px; min-height: 34px; } }
/* HP: pilihan + tombol di kepala halaman (Pengguna, Rekap) satu baris */
@media (max-width: 900px) {
    .kepala-hal > .kepala-aksi { flex-wrap: nowrap; gap: 8px; }
    .kepala-aksi > .pilih-tahun { flex: 1 1 0; width: auto; min-width: 0; }
    .kepala-aksi > .pilih-tahun label { display: none; }
    .kepala-aksi > .pilih-tahun select { flex: 1 1 auto; width: 100%; min-width: 0; }
    .kepala-aksi > .tombol, .kepala-aksi > a.tombol { flex: 0 0 auto; width: auto; white-space: nowrap; }
    .kepala-aksi > .tombol:only-child, .kepala-aksi > a.tombol:only-child { flex: 1 1 100%; }
}
/* HP: halaman masuk pas satu layar (tanpa menggulir). Bagian hiasan dikurangi bertahap bila layar pendek. */
@media (max-width: 980px) {
    .hal-masuk .isi { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; min-height: 100dvh; padding: 0 0 12px; }
    .hal-masuk .masuk-sapa { flex: none; margin: calc(10px + env(safe-area-inset-top, 0px)) auto 0; padding: 6px 14px; }
    .masuk-tata { flex: 0 1 auto; min-height: 0; padding: 10px 20px 8px; gap: 12px; }
    .hal-masuk .kartu-masuk .masuk-kop p { display: none; } /* sama dgn teks di atas kartu */
    .hal-masuk .kartu-masuk .masuk-kop { margin-bottom: 10px; }
    .hal-masuk .kartu-masuk form label { margin-top: 10px; }
    .hal-masuk .kartu-masuk .masuk-catatan { margin-top: 12px; }
}
@media (max-width: 980px) and (max-height: 800px) {
    .masuk-lambang { display: none; }
    .hal-masuk .masuk-logo { width: 54px; height: 54px; margin-bottom: 4px; }
    .hal-masuk .kartu-masuk { padding: 18px 22px 16px; }
}
@media (max-width: 980px) and (max-height: 680px) {
    .masuk-sampul > p { display: none; }
    .masuk-sampul h2 { font-size: 22px; margin: 8px 0 0; }
    .hal-masuk .masuk-logo { display: none; }
    .hal-masuk .kartu-masuk .masuk-kop h1 { font-size: 19px; }
}
@media (max-width: 980px) and (max-height: 580px) { .hal-masuk .masuk-sapa { display: none; } .masuk-cap { display: none; } }
@media (max-width: 600px) { .masuk-sampul h2 { font-size: min(25px, 6vw); white-space: nowrap; } }
/* HP: syarat kata sandi satu baris */
@media (max-width: 600px) { .syarat { flex-wrap: nowrap; justify-content: space-between; gap: 6px; font-size: 10.5px; } .syarat li { gap: 4px; white-space: nowrap; min-width: 0; } .syarat i { font-size: 10px; } }
@media (max-width: 360px) { .syarat { font-size: 9.5px; } }

/* ── Sidebar ciut (layar lebar) = rel ikon 76px seperti admin web & Portal AMIRA; tombol ☰ menciutkan / melebarkan.
   Peralihan dibuat halus: tata letak isi sidebar SAMA di kedua keadaan (ikon tidak pindah tempat, teks berlebar tetap
   sehingga tidak melipat ulang) -- yang berubah hanya lebar sidebar (memotong teks) dan kepudaran teks.
   Di layar sempit sidebar tetap berupa laci (kelas sisi-buka), aturan ini tidak dipakai. ── */
@media (min-width: 1024px) {
    .sisi { overflow: hidden; transition: width .32s cubic-bezier(.4, 0, .2, 1); will-change: width; }
    .atas { transition: left .32s cubic-bezier(.4, 0, .2, 1); }
    body:not(.hal-masuk) .isi { transition: margin-left .32s cubic-bezier(.4, 0, .2, 1); }
    /* teks berlebar tetap = tidak ada lipat-ulang saat sidebar menyempit */
    .sisi-merek > span { flex: none; width: 176px; }
    .sisi-menu a > span, .sisi-kaki button > span { flex: none; width: 172px; text-align: left; }
    .sisi-merek > span, .sisi-menu a > span, .sisi-kaki button > span { transition: opacity .2s ease; }
    .sisi-menu { overflow-x: hidden; scrollbar-width: none; } .sisi-menu::-webkit-scrollbar { display: none; }
    .sisi-menu a, .sisi-kaki button { overflow: hidden; }
    /* judul kelompok: teks memudar, garis pemisah muncul -- tinggi baris tidak berubah */
    .sisi-judul { position: relative; white-space: nowrap; transition: color .2s ease; }
    .sisi-judul::after { content: ""; position: absolute; left: -2px; top: 50%; width: 28px; height: 1px; background: rgba(255, 255, 255, .18); opacity: 0; transition: opacity .25s ease; }
    html.sisi-ciut .sisi { width: 76px; }
    html.sisi-ciut .atas { left: 76px; }
    html.sisi-ciut body:not(.hal-masuk) .isi { margin-left: 76px; }
    html.sisi-ciut .sisi-merek > span, html.sisi-ciut .sisi-menu a > span, html.sisi-ciut .sisi-kaki button > span { opacity: 0; pointer-events: none; }
    html.sisi-ciut .sisi-judul { color: transparent; } html.sisi-ciut .sisi-judul::after { opacity: 1; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) { .sisi, .atas, body:not(.hal-masuk) .isi { transition: none; } }
/* Bagian yang hanya tampil di layar lebar (mis. nama sub kriteria di kartu Rincian; di HP cukup kodenya) */
@media (max-width: 600px) { .hanya-lebar { display: none; } }
.ikon-gagal { color: var(--kurang); }
/* Judul kolom sejajar dgn isinya: kolom angka rata kanan di kepala MAUPUN isi (dulu aturan umum ".tabel th"
   memaksa semua judul rata kiri sehingga judul dan angkanya tidak segaris). */
.tabel th.angka-sel, .tabel td.angka-sel { text-align: right; }
.tabel th.kol-aksi, .tabel td.kol-aksi { text-align: right; }
.tabel th.kol-kode { color: var(--redup); font-weight: 700; }
@media (max-width: 760px) { .baris-pilih > .tombol { flex-direction: column; gap: 2px; padding: 0 10px; font-size: 12px; } .baris-pilih > .tombol i { font-size: 18px; } }
/* Detail kriteria (modal dari kartu Rincian) -- D-16Okt */
.kartu-judul-aksi { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--garis); }
.kartu-judul-aksi h2 { margin: 0; padding: 0; border: 0; }
.kartu-judul-aksi .tombol { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.detail-kriteria[hidden] { display: none; }
.detail-kotak { width: min(720px, 100%); max-height: min(86vh, 100%); display: flex; flex-direction: column; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.detail-badan { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px 20px; }
.detail-badan .rinci dd > div + div { margin-top: 4px; }
html.kunci-gulir, html.kunci-gulir body, html.kunci-gulir main.isi { overflow: hidden; }
.detail-kotak .pratinjau-kepala strong { white-space: normal; }
.detail-isi { line-height: 1.65; white-space: normal; overflow-wrap: anywhere; }
.detail-jejak { margin-top: 14px; }
.detail-form { display: flex; flex-direction: column; gap: 8px; }
.detail-form textarea { width: 100%; min-height: 260px; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 10px; font: inherit; line-height: 1.6; resize: vertical; }
.kartu-syarat .kartu-judul-aksi { margin-bottom: 12px; }
.dua-kolom.tata-kriteria > aside > .kartu-syarat { grid-column: 1 / -1; } /* Persyaratan selebar penuh di atas Rincian */
.dua-kolom.tata-kriteria > aside > .kartu-rinci:last-child { grid-column: 1 / -1; } /* tanpa kartu Arsip -> Rincian juga selebar penuh */
/* D-16Okt: poin persyaratan pada unggah eviden, daftar eviden, dan kartu Persyaratan */
.pilih-poin { margin-top: 8px; }
.pilih-poin .pilih-daftar label { align-items: flex-start; font-weight: 500; line-height: 1.4; }
.pilih-poin .pilih-daftar input { margin-top: 2px; }
.lencana-poin { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--hijau-muda); color: var(--hijau); font-size: 12px; font-weight: 600; white-space: nowrap; }
.lencana-bukti { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: #f1f5f9; color: var(--redup); font-size: 11.5px; font-weight: 600; white-space: nowrap; vertical-align: 1px; }
.lencana-bukti.ada { background: var(--hijau-muda); color: var(--hijau); }
.berkas-isi > .lencana-poin { align-self: flex-start; margin: 3px 0 0; }
/* D-17Okt: daftar sub kriteria di halaman kriteria induk */
.daftar-sub { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.daftar-sub li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--garis); border-radius: 12px; background: #f8fafc; }
.daftar-sub li > a { min-width: 0; font-weight: 600; color: var(--teks); text-decoration: none; overflow-wrap: anywhere; }
.daftar-sub li > a:hover { color: var(--hijau); }
.daftar-sub li > span { flex: none; }
.form-poin { flex-basis: 100%; width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 12px; border: 1px solid var(--garis); border-radius: 12px; background: #fff; }
.form-poin-daftar { display: flex; flex-direction: column; gap: 4px; }
.form-poin-daftar label { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 6px 8px; border-radius: 8px; font-size: 13.5px; line-height: 1.4; cursor: pointer; }
.form-poin-daftar label:has(input:checked) { background: var(--hijau-muda); color: var(--hijau); }
.form-poin-daftar input { flex: none; margin-top: 2px; width: 16px; height: 16px; accent-color: var(--hijau); }
.daftar-berkas > li:has(> .form-poin:not([hidden])) { flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   MODE HP ALA APLIKASI NATIVE (18 Okt 2026, permintaan pengguna). SATU blok ini menimpa aturan HP
   lama di atas (urutan terakhir menang). Prinsip: huruf isi 15px / label >= 12px, target sentuh
   >= 44px, bilah atas 56px + bilah tab bawah, daftar ringkas (bukan kartu bertabel tinggi).
   Batal = hapus blok ini + nav.tab-bawah di _kerangka.php.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
.tab-bawah, .hp-saja { display: none; }
tr[data-tuju] { cursor: pointer; }
@media (max-width: 1023px) {
    /* Bilah atas 56px & bilah tab bawah */
    body:not(.hal-masuk) .atas { height: calc(48px + env(safe-area-inset-top, 0px)); gap: 6px; }
    .atas-judul { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
    .atas-tombol { width: 36px; height: 36px; } .atas-inisial { width: 32px; height: 32px; border-radius: 9px; font-size: 12px; }
    body:not(.hal-masuk) .isi { top: calc(48px + env(safe-area-inset-top, 0px)); bottom: calc(50px + env(safe-area-inset-bottom, 0px)); padding-bottom: 16px; }
    .tab-bawah { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; height: calc(50px + env(safe-area-inset-bottom, 0px)); padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
        background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-top: 1px solid var(--garis); }
    .tab-bawah > a, .tab-bawah > button { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 2px 2px; border: 0; background: none; font: inherit; font-size: 10px; font-weight: 600; color: #64748b; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .tab-bawah i { font-size: 18px; line-height: 1; }
    .tab-bawah .aktif { color: var(--hijau); }
    .tab-bawah > a:active, .tab-bawah > button:active { opacity: .6; }
    body.sisi-buka .tab-bawah { visibility: hidden; }
}
@media (max-width: 760px) {
    /* ── Tipografi & sentuhan ── */
    body:not(.hal-masuk) { font-size: 13px; line-height: 1.45; }
    body:not(.hal-masuk) .isi { padding-left: calc(12px + env(safe-area-inset-left, 0px)); padding-right: calc(12px + env(safe-area-inset-right, 0px)); padding-top: 12px; }
    h1 { font-size: 17px; letter-spacing: -.01em; } h2 { font-size: 14px; margin-bottom: 10px; }
    .kecil, small { font-size: 11.5px; }
    .remah { font-size: 12px; margin-bottom: 2px; }
    .kepala-hal { margin-bottom: 14px; gap: 10px; }
    .kartu { border-radius: 12px; padding: 14px; } .kartu.tanpa-pad { padding: 0; }
    .tombol { min-height: 34px; padding: 6px 12px; font-size: 13px; border-radius: 9px; } .tombol.kecil { min-height: 30px; min-width: 30px; padding: 4px 8px; font-size: 12px; border-radius: 8px; }
    .lencana, .lencana-poin { font-size: 10.5px; }
    ul.syarat { flex-wrap: wrap; justify-content: flex-start; gap: 4px 14px; font-size: 12.5px; } ul.syarat li { white-space: nowrap; }
    .judul-bagian { font-size: 11px; letter-spacing: .06em; margin: 16px 4px 6px; }
    .hp-saja { display: block; }
    /* Batas bawah keterbacaan 12px untuk label kecil (dt Rincian, label formulir, keterangan kartu angka) */
    .angka-utama .kartu .sub, .kartu.angka .sub, .lencana-bukti, .saring-hitung, .label-kecil, .rinci dt, dl dt, .kartu label, .form-akun label { font-size: 11px !important; }
    .tabel td[data-label]::before { font-size: 11px; letter-spacing: .02em; text-transform: none; font-weight: 600; }
    .pilih-tahun { font-size: 12px; }

    /* ── Ringkasan: kartu angka ── */
    .angka-utama .kartu:not(:first-child) .label { font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 600; min-height: 0; }
    .angka-utama .kartu:not(:first-child) strong { font-size: 18px; } .angka-utama .kartu:first-child strong { font-size: 30px; } .angka-utama { gap: 8px; }
    .angka-utama .kartu .sub { font-size: 12px; }
    /* ── Ringkasan: per elemen = daftar baris (ikon kode · nama · persen · batang) ── */
    .kisi-elemen { grid-template-columns: minmax(0, 1fr); gap: 0; background: var(--putih); border: 1px solid var(--garis); border-radius: 14px; overflow: hidden; }
    .kisi-elemen .elemen, .kisi-elemen .elemen:last-child:nth-child(odd) { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "kode nama pct" "kode batang batang" "kode sub sub"; column-gap: 12px; row-gap: 4px; align-items: center;
        margin: 0; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--garis); border-radius: 0; box-shadow: none; grid-column: auto; min-height: 0; }
    .kisi-elemen .elemen:last-child { border-bottom: 0; }
    .kisi-elemen .elemen-kode { grid-area: kode; width: 30px; height: 30px; align-self: start; font-size: 12px; border-radius: 8px; }
    .kisi-elemen .elemen-nama { grid-area: nama; font-size: 13px; font-weight: 700; line-height: 1.3; }
    .kisi-elemen .elemen-pct { grid-area: pct; font-size: 13px; }
    .kisi-elemen .elemen progress { grid-area: batang; width: 100%; margin: 0; }
    .kisi-elemen .elemen .sub { grid-area: sub; font-size: 11px; }
    /* ── Ringkasan: per biro = baris ringkas (nama + persen, batang, keterangan) ── */
    .tabel-biro tbody tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 10px 12px; margin-bottom: 6px; }
    .tabel-biro td.sel-angka { display: none; }
    .tabel-biro td, .tabel-biro tr:last-child td { border: 0; padding: 0; text-align: left; justify-content: flex-start; }
    .tabel-biro td::before { display: none !important; }
    .tabel-biro td:first-child { font-size: 13px; }
    .tabel-biro td.lebar-batang { display: block; } .tabel-biro td .batang-baris { max-width: none; width: 100%; } .tabel-biro td .batang-baris progress { max-width: none; flex: 1; }
    .tabel-biro td small.hp-saja { margin-top: 2px; color: var(--redup); font-size: 11px; }

    /* ── Daftar kriteria (Semua / Elemen / Biro): satu baris ringkas per kriteria, ketuk = buka ── */
    .tabel-kriteria tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 5px; padding: 9px 28px 9px 11px; margin-bottom: 6px; position: relative; border-radius: 11px; }
    .tabel-kriteria tbody tr[data-tuju]::after { content: "\F285"; font-family: "bootstrap-icons"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 14px; }
    .tabel-kriteria tbody tr:active { background: #f1f5f9; }
    .tabel-kriteria td, .tabel-kriteria tr:last-child td { display: inline-flex; flex: 0 0 auto; width: auto; border: 0; padding: 0; text-align: left; justify-content: flex-start; align-items: center; gap: 6px; }
    .tabel-kriteria td::before { display: none !important; }
    .tabel-kriteria td.kol-kode { order: 1; font-size: 12px; font-weight: 800; color: var(--hijau); padding: 0; }
    .tabel-kriteria td[class^="tingkat-"] { order: 2; flex: 1 1 calc(100% - 56px); min-width: 0; padding: 0; font-size: 13px; line-height: 1.3; }
    .tabel-kriteria td[class^="tingkat-"] a { color: var(--teks); font-weight: 700 !important; }
    .tabel-kriteria td.sel-elemen { display: none !important; } /* kode "I.5" sudah menunjukkan elemennya */
    .tabel-kriteria td.sel-biro { order: 4; flex-wrap: wrap; }
    .tabel-kriteria .lencana, .tabel-kriteria .lencana-poin { font-size: 10.5px; }
    .tabel-kriteria td.sel-eviden { order: 5; flex-wrap: wrap; }
    .tabel-kriteria td.sel-sop { order: 6; font-size: 11px; }
    .tabel-kriteria td.sel-sop:has(> span.redup:only-child) { display: none; }
    .tabel-kriteria td.sel-sop a { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; background: var(--hijau-muda); font-size: 10.5px; font-weight: 600; }
    .tabel-kriteria td.sel-sop a::after { content: " SOP/IK"; }
    .tabel-kriteria td.kol-aksi { display: none; }
    .tabel-kriteria tbody tr#saringKosong { display: block; padding: 16px; } .tabel-kriteria tbody tr#saringKosong[hidden] { display: none !important; }
    .tabel-kriteria tbody tr#saringKosong::after { display: none; }
    /* Bilah saring: cari selebar layar, pilihan berjajar 2 */
    .bilah-saring:not(#riwayatSaring) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; }
    .bilah-saring > .saring-cari { grid-column: 1 / -1; }
    /* Riwayat: cari selebar layar, lalu Pengguna|Kejadian, lalu Dari|Sampai, lalu tombol */
    #riwayatSaring { padding: 10px; }
    #riwayatSaring .saring-baris-1, #riwayatSaring .saring-baris-2, #riwayatSaring .saring-baris-2.terfilter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    #riwayatSaring .saring-baris-1 .saring-cari { grid-column: 1 / -1; }
    #riwayatSaring .saring-baris-2 { margin-top: 8px; }
    #riwayatSaring .saring-baris-2:not(.terfilter) > .tombol { grid-column: 1 / -1; }
    #riwayatSaring select, #riwayatSaring input, #riwayatSaring .tombol.kecil { min-height: 36px; }
    #riwayatSaring .tombol.kecil { gap: 6px; padding: 0 12px; } #riwayatSaring .tombol.kecil .teks-tombol { display: inline; }
    .bilah-saring > select:last-of-type:nth-of-type(odd) { grid-column: 1 / -1; }
    .bilah-saring select, .bilah-saring input { min-height: 36px; width: 100%; max-width: none; }
    .bilah-saring > .saring-hitung { grid-column: 1 / -1; text-align: center; }
    .bilah-saring > .tombol, .bilah-saring > button { grid-column: 1 / -1; }

    /* ── Halaman kriteria: baris berkas eviden (nama tidak lagi terhimpit tombol) ── */
    .daftar-berkas li { flex-wrap: wrap; align-items: flex-start; gap: 8px 10px; padding: 12px 0; }
    .daftar-berkas li > .ikon-berkas { flex: none; font-size: 22px; line-height: 1.2; }
    .daftar-berkas li > .berkas-isi { flex: 1 1 calc(100% - 40px); min-width: 0; }
    .daftar-berkas li > .berkas-isi .berkas-nama { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
    .daftar-berkas li > .berkas-isi + .tombol, .daftar-berkas li > .berkas-isi + a.tombol { margin-left: 32px; }
    .daftar-berkas li > .tombol { min-width: 32px; min-height: 30px; }
    .daftar-berkas li > .tombol.bahaya { margin-left: auto; }
    .grup-kepala { gap: 8px; }
    .daftar-sub li { flex-direction: column; align-items: flex-start; gap: 5px; padding: 10px 12px; }
    .daftar-sub li > a { font-size: 13px; line-height: 1.35; }

    /* ── Pengguna: kartu ringkas ── */
    .tabel-pengguna tbody tr:not(.baris-ubah) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; }
    .tabel-pengguna tbody tr:not(.baris-ubah) > td { display: flex; border: 0; padding: 0; width: auto; text-align: left; justify-content: flex-start; }
    .tabel-pengguna tr > td:first-child { flex: 1 1 calc(100% - 96px); min-width: 0; order: 1; } /* peran selalu turun ke baris 2 */
    .tabel-pengguna td.kol-aksi { order: 2; flex: none; gap: 6px; }
    .tabel-pengguna td.kol-aksi::before, .tabel-pengguna td.sel-peran::before, .tabel-pengguna td.sel-status::before { display: none !important; }
    .tabel-pengguna td.sel-peran { order: 3; } .tabel-pengguna td.sel-status { order: 4; flex-wrap: wrap; gap: 6px; align-items: center; }
    .tabel-pengguna td.sel-masuk { order: 5; flex: 1 1 100%; display: block; font-size: 11.5px; color: var(--teks); }
    .tabel-pengguna td.sel-masuk::before { display: inline !important; margin-right: 6px; max-width: none; }
    .tabel-pengguna td.sel-masuk small.blok { display: inline; margin-left: 6px; }
    .tabel-pengguna td.sel-hitung { order: 6; flex: 1 1 0; display: flex; flex-direction: column-reverse; align-items: center; gap: 0; padding: 5px 3px; background: #f8fafc; border-radius: 8px; font-size: 13px; font-weight: 700; }
    .tabel-pengguna td.sel-hitung::before { max-width: none; padding: 0; text-align: center; font-size: 11.5px; font-weight: 600; color: var(--redup); }
    .tabel-pengguna tr.baris-ubah > td { display: block; }

    /* ── Riwayat: kartu 3 baris (waktu + kejadian / pengguna / rincian · IP) ── */
    .tabel-riwayat tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; padding: 10px 12px; }
    .tabel-riwayat td, .tabel-riwayat tr:last-child td { display: block; border: 0; padding: 0; width: auto; text-align: left; }
    .tabel-riwayat td::before { display: none !important; }
    .tabel-riwayat td.sel-waktu { order: 1; flex: 1 1 auto; font-size: 12px; font-weight: 600; }
    .tabel-riwayat td.sel-aksi { order: 2; flex: none; }
    .tabel-riwayat td.sel-user { order: 3; flex: 1 1 100%; font-size: 12.5px; }
    .tabel-riwayat td.sel-user small { display: inline; margin-left: 6px; }
    .tabel-riwayat td.sel-sasaran { order: 4; flex: 1 1 100%; font-size: 12px; color: var(--teks); }
    .tabel-riwayat td.sel-sasaran.kosong-hp { display: none; }
    .tabel-riwayat td.sel-rinci { order: 5; flex: 1 1 100%; font-size: 11.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .tabel-riwayat td.sel-rinci:empty { display: none; }
    .tabel-riwayat td.sel-ip { order: 6; flex: 1 1 100%; font-size: 11px; }
    .tabel-riwayat td.sel-ip::before { content: "IP "; display: inline !important; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
    .tabel-riwayat td[colspan] { flex: 1 1 100%; text-align: center; }
    #riwayatSaring .saring-tgl { min-width: 0; } #riwayatSaring .saring-tgl input { min-width: 0; width: 100%; }

    /* ── Dialog & pratinjau ── */
    .dialog-lapis { align-items: end; padding: 0; }
    .dialog-kotak { width: 100%; border-radius: 18px 18px 0 0; padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px)); animation: lembarnaik .22s cubic-bezier(.2, .8, .2, 1); }
    .dialog-kotak::before { content: ""; display: block; width: 40px; height: 4px; margin: -6px auto 12px; border-radius: 4px; background: #cbd5e1; }
}
@keyframes lembarnaik { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .dialog-kotak { animation: none; } }
/* Kolom isian HP: 14px (diminta pengguna: tampilan lebih kecil). Khusus iOS Safari tetap 16px -- di bawah itu
   Safari memperbesar layar setiap kolom disentuh. @supports(-webkit-touch-callout) hanya cocok di iOS. */
@media (max-width: 900px) {
    body:not(.hal-masuk) input:not([type=checkbox]):not([type=radio]), body:not(.hal-masuk) select, body:not(.hal-masuk) textarea { font-size: 14px !important; }
    body:not(.hal-masuk) input:not([type=checkbox]):not([type=radio]):not([type=date]), body:not(.hal-masuk) select { padding-top: 7px; padding-bottom: 7px; }
}
@supports (-webkit-touch-callout: none) {
    @media (max-width: 900px) { body:not(.hal-masuk) input:not([type=checkbox]):not([type=radio]), body:not(.hal-masuk) select, body:not(.hal-masuk) textarea { font-size: 16px !important; } }
}
/* HP: kotak isian/pilihan lebih pendek (36px) & avatar halaman Akun lebih kecil (18 Okt 2026, pengguna: "masih terlalu besar") */
@media (max-width: 760px) {
    body:not(.hal-masuk) .bilah-saring select, body:not(.hal-masuk) .bilah-saring input, body:not(.hal-masuk) .pilih-tahun select, body:not(.hal-masuk) .kepala-aksi select,
    body:not(.hal-masuk) .isian input, body:not(.hal-masuk) .sandi-bungkus input, body:not(.hal-masuk) #riwayatSaring input, body:not(.hal-masuk) #riwayatSaring select {
        height: 36px; min-height: 36px !important; padding-top: 4px; padding-bottom: 4px; border-radius: 9px; }
    body:not(.hal-masuk) .bilah-saring .saring-cari input, body:not(.hal-masuk) #riwayatSaring .saring-cari input { padding-left: 34px; }
    .isian { margin-bottom: 10px; } .isian label { margin-bottom: 4px; }
    .akun-sampul { height: 56px; margin: 0 -14px; }
    .akun-inisial { width: 56px; height: 56px; margin-top: -28px; font-size: 20px; border-width: 3px; border-radius: 14px; }
    .akun-profil h2 { font-size: 15px; margin: 8px 0 4px; }
}
/* Perbaikan: baris TERAKHIR tabel biro (mis. SCM) dulu kalah oleh aturan lama `.tabel tr:last-child td` -> angka 17/8/9 muncul */
@media (max-width: 760px) {
    .tabel.tabel-biro tbody tr td.sel-angka { display: none !important; }
    .tabel.tabel-biro tbody tr td.lebar-batang { display: block !important; border: 0; padding: 0; }
    .tabel.tabel-biro tbody tr td:first-child { border: 0; padding: 0; }
    .tabel.tabel-kriteria tbody tr td.kol-aksi { display: none !important; }
}
/* HP: bilah saring kriteria 2x2 (Cari | Elemen / Biro PIC | Status), diminta pengguna 18 Okt 2026.
   Jumlah pilihan genap (mis. halaman Elemen: Cari | Biro / Status) -> pilihan terakhir selebar penuh. */
@media (max-width: 760px) {
    .bilah-saring:not(#riwayatSaring) > .saring-cari { grid-column: auto; }
    .bilah-saring:not(#riwayatSaring) > select:last-of-type:nth-of-type(odd) { grid-column: auto; }
    .bilah-saring:not(#riwayatSaring) > select:last-of-type:nth-of-type(even) { grid-column: 1 / -1; }
    .bilah-saring:not(#riwayatSaring) .saring-cari input { padding-right: 8px; text-overflow: ellipsis; }
    .bilah-saring:not(#riwayatSaring) > .saring-hitung { display: none; } /* tidak muat di kotak cari setengah lebar */
}
/* HP tingkat terkecil yang masih nyaman dibaca (18 Okt 2026, pengguna memilih "1"): isi 12px, judul 16px,
   lencana 10px, tombol 32/28px. JANGAN turun lagi: < 12px isi / < 10px lencana sulit dibaca. */
@media (max-width: 760px) {
    body:not(.hal-masuk) { font-size: 12px; }
    h1 { font-size: 16px; } h2 { font-size: 13px; }
    .atas-judul { font-size: 14px; }
    .kecil, small { font-size: 11px; }
    .lencana, .lencana-poin, .tabel-kriteria .lencana, .tabel-kriteria .lencana-poin, .tabel-kriteria td.sel-sop a { font-size: 10px; }
    .tombol { min-height: 32px; font-size: 12px; } .tombol.kecil { min-height: 28px; min-width: 28px; font-size: 11.5px; }
    .tabel-kriteria td.kol-kode { font-size: 11.5px; }
    .tabel-kriteria td[class^="tingkat-"] { font-size: 12.5px; }
    .kisi-elemen .elemen-nama, .kisi-elemen .elemen-pct, .tabel-biro td:first-child, .daftar-sub li > a, .daftar-berkas li > .berkas-isi .berkas-nama { font-size: 12.5px; }
    .kisi-elemen .elemen .sub, .tabel-biro td small.hp-saja, .tabel-pengguna td.sel-masuk, .tabel-riwayat td.sel-rinci, .tabel-riwayat td.sel-ip { font-size: 10.5px; }
    .tabel-riwayat td.sel-user, .tabel-riwayat td.sel-waktu, .tabel-riwayat td.sel-sasaran { font-size: 11.5px; }
    .tabel-pengguna td.sel-hitung { font-size: 12px; } .tabel-pengguna td.sel-hitung::before { font-size: 10px; }
    .angka-utama .kartu:first-child strong { font-size: 26px; } .angka-utama .kartu:not(:first-child) strong { font-size: 16px; }
    .angka-utama .kartu:not(:first-child) .label, .angka-utama .kartu .sub, .kartu.angka .sub { font-size: 10.5px !important; }
    .rinci dt, dl dt, .kartu label, .form-akun label, .tabel td[data-label]::before { font-size: 10.5px !important; }
    .judul-bagian { font-size: 10.5px; } .remah { font-size: 10.5px; } .pilih-tahun { font-size: 11px; }
    .tab-bawah > a, .tab-bawah > button { font-size: 9.5px; } .tab-bawah i { font-size: 17px; }
}
/* HP: tombol reset (⊗) saringan ikut baris ke-2, tidak turun ke baris ke-3 (diminta pengguna 18 Okt 2026).
   Saat reset tampil: kolom = 1fr | 1fr | 36px. Baris 1: Cari | pilihan pertama (melebar 2 kolom);
   baris 2: sisa pilihan + ⊗ di kolom ke-3. */
@media (max-width: 760px) {
    .bilah-saring:not(#riwayatSaring):has(> #saringAtur:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; }
    .bilah-saring:not(#riwayatSaring):has(> #saringAtur:not([hidden])) > .saring-cari { grid-column: 1; }
    .bilah-saring:not(#riwayatSaring):has(> #saringAtur:not([hidden])) > select:first-of-type { grid-column: 2 / 4; }
    .bilah-saring:not(#riwayatSaring):has(> #saringAtur:not([hidden])) > select:not(:first-of-type) { grid-column: auto; }
    .bilah-saring:not(#riwayatSaring):has(> #saringAtur:not([hidden])) > select:last-of-type:nth-of-type(even) { grid-column: 1 / 3; }
    .bilah-saring:not(#riwayatSaring) > #saringAtur:not([hidden]) { grid-column: 3; font-size: 0; gap: 0; width: 36px; min-width: 36px; min-height: 36px; height: 36px; padding: 0; justify-content: center; align-self: stretch; }
    .bilah-saring:not(#riwayatSaring) > #saringAtur i { margin: 0; font-size: 15px; }
}

/* Teks di bawah putaran lapisan memuat ("Menyimpan…", "Mengunggah… 45%"), 18 Okt 2026 */
#mossaPemuat .pemuat-teks { margin: 0; min-height: 1.2em; font-size: 13px; font-weight: 600; color: var(--hijau); font-variant-numeric: tabular-nums; text-align: center; }
#mossaPemuat .pemuat-teks:empty { display: none; }

/* Tanda WAJIB (*) poin persyaratan, 19 Okt 2026 */
.wajib { color: var(--kurang); font-weight: 800; }
.pilih-poin.salah > summary { border-color: var(--kurang) !important; background: #fff1f2; }

/* Poin persyaratan eviden ditulis lengkap, satu lencana per poin (19 Okt 2026) */
.daftar-poin-eviden { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; }
.daftar-poin-eviden > .lencana-poin { margin: 0; border-radius: 8px; padding: 2px 8px; }
.lencana-poin.poin-penuh { display: inline-flex; align-items: flex-start; gap: 4px; max-width: 100%; white-space: normal; text-align: left; line-height: 1.35; overflow-wrap: anywhere; }
.lencana-poin.poin-penuh i { flex: none; margin-top: 1px; }

/* ═══════════════ RASA APLIKASI NATIVE (HP / PWA) — mengikuti LSW (web/assets/css/pages/lsw_app.css), 19 Okt 2026 ═══════════════
   Tab bar ber-"pil" (Material 3), tombol ‹ kembali di sub-halaman, menu = lembar dari bawah, umpan balik tekan,
   transisi antar halaman, tab bar sembunyi saat mengetik, perbaikan iOS 26 PWA. Desktop (>=1024px) tidak berubah. */
.atas-kembali { display: none; }
@media (max-width: 1023px) {
    html { -webkit-tap-highlight-color: transparent; }
    body:not(.hal-masuk) { background: #f2f5f7; }
    /* Bilah atas: kaca buram seperti LSW */
    body:not(.hal-masuk) .atas { background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid rgba(15, 23, 42, .06); }
    .atas-kembali { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: -6px; border-radius: 999px; color: #0f172a; font-size: 20px; text-decoration: none; transition: background-color .15s ease; }
    .atas-kembali:hover { text-decoration: none; } .atas-kembali:active { background: rgba(15, 23, 42, .08); }
    .atas:has(.atas-kembali) #sisiTombol { display: none; } /* menu tetap di tab "Menu" */
    body:has(.atas-kembali) .kepala-hal .remah { display: none; } /* fungsi breadcrumb pindah ke tombol ‹ */
    .atas-judul { font-weight: 800; letter-spacing: -.01em; }

    /* Tab bar bawah: ikon dalam "pil", aktif = pil hijau lembut */
    .tab-bawah { height: auto; padding: 5px 6px max(5px, env(safe-area-inset-bottom, 0px)); gap: 2px; border-top: 1px solid rgba(15, 23, 42, .07); box-shadow: 0 -6px 24px rgba(15, 23, 42, .06); transition: transform .2s ease; }
    html.sedang-mengetik .tab-bawah { transform: translateY(110%); }
    .tab-bawah > a, .tab-bawah > button { min-height: 46px; gap: 3px; padding: 0; font-weight: 700; letter-spacing: .01em; -webkit-user-select: none; user-select: none; }
    .tab-bawah .tab-ic { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 26px; border-radius: 999px; transition: background-color .2s ease, transform .12s ease; }
    .tab-bawah .tab-ic i { font-size: 17px; }
    .tab-bawah .aktif .tab-ic { background: rgba(11, 79, 138, .12); }
    .tab-bawah > *:active .tab-ic { transform: scale(.9); }
    body:not(.hal-masuk) .isi { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }

    /* Menu lengkap = lembar dari bawah (bottom sheet) dengan pegangan */
    .sisi { inset: auto 0 0 0; width: auto; height: auto; max-height: 86vh; border-radius: 22px 22px 0 0; transform: translateY(105%); transition: transform .28s cubic-bezier(.2, .8, .2, 1); padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding-top: 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, .35); }
    .sisi::before { content: ""; display: block; flex: none; width: 40px; height: 5px; margin: 10px auto 0; border-radius: 999px; background: rgba(255, 255, 255, .45); }
    body.sisi-buka .sisi { transform: none; }
    .sisi-merek { height: 52px; }
    .sisi-menu a, .sisi-kaki button { min-height: 40px; }
    .sisi-lapis { transition: opacity .2s ease; }

    /* Umpan balik tekan (rasa native) */
    .tombol, .tabel-kriteria tbody tr[data-tuju], .tabel-biro tbody tr, .kisi-elemen .elemen, .daftar-sub li, .dialog-pilih, .sisi-menu a { transition-property: transform, background-color, color, box-shadow, opacity; transition-duration: .12s; }
    .tombol:not(:disabled):active, .tabel-kriteria tbody tr[data-tuju]:active, .tabel-biro tbody tr:active, .kisi-elemen .elemen:active, .daftar-sub li:active, .dialog-pilih:active, .sisi-menu a:active { transform: scale(.97); }

    /* Transisi halus antar halaman (browser yang mendukung View Transitions) */
    @view-transition { navigation: auto; }
    ::view-transition-old(root) { animation: smkpPudar .16s ease both; }
    ::view-transition-new(root) { animation: smkpMuncul .22s ease both; }
}
@keyframes smkpPudar { to { opacity: 0; } }
@keyframes smkpMuncul { from { opacity: 0; transform: translateY(6px); } }
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
    .sisi, .tab-bawah { transition: none; }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
/* iOS 26 (bug WebKit 301108, sama dgn LSW 19 Okt): PWA terpasang mendapat viewport lebih pendek setinggi
   status bar -> tab bar "melayang" di atas dasar layar. Perbaikan komunitas (frappe-ui #1289). */
@media (display-mode: standalone) {
    html:has(> body:not(.hal-masuk)) { min-height: min(100lvh, calc(100% + env(safe-area-inset-top))); }
}
/* HP/PWA: syarat kata sandi (Minimal 10 karakter · Memuat huruf · Memuat angka) SATU baris (19 Okt 2026) */
@media (max-width: 760px) {
    ul.syarat { flex-wrap: nowrap !important; justify-content: space-between; gap: 6px !important; font-size: 10.5px !important; }
    ul.syarat li { white-space: nowrap; gap: 3px; min-width: 0; flex: 0 1 auto; }
    ul.syarat li i { font-size: 10px; }
}

/* Form ubah/tambah akun (Pengguna): Nama | Peran | Akun aktif = SATU baris penuh selebar
   kontainer (diminta pengguna 19-Okt-2026). Dulu pil "Akun aktif" hanya selebar tulisannya
   (inline-flex) sehingga kolom ketiga menyisakan ruang kosong. Ketiganya kini setinggi sama. */
.form-akun input[type=text], .form-akun select { height: 44px; box-sizing: border-box; }
.form-akun .rata-bawah { align-self: end; padding-bottom: 0; }
.form-akun .rata-bawah .pil-centang { display: flex !important; width: 100%; height: 44px; box-sizing: border-box; justify-content: flex-start; padding: 0 12px; cursor: pointer; }

/* Form UBAH akun: Nama | Peran | Akun aktif | Batal · Simpan dalam SATU baris di desktop
   (diminta pengguna 19-Okt-2026). Blok "Biro" (peran PIC) tetap di baris bawahnya (order). */
.form-akun.satu-baris { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .9fr) auto; align-items: end; }
.form-akun.satu-baris > .aksi-unggah { grid-column: auto; display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 10px; margin-top: 0; }
/* width:auto — aturan umum .aksi-unggah .tombol{width:100%} membuat tiap tombol selebar wadahnya
   dan meluap ke kiri menimpa kolom Peran/Akun aktif. */
.form-akun.satu-baris > .aksi-unggah .tombol { flex: none; width: auto; height: 44px; white-space: nowrap; }
.form-akun.satu-baris > .blok-biro-pic { order: 1; }
@media (max-width: 1180px) {
    .form-akun.satu-baris { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .form-akun.satu-baris > .aksi-unggah { grid-column: 1 / -1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
    .form-akun.satu-baris > .aksi-unggah .tombol { width: 100%; }
}
@media (max-width: 640px) {
    .form-akun.satu-baris { grid-template-columns: 1fr; }
    .form-akun.satu-baris > .aksi-unggah { grid-auto-flow: row; }
}

/* Pratinjau video eviden (MP4/MOV), 19 Okt 2026 */
.pratinjau-badan video.pratinjau-video { display: block; width: 100%; height: 100%; max-height: 100%; background: #000; object-fit: contain; }

/* Tombol ‹ › HALAMAN dokumen di sisi modal pratinjau (pembaca PDF), 19 Okt 2026 */
.pratinjau-badan { position: relative; }
.pratinjau-nav[hidden] { display: none; }
.pratinjau-kotak { position: relative; }
.pratinjau-hitung { flex: none; margin-left: auto; padding: 2px 10px; border-radius: 999px; background: #f1f5f9; color: var(--redup); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pratinjau-nav { position: absolute; top: 50%; z-index: 6; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 999px; background: rgba(15, 23, 42, .62); color: #fff; font-size: 20px; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); transition: background-color .15s ease, transform .12s ease, opacity .15s ease; }
.pratinjau-nav.kiri { left: 10px; } .pratinjau-nav.kanan { right: 10px; }
.pratinjau-nav:hover:not(:disabled) { background: var(--hijau); } .pratinjau-nav:active:not(:disabled) { transform: scale(.92); }
.pratinjau-nav:disabled { opacity: .25; cursor: default; }
@media (max-width: 760px) { .pratinjau-nav { width: 38px; height: 38px; margin-top: -19px; font-size: 17px; } .pratinjau-nav.kiri { left: 6px; } .pratinjau-nav.kanan { right: 6px; } }

/* ── Chip "Biro saya" di header (20 Okt 2026): PIC -> daftar kriteria biro-nya; admin/Auditor Internal -> menu pilih biro ── */
.atas-biro { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 1px solid #bcd3ec; border-radius: 999px; background: var(--hijau-muda); color: var(--hijau); font-size: 13px; line-height: 1; white-space: nowrap; cursor: pointer; flex: none; list-style: none; user-select: none; }
.atas-biro::-webkit-details-marker { display: none; }
.atas-biro:hover { background: #d6e5f5; text-decoration: none; }
.atas-biro b { font-weight: 800; letter-spacing: .01em; }
.atas-biro .bi-building { font-size: 14px; }
.atas-biro-n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.atas-biro-ok { color: #16a34a; font-size: 14px; }
.atas-biro-panah { font-size: 11px; opacity: .7; transition: transform .2s; }
.atas-biro-menu { position: relative; flex: none; }
.atas-biro-menu[open] .atas-biro-panah { transform: rotate(180deg); }
.atas-biro-daftar { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: 280px; max-height: min(70vh, 460px); overflow-y: auto; padding: 6px; background: #fff; border: 1px solid var(--garis); border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, .16); }
.atas-biro-ket { margin: 4px 8px 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--redup); }
.atas-biro-daftar a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 8px; color: var(--teks); font-size: 13px; }
.atas-biro-daftar a span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atas-biro-daftar a:hover { background: #f1f5f9; text-decoration: none; }
.atas-biro-daftar a.aktif { background: var(--hijau-muda); color: var(--hijau); font-weight: 700; }
@media (max-width: 760px) {
    .atas-biro { height: 28px; padding: 0 8px; gap: 4px; font-size: 12px; }
    .atas-biro .bi-building { display: none; }
    .atas-biro-n { min-width: 18px; height: 18px; font-size: 10px; padding: 0 5px; }
    .atas-biro-daftar { position: fixed; right: 8px; left: 8px; width: auto; top: calc(52px + env(safe-area-inset-top, 0px)); }
}

/* Biro PIC per berkas eviden + formulir ubah biro (20 Okt 2026) */
.berkas-biro { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: 11.5px; font-weight: 600; color: var(--hijau); white-space: nowrap; }
.berkas-biro em { font-style: normal; color: #b45309; }
#formBiro .pil-centang.terkunci { opacity: .55; cursor: not-allowed; }
#formBiro .redup.kecil { margin: 6px 0 0; }

/* Poin persyaratan di bawah eviden: satu poin per baris, menurun (20 Okt 2026, permintaan pengguna). */
.daftar-poin-eviden { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 4px; }

/* Pratinjau tautan yang tak bisa disematkan: kartu ajakan buka di tab baru (20 Okt 2026) */
.pratinjau-tautan { margin: auto; max-width: 460px; padding: 28px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; background: #fff; border-radius: 14px; }
.pratinjau-tautan > .bi { font-size: 36px; color: var(--hijau); }
.pratinjau-tautan p { margin: 0; }
.pratinjau-tautan .tombol { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; }

/* Bilah halaman ala admin AMIRA (shell.js makePaginator): "Tampil [n] / total" kiri, ‹ nomor › kanan (20 Okt 2026) */
.bilah-halaman { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: -6px 0 16px; padding: 10px 14px; background: #fff; border: 1px solid var(--garis); border-radius: var(--radius); font-size: 12px; color: var(--redup); }
.bh-tampil { display: flex; align-items: center; gap: 6px; margin: 0; }
.bh-tampil label { margin: 0; font-size: 12px; font-weight: 500; color: var(--redup); }
.bilah-halaman .bh-tampil select { width: 58px !important; min-width: 0 !important; height: 26px !important; min-height: 26px !important; padding: 0 6px !important; font-size: 12px !important; font-weight: 500 !important; border: 1px solid var(--garis); border-radius: 8px; background-color: #fff; }
.bh-nav { display: flex; align-items: center; gap: 4px; }
.bh-tombol { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px; border: 1px solid var(--garis); border-radius: 8px; background: #fff; color: #334155; font-weight: 600; font-size: 12px; font-variant-numeric: tabular-nums; text-decoration: none; }
a.bh-tombol:hover { background: var(--hijau-muda); border-color: #bcd3ec; color: var(--hijau); text-decoration: none; }
.bh-tombol.aktif { background: var(--hijau); border-color: var(--hijau); color: #fff; }
.bh-tombol.mati { opacity: .4; }
.bh-jeda { padding: 0 2px; color: #94a3b8; }
.bh-rentang { margin-left: 6px; font-weight: 600; color: #475569; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .bilah-halaman { padding: 8px 10px; } .bh-rentang { display: none; } }
.hal-sembunyi { display: none !important; }
button.bh-tombol { cursor: pointer; font-family: inherit; }
button.bh-tombol:not(.aktif):not(:disabled):hover { background: var(--hijau-muda); border-color: #bcd3ec; color: var(--hijau); }
button.bh-tombol.aktif { cursor: default; opacity: 1; }
/* Jumlah SOP/IK lain di kolom daftar kriteria (20 Okt 2026) */
.sel-sop .sop-lagi { margin-left: 4px; padding: 0 6px; font-size: 10.5px; vertical-align: 1px; text-decoration: none; }
.tabel-kriteria td.sel-sop { white-space: nowrap; }

/* Bilah saring daftar eviden (halaman kriteria, 20 Okt 2026): SATU baris di layar lebar. */
.bilah-eviden { margin: 0 0 12px; box-shadow: none; background: #f8fafc; }
@media (min-width: 761px) {
    .bilah-saring.bilah-eviden { flex-wrap: nowrap; }
    .bilah-eviden .saring-cari { flex: 1 1 220px; min-width: 160px; }
    .bilah-eviden select { flex: 0 1 170px; min-width: 110px; max-width: 200px; }
    .bilah-eviden .saring-hitung { flex: none; margin-left: 0; white-space: nowrap; }
    .bilah-eviden .tombol.kecil { flex: none; white-space: nowrap; }
}
.grup-eviden[hidden], #daftarBerkas li[hidden] { display: none !important; }
/* Formulir "Tambah" di dalam kelompok eviden (20 Okt 2026): formulir unggah lengkap, nama eviden terkunci */
.grup-eviden .tambah-grup { display: flex; flex-direction: column; gap: 8px; margin: 0 14px 14px; padding: 12px; border: 1px dashed #bcd3ec; border-radius: 12px; background: #f9fbfe; }
.grup-eviden .tambah-grup .baris-eviden { margin: 0; }
.grup-eviden .tambah-grup .aksi-unggah { margin-top: 0; }
.grup-eviden .tambah-grup .pesan-unggah:empty { display: none; }
input.nama-terkunci { background: #f1f5f9 !important; color: #475569; cursor: default; }

/* Geser urutan eviden (21 Okt 2026) */
.pegangan-susun { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 30px; margin-right: 2px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #94a3b8; cursor: grab; touch-action: none; }
.pegangan-susun:hover, .pegangan-susun:focus-visible { background: #eef2f6; color: var(--hijau); outline: none; }
.pegangan-susun .bi { font-size: 16px; }
.daftar-berkas li .pegangan-berkas { align-self: center; }
.sedang-digeser { position: relative; z-index: 5; box-shadow: 0 10px 28px rgba(15, 23, 42, .18); background: #fff; opacity: .97; outline: 2px dashed #a5c6ea; outline-offset: 2px; border-radius: 10px; }
body.sedang-menyusun, body.sedang-menyusun * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }
.info-susun { margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--redup); }
.info-susun.ok { color: var(--hijau); } .info-susun.galat { color: #dc2626; }

/* ── HP: kepala kelompok & baris berkas eviden rapi (21 Okt 2026) ──
   Kepala: [⠿] Judul (lebar penuh, boleh 2 baris) | [+][✎] ; jumlah eviden di bawah judul.
   Berkas: [⠿][ikon] info berkas ; SEMUA tombol satu baris di bawahnya, sama lebar (hapus tidak lagi turun sendiri). */
.grup-kepala .grup-aksi { display: inline-flex; align-items: center; gap: 6px; flex: none; }
@media (max-width: 760px) {
    .grup-kepala { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "pegang judul aksi" "pegang hitung aksi"; column-gap: 8px; row-gap: 2px; align-items: center; padding: 10px 12px; }
    .grup-kepala > .pegangan-susun { grid-area: pegang; }
    .grup-kepala > i.bi-folder2-open { display: none; }
    .grup-kepala > strong { grid-area: judul; font-size: 13.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .grup-kepala > .hitung { grid-area: hitung; justify-self: start; padding: 0; background: none; font-size: 11px; color: var(--redup); }
    .grup-kepala > .grup-aksi { grid-area: aksi; }
    .grup-kepala > .grup-aksi .tombol { min-width: 34px; height: 34px; padding: 0; justify-content: center; }

    .daftar-berkas li > .berkas-isi { flex: 1 1 calc(100% - 42px); }
    .daftar-berkas li:has(> .pegangan-berkas) > .berkas-isi { flex-basis: calc(100% - 76px); }
    .daftar-berkas li > .tombol, .daftar-berkas li > a.tombol { flex: 1 1 0; min-width: 0; max-width: 56px; height: 36px; padding: 0; margin: 0 !important; justify-content: center; }
    .daftar-berkas li > .tombol:first-of-type { margin-left: 0 !important; }
    .daftar-berkas li { justify-content: space-between; }
    .daftar-berkas li > .pegangan-berkas { align-self: flex-start; margin-top: 2px; }
}

/* ── HP: kartu daftar kriteria berstruktur tetap (21 Okt 2026, pengguna: "tidak 1 baris") ──
   Baris 1: kode + judul | Baris 2: biro PIC | Baris 3: status eviden (kiri) & SOP/IK (kanan). Tiap baris tidak
   bercampur, jadi semua kartu sejajar. Menimpa susunan flex-wrap bebas di atas. */
@media (max-width: 760px) {
    .tabel-kriteria tbody tr[data-tuju] { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "kode judul judul" "biro biro biro" "ev ev sop"; column-gap: 8px; row-gap: 6px; align-items: center; }
    .tabel-kriteria tbody tr[data-tuju] > td.kol-kode { grid-area: kode; align-self: start; padding-top: 1px; }
    .tabel-kriteria tbody tr[data-tuju] > td[class^="tingkat-"] { grid-area: judul; }
    .tabel-kriteria tbody tr[data-tuju] > td.sel-biro { grid-area: biro; flex-wrap: wrap; gap: 4px; }
    .tabel-kriteria tbody tr[data-tuju] > td.sel-eviden { grid-area: ev; flex-wrap: nowrap; gap: 4px; min-width: 0; overflow: hidden; }
    .tabel-kriteria tbody tr[data-tuju] > td.sel-sop { grid-area: sop; justify-self: end; flex-wrap: nowrap; gap: 4px; }
    .tabel-kriteria tbody tr[data-tuju] > td.sel-biro:empty, .tabel-kriteria tbody tr[data-tuju] > td.sel-biro:has(> span.redup:only-child) { display: none !important; }
    .tabel-kriteria td.sel-eviden .lencana, .tabel-kriteria td.sel-eviden .lencana-poin, .tabel-kriteria td.sel-sop a { white-space: nowrap; }
    .tabel-kriteria td.sel-sop .sop-lagi { margin-left: 0; }
}

/* HP kartu kriteria, versi dipilih pengguna 21 Okt 2026 ("Biro+status 1 baris"):
   judul | biro sebagai teks kecil "M&U · MINING · QAQC" | SEMUA lencana (berkas, poin, SOP/IK) satu baris. */
@media (max-width: 760px) {
    .tabel-kriteria tbody tr[data-tuju] { grid-template-columns: auto auto minmax(0, 1fr) !important; grid-template-areas: "kode judul judul" ". biro biro" ". ev sop" !important; row-gap: 5px; }
    .tabel-kriteria tbody tr[data-tuju] > td.sel-biro { gap: 0; }
    .tabel-kriteria tbody tr[data-tuju] > td.sel-biro .lencana { padding: 0; background: none !important; border: 0; color: var(--redup); font-size: 10.5px; font-weight: 700; letter-spacing: .02em; }
    .tabel-kriteria tbody tr[data-tuju] > td.sel-biro .lencana.biro:has(+ .lencana.biro)::after { content: " · "; white-space: pre; color: #cbd5e1; }
    .tabel-kriteria tbody tr[data-tuju] > td.sel-biro .lencana.emas { margin-left: 6px; padding: 0 6px; background: #fef3c7 !important; color: #92400e; }
    .tabel-kriteria tbody tr[data-tuju] > td.sel-sop { justify-self: start; }
    .tabel-kriteria tbody tr[data-tuju] > td.sel-sop a.tautan-luar { font-size: 0; gap: 3px; }
    .tabel-kriteria tbody tr[data-tuju] > td.sel-sop a.tautan-luar .bi { font-size: 11px; }
    .tabel-kriteria tbody tr[data-tuju] > td.sel-sop a.tautan-luar::after { content: "SOP/IK"; font-size: 10.5px; }
    .tabel-kriteria tbody tr[data-tuju] > td.sel-sop a.sop-lagi { padding: 2px 6px; font-size: 10.5px; }
    .tabel-kriteria tbody tr[data-tuju] > td.sel-sop a.sop-lagi::after { content: none; }
}
/* Kolom Status (online/offline) di Riwayat (21 Okt 2026) */
.tabel-riwayat td.sel-status-akun .status-online { font-size: 12.5px; }
@media (max-width: 760px) {
    .tabel-riwayat td.sel-user { flex: 1 1 auto !important; min-width: 0; }
    .tabel-riwayat td.sel-status-akun { order: 3; flex: none; display: block; font-size: 11px; }
    .tabel-riwayat td.sel-status-akun .status-online { font-size: 11px; }
}
/* Riwayat desktop: lebar kolom tetap -> tabel tak pernah melebar melewati kartu (21 Okt 2026). Rincian maks 3 baris
   (teks lengkap di tooltip/CSV), IP dipatahkan. */
@media (min-width: 761px) {
    .tabel-riwayat { table-layout: fixed; width: 100%; }
    .tabel-riwayat th:nth-child(1) { width: 96px; } .tabel-riwayat th:nth-child(2) { width: 15%; } .tabel-riwayat th:nth-child(3) { width: 10%; }
    .tabel-riwayat th:nth-child(4) { width: 14%; } .tabel-riwayat th:nth-child(5) { width: 9%; } .tabel-riwayat th:nth-child(7) { width: 12%; }
    .tabel-riwayat td.sel-waktu { overflow-wrap: normal; word-break: keep-all; }
    .tabel-riwayat td.sel-waktu .redup { display: block; }
    .tabel-riwayat td { overflow-wrap: anywhere; }
    .tabel-riwayat td.sel-rinci { display: table-cell; }
    .tabel-riwayat td.sel-rinci > .rinci-isi { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .tabel-riwayat td.sel-ip { font-size: 11.5px; word-break: break-all; }
    .tabel-riwayat td.sel-waktu { white-space: normal; }
    .tabel-riwayat td.tak-pecah, .tabel-riwayat td .lencana, .tabel-riwayat td .status-online { white-space: normal; }
    .tabel-riwayat td .lencana { display: inline-block; max-width: 100%; text-align: left; line-height: 1.3; }
    .tabel-riwayat td.sel-ip { white-space: normal; word-break: break-all; }
}
/* Tombol cepat rentang tanggal di Riwayat */
#riwayatSaring .saring-cepat { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.chip-cepat { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border: 1px solid var(--garis); border-radius: 999px; background: #fff; color: #334155; font-size: 12.5px; font-weight: 600; text-decoration: none; }
.chip-cepat:hover { border-color: #bcd3ec; background: var(--hijau-muda); color: var(--hijau); text-decoration: none; }
.chip-cepat.aktif { background: var(--hijau); border-color: var(--hijau); color: #fff; }
@media (max-width: 760px) { #riwayatSaring .saring-cepat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 8px; } .chip-cepat { justify-content: center; padding: 0 4px; font-size: 11.5px; } }
/* Riwayat desktop: tombol cepat SEBARIS dgn saringan (21 Okt 2026, permintaan pengguna); turun baris hanya bila layar sempit. */
@media (min-width: 761px) {
    #riwayatSaring .saring-cepat { flex: none; flex-basis: auto; flex-wrap: nowrap; margin-top: 0; }
    #riwayatSaring { gap: 8px; }
    #riwayatSaring .saring-cari { flex: 1 1 160px; min-width: 130px; }
    #riwayatSaring select { flex: 0 1 175px; min-width: 120px; }
    #riwayatSaring .saring-tgl { flex: none; width: 164px; min-width: 0; }
    #riwayatSaring .saring-cepat { gap: 4px; }
    #riwayatSaring .chip-cepat { height: 32px; padding: 0 9px; font-size: 12px; white-space: nowrap; }
    #riwayatSaring .saring-hitung { order: 9; }
}
/* Tombol cepat Riwayat memakai gaya tombol yang SAMA dgn Terapkan / Atur ulang (21 Okt 2026). */
#riwayatSaring .chip-cepat.tombol { height: 42px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 600; background: #fff; border: 1px solid var(--garis); color: #334155; }
#riwayatSaring .chip-cepat.tombol:hover { background: var(--hijau-muda); border-color: #bcd3ec; color: var(--hijau); }
#riwayatSaring .chip-cepat.tombol.utama { background: var(--hijau); border-color: var(--hijau); color: #fff; }
@media (max-width: 760px) { #riwayatSaring .chip-cepat.tombol { height: 42px; min-height: 42px; padding: 0 4px; font-size: 12px; } }

/* ── Penilaian auditor (3 Nov 2026): kartu di halaman kriteria, kolom Nilai, Ringkasan & halaman Nilai audit ── */
.lencana-nilai b { font-weight: 800; }
.lencana-nilai.besar { padding: 5px 13px; font-size: 14px; }
.kartu-nilai.tutup > h2 { margin: 0; padding-bottom: 0; border-bottom: 0; }
.kartu-nilai.tutup:hover { border-color: #94a3b8; }
.kartu-nilai .buka-unggah > span:last-child { gap: 10px; }
.nilai-isian .label-kecil, .form-nilai > .label-kecil { display: block; margin-bottom: 4px; }
.nilai-baca { margin: 12px 0 4px; }
#kategoriInfo { display: block; margin-top: 4px; }
.nilai-pic { display: grid; gap: 6px; margin: 0; padding: 10px 12px; border: 1px solid #fecdd3; border-radius: 12px; background: #fff7f8; }
.nilai-pic[hidden] { display: none; }
.nilai-pic legend { float: left; width: 100%; padding: 0; margin: 0 0 2px; }
.nilai-pic .deret-centang { display: flex; flex-wrap: wrap; gap: 6px; }
.nilai-pic .pil-centang { flex: 0 0 auto !important; width: auto !important; }
/* 9 Nov 2026: temuan lebih dari satu per kriteria (kartu per temuan, PIC per temuan) + centang OFI utk Sesuai. */
.nilai-temuan { display: grid; gap: 10px; }
.nilai-temuan[hidden], #nilaiKetWadah[hidden], .nilai-ofi[hidden], #ofiIsiWadah[hidden] { display: none; }
.temuan-daftar { display: grid; gap: 12px; }
.temuan-kartu { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid #fecdd3; border-left: 4px solid #e11d48; border-radius: 12px; background: #fff; }
.temuan-kartu .nilai-pic { border-style: dashed; }
.temuan-kepala { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.temuan-judul { font-weight: 700; color: #9f1239; font-size: .92rem; }
.temuan-kepala [data-temuan-hapus][hidden] { display: none; }
#temuanTambah { justify-self: start; }
#temuanTambah[hidden] { display: none; }
.nilai-ofi { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid #bae6fd; border-radius: 12px; background: #f0f9ff; }
.nilai-ofi > .pil-centang { justify-self: start; width: auto !important; }
#ofiIsiWadah { display: grid; gap: 6px; }
.temuan-baca { margin: 4px 0 6px; padding-left: 1.3em; display: grid; gap: 8px; }
.temuan-baca p { margin: 0 0 4px; white-space: pre-line; }
.nilai-kosong { margin: 12px 0 0; }
.nilai-riwayat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; }
.nilai-riwayat .label-kecil { margin-right: 2px; }
.form-nilai { display: grid; gap: 10px; margin-top: 14px; }
.nilai-isian { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-nilai textarea { width: 100%; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 10px; font: inherit; line-height: 1.55; resize: vertical; }
.nilai-pedoman { border: 1px solid var(--garis); border-radius: 12px; padding: 8px 12px; background: var(--latar); }
.nilai-pedoman summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--hijau); }
.nilai-pedoman dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; margin: 10px 0 2px; font-size: 13px; line-height: 1.5; }
.nilai-pedoman dt { font-weight: 800; white-space: nowrap; }
.nilai-pedoman dd { margin: 0; white-space: pre-line; }
.nilai-aksi { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.nilai-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.nilai-keterangan p { margin: 4px 0 8px; white-space: pre-line; line-height: 1.55; }
.kol-nilai { white-space: nowrap; }
.lencana.kritikal { background: #9f1239; color: #fff; }
@media (max-width: 640px) { .nilai-isian { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
    .tabel-kriteria td.kol-nilai { order: 5; }
    .tabel-kriteria td.kol-nilai .lencana-nilai > span::before { content: "Nilai "; font-weight: 600; } /* tanpa judul kolom di HP */
    .tabel-kriteria td.kol-nilai:empty, .tabel-kriteria td.kol-nilai:has(> span.redup:only-child) { display: none; }
}
/* Ringkasan */
.judul-tautan { margin-left: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--hijau); }
.nilai-ringkas { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: stretch; }
.nilai-total { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 16px 18px; border-radius: 14px; background: var(--hijau-muda); color: inherit; text-decoration: none; }
.nilai-total .label { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--redup); }
.nilai-total strong { font-size: 34px; line-height: 1.1; color: var(--hijau-tua); }
.nilai-total .sub { font-size: 12.5px; color: var(--redup); }
.nilai-elemen-daftar { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 4px 18px; align-content: center; }
.nilai-elemen-daftar a { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "r n p" "r b b"; align-items: center; gap: 3px 8px; padding: 6px 8px; border-radius: 10px; color: inherit; text-decoration: none; }
.nilai-elemen-daftar a:hover { background: var(--latar); }
.nilai-elemen-daftar .romawi { grid-area: r; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--hijau-muda); color: var(--hijau); font-size: 11.5px; font-weight: 800; }
.ne-nama { grid-area: n; overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ne-pct { grid-area: p; font-size: 13px; font-weight: 800; white-space: nowrap; }
.ne-pct small { font-weight: 600; color: var(--redup); }
.nilai-elemen-daftar progress { grid-area: b; width: 100%; height: 6px; }
@media (max-width: 760px) { .nilai-ringkas { grid-template-columns: 1fr; } .nilai-total strong { font-size: 28px; } }
/* Halaman Nilai audit */
.nilai-tarik { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; }
.nilai-kategori-ringkas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; }
.tabel-nilai td, .tabel-nilai th { white-space: nowrap; }
.tabel-nilai td.tingkat-0, .tabel-nilai td.tingkat-1, .tabel-nilai td.tingkat-2 { min-width: 260px; white-space: normal; }
.tabel-nilai td.tingkat-1 { padding-left: 30px; } .tabel-nilai td.tingkat-2 { padding-left: 48px; }
.tabel-nilai td a { color: var(--teks); font-weight: 600; }
.tabel-nilai tr[data-tuju] { cursor: pointer; }
.tabel-nilai .kol-kini { background: rgba(11, 79, 138, .05); }
.tabel-nilai .baris-elemen td { background: var(--hijau-muda); font-weight: 800; }
.tabel-nilai .baris-elemen td a { font-weight: 800; }
.tabel-nilai .baris-total td { background: #fef3c7; }

/* Menu PICA (3 Nov 2026) */
.tabel-pica th, .tabel-pica td { vertical-align: top; }
.tabel-pica td { font-size: 13px; }
.tabel-pica th, .tabel-pica td { padding-left: 10px; padding-right: 10px; }
.tabel-pica .kol-teks { min-width: 180px; white-space: pre-line; line-height: 1.5; }
.tabel-pica td.kol-teks:nth-child(3) { min-width: 240px; }
/* 12 Nov 2026: satu temuan = satu kelompok (sel No/Deskripsi/Kategori digabung), satu baris per PIC */
.tabel-pica tr.pica-grup-awal > td { border-top: 2px solid #cbd5e1; }
.tabel-pica tr.pica-grup-awal > td[rowspan] { background: #f9fbfe; }
.tabel-pica tr.pica-grup-lanjut > td { border-top: 1px dashed #e2e8f0; }
.tabel-pica .pica-jml-pic { display: block; margin-top: 4px; font-size: 11px; white-space: nowrap; }
.tabel-pica .sel-status small { display: block; margin-top: 4px; white-space: nowrap; }
.tabel-pica .kol-aksi .tombol { white-space: nowrap; }
.tabel-pica .sel-no { white-space: nowrap; font-weight: 700; }
.tabel-pica .sel-no a { color: var(--hijau); }
.tabel-pica tr.baris-aktif td { background: #fffbeb; }
.tabel-pica tr:target td { background: #fffbeb; }
.pica-form h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pica-deskripsi { margin: 0 0 12px; padding: 10px 12px; border-left: 3px solid var(--kurang); border-radius: 0 10px 10px 0; background: #fff7f8; white-space: pre-line; line-height: 1.5; }
.pica-deskripsi .label-kecil { display: block; margin-bottom: 4px; }
.pica-form input[type=date] { width: 100%; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 10px; font: inherit; }
@media (min-width: 761px) {
    /* Semua kolom PICA muat tanpa geser di layar laptop: lebar tetap (persen), judul kolom boleh turun baris. */
    .tabel-pica { table-layout: fixed; width: 100%; }
    .tabel-pica th { white-space: normal; line-height: 1.3; }
    .tabel-pica td.kol-teks, .tabel-pica td.kol-teks:nth-child(3) { min-width: 0; overflow-wrap: anywhere; }
    .tabel-pica th { overflow-wrap: normal; font-size: 10.5px; letter-spacing: .03em; }
    .tabel-pica th:nth-child(1) { width: 5%; } .tabel-pica th:nth-child(2) { width: 10%; } .tabel-pica th:nth-child(3) { width: 21%; }
    .tabel-pica th:nth-child(4) { width: 8%; } .tabel-pica th:nth-child(5), .tabel-pica th:nth-child(6) { width: 15%; }
    .tabel-pica th:nth-child(7) { width: 9%; } .tabel-pica th:nth-child(8) { width: 8%; } .tabel-pica th:nth-child(9) { width: 7%; }
    .tabel-pica th:nth-child(10) { width: 46px; }
    .tabel-pica .sel-no { white-space: normal; overflow-wrap: anywhere; }
    .tabel-pica .sel-status small { white-space: normal; }
    .tabel-pica .kol-aksi .tombol { padding: 6px 8px; }
}

.pica-halaman { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0; }
.pica-lain { margin: 4px 0; font-size: 13px; }
.nilai-pilih-tahun { margin: 12px 0 0; }
.nilai-riwayat a.lencana { text-decoration: none; }
.nilai-riwayat a.lencana:hover { background: var(--hijau-muda); color: var(--hijau); }
.nilai-kunci { margin: 10px 0 0; }

/* ── Dashboard nilai audit (3 Nov 2026) ── */
.db-pilih { gap: 8px; }
.db-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.4fr); gap: 16px; margin-bottom: 8px; }
.db-hero-utama { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; border-radius: var(--radius); color: #fff; background: linear-gradient(135deg, var(--hijau-tua), var(--hijau) 70%, #1f6fb5); box-shadow: 0 10px 30px rgba(10, 37, 64, .18); }
.db-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.db-angka { font-size: 52px; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; }
.db-sub { font-size: 13.5px; opacity: .95; }
.db-hero-utama .db-selisih { background: rgba(255, 255, 255, .16); color: #fff; }
.db-meter { position: relative; height: 12px; margin: 8px 0 2px; border-radius: 99px; background: rgba(255, 255, 255, .2); }
.db-meter-isi { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, #fef0c2, var(--emas)); }
.db-meter-tanda { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 2px var(--hijau-tua); }
.db-ket { font-size: 12px; opacity: .85; }
.db-kategori { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.db-kat { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--garis); border-top: 4px solid var(--kosong); border-radius: 14px; background: #fff; color: var(--teks); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.db-kat:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15, 23, 42, .08); }
.db-kat strong { font-size: 32px; line-height: 1.1; font-weight: 800; }
.db-kat-kepala { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--redup); }
.db-kat-kritikal { border-top-color: #9f1239; } .db-kat-kritikal .db-kat-kepala i { color: #9f1239; }
.db-kat-mayor { border-top-color: #e11d48; } .db-kat-mayor .db-kat-kepala i { color: #e11d48; }
.db-kat-minor { border-top-color: #d97706; } .db-kat-minor .db-kat-kepala i { color: #d97706; }
.db-kat-sesuai { border-top-color: #059669; } .db-kat-sesuai .db-kat-kepala i { color: #059669; }
.db-kat-na { border-top-color: #94a3b8; }
.db-kat-banding { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12px; }
.db-kat-banding small { color: var(--redup); }
.db-selisih { display: inline-flex; align-items: center; gap: 1px; padding: 1px 7px 1px 4px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.db-selisih.baik { background: #d1fae5; color: #047857; } .db-selisih.buruk { background: #ffe4e6; color: #be123c; } .db-selisih.netral { background: #f1f5f9; color: var(--redup); padding-left: 7px; }
.db-selisih i { font-size: 16px; line-height: 1; }
.db-elemen { display: grid; gap: 2px; }
.db-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-bottom: 8px; font-size: 12.5px; font-weight: 600; }
.db-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.db-kotak { display: inline-block; width: 14px; height: 8px; border-radius: 4px; }
.db-kotak.kini, .db-bar.kini { background: var(--hijau); } .db-kotak.lalu, .db-bar.lalu { background: #b4bfcc; }
.db-baris { display: grid; grid-template-columns: 36px minmax(150px, 1.1fr) minmax(160px, 2fr) 92px 92px 104px; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 12px; color: var(--teks); text-decoration: none; }
.db-baris:hover { background: var(--latar); }
.db-romawi { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--hijau-muda); color: var(--hijau); font-size: 12px; font-weight: 800; }
.db-nama { display: flex; flex-direction: column; font-size: 14px; font-weight: 700; line-height: 1.25; }
.db-nama small, .db-pct small, .db-bobot small { font-size: 11.5px; font-weight: 500; color: var(--redup); }
.db-batang { display: grid; gap: 3px; padding: 4px 0; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), #e2e8f0 calc(25% - 1px) 25%); }
.db-bar { display: block; height: 10px; border-radius: 0 4px 4px 0; min-width: 2px; transition: width .6s ease; }
.db-bar.lalu { height: 6px; }
.db-pct, .db-bobot { display: flex; flex-direction: column; align-items: flex-end; font-size: 15px; font-variant-numeric: tabular-nums; }
.db-beda { text-align: right; }
.db-tabel { margin-top: 16px; } .db-tabel summary { cursor: pointer; font-weight: 700; }
@media (max-width: 1100px) { .db-hero { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
    .db-kategori { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .db-kat { padding: 10px; } .db-kat strong { font-size: 24px; }
    .db-angka { font-size: 40px; }
    .db-baris { grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "r n b" "g g g" "p o d"; row-gap: 6px; }
    .db-romawi { grid-area: r; } .db-nama { grid-area: n; } .db-batang { grid-area: g; } .db-pct { grid-area: p; align-items: flex-start; } .db-bobot { grid-area: o; } .db-beda { grid-area: d; }
    .db-baris .db-bobot { align-items: center; }
}
.sisi-menu > .sisi-judul:first-child { margin-top: 2px; } /* judul Elemen SMKP kini paling atas (3 Nov 2026) */

/* Laporan Kesesuaian & OFI (3 Nov 2026) */
.tabel-catatan td { vertical-align: top; font-size: 13px; }
.tabel-catatan .kol-teks { min-width: 320px; white-space: pre-line; line-height: 1.5; }
.tabel-catatan .sel-sub { min-width: 180px; font-weight: 600; }
.tabel-catatan .sel-sub a { color: var(--hijau); }
a.kartu.angka { color: inherit; text-decoration: none; }
.catatan-ringkas { grid-template-columns: minmax(200px, 1fr) minmax(0, 3fr); }
.catatan-ringkas .sub a { color: var(--hijau); font-weight: 600; margin-right: 6px; }
.catatan-elemen { display: flex; flex-direction: column; gap: 8px; }
.catatan-elemen > div { display: flex; flex-wrap: wrap; gap: 6px; }
.catatan-elemen .lencana { text-decoration: none; }
.tabel-catatan .baris-elemen td { background: var(--hijau-muda); color: var(--hijau-tua); font-weight: 800; }
@media (max-width: 760px) { .catatan-ringkas { grid-template-columns: 1fr; } }
.tabel-nilai .kol-kategori { border-right: 2px solid var(--garis); }

/* Lampiran temuan auditor (3 Nov 2026) */
.nilai-lampiran { display: grid; gap: 6px; }
.nilai-lampiran .zona-unggah { margin: 0; }
.nilai-lampiran .pesan-unggah:empty { display: none; }
.nilai-lampiran[hidden] { display: none; }
/* 9 Nov 2026: lampiran per temuan di dalam kartu temuan -- kotak unggah lebih ringkas. */
.temuan-lampiran { padding-top: 4px; }
/* 9 Nov 2026: uraian temuan berformat baku -- Bukti | Lokasi (ceklist) + Metode | pratinjau kalimat. */
.temuan-dua { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: start; }
@media (max-width: 760px) { .temuan-dua { grid-template-columns: minmax(0, 1fr); } }
.temuan-dua > div { display: grid; gap: 4px; }
.temuan-metode { margin: 0; padding: 0; border: 0; display: grid; gap: 4px; }
.temuan-metode legend { padding: 0; margin: 0 0 4px; }
.temuan-metode .deret-centang { display: flex; flex-wrap: wrap; gap: 6px; }
.temuan-metode .pil-centang { flex: 0 0 auto !important; width: auto !important; }
.temuan-pratinjau { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: #f8fafc; border: 1px solid #e2e8f0; }
.temuan-pratinjau p { margin: 0; line-height: 1.55; color: #0f172a; }
.temuan-pratinjau p.belum { color: #64748b; font-style: italic; }
.temuan-lampiran .zona-unggah { flex-direction: row; justify-content: center; flex-wrap: wrap; padding: 12px 14px; position: relative; }
.temuan-lampiran .zona-unggah i { font-size: 22px; }
.daftar-lampiran { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.daftar-lampiran li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 10px; border: 1px solid var(--garis); border-radius: 10px; background: #fff; font-size: 13px; }
.daftar-lampiran li > i { color: var(--hijau); font-size: 16px; }
.daftar-lampiran li > a:not(.tombol) { flex: 1 1 200px; min-width: 0; color: var(--teks); font-weight: 600; overflow-wrap: anywhere; }

/* Evidence temuan & perbaikan PICA (3 Nov 2026) */
.pica-evidence { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 14px; padding: 12px; border: 1px solid var(--garis); border-radius: 12px; background: var(--latar); }
.pica-evidence .label-kecil { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.daftar-tautan { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; }
.daftar-tautan a { color: var(--hijau); font-weight: 600; white-space: nowrap; }
.tabel-pica .sel-evidence { white-space: nowrap; }
.tabel-pica .sel-evidence .lencana { font-size: 11px; padding: 1px 7px; }
@media (min-width: 761px) { .tabel-pica th:nth-child(10) { width: 78px; } .tabel-pica th:nth-child(11) { width: 46px; } .tabel-pica th:nth-child(3) { width: 19%; } .tabel-pica th:nth-child(5), .tabel-pica th:nth-child(6) { width: 14%; } }
@media (max-width: 760px) { .pica-evidence { grid-template-columns: 1fr; } }

/* ── Menu samping lebih menarik (3 Nov 2026, permintaan pengguna) ──
   Ikon dalam ubin bulat (selaras dgn ubin romawi elemen), hover bergeser halus, menu aktif = gradasi hijau-teal
   dengan aksen emas di kiri + ubin ikon emas. */
.sisi-menu { gap: 3px; }
.sisi-menu a { position: relative; padding: 7px 12px 7px 10px; font-weight: 500; transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.sisi-menu a i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: rgba(255, 255, 255, .08); color: #fcd34d; font-size: 15px; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.sisi-menu a .romawi { width: 28px; height: 28px; border-radius: 9px; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.sisi-menu a:hover { background: linear-gradient(90deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02)); color: #fff; transform: translateX(2px); }
.sisi-menu a:hover i { background: rgba(245, 158, 11, .22); color: #fef0c2; } /* ikon emas spt ubin romawi elemen */
.sisi-menu a:hover .romawi { background: rgba(245, 158, 11, .22); }
.sisi-menu a.aktif { background: linear-gradient(100deg, #1f6fb5 0%, #0b4f8a 45%, rgba(11, 79, 138, .35) 100%); color: #fff; font-weight: 700; box-shadow: 0 6px 18px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .12); }
.sisi-menu a.aktif::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, #fef0c2, #f59e0b); box-shadow: 0 0 10px rgba(245, 158, 11, .6); }
.sisi-menu a.aktif i, .sisi-menu a.aktif .romawi { background: linear-gradient(135deg, #fef0c2, #f59e0b); color: #0a2540; box-shadow: 0 3px 10px rgba(245, 158, 11, .35); }
.sisi-menu a:focus-visible { outline: 2px solid #f59e0b; outline-offset: 1px; }
.sisi-judul { display: flex; align-items: center; gap: 8px; margin: 16px 12px 6px; color: rgba(244, 208, 111, .7); letter-spacing: .12em; }
.sisi-judul::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 8px rgba(245, 158, 11, .7); flex: none; }
.sisi-menu > .sisi-judul:first-child { margin-top: 2px; }
.sisi-kaki button { transition: background .2s ease, color .2s ease; }
.sisi-kaki button:hover { background: linear-gradient(90deg, rgba(225, 29, 72, .22), rgba(225, 29, 72, .04)); color: #fff; }
@media (prefers-reduced-motion: reduce) { .sisi-menu a, .sisi-menu a:hover { transition: none; transform: none; } }
/* Menu diciutkan (layar lebar): aksen tetap di tepi, ubin ikon di tengah. */
html.sisi-ciut .sisi-judul::before { display: none; }

/* OFI diisi dari aplikasi (3 Nov 2026) */
.ofi-form { margin-bottom: 14px; }
.ofi-form summary { cursor: pointer; font-weight: 700; color: var(--hijau); }
.ofi-form .form-nilai { margin-top: 12px; }
.ofi-form textarea { width: 100%; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 10px; font: inherit; resize: vertical; }
.ofi-aksi { white-space: nowrap; } .ofi-aksi .ofi-hapus { display: inline; margin-left: 4px; }
/* Grup LAPORAN berwarna biru langit (3 Nov 2026, permintaan pengguna) -- beda dari emas Elemen SMKP. */
.sisi-judul-laporan { color: rgba(125, 211, 252, .8); }
.sisi-judul-laporan::before { background: #38bdf8; box-shadow: 0 0 8px rgba(56, 189, 248, .7); }
.sisi-menu a[data-grup="laporan"] i { color: #7dd3fc; background: rgba(56, 189, 248, .1); }
.sisi-menu a[data-grup="laporan"]:hover i { background: rgba(56, 189, 248, .22); color: #bae6fd; }
.sisi-menu a[data-grup="laporan"].aktif { background: linear-gradient(100deg, #0ea5e9 0%, #0369a1 50%, rgba(3, 105, 161, .35) 100%); }
.sisi-menu a[data-grup="laporan"].aktif::before { background: linear-gradient(180deg, #e0f2fe, #38bdf8); box-shadow: 0 0 10px rgba(56, 189, 248, .7); }
.sisi-menu a[data-grup="laporan"].aktif i { background: linear-gradient(135deg, #e0f2fe, #38bdf8); color: #0c4a6e; box-shadow: 0 3px 10px rgba(56, 189, 248, .4); }
/* Ringkasan & Cari kriteria: ikon putih (3 Nov 2026, permintaan pengguna). */
.sisi-menu a[data-grup="putih"] i { color: #fff; background: rgba(255, 255, 255, .1); }
.sisi-menu a[data-grup="putih"]:hover i { color: #fff; background: rgba(255, 255, 255, .2); }
.sisi-menu a[data-grup="putih"].aktif { background: linear-gradient(100deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .12) 50%, rgba(255, 255, 255, .03) 100%); }
.sisi-menu a[data-grup="putih"].aktif::before { background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, .6); }
.sisi-menu a[data-grup="putih"].aktif i { background: #fff; color: #0a2540; box-shadow: 0 3px 10px rgba(255, 255, 255, .3); }

/* Patokan nilai maksimal per elemen (3 Nov 2026) */
.tabel-nilai .sel-bobot { display: block; font-size: 10.5px; font-weight: 600; color: var(--redup); }
.db-baris { grid-template-columns: 36px minmax(150px, 1.1fr) minmax(140px, 2fr) 84px 92px 92px 104px; }
.db-capaian { display: flex; flex-direction: column; align-items: flex-end; font-size: 15px; font-variant-numeric: tabular-nums; }
.db-capaian small { font-size: 11.5px; font-weight: 500; color: var(--redup); }
@media (max-width: 760px) {
    .db-baris { grid-template-columns: 34px repeat(3, minmax(0, 1fr)); grid-template-areas: "r n n n" "g g g g" "c c p o" "d d d d"; }
    .db-baris .db-beda { text-align: left; }
    .db-capaian { grid-area: c; align-items: flex-start; }
    .db-capaian small, .db-pct small, .db-bobot small { white-space: nowrap; }
}
/* Grup LAPORAN (Rekap Excel/PDF) berwarna ungu lembut (3 Nov 2026) -- beda dari Hasil Audit (biru) & Elemen SMKP (emas). */
.sisi-judul-rekap { color: rgba(196, 181, 253, .85); }
.sisi-judul-rekap::before { background: #a78bfa; box-shadow: 0 0 8px rgba(167, 139, 250, .7); }
.sisi-menu a[data-grup="rekap"] i { color: #c4b5fd; background: rgba(167, 139, 250, .12); }
.sisi-menu a[data-grup="rekap"]:hover i { background: rgba(167, 139, 250, .24); color: #ede9fe; }
.sisi-menu a[data-grup="rekap"].aktif { background: linear-gradient(100deg, #8b5cf6 0%, #6d28d9 50%, rgba(109, 40, 217, .35) 100%); }
.sisi-menu a[data-grup="rekap"].aktif::before { background: linear-gradient(180deg, #ede9fe, #a78bfa); box-shadow: 0 0 10px rgba(167, 139, 250, .7); }
.sisi-menu a[data-grup="rekap"].aktif i { background: linear-gradient(135deg, #ede9fe, #a78bfa); color: #3b0764; }

/* Laporan Audit (3 Nov 2026) */
.lap-status { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.lap-ikon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: #dbeafe; color: #1d4ed8; font-size: 26px; flex: none; }
.lap-info { display: flex; flex: 1 1 280px; flex-direction: column; gap: 2px; min-width: 0; }
.lap-aksi { display: flex; flex-wrap: wrap; gap: 8px; }
.lap-form, .lap-template { margin-top: 16px; }
.lap-form h2, .lap-template h2 { display: flex; align-items: center; gap: 8px; }
.lap-form input[type=text], .lap-form textarea { width: 100%; box-sizing: border-box; }
.lap-form textarea { padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 10px; font: inherit; resize: vertical; }
.lap-template code { font-size: 11.5px; background: var(--latar); padding: 1px 4px; border-radius: 4px; }
.lap-editor { height: calc(100vh - 230px); min-height: 520px; border: 1px solid var(--garis); border-radius: 12px; overflow: hidden; background: #fff; }

.lap-alat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lap-pratinjau-form { display: flex; align-items: center; gap: 6px; }
.lap-pratinjau-form select { width: auto; padding: 8px 10px; }
.lap-editor { position: relative; }
.lap-keluar-penuh { display: none; position: absolute; z-index: 5; right: 12px; bottom: 10px; }
.lap-editor:fullscreen, .lap-editor.penuh { width: 100vw; height: 100vh; border: 0; border-radius: 0; }
.lap-editor.penuh { position: fixed; inset: 0; z-index: 1000; }
.lap-editor:fullscreen .lap-keluar-penuh, .lap-editor.penuh .lap-keluar-penuh { display: inline-flex; }
.lap-auditor-sheet { display: grid; gap: 4px; margin: 6px 0; padding: 0; list-style: none; font-size: 13.5px; }
.lap-auditor-sheet i { color: var(--hijau); }
.lap-ganti summary { cursor: pointer; color: var(--hijau); font-weight: 600; margin-top: 4px; }
.lap-ganti textarea { margin-top: 6px; }

/* Tim Auditor (3 Nov 2026) */
.tim-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; margin-bottom: 14px; }
.tim-kartu { display: flex; align-items: center; gap: 16px; padding: 16px; border-top: 4px solid #0b4f8a; }
.tim-kartu.tim-lead { border-top-color: #f59e0b; }
.tim-kartu.tim-pendamping { border-top-color: #94a3b8; }
.tim-foto { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: none; background: #e2e8f0; box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(11, 79, 138, .25); }
.tim-lead .tim-foto { box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(245, 158, 11, .6); }
.tim-isi { min-width: 0; }
.tim-isi h2 { font-size: 1.05rem; margin: 2px 0 6px; line-height: 1.3; }
.tim-isi p { margin: 3px 0; font-size: .82rem; display: flex; gap: 6px; align-items: baseline; }
.tim-isi p > :last-child { min-width: 0; overflow-wrap: anywhere; }
.tim-isi p .bi { color: #0b4f8a; flex: none; }
.tim-peran { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #0b4f8a; }
.tim-lead .tim-peran { color: #b45309; }
.tim-pendamping .tim-peran { color: #475569; }
@media (max-width: 640px) { .tim-grid { grid-template-columns: 1fr; } .tim-foto { width: 72px; height: 72px; } }
.tim-tahun { display: flex; flex-wrap: wrap; gap: 4px; }
.tim-tahun .lencana { font-size: .68rem; padding: 1px 7px; text-decoration: none; }
.tim-sertifikat { margin-top: 8px; }

/* Anti kedip pembaca PDF di jendela pratinjau (3 Nov 2026): teks status tak mengubah tinggi toolbar, batang gulir tak mengubah lebar halaman. */
.pratinjau-badan .pdfjs-toolbar { position: relative; }
.pratinjau-badan .pdfjs-status { position: absolute !important; right: .8rem; bottom: 2px; width: auto !important; padding: 0 4px; background: rgba(255, 255, 255, .96); }
.pratinjau-badan .pdfjs-status:empty { display: none !important; }
.pratinjau-badan .pdfjs-stage { scrollbar-gutter: stable; }
.lap-lead-manual { margin-top: 6px; }

/* Riwayat Laporan (3 Nov 2026) */
.riwayat-daftar { display: grid; gap: 12px; margin-bottom: 14px; }
.riwayat-kartu { display: flex; align-items: center; gap: 16px; padding: 14px 16px; }
.riwayat-tahun { flex: none; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg, #0b4f8a, #0a2540); color: #fcd34d; font-weight: 800; font-size: 1.05rem; }
.riwayat-isi { flex: 1; min-width: 0; }
.riwayat-isi h2 { font-size: .98rem; line-height: 1.35; margin: 0 0 4px; overflow-wrap: anywhere; }
.riwayat-isi p { margin: 0; }
.riwayat-aksi { flex: none; display: flex; gap: 8px; }
@media (max-width: 640px) { .riwayat-kartu { flex-wrap: wrap; } .riwayat-isi { flex-basis: calc(100% - 80px); } .riwayat-aksi { width: 100%; } .riwayat-aksi .tombol { flex: 1; justify-content: center; } }
.tim-kontrol { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.tim-kontrol form { margin: 0; }

/* Presentasi PICA (3 Nov 2026) */
.pres { display: flex; flex-direction: column; height: calc(100vh - 112px); min-height: 480px; background: var(--hijau-tua); border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(10, 37, 64, .25); }
.pres.pres-penuh { position: fixed; inset: 0; z-index: 60; height: 100vh; height: 100dvh; border-radius: 0; }
.pres-bilah { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: linear-gradient(90deg, #0a2540, #0b4f8a); color: #fff; }
.pres-judul { flex: none; color: #fcd34d; font-size: 1rem; white-space: nowrap; }
.pres-lompat { flex: 1; min-width: 0; width: auto; max-width: none; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .35); background: #fff; color: #1e293b; font-size: .85rem; }
.pres-nav { flex: none; display: flex; align-items: center; gap: 6px; }
.pres-hitung { min-width: 66px; text-align: center; font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums; }
.pres-panggung { flex: 1; min-height: 0; overflow: auto; padding: 18px; }
.pres-slide { max-width: 1320px; min-height: 100%; margin: 0 auto; padding: 24px 28px; background: #fff; border-radius: 14px; border-top: 6px solid var(--emas); box-sizing: border-box; }
.pres-kepala { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid #e2e8f0; }
.pres-no { display: block; font-size: 1.9rem; font-weight: 800; line-height: 1.15; color: var(--hijau-tua); }
.pres-sub { display: block; margin-top: 4px; color: #64748b; font-size: .95rem; }
a.pres-sub:hover { color: var(--hijau); }
.pres-lencana { flex: none; display: flex; gap: 6px; }
.pres-isi { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; }
.pres-kolom { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.pres-blok h3 { margin: 0 0 6px; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--hijau); }
.pres-blok p { margin: 0; font-size: 1rem; line-height: 1.55; color: #1e293b; overflow-wrap: anywhere; }
.pres-utama { padding: 14px 16px; background: var(--hijau-muda); border-radius: 10px; }
.pres-utama p { font-size: 1.08rem; font-weight: 500; }
.pres-rinci { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 0; padding-top: 12px; border-top: 1px dashed #cbd5e1; }
.pres-rinci dt { font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #64748b; }
.pres-rinci dd { margin: 2px 0 0; font-weight: 600; color: #1e293b; }
.pres-berkas-daftar { display: flex; flex-direction: column; gap: 8px; }
.pres-berkas-daftar p { font-size: .85rem; }
.pres-berkas { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #dce5ec; border-radius: 10px; background: #f8fafc; color: var(--hijau); font-size: .88rem; font-weight: 600; overflow-wrap: anywhere; }
a.pres-berkas:hover { border-color: var(--hijau); background: var(--hijau-muda); }
.pres-berkas.ada-gambar { flex-direction: column; align-items: stretch; padding: 8px; }
.pres-gambar { display: block; width: 100%; max-height: 46vh; object-fit: contain; border-radius: 6px; background: #e2e8f0; }
.pres-berkas-teks { color: #64748b; font-weight: 500; }
@media (max-width: 900px) {
    .pres { height: auto; min-height: 0; border-radius: 12px; }
    .pres.pres-penuh { overflow: auto; }
    .pres-bilah { flex-wrap: wrap; padding: 8px 10px; }
    .pres-lompat { order: 5; flex-basis: 100%; font-size: 16px; }
    .pres-nav { margin-left: auto; }
    .pres-panggung { padding: 8px; overflow: visible; }
    .pres-slide { padding: 16px; }
    .pres-isi { grid-template-columns: 1fr; }
    .pres-no { font-size: 1.45rem; }
}

/* Presentasi PICA: banyak foto muat sekaligus dalam satu layar (3 Nov 2026) */
.pres-galeri { display: grid; gap: 6px; grid-template-columns: repeat(var(--kol, 1), minmax(0, 1fr)); grid-template-rows: repeat(var(--baris, 1), minmax(0, 1fr)); }
.pres-galeri .pres-berkas { min-height: 0; min-width: 0; padding: 4px; gap: 2px; overflow: hidden; }
.pres-galeri .pres-gambar { flex: 1 1 0; min-height: 0; max-height: none; }
.pres-galeri .pres-berkas-nama { display: none; }
@media (min-width: 901px) {
    .pres-slide.ada-galeri .pres-isi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .pres-slide.ada-galeri .pres-isi > .pres-kolom:last-child { position: sticky; top: 0; align-self: start; width: 100%; height: calc(100vh - 330px); min-height: 280px; gap: 10px; }
    .pres.pres-penuh .pres-slide.ada-galeri .pres-isi > .pres-kolom:last-child { height: calc(100vh - 230px); }
    .pres-blok-galeri { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
    .pres-blok-galeri .pres-berkas-daftar { flex: 1; min-height: 0; }
    .pres-blok-galeri .pres-galeri { flex: 1; min-height: 0; }
}
@media (max-width: 900px) {
    .pres-galeri { grid-template-columns: repeat(var(--kol-hp, 1), minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: min(calc((100vh - 250px) / var(--baris-hp, 1)), 46vh); }
}

/* Presentasi PICA: tampilan mengikuti Presentasi Kepatuhan Portal AMIRA (3 Nov 2026) */
.pres { position: relative; background: #fff; box-shadow: 0 10px 30px rgba(15, 23, 42, .14); }
.pres > * { position: relative; }
.pres-kemajuan { flex: none; height: 3px; background: rgba(15, 23, 42, .09); }
#presKemajuan { width: 0; height: 100%; background: linear-gradient(90deg, #2b7fd0, #059669); transition: width .4s cubic-bezier(.4, 0, .2, 1); }
.pres-logo { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 28px 6px; }
.pres-logo img { height: 36px; width: auto; }
.pres-panggung { order: 2; padding: 4px 0 0; }
.pres-bilah { order: 3; background: rgba(255, 255, 255, .92); border-top: 1px solid rgba(15, 23, 42, .09); color: #0f172a; }
.pres-judul { color: #0b4f8a; }
.pres-lompat { border-color: #cbd5e1; }
.pres-bilah .tombol { background: #0b4f8a; border-color: #0b4f8a; color: #fff; }
.pres-bilah .tombol:hover:not(:disabled) { background: #2b7fd0; border-color: #2b7fd0; }
.pres-bilah .tombol:disabled { opacity: .35; }
.pres-slide { max-width: none; min-height: 0; margin: 0; padding: 0 28px 14px; background: transparent; border-top: 0; border-radius: 0; }
.pres-kepala { padding-bottom: 10px; margin-bottom: 12px; border-bottom-color: rgba(15, 23, 42, .09); }
.pres-alis { display: block; font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #2b7fd0; }
.pres-no { font-weight: 900; color: #0f172a; letter-spacing: -.01em; margin-top: 2px; }
.pres-sub { color: #64748b; font-weight: 600; margin-top: 2px; }
.pres-blok h3 { color: #2b7fd0; }
.pres-utama { background: rgba(225, 29, 72, .1); border-left: 4px solid #e11d48; }
.pres-blok.pres-utama h3 { color: #be123c; }
.pres-berkas { background: rgba(255, 255, 255, .9); }
@media (min-width: 901px) {
    .pres-slide.ada-galeri .pres-isi > .pres-kolom:last-child { height: calc(100vh - 372px); }
    .pres.pres-penuh .pres-slide.ada-galeri .pres-isi > .pres-kolom:last-child { height: calc(100vh - 260px); }
}
@media (max-width: 900px) {
    .pres-logo { padding: 8px 14px 4px; }
    .pres-logo img { height: 26px; }
    .pres-panggung { padding: 4px 0 0; }
    .pres-slide { padding: 0 14px 12px; }
    .pres-alis { font-size: .62rem; letter-spacing: .08em; }
    .pres-bilah { position: sticky; bottom: 0; }
}
@media (max-width: 900px) {
    .pres:not(.pres-penuh) { overflow: visible; }
    .pres-bilah { order: 1; position: sticky; top: -12px; bottom: auto; z-index: 5; border-top: 0; border-bottom: 1px solid rgba(15, 23, 42, .09); background: #fff; }
    .pres.pres-penuh .pres-bilah { top: 0; }
}

/* Presentasi PICA: huruf besar utk rapat (3 Nov 2026). Ukuran kolom kiri dalam em, font-size-nya diatur paskanHuruf() di smkp.js. */
.pres-isi > .pres-kolom:first-child { font-size: 17px; gap: .55em; }
.pres-isi > .pres-kolom:first-child .pres-blok h3 { margin-bottom: .2em; font-size: .62em; }
.pres-isi > .pres-kolom:first-child .pres-blok p { font-size: 1em; line-height: 1.35; }
.pres-isi > .pres-kolom:first-child .pres-utama { padding: .5em .7em; }
.pres-isi > .pres-kolom:first-child .pres-utama p { font-size: 1.08em; font-weight: 600; }
.pres-isi > .pres-kolom:first-child .pres-rinci { margin-top: auto; padding-top: .5em; gap: .4em 1.4em; }
.pres-isi > .pres-kolom:first-child .pres-rinci dt { font-size: .58em; }
.pres-isi > .pres-kolom:first-child .pres-rinci dd { margin-top: 0; font-size: 1em; }
.pres-isi > .pres-kolom:last-child .pres-blok h3 { font-size: .95rem; }
.pres-isi > .pres-kolom:last-child .pres-berkas { font-size: 1.02rem; }
.pres-isi > .pres-kolom:last-child .pres-berkas-daftar p { font-size: 1rem; }
.pres-isi > .pres-kolom:last-child .pres-galeri .pres-berkas { font-size: .85rem; }
.pres-alis { font-size: .9rem; }
.pres-no { font-size: 2.3rem; line-height: 1.05; }
.pres-sub { font-size: 1.15rem; }
.pres-lencana .lencana { font-size: 1rem; padding: 5px 14px; }
.pres-isi { gap: 20px; }
@media (min-width: 901px) {
    .pres-slide:not(.ada-galeri) .pres-isi { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
    .pres-slide.ada-galeri .pres-isi > .pres-kolom:last-child { min-height: 0; }
}
@media (max-width: 900px) {
    .pres-alis { font-size: .62rem; }
    .pres-no { font-size: 1.6rem; }
    .pres-sub { font-size: .95rem; }
    .pres-lencana .lencana { font-size: .8rem; padding: 2px 9px; }
}
/* Slide tanpa evidence sama sekali: seluruh lebar untuk teks. */
.pres-slide.tanpa-evidence .pres-isi { grid-template-columns: minmax(0, 1fr) !important; }
.pres-slide.tanpa-evidence .pres-isi > .pres-kolom:last-child { display: none; }
.pres-isi > .pres-kolom:first-child .pres-blok h3 { font-size: max(.62em, 12px); }
.pres-isi > .pres-kolom:first-child .pres-rinci dt { font-size: max(.58em, 11px); }

/* Presentasi PICA: sampul & penutup, tata letak mengikuti presentasi Portal AMIRA; ukuran dalam cq* mengikuti luas slide (3 Nov 2026) */
.pres.pres-di-khusus .pres-logo { display: none; }
.pres.pres-di-khusus .pres-panggung { padding: 0; overflow: hidden; }
.pres-slide.pres-sampul, .pres-slide.pres-penutup { position: relative; height: 100%; padding: 0; overflow: hidden; container-type: size; }
.pres-hias { position: absolute; inset: 0; width: 100%; height: 100%; }
.pres-hias circle { transform-box: fill-box; transform-origin: center; }
.pres-hias-cincin { animation: pres-putar 26s linear infinite; }
.pres-hias-halo { opacity: .3; animation: pres-putar 120s linear infinite reverse; }
.pres-hias-biru { animation: pres-tumbuh .9s cubic-bezier(.22, 1, .36, 1) .15s both; }
.pres-hias-merah { animation: pres-gambar 2.2s cubic-bezier(.65, 0, .35, 1) .35s forwards; }
.pres-sampul-foto { position: absolute; left: 0; top: 0; width: 44.3%; height: 100%; overflow: hidden; animation: pres-tirai 1.3s cubic-bezier(.65, 0, .35, 1) both; }
.pres-sampul-foto img { width: 100%; height: 100%; object-fit: cover; }
.pres-sampul-danantara { position: absolute; left: 45%; top: 3.2%; height: 5.6cqh; width: auto; animation: pres-turun .7s cubic-bezier(.22, 1, .36, 1) .5s both; }
.pres-sampul-antam { position: absolute; right: 3.3%; top: 2%; height: 6.7cqh; width: auto; animation: pres-turun .7s cubic-bezier(.22, 1, .36, 1) .65s both; }
.pres-sampul-teks { position: absolute; left: 45.7%; right: 3.3%; top: 27%; }
.pres-sampul-teks h1 { margin: 0; font-size: 3.1cqw; font-weight: 800; line-height: 1.3; color: #0d4b80; }
.pres-sampul-teks h1 span { display: block; animation: pres-naik .8s cubic-bezier(.22, 1, .36, 1) .8s both; }
.pres-sampul-teks h1 span + span { animation-delay: 1s; }
.pres-sampul-garis { width: 11.5cqw; height: .6cqh; margin-top: 2cqh; border-radius: 999px; background: #ff2d00; transform-origin: left center; animation: pres-garis .7s cubic-bezier(.22, 1, .36, 1) 1.35s both; }
.pres-sampul-sub { margin: 2cqh 0 0; font-size: 1.6cqw; font-weight: 700; color: #475569; animation: pres-naik .7s cubic-bezier(.22, 1, .36, 1) 1.5s both; }
.pres-sampul-angka { margin: 1.2cqh 0 0; font-size: 1.25cqw; font-weight: 600; line-height: 1.5; color: #64748b; animation: pres-naik .7s cubic-bezier(.22, 1, .36, 1) 1.6s both; }
.pres-sampul-tanggal { position: absolute; right: 4%; bottom: 8%; font-size: 1.7cqw; font-weight: 800; color: #0d4b80; animation: pres-kanan .8s cubic-bezier(.22, 1, .36, 1) 1.7s both; }
.pres-slide.pres-penutup { background: radial-gradient(circle at 78% 16%, rgba(37, 99, 235, .10), transparent 46%), radial-gradient(circle at 8% 92%, rgba(43, 69, 130, .08), transparent 44%), #fff; }
.pres-penutup-isi { position: absolute; left: 6.25%; top: 24%; max-width: 75%; }
.pres-penutup-alis { font-size: 1.2cqw; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #1e5fa0; }
.pres-penutup-isi h1 { margin: 1.3cqh 0 0; font-size: 8.75cqw; font-weight: 900; line-height: 1.05; letter-spacing: -.03em; color: #2b4582; background: linear-gradient(100deg, #2b4582 0%, #1e5fa0 58%, #2563eb 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: pres-naik .8s cubic-bezier(.22, 1, .36, 1) .3s both; }
.pres-penutup-sub { margin: 2.4cqh 0 0; font-size: 1.6cqw; font-weight: 700; color: #334155; }
.pres-penutup-tanggal { display: inline-block; margin-top: 4cqh; padding-top: 2cqh; border-top: 3px solid #ff2d00; font-size: 1.4cqw; font-weight: 800; color: #0d4b80; }
.pres-penutup-logo { position: absolute; bottom: 10%; width: auto; }
.pres-penutup-logo.is-kiri { left: 6.25%; height: 5.8cqh; }
.pres-penutup-logo.is-kanan { right: 10%; height: 6.9cqh; }
@keyframes pres-putar { to { transform: rotate(360deg); } }
@keyframes pres-gambar { to { stroke-dashoffset: 0; } }
@keyframes pres-tumbuh { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes pres-tirai { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pres-turun { from { opacity: 0; transform: translateY(-22px); } to { opacity: 1; transform: none; } }
@keyframes pres-naik { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes pres-kanan { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } }
@keyframes pres-garis { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .pres-slide.pres-sampul *, .pres-slide.pres-penutup * { animation: none !important; } .pres-hias-merah { stroke-dashoffset: 0; } }
@media (max-width: 900px) {
    .pres-slide.pres-sampul, .pres-slide.pres-penutup { height: calc(100vh - 215px); min-height: 460px; }
    .pres-sampul-foto { width: 100%; height: 34%; }
    .pres-sampul-danantara { left: 4%; top: 36%; height: 30px; }
    .pres-sampul-antam { right: 4%; top: 35.5%; height: 34px; }
    .pres-sampul-teks { left: 5%; right: 5%; top: 44%; }
    .pres-sampul-teks h1 { font-size: 22px; }
    .pres-sampul-garis { width: 90px; height: 4px; margin-top: 10px; }
    .pres-sampul-sub { margin-top: 10px; font-size: 15px; }
    .pres-sampul-angka { margin-top: 6px; font-size: 13px; }
    .pres-sampul-tanggal { right: 5%; bottom: 3%; font-size: 14px; }
    .pres-penutup-isi { left: 7%; right: 7%; top: 20%; max-width: none; }
    .pres-penutup-alis { font-size: 11px; letter-spacing: .1em; }
    .pres-penutup-isi h1 { margin-top: 8px; font-size: 54px; }
    .pres-penutup-sub { margin-top: 12px; font-size: 15px; }
    .pres-penutup-tanggal { margin-top: 18px; padding-top: 10px; font-size: 14px; }
    .pres-penutup-logo.is-kiri { height: 30px; } .pres-penutup-logo.is-kanan { right: 7%; height: 34px; }
}

/* Presentasi Kesesuaian & OFI: warna kotak utama (PICA = merah) */
.pres-utama.pres-nada-hijau { background: rgba(5, 150, 105, .1); border-left-color: #059669; }
.pres-blok.pres-nada-hijau h3 { color: #047857; }
.pres-utama.pres-nada-biru { background: rgba(37, 99, 235, .09); border-left-color: #2563eb; }
.pres-blok.pres-nada-biru h3 { color: #1d4ed8; }
.pres-unduh { white-space: nowrap; }
.pres-unduh:disabled { opacity: .7; }

/* Presentasi: slide Resume (3 Nov 2026) */
.pres-resume-kartu { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 12px; }
.pres-resume-kartu > div { display: flex; flex-direction: column; align-items: center; padding: 8px 6px; border-radius: 10px; text-align: center; }
.pres-resume-kartu strong { font-size: clamp(1.5rem, 4.2vh, 2.8rem); font-weight: 900; line-height: 1.1; }
.pres-resume-kartu span { font-size: clamp(.68rem, 1.5vh, 1rem); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.pres-resume-kartu .nada-merah { background: #ffe4e6; color: #be123c; } .pres-resume-kartu .nada-emas { background: #fef3c7; color: #92400e; }
.pres-resume-kartu .nada-hijau { background: #d1fae5; color: #047857; } .pres-resume-kartu .nada-biru { background: #e9f0fd; color: #1d4ed8; }
.pres-resume-kartu .nada-netral { background: #f1f5f9; color: #0f172a; }
.pres-resume-narasi { margin-bottom: 12px; padding: 10px 16px; border-radius: 10px; }
.pres-resume-narasi.pres-nada-merah { background: rgba(225, 29, 72, .1); border-left: 4px solid #e11d48; }
.pres-resume-narasi p { margin: 0; font-size: clamp(.95rem, 2.3vh, 1.6rem); font-weight: 600; line-height: 1.35; color: #1e293b; }
.pres-resume-panel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 24px; }
.pres-resume-panel h3 { margin: 0 0 6px; font-size: clamp(.75rem, 1.6vh, 1.05rem); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #2b7fd0; }
.pres-resume-baris { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr) 2.6em; align-items: center; gap: 8px; padding: clamp(1px, .35vh, 5px) 0; font-size: clamp(.8rem, 1.8vh, 1.2rem); color: #1e293b; }
.pres-resume-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pres-resume-jalur { display: block; height: 1em; border-radius: 999px; background: #eef2f4; overflow: hidden; }
.pres-resume-jalur i { display: block; width: 0; height: 100%; border-radius: 999px; transition: width .6s cubic-bezier(.22, 1, .36, 1); }
.pres-resume-jalur .nada-merah { background: #e11d48; } .pres-resume-jalur .nada-hijau { background: #059669; } .pres-resume-jalur .nada-biru { background: #2563eb; }
.pres-resume-baris b { text-align: right; }
.pres-resume-daftar { margin: 0; font-size: clamp(.8rem, 1.8vh, 1.2rem); }
.pres-resume-daftar > div { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: 8px; padding: clamp(1px, .35vh, 5px) 0; }
.pres-resume-daftar dt { font-weight: 800; color: #0f172a; }
.pres-resume-daftar dd { margin: 0; color: #334155; overflow-wrap: anywhere; }
@media (max-width: 900px) {
    .pres-resume-kartu { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pres-resume-panel { grid-auto-flow: row; }
}
@media (min-width: 901px) and (max-height: 900px) {
    .pres-resume-kartu { margin-bottom: 8px; }
    .pres-resume-kartu > div { padding: 3px 6px; }
    .pres-resume-narasi { margin-bottom: 8px; padding: 6px 14px; }
    .pres-resume-baris, .pres-resume-daftar > div { padding: 0; line-height: 1.25; }
    .pres-resume-panel h3 { margin-bottom: 3px; }
    .pres-resume .pres-kepala { margin-bottom: 8px; padding-bottom: 6px; }
}

/* Tombol tarik di samping filter tahun; jarak kartu ringkasan dgn isi di bawahnya (3 Nov 2026) */
.tarik-samping { display: flex; align-items: center; gap: 10px; margin: 0; }
.tarik-samping .redup { white-space: nowrap; }
.angka-utama { margin-bottom: 16px; }
@media (max-width: 760px) { .tarik-samping { flex-wrap: wrap; } .tarik-samping .redup { white-space: normal; } }
.angka-utama + .judul-bagian { margin-top: 0; }

/* Sidebar (3 Nov 2026): menu sudah banyak; tanpa flex:none tombol ikut gepeng mengisi tinggi layar. Sekarang tinggi tetap, daftarnya yang digulir. */
.sisi-menu { gap: 5px; }
.sisi-menu > * { flex: none; }
.sisi-menu a { min-height: 42px; }

/* Sidebar: grup bisa dibuka/tutup (3 Nov 2026) */
button.sisi-judul { padding: 5px 2px; background: none; border: 0; border-radius: 6px; font-family: inherit; text-align: left; cursor: pointer; }
button.sisi-judul:hover { color: #fff; }
button.sisi-judul:focus-visible { outline: 2px solid #f59e0b; outline-offset: 1px; }
.sisi-panah { margin-left: auto; font-size: 11px; transition: transform .2s ease; }
button.sisi-judul[aria-expanded="false"] .sisi-panah { transform: rotate(-90deg); }
.sisi-grup { display: flex; flex-direction: column; gap: 5px; }
.sisi-grup.tutup { display: none; }
/* Saat sidebar diciutkan hanya ikon yang tampak: semua menu tetap harus terjangkau. */
html.sisi-ciut .sisi-grup.tutup { display: flex; }
html.sisi-ciut button.sisi-judul { pointer-events: none; }
html.sisi-ciut .sisi-panah { display: none; }


/* Banner sapaan di Dashboard (3 Nov 2026): masuk sekali saat halaman dibuka, latar bergeser sangat pelan. */
.db-sambut { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; padding: 22px 28px; border-radius: var(--radius); border-bottom: 3px solid var(--emas); color: #fff; background: linear-gradient(100deg, #0a2540, #0b4f8a, #1f6fb5, #0b4f8a, #0a2540); background-size: 300% 100%; box-shadow: var(--bayang); animation: db-sambut-masuk .6s cubic-bezier(.22, 1, .36, 1) both, db-sambut-latar 24s ease-in-out infinite alternate; }
.db-sambut-teks { min-width: 0; }
.db-sambut-salam { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; animation: db-sambut-naik .6s cubic-bezier(.22, 1, .36, 1) .15s both; }
.db-sambut-salam b { font-weight: 800; color: #fcd34d; }
.db-sambut-info { margin: 6px 0 0; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .88); animation: db-sambut-naik .6s cubic-bezier(.22, 1, .36, 1) .3s both; }
.db-sambut img { flex: none; height: 42px; width: auto; animation: db-sambut-naik .6s cubic-bezier(.22, 1, .36, 1) .4s both; }
@keyframes db-sambut-masuk { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes db-sambut-naik { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes db-sambut-latar { from { background-position: 0% 0; } to { background-position: 100% 0; } }
@media (max-width: 760px) {
    .db-sambut { padding: 16px 18px; margin-bottom: 14px; }
    .db-sambut-salam { font-size: 19px; }
    .db-sambut-info { font-size: 13px; }
    .db-sambut img { display: none; }
}
@media (prefers-reduced-motion: reduce) { .db-sambut, .db-sambut-salam, .db-sambut-info, .db-sambut img { animation: none; } }
.lap-status-usang { color: #be123c; font-weight: 700; }

/* Kotak Unggah eviden & Penilaian auditor: warna mengikuti kelengkapan isian (4 Nov 2026) */
.kartu.nada-kotak-merah { background: rgba(225, 29, 72, .07); border-color: rgba(225, 29, 72, .35); }
.kartu.nada-kotak-kuning { background: rgba(245, 158, 11, .13); border-color: rgba(217, 119, 6, .45); }
.kartu.nada-kotak-hijau { background: rgba(5, 150, 105, .09); border-color: rgba(5, 150, 105, .4); }
.kotak-status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.nada-kotak-merah .kotak-status { background: #ffe4e6; color: #be123c; }
.nada-kotak-kuning .kotak-status { background: #fef3c7; color: #92400e; }
.nada-kotak-hijau .kotak-status { background: #d1fae5; color: #047857; }
#kotakUnggah .buka-unggah > span:last-child { gap: 10px; }

/* Grup Pra Audit (7 Nov 2026): hijau toska, beda dari Elemen (emas), Hasil Audit (biru), Laporan (ungu) */
.sisi-judul-pra { color: rgba(147, 197, 253, .85); }
.sisi-judul-pra::before { background: #60a5fa; box-shadow: 0 0 8px rgba(96, 165, 250, .7); }
.sisi-menu a[data-grup="pra"] i { color: #93c5fd; background: rgba(96, 165, 250, .12); }
.sisi-menu a[data-grup="pra"]:hover i { background: rgba(96, 165, 250, .24); color: #dbeafe; }
.sisi-menu a[data-grup="pra"].aktif { background: linear-gradient(100deg, #3b82f6 0%, #1e5fa0 50%, rgba(30, 95, 160, .35) 100%); }
.sisi-menu a[data-grup="pra"].aktif::before { background: linear-gradient(180deg, #dbeafe, #60a5fa); box-shadow: 0 0 10px rgba(96, 165, 250, .7); }
.sisi-menu a[data-grup="pra"].aktif i { background: linear-gradient(135deg, #dbeafe, #60a5fa); color: #14365e; }
.riwayat-tahun.pra-tahun { background: linear-gradient(135deg, #1e5fa0, #14365e); color: #dbeafe; }

/* Pra Audit / Respon pola Laporan Audit (7 Nov 2026) */
.pra-subjudul { font-size: 14px; margin: 18px 0 8px; color: var(--teks-redup, #64748b); text-transform: uppercase; letter-spacing: .04em; }
/* Halaman masuk: tombol mata lihat/sembunyikan kata sandi (warna menyesuaikan kartu gelap) */
.hal-masuk .kartu-masuk .sandi-bungkus { margin-bottom: 0; }
.hal-masuk .kartu-masuk .sandi-bungkus input { padding-right: 48px; }
.hal-masuk .kartu-masuk .lihat-sandi { height: 100%; color: rgba(255, 255, 255, .7); border-radius: 0 10px 10px 0; }
.hal-masuk .kartu-masuk .lihat-sandi:hover, .hal-masuk .kartu-masuk .lihat-sandi:focus-visible { color: #fde68a; outline: none; }
.hal-masuk .kartu-masuk .sandi-bungkus input:focus { transform: none; }
/* Laporan Audit: daftar auditor tahun ini sebagai kartu kecil berfoto; Lead disorot emas (7 Nov 2026) */
.lap-tim-blok { min-width: 0; }
.lap-tim-judul { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.lap-tim-judul .label-kecil { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.lap-tim-jumlah { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--hijau-muda); color: var(--hijau); font-size: 11px; font-weight: 800; }
.lap-tim-tautan { font-size: 12.5px; font-weight: 600; color: var(--hijau); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.lap-tim-tautan:hover { text-decoration: underline; }
.lap-tim { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.lap-tim.diganti { opacity: .55; }
.lap-tim-item { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border: 1px solid var(--garis); border-radius: 12px; background: #fff; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.lap-tim-item:hover { border-color: rgba(11, 79, 138, .35); box-shadow: 0 4px 12px rgba(15, 23, 42, .06); }
.lap-tim-foto { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; background: #e2e8f0; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(11, 79, 138, .22); }
.lap-tim-nama { display: grid; min-width: 0; flex: 1; line-height: 1.25; }
.lap-tim-nama strong { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lap-tim-nama small { font-size: 11.5px; color: var(--redup); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lap-tim-peran { display: none; flex: none; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 99px; background: linear-gradient(135deg, #fef0c2, var(--emas)); color: #4a3800; font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.lap-tim-item.lead { order: -1; border-color: rgba(245, 158, 11, .7); background: linear-gradient(135deg, #fffbea, #fff 70%); box-shadow: 0 4px 14px rgba(245, 158, 11, .18); }
.lap-tim-item.lead .lap-tim-foto { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--emas); }
.lap-tim-item.lead .lap-tim-peran { display: inline-flex; }
.lap-tim-sumber, .lap-tim-kosong { margin: 8px 0 0; font-size: 12px; color: var(--redup); line-height: 1.5; }
.lap-tim-sumber i, .lap-tim-kosong i { margin-right: 4px; }
.lap-tim-catatan { color: #92400e; font-weight: 600; }
.lap-tim-kosong { padding: 10px 12px; border: 1px dashed var(--garis); border-radius: 10px; }
.lap-tim-blok .lap-ganti { margin-top: 10px; }
.lap-tim-blok .lap-ganti summary { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; font-size: 12.5px; list-style: none; }
.lap-tim-blok .lap-ganti summary::-webkit-details-marker { display: none; }
.lap-tim-blok .lap-ganti summary:hover { background: var(--hijau-muda); }
.lap-tim-blok .lap-ganti[open] summary { background: var(--hijau-muda); }
@media (max-width: 640px) { .lap-tim { grid-template-columns: 1fr; } }
/* Tombol "Sinkron Data Terbaru" di editor laporan: ikon berputar selama proses */
@keyframes lapputar { to { transform: rotate(360deg); } }
.lap-putar { display: inline-block; animation: lapputar .9s linear infinite; }
/* Formulir Kelayakan Audit (7 Nov 2026) */
.kl-form { margin-top: 16px; }
.kl-kepala { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.kl-kepala h2 { margin: 0 0 4px; }
.kl-kepala p { margin: 0; max-width: 720px; }
.kl-alat { display: flex; gap: 6px; flex-wrap: wrap; }
.kl-bagian { border: 1px solid var(--garis); border-radius: 12px; margin-top: 10px; background: #fff; overflow: hidden; }
.kl-bagian > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-weight: 700; font-size: 14.5px; }
.kl-bagian > summary::-webkit-details-marker { display: none; }
.kl-bagian > summary::after { content: "\F282"; font-family: bootstrap-icons; margin-left: auto; color: var(--redup); transition: transform .2s ease; }
.kl-bagian[open] > summary { border-bottom: 1px solid var(--garis); background: var(--hijau-muda); }
.kl-bagian[open] > summary::after { transform: rotate(180deg); }
.kl-no { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: var(--hijau); color: #fff; font-size: 12px; font-weight: 800; flex: none; }
.kl-isi { padding: 14px; }
.kl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 16px; }
.kl-grid > div { min-width: 0; }
.kl-lebar { grid-column: 1 / -1; }
.kl-isi textarea { width: 100%; padding: 9px 12px; border: 1px solid #cbd5e1; border-radius: 10px; font: inherit; resize: vertical; }
.kl-faktor, .kl-tetap { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.kl-faktor li, .kl-tetap li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--garis); border-radius: 10px; }
.kl-faktor-no { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 6px; background: #f1f5f9; font-size: 12px; font-weight: 700; flex: none; }
.kl-faktor-teks { flex: 1; min-width: 0; font-size: 13.5px; }
.kl-yt { display: inline-flex; gap: 12px; flex: none; }
.kl-yt label { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 13px; margin: 0; cursor: pointer; }
.kl-tetap select { width: auto; min-width: 150px; flex: none; }
.kl-subjudul { font-size: 13.5px; margin: 16px 0 8px; color: var(--hijau-tua); }
.kl-subjudul:first-child { margin-top: 0; }
.kl-tabel-bungkus { overflow-x: auto; border: 1px solid var(--garis); border-radius: 10px; }
.kl-tabel { width: 100%; border-collapse: collapse; font-size: 13px; }
.kl-tabel th { background: #f8fafc; text-align: left; padding: 7px 8px; font-size: 12px; color: var(--redup); border-bottom: 1px solid var(--garis); }
.kl-tabel td { padding: 4px 6px; border-bottom: 1px solid var(--garis); vertical-align: top; }
.kl-tabel tr:last-child td { border-bottom: 0; }
.kl-tabel input, .kl-tabel textarea { min-width: 140px; padding: 6px 8px; font-size: 13px; border-radius: 8px; }
.kl-kol-no { width: 36px; text-align: center; color: var(--redup); font-weight: 700; padding-top: 10px !important; }
.kl-kol-lebar { min-width: 320px; }
.kl-kol-aksi { width: 36px; text-align: center; }
.kl-hapus { border: 0; background: none; color: #94a3b8; cursor: pointer; padding: 6px; border-radius: 6px; }
.kl-hapus:hover { color: #dc2626; background: #fef2f2; }
.kl-tambah { margin-top: 8px; }
.kl-kaki { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--garis); }
@media (max-width: 640px) { .kl-faktor li, .kl-tetap li { flex-wrap: wrap; } .kl-yt, .kl-tetap select { margin-left: 32px; } }
/* Formulir Kelayakan: grid 3 kolom tetap supaya isian tidak memanjang ke bawah (7 Nov 2026) */
.kl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; }
.kl-isi textarea { min-height: 0; line-height: 1.4; }
.kl-grid .label-kecil { min-height: 0; }
@media (max-width: 1000px) { .kl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .kl-grid { grid-template-columns: 1fr; } }
/* Kelayakan: bagian berisi isian pendek dipadatkan (4-5 kolom), daftar Ya/Tidak & Memadai 2 kolom */
.kl-grid.kl-k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kl-grid.kl-k5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kl-grid .label-kecil { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.kl-faktor, .kl-tetap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kl-faktor li, .kl-tetap li { padding: 6px 10px; }
.kl-faktor-teks { font-size: 13px; line-height: 1.35; }
.kl-tetap select { min-width: 130px; padding: 6px 8px; }
.kl-isi input[type=text] { padding: 8px 10px; }
@media (max-width: 1200px) { .kl-grid.kl-k5 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .kl-grid.kl-k4, .kl-grid.kl-k5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kl-faktor, .kl-tetap { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .kl-grid.kl-k4, .kl-grid.kl-k5 { grid-template-columns: 1fr; } }
.kl-grid:not(.kl-k4):not(.kl-k5) .label-kecil { white-space: normal; overflow: visible; }
/* Kelayakan: tinggi kotak isian dalam satu baris grid disamakan (kotak ikut baris tertinggi) */
.kl-grid { align-items: stretch; }
.kl-grid > div { display: flex; flex-direction: column; }
.kl-grid > div > input[type=text], .kl-grid > div > textarea { flex: 1 1 auto; min-height: 40px; }
.kl-grid > div > textarea { resize: none; }
/* Kartu template (Pra Audit/Respon): pola sama dgn kartu dokumen tahunan */
.lap-template.lap-status { margin-top: 16px; }
.lap-ikon-template { background: #fff8e1 !important; color: #d97706 !important; }
/* Checklist dropdown + tambah manual (formulir Kelayakan/Rencana, 7 Nov 2026) */
.kl-cek { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kl-cek-terpilih { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; counter-reset: klcek; max-height: 236px; overflow-y: auto; }
.kl-cek-butir { counter-increment: klcek; display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border: 1px solid var(--garis); border-radius: 9px; background: #fff; font-size: 13px; line-height: 1.35; }
.kl-cek-butir::before { content: counter(klcek); flex: none; min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; background: var(--hijau-muda); color: var(--hijau); font-size: 11px; font-weight: 800; }
.kl-cek-teks { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.kl-cek-aksi { display: inline-flex; gap: 2px; flex: none; }
.kl-cek-btn { border: 0; background: none; color: #94a3b8; cursor: pointer; padding: 2px 5px; border-radius: 6px; font-size: 12px; }
.kl-cek-btn:hover { color: var(--hijau); background: var(--hijau-muda); }
/* 10 Nov 2026: hapus pilihan dari daftar (semua dropdown ceklist) + mode satu pilihan (Metode di Metode & Sampel). */
.kl-cek-btn.kl-cek-hapus:hover { color: #e11d48; background: #fff1f2; }
/* Rencana > Tim Audit: kolom Cakupan penilaian (10 Nov 2026) */
.rc-cakupan-ket { margin: 0 0 8px; }
.kl-tabel-bungkus.rc-tim-bungkus { overflow: visible; } /* panel dropdown tidak terpotong */
.rc-tim { table-layout: fixed; }
.rc-tim col.rc-c-peran { width: 16%; } .rc-tim col.rc-c-nama { width: 26%; } .rc-tim col.rc-c-cak { width: 26%; }
.rc-tim col.rc-c-no { width: 40px; } .rc-tim col.rc-c-aksi { width: 40px; }
.rc-tim td { vertical-align: middle; }
.rc-tim input[type=text] { width: 100%; min-width: 0; }
/* input di dalam dropdown ceklist jangan terkena gaya input tabel (kotak centang melebar) */
.kl-tabel .kl-cek input[type=checkbox], .kl-tabel .kl-cek input[type=radio] { min-width: 0; width: auto; padding: 0; }
.kl-tabel .kl-cek .kl-cek-cari, .kl-tabel .kl-cek [data-kl-cek-manual] { min-width: 0; }
.rc-tim .kl-cek-panel { min-width: 320px; z-index: 30; }
.rc-tim .kl-cek-placeholder { color: var(--redup); font-style: italic; }
@media (max-width: 900px) {
    .rc-tim, .rc-tim tbody { display: block; }
    .rc-tim colgroup, .rc-tim thead { display: none; }
    .rc-tim tr { display: grid; grid-template-columns: 32px 1fr 1fr 32px; gap: 6px; padding: 8px 6px; border-bottom: 1px solid var(--garis); }
    .rc-tim td { display: block; border: 0; padding: 0; }
    .rc-tim td.rc-cakupan { grid-column: 2 / 4; }
    .rc-tim td.rc-cakupan::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; color: var(--redup); margin-bottom: 2px; }
}
.kl-cek-item:not(.dipilih) .kl-cek-hapus { opacity: 0; transition: opacity .12s ease; }
.kl-cek-item:not(.dipilih):hover .kl-cek-hapus, .kl-cek-item:not(.dipilih) .kl-cek-hapus:focus-visible { opacity: 1; }
@media (hover: none) { .kl-cek-item:not(.dipilih) .kl-cek-hapus { opacity: 1; } }
.kl-satu .kl-cek-item input[type=radio] { accent-color: var(--hijau); }
.mt-kol-metode .kl-cek-ringkas .kl-cek-isi { white-space: normal; }
.kl-cek-hapus:hover { color: #dc2626; background: #fef2f2; }
.kl-cek-kosong { margin: 0; padding: 8px 10px; border: 1px dashed var(--garis); border-radius: 9px; }
.kl-cek-alat .tombol { gap: 6px; }
.kl-cek-jml { display: inline-grid; place-items: center; min-width: 34px; height: 18px; padding: 0 6px; border-radius: 99px; background: var(--hijau-muda); color: var(--hijau); font-size: 11px; font-weight: 800; }
.kl-cek-panel { border: 1px solid rgba(11, 79, 138, .3); border-radius: 12px; background: #fff; box-shadow: 0 10px 28px rgba(15, 23, 42, .12); padding: 10px; display: grid; gap: 8px; }
.kl-cek-panel[hidden] { display: none; }
.kl-cek-cari { width: 100%; padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 9px; font: inherit; font-size: 13px; }
.kl-cek-opsi { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; display: grid; gap: 2px; }
.kl-cek-opsi label { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 13px; line-height: 1.35; margin: 0; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--teks); }
.kl-cek-opsi label:hover { background: var(--hijau-muda); }
.kl-cek-opsi input { margin-top: 2px; flex: none; accent-color: var(--hijau); }
.kl-cek-nihil { padding: 8px; font-size: 12.5px; color: var(--redup); }
.kl-cek-manual { display: flex; gap: 6px; padding-top: 8px; border-top: 1px solid var(--garis); }
.kl-cek-manual input { flex: 1; min-width: 0; padding: 7px 10px; font-size: 13px; }
.kl-grid-cek { margin-top: 4px; }
.kl-grid .kl-label-panjang { white-space: normal; overflow: visible; }
/* Panel checklist melayang (dropdown) supaya isian lain tidak bergeser */
.kl-cek { position: relative; }
.kl-cek-panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin-top: 4px; min-width: 280px; }
.kl-bagian[open] { overflow: visible; }
/* Checklist v2: kotak ringkas seperti select + panel melayang */
.kl-cek-kotak { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; color: var(--teks); flex: 1 1 auto; }
.kl-cek-kotak:hover { border-color: rgba(11, 79, 138, .45); }
.kl-cek.terbuka .kl-cek-kotak, .kl-cek-kotak:focus-visible { border-color: var(--hijau); box-shadow: 0 0 0 3px rgba(11, 79, 138, .15); outline: none; }
.kl-cek-ringkas { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.kl-cek-isi { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl-cek-placeholder { color: #94a3b8; }
.kl-cek-panah { flex: none; color: var(--redup); transition: transform .2s ease; }
.kl-cek.terbuka .kl-cek-panah { transform: rotate(180deg); }
.kl-cek-jml { min-width: 22px; height: 20px; }
.kl-cek-panel { padding: 0; gap: 0; overflow: hidden; }
.kl-cek-panel > .kl-cek-cari { margin: 10px 10px 6px; width: calc(100% - 20px); }
.kl-cek-gulir { max-height: 320px; overflow-y: auto; padding: 0 6px 6px; }
.kl-cek-sub { margin: 8px 6px 4px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--redup); }
.kl-cek-sub span { text-transform: none; font-weight: 500; letter-spacing: 0; }
.kl-cek-urut, .kl-cek-opsi { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-height: none; overflow: visible; }
.kl-cek-item { display: flex; align-items: flex-start; gap: 4px; border-radius: 8px; }
.kl-cek-item:hover { background: #f8fafc; }
.kl-cek-item.dipilih { background: var(--hijau-muda); }
.kl-cek-item label { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; cursor: pointer; font-size: 13px; line-height: 1.35; margin: 0; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--teks); }
.kl-cek-item input { margin-top: 2px; flex: none; accent-color: var(--hijau); }
.kl-cek-no { flex: none; min-width: 18px; height: 18px; display: grid; place-items: center; border-radius: 5px; background: var(--hijau); color: #fff; font-size: 10.5px; font-weight: 800; }
.kl-cek-item .kl-cek-aksi { padding: 4px 4px 0 0; }
.kl-cek-manual { padding: 8px 10px; background: #f8fafc; border-top: 1px solid var(--garis); }
.kl-cek-panel { min-width: 340px; }
/* Panel checklist: buka ke atas bila ruang bawah sempit; tinggi daftar diatur JS */
.kl-cek.ke-atas .kl-cek-panel { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 4px; box-shadow: 0 -10px 28px rgba(15, 23, 42, .12); }
.kl-cek-panel { display: flex; flex-direction: column; }
.kl-cek-panel[hidden] { display: none; }
.kl-cek-gulir { max-height: 360px; overscroll-behavior: contain; }
@media (max-width: 640px) { .kl-cek-panel { min-width: 0; } }
/* Formulir Metode & Sampel (7 Nov 2026) */
.mt-jml { margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--redup); }
.mt-isi { display: grid; gap: 10px; }
.mt-induk { margin: 8px 0 0; font-size: 13px; color: var(--hijau-tua); padding: 6px 10px; background: #f8fafc; border-radius: 8px; }
.mt-induk b { color: var(--hijau); margin-right: 4px; }
.mt-kriteria { border: 1px solid var(--garis); border-radius: 12px; padding: 10px 12px; background: #fff; }
.mt-judul { display: flex; gap: 8px; align-items: baseline; font-size: 13.5px; font-weight: 600; margin-bottom: 8px; }
.mt-kode { flex: none; padding: 1px 8px; border-radius: 6px; background: var(--hijau-muda); color: var(--hijau); font-size: 12px; font-weight: 800; }
.mt-baris-daftar { display: grid; gap: 6px; }
.mt-baris { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2.4fr) auto; gap: 8px; align-items: start; }
.mt-metode { width: 100%; padding: 8px 10px; font-size: 13.5px; }
.mt-kosong .mt-baris-daftar::before { content: "Belum ada metode — tekan Tambah metode."; font-size: 12.5px; color: var(--redup); }
.mt-tambah { margin-top: 8px; }
@media (max-width: 760px) { .mt-baris { grid-template-columns: 1fr auto; } .mt-kol-sampel { grid-column: 1 / -1; grid-row: 2; } }
/* Formulir SK */
.sk-tim-alat { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
/* Data Bersama Audit (7 Nov 2026) */
.bersama { padding: 0; border: 1px solid rgba(11, 79, 138, .25); }
.bersama-kepala { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; }
.bersama-kepala::-webkit-details-marker { display: none; }
.bersama-ikon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--hijau-muda); color: var(--hijau); font-size: 22px; flex: none; }
.bersama-judul { display: grid; flex: 1; min-width: 0; } .bersama-judul small { color: var(--redup); font-size: 12px; }
.bersama-status { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; }
.bersama-status.beda { background: #fff7ed; color: #c2410c; } .bersama-status.selaras { background: #ecfdf5; color: #047857; }
.bersama-panah { color: var(--redup); transition: transform .2s ease; } .bersama[open] .bersama-panah { transform: rotate(180deg); }
.bersama[open] > .bersama-kepala { border-bottom: 1px solid var(--garis); }
.bersama-cek, .bersama-isi { padding: 12px 16px; }
.bersama-cek { background: #fffbeb; border-bottom: 1px solid var(--garis); }
.bersama-tabel td { padding: 6px 8px; font-size: 12.5px; }
.bersama-lama { color: #b91c1c; text-decoration: line-through; text-decoration-color: rgba(185, 28, 28, .4); }
.bersama-baru { color: #047857; font-weight: 600; }
.bersama-tim { margin: 8px 0 0; } .bersama-hari { margin-top: 10px; }
.bersama-isi textarea { width: 100%; padding: 9px 12px; border: 1px solid #cbd5e1; border-radius: 10px; font: inherit; font-size: 13.5px; line-height: 1.4; resize: none; background: #fff; color: var(--teks); }
.bersama-isi textarea:focus { outline: 3px solid rgba(11, 79, 138, .28); outline-offset: 1px; border-color: var(--hijau); }
.rs-paragraf { margin-top: 10px; }
/* Kelayakan: isian otomatis (dari hasil penilaian) */
.kl-otomatis { flex: 1 1 auto; display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; padding: 9px 12px; border: 1px dashed rgba(11, 79, 138, .35); border-radius: 10px; background: var(--hijau-muda); font-size: 13.5px; line-height: 1.45; min-height: 40px; }
.kl-otomatis-isi { font-weight: 600; color: var(--hijau-tua); }
.kl-otomatis-tanda { flex: none; font-size: 11px; font-weight: 700; color: var(--hijau); }
/* Laporan Audit: daftar auditor selebar formulir supaya nama tidak terpotong */
.nilai-isian > .lap-tim-blok { grid-column: 1 / -1; }
.lap-tim { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.lap-tim-item.lead .lap-tim-nama strong { white-space: normal; }
/* Daftar auditor Laporan: semua kartu dalam SATU baris (lebar sama); lencana Lead jadi pita di pojok kartu */
@media (min-width: 1100px) {
    .lap-tim { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
    .lap-tim-item { position: relative; padding: 8px 8px; gap: 8px; }
    .lap-tim-foto { width: 34px; height: 34px; }
    .lap-tim-nama strong { font-size: 12.5px; }
    .lap-tim-nama small { font-size: 10.5px; }
    .lap-tim-item.lead .lap-tim-nama strong { white-space: nowrap; }
    .lap-tim-item .lap-tim-peran { position: absolute; top: -8px; right: 6px; padding: 1px 7px; font-size: 10px; box-shadow: 0 2px 6px rgba(245, 158, 11, .35); }
}
@media (min-width: 1100px) {
    .lap-tim { padding-top: 9px; align-items: stretch; }
    .lap-tim-nama strong, .lap-tim-item.lead .lap-tim-nama strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
}
/* Judul daftar auditor: "Ganti manual" di samping "Tim Auditor <th>" */
.lap-tim-aksi { display: inline-flex; align-items: center; gap: 8px; }
.lap-tim-aksi button.lap-tim-tautan { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-size: 12.5px; }
.lap-tim-pemisah { color: #cbd5e1; }
.lap-tim-blok .lap-ganti > summary.hanya-pembaca { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.lap-tim-blok .lap-ganti { margin-top: 8px; }
/* Laporan Audit: Pendamping, Tempat & tanggal, KTT dalam satu baris */
.nilai-isian > .lap-baris3 { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 900px) { .nilai-isian > .lap-baris3 { grid-template-columns: 1fr; } }
/* Tombol Simpan/Buat sejajar di baris yang sama (kolom ke-4, rata bawah dgn kotak isian) */
.nilai-isian > .lap-baris3 { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; }
.lap-baris3-aksi { display: flex; gap: 8px; align-items: center; }
.lap-baris3-aksi .tombol { white-space: nowrap; min-height: 40px; }
@media (max-width: 900px) { .nilai-isian > .lap-baris3 { grid-template-columns: 1fr; } .lap-baris3-aksi { justify-content: flex-start; } }
.nilai-isian > .lap-baris3 > div > .label-kecil { display: block; margin: 0 0 4px; line-height: 1.3; }
.nilai-isian > .lap-baris3 .kl-cek-kotak, .lap-baris3-aksi .tombol { min-height: 43px; }
/* Kartu template Laporan: penanda otomatis disembunyikan di tautan kecil */
.lap-penanda { margin-top: 4px; }
.lap-penanda > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--hijau); }
.lap-penanda > summary::-webkit-details-marker { display: none; }
.lap-penanda[open] > summary { margin-bottom: 4px; }
.lap-penanda p { margin: 4px 0 0; }
.lap-penanda-daftar { display: flex; flex-wrap: wrap; gap: 4px; }
.lap-penanda-daftar code { font-size: 11px; background: var(--latar); border: 1px solid var(--garis); padding: 1px 6px; border-radius: 6px; }

/* Rencana Audit: editor Susunan Kegiatan (8 Nov 2026) */
.rc-jd-ket { margin: 0 0 10px; }
.rc-jd-daftar { display: grid; gap: 10px; margin-bottom: 10px; }
.rc-jd-hari { border: 1px solid var(--garis); border-radius: 12px; background: #fff; }
.rc-jd-ring { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-weight: 700; }
.rc-jd-ring::-webkit-details-marker { display: none; }
.rc-jd-ring::after { content: "\F282"; font-family: bootstrap-icons; margin-left: 4px; color: var(--redup); transition: transform .2s ease; }
.rc-jd-hari[open] > .rc-jd-ring { border-bottom: 1px solid var(--garis); background: #f8fafc; border-radius: 12px 12px 0 0; }
.rc-jd-hari[open] > .rc-jd-ring::after { transform: rotate(180deg); }
.rc-jd-hno { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--hijau); color: #fff; font-size: 12px; flex: none; }
.rc-jd-label { flex: 1; min-width: 0; }
.rc-jd-jml { font-size: 12px; font-weight: 600; color: var(--redup); }
.rc-jd-isi { padding: 12px; display: grid; gap: 8px; }
.rc-jd-atas { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rc-jd-atas .label-kecil { margin: 0 4px 0 0; }
.rc-jd-nama { flex: 1; min-width: 220px; font-weight: 700; }
.rc-jd-kepala, .rc-jd-keg { display: grid; grid-template-columns: 26px 158px minmax(0, 1.45fr) minmax(0, 1.35fr) minmax(170px, .8fr) auto; gap: 6px; align-items: start; }
.rc-jd-kepala { font-size: 11.5px; font-weight: 700; color: var(--redup); text-transform: uppercase; letter-spacing: .03em; padding: 0 0 2px; }
.rc-jd-kegiatan { display: grid; gap: 6px; }
.rc-jd-keg { padding: 6px; border: 1px solid var(--garis); border-radius: 10px; background: #fcfdfd; }
.rc-jd-keg:hover { border-color: #b9d4ef; }
.rc-jd-kno { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-top: 6px; border-radius: 50%; background: var(--hijau-muda); color: var(--hijau-tua); font-size: 11.5px; font-weight: 800; }
.rc-jd-keg > input, .rc-jd-keg > textarea, .rc-jd-ww > input, .rc-jd-ww > textarea, .rc-jd-audw > textarea, .rc-jd-audw > select { width: 100%; min-height: 36px; padding: 7px 9px; border: 1px solid #cbd5e1; border-radius: 8px; font: inherit; font-size: 13px; resize: vertical; overflow: hidden; }
.rc-jd-waktu { font-weight: 700; }
.rc-jd-judul { font-weight: 700; }
.rc-jd-audw { display: grid; gap: 4px; }
.rc-jd-pilih { min-height: 30px !important; padding: 4px 8px !important; font-size: 12px !important; color: var(--hijau-tua); }
.rc-jd-aksi { display: flex; gap: 4px; padding-top: 2px; }
.rc-jd-aksi .tombol.kecil, .rc-jd-atas .tombol.kecil { padding: 6px 8px; }
.rc-jd-bawah { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 900px) {
    .rc-jd-kepala { display: none; }
    .rc-jd-keg { grid-template-columns: 26px 1fr auto; }
    .rc-jd-keg > .rc-jd-waktu-w { grid-column: 2; } .rc-jd-keg > .rc-jd-aksi { grid-column: 3; grid-row: 1; }
    .rc-jd-keg > .rc-jd-judul-w, .rc-jd-keg > .rc-jd-rinci, .rc-jd-keg > .rc-jd-audw { grid-column: 2 / -1; }
}

/* Rencana: tanggal pelaksanaan dari kalender */
.rc-tgl-wadah { grid-column: span 1; min-width: 0; }
.rc-tgl { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.rc-tgl label { display: grid; gap: 3px; flex: 1; min-width: 140px; margin: 0; font-size: 11.5px; font-weight: 700; color: var(--redup); }
.rc-tgl input[type="date"] { width: 100%; height: 40px; padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 10px; font: inherit; font-size: 14px; color: var(--teks, #0f172a); }
.rc-tgl > i { padding-bottom: 11px; color: var(--redup); }
.rc-tgl-teks { display: block; margin-top: 6px; }
.rc-jd-nama[readonly] { background: #eef4fb; color: var(--hijau-tua); cursor: default; }

/* Kalender rentang tunggal (Tanggal Pelaksanaan) */
.rc-rentang { position: relative; margin-top: 4px; }
.rc-rentang-tombol { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; font: inherit; font-size: 14px; text-align: left; cursor: pointer; color: var(--teks, #0f172a); }
.rc-rentang-tombol:hover { border-color: var(--hijau); }
.rc-rentang-tombol[aria-expanded="true"] { border-color: var(--hijau); box-shadow: 0 0 0 3px rgba(43, 127, 208, .15); }
.rc-rentang-tombol > .bi-calendar-range { color: var(--hijau); font-size: 18px; }
.rc-rentang-tombol b { font-weight: 700; }
.rc-rentang-tombol span { font-size: 12.5px; }
.rc-rentang-panah { margin-left: auto; color: var(--redup); }
.rc-kal { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(640px, calc(100vw - 32px)); padding: 12px; background: #fff; border: 1px solid var(--garis); border-radius: 14px; box-shadow: 0 20px 50px rgba(15, 23, 42, .18); animation: rcKalMasuk .16s ease-out both; }
@keyframes rcKalMasuk { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.rc-kal-kepala { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rc-kal-info { flex: 1; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--hijau-tua); }
.rc-kal-nav { width: 34px; height: 34px; border: 1px solid var(--garis); border-radius: 9px; background: #fff; cursor: pointer; display: grid; place-items: center; }
.rc-kal-nav:hover { background: var(--hijau-muda); }
.rc-kal-bulan-wadah { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.rc-kal-judul { text-align: center; font-weight: 800; font-size: 14px; margin-bottom: 6px; }
.rc-kal-grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; }
.rc-kal-hr { text-align: center; font-size: 11px; font-weight: 700; color: var(--redup); padding: 4px 0; }
.rc-kal-hari { height: 36px; border: 0; background: none; font: inherit; font-size: 13.5px; cursor: pointer; border-radius: 9px; color: #0f172a; position: relative; }
.rc-kal-hari:hover { background: var(--hijau-muda); }
.rc-kal-hari.libur { color: #dc2626; }
.rc-kal-hari.kini { box-shadow: inset 0 0 0 1px var(--hijau); }
.rc-kal-hari.antara { background: #dbe8f7; border-radius: 0; color: var(--hijau-tua); }
.rc-kal-hari.awal, .rc-kal-hari.akhir { background: var(--hijau); color: #fff; font-weight: 800; }
.rc-kal-hari.awal { border-radius: 9px 0 0 9px; } .rc-kal-hari.akhir { border-radius: 0 9px 9px 0; } .rc-kal-hari.awal.akhir { border-radius: 9px; }
.rc-kal-hari.akhir.pratinjau, .rc-kal-grid .rc-kal-hari.antara.pratinjau { opacity: .75; }
.rc-kal-kaki { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--garis); }
.rc-kal-sela { flex: 1; }
@media (max-width: 640px) { .rc-kal-bulan-wadah { grid-template-columns: 1fr; } .rc-kal-bulan + .rc-kal-bulan { display: none; } }
.kl-bagian.rc-kal-buka { overflow: visible; }
.rc-kal { width: min(660px, calc(100vw - 24px)); }
.rc-kal.kanan { left: auto; right: 0; }
.rc-kal-bulan-wadah { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rc-kal-bulan { min-width: 0; }
.rc-kal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.rc-kal-hari { min-width: 0; padding: 0; }
@media (max-width: 640px) { .rc-kal-bulan-wadah { grid-template-columns: 1fr; } }
/* Rincian jadwal = checklist */
.rc-jd-rinci .kl-cek-kotak { min-height: 36px; font-size: 13px; }
.rc-jd-rinci .kl-cek-panel { min-width: 420px; }
@media (max-width: 900px) { .rc-jd-rinci .kl-cek-panel { min-width: 0; } }
/* Auditor jadwal = checklist; panel rata kanan (kolom paling kanan) */
.rc-jd-aud-cek .kl-cek-kotak { min-height: 36px; font-size: 13px; }
.rc-jd-aud-cek .kl-cek-panel { left: auto; right: 0; min-width: 320px; }
/* Isian otomatis dari Data Bersama */
.rc-otomatis { background: #eef4fb !important; color: var(--hijau-tua); cursor: default; }
.rc-oto-tanda { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--hijau-muda); color: var(--hijau-tua); font-size: 10.5px; font-weight: 700; text-transform: none; letter-spacing: 0; }
.rc-oto-ubah { margin-top: 4px; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--hijau-tua); cursor: pointer; }
.rc-oto-ubah:hover { text-decoration: underline; }

/* Jadwal: pemilih jam & saran judul (popup di bawah isian) */
.rc-jd-ww { position: relative; min-width: 0; }
.rc-jd-ww > input, .rc-jd-ww > textarea { padding-right: 32px !important; }
.rc-pop-picu { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border: 0; border-radius: 7px; background: none; color: var(--redup); cursor: pointer; display: grid; place-items: center; }
.rc-pop-picu:hover, .rc-pop-buka .rc-pop-picu { background: var(--hijau-muda); color: var(--hijau-tua); }
.rc-pop { position: absolute; z-index: 35; top: calc(100% + 4px); left: 0; background: #fff; border: 1px solid rgba(11, 79, 138, .3); border-radius: 12px; box-shadow: 0 14px 34px rgba(15, 23, 42, .16); padding: 8px; animation: rcKalMasuk .14s ease-out both; }
.rc-pop.kanan { left: auto; right: 0; }
.rc-pop-info { font-size: 11.5px; font-weight: 700; color: var(--hijau-tua); padding: 2px 4px 6px; }
.rc-pop-jam { width: 250px; }
.rc-pop-jam-badan { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rc-pop-kol > b { display: block; font-size: 11px; color: var(--redup); text-transform: uppercase; letter-spacing: .04em; padding: 0 4px 4px; }
.rc-pop-daftar { max-height: 230px; overflow-y: auto; display: grid; gap: 2px; padding-right: 2px; }
.rc-pop-jam-item, .rc-pop-saran-item { border: 0; background: none; font: inherit; text-align: left; cursor: pointer; border-radius: 8px; }
.rc-pop-jam-item { padding: 6px 8px; font-size: 13px; font-variant-numeric: tabular-nums; }
.rc-pop-jam-item:hover:not([disabled]), .rc-pop-saran-item:hover { background: var(--hijau-muda); }
.rc-pop-jam-item.dipilih { background: var(--hijau); color: #fff; font-weight: 800; }
.rc-pop-jam-item[disabled] { color: #cbd5e1; cursor: default; }
.rc-pop-kaki { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--garis); }
.rc-pop-saran { width: min(460px, calc(100vw - 24px)); }
.rc-pop-saran .rc-pop-daftar { max-height: 260px; }
.rc-pop-saran-item { padding: 7px 10px; font-size: 13px; line-height: 1.35; }
.rc-jd-waktu-w > input { padding-left: 8px !important; font-variant-numeric: tabular-nums; }
/* Judul kegiatan jadwal = checklist */
.rc-jd-judul-w { min-width: 0; }
.rc-jd-judul-cek .kl-cek-kotak { min-height: 36px; font-size: 13px; font-weight: 700; }
.rc-jd-judul-cek .kl-cek-panel { min-width: 420px; }
@media (max-width: 900px) { .rc-jd-judul-cek .kl-cek-panel { min-width: 0; } }
/* Hari jadwal otomatis dari Tanggal Pelaksanaan */
.rc-jd-hapus-hari, .rc-jd-lebih-ket { display: none !important; }
.rc-jd-lebih { border-color: #fecaca; background: #fff7f7; }
.rc-jd-lebih .rc-jd-hapus-hari { display: inline-flex !important; }
.rc-jd-lebih .rc-jd-lebih-ket { display: block !important; flex-basis: 100%; font-size: 12px; font-weight: 600; color: #b91c1c; }
.rc-jd-lebih .rc-jd-hno { background: #dc2626; }
/* Rencana bagian 1: 2 baris -- baris 1 = Jenis, Kriteria, Periode, Tanggal (4 kolom); baris 2 = Perusahaan, Alamat HO, Site (3 kolom) */
.kl-grid.rc-info-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.rc-info-grid > div { grid-column: span 3; }
.rc-info-grid > div:nth-child(n + 5) { grid-column: span 4; }
@media (max-width: 1100px) { .rc-info-grid > div, .rc-info-grid > div:nth-child(n + 5) { grid-column: span 6; } }
@media (max-width: 640px) { .rc-info-grid > div, .rc-info-grid > div:nth-child(n + 5) { grid-column: 1 / -1; } }

/* Font seragam Plus Jakarta Sans di semua elemen (termasuk kontrol formulir & kode) -- 8 Nov 2026 */
input, textarea, select, button, optgroup, option, code, kbd, pre, samp, small, table, th, td, ol, ul, dialog { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
/* Kelayakan: Data Audit Internal tahun sebelumnya = 2 baris x 3 kolom */
.kl-grid.kl-dua-baris { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.kl-dua-baris .kl-otomatis, .kl-dua-baris textarea { min-height: 84px; }
@media (max-width: 1000px) { .kl-grid.kl-dua-baris { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .kl-grid.kl-dua-baris { grid-template-columns: 1fr; } }
.kl-grid.kl-dua-kolom { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 760px) { .kl-grid.kl-dua-kolom { grid-template-columns: 1fr; } }

/* 2FA opsional (11 Nov 2026): langkah kode di login + kartu Verifikasi 2 Langkah di halaman Akun. */
.ingat-perangkat { display: flex; align-items: center; gap: .5rem; margin: .4rem 0 .9rem; font-weight: 500; cursor: pointer; }
.ingat-perangkat input[type=checkbox] { width: 1.05rem; height: 1.05rem; margin: 0; flex: none; accent-color: var(--hijau); }
.hal-masuk .kartu-masuk .masuk-catatan a { color: inherit; text-decoration: underline; }
.akun-tata:has(.akun-2fa) { grid-template-columns: 300px minmax(0, 1fr) minmax(0, 1fr); }
.akun-2fa { container-type: inline-size; }
@media (max-width: 1280px) { .akun-tata:has(.akun-2fa) { grid-template-columns: 300px minmax(0, 1fr); } .akun-tata .akun-2fa { grid-column: 1 / -1; } }
@media (max-width: 900px) { .akun-tata:has(.akun-2fa) { grid-template-columns: minmax(0, 1fr); } }
.akun-2fa .fa-kepala { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--garis); }
.akun-2fa .fa-kepala h2 { margin: 0; font-size: 1.05rem; }
.akun-2fa .fa-kepala p { margin: 2px 0 0; color: var(--redup); font-size: .85rem; }
.akun-2fa .fa-ikon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--hijau-muda); color: var(--hijau); font-size: 1.3rem; }
.akun-2fa .fa-status { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.akun-2fa .fa-status.hidup { background: #ecfdf5; color: #047857; }
.akun-2fa .fa-status.mati { background: #f1f5f9; color: #475569; }
.akun-2fa .fa-setup { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.akun-2fa .fa-qr { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; border: 1px solid var(--garis); border-radius: 16px; background: #f8fafc; text-align: center; }
.akun-2fa .qr-2fa { display: block; width: 180px; height: 180px; padding: 8px; background: #fff; border-radius: 12px; box-shadow: 0 4px 14px rgba(15, 23, 42, .08); }
.akun-2fa .fa-qr-label { color: var(--redup); font-size: .75rem; }
.akun-2fa .kunci-2fa { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; letter-spacing: .03em; word-break: break-word; user-select: all; color: var(--teks); }
.akun-2fa .fa-langkah { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.akun-2fa .fa-langkah li { display: flex; gap: 12px; }
.akun-2fa .fa-langkah li > div { flex: 1 1 auto; min-width: 0; }
.akun-2fa .fa-langkah b { display: block; }
.akun-2fa .fa-langkah small, .akun-2fa .fa-chip small { display: block; color: var(--redup); font-size: .82rem; margin-top: 2px; }
.akun-2fa .fa-no { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--hijau); color: #fff; font-size: .8rem; font-weight: 800; }
.akun-2fa .fa-form { margin-top: 10px; display: flex; align-items: stretch; gap: 8px; }
.akun-2fa .fa-form input.kode-2fa { flex: 1 1 auto; min-width: 0; max-width: none; }
.akun-2fa .fa-form .baris-tombol { margin-top: 0; flex: none; flex-wrap: nowrap; }
.akun-2fa input.kode-2fa { width: 100%; max-width: 230px; padding: 10px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.35rem; font-weight: 700; letter-spacing: .35em; text-align: center; }
.akun-2fa .baris-tombol { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.akun-2fa .fa-ajak { display: grid; gap: 14px; justify-items: start; }
.akun-2fa .fa-manfaat { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.akun-2fa .fa-manfaat li { display: flex; gap: 10px; align-items: flex-start; }
.akun-2fa .fa-manfaat i { color: var(--hijau); margin-top: 2px; }
.akun-2fa .fa-info { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 18px; }
.akun-2fa .fa-chip { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--garis); border-radius: 14px; background: #f8fafc; }
.akun-2fa .fa-chip > i { color: var(--redup); font-size: 1.15rem; }
.akun-2fa .fa-chip.hidup { background: #ecfdf5; border-color: #a7f3d0; }
.akun-2fa .fa-chip.hidup > i { color: #047857; }
.akun-2fa .fa-atur label { display: block; font-weight: 700; }
.akun-2fa .fa-atur label small { display: block; margin-top: 2px; font-weight: 400; color: var(--redup); }
.akun-2fa .fa-atur input.kode-2fa { display: block; width: 100%; max-width: none; margin-top: 8px; letter-spacing: .3em; font-size: 1.15rem; }
.akun-2fa .fa-atur .baris-tombol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.akun-2fa .fa-atur .baris-tombol .tombol, .akun-2fa .fa-lupakan .tombol { width: 100%; justify-content: center; text-align: center; }
.akun-2fa .fa-lupakan { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--garis); }
@container (max-width: 340px) { .akun-2fa .fa-atur .baris-tombol { grid-template-columns: minmax(0, 1fr); } }
.akun-2fa .fa-cadangan { display: grid; gap: 12px; justify-items: start; }
.akun-2fa .daftar-cadangan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 640px; padding: 14px; border: 1px dashed var(--hijau); border-radius: 14px; background: var(--hijau-muda); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; text-align: center; user-select: all; }
@container (min-width: 620px) {
    .akun-2fa .fa-setup { grid-template-columns: 230px minmax(0, 1fr); gap: 28px; }
    .akun-2fa .fa-info { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .akun-2fa .daftar-cadangan { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container (max-width: 380px) { .akun-2fa .fa-status { display: none; } }