:root{
  /* Palet CRM light */
  --bg:#F5F6FA; --bg2:#FFFFFF; --panel:#FFFFFF; --panel2:#F8F9FC;
  --garis:#E8EAF0; --garis2:#DFE3EC;
  --teks:#111827; --teks2:#5B6478; --teks3:#98A2B3;
  --utama:#4F46E5; --utama-t:#4338CA; --utama-l:#EEF2FF;
  --hijau:#10B981; --hijau-l:#ECFDF5;
  --merah:#EF4444; --merah-l:#FEF2F2;
  --kuning:#F59E0B; --kuning-l:#FFFBEB;
  --biru:#3B82F6; --biru-l:#EFF6FF;
  --ungu:#8B5CF6; --ungu-l:#F5F3FF;
  --radius:16px; --radius2:12px; --radius3:10px;
  --bayang:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);
  --bayang2:0 4px 16px rgba(16,24,40,.08),0 2px 4px rgba(16,24,40,.04);
  --bayang3:0 12px 32px rgba(16,24,40,.14);
  --trans:.16s cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg);color:var(--teks);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow:hidden;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
.tersembunyi{display:none!important}
svg{display:block}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#D3D8E3;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#B8BFCE}

/* ============ LOGIN ============ */
.layar-tengah{position:fixed;inset:0;display:grid;grid-template-columns:1.05fr 1fr;background:var(--bg2)}
.masuk-kiri{background:linear-gradient(150deg,#4F46E5 0%,#6D28D9 55%,#4C1D95 100%);
  display:grid;place-items:center;padding:48px;position:relative;overflow:hidden}
.masuk-kiri::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  background:rgba(255,255,255,.07);top:-180px;right:-160px}
.masuk-kiri::after{content:"";position:absolute;width:380px;height:380px;border-radius:50%;
  background:rgba(255,255,255,.05);bottom:-140px;left:-120px}
.masuk-brand{position:relative;z-index:2;color:#fff;max-width:420px}
.logo-besar{width:64px;height:64px;display:grid;place-items:center;background:rgba(255,255,255,.16);
  border-radius:18px;margin-bottom:26px}
.logo-besar svg{width:34px;height:34px;stroke:#fff}
.masuk-brand h2{font-size:32px;font-weight:800;letter-spacing:-.8px;margin-bottom:12px}
.masuk-brand p{font-size:15.5px;color:rgba(255,255,255,.85);line-height:1.65}
.masuk-fitur{list-style:none;margin-top:30px;display:flex;flex-direction:column;gap:12px}
.masuk-fitur li{font-size:14px;color:rgba(255,255,255,.92);display:flex;align-items:center;gap:10px}
.masuk-kanan{display:grid;place-items:center;padding:40px}
.kartu-masuk{width:100%;max-width:400px;animation:naik .45s ease}
@keyframes naik{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.kartu-masuk h1{font-size:26px;font-weight:800;letter-spacing:-.6px}
.kartu-masuk .sub{color:var(--teks2);font-size:14px;margin:6px 0 26px}
.tab-masuk{display:flex;gap:4px;background:var(--panel2);padding:4px;border-radius:var(--radius3);margin-bottom:22px}
.tab-masuk .tab{flex:1;padding:9px;border-radius:8px;color:var(--teks2);font-weight:600;font-size:13.5px;transition:var(--trans)}
.tab-masuk .tab.aktif{background:var(--bg2);color:var(--utama);box-shadow:var(--bayang)}
.form-masuk{display:flex;flex-direction:column;gap:16px}
.form-masuk .btn{margin-top:6px}
.pesan{font-size:13px;text-align:center;min-height:18px}
.pesan.err{color:var(--merah)} .pesan.ok{color:var(--hijau)}

/* ============ LAYOUT ============ */
#app{display:flex;height:100vh}
#sidebar{width:250px;flex-shrink:0;background:var(--bg2);border-right:1px solid var(--garis);
  display:flex;flex-direction:column;transition:transform var(--trans);z-index:40}
.merek{display:flex;align-items:center;gap:11px;padding:22px 20px 18px}
.merek .logo{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;
  background:linear-gradient(135deg,var(--utama),#7C3AED);flex-shrink:0;box-shadow:0 4px 12px rgba(79,70,229,.3)}
.merek .logo svg{width:21px;height:21px;stroke:#fff}
.merek-nama{font-weight:800;font-size:15.5px;letter-spacing:-.3px}
.merek-sub{font-size:11px;color:var(--teks3);font-weight:500;letter-spacing:.2px}
#nav{flex:1;overflow-y:auto;padding:4px 12px 12px;display:flex;flex-direction:column;gap:2px}
.nav-grup{font-size:10.5px;font-weight:700;color:var(--teks3);letter-spacing:.7px;padding:16px 10px 7px}
.nav-item{display:flex;align-items:center;gap:11px;padding:9.5px 11px;border-radius:var(--radius3);
  color:var(--teks2);font-size:13.8px;font-weight:500;text-align:left;transition:var(--trans);width:100%}
.nav-item .ik{width:18px;height:18px;flex-shrink:0;stroke-width:1.9}
.nav-item:hover{background:var(--panel2);color:var(--teks)}
.nav-item.aktif{background:var(--utama-l);color:var(--utama);font-weight:600}
.nav-item.aktif .ik{stroke:var(--utama)}
.sidebar-kaki{padding:12px;border-top:1px solid var(--garis);display:flex;flex-direction:column;gap:9px}
.promo{display:flex;align-items:center;gap:10px;background:var(--utama-l);border-radius:var(--radius3);padding:11px}
.promo-ikon{font-size:17px}
.promo-judul{font-size:12.5px;font-weight:700;color:var(--utama-t)}
.promo-teks{font-size:11px;color:var(--teks2)}
.info-user{font-size:12.5px;color:var(--teks2);padding:0 4px}
.info-user b{color:var(--teks);display:block;font-size:13.5px}

#utama{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
#topbar{display:flex;align-items:center;gap:16px;padding:14px 26px;border-bottom:1px solid var(--garis);
  background:var(--bg2);flex-shrink:0;position:relative;z-index:20}
.topbar-kiri{min-width:0}
#judul-hal{font-size:18px;font-weight:800;letter-spacing:-.4px;white-space:nowrap}
.sub-judul{font-size:12.5px;color:var(--teks3);margin-top:1px}
.cari-global{flex:1;max-width:380px;margin-left:auto;position:relative;display:flex;align-items:center}
.cari-global svg{position:absolute;left:12px;width:16px;height:16px;stroke:var(--teks3);pointer-events:none}
.cari-global input{width:100%;padding:9px 14px 9px 36px;background:var(--panel2);border:1px solid var(--garis);
  border-radius:var(--radius3);outline:none;transition:var(--trans);font-size:13.5px}
.cari-global input:focus{background:var(--bg2);border-color:var(--utama);box-shadow:0 0 0 3px var(--utama-l)}
.topbar-aksi{display:flex;align-items:center;gap:9px}
#btn-menu{display:none}
.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--utama),#7C3AED);
  color:#fff;font-weight:700;font-size:14px;display:grid;place-items:center;flex-shrink:0;transition:var(--trans)}
.avatar:hover{transform:scale(1.06);box-shadow:0 4px 12px rgba(79,70,229,.35)}
#konten{flex:1;overflow-y:auto;padding:24px 26px 40px;background:var(--bg)}
.overlay-sidebar{position:fixed;inset:0;background:rgba(16,24,40,.45);z-index:35}

/* ============ KOMPONEN ============ */
.btn{padding:9px 16px;border-radius:var(--radius3);font-weight:600;font-size:13.5px;
  background:var(--panel2);color:var(--teks);transition:var(--trans);display:inline-flex;align-items:center;gap:7px;
  white-space:nowrap;border:1px solid transparent}
.btn svg{width:15px;height:15px}
.btn:hover{background:#EDF0F6}
.btn-utama{background:var(--utama);color:#fff;box-shadow:0 2px 8px rgba(79,70,229,.28)}
.btn-utama:hover{background:var(--utama-t);box-shadow:0 4px 14px rgba(79,70,229,.35)}
.btn-bahaya{background:var(--merah);color:#fff}
.btn-bahaya:hover{background:#DC2626}
.btn-halus{background:var(--bg2);border:1px solid var(--garis);color:var(--teks2)}
.btn-halus:hover{background:var(--panel2);color:var(--teks);border-color:var(--garis2)}
.btn-blok{width:100%;justify-content:center}
.btn-ikon{width:36px;height:36px;display:grid;place-items:center;border-radius:var(--radius3);
  background:var(--panel2);color:var(--teks2);transition:var(--trans);position:relative;flex-shrink:0}
.btn-ikon svg{width:18px;height:18px}
.btn-ikon:hover{background:#EDF0F6;color:var(--teks)}
.btn-kecil{padding:6px 11px;font-size:12.5px;border-radius:8px}
.notif-titik{position:absolute;top:7px;right:8px;width:8px;height:8px;background:var(--merah);border-radius:50%;
  border:2px solid var(--bg2)}

.kartu{background:var(--panel);border:1px solid var(--garis);border-radius:var(--radius);padding:20px;box-shadow:var(--bayang)}
.kartu-judul{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px}
.kartu-judul h3{font-size:15px;font-weight:700;letter-spacing:-.2px}
.kartu-judul .sub{font-size:12px;color:var(--teks3);font-weight:500}
.kartu-judul .aksi{display:flex;gap:6px;align-items:center}

.grid{display:grid;gap:18px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-2-1{grid-template-columns:1.6fr 1fr}
.mt{margin-top:18px}

/* KPI card CRM */
.stat{background:var(--panel);border:1px solid var(--garis);border-radius:var(--radius);padding:19px 20px;
  box-shadow:var(--bayang);transition:var(--trans);position:relative}
.stat:hover{box-shadow:var(--bayang2);transform:translateY(-2px)}
.stat-kepala{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.stat-ikon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex-shrink:0}
.stat-ikon svg{width:21px;height:21px}
.stat-label{font-size:12.5px;color:var(--teks2);font-weight:600}
.stat-nilai{font-size:24px;font-weight:800;letter-spacing:-.7px;font-variant-numeric:tabular-nums}
.stat-bawah{display:flex;align-items:center;gap:7px;margin-top:10px;font-size:12px}
.tren{display:inline-flex;align-items:center;gap:3px;font-weight:700;padding:3px 7px;border-radius:6px;font-size:11.5px}
.tren.naik{background:var(--hijau-l);color:#047857}
.tren.turun{background:var(--merah-l);color:#B91C1C}
.tren.datar{background:var(--panel2);color:var(--teks2)}
.stat-bawah .ket{color:var(--teks3)}

/* Tabel CRM */
.tabel-bungkus{overflow-x:auto;margin:0 -20px -20px;padding:0 20px 4px}
table.tabel{width:100%;border-collapse:collapse;font-size:13.5px}
table.tabel th{text-align:left;padding:11px 14px;color:var(--teks3);font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;background:var(--panel2);white-space:nowrap;border-bottom:1px solid var(--garis)}
table.tabel th:first-child{border-radius:8px 0 0 8px}
table.tabel th:last-child{border-radius:0 8px 8px 0}
table.tabel td{padding:13px 14px;border-bottom:1px solid var(--garis);vertical-align:middle}
table.tabel tbody tr{transition:var(--trans)}
table.tabel tbody tr:hover{background:var(--panel2)}
table.tabel tbody tr:last-child td{border-bottom:none}
.kanan{text-align:right}
.num{font-variant-numeric:tabular-nums;font-weight:700}
.num.masuk{color:var(--hijau)} .num.keluar{color:var(--merah)}

.ikon-kat{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:15px;flex-shrink:0}
.sel-kat{display:flex;align-items:center;gap:11px}
.sel-kat .nm{font-weight:600;font-size:13.5px}
.sel-kat .sub2{font-size:11.5px;color:var(--teks3);margin-top:1px}

.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:11.5px;font-weight:600;
  background:var(--panel2);color:var(--teks2);white-space:nowrap}
.badge.masuk{background:var(--hijau-l);color:#047857}
.badge.keluar{background:var(--merah-l);color:#B91C1C}
.badge.transfer{background:var(--biru-l);color:#1D4ED8}
.titik{width:9px;height:9px;border-radius:50%;display:inline-block;flex-shrink:0}

.progress{height:8px;background:var(--panel2);border-radius:8px;overflow:hidden}
.progress > div{height:100%;border-radius:8px;transition:width .5s ease}
.progress.aman > div{background:var(--hijau)}
.progress.warn > div{background:var(--kuning)}
.progress.bahaya > div{background:var(--merah)}

/* Form */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.fld{display:flex;flex-direction:column;gap:6px}
.fld.penuh{grid-column:1/-1}
.fld label{font-size:12.5px;color:var(--teks2);font-weight:600}
.fld input,.fld select,.fld textarea{padding:10px 13px;background:var(--bg2);border:1px solid var(--garis);
  border-radius:var(--radius3);outline:none;transition:var(--trans);width:100%;font-size:14px}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--utama);box-shadow:0 0 0 3px var(--utama-l)}
.fld textarea{resize:vertical;min-height:70px}
.fld .petunjuk{font-size:11.5px;color:var(--teks3)}

.pil{display:flex;gap:5px;background:var(--panel2);padding:4px;border-radius:var(--radius3)}
.pil button{flex:1;padding:9px;border-radius:8px;font-weight:600;font-size:13px;color:var(--teks2);transition:var(--trans)}
.pil button.aktif{background:var(--bg2);color:var(--teks);box-shadow:var(--bayang)}
.pil button[data-j="masuk"].aktif{background:var(--hijau-l);color:#047857}
.pil button[data-j="keluar"].aktif{background:var(--merah-l);color:#B91C1C}
.pil button[data-j="transfer"].aktif{background:var(--biru-l);color:#1D4ED8}

/* Modal */
.modal-latar{position:fixed;inset:0;background:rgba(16,24,40,.5);backdrop-filter:blur(3px);z-index:100;
  display:flex;align-items:flex-start;justify-content:center;padding:44px 18px;overflow-y:auto}
.modal{width:100%;max-width:560px;background:var(--bg2);border-radius:18px;box-shadow:var(--bayang3);
  animation:naik .22s ease;margin:auto 0}
.modal-kepala{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--garis)}
.modal-kepala h3{font-size:16.5px;font-weight:800;letter-spacing:-.3px}
.modal-isi{padding:24px}
.modal-kaki{display:flex;gap:10px;justify-content:flex-end;padding:16px 24px;border-top:1px solid var(--garis);background:var(--panel2);border-radius:0 0 18px 18px}

.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:var(--teks);color:#fff;
  padding:13px 22px;border-radius:12px;box-shadow:var(--bayang3);z-index:200;font-size:13.5px;font-weight:600;
  animation:naik .22s ease;max-width:90vw}
.toast.ok{background:#065F46} .toast.err{background:#991B1B}

/* Chart */
.chart-batang{display:flex;align-items:flex-end;gap:5px;height:160px;padding:10px 0 0}
.chart-batang .batang{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;min-width:0}
.chart-batang .kolom{display:flex;gap:2px;align-items:flex-end;width:100%;justify-content:center}
.chart-batang .bar{width:44%;max-width:14px;border-radius:4px 4px 0 0;min-height:2px;transition:height .5s ease}
.chart-batang .bar.m{background:var(--hijau)} .chart-batang .bar.k{background:var(--merah)}
.chart-batang .lbl{font-size:9.5px;color:var(--teks3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.legenda-mini{display:flex;gap:16px;font-size:12px;color:var(--teks2);align-items:center}
.legenda-mini span{display:flex;align-items:center;gap:6px}

.donat{width:158px;height:158px;flex-shrink:0}
.legenda{display:flex;flex-direction:column;gap:11px;flex:1;min-width:0}
.legenda-item{display:flex;align-items:center;gap:10px;font-size:13px}
.legenda-item .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.legenda-item .vl{font-weight:700;font-variant-numeric:tabular-nums}

.kosong{text-align:center;padding:48px 20px;color:var(--teks3)}
.kosong .ikon{font-size:38px;opacity:.45;margin-bottom:12px}
.kosong p{font-size:13.5px;margin-bottom:16px}

.saring{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.saring input,.saring select{padding:9px 12px;background:var(--bg2);border:1px solid var(--garis);border-radius:var(--radius3);
  outline:none;font-size:13px;transition:var(--trans)}
.saring input:focus,.saring select:focus{border-color:var(--utama);box-shadow:0 0 0 3px var(--utama-l)}
.saring input[type=search]{min-width:190px;flex:1}

.daftar-akun{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.kartu-akun{background:var(--panel);border:1px solid var(--garis);border-radius:var(--radius);padding:19px;
  box-shadow:var(--bayang);transition:var(--trans);position:relative;overflow:hidden}
.kartu-akun:hover{box-shadow:var(--bayang2);transform:translateY(-2px)}
.kartu-akun::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--aksen)}
.kartu-akun .an{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px}
.kartu-akun .ab{font-size:22px;font-weight:800;margin-top:13px;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.kartu-akun .at{font-size:11.5px;color:var(--teks3);margin-top:3px}
.kartu-akun .aa{display:flex;gap:7px;margin-top:14px}
.kartu-akun.arsip{opacity:.55}

@media(max-width:1200px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-2-1{grid-template-columns:1fr}}
@media(max-width:1000px){.grid-3{grid-template-columns:1fr 1fr}.layar-tengah{grid-template-columns:1fr}.masuk-kiri{display:none}}
@media(max-width:860px){
  #sidebar{position:fixed;inset:0 auto 0 0;transform:translateX(-100%);box-shadow:var(--bayang3)}
  #sidebar.buka{transform:none}
  #btn-menu{display:grid}
  #konten{padding:18px}
  #topbar{padding:12px 16px;gap:10px}
  .cari-global{display:none}
  .grid-2,.fgrid,.grid-3{grid-template-columns:1fr}
  .modal-latar{padding:16px;align-items:center}
  #judul-hal{font-size:16px}
  .sub-judul{display:none}
}
@media(max-width:560px){
  .grid-4{grid-template-columns:1fr}
  .stat-nilai{font-size:21px}
  .lbl-penuh{display:none}
  .masuk-kanan{padding:22px}
}