@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

* { box-sizing: border-box; }
:root {
  --latar:#121419; --panel:#1b1e24; --panel-2:#101216; --garis:#2a2e37; --garis-2:#343945;
  --teks:#e4e4e7; --redup:#9ca3af; --emas:#c9a227; --emas-terang:#e6c96a;
  --teal:#0b4356; --teal-2:#12586e; --radius:12px;
  --bayang:0 8px 24px rgba(0,0,0,.28);
}
body { font-family:'Inter',sans-serif; margin:0; color:var(--teks);
  background:radial-gradient(1100px 480px at 85% -120px, rgba(18,88,110,.20), transparent 60%),
             radial-gradient(900px 420px at -10% -80px, rgba(201,162,39,.07), transparent 55%),
             var(--latar); }
.hidden { display:none !important; }

/* ---------- Bilah aplikasi ---------- */
.appbar { display:flex; justify-content:space-between; align-items:center; padding:12px 18px; background:rgba(27,30,36,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--garis); box-shadow:0 4px 18px rgba(0,0,0,.25); position:sticky; top:0; z-index:20; }
.ver-chip { font-size:11px; font-weight:700; letter-spacing:.4px; color:var(--emas-terang); border:1px solid rgba(201,162,39,.55); border-radius:999px; padding:2px 9px; margin-right:10px; vertical-align:1px; }
.brand { display:flex; gap:12px; align-items:center; }
.brand-mark-img { width:38px; height:38px; border-radius:10px; object-fit:contain; background:#fdfbf7; border:1.5px solid #c9a227; padding:2px; }
.dlg-latar { position:fixed; inset:0; background:rgba(4,20,28,.62); display:flex; align-items:center; justify-content:center; z-index:200; padding:16px; }
.dlg-latar.hidden { display:none; }
.dlg-kotak { background:#10222c; color:#e8eef2; border:1px solid rgba(201,162,39,.5); border-radius:12px; max-width:420px; width:100%; padding:18px; box-shadow:0 18px 50px rgba(0,0,0,.5); }
.dlg-kotak p { margin:0 0 14px; font-size:14px; line-height:1.55; white-space:pre-line; }
.dlg-tombol { display:flex; justify-content:flex-end; gap:8px; }
@media print { .dlg-latar { display:none !important; } }
.brand-name { font-weight:800; font-size:17px; }
.brand-sub { font-size:12px; color:#9ca3af; }
.save-state { font-size:12px; color:#6b7280; margin-right:10px; }

/* ---------- Tata letak ---------- */
.layout { display:grid; grid-template-columns:400px 1fr; gap:16px; padding:16px; align-items:start; max-width:1720px; margin:0 auto; }
@media (max-width: 980px) { .layout { grid-template-columns:1fr; } .panel { position:static; max-height:none; overflow:visible; padding-right:0; } }
.panel { display:flex; flex-direction:column; gap:14px; position:sticky; top:76px; max-height:calc(100vh - 92px); overflow-y:auto; padding-right:4px; scrollbar-width:thin; scrollbar-color:#3a4152 transparent; }
.panel::-webkit-scrollbar { width:8px; }
.panel::-webkit-scrollbar-thumb { background:#3a4152; border-radius:8px; }
.card { background:var(--panel); border:1px solid var(--garis); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--bayang); }
.card h3 { margin:0 0 10px; font-size:13px; font-weight:700; text-transform:uppercase; color:var(--emas-terang); letter-spacing:.8px; border-left:3px solid var(--emas); padding-left:8px; }
.card label { display:block; font-size:12px; color:#9ca3af; margin:8px 0; }
.card input[type=text], .card input[type=email], .card input[type=password], .card select, .card textarea { width:100%; margin-top:4px; padding:8px 10px; border-radius:8px; border:1px solid var(--garis-2); background:var(--panel-2); color:#f4f4f5; font:inherit; font-size:13px; transition:border-color .15s, box-shadow .15s; }
.card textarea { resize:vertical; line-height:1.5; }
.card input:focus, .card select:focus, .card textarea:focus, .preview-bar select:focus { outline:none; border-color:var(--emas); box-shadow:0 0 0 3px rgba(201,162,39,.18); }
#tabel-petugas .sel-kelompok { padding:3px 5px; border-radius:6px; border:1px solid var(--garis-2); background:var(--panel-2); color:#f4f4f5; font:inherit; font-size:12px; width:100%; }
.card input[type=file] { margin-top:4px; font-size:12px; color:#9ca3af; }
.grid2 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.tambah-manual { border:1px dashed rgba(201,162,39,.45); border-radius:8px; padding:10px; margin:10px 0; }
.tm-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.baris-ruang { display:grid; grid-template-columns:1fr 1fr auto; gap:6px; align-items:center; margin:5px 0; }
.baris-induk { display:grid; grid-template-columns:1fr auto auto; gap:6px; align-items:center; margin:5px 0; }
.baris-peta { display:grid; grid-template-columns:1fr 1fr; gap:6px; align-items:center; margin:5px 0; }
.baris-peta select { padding:5px 7px; border-radius:7px; border:1px solid var(--garis-2); background:var(--panel-2); color:#f4f4f5; font:inherit; font-size:12.5px; width:100%; }
#info-target-jadwal { color:var(--emas-terang); margin:2px 0 8px; }
.baris-ruang .rn-asli { font-size:12.5px; }
.baris-ruang input { margin:0; }
.btn { padding:8px 12px; border-radius:8px; border:1px solid var(--garis-2); background:#23262e; color:var(--teks); font:inherit; font-size:13px; cursor:pointer; transition:background .15s, border-color .15s, transform .05s; }
.btn:hover { background:#2b2f38; border-color:#454c5c; }
.btn:active { transform:translateY(1px); }
.btn.primary { background:linear-gradient(180deg, var(--teal-2), var(--teal)); border-color:#1b6a86; color:#fff; font-weight:600; }
.btn.primary:hover { background:linear-gradient(180deg, #176a88, #0d4c63); }
.btn.ghost { background:transparent; }
.btn.wide { width:100%; margin-top:6px; }
.row-btns { display:flex; gap:8px; flex-wrap:wrap; margin:6px 0; }
.hint { font-size:12px; color:#8b919c; line-height:1.5; }
.check { display:flex !important; gap:8px; align-items:flex-start; font-size:12.5px !important; color:#c9ccd4 !important; }
.check input { margin-top:2px; }
.table-wrap { overflow:auto; max-height:300px; border:1px solid #2a2e37; border-radius:8px; }
table { border-collapse:collapse; width:100%; font-size:12px; }
th { text-align:left; padding:6px 8px; background:#101216; color:#9ca3af; position:sticky; top:0; }
td { padding:4px 6px; border-top:1px solid #23262e; }
td[contenteditable] { outline:none; min-width:52px; }
td[contenteditable]:focus { background:#262a33; }
tr.sel td { background:rgba(11,67,86,.35); }
td .del { color:#f87171; cursor:pointer; font-weight:700; background:none; border:none; font-size:14px; }
td .dup { color:#7dd3fc; cursor:pointer; background:none; border:none; font-size:13px; margin-right:2px; }
.berkas { margin-top:10px; display:flex; flex-direction:column; gap:12px; border-top:1px dashed #343945; padding-top:10px; }
.berkas-label { font-size:12px; font-weight:600; display:block; margin-bottom:4px; }
.berkas-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.berkas-prev { width:34px; height:34px; object-fit:contain; background:#fff; border:1px solid #343945; border-radius:6px; flex:none; }
.berkas-row input[type="file"] { font-size:12px; max-width:180px; }

/* ---------- Pratinjau ---------- */
.preview { background:var(--panel); border:1px solid var(--garis); border-radius:var(--radius); padding:14px 16px; position:sticky; top:76px; box-shadow:var(--bayang); }
.preview-bar { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:8px; }
.preview-bar label { font-size:12px; color:#9ca3af; }
.preview-bar select { margin-left:6px; padding:6px 8px; border-radius:8px; border:1px solid #343945; background:#101216; color:#f4f4f5; font:inherit; font-size:13px; }
.preview-scroll { overflow:auto; max-height:calc(100vh - 190px); padding:8px 4px; }
.pv-label { color:#8b919c; font-size:11.5px; font-weight:700; letter-spacing:2.2px; text-transform:uppercase; text-align:center; margin:16px 0 8px; }
.pv-tabs { display:flex; gap:6px; align-items:center; }
.pv-tab { padding:6px 14px; border-radius:999px; border:1px solid var(--garis-2); background:transparent; color:var(--redup); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; }
.pv-tab:hover { color:var(--teks); }
.pv-tab.aktif { color:var(--emas-terang); border-color:rgba(201,162,39,.6); background:rgba(201,162,39,.08); }

/* ---------- Dokumen SK (surat A4) — dipakai pratinjau & cetak ---------- */
.sk-pv { width:190mm; margin:6px auto 14px; box-shadow:0 14px 34px rgba(0,0,0,.5); }
.sk-doc { background:#fff; color:#191919; font-family:'Times New Roman', Times, serif; font-size:12pt; line-height:1.5; padding:14mm 13mm; }
.sk-kop { display:flex; align-items:center; gap:5mm; border-bottom:3.5px double #111; padding-bottom:3mm; margin-bottom:5mm; }
.sk-kop .logo-img { width:17mm; height:17mm; object-fit:contain; flex:none; }
.sk-kop-teks { flex:1; text-align:center; }
.sk-kop-sp { visibility:hidden; flex:none; }
.sk-nm { font-size:15pt; font-weight:700; letter-spacing:.6px; }
.sk-al { font-size:10.5pt; letter-spacing:1.6px; margin-top:.6mm; }
.sk-judul { text-align:center; font-weight:700; font-size:12.5pt; line-height:1.45; }
.sk-judul .sk-nomor { font-weight:400; }
.sk-tentang { text-align:center; font-weight:700; margin:4mm 0 5mm; line-height:1.45; }
.sk-row { display:grid; grid-template-columns:27mm 4mm 1fr; margin-bottom:2.2mm; text-align:justify; }
.sk-row .sk-row { grid-template-columns:24mm 4mm 1fr; margin-bottom:1.6mm; }
.sk-lb { font-weight:400; }
.sk-isi p { margin:0 0 1.6mm; }
.sk-ol { margin:0; padding-left:6.5mm; }
.sk-ol li { margin-bottom:.8mm; }
.sk-memutuskan { text-align:center; font-weight:700; margin:3mm 0; }
.sk-tab { width:100%; border-collapse:collapse; margin:1.5mm 0 3mm; font-size:11.5pt; }
.sk-tab th, .sk-tab td { border:.5pt solid #333; padding:1.1mm 2.2mm; text-align:left; }
.sk-tab td.c { text-align:center; }
.sk-ttd-blok { width:72mm; margin-left:auto; margin-top:7mm; }
.sk-ttd-blok p { margin:0 0 1.2mm; }
.sk-ttd-ruang { position:relative; height:20mm; }
.sk-ttd-img { position:absolute; left:2mm; bottom:0; height:15mm; max-width:52mm; object-fit:contain; }
.sk-stempel-img { position:absolute; left:16mm; bottom:-1mm; width:25mm; height:25mm; object-fit:contain; opacity:.92; transform:rotate(-10deg); }
.sk-nama { font-weight:700; text-decoration:underline; }
/* ---------- Kartu petugas (Fase 3) ---------- */
.krt.kp .data .row { height:5.6mm; }
.kp-ket { font-size:7.6pt; line-height:1.55; padding-left:4.5mm; margin:1mm 0; color:#26333b; }
.sheet.sheet-p { grid-template-columns:repeat(3, 54mm); grid-auto-rows:85.6mm; }
.krt.kp-p { width:54mm; height:85.6mm; padding:3mm 3.4mm; display:flex; flex-direction:column; align-items:center; }
.krt.kp-pb { width:54mm; height:85.6mm; }
.krt.kp-pb .kp-ket { font-size:8pt; }
.kp-p-head { text-align:center; }
.kp-p-head .logo-img { width:11mm; height:11mm; object-fit:contain; }
.kp-p-nm { font-size:8.6pt; font-weight:800; color:#0b4356; letter-spacing:.5px; margin-top:1mm; line-height:1.2; }
.kp-p-al { font-size:5.4pt; font-weight:600; letter-spacing:1.3px; color:#5f6f78; margin-top:.4mm; }
.kp-p-judul { margin-top:2.4mm; width:100%; background:linear-gradient(100deg,#0a3d50,#12586e); color:#fff; text-align:center; font-weight:800; font-size:10pt; letter-spacing:.6px; padding:1.7mm 1mm; border-radius:1.2mm; line-height:1.25; }
.kp-p-judul span { display:block; font-size:6.4pt; color:#e6c96a; font-weight:700; margin-top:.5mm; }
.kp-p-foto { margin-top:3mm; width:22mm; height:29.3mm; border:.45mm solid #c9a227; border-radius:1.6mm; overflow:hidden; background:#e8edef; flex:none; }
.kp-p-foto img, .kp-p-foto svg { width:100%; height:100%; object-fit:cover; display:block; }
.kp-p-data { width:100%; margin-top:3.2mm; }
.kp-p-data .lb { width:15mm; }
.kp-p-data .row { height:5.2mm; }
.kp-p-note { margin-top:auto; font-size:5.3pt; color:#8b96a0; text-align:center; line-height:1.45; }
/* ---------- Dokumen ruang (Fase 4): daftar hadir & nomor meja ---------- */
.dok-doc { background:#fff; color:#191919; font-family:'Inter',sans-serif; font-size:10.5pt; line-height:1.45; padding:12mm 11mm; page-break-after:always; }
.dok-kop { display:flex; align-items:center; gap:4mm; border-bottom:2.6px double #111; padding-bottom:2.4mm; margin-bottom:3.5mm; }
.dok-kop .logo-img { width:13mm; height:13mm; object-fit:contain; }
.dok-nm { font-size:13.5pt; font-weight:800; letter-spacing:.5px; color:#0b4356; }
.dok-al { font-size:8.5pt; letter-spacing:1.6px; color:#5f6f78; font-weight:600; }
.dok-judul { text-align:center; font-weight:800; font-size:13pt; letter-spacing:.6px; }
.dok-sub { text-align:center; font-weight:600; font-size:10.5pt; margin-bottom:3.5mm; }
.dok-info { display:flex; gap:6mm; flex-wrap:wrap; margin-bottom:1.6mm; font-size:10.5pt; }
.dok-tab { width:100%; border-collapse:collapse; margin-top:2mm; }
.dok-tab th, .dok-tab td { border:.5pt solid #444; padding:1.5mm 2mm; text-align:left; font-size:10.5pt; }
.dok-tab th { background:#eef3f5; }
.dok-tab td.c { text-align:center; }
.dok-tab th.sempit { width:11mm; font-size:8.5pt; text-align:center; }
.dok-tab .ttd-sel { position:relative; height:8.5mm; }
.dok-tab .ttd-sel span { position:absolute; top:.6mm; font-size:8pt; color:#666; }
.dok-tab .ttd-sel span.kiri { left:1.5mm; }
.dok-tab .ttd-sel span.kanan { right:1.5mm; }
.dok-kaki { display:flex; justify-content:space-between; align-items:flex-start; margin-top:4mm; gap:8mm; }
.dok-ket { font-size:9.5pt; color:#333; max-width:105mm; }
.dok-ttd { width:62mm; text-align:left; }
.dok-ttd p { margin:0 0 1mm; }
.dok-ttd-ruang { height:16mm; }
.dok-nama { font-weight:700; text-decoration:underline; }
.meja-lembar { background:#fff; padding:6mm; page-break-after:always; }
.meja-judul { font-family:'Inter',sans-serif; font-weight:800; font-size:12pt; color:#0b4356; margin-bottom:4mm; }
.meja-grid { display:grid; grid-template-columns:repeat(2, 88mm); gap:4mm; }
.meja-pv { padding:6mm; }
.meja-pv .meja-grid { grid-template-columns:repeat(2, 82mm); justify-content:center; }
.meja { border:.35mm dashed #9aa3ab; border-radius:2mm; padding:3mm 4mm; text-align:center; color:#191919; background:#fff; }
.meja-jenis { font-size:7.5pt; font-weight:700; letter-spacing:1.2px; color:#5f6f78; text-transform:uppercase; }
.meja-no { font-size:34pt; font-weight:800; color:#0b4356; line-height:1.1; }
.meja-nama { font-size:11pt; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.meja-sub { font-size:8.5pt; color:#5f6f78; }
.dok-tab td.kode-sel { font-weight:800; font-size:12pt; color:#0b4356; }
/* ---------- Sisa pelengkap: sampul, amplop, tata tertib, arsip, A6 ---------- */
.sheet.sheet-a6 { grid-template-columns:repeat(2, 105mm); grid-auto-rows:148mm; padding:0; gap:0; }
.sampul-doc { text-align:center; padding-top:26mm; }
.sampul-doc .logo-img { width:30mm; height:30mm; object-fit:contain; }
.sampul-jenis { font-size:23pt; font-weight:800; color:#0b4356; letter-spacing:.5px; margin-top:9mm; line-height:1.25; text-transform:uppercase; }
.sampul-tp { font-size:13pt; font-weight:700; letter-spacing:1.6px; margin-top:3mm; }
.sampul-mad { font-size:15pt; font-weight:800; margin-top:14mm; text-transform:uppercase; }
.sampul-al { font-size:10.5pt; color:#44525b; margin-top:1.5mm; letter-spacing:1.2px; }
.sampul-oleh { margin-top:20mm; font-size:11pt; line-height:1.7; }
.isi-list { font-size:11.5pt; line-height:1.5; margin-top:4mm; }
.isi-list li { margin-bottom:2.2mm; }
.amplop-lembar { background:#fff; page-break-after:always; }
.amplop-grid { display:grid; grid-template-columns:repeat(2, 93mm); gap:5mm; }
.amplop { border:.45mm solid #0b4356; border-radius:2mm; padding:4mm 5mm; text-align:center; color:#191919; page-break-inside:avoid; }
.amp-judul { font-size:8pt; font-weight:700; letter-spacing:1.4px; color:#5f6f78; }
.amp-mapel { font-size:16pt; font-weight:800; color:#0b4356; margin:1.5mm 0; }
.amp-info { font-size:9.5pt; margin-top:.8mm; }
.amp-segel { margin-top:2.6mm; font-size:7.5pt; font-weight:800; letter-spacing:1px; color:#8c2438; border-top:.3mm dashed #b9c2c8; padding-top:1.8mm; }
.tt-list { font-size:12.5pt; line-height:1.55; margin-top:4mm; }
.tt-list li { margin-bottom:3mm; }
.arsip-item { display:flex; justify-content:space-between; align-items:center; gap:8px; border:1px solid var(--garis); border-radius:8px; padding:7px 9px; margin-top:6px; background:#fff; }
.arsip-info { font-size:12.5px; line-height:1.4; }
.arsip-info span { color:#68707c; font-size:11.5px; }
.arsip-aksi { display:flex; gap:6px; flex:none; }
.krt.a6p { width:105mm; height:148mm; border-radius:3mm; display:flex; flex-direction:column; align-items:center; padding:7mm 8mm; background:#fdfbf7; color:#22303a; font-family:'Inter',sans-serif; }
.a6-head { text-align:center; }
.a6-head .logo-img { width:15mm; height:15mm; object-fit:contain; }
.a6-nm { font-size:14pt; font-weight:800; color:#0b4356; letter-spacing:.4px; margin-top:1.5mm; }
.a6-al { font-size:7.5pt; letter-spacing:1.8px; color:#5f6f78; font-weight:600; }
.a6-banner { margin-top:4mm; width:100%; text-align:center; background:linear-gradient(100deg,#0a3d50,#12586e); color:#fdfbf7; font-weight:800; font-size:13pt; letter-spacing:1.4px; padding:2.6mm; border-radius:1.6mm; }
.a6-banner span { display:block; font-size:8.5pt; font-weight:600; letter-spacing:.8px; color:#e6c96a; margin-top:.8mm; }
.a6-foto { margin-top:5mm; width:30mm; height:40mm; border:1mm solid #c9a227; border-radius:1.5mm; overflow:hidden; background:#e8edf0; }
.a6-foto img, .a6-foto svg { width:100%; height:100%; object-fit:cover; display:block; }
.a6-data { margin-top:5mm; width:100%; }
.a6-data .row { display:flex; align-items:baseline; margin-bottom:2.1mm; font-size:10.5pt; }
.a6-data .lb { width:30mm; flex:none; color:#5f6f78; font-weight:600; }
.a6-data .cl { width:3mm; flex:none; }
.a6-data .vl { font-weight:700; white-space:nowrap; }
.a6-bc { margin-top:auto; text-align:center; }
.a6-bc svg { width:38mm; height:11mm; }
.a6-bc .bc-num { font-size:9pt; letter-spacing:1.5px; margin-top:.6mm; }
.a6-note { margin-top:2.5mm; font-size:7.5pt; color:#5f6f78; text-align:center; }
.a6-back { align-items:stretch; }
.a6-bhead { text-align:center; font-weight:800; font-size:12.5pt; color:#0b4356; letter-spacing:.8px; }
.a6-bhead span { display:block; font-size:8pt; color:#5f6f78; font-weight:600; margin-top:1mm; letter-spacing:.6px; }
.a6-tab { width:100%; border-collapse:collapse; margin-top:4mm; font-size:8.5pt; }
.a6-tab th, .a6-tab td { border:.35mm solid #9fb3bc; padding:1.4mm 1.6mm; text-align:left; }
.a6-tab th { background:#eef3f5; color:#0b4356; }
.a6-sign { margin-top:auto; }
.a6-sign .b-sign { position:static; }
/* ---------- Tanda tangan kartu di kanan (konvensi dokumen resmi) ---------- */
.krt .b-sign.kanan { align-self:flex-end; }
.a6-sign .b-sign { position:relative; width:fit-content; margin-left:auto; }

/* ---------- Kelompok tahap lipat (Panel 1–11) ---------- */
.grup-head { width:100%; display:flex; align-items:center; gap:8px; background:linear-gradient(100deg,#0a3d50,#12586e); color:#fdfbf7; border:none; border-radius:10px; padding:10px 14px; font-family:'Plus Jakarta Sans',sans-serif; font-size:13.5px; font-weight:700; letter-spacing:.4px; cursor:pointer; text-align:left; }
.grup-head .grup-rentang { margin-left:auto; font-size:11px; font-weight:600; color:#e6c96a; letter-spacing:.3px; }
.grup-head .grup-panah { transition:transform .2s; font-size:12px; }
.grup.tutup .grup-panah { transform:rotate(-90deg); }
.grup.tutup .grup-body { display:none; }
.grup-body { padding-top:14px; display:flex; flex-direction:column; gap:14px; }

/* ---------- Foto peserta di tabel Panel 2 ---------- */
.foto-sel { width:19px; height:25px; padding:0; border:1px solid var(--garis); border-radius:3px; background:#eef2f4; cursor:pointer; overflow:hidden; vertical-align:middle; }
.foto-sel img { width:100%; height:100%; object-fit:cover; display:block; }
.foto-kosong { font-size:13px; color:#7d8a93; line-height:23px; }
.foto-x { margin-left:2px; }

/* ---------- Periksa data ---------- */
.periksa-item { display:flex; gap:8px; align-items:flex-start; padding:7px 9px; border:1px solid var(--garis); border-radius:8px; margin-top:6px; font-size:12.5px; line-height:1.45; background:#fff; }
.periksa-item.lv-gagal { border-color:#e2a8a8; background:#fdf3f3; }
.periksa-item.lv-ingat { border-color:#e8d194; background:#fdfaf0; }
.periksa-item.lv-ok { border-color:#a9d3ae; background:#f2faf3; }
.rekap-kelas { font-weight:800; font-size:11pt; color:#0b4356; margin:4.5mm 0 1.6mm; letter-spacing:.3px; }
.rekap-kelas:first-of-type { margin-top:1mm; }
/* ---------- Rotasi pengawas (editor Panel 9) ---------- */
.rot-tab { width:100%; border-collapse:collapse; font-size:12.5px; margin:6px 0 4px; }
.rot-tab th, .rot-tab td { border:1px solid var(--garis); padding:4px 5px; text-align:left; }
.rot-tab th { background:#f2f5f7; font-size:11.5px; }
.rot-tab th .rot-hari { font-weight:500; color:#68707c; font-size:10.5px; }
.rot-tab select { width:100%; font-size:12px; padding:3px 4px; }
/* ---------- Berita acara ---------- */
.ba-isi { margin-top:1mm; }
.ba-isi p { margin:0 0 2.4mm; }
.ba-isi .garis { display:block; border-bottom:.4pt dotted #777; height:7mm; }
.ba-isi .dok-tab td { height:7.5mm; }
/* ---------- Denah ruang & spanduk (Fase 5) ---------- */
.denah-depan { text-align:center; font-weight:800; letter-spacing:1.6px; font-size:9.5pt; color:#fdfbf7; background:#0b4356; border-radius:1.5mm; padding:1.8mm; margin-bottom:3.5mm; }
.denah-grid { display:grid; gap:2.4mm; }
.denah-meja { border:.4mm solid #0b4356; border-radius:1.6mm; padding:1.6mm 1mm; text-align:center; min-height:15mm; }
.denah-meja.kosong { border-color:#c8cfd4; }
.denah-no { font-size:13pt; font-weight:800; color:#0b4356; line-height:1.1; }
.denah-nama { font-size:8pt; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.denah-sub { font-size:7pt; color:#5f6f78; }
.denah-bawah { display:flex; justify-content:space-between; align-items:center; margin-top:3.5mm; font-size:9.5pt; }
.denah-pintu { border:.4mm solid #191919; padding:1mm 4mm; font-weight:800; letter-spacing:1.5px; font-size:8.5pt; }
.spanduk-pv { width:100%; max-width:200mm; margin:10px auto; box-shadow:0 14px 34px rgba(0,0,0,.5); }
.spanduk { width:100%; position:relative; overflow:hidden; color:#fff; font-family:'Inter',sans-serif; }
.spanduk-cetak .spanduk { height:100%; }
.sp-isi { position:absolute; inset:0; display:flex; align-items:center; gap:4%; padding:0 5%; }
.sp-isi .logo-img { width:11%; height:auto; max-height:72%; object-fit:contain; flex:none; }
.sp-teks { flex:1; text-align:center; }
.sp-judul { font-size:clamp(14px, 3.4vw, 54px); font-weight:800; letter-spacing:1px; line-height:1.12; text-transform:uppercase; }
.sp-sub { font-size:clamp(10px, 1.9vw, 30px); font-weight:700; color:#e6c96a; letter-spacing:1.6px; margin-top:1.2%; text-transform:uppercase; }
.sp-ket { font-size:clamp(8px, 1.15vw, 18px); color:#dbe7ec; margin-top:1.4%; letter-spacing:.6px; }
.sp-garis { position:absolute; left:0; right:0; bottom:0; height:2.6%; background:#c9a227; }
.appfoot { text-align:center; padding:6px 16px 22px; font-size:12px; color:#6f7684; letter-spacing:.3px; }
.appfoot b { color:#a7aeba; font-weight:600; }
.preview-scroll .krt { box-shadow:0 10px 25px rgba(0,0,0,.5); }
#preview-zoom { transform-origin: top center; display:flex; flex-direction:column; align-items:center; }

/* ================================================================
   TEMPLATE "TEAL KLASIK" — kartu 85,6 × 54 mm (ID-1)
   Kelas awalan .krt dipakai bersama oleh pratinjau & cetak.
   ================================================================ */
.krt { width:85.6mm; height:54mm; color:#1d2b33; border-radius:3mm; position:relative; overflow:hidden; box-sizing:border-box; background:#fdfbf7; flex:none; font-family:'Inter',sans-serif; }
.krt .rel { position:relative; z-index:1; }
.krt .orn { display:flex; align-items:center; gap:1.1mm; }
.krt .orn i { display:block; width:1.25mm; height:1.25mm; background:#c9a227; transform:rotate(45deg); }
.krt .orn i.s { width:.75mm; height:.75mm; opacity:.6; }
.krt .orn.ctr { justify-content:center; }
/* Depan */
.krt.depan { padding:2.4mm 3.2mm 0; display:flex; flex-direction:column; }
.krt .head { display:flex; align-items:center; gap:2.4mm; height:7.4mm; }
.krt .head svg { width:7.4mm; height:7.4mm; flex:none; }
.krt .head .logo-img { width:7.4mm; height:7.4mm; object-fit:contain; flex:none; }
.krt .h-name { font-size:9.4pt; font-weight:800; letter-spacing:.8px; color:#0b4356; line-height:1.15; }
.krt .h-addr { font-size:5.8pt; font-weight:600; letter-spacing:1.6px; color:#5f6f78; margin-top:.5mm; }
.krt .banner { position:relative; width:50mm; height:11.2mm; margin-top:1.6mm; flex:none; }
.krt .banner .edge, .krt .banner .shape { position:absolute; inset:0; clip-path:polygon(0 0, calc(100% - 5.5mm) 0, 100% 50%, calc(100% - 5.5mm) 100%, 0 100%); }
.krt .banner .edge { background:#c9a227; transform:translate(.8mm,.5mm); }
.krt .banner .shape { background:linear-gradient(100deg,#0a3d50 0%,#12586e 100%); }
.krt .banner .txt { position:relative; z-index:1; padding:1.2mm 3mm; }
.krt .bn-1 { font-size:11pt; font-weight:800; letter-spacing:.6px; color:#fff; line-height:1.12; }
.krt .bn-2 { font-size:7.8pt; font-weight:700; letter-spacing:.4px; color:#e6c96a; line-height:1.2; margin-top:.4mm; white-space:nowrap; overflow:hidden; }
.krt .foto { position:absolute; top:11.4mm; right:3.2mm; width:20mm; height:26.7mm; border:.45mm solid #c9a227; border-radius:1.6mm; overflow:hidden; background:#e8edef; z-index:2; }
.krt .foto img { width:100%; height:100%; object-fit:cover; display:block; }
.krt .foto svg { width:100%; height:100%; display:block; }
.krt .barcodeBox { position:absolute; top:38.9mm; right:3.2mm; width:20mm; z-index:2; text-align:center; }
.krt .barcodeBox svg.barcode { width:100%; height:auto; display:block; background:#fff; }
.krt .bc-num { font-size:5pt; font-weight:600; letter-spacing:1.8px; color:#333; margin-top:.5mm; text-align:center; }
.krt .data { margin-top:1.2mm; width:59mm; }
.krt .data .row { display:flex; align-items:baseline; height:4.5mm; }
.krt .data .lb { font-size:7.3pt; font-weight:700; color:#0b4356; width:19mm; flex:none; }
.krt .data .cl { font-size:7.3pt; color:#5b6a71; width:2.2mm; flex:none; }
.krt .data .vl { font-size:7.5pt; font-weight:600; color:#1d2b33; white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.krt .d-note { position:absolute; bottom:2mm; left:3.2mm; right:3.2mm; text-align:center; font-size:5.3pt; color:#8b96a0; line-height:1.45; }
/* Belakang */
.krt.belakang { padding:1.4mm 3mm; display:flex; flex-direction:column; }
.krt .b-head { font-size:9pt; font-weight:800; color:#0b4356; text-align:center; }
.krt .b-head span { font-weight:600; color:#4b5563; font-size:7.2pt; }
.krt .b-head .orn { margin:1.1mm 0 1.2mm; }
.krt .b-table { width:100%; border-collapse:collapse; font-size:7pt; line-height:1.08; }
.krt .b-table th { background:#0b4356; color:#fff; font-size:6.8pt; font-weight:700; text-align:left; padding:.55mm .9mm; }
.krt .b-table td { padding:.6mm .9mm; white-space:nowrap; overflow:hidden; border-top:none; }
.krt .b-table tbody tr:nth-child(even) td { background:rgba(11,67,86,.055); }
.krt .b-table .c-hari { font-weight:700; width:17mm; }
.krt .b-sign { padding-top:1mm; margin-top:auto; position:relative; }
.krt .sign-block { font-size:7pt; line-height:1.3; color:#333; }
.krt .sign-space { height:4.2mm; position:relative; }
.krt .ttd-img { position:absolute; left:.5mm; bottom:-.6mm; height:6.6mm; max-width:30mm; object-fit:contain; }
.krt .sign-name { font-weight:700; text-decoration:underline; font-size:7.6pt; }
.krt .stempel-img { position:absolute; left:6.5mm; bottom:-1.2mm; width:15.5mm; height:15.5mm; object-fit:contain; opacity:.92; transform:rotate(-12deg); }

/* ---------- Area cetak ---------- */
#print-area { display:none; }
.sheet { width:210mm; height:297mm; padding:10mm; display:grid; grid-template-columns:repeat(2, 85.6mm); grid-auto-rows:54mm; gap:3mm; justify-content:center; align-content:start; page-break-after:always; background:#fff; }
.sheet .krt { border-radius:0; box-shadow:none; }
.single { page-break-after:always; }
.single .krt { border-radius:0; box-shadow:none; }

/* Mode percetakan A3+ (13 × 19 inci): grid 5 × 5 terpusat + bleed 3 mm */
.sheet-a3 { position:relative; width:483mm; height:330mm; page-break-after:always; background:#fff; overflow:hidden; }
.sheet-a3 .grid-a3 { position:absolute; left:12.5mm; top:15mm; width:458mm; display:flex; flex-wrap:wrap; }
.bleed { position:relative; width:91.6mm; height:60mm; overflow:hidden; flex:none; }
.bleed .krt { border-radius:0; box-shadow:none; }
.bleed-under { position:absolute; left:0; top:0; width:85.6mm; height:54mm; transform:scale(1.0701,1.1111); transform-origin:0 0; }
.bleed-top { position:absolute; left:3mm; top:3mm; }
.panduan-a3 { position:absolute; left:0; top:0; width:483mm; height:330mm; pointer-events:none; }
.info-a3 { position:absolute; left:12.5mm; bottom:5mm; font-size:8pt; color:#888; }

@media print {
  body { background:#fff; }
  .appbar, .layout, .appfoot { display:none !important; }
  .sk-doc { padding:0; }
  .dok-doc { padding:0; }
  .meja-lembar { padding:0; }
  #print-area { display:block; }

  .krt { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* ================================================================
   TEMPLATE ARTWORK — latar SVG (folder templates/) + overlay data.
   ================================================================ */
.krt.art { padding:0; }
.krt .art-bg { position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; }
.krt .art-head { position:absolute; z-index:2; }
.krt .art-title { position:absolute; z-index:2; }
.krt .art-data { position:absolute; margin-top:0; z-index:1; }
.krt .data.sempit .lb { width:15.5mm; }
.krt .data.sempit .vl { font-size:7.1pt; }
.krt.art .data .lb { color:var(--tpl-primary); }
.krt .art-back { position:absolute; inset:0; z-index:1; padding:1.4mm 3mm; display:flex; flex-direction:column; }
.krt.art .b-table th { background:var(--tpl-primary); }
.krt.ne-back .b-table th { color:#e9c767; }
.krt.ne-back .b-table td:first-child { font-weight:700; color:#14344d; }
.krt.th-emas .b-table th { color:#e9c767; }
.krt.gelap .sign-block { color:#f3e9d2; }
.krt.gelap .b-table td { color:#f1e8d8; }
.krt.gelap .b-table td:first-child { color:#e9c767; }
.krt .b-table.padat2 { font-size:6.2pt; }
.krt .b-table.padat2 th { font-size:6pt; padding:.45mm .9mm; }
.krt .b-table.padat2 td { padding:.38mm .9mm; }
.krt.art .b-table tbody tr:nth-child(even) td { background:var(--tpl-soft); }

.krt .data.mini .vl { font-size:7pt; }

.krt .art-line { position:absolute; z-index:2; white-space:nowrap; overflow:hidden; }
.krt .b-table.padat { font-size:6.5pt; }
.krt .b-table.padat th { font-size:6.3pt; padding:.5mm .9mm; }
.krt .b-table.padat td { padding:.4mm .9mm; }
.krt .b-table.ultra { font-size:5.7pt; }
.krt .b-table.ultra th { font-size:5.5pt; padding:.3mm .9mm; }
.krt .b-table.ultra td { padding:.3mm .9mm; }

#auth-info a { color:#e6c96a; }

.kelola { margin-top:10px; border-top:1px solid #2a2e35; padding-top:8px; }
.kelola summary { cursor:pointer; font-size:12.5px; font-weight:600; color:#c9ccd4; }
.kelola #kelola-template { margin-top:8px; display:flex; flex-direction:column; gap:6px; }

/* Varian kartu gelap (mis. Navy Emas Premium): teks data terang di atas latar gelap */
.krt.gelap .data .lb { color:#e6c96a; }
.krt.gelap .data .cl { color:#8fa6b8; }
.krt.gelap .data .vl { color:#ffffff; }
.krt .data.rapat .row { height:4.05mm; }
.krt .data.garis .row { border-bottom:.16mm solid rgba(255,255,255,.25); }
.krt .data.garis .row:last-child { border-bottom:none; }