:root{
  --kertas:#fff; --latar:#F3F5FA; --panel:#EEF1F8; --garis:#DCE1EE; --garis2:#EDF0F6;
  --tinta:#1B3FA0; --tinta-tua:#0F1E4A; --teks:#26304A; --redup:#5B6583;
  --stempel:#D7263D; --pink:#F5CCD5; --kuning:#F8E7A3; --hijau:#137A47;
  --display:'Bricolage Grotesque', system-ui, sans-serif;
  --badan:'Plus Jakarta Sans', system-ui, sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--latar); color:var(--teks); font:400 14.5px/1.5 var(--badan)}
h1,h2,h3{font-family:var(--display); color:var(--tinta-tua); margin:0; letter-spacing:-.01em; line-height:1.2}
h2{font-size:17px}
h3{font:700 13px/1.3 var(--badan); color:var(--redup); margin:20px 0 8px}
a{color:var(--tinta)}
button,input,select,textarea{font:inherit; color:inherit}
svg{display:block}
:focus-visible{outline:3px solid var(--tinta); outline-offset:2px}
[hidden]{display:none!important}
noscript{display:block; padding:40px 20px; text-align:center}

/* demo ribbon */
.pita{background:var(--kuning); color:var(--tinta-tua); font-size:13px}
.pita-isi{display:flex; align-items:center; gap:6px 14px; padding:6px 16px; flex-wrap:wrap; min-height:40px}
.pita a,.pita button{color:var(--tinta-tua); font-weight:700}
.pita-df{display:inline-flex; align-items:center; gap:3px; text-decoration:none}
.pita-df svg{width:16px; height:16px}
.pita button{background:none; border:0; padding:0; text-decoration:underline; cursor:pointer; font-size:13px}
.pita .sp{flex:1}
.pita-bahasa{text-decoration:none; border:1.5px solid rgba(15,30,74,.3); border-radius:99px; padding:2px 10px}
.pita-wa{background:var(--tinta-tua); color:#fff!important; text-decoration:none; border-radius:99px; padding:5px 12px}
@media (max-width:760px){ .pita-teks{display:none} }

/* frame */
.kerangka{display:grid; grid-template-columns:240px minmax(0,1fr); min-height:calc(100vh - 40px)}
.samping{background:var(--tinta-tua); color:#D5DCF0; display:flex; flex-direction:column; padding:16px 12px; position:sticky; top:0; height:100vh; overflow:auto}
.usaha{display:flex; align-items:center; gap:10px; padding:4px 6px 16px; border-bottom:1px solid rgba(255,255,255,.1)}
.usaha b{display:block; color:#fff; font:800 15px/1.2 var(--display)}
.usaha small{font-size:11.5px; color:#9FACD0}
.logo{display:inline-flex; width:34px; height:34px; flex:none}
.logo svg{width:100%; height:100%}
.pengguna{display:flex; align-items:center; gap:10px; margin:14px 0; padding:10px; background:rgba(255,255,255,.06); border-radius:12px}
.pengguna b{display:block; color:#fff; font-size:13.5px; line-height:1.25}
.pengguna small{font-size:12px; color:#9FACD0}
.avatar{display:inline-flex; align-items:center; justify-content:center; flex:none; width:36px; height:36px; border-radius:50%; background:var(--panel); color:var(--tinta); font-weight:800; font-size:13px}
.samping .avatar{background:var(--kuning); color:var(--tinta-tua)}
.samping nav{display:grid; gap:2px}
.samping nav a{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; color:#D5DCF0; text-decoration:none; font-weight:600; font-size:14px}
.samping nav a:hover{background:rgba(255,255,255,.07); color:#fff}
.samping nav a.aktif{background:#fff; color:var(--tinta-tua)}
.samping nav svg{width:19px; height:19px; flex:none}
.samping nav a span{flex:1}
.samping nav a span.lencana{flex:none}
.lencana{min-width:20px; height:20px; padding:0 6px; border-radius:99px; background:var(--stempel); color:#fff; font-size:11px; font-weight:800; display:inline-flex; align-items:center; justify-content:center}
.samping-bawah{margin-top:auto; padding-top:12px; border-top:1px solid rgba(255,255,255,.1)}
.samping-bawah button{display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border:0; border-radius:10px; background:none; color:#D5DCF0; font-weight:600; cursor:pointer; text-align:left}
.samping-bawah button:hover{background:rgba(255,255,255,.07)}
.samping-bawah svg{width:19px; height:19px}
.utama{min-width:0; display:flex; flex-direction:column}
.atas{display:flex; align-items:center; gap:12px; padding:14px 24px; background:var(--kertas); border-bottom:1px solid var(--garis); position:sticky; top:0; z-index:20}
.atas h1{font-size:20px}
.atas .sp{flex:1}
.jam-atas{color:var(--redup); font-size:13px; white-space:nowrap}
.menu-btn{display:none; border:0; background:none; padding:6px; margin:-6px 0 -6px -6px; cursor:pointer; color:var(--tinta-tua)}
.menu-btn svg{width:24px; height:24px}
.isi{padding:20px 24px 40px; display:grid; gap:16px; align-content:start}
.tirai{display:none}
@media (max-width:900px){
  .kerangka{grid-template-columns:1fr}
  .samping{position:fixed; inset:0 auto 0 0; width:272px; z-index:50; transform:translateX(-102%); transition:transform .22s ease}
  .menu-buka .samping{transform:none}
  .menu-buka .tirai{display:block; position:fixed; inset:0; background:rgba(15,30,74,.45); z-index:40}
  .menu-btn{display:inline-flex}
  .atas{padding:10px 16px}
  .atas h1{font-size:17px}
  .isi{padding:14px 12px 32px; gap:12px}
  .jam-atas{display:none}
}

/* building blocks */
.kartu{background:var(--kertas); border:1px solid var(--garis); border-radius:14px; padding:16px; min-width:0}
.kartu-kepala{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap}
.kartu-kepala small,.blok{display:block; color:var(--redup); font-size:12.5px; font-weight:500}
.dua-kolom{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start}
.dua-kolom.lebar-kiri{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.tiga-kolom{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:start}
@media (max-width:1100px){ .tiga-kolom{grid-template-columns:1fr 1fr} }
@media (max-width:820px){ .dua-kolom,.dua-kolom.lebar-kiri,.tiga-kolom{grid-template-columns:1fr} }
.jarak{margin-top:18px}
.jarak-atas{margin-top:10px}
.ket{color:var(--redup); font-size:13px; font-weight:500; margin:0}
.kosong{color:var(--redup); font-size:14px; text-align:center; padding:18px 8px; margin:0; list-style:none}
.kosong-besar{text-align:center; padding:36px 18px; color:var(--redup)}
.kosong-besar svg{width:40px; height:40px; margin:0 auto 10px; color:var(--tinta)}
.kosong-besar p{max-width:44ch; margin:6px auto 0}
.link{display:inline-block; margin-top:10px; font-weight:700; font-size:13.5px}
.lbl{display:block; font-size:12px; font-weight:700; color:var(--redup)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:0 15px; border-radius:10px; border:1.5px solid var(--tinta); background:var(--tinta); color:#fff; font-weight:700; font-size:14px; cursor:pointer; text-decoration:none; white-space:nowrap}
.btn:hover{background:var(--tinta-tua); border-color:var(--tinta-tua)}
.btn svg{width:17px; height:17px; flex:none}
.btn.alt{background:#fff; color:var(--tinta)}
.btn.alt:hover{background:var(--panel)}
.btn.kecil{min-height:32px; padding:0 11px; font-size:13px; border-radius:8px}
.btn.penuh{width:100%}
.btn.besar{min-height:48px; font-size:15px}
.btn:disabled{opacity:.4; cursor:not-allowed}
.ikon-btn{display:inline-flex; align-items:center; justify-content:center; width:36px; height:40px; border:1.5px solid var(--garis); border-radius:10px; background:#fff; color:var(--redup); cursor:pointer; flex:none}
.ikon-btn:hover{border-color:var(--stempel); color:var(--stempel)}
.ikon-btn svg{width:16px; height:16px}

.field{display:grid; gap:5px; margin-bottom:12px}
.field label,.field .label,legend{font-size:13px; font-weight:700; color:var(--tinta-tua)}
input,select,textarea{border:1.5px solid var(--garis); border-radius:10px; padding:8px 11px; background:#fff; min-height:40px; width:100%}
textarea{resize:vertical; min-height:62px}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--tinta)}
input[type=checkbox],input[type=radio]{width:auto; min-height:0; accent-color:var(--tinta); margin:0}
.dua{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width:480px){ .dua{grid-template-columns:1fr} }
.cari{display:flex; align-items:center; gap:8px; border:1.5px solid var(--garis); border-radius:10px; padding:0 11px; background:#fff; margin-bottom:10px}
.cari:focus-within{border-color:var(--tinta)}
.cari svg{width:18px; height:18px; color:var(--redup); flex:none}
.cari input{border:0; padding:8px 0; min-height:40px}
.cari input:focus{outline:none}
.cari.kecil{margin:4px 0 8px}

.chip{display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:99px; font-size:12px; font-weight:700; background:var(--panel); color:var(--tinta); white-space:nowrap}
.chip.kuning{background:#FCF0C4; color:#6F5200}
.chip.pink{background:#FBE1E5; color:#A3172B}
.chip.hijau{background:#DDF2E6; color:var(--hijau)}
.chip.abu{background:#ECEEF3; color:#4F5874}
.chip.merah{background:var(--stempel); color:#fff}
.chip.tinta{background:var(--tinta); color:#fff}
.chip.biru{background:#E3EAFB; color:var(--tinta)}
.chip.ungu{background:#EDE6FA; color:#5B3A9E}
.chip button{display:inline-flex; border:0; background:none; color:inherit; padding:0; margin-right:-3px; cursor:pointer}
.chip button svg{width:13px; height:13px}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 8px}

.daftar{list-style:none; margin:0; padding:0}
.daftar > li{border-bottom:1px solid var(--garis2)}
.daftar > li:last-child{border-bottom:0}
.baris{display:flex; align-items:center; gap:12px; padding:10px 4px; text-decoration:none; color:inherit}
a.baris{border-radius:10px}
a.baris:hover{background:var(--latar)}
a.baris.aktif{background:#EEF2FC}
.baris-isi{flex:1; min-width:0}
.baris-isi b{display:block; color:var(--tinta-tua); font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.baris-isi small{display:block; color:var(--redup); font-size:12.5px}
.no{font:800 15px/1 var(--display); color:var(--tinta-tua); font-variant-numeric:tabular-nums; min-width:52px}
.tunggu{font-size:12.5px; color:var(--redup); white-space:nowrap}
@media (max-width:600px){
  .antrian .baris{flex-wrap:wrap; row-gap:6px}
  .antrian .baris-isi{flex-basis:calc(100% - 64px)}
  .antrian .tunggu{margin-left:64px}
}

.gulir-x{overflow-x:auto; -webkit-overflow-scrolling:touch}
.tabel{width:100%; border-collapse:collapse; font-size:13.5px}
.tabel th{text-align:left; font-size:12px; color:var(--redup); font-weight:700; padding:8px 10px; border-bottom:1.5px solid var(--garis); white-space:nowrap}
.tabel td{padding:9px 10px; border-bottom:1px solid var(--garis2); vertical-align:middle}
.tabel tr:last-child td{border-bottom:0}
.tabel tr.klik{cursor:pointer}
.tabel tr.klik:hover td{background:var(--latar)}
.tabel td a{text-decoration:none}
.tabel.ringkas td{padding:7px 4px}
.kanan{text-align:right!important}
.angka{font-variant-numeric:tabular-nums}
.tabel td.angka{white-space:nowrap}

.kpi-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px}
.kpi-grid.dua{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1000px){ .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:420px){ .kpi-grid.dua{grid-template-columns:1fr} }
.kpi{background:var(--kertas); border:1px solid var(--garis); border-radius:14px; padding:14px 16px; min-width:0}
.kpi span{display:block; font-size:12.5px; color:var(--redup); font-weight:600}
.kpi b{display:block; font:800 clamp(17px,1.9vw,23px)/1.25 var(--display); color:var(--tinta-tua); margin-top:4px; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kpi small{display:block; font-size:12px; color:var(--redup); margin-top:2px}
.kpi.awas b{color:var(--stempel)}

.alat{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.tabs{display:inline-flex; flex-wrap:wrap; background:#fff; border:1px solid var(--garis); border-radius:12px; padding:4px; gap:4px; justify-self:start}
.tabs button{border:0; background:none; padding:7px 12px; border-radius:9px; font-weight:600; font-size:13.5px; color:var(--redup); cursor:pointer}
.tabs button:hover{color:var(--tinta-tua)}
.tabs button[aria-pressed=true]{background:var(--tinta-tua); color:#fff}
.angka-kecil{opacity:.7; font-weight:700; margin-left:6px}

.poli-baris{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--garis2)}
.poli-baris:last-of-type{border-bottom:0}
.poli-baris b{color:var(--tinta-tua)}
.poli-baris small{display:block; color:var(--redup); font-size:12.5px}
.poli-angka{display:flex; gap:16px; text-align:right}
.poli-angka small{display:block; font-size:11.5px; color:var(--redup)}
.poli-angka b{font:800 18px/1.1 var(--display); font-variant-numeric:tabular-nums}


/* shared pieces */
.statistik{display:flex; gap:8px; margin:0 0 12px}
.statistik div{flex:1; background:var(--latar); border-radius:10px; padding:8px 10px; min-width:0}
.statistik b{display:block; font:800 20px/1.1 var(--display); color:var(--tinta-tua)}
.statistik span{font-size:12px; color:var(--redup)}
.statistik.lebar{margin:0}
.statistik.lebar div{background:var(--kertas); border:1px solid var(--garis); border-radius:14px; padding:12px 14px}
@media (max-width:700px){ .statistik.lebar{flex-wrap:wrap} .statistik.lebar div{flex-basis:calc(50% - 4px)} }
.cek{display:flex; gap:8px; align-items:center; font-size:13.5px; margin:6px 0 10px; cursor:pointer}
.no-besar{font:800 30px/1 var(--display); color:var(--tinta); letter-spacing:-.02em}
details.kartu summary{cursor:pointer; font-weight:700; color:var(--tinta-tua)}
.merah{color:#A3172B}
.btn.merah{background:var(--stempel); border-color:var(--stempel)}
.btn.merah:hover{background:#B01D31; border-color:#B01D31}
.info{display:flex; align-items:flex-start; gap:8px; background:#FCF0C4; color:#5C4300; border-radius:10px; padding:8px 12px; margin:10px 0 0; font-size:13.5px; text-align:left}
.info svg{width:17px; height:17px; flex:none; margin-top:1px}
.catatan-kecil{color:#7A5A00!important}
.samping-bawah a{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; color:#D5DCF0; text-decoration:none; font-weight:600}
.samping-bawah a:hover{background:rgba(255,255,255,.07)}
.samping-bawah a svg{width:19px; height:19px}


/* sign in */
.masuk{max-width:1080px; margin:0 auto; padding:40px 20px 56px}
.masuk-kepala{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.masuk-kepala .logo{width:52px; height:52px}
.masuk-kepala h1{font-size:clamp(28px,4vw,42px); letter-spacing:-.025em}
.masuk-kepala p{flex-basis:100%; margin:6px 0 0; color:var(--redup); max-width:62ch; font-size:15.5px}
.masuk-ajak{margin:28px 0 12px; font-weight:700; color:var(--tinta-tua)}
.peran-grid{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; align-items:stretch}
@media (max-width:1040px){ .peran-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .peran-grid{grid-template-columns:1fr} }
.peran{display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left; background:#fff; border:1.5px solid var(--garis); border-radius:16px; padding:16px; cursor:pointer; color:inherit; font:inherit}
div.peran{cursor:default}
button.peran:hover{border-color:var(--tinta)}
.peran-ikon{display:inline-flex; width:42px; height:42px; border-radius:12px; background:var(--panel); color:var(--tinta); align-items:center; justify-content:center}
.peran-ikon svg{width:22px; height:22px}
.peran b{font:800 17px/1.2 var(--display); color:var(--tinta-tua)}
.peran small{color:var(--redup); font-size:13px; flex:1}
.peran-masuk{font-weight:700; color:var(--tinta); font-size:13.5px}
.masuk-lain{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px}
@media (max-width:640px){ .masuk-lain{grid-template-columns:1fr} }
.kartu-lain{display:flex; gap:14px; align-items:center; background:var(--tinta-tua); color:#D5DCF0; border-radius:16px; padding:16px 18px; text-decoration:none}
.kartu-lain:hover{background:#17295e}
.kartu-lain svg{width:28px; height:28px; color:var(--kuning); flex:none}
.kartu-lain b{display:block; color:#fff; font:800 16px/1.2 var(--display)}
.kartu-lain small{font-size:13px}
.masuk-catatan{margin:18px 0 0; color:var(--redup); font-size:13.5px}

/* dialogs, toast, slips */
dialog{border:0; border-radius:16px; padding:22px; width:min(480px, calc(100% - 24px)); max-height:calc(100% - 24px); box-shadow:0 30px 80px -20px rgba(15,30,74,.5); color:var(--teks)}
dialog::backdrop{background:rgba(15,30,74,.45)}
dialog h2{font-size:20px; margin-bottom:14px}
.dialog-aksi{display:flex; justify-content:flex-end; gap:8px; margin-top:8px; flex-wrap:wrap}
.tamu-mini{display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--latar); border-radius:12px; padding:10px 12px; margin-bottom:14px}
.tamu-mini > div{flex:1; min-width:0}
.tamu-mini b{display:block; color:var(--tinta-tua)}
.tamu-mini small{color:var(--redup); font-size:12.5px}
.toast{position:fixed; left:50%; bottom:22px; transform:translate(-50%,16px); background:var(--tinta-tua); color:#fff; padding:12px 18px; border-radius:12px; font-weight:600; font-size:14px; box-shadow:0 14px 30px -12px rgba(15,30,74,.55); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:100; width:max-content; max-width:calc(100% - 32px); text-align:center}
.toast.on{opacity:1; transform:translate(-50%,0)}

/* details */
.dl{display:grid; gap:8px; margin:14px 0 0; text-align:left}
.dl div{display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--garis2); padding-bottom:8px; font-size:13.5px}
.dl dt{color:var(--redup)}
.dl dd{margin:0; font-weight:600; text-align:right}
.kembali-link{display:inline-flex; align-items:center; gap:4px; font-weight:700; text-decoration:none; font-size:14px; width:max-content}
.kembali-link svg{width:18px; height:18px}

/* charts */
.grafik{margin:12px 0 0}
.batang{display:flex; align-items:flex-end; gap:4px; height:150px; border-bottom:1px solid var(--garis)}
.batang .k{flex:1; height:100%; display:flex; align-items:flex-end}
.batang i{display:block; width:100%; height:var(--h); min-height:2px; background:#C9D3EE; border-radius:4px 4px 0 0}
.batang .k:hover i{background:#9FB2E2}
.batang .k.sorot i{background:var(--tinta)}
.label-batang{display:flex; gap:4px; margin-top:5px}
.label-batang span{flex:1; text-align:center; font-size:11px; color:var(--redup); font-variant-numeric:tabular-nums}
.grafik figcaption{margin-top:8px; font-size:13px; color:var(--redup)}
.grafik figcaption b{color:var(--tinta-tua)}
.peringkat{list-style:none; margin:12px 0 0; padding:0; display:grid; gap:10px}
.peringkat li{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 10px; font-size:13.5px}
.peringkat b{font-variant-numeric:tabular-nums; color:var(--tinta-tua)}
.peringkat i{grid-column:1 / -1; height:6px; border-radius:99px; background:var(--panel); position:relative; overflow:hidden}
.peringkat i::after{content:""; position:absolute; inset:0 auto 0 0; width:var(--w); background:var(--tinta); border-radius:99px}

/* settings */
.tarif-baris{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--garis2); font-size:14px}
.input-rp{display:flex; align-items:center; gap:6px; border:1.5px solid var(--garis); border-radius:10px; padding-left:10px; background:#fff; width:160px; flex:none}
.input-rp:focus-within{border-color:var(--tinta)}
.input-rp small{color:var(--redup)}
.input-rp input{border:0; text-align:right}
.input-rp input:focus{outline:none}
.akses th,.akses td{text-align:center}
.akses th:first-child,.akses td:first-child{text-align:left}
.akses svg{width:18px; height:18px; color:var(--hijau); margin:0 auto}

/* highlight card */
.kartu.sorot{background:var(--tinta-tua); color:#D5DCF0; border-color:var(--tinta-tua)}
.kartu.sorot h2{color:#fff; margin:10px 0 6px}
.kartu.sorot p{margin:0 0 14px}
.kartu.sorot .btn{background:#fff; color:var(--tinta-tua); border-color:#fff}
.sorot-ikon svg{width:30px; height:30px; color:var(--kuning)}


/* staff app */
.hp-halaman{max-width:1000px; margin:0 auto; padding:32px 20px 56px; display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:40px; align-items:center}
@media (max-width:820px){ .hp-halaman{grid-template-columns:1fr; gap:24px} }
.hp-teks h1{font-size:clamp(28px,4vw,40px); margin:14px 0 10px; letter-spacing:-.02em}
.hp-teks p{color:var(--redup); font-size:15.5px; max-width:48ch}
.hp-langkah{padding-left:20px; display:grid; gap:8px; margin:0 0 18px}
.hp{width:300px; margin:0 auto; background:var(--tinta-tua); border-radius:42px; padding:11px; box-shadow:0 30px 60px -30px rgba(15,30,74,.6)}
@media (max-width:360px){ .hp{width:100%} }
.hp-layar{background:#F4F6FB; border-radius:32px; overflow:hidden; min-height:560px}
.hp-atas{background:var(--tinta); color:#fff; padding:26px 18px 18px}
.hp-atas small{opacity:.8; font-size:12px}
.hp-atas b{display:block; font:800 21px/1.2 var(--display)}
.hp-isi{padding:14px; display:grid; gap:10px; align-content:start}
.hp-isi .field{margin-bottom:0}
.hp-btn{width:100%; min-height:50px; border:0; border-radius:99px; background:var(--tinta); color:#fff; font-weight:800; font-size:15px; cursor:pointer}
.hp-btn:hover{background:var(--tinta-tua)}
.hp-kartu{background:#fff; border:1px solid var(--garis); border-radius:14px; padding:12px; font-size:13.5px}
.hp-kartu > b{display:block; color:var(--tinta-tua); margin-bottom:6px}
.hp-baris{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:6px 0; border-top:1px solid var(--garis2)}
.hp-pilih{width:100%; text-align:left; background:#fff; border:1.5px solid var(--garis); border-radius:14px; padding:12px; cursor:pointer; display:grid; gap:2px}
.hp-pilih:hover{border-color:var(--tinta)}
.hp-pilih b{color:var(--tinta-tua)}
.hp-pilih small{color:var(--redup); font-size:12.5px}
.hp-kode{font:800 30px/1.1 var(--display); color:var(--tinta); text-align:center; margin:4px 0}
.hp-kembali{display:inline-flex; align-items:center; gap:2px; background:none; border:0; color:var(--tinta); font-weight:700; padding:0; cursor:pointer; justify-self:start; font-size:13.5px}
.hp-kembali svg{width:16px; height:16px}
.hp-sukses{display:flex; align-items:center; gap:6px; margin:0; background:#DDF2E6; color:var(--hijau); border-radius:12px; padding:10px 12px; font-weight:800}
.hp-sukses svg{width:18px; height:18px}
.hp-layar{max-height:620px; overflow-y:auto}
.hp-label{font-size:12.5px; font-weight:800; color:var(--tinta-tua); margin-top:4px}
.hp-pilihan{display:flex; flex-wrap:wrap; gap:6px}
.hp-pilihan label{cursor:pointer; position:relative}
.hp-pilihan input{position:absolute; opacity:0; pointer-events:none}
.hp-pilihan span{display:inline-block; padding:8px 12px; border-radius:99px; border:1.5px solid var(--garis); background:#fff; font-size:13px; font-weight:600}
.hp-pilihan input:checked + span{background:var(--tinta); border-color:var(--tinta); color:#fff}
.hp-pilihan input:focus-visible + span{outline:3px solid var(--tinta); outline-offset:2px}
.hp-pilih:disabled{opacity:.5; cursor:not-allowed}
.hp-harga{font:800 16px/1.3 var(--display); color:var(--tinta-tua)}
.hp-harga small{font:500 12px var(--badan); color:var(--redup)}
.hp-pilih small.merah{color:#A3172B; font-weight:700}
.hp-layanan{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.hp-layanan button{display:grid; justify-items:start; gap:8px; background:#fff; border:1.5px solid var(--garis); border-radius:14px; padding:12px; cursor:pointer; text-align:left; font-weight:700; color:var(--tinta-tua); font-size:13px; line-height:1.25}
.hp-layanan button:hover{border-color:var(--tinta)}
.hp-layanan svg{width:22px; height:22px; color:var(--tinta)}
.hp-menu{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 0; border-top:1px solid var(--garis2); font-size:13px}
.hp-menu b{display:block; color:var(--tinta-tua)}
.hp-menu small{color:var(--redup)}
.hp-total{display:flex; justify-content:space-between; align-items:center; font-weight:700}
.hp-total b{margin:0!important; font:800 18px/1 var(--display)}
.hp-status{display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-top:1px solid var(--garis2); font-size:12.5px}
.hp-status b{white-space:nowrap; color:var(--tinta)}
.hp-status b.hijau{color:var(--hijau)}
.hp-baris.besar{font-weight:800; color:var(--tinta-tua)}
.hp-btn:disabled{opacity:.45; cursor:not-allowed}
.hp-demo{border:1.5px dashed var(--tinta); background:#EEF2FC; color:var(--tinta); border-radius:14px; padding:12px; font-weight:700; font-size:13px; cursor:pointer; text-align:left}


/* small helpers */
.tersembunyi{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.jarak-bawah{margin:0 0 14px}
.isi > .jarak-bawah{margin:0}
.tengah{text-align:center; margin-top:10px}
.lebar-teks{flex:1 1 320px; max-width:72ch}
.link-btn{background:none; border:0; padding:0; color:var(--tinta); font-weight:700; cursor:pointer; text-decoration:underline; font-size:inherit}
.lencana.kecil{min-width:16px; height:16px; font-size:10px; padding:0 4px; vertical-align:1px}
.info.merah{background:#FBE1E5; color:#7A1020}
.info.saran{align-items:center; flex-wrap:wrap}
.info.saran span{flex:1; min-width:180px}
.info a{color:inherit; font-weight:700}
a.info{text-decoration:none; margin:0 0 10px}
dialog{width:min(520px, calc(100% - 24px))}

/* sign in */
.peran-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.masuk-lain{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1040px){ .peran-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .masuk-lain{grid-template-columns:1fr} }
@media (max-width:520px){ .peran-grid{grid-template-columns:1fr} }
.peran small.peran-orang{flex:none; color:var(--tinta); font-weight:700}

/* ticket lists */
.hd-grid{display:grid; grid-template-columns:minmax(300px,400px) minmax(0,1fr); gap:16px; align-items:start}
.hd-grid.lebar{grid-template-columns:minmax(300px,440px) minmax(0,1fr)}
.hd-daftar{position:sticky; top:70px; max-height:calc(100vh - 86px); overflow:auto; padding:12px}
.hd-alat{display:flex; gap:8px; align-items:center}
.hd-alat .cari{flex:1; margin:0; min-width:0}
.hd-daftar .dua{margin-bottom:8px}
.hd-daftar .dua select{min-height:36px; font-size:13px; padding:4px 8px}
.saring{display:flex; flex-wrap:wrap; gap:4px; margin:10px 0 8px}
.saring button{border:1px solid var(--garis); background:#fff; padding:5px 10px; border-radius:99px; font-weight:600; font-size:12.5px; color:var(--redup); cursor:pointer}
.saring button:hover{color:var(--tinta-tua)}
.saring button[aria-pressed=true]{background:var(--tinta-tua); border-color:var(--tinta-tua); color:#fff}
.saring .angka-kecil{margin-left:5px}
.saring-tim{display:flex; align-items:center; gap:10px; margin-bottom:6px}
.saring-tim select{width:auto; min-height:34px; padding:4px 8px; font-size:13px}
.saring-tim .ket{font-size:12px}
.tk-daftar{display:grid; gap:2px}
.tk{display:flex; gap:10px; padding:11px 10px; border-radius:12px; text-decoration:none; color:inherit; border:1.5px solid transparent}
.tk:hover{background:var(--latar)}
.tk.aktif{background:#EEF2FC; border-color:#C9D3EE}
.prio{display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--p); flex:none}
.tk > .prio{margin-top:5px}
.tk-isi{flex:1; min-width:0; display:grid; gap:2px}
.tk-atas{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--redup); min-width:0}
.tk-atas > span:not(.chip):not(.sp){white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tk-atas b{color:var(--tinta-tua); font-variant-numeric:tabular-nums}
.tk-atas .sp{flex:1}
.tk-judul{color:var(--tinta-tua); font-size:14.5px; line-height:1.3}
.tk-isi > small{color:var(--redup); font-size:12.5px}
.tk-bawah{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:4px}
.tk-orang{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; color:var(--teks)}
.avatar.mini{width:20px; height:20px; font-size:9px; font-style:normal}
.prio-chip{background:#fff; border:1px solid var(--garis); color:var(--teks)}
.prio-chip .prio{width:8px; height:8px}
.baris > .prio{flex:none}
.aset-kode{font-weight:700; font-size:12.5px; color:var(--tinta); min-width:86px; font-variant-numeric:tabular-nums}

/* one ticket */
.tk-detail{display:grid; gap:12px}
.tk-detail > *{margin:0}
.tk-meta-atas{font-size:12.5px; color:var(--redup); font-weight:600}
.tk-h{font-size:clamp(19px,2vw,23px); letter-spacing:-.015em; margin:2px 0 8px}
.tk-detail .tk-h{margin:0}
.tk-detail .chips,.tk-detail .tamu-mini{margin:0}
.kembali-daftar{display:none}
.sla-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.sla-kotak{border:1.5px solid var(--garis); border-radius:12px; padding:10px 12px; display:grid; gap:2px; align-content:start; min-width:0}
.sla-kotak small{font-size:12px; font-weight:700; color:var(--redup)}
.sla-kotak b{font:800 17px/1.25 var(--display); color:var(--tinta-tua)}
.sla-kotak > span{font-size:12.5px; color:var(--redup)}
.sla-bar{display:block; height:5px; border-radius:99px; background:var(--panel); margin-top:6px; overflow:hidden}
.sla-bar i{display:block; height:100%; background:var(--tinta); border-radius:99px}
.sla-kotak.awas{border-color:#E8C55A; background:#FFFBEA}
.sla-kotak.awas .sla-bar i{background:#D9A400}
.sla-kotak.lewat{border-color:var(--stempel); background:#FFF3F5}
.sla-kotak.lewat b{color:var(--stempel)}
.sla-kotak.lewat .sla-bar i{background:var(--stempel)}
.sla-kotak.ok b{color:var(--hijau)}
.sla-kotak.telat b{color:#A3172B}
.sla-kotak.jeda{background:var(--latar)}
.sla-kotak.setuju{background:#F6F2FD; border-color:#DCCDF5}
.meta-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0}
.meta{display:grid; gap:4px; min-width:0}
.meta small{font-size:12px; font-weight:700; color:var(--redup)}
.meta select{min-height:36px; padding:5px 8px; font-size:13.5px}
.meta.lebar{grid-column:1 / -1}
.meta-grid.baca div{display:grid; gap:2px}
.meta-grid.baca dt{font-size:12px; font-weight:700; color:var(--redup)}
.meta-grid.baca dd{margin:0; font-weight:600}
.kunjungan-kotak{display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#EEF2FC; border-radius:12px; padding:10px 12px}
.kunjungan-kotak > svg{width:22px; height:22px; color:var(--tinta); flex:none}
.kunjungan-kotak div{flex:1; min-width:160px}
.kunjungan-kotak b{display:block; color:var(--tinta-tua); font-size:14px}
.kunjungan-kotak small{color:var(--redup); font-size:12.5px}
.kunjungan-kotak.selesai{background:#E8F6EE}
.nilai-kotak{display:grid; gap:2px; background:#FFFBEA; border-radius:12px; padding:10px 12px}
.bintang-baca{color:#E0A100; font-size:18px; letter-spacing:2px; line-height:1.2}
.bintang-baca i{color:var(--garis); font-style:normal}
.nilai-kotak q{font-style:italic}
.nilai-kotak small{color:var(--redup); font-size:12px}
.aksi-tk{display:flex; flex-wrap:wrap; gap:8px}
.utas{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.u-pesan{max-width:86%; justify-self:start; background:var(--latar); border-radius:14px 14px 14px 4px; padding:9px 12px; font-size:14px; overflow-wrap:anywhere}
.u-pesan.staf{justify-self:end; background:#E3EAFB; border-radius:14px 14px 4px 14px}
.u-pesan small{display:block; font-size:11.5px; color:var(--redup); font-weight:700; margin-bottom:2px}
.u-catatan{background:var(--kuning); border-radius:12px; padding:9px 12px; font-size:14px; border-left:4px solid #D9B200; overflow-wrap:anywhere}
.u-catatan small{display:block; font-size:11.5px; color:#6F5200; font-weight:700; margin-bottom:2px}
.u-log{font-size:12px; color:var(--redup); text-align:center; padding:0 10px}
.u-log span{font-variant-numeric:tabular-nums}
.u-log b{color:var(--teks)}
.u-foto{display:block; margin-top:8px; border:0; padding:0; background:none; cursor:zoom-in}
.u-foto img{max-width:200px; max-height:160px; border-radius:10px; display:block}
.foto-besar{max-width:100%; max-height:70vh; border-radius:12px; display:block; margin:0 auto}
.balas{display:grid; gap:8px; border-top:1px solid var(--garis2); padding-top:12px}
.balas-jenis{display:flex; flex-wrap:wrap; gap:6px}
.balas-jenis label{cursor:pointer; position:relative}
.balas-jenis input{position:absolute; opacity:0; pointer-events:none}
.balas-jenis span{display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border-radius:99px; border:1.5px solid var(--garis); font-weight:700; font-size:13px; color:var(--redup)}
.balas-jenis span svg{width:14px; height:14px}
.balas-jenis input:checked + span{background:var(--tinta-tua); border-color:var(--tinta-tua); color:#fff}
.balas-jenis input:focus-visible + span{outline:3px solid var(--tinta); outline-offset:2px}
.balas textarea{min-height:76px}
.balas.mode-c textarea{background:#FFFBEA; border-color:#E8C55A}
.balas.mode-c .balas-jenis input:checked + span{background:#D9B200; border-color:#D9B200; color:var(--tinta-tua)}
.balas-bawah{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.balas-bawah select{width:auto; max-width:230px; font-size:13px}
.balas-bawah .sp{flex:1}
.balas .hanya-catatan{display:none}
.balas.mode-c .hanya-catatan{display:inline-flex}
.balas.mode-c .hanya-balas{display:none}
@media (max-width:1100px){
  .hd-grid,.hd-grid.lebar{grid-template-columns:minmax(0,1fr)}
  .hd-daftar{position:static; max-height:none}
  .hd-grid.ada-pilih .hd-daftar{display:none}
  .hd-grid:not(.ada-pilih) .hd-detail{display:none}
  .kembali-daftar{display:inline-flex}
}
@media (max-width:600px){
  .meta-grid{grid-template-columns:1fr 1fr}
  .sla-grid{grid-template-columns:1fr}
  .balas-bawah select{max-width:none; flex:1 1 100%}
  .balas-bawah .sp{display:none}
  .balas-bawah .btn{flex:1}
  .u-pesan{max-width:94%}
}

/* visits */
.jadwal-hari h2{display:flex; align-items:baseline; gap:8px; margin-bottom:4px}
.jadwal-hari h2 small{font:500 13px var(--badan); color:var(--redup)}
.jadwal-item{display:flex; align-items:center; gap:12px; padding:10px 2px}
.jadwal-jam{font:800 18px/1 var(--display); color:var(--tinta); min-width:56px; font-variant-numeric:tabular-nums}
.jadwal-item .baris-isi a{text-decoration:none}
.jadwal-item.selesai{opacity:.6}
@media (max-width:600px){ .jadwal-item{flex-wrap:wrap} .jadwal-item .baris-isi{flex-basis:calc(100% - 70px)} .jadwal-item > .chip,.jadwal-item > .btn{margin-left:68px} }

/* outages */
.gangguan-kartu{border-left:5px solid var(--stempel)}
.gangguan-kartu.selesai{border-left-color:var(--hijau)}
.gangguan-kartu .kartu-kepala small{display:block; color:var(--redup); font-size:12.5px; margin-top:3px}
.g-update{list-style:none; margin:0 0 10px; padding:0 0 0 14px; border-left:2px solid var(--garis); display:grid; gap:8px}
.g-update li{font-size:14px}
.g-update small{display:block; color:var(--redup); font-size:12px; font-weight:600}
.gangguan-kartu .ket a{font-weight:700}
.gangguan-kartu .aksi-tk{margin-top:10px}

/* help articles */
.artikel-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px}
.artikel-kartu{display:grid; gap:6px; text-decoration:none; color:inherit; align-content:start}
.artikel-kartu:hover{border-color:var(--tinta)}
.artikel-kartu b{color:var(--tinta-tua); font:800 16px/1.25 var(--display)}
.artikel-kartu small{color:var(--tinta); font-weight:700; font-size:12.5px}
.artikel-detail{display:grid; gap:10px; max-width:760px}
.artikel-detail .tk-h{margin:0}
.artikel-langkah{margin:4px 0; padding-left:22px; display:grid; gap:8px; font-size:15px}
.lebar-cari{flex:1 1 260px; max-width:420px; margin:0}

/* settings */
.pilih-tim{width:auto; min-width:150px}
.balasan-baris{display:flex; gap:8px; align-items:flex-start; margin-bottom:8px}
.balasan-baris textarea{min-height:52px}
.sla-tabel input{width:110px}

/* dialog extras */
.suku-isi,.cek-grup,.radio-daftar{border:0; padding:0; margin:0 0 12px; min-width:0}
.suku-isi legend,.cek-grup legend,.radio-daftar legend{margin-bottom:6px; padding:0}
.suku-baris{display:grid; grid-template-columns:minmax(0,1fr) 80px; gap:8px; margin-bottom:8px}
.cek-grup{display:flex; flex-wrap:wrap; gap:6px}
.cek-grup legend{width:100%}
.cek-grup label{display:inline-flex; align-items:center; gap:6px; border:1.5px solid var(--garis); border-radius:10px; padding:7px 10px; cursor:pointer; font-size:13.5px; font-weight:600}
.cek-grup label:has(input:checked),.radio-daftar label:has(input:checked){border-color:var(--tinta); background:#F3F6FD}
.radio-daftar{display:grid; gap:6px}
.radio-daftar label{display:flex; gap:10px; align-items:flex-start; border:1.5px solid var(--garis); border-radius:12px; padding:10px 12px; cursor:pointer}
.radio-daftar input{margin-top:3px}
.radio-daftar b{display:block; color:var(--tinta-tua)}
.radio-daftar small{color:var(--redup); font-size:12.5px}

/* team screen */
body.mode-tv{background:var(--tinta-tua)}
.tv{min-height:100vh; background:var(--tinta-tua); color:#fff; display:flex; flex-direction:column; gap:18px; padding:24px clamp(16px,3vw,40px)}
.tv-atas{display:flex; justify-content:space-between; align-items:center; gap:12px}
.tv-klinik{display:flex; align-items:center; gap:12px; font:800 clamp(20px,2.6vw,30px)/1.1 var(--display)}
.tv-klinik .logo{width:44px; height:44px}
.tv-jam{font:800 clamp(26px,3.4vw,44px)/1 var(--display); font-variant-numeric:tabular-nums}
.tv-gangguan{display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--stempel); border-radius:16px; padding:14px 18px; font-size:clamp(15px,1.6vw,20px)}
.tv-gangguan svg{width:28px; height:28px; flex:none}
.tv-gangguan b{font-family:var(--display)}
.tv-gangguan span{opacity:.9}
.tv-angka{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px}
.tv-angka div{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:16px 18px; min-width:0}
.tv-angka small{display:block; color:#AEB9D8; font-size:clamp(12px,1.1vw,15px); font-weight:600}
.tv-angka b{display:block; font:800 clamp(34px,4.6vw,64px)/1.05 var(--display); font-variant-numeric:tabular-nums; margin-top:4px}
.tv-angka b span{font-size:.45em; color:#AEB9D8; margin-left:2px}
.tv-angka .merah{background:var(--stempel); border-color:var(--stempel)}
.tv-angka .merah small{color:#FFE3E8}
.tv-isi{flex:1; display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:18px; align-items:start}
.tv-panel{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:18px 20px; min-width:0}
.tv-panel h2{color:#fff; font-size:clamp(17px,1.8vw,24px); margin-bottom:10px}
.tv-baris{display:flex; align-items:center; gap:14px; padding:11px 0; border-top:1px solid rgba(255,255,255,.1)}
.tv-baris .prio{width:12px; height:12px}
.tv-baris div{flex:1; min-width:0}
.tv-baris b{display:block; font-size:clamp(15px,1.5vw,20px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tv-baris small{color:#AEB9D8; font-size:clamp(12px,1.1vw,15px)}
.tv-sla{display:grid; justify-items:end; font:800 clamp(16px,1.6vw,22px)/1.1 var(--display); white-space:nowrap; font-variant-numeric:tabular-nums}
.tv-sla small{font:600 12px var(--badan); color:#AEB9D8}
.tv-sla.awas{color:var(--kuning)}
.tv-sla.lewat{color:#FF8A9B}
.tv-beban{display:grid; grid-template-columns:80px minmax(0,1fr) 34px; align-items:center; gap:10px; padding:8px 0; font-size:clamp(14px,1.3vw,18px)}
.tv-beban > i{height:10px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden}
.tv-beban > i i{display:block; height:100%; background:var(--kuning); border-radius:99px}
.tv-beban b{text-align:right; font-variant-numeric:tabular-nums}
.tv-belum{margin:10px 0 0; color:#AEB9D8}
.tv-belum b{color:#fff}
.tv-kosong{color:#AEB9D8}
.tv-bawah{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; color:#AEB9D8; font-size:14px}
.tv-kembali{color:#AEB9D8}
@media (max-width:900px){ .tv-angka{grid-template-columns:repeat(2,minmax(0,1fr))} .tv-isi{grid-template-columns:1fr} }

/* staff app extras */
.hp-atas{position:relative}
.hp-atas:has(.hp-lonceng) b,.hp-atas:has(.hp-lonceng) small{padding-right:44px}
.hp-atas small{display:block}
.hp-lonceng{position:absolute; top:22px; right:14px; width:38px; height:38px; border-radius:50%; border:0; background:rgba(255,255,255,.15); color:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer}
.hp-lonceng svg{width:20px; height:20px}
.hp-lonceng i{position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; border-radius:99px; background:var(--stempel); font:800 10.5px/18px var(--badan); font-style:normal; padding:0 4px}
.hp-kat{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.hp-kat button{display:grid; justify-items:start; gap:8px; background:#fff; border:1.5px solid var(--garis); border-radius:14px; padding:12px; cursor:pointer; text-align:left; font-weight:700; color:var(--tinta-tua); font-size:12.5px; line-height:1.25}
.hp-kat button:hover{border-color:var(--tinta)}
.hp-kat svg{width:22px; height:22px; color:var(--tinta)}
.hp-saran{display:grid; gap:6px; background:#FFFBEA; border:1px solid #F0DB8A; border-radius:12px; padding:10px}
.hp-saran small{font-weight:700; color:#6F5200; font-size:12px}
.hp-saran button{display:flex; align-items:center; gap:8px; text-align:left; border:0; background:#fff; border-radius:10px; padding:8px 10px; font-weight:700; font-size:12.5px; color:var(--tinta-tua); cursor:pointer}
.hp-saran svg{width:16px; height:16px; color:var(--tinta); flex:none}
#hpSaran:empty{display:none}
.hp-foto{display:flex; align-items:center; gap:10px; border:1.5px dashed var(--garis); border-radius:12px; padding:10px; cursor:pointer; font-size:13px; font-weight:600; color:var(--tinta); background:#fff}
.hp-foto svg{width:22px; height:22px; flex:none}
.hp-foto img{width:52px; height:52px; object-fit:cover; border-radius:8px; flex:none}
.hp-tag{display:inline-block; justify-self:start; background:#EDE6FA; color:#5B3A9E!important; border-radius:8px; padding:2px 8px; font-weight:700; margin-top:4px}
.hp-tab{display:flex; background:#fff; border:1px solid var(--garis); border-radius:12px; padding:3px}
.hp-tab button{flex:1; border:0; background:none; padding:7px; border-radius:9px; font-weight:700; font-size:13px; color:var(--redup); cursor:pointer}
.hp-tab button[aria-pressed=true]{background:var(--tinta-tua); color:#fff}
.hp-tiket{display:grid; gap:2px; text-align:left; background:#fff; border:1.5px solid var(--garis); border-radius:14px; padding:10px 12px; cursor:pointer; color:inherit}
.hp-tiket:hover{border-color:var(--tinta)}
.hp-tiket b{color:var(--tinta-tua); font-size:13.5px}
.hp-tiket small{color:var(--redup); font-size:12px}
.st-tunggu,.st-selesai{color:var(--stempel)!important; font-weight:800}
.st-tolak{color:#A3172B!important}
.st-setuju{color:#5B3A9E!important}
button.hp-status{width:100%; background:none; border:0; border-top:1px solid var(--garis2); text-align:left; cursor:pointer; color:inherit; font:inherit; font-size:12.5px; padding:7px 0; align-items:center}
.hp-status span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hp-status b{font-size:12px}
.hp-layanan button > span{display:flex; align-items:center; gap:6px}
.hp-tahap{list-style:none; display:flex; margin:12px 0 8px; padding:0}
.hp-tahap li{flex:1; display:grid; justify-items:center; gap:4px; font-size:10.5px; color:var(--redup); position:relative; text-align:center}
.hp-tahap li i{width:14px; height:14px; border-radius:50%; background:#fff; border:2.5px solid var(--garis); position:relative; z-index:1}
.hp-tahap li::before{content:""; position:absolute; top:6px; left:-50%; width:100%; height:2.5px; background:var(--garis)}
.hp-tahap li:first-child::before{display:none}
.hp-tahap li.ok i{background:var(--hijau); border-color:var(--hijau)}
.hp-tahap li.ok::before{background:var(--hijau)}
.hp-tahap li.ok{color:var(--hijau); font-weight:700}
.hp-utas{display:grid; gap:8px}
.hp-pesan{max-width:88%; justify-self:start; background:#fff; border:1px solid var(--garis); border-radius:14px 14px 14px 4px; padding:8px 10px; font-size:13px; overflow-wrap:anywhere}
.hp-pesan.saya{justify-self:end; background:#E3EAFB; border-color:#E3EAFB; border-radius:14px 14px 4px 14px}
.hp-pesan small{display:block; font-size:11px; color:var(--redup); font-weight:700; margin-bottom:2px}
.hp-pesan img{display:block; max-width:100%; border-radius:8px; margin-top:6px}
.hp-balas{display:flex; gap:6px; align-items:flex-end}
.hp-balas textarea{min-height:44px; flex:1; font-size:13px}
.hp-btn svg{width:18px; height:18px; display:inline-block; vertical-align:-3px; margin-right:6px}
.hp-btn.kecil{width:46px; min-height:44px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:12px}
.hp-btn.kecil svg{margin:0}
.hp-btn.alt{background:#fff; color:var(--tinta); border:1.5px solid var(--tinta)}
.hp-btn.alt:hover{background:var(--panel)}
.hp-konfirmasi{display:grid; gap:8px}
.hp-konfirmasi > b{margin-bottom:0!important}
.hp-kartu > small.ket{display:block}
.hp-bintang{display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:4px; margin:4px 0 8px}
.hp-bintang input{position:absolute; opacity:0; pointer-events:none}
.hp-bintang label{font-size:30px; line-height:1; color:var(--garis); cursor:pointer}
.hp-bintang input:checked ~ label,.hp-bintang label:hover,.hp-bintang label:hover ~ label{color:#E0A100}
.hp-bintang input:focus-visible + label{outline:2px solid var(--tinta); border-radius:4px}
.hp-kartu textarea{margin-bottom:8px}
.hp-gangguan{display:flex; gap:10px; background:#FBE1E5; color:#7A1020; border-radius:14px; padding:12px; font-size:12.5px}
.hp-gangguan svg{width:22px; height:22px; flex:none; color:var(--stempel)}
.hp-gangguan b{display:block; font-size:13.5px}
.hp-gangguan span{display:block; margin:2px 0}
.hp-gangguan small{color:#A3172B}
.hp-gangguan.pulih{background:#DDF2E6; color:#0E5A34}
.hp-gangguan.pulih svg,.hp-gangguan.pulih small{color:var(--hijau)}
.hp-sorot{display:grid; gap:2px; text-align:left; border:0; border-radius:14px; padding:12px; background:#EDE6FA; color:#3F2775; cursor:pointer; font:inherit}
.hp-sorot b{font-size:13.5px}
.hp-sorot small{font-size:12px}
.hp-sorot.hijau{background:#DDF2E6; color:#0E5A34}
.hp-info{margin:0; background:#EDE6FA; color:#3F2775; border-radius:12px; padding:10px 12px; font-size:13px; font-weight:600}
.hp-info.merah{background:#FBE1E5; color:#7A1020}
.hp-kutip{margin:8px 0 0; padding:8px 10px; background:var(--latar); border-radius:10px; font-size:13px}
.hp-notif{display:grid; gap:2px; text-align:left; background:#fff; border:1px solid var(--garis); border-radius:12px; padding:10px 12px; cursor:pointer; font-size:13px; color:var(--teks)}
.hp-notif.baru{border-color:var(--tinta); background:#F3F6FD; font-weight:600}
.hp-notif small{color:var(--redup); font-size:11.5px; font-weight:500}
.hp-artikel{margin:0; padding:12px 12px 12px 30px; background:#fff; border:1px solid var(--garis); border-radius:14px; display:grid; gap:8px; font-size:13.5px}
.hp-daftar{display:grid; gap:8px}
.hp-isi .cari{margin:0}
.hp-isi{grid-template-columns:minmax(0,1fr)}

@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important; transition:none!important} }