/* Tata letak: sidebar kiri berkelompok + bar atas + area kerja; di HP sidebar jadi laci. Warna krem–terakota (permintaan Afiza: gaya Claude) */
:root{
  --bg:#faf9f5;--panel:#f3f1e9;--kartu:#ffffff;--teks:#1f1e1b;--redup:#6f6d66;--garis:#e6e3d8;--garis-kuat:#d4d0c2;
  --aksen:#c96442;--aksen-h:#b1553a;--aksen-lembut:#f6e5dc;
  --ok:#3c7a4e;--ok-bg:#e5efe6;--waspada:#9a6a12;--waspada-bg:#f6ecd4;--bahaya:#b3401c;--bahaya-bg:#f9e3da;--info:#3d5f8a;--info-bg:#e3eaf3;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;--sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --bayang:0 1px 2px rgba(31,30,27,.05),0 6px 18px rgba(31,30,27,.05);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#262624;--panel:#1f1e1d;--kartu:#30302e;--teks:#f3f1ea;--redup:#a7a39a;--garis:#3d3c38;--garis-kuat:#4b4944;
  --aksen:#d97757;--aksen-h:#e38c6f;--aksen-lembut:#3b2c25;
  --ok:#8cc49c;--ok-bg:#243529;--waspada:#e0b45e;--waspada-bg:#3a3020;--bahaya:#f19a77;--bahaya-bg:#41281f;--info:#9db8de;--info-bg:#25303f;
  --bayang:0 1px 2px rgba(0,0,0,.25),0 6px 18px rgba(0,0,0,.25);color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#262624;--panel:#1f1e1d;--kartu:#30302e;--teks:#f3f1ea;--redup:#a7a39a;--garis:#3d3c38;--garis-kuat:#4b4944;
  --aksen:#d97757;--aksen-h:#e38c6f;--aksen-lembut:#3b2c25;
  --ok:#8cc49c;--ok-bg:#243529;--waspada:#e0b45e;--waspada-bg:#3a3020;--bahaya:#f19a77;--bahaya-bg:#41281f;--info:#9db8de;--info-bg:#25303f;
  --bayang:0 1px 2px rgba(0,0,0,.25),0 6px 18px rgba(0,0,0,.25);color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--bg);color:var(--teks);font:14px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
a{color:var(--aksen)}
:focus-visible{outline:2px solid var(--aksen);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}

/* rangka */
.app{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100%}
.sisi{background:var(--panel);border-right:1px solid var(--garis);padding:14px 12px;display:flex;flex-direction:column;gap:14px;position:sticky;top:0;height:100vh;overflow-y:auto}
.merek{display:flex;align-items:center;gap:10px;padding:4px 6px}
.merek .tanda{width:30px;height:30px;border-radius:8px;background:var(--aksen);color:#fff;display:grid;place-items:center;font:600 15px var(--sans)}
.merek b{font:500 19px var(--serif);letter-spacing:-.01em}
.mitra{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--garis-kuat);border-radius:10px;background:var(--kartu);cursor:pointer;width:100%;text-align:left}
.mitra small{display:block;color:var(--redup);font-size:11.5px}
.mitra .panah{margin-left:auto;color:var(--redup)}
.grup{display:flex;flex-direction:column;gap:2px}
.grup h4{margin:0 0 4px;padding:0 10px;font:600 11px var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--redup)}
.menu{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;color:var(--teks);text-decoration:none;border:0;background:transparent;width:100%;text-align:left;cursor:pointer}
.menu svg{width:17px;height:17px;flex:none;color:var(--redup)}
.menu:hover{background:var(--kartu)}
.menu.on{background:var(--kartu);box-shadow:var(--bayang);font-weight:600}
.menu.on svg{color:var(--aksen)}
.menu .jml{margin-left:auto;font-size:11.5px;background:var(--aksen-lembut);color:var(--aksen);padding:0 7px;border-radius:9px;font-weight:600}
.utama{display:flex;flex-direction:column;min-width:0}
.atas{display:flex;align-items:center;gap:12px;padding:10px 24px;border-bottom:1px solid var(--garis);background:var(--bg);position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
.burger{display:none;border:1px solid var(--garis-kuat);background:var(--kartu);border-radius:8px;width:36px;height:36px;cursor:pointer}
.cari{flex:1;max-width:460px;display:flex;align-items:center;gap:8px;border:1px solid var(--garis-kuat);background:var(--kartu);border-radius:10px;padding:7px 11px}
.cari input{border:0;outline:0;background:transparent;width:100%}
.cari kbd{font:11px var(--sans);color:var(--redup);border:1px solid var(--garis);border-radius:5px;padding:0 5px}
.atas .kanan{margin-left:auto;display:flex;align-items:center;gap:10px}
.ikon{width:36px;height:36px;border-radius:9px;border:1px solid var(--garis-kuat);background:var(--kartu);display:grid;place-items:center;cursor:pointer;position:relative}
.ikon .titik{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--aksen)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--aksen-lembut);color:var(--aksen);display:grid;place-items:center;font-weight:600}
.isi{padding:22px 24px 40px;display:flex;flex-direction:column;gap:18px;max-width:1280px;width:100%}
.judul{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.judul h1{margin:0;font:500 28px/1.15 var(--serif);letter-spacing:-.015em;text-wrap:balance}
.judul p{margin:4px 0 0;color:var(--redup)}
.pita-contoh{font-size:12.5px;color:var(--waspada);background:var(--waspada-bg);padding:6px 12px;border-radius:8px}

/* tombol & chip */
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:9px;border:1px solid transparent;cursor:pointer;font-weight:500}
.btn.utama-btn{background:var(--aksen);color:#fff}.btn.utama-btn:hover{background:var(--aksen-h)}
.btn.kedua{background:var(--kartu);border-color:var(--garis-kuat)}.btn.kedua:hover{background:var(--panel)}
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.c-ok{background:var(--ok-bg);color:var(--ok)}.c-waspada{background:var(--waspada-bg);color:var(--waspada)}.c-bahaya{background:var(--bahaya-bg);color:var(--bahaya)}.c-info{background:var(--info-bg);color:var(--info)}

/* kartu angka */
.kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.k{background:var(--kartu);border:1px solid var(--garis);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.k .lbl{font-size:12.5px;color:var(--redup);display:flex;justify-content:space-between;gap:6px}
.k .nilai{font:500 27px/1.1 var(--serif)}
.k .bawah{font-size:12.5px;color:var(--redup)}
.naik{color:var(--ok);font-weight:600}.turun{color:var(--bahaya);font-weight:600}
.bar-mini{height:6px;border-radius:4px;background:var(--panel);overflow:hidden;display:flex}
.bar-mini span{display:block;height:100%}

/* dua kolom */
.dua{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px}
.panel{background:var(--kartu);border:1px solid var(--garis);border-radius:14px;padding:16px;min-width:0}
.panel h3{margin:0 0 2px;font:500 17px var(--serif)}
.panel .sub{color:var(--redup);font-size:12.5px;margin:0 0 12px}
.legenda{display:flex;gap:14px;font-size:12.5px;color:var(--redup);margin-bottom:6px}
.legenda i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
svg text{fill:var(--redup);font:11px var(--sans)}
.daftar{display:flex;flex-direction:column}
.daftar .r{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--garis)}
.daftar .r:first-child{border-top:0}
.daftar .r .nm{flex:1;min-width:0}
.daftar .r .nm b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.daftar .r .nm small{color:var(--redup)}
.jadwal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.jadwal div{border:1px solid var(--garis);border-radius:10px;padding:10px;background:var(--bg)}
.jadwal b{display:block;font:500 15px var(--serif)}
.jadwal small{color:var(--redup)}

/* tabel pelanggan */
.saring{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.saring select,.saring input{border:1px solid var(--garis-kuat);background:var(--kartu);border-radius:9px;padding:7px 10px}
.saring input{min-width:0;flex:1 1 200px}
.tab-st{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--garis)}
.tab-st button{border:0;background:transparent;padding:8px 12px;cursor:pointer;color:var(--redup);border-bottom:2px solid transparent;margin-bottom:-1px}
.tab-st button.on{color:var(--teks);border-bottom-color:var(--aksen);font-weight:600}
.tab-st span{font-size:11.5px;background:var(--panel);border-radius:9px;padding:0 6px;margin-left:4px}
.wadah-tabel{overflow-x:auto;border:1px solid var(--garis);border-radius:12px;background:var(--kartu)}
table{width:100%;border-collapse:collapse;min-width:860px}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--garis);vertical-align:middle}
th{font:600 11.5px var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--redup);background:var(--panel);position:sticky;top:0}
tbody tr{cursor:pointer}tbody tr:hover{background:var(--bg)}
td .nm b{display:block}td .nm small{color:var(--redup)}
td.kanan,th.kanan{text-align:right}
.aksi-baris{display:flex;gap:4px;justify-content:flex-end}
.aksi-baris button{width:30px;height:30px;border-radius:8px;border:1px solid var(--garis);background:var(--kartu);cursor:pointer;display:grid;place-items:center;color:var(--redup)}
.aksi-baris button:hover{color:var(--aksen);border-color:var(--aksen)}
.kaki-tabel{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;color:var(--redup);font-size:12.5px;flex-wrap:wrap}
.hal{display:flex;gap:4px}.hal button{min-width:30px;height:30px;border-radius:8px;border:1px solid var(--garis);background:var(--kartu);cursor:pointer}
.hal button.on{background:var(--aksen);color:#fff;border-color:var(--aksen)}

/* laci detail */
.tirai{position:fixed;inset:0;background:rgba(20,19,17,.35);z-index:20}
.laci{position:fixed;top:0;right:0;bottom:0;width:min(460px,100%);background:var(--bg);border-left:1px solid var(--garis);z-index:21;display:flex;flex-direction:column;box-shadow:var(--bayang);padding-top:env(safe-area-inset-top,0px)}
.laci header{padding:16px 18px;border-bottom:1px solid var(--garis);display:flex;gap:12px;align-items:flex-start}
.laci header h2{margin:0;font:500 21px var(--serif)}
.laci header small{color:var(--redup)}
.laci .tutup{margin-left:auto}
.laci .tab-st{padding:0 14px}
.laci .badan{padding:16px 18px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 14px}
dt{color:var(--redup)}dd{margin:0;overflow-wrap:anywhere}
.riwayat .r{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--garis)}
.riwayat .r:first-child{border-top:0}

.tampil-hp{display:none}
@media (max-width:1100px){.kpi{grid-template-columns:repeat(2,minmax(0,1fr))}.dua{grid-template-columns:minmax(0,1fr)}}
@media (max-width:820px){
  .app{grid-template-columns:minmax(0,1fr)}
  .sisi{position:fixed;left:0;top:0;bottom:0;width:270px;z-index:30;transform:translateX(-100%);transition:transform .2s;padding-top:calc(14px + env(safe-area-inset-top,0px))}
  .sisi.buka{transform:none;box-shadow:var(--bayang)}
  .burger{display:grid;place-items:center}
  .atas{padding:10px 16px}.isi{padding:16px 16px 32px}
  .cari kbd,.sembunyi-hp{display:none}
  .judul h1{font-size:24px}
  .jadwal{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:460px){.kpi{gap:10px}.k{padding:12px}.k .nilai{font-size:22px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- tambahan aplikasi ---------- */
.c-redup{background:var(--panel);color:var(--redup)}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.form .penuh{grid-column:1/-1}
.form label,.lbl-f{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--redup)}
.form input,.form select,.form textarea,.isian{border:1px solid var(--garis-kuat);background:var(--kartu);border-radius:9px;padding:9px 11px;color:var(--teks);font:inherit;width:100%}
.form input:focus,.form select:focus,.form textarea:focus,.isian:focus{outline:none;border-color:var(--aksen);box-shadow:0 0 0 3px var(--aksen-lembut)}
.form .catatan{font-size:12px;color:var(--redup)}
.galat{background:var(--bahaya-bg);color:var(--bahaya);padding:10px 12px;border-radius:10px}
.sukses{background:var(--ok-bg);color:var(--ok);padding:10px 12px;border-radius:10px}
.kotak-masuk{min-height:100%;display:grid;place-items:center;padding:24px 16px}
.kotak-masuk .panel{width:min(400px,100%);display:flex;flex-direction:column;gap:14px;padding:24px}
.kotak-masuk h1{margin:0;font:500 26px var(--serif)}
.sandi-sekali{font:600 20px ui-monospace,Menlo,monospace;background:var(--panel);padding:12px;border-radius:10px;user-select:all;overflow-wrap:anywhere}
.tbl-kecil{min-width:0}
.tbl-kecil td,.tbl-kecil th{padding:8px 10px}
.baris-aksi{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.btn.kecil{padding:5px 10px;font-size:12.5px}
a.btn{text-decoration:none}
.menu{text-decoration:none}
@media (max-width:600px){.form{grid-template-columns:minmax(0,1fr)}}
.btn.awas{background:var(--bahaya);color:#fff;border-color:var(--bahaya)}
.sub a{color:var(--aksen)}
.cari kbd{white-space:nowrap}