:root {
  --bg: #f5f6f8; --kartu: #fff; --teks: #1d2433; --muted: #4b5563; --garis: #e3e6eb;
  --utama: #1f3864;
  --kavling: #f2c94c; --proses: #f2994a; --ready: #27ae60; --cash: #9b51e0; --booking: #2f80ed; --terjual: #eb5757;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Lexend", Arial, Helvetica, sans-serif; font-size: 14px; background: var(--bg); color: var(--teks); }
a { color: var(--utama); }
.muted { color: var(--muted); }
.link { background: none; border: 0; color: inherit; cursor: pointer; font: inherit; padding: 0; }

header#topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--utama); color: #fff; padding: 8px 20px; position: sticky; top: 0; z-index: 15; }
header#topbar a, header#topbar .link { color: #fff; text-decoration: none; font-weight: bold; }
header#topbar nav { align-items: center; }
.brand img { background: #fff; border-radius: 8px; padding: 3px 8px; }
.menu { position: relative; }
.menu-isi { position: absolute; right: 0; top: calc(100% + 10px); background: #fff; border-radius: 10px; min-width: 220px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 6px; display: flex; flex-direction: column; }
.menu-isi[hidden] { display: none; }
header#topbar .menu-isi a, header#topbar .menu-isi .link { color: var(--teks); font-weight: normal; padding: 10px 12px; border-radius: 6px; text-align: left; }
header#topbar .menu-isi a:hover, header#topbar .menu-isi .link:hover { background: #eef2f8; }
.menu-isi hr { border: 0; border-top: 1px solid var(--garis); margin: 4px 0; }
.peta { width: 100%; height: 200px; border: 0; border-radius: 10px; display: block; margin: 4px 0 8px; }
header#topbar nav { display: flex; gap: 18px; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: bold; font-size: 16px; }
.brand img { height: 40px; width: auto; display: block; }

main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 60px; }
h1 { font-size: 22px; margin: 4px 0 16px; }
h2 { font-size: 17px; margin: 24px 0 10px; }

.kartu { background: var(--kartu); border: 1px solid var(--garis); border-radius: 10px; padding: 16px; }
.login { max-width: 360px; margin: 10vh auto; }
.login h1 { text-align: center; }
label { display: block; font-weight: bold; margin: 12px 0 4px; }
input, select { width: 100%; padding: 9px 10px; border: 1px solid var(--garis); border-radius: 6px; font: inherit; }
button.utama { background: var(--utama); color: #fff; border: 0; border-radius: 6px; padding: 10px 14px; font: inherit; font-weight: bold; cursor: pointer; width: 100%; margin-top: 16px; }
button.utama:disabled { opacity: .6; }
.galat { color: #b42318; margin-top: 10px; }
.sukses { color: #067647; margin-top: 10px; }

.legenda { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 16px; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.titik { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.s-kavling { background: var(--kavling); } .s-proses { background: var(--proses); }
.s-ready { background: var(--ready); } .s-cash { background: var(--cash); } .s-booking { background: var(--booking); } .s-terjual { background: var(--terjual); }

.ringkas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 8px; }
.ringkas .kartu { padding: 12px 14px; }
.ringkas .angka { font-size: 24px; font-weight: bold; }

.grid-lokasi { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.kartu-lokasi { display: block; text-decoration: none; color: inherit; transition: box-shadow .15s; }
.kartu-lokasi:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.kartu-lokasi .nama { font-weight: bold; font-size: 15px; }
.kartu-lokasi .sub { color: var(--muted); font-size: 12px; margin: 2px 0 10px; }
.bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--garis); }
.bar i { display: block; height: 100%; }
.angka-status { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; font-size: 12px; }
.lencana { font-size: 11px; padding: 2px 7px; border-radius: 10px; background: #eef1f6; color: var(--muted); margin-left: 6px; font-weight: normal; }

.alat { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.alat input, .alat select { width: auto; min-width: 180px; }
.blok { margin-bottom: 18px; }
.blok h3 { font-size: 14px; margin: 0 0 8px; }
.kotak-wrap { display: flex; flex-wrap: wrap; gap: 5px; }
.kotak { width: 52px; height: 34px; border-radius: 5px; border: 0; color: #1d2433; font-size: 11px; font-weight: bold; cursor: pointer; }
.kotak.s-ready, .kotak.s-cash, .kotak.s-booking, .kotak.s-terjual { color: #fff; }
.kotak.redup { opacity: .18; }

.panel { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; justify-content: flex-end; z-index: 30; }
.panel[hidden] { display: none; }
.panel-box { background: #fff; width: min(420px, 100%); height: 100%; overflow-y: auto; padding: 20px; position: relative; }
.panel-tutup { position: absolute; right: 14px; top: 10px; font-size: 24px; background: none; border: 0; cursor: pointer; }
dl.rinci { display: grid; grid-template-columns: 130px 1fr; gap: 6px 10px; margin: 12px 0; }
dl.rinci dt { color: var(--muted); }
dl.rinci dd { margin: 0; }

@media (max-width: 600px) {
  header#topbar { flex-wrap: wrap; }
  .alat input, .alat select { width: 100%; }
}

/* tombol kedua, siteplan, tambah blok */
button.kedua, a.kedua { background: #fff; color: var(--utama); border: 1px solid var(--utama); border-radius: 6px; padding: 8px 12px; font: inherit; font-weight: bold; cursor: pointer; }
button.kedua:hover, a.kedua:hover { background: #eef2f8; }
button.kedua.lebar { width: 100%; margin-top: 12px; }
.alat-siteplan { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.alat-siteplan select { width: auto; }
.pemisah { width: 1px; height: 22px; background: var(--garis); margin: 0 4px; }
.siteplan-scroll { overflow: auto; max-height: 78vh; background: #fff; border: 1px solid var(--garis); border-radius: 10px; }
.siteplan { position: relative; min-width: 300px; }
.siteplan img { display: block; width: 100%; height: auto; user-select: none; }
.judul-baris { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 24px 0 10px; }
.judul-baris h2 { margin: 0; }
.foto-lokasi { aspect-ratio: 4 / 3; margin: -16px -16px 12px; border-radius: 10px 10px 0 0; overflow: hidden; background: linear-gradient(135deg, var(--utama), #4a6fa5); display: flex; align-items: center; justify-content: center; }
.foto-lokasi img { width: 100%; height: 100%; object-fit: cover; }
.foto-lokasi span { color: rgba(255,255,255,.85); font-size: 26px; font-weight: bold; letter-spacing: 1px; }
.s-kosong { background: #fff; box-shadow: inset 0 0 0 1px #c9ced6; }
.bar i.s-kosong { background: #dfe3e8; box-shadow: none; }
.kotak.s-kosong { color: #6b7280; }
.tip-sp { position: fixed; z-index: 40; background: #1d2433; color: #fff; font-size: 12px; padding: 4px 8px; border-radius: 4px; pointer-events: none; white-space: nowrap; }
.sp-view { position: relative; overflow: hidden; height: calc(100vh - 150px); min-height: 360px; background: #fff;
  border: 1px solid var(--garis); border-radius: 10px; cursor: grab; touch-action: none; user-select: none; }
.sp-view canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; }
.sp-view.menggeser, .sp-view.menggeser canvas { cursor: grabbing !important; }

/* footer, logo login */
.kaki { text-align: center; color: var(--muted); font-size: 12px; padding: 18px 16px 24px; border-top: 1px solid var(--garis); }
.logo-login { display: block; height: 70px; margin: 4px auto 6px; }

/* status aktif lokasi */
.kartu-lokasi { position: relative; }
.lencana-aktif { display: inline-block; font-size: 11px; font-weight: bold; padding: 3px 10px; border-radius: 999px; border: 2px solid; background: #fff; }
.lencana-aktif.aktif { color: #067647; border-color: #27ae60; }
.lencana-aktif.mati { color: #b42318; border-color: #eb5757; }
.kartu-lokasi .lencana-aktif { position: absolute; top: 10px; left: 10px; z-index: 1; }
.kartu-lokasi.nonaktif { background: #f1f2f4; }
.kartu-lokasi.nonaktif > :not(.lencana-aktif) { filter: grayscale(1); opacity: .55; }

/* halaman lokasi: data kiri, siteplan kanan */
main.lebar { max-width: none; padding: 16px 20px 40px; }
.lokasi-dua { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
.lokasi-kiri { position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow-y: auto; padding-right: 4px; }
.lokasi-kiri h1 { margin: 8px 0 6px; font-size: 20px; }
.lokasi-kiri dl.rinci { grid-template-columns: 80px 1fr; font-size: 13px; margin: 8px 0 14px; }
.lokasi-kiri dl.rinci dd { word-break: break-word; }
.daftar-status { background: #fff; border: 1px solid var(--garis); border-radius: 10px; padding: 6px 12px; }
.baris-status { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--garis); }
.baris-status span { display: inline-flex; align-items: center; gap: 6px; }
.baris-status.total b { font-size: 16px; }
.kecil { font-size: 12px; padding: 6px 0 2px; }
.alat-kiri label { margin-top: 10px; }
.tombol-kiri { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
@media (max-width: 900px) {
  .lokasi-dua { grid-template-columns: 1fr; }
  .lokasi-kiri { position: static; max-height: none; overflow: visible; }
}

/* handphone */
@media (max-width: 600px) {
  header#topbar { padding: 6px 12px; flex-wrap: nowrap; }
  .brand img { height: 32px; }
  .brand span { display: none; }
  header#topbar nav { gap: 14px; font-size: 13px; }
  main, main.lebar { padding: 12px 12px 32px; }
  h1 { font-size: 19px; }
  .ringkas { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .ringkas .angka { font-size: 20px; }
  .grid-lokasi { grid-template-columns: 1fr; }
  .lokasi-dua { gap: 12px; }
  .sp-view { height: 70vh; }
  .alat-siteplan .muted { font-size: 12px; flex-basis: 100%; }
  .daftar-status { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
  .baris-status { font-size: 13px; }
  .tombol-kiri { flex-direction: row; flex-wrap: wrap; }
  .tombol-kiri button { flex: 1 1 45%; }
  .kotak { width: 46px; }
  dl.rinci { grid-template-columns: 110px 1fr; }
  .panel-box { width: 100%; }
}
a.tombol-link { display: block; text-align: center; text-decoration: none; margin-bottom: 14px; }

/* Lexend di semua elemen form, info lokasi dipertegas */
button, input, select, textarea { font-family: inherit; }
.lokasi-kiri dl.rinci dt { color: var(--teks); font-weight: 500; }
.lokasi-kiri dl.rinci dd { color: var(--teks); font-weight: 600; }
.lokasi-kiri h1 { font-weight: 700; }

/* ===== modul menu ===== */
button.utama.pendek { width: auto; margin-top: 0; }
button.kedua.merah { color: #b42318; border-color: #eb5757; }
.peringatan { background: #fff8e6; border-color: #f2c94c; }
.tabel-wadah { overflow-x: auto; padding: 0; }
table.tabel { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tabel th, table.tabel td { padding: 9px 10px; border-bottom: 1px solid var(--garis); text-align: left; vertical-align: top; }
table.tabel th { background: #eef2f8; color: var(--utama); font-weight: 600; white-space: nowrap; }
table.tabel tbody tr[data-id] { cursor: pointer; }
table.tabel tbody tr[data-id]:hover { background: #f6f8fc; }
.st { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: #eef1f6; }
.st-Draft { background: #eef1f6; color: #374151; } .st-MenungguTTD { background: #fff4d6; color: #8a5a00; }
.st-Terkirim { background: #e3edff; color: #1d4ed8; } .st-Selesai, .st-Terjual { background: #e3f6ea; color: #067647; }
.st-Dibatalkan { background: #fde8e8; color: #b42318; } .st-Dibooking { background: #e3edff; color: #1d4ed8; }
.kunci { font-size: 12px; }
.dua-kolom { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
dl.rinci.tebal dt { color: var(--teks); font-weight: 500; } dl.rinci.tebal dd { font-weight: 600; }
.tombol-baris { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0 8px; }
.baris-kecil { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.baris-kecil select { width: auto; }
.riwayat { list-style: none; padding: 0; margin: 0; }
.riwayat li { padding: 8px 0; border-bottom: 1px solid var(--garis); }
.form-lebar .kartu { margin-bottom: 14px; }
.grid-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 16px; }
.grid-form .penuh { grid-column: 1 / -1; }
.grid-form [hidden] { display: none; }
textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--garis); border-radius: 6px; font: inherit; resize: vertical; }
table.tabel-form td { padding: 5px; }
table.tabel-form input, table.tabel-form select, table.tabel-form textarea { padding: 6px 8px; font-size: 13px; }
table.cek-form td:first-child { white-space: nowrap; color: var(--muted); }
table.cek-form td:nth-child(2) { min-width: 220px; }
table.cek-form td:nth-child(3) { min-width: 180px; }
table.cek-form tr.grup td { background: #f3f5f9; font-weight: 700; color: var(--utama); }
.grid-pt { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; }
.pratinjau-kop { background: #fff; border: 1px solid var(--garis); border-radius: 8px; padding: 14px; margin-bottom: 10px; overflow-x: auto; }

/* penampil dokumen (pratinjau kertas A4) */
#dokumen { position: fixed; inset: 0; z-index: 50; background: #525659; overflow: auto; }
#dokumen[hidden] { display: none; }
.dok-alat { position: sticky; top: 0; z-index: 1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--utama); color: #fff; padding: 10px 16px; }
.dok-alat .spasi { flex: 1; }
.dok-alat button.utama { width: auto; margin: 0; background: #fff; color: var(--utama); }
.dok-wadah { padding: 24px 12px 60px; }
.dok-wadah .kertas { background: #fff; width: 210mm; max-width: 100%; min-height: 297mm; margin: 0 auto 18px; padding: 18mm 20mm; box-shadow: 0 4px 18px rgba(0,0,0,.35); }
.dok-wadah.mendatar .kertas { width: 297mm; min-height: 210mm; padding: 12mm; }
.dok-wadah.slf .kertas { padding: 15mm 15mm; }
.kertas { font-family: Arial, Helvetica, sans-serif; font-size: 11pt; line-height: 1.45; color: #000; }
.kertas p { margin: 0 0 10px; }
.kop { display: flex; align-items: center; gap: 16px; border-bottom: 3px double #000; padding-bottom: 8px; margin-bottom: 18px; }
.kop img { height: 70px; width: auto; }
.kop .teks-kop { flex: 1; text-align: center; }
.kop .nama-pt { font-size: 16pt; font-weight: bold; }
.kop .tagline { font-style: italic; }
.kop .kecil { font-size: 9.5pt; }
table.meta { border-collapse: collapse; margin-bottom: 10px; }
table.meta td { padding: 0 6px 0 0; vertical-align: top; }
table.rincian { border-collapse: collapse; margin: 0 0 10px 24px; }
table.rincian td { padding: 1px 6px 1px 0; vertical-align: top; }
.ttd-ruang { height: 70px; }
.ttd-qr { margin: 4px 0 6px; width: max-content; }
.ttd-qr img { width: 26mm; height: 26mm; image-rendering: pixelated; display: block; }
/* Cap PRATINJAU hanya di layar; hasil cetak dan PDF bersih. */
.dok-wadah.ada-cap .kertas { position: relative; overflow: hidden; }
.dok-wadah.ada-cap .kertas::after { content: "PRATINJAU"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-35deg);
  font: 700 88px/1 Lexend, Arial, sans-serif; letter-spacing: 8px; color: rgba(220, 38, 38, .16); pointer-events: none; white-space: nowrap; }
.judul-dok { text-align: center; font-weight: bold; font-size: 12pt; }
table.cek { width: 100%; border-collapse: collapse; font-size: 8.5pt; }
table.cek th, table.cek td { border: 1px solid #000; padding: 3px 4px; vertical-align: top; }
table.cek th { background: #eee; }
table.cek td.tengah { text-align: center; }
table.cek tr.grup td { font-weight: bold; }
table.cek tfoot td { border: 0; font-size: 8pt; font-style: italic; text-align: center; padding-top: 6px; }
table.lap { width: 100%; border-collapse: collapse; font-size: 9pt; }
table.lap th, table.lap td { border: 1px solid #000; padding: 3px 5px; }
table.lap th { background: #eee; }

@media (max-width: 900px) { .dua-kolom { grid-template-columns: 1fr; } .grid-pt { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .dok-wadah .kertas { padding: 10mm 8mm; min-height: 0; } }

@page { size: A4; margin: 15mm; }
@media print {
  body.ada-dokumen > *:not(#dokumen) { display: none !important; }
  body.ada-dokumen { background: #fff; }
  #dokumen { position: static; background: #fff; overflow: visible; }
  .dok-alat { display: none !important; }
  .dok-wadah { padding: 0; }
  .dok-wadah .kertas { width: auto; min-height: 0; margin: 0; padding: 0; box-shadow: none; }
  .kertas.halaman-baru { break-before: page; }
  .dok-wadah.ada-cap .kertas::after { display: none; }
  table.cek tr { break-inside: avoid; }
}
.dok-wadah.mendatar .kertas { page: mendatar; }
@page mendatar { size: A4 landscape; margin: 10mm; }
.menu-isi [hidden] { display: none !important; }
table.rincian td:first-child { white-space: nowrap; }
#pita-latihan { background: #fff4d6; color: #8a5a00; border-bottom: 1px solid #f2c94c; padding: 8px 16px; text-align: center; font-weight: 600; font-size: 13px; }

.harga-kons { margin: 2px 0 10px; font-size: 16px; }
#f-kons textarea { width: 100%; box-sizing: border-box; font: inherit; }

/* BAST: mengikuti cetakan lama */
.kertas.bast { font-family: "Lexend", Arial, sans-serif; font-size: 10.5pt; line-height: 1.5; }
.kertas.bast p { margin: 0 0 8px; }
.kertas.bast .tengah { text-align: center; }
.kertas.bast .rata { text-align: justify; }
.kop-bast { display: flex; align-items: center; gap: 18px; }
.kop-bast > img { height: 54px; }
.kop-bast .kb-nama { flex: 1; }
.kop-bast .kb-pt { color: #1e4e9a; font-weight: 700; font-size: 20pt; line-height: 1.1; max-width: 250px; }
.kop-bast .kb-tag { color: #d71920; font-weight: 700; font-size: 7.5pt; margin-top: 4px; }
.kop-bast .kb-batas { width: 6px; align-self: stretch; background: #d71920; }
.kop-bast .kb-alamat { text-align: right; font-size: 8pt; color: #444; line-height: 1.6; }
.kb-garis { height: 4px; margin: 8px 0 22px; background: linear-gradient(to right, #d71920 50%, #1e4e9a 50%); }
.kertas.bast .judul-dok { margin-bottom: 6px; }
.kertas.bast table.daftar { margin: 0 0 14px; border-collapse: collapse; width: 100%; }
.kertas.bast table.daftar td { padding: 1px 6px 1px 0; vertical-align: top; }
.kertas.bast table.daftar td.no { width: 22px; }
.kertas.bast table.daftar td.lbl { width: 190px; }
.kertas.bast table.daftar td:nth-child(3) { width: 14px; }
.kertas.bast table.daftar { table-layout: fixed; }
.kertas.bast ol { margin: 0 0 18px; padding-left: 22px; }
.kertas.bast table.ttd-dua { width: 100%; margin-top: 18px; }
.kertas.bast table.ttd-dua td { width: 50%; text-align: center; vertical-align: top; }
.kertas.bast .ttd-qr { display: table; margin: 6px auto; }
.kertas.bast .ttd-qr > img:first-child { width: 30mm; height: 30mm; }
.kertas.bast .ttd-ruang-bast { height: 26mm; margin: 6px 0; }
.ttd-qr.ber-logo { position: relative; }
.ttd-qr .qr-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 8mm !important; height: auto !important; background: #fff; padding: 1px 2px; image-rendering: auto !important; }

/* Dashboard penjualan di Beranda (ringkas; laporan lengkap ada di Menu) */
.ringkas { grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); }
.dash { margin: 12px 0 16px; padding: 12px 14px; }
.dash-kepala { display: flex; align-items: center; gap: 10px; }
.dash-kepala select { width: auto; margin: 0; padding: 4px 8px; font-size: 13px; }
.dash-baris { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 8px; }
.dash-st { display: flex; align-items: baseline; gap: 6px; font-size: 13px; }
.dash-st span { color: var(--muted); }
.dash-st b { font-size: 16px; }
.dash-per { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.dash-per b { color: var(--teks); font-weight: 600; }
.kecil { font-size: 12px; }

/* Laporan penjualan */
.lap-filter { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 14px; margin: 12px 0; }
.lap-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; flex: 1 1 150px; }
.lap-f select, .lap-f input { margin: 0; }
.lap-cari { flex: 2 1 200px; }
.lap-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 12px; }
.lap-kpi .kartu { padding: 12px 14px; }
.lap-kpi .angka { font-size: 24px; font-weight: 700; }
.lap-kpi .kpi-waspada { border-color: #f2c94c; background: #fffbea; }
.lap-dua { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }
.lap-dua .kartu, .lap-dua + .kartu, .lap-dua + .kartu + .kartu { margin-bottom: 12px; }
.lap-judul { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.lap-judul h2 { font-size: 15px; margin: 0; }
.lap-legenda { display: flex; gap: 12px; font-size: 12px; color: var(--muted); }
.lap-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.lap-grafik { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; height: 180px; border-bottom: 1px solid var(--garis); position: relative; }
.lg-kol { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 2px; border-radius: 6px; }
.lg-kol:hover, .lg-kol.aktif { background: #eef3fb; }
.lg-batang { flex: 1; display: flex; align-items: flex-end; gap: 2px; width: 100%; justify-content: center; }
.lg-batang i { display: block; width: 36%; max-width: 12px; border-radius: 4px 4px 0 0; }
.lg-kol span { font-size: 10.5px; color: var(--muted); margin-top: 4px; }
.lg-tip { margin-top: 6px; font-size: 12px; font-weight: 600; }
.tabel.ringan th, .tabel.ringan td { padding: 6px 8px; }
.serap { display: inline-block; width: 70px; height: 6px; border-radius: 3px; background: #e5e7eb; vertical-align: middle; margin-right: 6px; overflow: hidden; }
.serap i { display: block; height: 100%; background: var(--booking); border-radius: 3px; }
.tabel tfoot td { font-weight: 700; border-top: 2px solid var(--garis); }
.lap-detail th[data-urut] { cursor: pointer; white-space: nowrap; user-select: none; }
.lap-detail td { white-space: nowrap; }
.aging { font-weight: 600; }
.aging.a-kuning { color: #a15c00; }
.aging.a-merah { color: #b42318; }
@media (max-width: 900px) { .lap-dua { grid-template-columns: 1fr; } }
.tabel-gulir { overflow-x: auto; }
.tabel .kanan, .tabel th.kanan, .tabel td.kanan { text-align: right; }

/* SLF: tulisan "Lampiran 4" kecil di kiri bawah lembar 1 dan 2 */
.kertas.ada-kaki { position: relative; }
.kaki-lampiran { position: absolute; left: 20mm; bottom: 10mm; font-size: 8pt; font-style: italic; color: #333; }
.dok-wadah.slf .kaki-lampiran { left: 15mm; }
@media print {
  .kertas.ada-kaki { min-height: 265mm; }
  .dok-wadah.slf .kaki-lampiran, .kaki-lampiran { left: 0; bottom: 0; }
}
.kar-id { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.kar-id button { flex-shrink: 0; }
@media (max-width: 600px) { .kar-id { flex-direction: column; align-items: stretch; } }
tr.baris-klik { cursor: pointer; }
tr.baris-klik:hover td { background: #f5f8fd; }
.kpi-pilih { cursor: pointer; }
.kpi-pilih.aktif { border-color: var(--utama, #1f3864); box-shadow: inset 0 0 0 1px var(--utama, #1f3864); }
.lencana-form { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #eef2f7; color: #1f2937; white-space: nowrap; }
.lencana-form.f-SLF { background: #e3f6ea; color: #067647; }
.lencana-form.f-BAST { background: #f3e8ff; color: #6b21a8; }
.lencana-form.f-UMUM { background: #e3edff; color: #1d4ed8; }
/* Daftar Akun & otorisasi */
.hak-ringkas { max-width: 420px; }
.hak-chip { display: inline-block; margin: 1px 2px; padding: 2px 8px; border-radius: 999px; font-size: 11px; white-space: nowrap; background: #eef2f7; color: #374151; }
.hak-chip.t2 { background: #e3edff; color: #1d4ed8; }
.hak-chip.t3 { background: #e3f6ea; color: #067647; }
.matriks-hak td, .matriks-hak th { vertical-align: middle; }
.matriks-hak .tengah { text-align: center; width: 92px; }
.matriks-hak input[type=checkbox] { width: 20px; height: 20px; cursor: pointer; }
.cek-super { display: flex; gap: 8px; align-items: center; margin: 4px 0 12px; }
.cek-super input { width: auto; }
.preset-hak { margin-bottom: 8px; }
.preset-hak button.kecil { padding: 4px 10px; font-size: 12px; }
.redup { opacity: .45; }
p.peringatan { background: #fff7e6; border: 1px solid #f5c26b; border-radius: 8px; padding: 6px 10px; }
.dash-kepala { flex-wrap: wrap; }
.dash-st.d-booking b { color: var(--booking); } .dash-st.d-proses b { color: #e67e22; } .dash-st.d-akad b { color: var(--terjual); }
/* Perjalanan Berkas */
.berkas-alur { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 12px 0; }
.berkas-alur .kartu { text-align: left; font: inherit; cursor: pointer; margin: 0; border-top: 4px solid #cbd5e1; }
.tahap-lencana { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #eef2f7; color: #374151; white-space: nowrap; }
.tb-Booking { --tb: var(--booking); } .tb-Berkas-dikumpulkan { --tb: #94a3b8; } .tb-Berkas-lengkap { --tb: #0ea5e9; }
.tb-Diserahkan-ke-bank { --tb: #e67e22; } .tb-SP3K-terbit { --tb: #d97706; } .tb-Akad { --tb: var(--terjual); } .tb-Ditolak-batal { --tb: #6b7280; }
.berkas-alur .kartu[class*="tb-"] { border-top-color: var(--tb); }
.tahap-lencana[class*="tb-"] { background: color-mix(in srgb, var(--tb) 15%, #fff); color: color-mix(in srgb, var(--tb) 75%, #000); }
.linimasa { list-style: none; padding: 0 0 0 14px; margin: 12px 0; border-left: 3px solid #e5e7eb; }
.linimasa li { position: relative; padding: 0 0 12px 12px; }
.linimasa li::before { content: ""; position: absolute; left: -22px; top: 3px; width: 13px; height: 13px; border-radius: 50%; background: var(--tb, #94a3b8); border: 2px solid #fff; }
.berkas-alur .angka { font-size: 24px; font-weight: 700; }
.isi-koordinat { margin: 8px 0 12px; } .isi-koordinat .baris-kecil { flex-wrap: nowrap; } .isi-koordinat input { flex: 1; min-width: 0; margin: 0; }
/* Kartu ringkasan Beranda: label satu baris, kolom sama lebar (desktop 8, tablet 4, HP 2) */
.ringkas { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.ringkas .kartu { padding: 10px 12px; min-width: 0; margin: 0; }
.ringkas .muted { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.ringkas .muted .titik { flex: none; margin: 0; }
.ringkas .angka { font-size: 22px; line-height: 1.25; margin-top: 2px; }
@media (max-width: 1100px) { .ringkas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ringkas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .ringkas .angka { font-size: 20px; } }
.ringkas .kartu { padding: 10px 10px; } .ringkas .muted { font-size: 12.5px; gap: 5px; }
@media (max-width: 1180px) { .ringkas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ringkas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-kepala select { flex: 1 1 140px; } }
.tabel td.satu-baris, .tabel th.satu-baris { white-space: nowrap; }
#k-tabel th, #k-tabel td:nth-child(1), #k-tabel td:nth-child(6), #k-tabel td:nth-child(7), #k-tabel td:nth-child(8), #k-tabel td:nth-child(9) { white-space: nowrap; }
/* Tools data master */
.tools-tab { margin: 12px 0; }
.tools-tabel input, .tools-tabel select, .tools-tabel textarea { margin: 0; padding: 6px 8px; font-size: 13px; width: 100%; box-sizing: border-box; }
.tools-tabel input[type=number] { width: 70px; }
.tools-tabel textarea { resize: vertical; font: inherit; }
.tools-tabel td { vertical-align: middle; }
.tools-tabel tr.baris-tambah td { background: #f8fafc; }
.tools-tabel button.kecil { padding: 5px 10px; font-size: 12px; }
.tools-tab button, .tools-tabel button { width: auto; margin: 0; }
.tools-tab { flex-wrap: wrap; }
.tools-tabel select { min-width: 95px; }
/* Tombol berdampingan (Ubah, Hapus, Unduh, dll.) selalu rata dan sama tinggi */
.baris-kecil > a.kedua, .baris-kecil > button.kedua, .baris-kecil > button.utama, .tombol-baris > a.kedua, .tombol-baris > button {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 38px; margin: 0; line-height: 1.2; vertical-align: middle; }
.baris-kecil > a.tombol-link { margin-bottom: 0; }
[hidden] { display: none !important; }
/* No. HP lebih dari satu + tanda WA */
.hp-baris { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.hp-baris .hp-no { flex: 1; min-width: 0; margin: 0; }
.hp-baris .hp-wa { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-weight: 600; white-space: nowrap; }
.hp-baris .hp-wa input { width: auto; margin: 0; }
.hp-baris .hp-hapus { margin: 0; }
.hp-satu { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; white-space: nowrap; }
.chip-wa { display: inline-block; padding: 1px 7px; border-radius: 999px; background: #e3f6ea; color: #067647; font-size: 11px; font-weight: 700; text-decoration: none; }
.chip-wa:hover { background: #25d366; color: #fff; }
/* Bar biru lebih tinggi di layar lebar agar semboyan tampil besar */
@media (min-width: 1001px) {
  header#topbar { padding-top: 16px; padding-bottom: 16px; }
  .lokasi-kiri { top: 92px; max-height: calc(100vh - 108px); }
}
/* Mode pindahkan kavling di siteplan */
.sp-pindah { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 10px;
  background: #1d2433; color: #fff; padding: 8px 12px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.25); font-size: 13px; max-width: calc(100% - 20px); }
.sp-pindah button { background: #fff; margin: 0; }
/* Halaman isi data mandiri karyawan (isi.html) */
main.isi-mandiri { max-width: 860px; }
.isi-mandiri .wajib { color: #b42318; }
.isi-mandiri .kurang { border-color: #b42318 !important; background: #fff6f5; }
.isi-mandiri .redup-tombol { opacity: .55; }
.isi-mandiri .isi-kirim { text-align: center; }
.isi-mandiri .isi-kirim button.utama { max-width: 320px; }
.isi-pesan { text-align: center; padding: 40px 20px; }
.hal-isi header#topbar .brand { color: #fff; }
/* Link isi data di detail karyawan */
.link-isi { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.link-isi input { flex: 1; min-width: 220px; margin: 0; font-size: 13px; }
.link-isi .kedua, .link-isi a { margin: 0; }
.link-isi button { width: auto; margin: 0; min-height: 38px; }

/* Baru booking (belum SLF & proses bank): warna kavling tetap, bingkai tebal biru / ungu (cash). Pembatalan. */
.kotak.bingkai-booking { box-shadow: inset 0 0 0 3px var(--booking); }
.kotak.bingkai-cash { box-shadow: inset 0 0 0 3px var(--cash); }
.titik.bingkai-booking { box-shadow: inset 0 0 0 2px var(--booking); }
.titik.bingkai-cash { box-shadow: inset 0 0 0 2px var(--cash); }
.kotak.s-kavling.bingkai-booking, .kotak.s-kavling.bingkai-cash, .kotak.s-proses.bingkai-booking, .kotak.s-proses.bingkai-cash { color: #1d2433; }
.tb-Dibatalkan { --tb: #b42318; }
.cek-surat { display: grid; gap: 6px; margin: 4px 0 6px; }
.cek-baris { display: flex; align-items: center; gap: 8px; font-weight: normal; margin: 0; flex-wrap: wrap; }
.cek-baris input { width: auto; margin: 0; }
button.merah-penuh { background: #d92d20; border-color: #d92d20; color: #fff; }

/* Laporan penjualan: kolom dua tingkat dan grafik per SPV / marketing (KPR biru, Tunai oranye). */
.tabel-dua th.grup { border-bottom: 1px solid #c9d3e4; }
.tabel-dua th.tengah { text-align: center; }
.beli-kpr { background: #2f80ed; } .beli-tunai { background: #e67e22; }
.grafik-orang { display: grid; gap: 14px; }
.go-baris { display: grid; gap: 4px; }
.go-nama { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.go-batang { display: grid; grid-template-columns: 62px 1fr minmax(120px, auto); align-items: center; gap: 8px; font-size: 13px; }
.go-jenis { color: #5b6476; }
.go-isi { display: flex; gap: 2px; height: 14px; background: #f1f3f7; border-radius: 4px; overflow: hidden; }
.go-isi i { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.go-isi i:first-child { border-radius: 4px 0 0 4px; } .go-isi i:only-child { border-radius: 4px; }
.go-angka { white-space: nowrap; font-weight: 600; }
.go-angka .muted { font-weight: normal; }
@media (max-width: 600px) { .go-batang { grid-template-columns: 52px 1fr; } .go-angka { grid-column: 2; } }

/* ---------- absensi ---------- */
.absen-kartu { max-width: 560px; }
.absen-dua { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.absen-jam { border: 1px solid var(--garis); border-radius: 10px; padding: 12px; text-align: center; }
.absen-jam .angka { font-size: 28px; font-weight: 700; margin: 2px 0; }
.absen-jam.sudah { border-color: #27ae60; background: #f0faf4; }
.absen-tombol { font-size: 18px; padding: 14px; }
.absen-selesai { color: #067647; font-weight: 600; text-align: center; }
.absen-ok { color: #067647; font-weight: 600; }
.absen-peta { width: 100%; height: 220px; border: 0; border-radius: 10px; margin-top: 10px; }
.absen-kamera { background: #111; border-radius: 12px; overflow: hidden; aspect-ratio: 3 / 4; max-height: 52vh; margin: 0 auto 8px; }
.absen-kamera video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; }
.absen-foto { width: 100%; max-width: 320px; border-radius: 10px; display: block; margin: 6px 0; background: #eee; min-height: 60px; }
.absen-detail { border-top: 1px solid var(--garis); padding-top: 8px; margin-top: 8px; }
.sub-judul { margin: 24px 0 10px; }
.tanda-curiga { color: #b42318; font-weight: 600; font-size: 12px; }
.tabel tr.baris-curiga td { background: #fff4f2; }
.titik-form { margin-top: 14px; border-top: 1px solid var(--garis); padding-top: 10px; }
#ab-saya tr[data-k], #ab-rekap tr[data-i] { cursor: pointer; }
.tanda-telat { color: #b54708; font-weight: 600; font-size: 12px; }
.chip-libur { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-libur span { background: #eef4ff; color: var(--utama); border-radius: 999px; padding: 3px 10px; font-size: 12px; }
.chip-libur span.hari-ini { background: var(--utama); color: #fff; }
.chip-libur span.muted { background: none; padding: 0; }
.st-libur { font-size: 12px; font-weight: 600; }
.st-Diajukan { color: #b54708; } .st-Disetujui { color: #067647; } .st-Ditolak { color: #b42318; }
.ajuan-libur { border-color: #f79009; margin-bottom: 10px; }
.kal-libur { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; margin: 8px 0; }
.kal-libur b { font-size: 12px; color: var(--muted); }
.hari-kal { display: block; margin: 0; cursor: pointer; }
.hari-kal input { position: absolute; opacity: 0; width: 0; }
.hari-kal span { display: block; padding: 9px 0; border: 1px solid var(--garis); border-radius: 8px; font-weight: 500; }
.hari-kal.minggu span { color: #b42318; }
.hari-kal input:checked + span { background: var(--utama); color: #fff; border-color: var(--utama); }
.hari-kal input:focus-visible + span { outline: 2px solid #f2c94c; }
.lencana-dl { display: inline-block; background: #fef0c7; color: #93370d; border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 600; }
.absen-dl { border: 1px solid #f79009; background: #fffaeb; border-radius: 10px; padding: 10px; margin-bottom: 10px; }

/* ---------- Rekrutmen & halaman publik di Tools ---------- */
.cek-baris { display: flex; gap: 8px; align-items: center; font-weight: normal; }
.cek-baris input { width: auto; }
.st-lm-Baru { background: #fff4d6; color: #8a5a00; } .st-lm-Diproses { background: #e3edff; color: #1d4ed8; }
.st-lm-Interview { background: #f1e8fd; color: #6b21a8; } .st-lm-Diterima { background: #e3f6ea; color: #067647; } .st-lm-Ditolak { background: #fde8e8; color: #b42318; }
button.kedua.lebar.merah { margin-top: 8px; }
.pub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 16px; }
.pub-grid label { margin-top: 10px; }
.pub-medsos td input { min-width: 150px; }
/* Tanda simpan di tombol */
button.proses { opacity: .85; cursor: progress; }
button.tersimpan, button.kedua.tersimpan, button.tersimpan:disabled { background: #067647 !important; border-color: #067647 !important; color: #fff !important; opacity: 1 !important; transition: background .2s; }
.putar { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: putar .7s linear infinite; }
@keyframes putar { to { transform: rotate(360deg); } }
label.tombol-file { display: inline-flex; align-items: center; cursor: pointer; margin: 0 8px 8px 0; font-weight: bold; background: #fff; color: var(--utama); border: 1px solid var(--utama); border-radius: 6px; padding: 8px 12px; }
label.tombol-file:hover { background: #eef2f8; }
.tombol-file.proses { opacity: .7; cursor: progress; }
.latar-atur { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.latar-pratinjau { aspect-ratio: 16 / 7; border-radius: 10px; background: linear-gradient(120deg, #14264a, var(--utama)) center / cover no-repeat; display: grid; place-items: center; color: #dbe3f1; font-size: 13px; padding: 10px; text-align: center; }
.br-foto { border: 1px dashed var(--garis); border-radius: 8px; min-height: 80px; display: grid; place-items: center; margin-bottom: 8px; overflow: hidden; }
.br-foto img { width: 100%; max-height: 220px; object-fit: cover; display: block; }
img.br-mini { width: 64px; height: 40px; object-fit: cover; border-radius: 4px; display: block; }
@media (max-width: 700px) { .latar-atur { grid-template-columns: 1fr; } }

.bod-lihat img { aspect-ratio: 3 / 4; object-fit: cover; max-width: 180px; }
img.bod-mini { width: 42px; height: 56px; object-fit: cover; }

.cek-bawahan { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 14px; padding: 8px 10px; border: 1px solid #e3e7ee; border-radius: 8px; }

.aju-bulan { margin-top: 12px; padding-top: 10px; border-top: 1px solid #eef0f4; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.chip-libur span.ditolak { text-decoration: line-through; opacity: .7; }
.cuti-sisa { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.cuti-sisa > div { display: flex; flex-direction: column; align-items: center; min-width: 90px; }
.cuti-sisa .angka { font-size: 34px; font-weight: 700; color: var(--utama); line-height: 1.1; }

details.rangkap summary { cursor: pointer; font-weight: 500; margin-bottom: 6px; }

.input-satuan { display: flex; align-items: center; gap: 8px; }
.input-satuan input { max-width: 120px; }
.input-satuan span { color: #667085; font-size: 13px; }

/* Motto panjang diperkecil supaya tidak menabrak logo dan menu */
nav a.ke-publik { font-size: 13px; opacity: .85; }
@media (max-width: 560px) { nav a.ke-publik { display: none; } }


/* Pilihan bentuk motto (Tools) dan gaya di bar biru */
.motto-gaya { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; margin: 6px 0 12px; }
.motto-gaya-pilih { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid #e3e7ee; border-radius: 10px; cursor: pointer; margin: 0; }
.motto-gaya-pilih:has(input:checked) { border-color: var(--utama); background: #f3f6fb; box-shadow: 0 0 0 2px var(--utama)22; }
.motto-gaya-nama { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.motto-gaya-nama input { width: auto; margin: 0; }
.contoh-bar { display: flex; justify-content: center; align-items: center; min-height: 64px; padding: 8px; border-radius: 8px; background: var(--utama); overflow: hidden; }

/* Pengaturan nama & logo (Tools) */
.brand-atur { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.brand-contoh { justify-content: flex-start; padding: 14px 16px; }
.brand-contoh-isi { display: flex; align-items: center; gap: 12px; color: #fff; font-size: 17px; }
.brand-contoh-isi img { height: 42px; width: auto; max-width: 180px; object-fit: contain; background: #fff; border-radius: 8px; padding: 3px 8px; }
@media (max-width: 700px) { .brand-atur { grid-template-columns: 1fr; } }
.warna-preset { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.warna-pilih { display: inline-flex; align-items: center; gap: 6px; width: auto; margin: 0; }
.warna-pilih span { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #0002; }
input[type=color] { height: 42px; padding: 3px; cursor: pointer; }
.mu-daftar { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.mu-baris { display: grid; grid-template-columns: auto minmax(120px, 1fr) minmax(200px, 300px) auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid #e3e7ee; border-radius: 10px; }
.mu-baris input { margin: 0; }
.mu-baris audio { width: 100%; height: 36px; }
.mu-no { width: 24px; height: 24px; border-radius: 50%; background: #eef2f8; display: grid; place-items: center; font-weight: 700; font-size: 12px; }
@media (max-width: 700px) { .mu-baris { grid-template-columns: auto 1fr; } .mu-baris audio, .mu-baris > .satu-baris { grid-column: 1 / -1; } }
.baris-wilayah { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.baris-wilayah:has(> .wil-prov), .baris-wilayah.tiga { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wil-bantu { gap: 8px; margin: 6px 0 10px; }
.wil-bantu select { margin: 0; font-size: .9em; }
@media (max-width: 600px) { .baris-wilayah, .baris-wilayah:has(> .wil-prov), .baris-wilayah.tiga { grid-template-columns: 1fr; } }

/* Huruf awal tiap kata kapital untuk judul, label, pilihan, tombol, menu (data isian tetap apa adanya) */
h1, h2, h3, h4, th, label, button, select, option, nav a, .menu-isi a, .menu-isi .link, .st, .lap-f > span, .tab, [data-tab], .kpi span, .kpi small, .chip, a.kedua, a.utama, .kartu-lokasi h3, .muted-judul {
  text-transform: capitalize;
}
label .muted, label .kecil, label .wajib, .cek-baris, .cek-bawahan label, .motto-gaya-pilih .contoh-bar, .brand-contoh-isi { text-transform: none; }
::placeholder { text-transform: none; }

/* Peta tunda: kotak ringan sebelum peta Google dimuat */
.peta-tunda { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  background: linear-gradient(135deg, #e8eef6, #f5f7fa); color: #4b5563; font: inherit; font-size: 13px; text-transform: none; }
.peta-tunda svg { width: 34px; height: 34px; color: var(--utama, #1f3864); }
.peta-tunda:hover { background: #e2e9f3; }

/* ===== Keuangan ===== */
.panel-box.lebar { width: min(980px, 100%); }
.keu-tab { flex-wrap: wrap; margin: 10px 0; }
.keu-tab a.tab { text-decoration: none; padding: 8px 12px; border-radius: 8px; font-size: 13px; }
.kanan { text-align: right !important; }
.tengah { text-align: center !important; }
table.tabel td.kanan { white-space: nowrap; font-variant-numeric: tabular-nums; }
.keu-angka { font-size: 20px !important; }
.keu-sub td { font-weight: 700; background: #f6f8fc; }
.keu-jml td { font-weight: 600; border-top: 1px solid #c9d2e3; }
.keu-hasil td { font-weight: 700; background: #eef2f8; }
.keu-total td { font-weight: 700; background: #e3e9f4; border-top: 2px solid var(--utama); }
.keu-isi { padding-left: 24px !important; }
.keu-kredit { padding-left: 28px !important; }
.keu-batal td { color: #9aa1ad; text-decoration: line-through; }
.keu-batal td .galat, .keu-batal td button { text-decoration: none; }
table.keu-jurnal tr.keu-awal td { border-top: 2px solid #d5dbe6; }
.keu-lr { max-width: 760px; }
.keu-dua { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.keu-grafik { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; height: 190px; align-items: end; }
.keu-kolom { display: flex; flex-direction: column; align-items: center; height: 100%; gap: 4px; font-size: 11px; color: var(--muted); }
.keu-batang { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; border-bottom: 1px solid var(--garis); }
.keu-batang i { width: 40%; border-radius: 3px 3px 0 0; min-height: 1px; }
.keu-p { background: #2e7d32; }
.keu-b { background: #d9822b; }
.lap-legenda i.keu-p, .lap-legenda i.keu-b { display: inline-block; }
.keu-hbar { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; margin: 6px 0; }
.keu-hbar div { background: #eef2f8; border-radius: 4px; height: 10px; overflow: hidden; }
.keu-hbar i { display: block; height: 100%; background: #d9822b; }
.keu-hbar b { white-space: nowrap; font-size: 12px; }
table.tabel-form .kanan { text-align: right; }
.keu-kertas table.lap td:last-child, .keu-kertas table.lap th:last-child { text-align: right; }
@media (max-width: 900px) { .keu-dua { grid-template-columns: 1fr; } }
.keu-tab a.tab.utama { background: var(--utama); color: #fff; border: 1px solid var(--utama); font-weight: 600; }

.pp-atur { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; margin-top: 12px; align-items: start; }
.pp-lihat { border-radius: 12px; padding: 16px; background: rgba(10, 18, 35, .72); display: flex; justify-content: center; }
.pp-lihat .popup-isi { transform: none; max-height: none; box-shadow: none; }
.pp-lihat .popup-teks b { font-size: 19px; }
.pp-lihat .popup-ikon { width: 56px; height: 56px; }
.pp-template { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-tpl { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px !important; font-size: 12px; }
.pp-tpl i { width: 16px; height: 16px; border-radius: 4px; background: var(--pp-latar); border: 3px solid var(--pp-aksen); }
@media (max-width: 640px) { .pp-atur { grid-template-columns: 1fr; } }

/* Menu berkelompok (anak cabang), tulisan kecil */
header#topbar .menu-isi { font-size: 13px; min-width: 230px; max-height: calc(100vh - 90px); overflow-y: auto; }
header#topbar .menu-isi a, header#topbar .menu-isi .link { font-size: 13px; padding: 7px 12px; }
.menu-grup summary { list-style: none; cursor: pointer; padding: 8px 12px; border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--utama);
  display: flex; justify-content: space-between; align-items: center; user-select: none; }
.menu-grup summary::-webkit-details-marker { display: none; }
.menu-grup summary::after { content: "▸"; font-size: 11px; color: var(--muted); transition: transform .15s; }
.menu-grup[open] summary::after { transform: rotate(90deg); }
.menu-grup summary:hover { background: #eef2f8; }
header#topbar .menu-grup a { display: block; padding: 6px 12px 6px 24px; font-size: 12.5px; }
.menu-grup[open] { background: #f8fafd; border-radius: 6px; padding-bottom: 4px; }

/* ===== Teknik ===== */
.tk-bar { background: #eef2f8; border-radius: 4px; height: 8px; overflow: hidden; margin-bottom: 2px; }
.tk-bar i { display: block; height: 100%; background: #2f6fb3; border-radius: 4px; }
.tk-bar.lewat i { background: #c0392b; }
.tk-bar.selesai i { background: #2e7d32; }
.tk-ren { background: #9fb4d0; }
.lap-legenda i.tk-ren { display: inline-block; }
.tk-grafik .keu-batang i { width: 28%; }
.st-tk { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 10px; background: #eef2f8; color: #3b4a5e; white-space: nowrap; }
.st-tk-draft, .st-tk-diajukan, .st-tk-menunggu { background: #fff4d6; color: #8a6100; }
.st-tk-disetujui, .st-tk-jadi-po, .st-tk-berjalan, .st-tk-aktif, .st-tk-sebagian { background: #e3eefc; color: #1d4f8a; }
.st-tk-selesai, .st-tk-diterima, .st-tk-lunas, .st-tk-ditutup { background: #e3f4e5; color: #1f6b25; }
.st-tk-batal, .st-tk-ditolak, .st-tk-arsip { background: #fde8e6; color: #9b2c22; }
.tk-suf { display: flex; align-items: stretch; }
.tk-suf input { flex: 1; min-width: 0; }
.tk-suf span { display: flex; align-items: center; padding: 0 10px; background: #f1f4f8; border: 1px solid var(--garis); border-left: 0; border-radius: 0 6px 6px 0; font-size: 13px; color: var(--muted); }
.hj-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
table.tk-rab input, table.tk-rab select { min-width: 70px; }
table.tk-rab td:nth-child(2) input { min-width: 180px; }
tr.tk-kurang td { background: #fff6f5; }
.tk-waspada { color: #a86b00; }

/* ===== Absen cepat di halaman depan (SQL 32) ===== */
.absen-cepat { background: #fff; border: 1px solid var(--garis); border-left: 4px solid var(--utama, #1f6b25); border-radius: 12px; padding: 12px 14px; margin: 0 0 16px; }
.absen-cepat .ac-atas { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.absen-cepat .ac-judul { font-weight: 600; font-size: 14px; }
.absen-cepat .ac-link { font-size: 13px; text-decoration: none; }
.absen-cepat .ac-isi { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.absen-cepat .ac-jam { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); }
.absen-cepat .ac-jam b { font-size: 22px; color: var(--teks, #222); font-variant-numeric: tabular-nums; }
.absen-cepat .ac-jam.sudah b { color: #1f6b25; }
.absen-cepat .ac-ket { color: var(--muted); font-size: 13px; margin-left: auto; }
.absen-cepat .ac-lengkap { color: #1f6b25; font-weight: 600; }
.absen-cepat .ac-tombol { margin-left: auto; width: auto; padding: 12px 22px; font-size: 16px; font-weight: 600; }
@media (max-width: 560px) { .absen-cepat .ac-tombol, .absen-cepat .ac-ket { margin-left: 0; width: 100%; } }
.ab-perlu-pilih { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.ab-perlu-pilih button { width: auto; }
tr.t-sembunyi td input:not([type=checkbox]), tr.t-sembunyi td select { color: #9aa3b1; background: #f4f6f9; }

/* ===== Pengajuan (SQL 33) ===== */
.aju-n { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: #c0392b; color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.aju-alur { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: -4px 0 10px; }
.aju-langkah { background: #eef2f8; border-radius: 10px; padding: 2px 8px; font-size: 12px; }
.aju-langkah i { font-style: normal; color: var(--muted); }
.aju-panah { color: var(--muted); }
.aju-lampiran { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.aju-file { background: #f1f4f8; border-radius: 6px; padding: 2px 4px 2px 8px; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.aju-file button { width: auto; padding: 0 6px; }
.aju-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 16px; margin-bottom: 8px; }
.aju-info > div { display: flex; flex-direction: column; }
.aju-tahap { list-style: none; padding: 0; margin: 0 0 12px; counter-reset: t; }
.aju-tahap li { position: relative; padding: 4px 0 8px 30px; display: flex; flex-direction: column; border-left: 2px solid #d5dbe6; margin-left: 10px; }
.aju-tahap li::before { counter-increment: t; content: counter(t); position: absolute; left: -11px; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #d5dbe6; color: #3b4a5e; font-size: 11px; text-align: center; line-height: 20px; }
.aju-tahap li.ok::before { content: "✓"; background: #2e7d32; color: #fff; }
.aju-tahap li.kini::before { background: #f2a516; color: #fff; }
.aju-tahap li.tolak::before { content: "✗"; background: #c0392b; color: #fff; }
.aju-tahap li.lewat::before { content: "–"; }
.aju-tahap li:last-child { border-left-color: transparent; }
.aju-putus { background: #fbfcfe; }
.aju-log { list-style: none; padding: 0; margin: 0 0 10px; font-size: 13px; }
.aju-log li { padding: 5px 0; border-bottom: 1px dashed #e3e7ee; }
.aju-cat { margin: 2px 0 0 0; padding: 4px 8px; background: #f6f8fb; border-radius: 6px; }
.aju-cepat a { color: inherit; }
.aju-cepat a b { color: #c0392b; }
tr.baris-klik { cursor: pointer; }
tr.baris-klik:hover td { background: #f6f8fb; }
.st-tk-dikembalikan, .st-tk-menunggu-pencairan { background: #fff4d6; color: #8a6100; }
.st-tk-dicairkan { background: #e3f4e5; color: #1f6b25; }
#fa-rincian td:first-child input { min-width: 170px; } #fa-rincian td:nth-child(4) input { min-width: 110px; }
#panel .wil-bantu { grid-template-columns: 1fr; }
.judul-contoh { background: #1f3864; color: #fff; border-radius: 10px; padding: 14px 18px; margin: 4px 0 12px; overflow-wrap: anywhere; }
.judul-contoh .muted { color: #c9d3e6; }
.judul-contoh div { font-size: clamp(22px, 4vw, 48px); font-weight: 700; line-height: 1.15; }
/* Gaji & slip gaji */
.cek-kol { width: 34px; text-align: center; }
.cek-kol input { width: auto; margin: 0; }
.gj-ringkas { margin: 10px 0; padding: 10px 14px; }
.gj-bersih { font-size: 1.15em; color: var(--utama, #1f3864); }
.gp-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
table.gj-info { width: 100%; font-size: 10pt; }
table.gj-info td { padding: 2px 4px; }
.gt-tabel select { min-width: 110px; margin: 0; padding: 6px 8px; }
.gt-tabel input[type=checkbox] { width: auto; margin: 0; }
.gt-tabel input[type=color] { width: 40px; height: 30px; padding: 0 2px; margin: 0; vertical-align: middle; }
.gt-contoh span { font-size: 15px; white-space: nowrap; }
.qr-low-poster { background: #f5f6f8; border: 1px solid var(--garis); border-radius: 10px; padding: 10px; margin: 8px 0 12px; text-align: center; }
.qr-low-poster img { width: 100%; max-width: 420px; aspect-ratio: 4 / 5; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.12); background: #fff; }
.qr-low-tombol { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.qr-low-tombol button, .qr-low-tombol a { width: 100%; margin: 0; text-align: center; }
.qr-low-tombol a { grid-column: 1 / -1; display: block; padding: 10px; text-decoration: none; }
.keu-beban { display: flex; flex-direction: column; gap: 2px; }
.keu-beban-tombol { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.keu-beban-tombol .tab, .keu-beban-tombol button { width: auto; margin: 0; text-decoration: none; }
.keu-beban-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.keu-beban-tombol a.tab { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; background: var(--utama); color: #fff; border: 1px solid var(--utama); }
.keu-beban { justify-content: flex-start; }
.keu-beban-tombol { margin-top: auto; padding-top: 10px; }
.absen-cepat .ac-kunci { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.absen-cepat .ac-kunci .ac-tombol { margin-left: 0; opacity: .55; cursor: not-allowed; }
.absen-cepat .ac-kunci .ac-ket { margin-left: 0; }
@media (max-width: 560px) { .absen-cepat .ac-kunci { margin-left: 0; width: 100%; align-items: stretch; text-align: center; } }
.absen-cepat .ac-tombol.ac-terkunci { background: #8a94a6; border-color: #8a94a6; }
.absen-cepat .ac-tombol.ac-selesai { background: #1f6b25; border-color: #1f6b25; }
.absen-cepat .ac-peringatan { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: #fff6e0; border: 1px solid #f0c36d; color: #6b4a00; font-size: 14px; line-height: 1.45; }
.absen-cepat .ac-peringatan.kedip { animation: ac-kedip .6s ease 2; }
@keyframes ac-kedip { 50% { background: #ffe3a3; } }
.ins-sel { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; min-width: 170px; }
.ins-sel .ins-n { white-space: nowrap; }
.ins-sel .ins-aksi, .ins-sel .ins-edit { display: inline-flex; gap: 4px; align-items: center; }
.ins-sel .ins-aksi button, .ins-sel .ins-edit button { width: auto; margin: 0; padding: 4px 10px; }
.ins-sel .ins-edit input { width: 130px; margin: 0; padding: 6px 8px; }
.ins-detail .ins-sel { justify-content: flex-start; font-size: 18px; }
.ins-lama { margin-top: 10px; }
@media (max-width: 560px) {
  .tabel-insentif thead { display: none; }
  .tabel-insentif tr { display: block; padding: 10px 4px; border-bottom: 1px solid var(--garis); }
  .tabel-insentif td { display: inline; border: 0 !important; padding: 0 6px 0 0 !important; background: none !important; }
  .tabel-insentif td:nth-child(1), .tabel-insentif td:nth-child(4) { display: none; }
  .tabel-insentif td:nth-child(3), .tabel-insentif td:nth-child(5) { color: var(--muted); font-size: 13px; }
  .tabel-insentif td.kanan { display: block; margin-top: 8px; }
  .tabel-insentif .ins-sel { justify-content: space-between; }
}
.kunci-daftar { display: grid; gap: 6px; margin: 8px 0 10px; }
.kunci-info { background: #fff7e6; border-color: #f5c66b; color: #8a5300; margin-bottom: 12px; }
.kunci-daftar .cek-super { margin: 0; align-items: flex-start; }
.tk-rab-pajak { max-width: 640px; } .tk-rab-pajak input { max-width: 130px; } .tk-rab-pajak td:first-child { min-width: 90px; }
.peran-latihan { display: grid; gap: 8px; }
.peran-latihan button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 12px; height: auto; }
#pita-latihan button { margin-left: 6px; padding: 2px 8px; }
.peran-latihan button span { text-transform: none; font-weight: 400; }
/* Lokasi komersil: kavling abu-abu, SLF pink, BAST hijau */
body.lok-komersil { --kavling: #9ca3af; --ready: #ec4899; }
.s-bast { background: #27ae60; }
.kotak.s-bast { color: #fff; }
.pajak-kons { display: grid; grid-template-columns: auto 1fr 1fr auto; gap: 6px 8px; align-items: center; margin: 4px 0 8px; }
.pajak-kons label { margin: 0; display: flex; gap: 6px; align-items: center; }
.pajak-kons label input { width: auto; }
.pajak-kons input[type=text], .pajak-kons input:not([type]) { margin: 0; }
.pajak-kons .kanan { text-align: right; white-space: nowrap; }
.kotak-ringkas { background: #f5f8fd; border: 1px solid var(--garis); border-radius: 8px; padding: 8px 10px; margin: 4px 0 10px; }
#bar-kembali { max-width: 1200px; margin: 10px auto -4px; padding: 0 16px; }
#bar-kembali button { width: auto; }
#bar-kembali.lebar { max-width: none; padding: 0 20px; }

/* ===== Target, tim & leads (SQL 45) ===== */
.tm-sel { min-width: 96px; }
.tm-sel b { font-size: 15px; }
.tm-besar b { font-size: 24px; }
.tm-p { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 10px; background: #fde68a; color: #92400e; }
.tm-p.ok { background: #bbf7d0; color: #166534; }
.tm-bar { height: 6px; background: #e5e7eb; border-radius: 4px; margin-top: 4px; overflow: hidden; }
.tm-bar i { display: block; height: 100%; background: #f59e0b; border-radius: 4px; }
.tm-bar i.ok { background: #16a34a; }
.tm-tw { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 8px; }
.tm-tw-kartu { border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.tm-tw-baris { display: flex; flex-direction: column; }
.tm-st { font-size: 12px; font-weight: 600; }
.tm-st.ok { color: #166534; } .tm-st.gagal { color: #b91c1c; } .tm-st.jalan { color: #b45309; }
.tm-kejar { font-size: 11px; color: #b45309; margin-top: 3px; }
.tm-kejar.gagal { color: #b91c1c; }
.tm-tabel td { vertical-align: top; }
.tm-lvl0 td { background: #f8fafc; }
.tm-saya td:first-child { box-shadow: inset 3px 0 0 var(--utama, #1f3864); }
.tm-peran { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 10px; white-space: nowrap; }
.tm-peran.p-SPV { background: #dbeafe; color: #1e40af; } .tm-peran.p-TL { background: #ede9fe; color: #5b21b6; } .tm-peran.p-MKT { background: #f1f5f9; color: #334155; }
.tm-daftar { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 12px; }
.tm-pilih { align-items: flex-start; }
.tm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ld-st { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 10px; background: #f1f5f9; color: #334155; }
.ld-Hot { background: #fee2e2; color: #b91c1c; } .ld-Warm { background: #ffedd5; color: #c2410c; } .ld-Cold { background: #e0f2fe; color: #0369a1; }
.ld-Booking { background: #dcfce7; color: #166534; } .ld-Batal { background: #e5e7eb; color: #6b7280; }
.ld-telat { color: #b91c1c; font-weight: 600; }
.ld-awas .angka { color: #b91c1c; }
.fu-leads { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; background: #fff7ed; border: 1px solid #fdba74; border-left: 4px solid #f97316;
  border-radius: 10px; padding: 10px 12px; margin: 10px 0; font-size: 14px; }
.fu-leads a { margin-left: auto; font-weight: 600; }
.merah-teks { color: #b91c1c; }
@media (prefers-color-scheme: dark) { .fu-leads { background: #431407; border-color: #9a3412; } .tm-lvl0 td { background: transparent; } }
.aj-aktif { white-space: nowrap; margin: 0; }
/* Sertifikat & NIB kavling (SQL 46) */
.nib-angka { letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.nib-ok { color: #166534; font-size: 13px; }
.nib-belum { color: #b45309; font-size: 13px; }
.nib-form { margin: 8px 0; }
.ld-centang { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 2px 10px; margin: 4px 0 8px; }
.ld-centang .cek-baris { margin: 0; }
.ld-riwayat { margin: 8px 0; font-size: 13px; } .ld-riwayat ul { margin: 6px 0; padding-left: 18px; }
.login-admin { border-top: 4px solid var(--utama, #1f3864); }
.ks-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.ks-tools span { min-width: 96px; padding: 8px 12px; border: 1px solid var(--garis); border-radius: 10px; font-size: 12.5px; color: var(--muted); }
.ks-tools span b { display: block; font-size: 18px; color: var(--teks, #1f2328); }
/* Model kop surat (Tools > PT & kode > Ubah > Model kop) */
.kop-m { display: flex; align-items: center; gap: 16px; padding-bottom: 8px; }
.kop-m img.kop-logo { width: auto; }
.kop-m .teks-kop { flex: 1; text-align: center; }
.kop-m.model-tengah { flex-direction: column; gap: 6px; } .kop-m.model-tengah .teks-kop { width: 100%; }
.kop-m.model-kiri .teks-kop, .kop-m.model-kanan .teks-kop { text-align: left; }
.kop-m.model-modern { gap: 18px; } .kop-m .km-nama { flex: 1; } .kop-m .km-nama > div:first-child { max-width: 300px; }
.kop-m .km-batas { width: 6px; align-self: stretch; } .kop-m .km-alamat { text-align: right; line-height: 1.6; }
.kop-garis { margin: 0 0 18px; } .kop-garis.ganda { border-bottom: 3px double; } .kop-garis.tebal { border-bottom: 3px solid; }
.kop-garis.tipis { border-bottom: 1px solid; } .kop-garis.dua { height: 4px; margin: 4px 0 22px; }
.kop-model { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 10px; }
.kop-model label { border: 1px solid var(--garis); border-radius: 8px; padding: 8px 10px; cursor: pointer; font-size: 13px; }
.kop-model label:has(input:checked) { border-color: var(--utama, #1f3864); box-shadow: 0 0 0 2px rgba(31,56,100,.15); }
.kop-model small { display: block; color: var(--muted); font-size: 11.5px; }
.kop-baris td, .kop-baris th { padding: 4px 6px; white-space: nowrap; }
.kop-baris input[type=number] { width: 70px; } .kop-baris select { min-width: 140px; }
.kop-baris input[type=color] { width: 42px; height: 30px; padding: 1px; }
.kop-lihat { background: #fff; color: #000; border: 1px solid var(--garis); border-radius: 8px; padding: 14px; margin: 10px 0; overflow-x: auto; font-family: Arial, Helvetica, sans-serif; }
.kop-lihat { overflow: hidden; } .kop-skala { width: 680px; transform-origin: top left; }
.kop-atur summary { cursor: pointer; margin: 12px 0 8px; }
.kop-model label { display: block; text-transform: none; font-weight: 400; margin: 0; }
.kop-model input[type=radio], .kop-baris input[type=checkbox] { width: auto; margin: 0 4px 0 0; display: inline; }
.kop-atur input[type=color] { width: 56px; height: 34px; padding: 2px; }
.kop-atur .baris-kecil { gap: 6px; }
.menu-sub { display: block; padding: 8px 12px 2px 24px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.lencana-pic { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #e0f2fe; color: #075985; font-size: 11.5px; font-weight: 600; }
#menu-isi a.menu-mati, header#topbar .menu-grup a.menu-mati { color: #9aa3ae; cursor: not-allowed; }
#menu-isi a.menu-mati::after { content: " 🔒"; font-size: 10px; }
.menu-grup.divisi-mati > summary { color: #9aa3ae; }
.divisi-mati-info { text-align: center; padding: 28px 18px; }
.divisi-mati-info .dm-ikon { font-size: 34px; } .divisi-mati-info h2 { margin: 6px 0; }