/* =========================================================
   TEMA
   Semua warna aplikasi berasal dari daftar di bawah ini.
   Mode gelap cukup menimpa daftar yang sama, sehingga tidak
   ada satu pun warna yang perlu ditulis ulang di tempat lain.

   Aturan penamaan:
     --xxx      warna penuh, untuk teks/ikon/garis di atas permukaan
     --xxx2     latar lembut untuk chip, pesan, dan kotak sorotan
     --xxx-t    warna teks yang dipakai DI ATAS --xxx2
     --xxx-btn  isian tombol; teksnya selalu putih
   ========================================================= */
:root{
  color-scheme:light;

  /* --- warna merek --- */
  --nav:#12233f; --nav2:#1c3557;
  --aksen:#2a6ba4;        /* teks, tautan, ikon  */
  --aksen-btn:#2e75b6;    /* isian tombol        */
  --aksen-h:#2668a3;      /* tombol saat disorot */
  --aksen2:#4a9de0;
  --hijau:#2e9e5b; --merah:#d83b3b; --oranye:#c47f10; --ungu:#7b5ea7;
  --hijau-btn:#24824b; --merah-btn:#d83b3b;

  /* --- latar lembut + warna teks di atasnya --- */
  --hijau2:#e8f6ee;  --hijau-t:#1c6b3c;
  --merah2:#fdecec;  --merah-t:#a72020;
  --oranye2:#fdf3e2; --oranye-t:#8a5a08;
  --biru2:#e7f0f9;   --biru-t:#1f568a;
  --ungu2:#f4f1fa;   --ungu-t:#4a3d66;  --ungu-garis:#e2daf2;

  /* --- permukaan --- */
  --bg:#f5f7fa; --putih:#fff; --permukaan2:#fafbfc; --hover:#fafbfd;
  --kode:#eef2f7; --netral:#eef1f5; --netral2:#e3e8ee; --nonaktif:#f4f6f8;
  --aksen-lembut:#f7fbff;

  /* --- teks & garis --- */
  --teks:#1b2430; --teks2:#5e6a78; --judul:#12233f;
  --garis:#e6e9ee; --garis2:#dde3ea; --gulir:#c6ccd6;

  /* --- elemen khusus --- */
  --tirai:rgba(16,24,40,.5); --toast:#12233f;
  --bar-dasar:#8496b0;                       /* batang pembanding di grafik */
  --isi-hijau:rgba(46,158,91,.12); --isi-merah:rgba(216,59,59,.10);
  --toast-ok:#1c6b3c; --toast-galat:#a72020; --toast-warn:#8a5a08;
  --ungu-btn1:#7b5ea7; --ungu-btn2:#5f4a86;
  --ungu-btn1h:#6b4f96; --ungu-btn2h:#523f75;
  --rumus-bg:#12233f; --rumus-teks:#dbe6f2; --rumus-catatan:#8fa6c2;
  --login1:#12233f; --login2:#1c3557; --login3:#2e75b6;

  /* --- palet grafik --- */
  --palet1:#2e75b6; --palet2:#2e9e5b; --palet3:#e0921a; --palet4:#d83b3b;
  --palet5:#7b5ea7; --palet6:#4a9de0; --palet7:#41b8a0; --palet8:#c96fa8;
  --palet9:#8fa31e; --palet10:#e2725b; --palet11:#5b8def; --palet12:#9c7b4a;

  --bayang:0 1px 3px rgba(16,24,40,.06), 0 4px 16px rgba(16,24,40,.06);
  --bayang2:0 6px 24px rgba(16,24,40,.12);
  --radius:14px;
}

/* ---------------------------------------------------------
   MODE GELAP
   Latar abu-navy lembut, bukan hitam pekat, supaya tepi kartu
   tetap terlihat dan teks putih tidak menimbulkan efek halo.
   Setiap pasangan teks/latar sudah diperiksa memenuhi rasio
   kontras WCAG AA (4,5:1 untuk teks biasa).
   --------------------------------------------------------- */
html[data-tema="gelap"]{
  color-scheme:dark;

  --nav:#0f1620; --nav2:#16202e;
  --aksen:#5aa3e0; --aksen-btn:#3179bd; --aksen-h:#3d88ca; --aksen2:#7cb9ea;
  --hijau:#45c37d; --merah:#f87a72; --oranye:#f0a838; --ungu:#a98fd6;
  --hijau-btn:#2b8049; --merah-btn:#c33b36;

  --hijau2:#153020;  --hijau-t:#7fe2a7;
  --merah2:#37191a;  --merah-t:#ff9d95;
  --oranye2:#352814; --oranye-t:#f7c86e;
  --biru2:#152a41;   --biru-t:#8fc4f2;
  --ungu2:#241f36;   --ungu-t:#c5b0ea;  --ungu-garis:#393151;

  --bg:#131a24; --putih:#1b232f; --permukaan2:#212b39; --hover:#242f3e;
  --kode:#243040; --netral:#28333f; --netral2:#33404f; --nonaktif:#1d2531;
  --aksen-lembut:#18273a;

  --teks:#e6ecf3; --teks2:#a7b4c4; --judul:#f2f6fb;
  --garis:#2c3749; --garis2:#3a4759; --gulir:#3f4c5e;

  --tirai:rgba(4,8,14,.66); --toast:#2c3749;
  --bar-dasar:#61758a;
  --isi-hijau:rgba(69,195,125,.20); --isi-merah:rgba(248,122,114,.18);
  --toast-ok:#22794a; --toast-galat:#b03e3a; --toast-warn:#96650d;
  --ungu-btn1:#6f57a0; --ungu-btn2:#55427a;
  --ungu-btn1h:#7e64b3; --ungu-btn2h:#614c8a;
  --rumus-bg:#0d131c; --rumus-teks:#cfe0f2; --rumus-catatan:#8fa6c2;
  --login1:#0b1119; --login2:#122031; --login3:#24547f;

  --palet1:#5aa3e0; --palet2:#54cf8b; --palet3:#f0a838; --palet4:#f87a72;
  --palet5:#a98fd6; --palet6:#7cb9ea; --palet7:#4fd0b6; --palet8:#e18ac0;
  --palet9:#b3c93f; --palet10:#f08a72; --palet11:#7fa6f5; --palet12:#c19a63;

  --bayang:0 1px 3px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.35);
  --bayang2:0 8px 28px rgba(0,0,0,.5);
}

/* Perpindahan tema dibuat melembut supaya mata tidak kaget,
   tetapi animasi lain (geser menu, grafik) tidak ikut terganggu. */
body,.sidebar,.topbar,.kartu,.kpi,.modal,.nav-bawah,.pd-kotak-modal,
input,select,textarea,table,th,td{
  transition:background-color .18s linear,color .18s linear,border-color .18s linear;
}
@media(prefers-reduced-motion:reduce){
  body,.sidebar,.topbar,.kartu,.kpi,.modal,.nav-bawah,.pd-kotak-modal,
  input,select,textarea,table,th,td{transition:none}
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Inter','Segoe UI',Roboto,system-ui,sans-serif;background:var(--bg);
     color:var(--teks);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--aksen);text-decoration:none}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--gulir);border-radius:6px}
::-webkit-scrollbar-track{background:transparent}

/* ============ LOGIN ============ */
#login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--login1) 0%,var(--login2) 45%,var(--login3) 100%);padding:20px;z-index:100}
#login::before{content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 15% 25%,rgba(255,255,255,.09),transparent 42%),
             radial-gradient(circle at 85% 75%,rgba(255,255,255,.07),transparent 42%)}
.kartu-login{position:relative;background:var(--putih);border-radius:20px;box-shadow:var(--bayang2);
  width:100%;max-width:400px;padding:36px 32px;animation:naik .5s cubic-bezier(.2,.8,.3,1)}
@keyframes naik{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.logo-login{width:56px;height:56px;border-radius:16px;
  background:linear-gradient(135deg,var(--aksen),var(--nav));display:flex;align-items:center;
  justify-content:center;font-size:27px;margin:0 auto 16px}
.kartu-login h1{font-size:21px;text-align:center;color:var(--judul);font-weight:700}
.kartu-login .sub{text-align:center;color:var(--teks2);font-size:12.5px;margin:5px 0 26px}
.grup{margin-bottom:15px}
.grup label{display:block;font-size:11.5px;font-weight:600;color:var(--teks2);
  margin-bottom:5px;letter-spacing:.2px}
input,select,textarea{width:100%;padding:10px 12px;border:1.5px solid var(--garis);
  border-radius:9px;font-size:14px;font-family:inherit;color:var(--teks);background:var(--putih);
  transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--aksen);
  box-shadow:0 0 0 3px rgba(46,117,182,.12)}
input:disabled,select:disabled{background:var(--nonaktif);color:var(--teks2)}
.tbl-sandi{position:relative}
.tbl-sandi button{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--teks2);cursor:pointer;font-size:11px;padding:5px 8px}
button{font-family:inherit;cursor:pointer;border:none;border-radius:9px;font-weight:600;
  transition:transform .1s,box-shadow .15s,background .15s}
button:active{transform:scale(.985)}
button:disabled{opacity:.55;cursor:default}
.btn{padding:10px 16px;font-size:13.5px;background:var(--aksen-btn);color:#fff}
.btn:hover:not(:disabled){background:var(--aksen-h)}
.btn-blok{width:100%;padding:12px;font-size:14.5px;margin-top:8px}
.btn-abu{background:var(--netral);color:var(--teks)}
.btn-abu:hover:not(:disabled){background:var(--netral2)}
.btn-hijau{background:var(--hijau-btn);color:#fff}
.btn-merah{background:var(--merah-btn);color:#fff}
.btn-kecil{padding:5px 11px;font-size:12px;border-radius:7px}
.pesan{padding:10px 12px;border-radius:9px;font-size:12.5px;margin-top:14px;display:none;line-height:1.45}
.pesan.tampil{display:block;animation:naik .25s}
.pesan.ok{background:var(--hijau2);color:var(--hijau-t)}
.pesan.galat{background:var(--merah2);color:var(--merah-t)}
.pesan.warn{background:var(--oranye2);color:var(--oranye-t)}
.pesan.info{background:var(--biru2);color:var(--biru-t)}
.jejak{text-align:center;font-size:11px;color:var(--teks2);margin-top:22px;line-height:1.6}

/* ============ SHELL ============ */
#app{display:none;min-height:100vh}
#app.tampil{display:block}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:230px;background:var(--nav);
  display:flex;flex-direction:column;z-index:40;transition:transform .25s}
.sb-kepala{padding:18px 18px 14px;border-bottom:1px solid rgba(255,255,255,.09)}
.sb-kepala .judul{color:#fff;font-size:15px;font-weight:700;letter-spacing:.2px}
.sb-kepala .sub{color:rgba(255,255,255,.5);font-size:11px;margin-top:2px}
.sb-menu{flex:1;overflow-y:auto;padding:10px 9px}
.sb-menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18)}
.sb-item{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;
  color:rgba(255,255,255,.74);font-size:13.5px;cursor:pointer;margin-bottom:2px;
  transition:background .15s,color .15s;user-select:none}
.sb-item:hover{background:rgba(255,255,255,.07);color:#fff}
.sb-item.aktif{background:var(--aksen-btn);color:#fff;font-weight:600;
  box-shadow:0 3px 10px rgba(46,117,182,.35)}
.sb-item .ikon{font-size:16px;width:20px;text-align:center}
.sb-pisah{color:rgba(255,255,255,.32);font-size:10px;font-weight:700;letter-spacing:.9px;
  padding:15px 12px 6px;text-transform:uppercase}
.sb-kaki{padding:12px;border-top:1px solid rgba(255,255,255,.09)}
.sb-user{display:flex;align-items:center;gap:10px;color:#fff;font-size:12.5px;margin-bottom:9px}
.avatar{width:31px;height:31px;border-radius:50%;background:var(--aksen-btn);display:flex;
  align-items:center;justify-content:center;font-weight:700;font-size:12.5px;flex:0 0 auto}
.sb-user small{display:block;color:rgba(255,255,255,.5);font-size:10.5px}

.utama{margin-left:230px;min-height:100vh;display:flex;flex-direction:column}
.topbar{background:var(--putih);border-bottom:1px solid var(--garis);padding:12px 22px;
  display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:30}
.topbar h2{font-size:17px;font-weight:700;color:var(--judul);flex:1}
.hamburger{display:none;background:none;font-size:20px;color:var(--judul);padding:4px 8px}
.isi{padding:20px 22px 40px;flex:1;max-width:1400px;width:100%}

/* ============ PITA MOTIVASI ============
   Satu kalimat pada satu waktu, bukan barisan teks tanpa henti.
   Marquee klasik yang berputar selamanya melelahkan mata dan
   memaksa pembaca menunggu kalimat kembali dari kanan bila
   terlewat. Di sini kalimat berganti dengan pudar-naik, dan
   hanya berjalan mendatar ketika memang tidak muat.

   Warna pita mengikuti "nada" kalimat. Ini disengaja: kalimat
   ceria berlatar hijau di atas tagihan yang telat terasa tidak
   peka, jadi kabar buruk memakai warnanya sendiri. */
.pita{display:flex;align-items:center;gap:10px;
  padding:0 22px;height:36px;overflow:hidden;
  background:var(--biru2);border-bottom:1px solid var(--garis);
  position:sticky;top:var(--tinggi-topbar,53px);z-index:29;
  transition:background .35s ease,height .25s ease,opacity .25s ease}
.pita.sembunyi{height:0;opacity:0;border-bottom-width:0}
.pita-ikon{flex:0 0 auto;font-size:13px;line-height:1;
  transition:transform .3s ease}
.pita-jendela{flex:1;min-width:0;overflow:hidden;cursor:pointer;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 92%,transparent 100%)}
.pita-teks{display:inline-block;white-space:nowrap;font-size:12.5px;line-height:36px;
  font-weight:600;color:var(--biru-t);letter-spacing:.1px}
.pita-teks.masuk{animation:pitaMasuk .45s ease both}
.pita-teks.jalan{animation:pitaMasuk .45s ease both,
                           pitaJalan var(--pita-durasi,18s) ease-in-out 1.2s infinite alternate}
@keyframes pitaMasuk{from{opacity:0;transform:translateY(9px)}
                     to{opacity:1;transform:translateY(0)}}
@keyframes pitaJalan{0%{transform:translateX(0)}
                     100%{transform:translateX(calc(-100% + var(--pita-lebar,0px)))}}

/* Titik penanda: berapa kalimat yang antre di halaman ini dan
   di kalimat ke berapa kita sekarang. Tanpa ini pita terasa
   seperti benda yang bergerak sendiri tanpa awal dan akhir. */
.pita-titik{display:flex;gap:4px;flex:0 0 auto}
.pita-titik span{width:5px;height:5px;border-radius:50%;
  background:currentColor;opacity:.25;transition:opacity .3s ease,width .3s ease}
.pita-titik span.aktif{opacity:.85;width:12px;border-radius:3px}
.pita-x{background:none;border:0;cursor:pointer;flex:0 0 auto;
  font-size:16px;line-height:1;padding:2px 4px;border-radius:6px;
  color:currentColor;opacity:.4;transition:opacity .2s ease}
.pita-x:hover{opacity:.9}

/* Nada kalimat menentukan warna seluruh pita. */
.pita[data-nada="netral"]     {background:var(--biru2);   color:var(--biru-t)}
.pita[data-nada="netral"] .pita-teks   {color:var(--biru-t)}
.pita[data-nada="baik"]       {background:var(--hijau2);  color:var(--hijau-t)}
.pita[data-nada="baik"] .pita-teks     {color:var(--hijau-t)}
.pita[data-nada="peringatan"] {background:var(--oranye2); color:var(--oranye-t)}
.pita[data-nada="peringatan"] .pita-teks{color:var(--oranye-t)}
.pita[data-nada="genting"]    {background:var(--merah2);  color:var(--merah-t)}
.pita[data-nada="genting"] .pita-teks  {color:var(--merah-t)}

/* Sorotan (kalimat yang lahir dari angka pengguna) diberi tanda
   halus supaya bisa dibedakan dari kutipan biasa. */
.pita.sorotan .pita-ikon{transform:scale(1.15)}

/* Menghormati setelan "kurangi gerakan" pada perangkat: kalimat
   tetap berganti, tetapi tidak ada yang meluncur ke mana pun. */
@media(prefers-reduced-motion:reduce){
  .pita-teks.masuk,.pita-teks.jalan{animation:none}
  .pita-teks{white-space:normal;overflow:hidden;text-overflow:ellipsis;
    display:block;line-height:36px}
}

/* ============ KOMPONEN ============ */
.kartu{background:var(--putih);border-radius:var(--radius);box-shadow:var(--bayang);
  padding:17px 18px;margin-bottom:16px}
.kartu-judul{font-size:13.5px;font-weight:700;color:var(--judul);margin-bottom:13px;
  display:flex;align-items:center;gap:8px;justify-content:space-between}
.kartu-judul .kiri{display:flex;align-items:center;gap:8px}

.grid{display:grid;gap:14px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g21{grid-template-columns:2fr 1fr}
.g12{grid-template-columns:1fr 2fr}

.kpi{background:var(--putih);border-radius:var(--radius);box-shadow:var(--bayang);
  padding:15px 16px;position:relative;overflow:hidden;transition:transform .18s,box-shadow .18s}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--bayang2)}
.kpi::after{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--aksen)}
.kpi.hijau::after{background:var(--hijau)} .kpi.merah::after{background:var(--merah)}
.kpi.oranye::after{background:var(--oranye)} .kpi.ungu::after{background:var(--ungu)}
.kpi .label{font-size:11px;color:var(--teks2);font-weight:600;letter-spacing:.2px;
  display:flex;align-items:center;gap:6px}
.kpi .nilai{font-size:21px;font-weight:800;margin:6px 0 3px;letter-spacing:-.4px}
.kpi .kaki{font-size:11px;color:var(--teks2);display:flex;align-items:center;gap:4px}
.naikk{color:var(--hijau-t);font-weight:700} .turunn{color:var(--merah-t);font-weight:700}

.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;
  font-size:11px;font-weight:700;letter-spacing:.2px}
.chip.hijau{background:var(--hijau2);color:var(--hijau-t)}
.chip.merah{background:var(--merah2);color:var(--merah-t)}
.chip.oranye{background:var(--oranye2);color:var(--oranye-t)}
.chip.biru{background:var(--biru2);color:var(--biru-t)}
.chip.abu{background:var(--netral);color:var(--teks2)}

table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;font-weight:700;color:var(--teks2);text-transform:uppercase;
  letter-spacing:.4px;padding:9px 10px;border-bottom:2px solid var(--garis);white-space:nowrap;
  background:var(--permukaan2);position:sticky;top:0}
td{padding:9px 10px;border-bottom:1px solid var(--garis);vertical-align:middle}
tbody tr:hover{background:var(--hover)}
tbody tr:last-child td{border-bottom:none}
.kanan{text-align:right} .tengah{text-align:center}
.angka{font-variant-numeric:tabular-nums;white-space:nowrap}
.tabel-gulung{overflow:auto;max-height:460px;border-radius:10px;border:1px solid var(--garis)}
.tabel-gulung table{font-size:12.5px}

.bar-luar{height:7px;background:var(--netral);border-radius:5px;overflow:hidden;min-width:60px}
.bar-dalam{height:100%;border-radius:5px;transition:width .7s cubic-bezier(.2,.8,.3,1)}

/* --- panel saldo tiap akun --------------------------------- */
.akun-panel{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:9px 20px}
.akun-grup{min-width:0}
.akun-grup-kepala{display:flex;align-items:center;justify-content:space-between;gap:9px;
  padding:0 0 7px;margin-bottom:8px;border-bottom:1px solid var(--garis);
  font-size:12px;font-weight:700;color:var(--teks2);letter-spacing:.2px}
.akun-grup-kepala .angka{font-size:12.5px;color:var(--judul)}
.akun-grup-kepala .angka.minus{color:var(--merah)}
.akun-grup-cacah{display:inline-block;min-width:17px;padding:1px 5px;margin-left:3px;
  border-radius:20px;background:var(--netral);color:var(--teks2);
  font-size:10.5px;font-weight:700;text-align:center}
.akun-baris{padding:6px 0 8px}
.akun-atas{display:flex;align-items:baseline;gap:7px;margin-bottom:5px}
.akun-nama{font-size:13px;font-weight:600;color:var(--teks);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.akun-entitas{flex:0 0 auto;font-size:10.5px;color:var(--teks2);
  padding:1px 6px;border-radius:20px;background:var(--netral)}
.akun-nilai{margin-left:auto;flex:0 0 auto;font-size:13.5px;font-weight:700;color:var(--judul)}
.akun-nilai.minus{color:var(--merah)}
.akun-bar{height:5px;min-width:0}

/* mode privasi: nominal disamarkan tanpa mengubah tata letak */
.saldo-tersembunyi .nilai-saldo{color:transparent!important;background:var(--netral2);
  border-radius:5px;user-select:none}
.saldo-tersembunyi .kpi .nilai.nilai-saldo{background:var(--netral)}

/* --- halaman Saldo Akun ------------------------------------ */
.tabel-akun{font-size:13px}
.tabel-akun td{vertical-align:top}
.tabel-akun tfoot td{border-top:2px solid var(--garis2);border-bottom:none;
  background:var(--nonaktif);font-weight:700}
.tabel-akun tfoot tr:hover{background:var(--nonaktif)}
.akun-sel-nama{font-size:13px;font-weight:600;color:var(--teks)}
.akun-sel-info{font-size:11px;color:var(--teks2);margin-top:2px}
.akun-sel-saldo{font-weight:700;color:var(--judul)}
.akun-sel-saldo.minus{color:var(--merah)}

.akun-perhatian{display:flex;gap:11px;align-items:center;padding:9px 0;
  border-bottom:1px solid var(--garis)}
.akun-perhatian:last-child{border-bottom:none}
.akun-perhatian-garis{width:4px;align-self:stretch;border-radius:3px;flex:0 0 auto}
.akun-perhatian-nilai{font-weight:700;font-size:13px;white-space:nowrap}

.akun-entitas-blok{margin-bottom:15px}
.akun-entitas-blok:last-child{margin-bottom:0}
.akun-entitas-atas{display:flex;justify-content:space-between;align-items:baseline;
  font-size:13px;margin-bottom:6px}
.akun-entitas-atas .angka{font-weight:700;color:var(--judul)}
.akun-entitas-kaki{display:flex;flex-wrap:wrap;gap:7px 16px;margin-top:6px;
  font-size:11.5px;color:var(--teks2)}
.akun-entitas-kaki .titik{display:inline-block;width:8px;height:8px;border-radius:50%;
  margin-right:5px;vertical-align:baseline}
.akun-entitas-kaki b{color:var(--teks)}
.akun-bagian{font-size:11px;font-weight:700;color:var(--teks2);min-width:44px;text-align:right}

@media (max-width:640px){
  .tabel-akun{font-size:12px}
  .tabel-akun th,.tabel-akun td{padding:8px 7px}
}

.filter{display:flex;gap:9px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.filter .grup{margin:0;min-width:130px;flex:0 0 auto}
.filter .grup.lebar{flex:1;min-width:180px}
.filter select,.filter input{padding:8px 10px;font-size:13px}

.modal-latar{position:fixed;inset:0;background:var(--tirai);display:none;
  align-items:center;justify-content:center;z-index:90;padding:18px;backdrop-filter:blur(2px)}
.modal-latar.tampil{display:flex}
.modal{background:var(--putih);border-radius:16px;width:100%;max-width:460px;
  max-height:92vh;overflow-y:auto;box-shadow:var(--bayang2);animation:naik .25s}
.modal.lebar{max-width:720px}
.modal-kepala{padding:17px 20px;border-bottom:1px solid var(--garis);display:flex;
  align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--putih);z-index:2}
.modal-kepala h3{font-size:15.5px;color:var(--judul);font-weight:700}
.modal-tutup{background:none;color:var(--teks2);font-size:21px;line-height:1;padding:0 4px}
.modal-isi{padding:18px 20px}
.modal-kaki{padding:14px 20px;border-top:1px solid var(--garis);display:flex;gap:9px;
  justify-content:flex-end;position:sticky;bottom:0;background:var(--putih)}

.toast{position:fixed;right:20px;bottom:20px;background:var(--toast);color:#fff;padding:12px 17px;
  border-radius:11px;box-shadow:var(--bayang2);font-size:13px;z-index:120;max-width:330px;
  opacity:0;transform:translateY(14px);transition:opacity .25s,transform .25s;pointer-events:none}
.toast.tampil{opacity:1;transform:none}
.toast.ok{background:var(--toast-ok)} .toast.galat{background:var(--toast-galat)}
.toast.warn{background:var(--toast-warn)}

.muat{display:flex;align-items:center;justify-content:center;padding:44px;color:var(--teks2);
  font-size:13px;gap:10px}
.putar{width:17px;height:17px;border:2.5px solid var(--garis);border-top-color:var(--aksen);
  border-radius:50%;animation:putar .7s linear infinite}
@keyframes putar{to{transform:rotate(360deg)}}
.kosong{text-align:center;padding:36px 18px;color:var(--teks2);font-size:13px}
.kosong .ikon{font-size:34px;display:block;margin-bottom:9px;opacity:.4}

.halaman{display:none} .halaman.aktif{display:block;animation:masuk .25s}
@keyframes masuk{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.grafik-kotak{position:relative;height:270px}
.grafik-kotak.pendek{height:210px}
.grafik-kotak.tinggi{height:330px}

.tab{display:flex;gap:4px;border-bottom:2px solid var(--garis);margin-bottom:15px;overflow-x:auto}
.tab button{background:none;color:var(--teks2);padding:9px 15px;font-size:13px;border-radius:0;
  border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap}
.tab button.aktif{color:var(--aksen);border-bottom-color:var(--aksen);font-weight:700}

.rincian{display:flex;justify-content:space-between;padding:7px 0;font-size:13px;
  border-bottom:1px dashed var(--garis)}
.rincian:last-child{border-bottom:none}
.rincian .nilai{font-weight:700;font-variant-numeric:tabular-nums}
.rincian.total{border-top:2px solid var(--judul);margin-top:6px;padding-top:11px;font-size:14.5px}

@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}
  .g21,.g12,.g3{grid-template-columns:1fr}}
@media(max-width:820px){
  .sidebar{transform:translateX(-100%);box-shadow:var(--bayang2)}
  .sidebar.buka{transform:none}
  .utama{margin-left:0}
  .hamburger{display:block}
  .isi{padding:15px 13px 34px}
  .g4,.g2{grid-template-columns:1fr}
  .kpi .nilai{font-size:19px}
  .topbar h2{font-size:15px}
  .filter .grup{min-width:calc(50% - 5px);flex:1}
  #tirai.tampil{display:block;position:fixed;inset:0;background:var(--tirai);z-index:35}
}
#tirai{display:none}
@media print{.sidebar,.topbar,.pita,.filter,button{display:none!important}.utama{margin:0}}
.filter{display:flex;gap:9px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.filter .grup{margin:0;min-width:130px;flex:0 0 auto}
.filter .grup.lebar{flex:1;min-width:180px}
.filter select,.filter input{padding:8px 10px;font-size:13px}

.modal-latar{position:fixed;inset:0;background:var(--tirai);display:none;
  align-items:center;justify-content:center;z-index:90;padding:18px;backdrop-filter:blur(2px)}
.modal-latar.tampil{display:flex}
.modal{background:var(--putih);border-radius:16px;width:100%;max-width:460px;
  max-height:92vh;overflow-y:auto;box-shadow:var(--bayang2);animation:naik .25s}
.modal.lebar{max-width:720px}
.modal-kepala{padding:17px 20px;border-bottom:1px solid var(--garis);display:flex;
  align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--putih);z-index:2}
.modal-kepala h3{font-size:15.5px;color:var(--judul);font-weight:700}
.modal-tutup{background:none;color:var(--teks2);font-size:21px;line-height:1;padding:0 4px}
.modal-isi{padding:18px 20px}
.modal-kaki{padding:14px 20px;border-top:1px solid var(--garis);display:flex;gap:9px;
  justify-content:flex-end;position:sticky;bottom:0;background:var(--putih)}

.toast{position:fixed;right:20px;bottom:20px;background:var(--toast);color:#fff;padding:12px 17px;
  border-radius:11px;box-shadow:var(--bayang2);font-size:13px;z-index:120;max-width:330px;
  opacity:0;transform:translateY(14px);transition:opacity .25s,transform .25s;pointer-events:none}
.toast.tampil{opacity:1;transform:none}
.toast.ok{background:var(--toast-ok)} .toast.galat{background:var(--toast-galat)}
.toast.warn{background:var(--toast-warn)}

.muat{display:flex;align-items:center;justify-content:center;padding:44px;color:var(--teks2);
  font-size:13px;gap:10px}
.putar{width:17px;height:17px;border:2.5px solid var(--garis);border-top-color:var(--aksen);
  border-radius:50%;animation:putar .7s linear infinite}
@keyframes putar{to{transform:rotate(360deg)}}
.kosong{text-align:center;padding:36px 18px;color:var(--teks2);font-size:13px}
.kosong .ikon{font-size:34px;display:block;margin-bottom:9px;opacity:.4}

.halaman{display:none} .halaman.aktif{display:block;animation:masuk .25s}
@keyframes masuk{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.grafik-kotak{position:relative;height:270px}
.grafik-kotak.pendek{height:210px}
.grafik-kotak.tinggi{height:330px}

.tab{display:flex;gap:4px;border-bottom:2px solid var(--garis);margin-bottom:15px;overflow-x:auto}
.tab button{background:none;color:var(--teks2);padding:9px 15px;font-size:13px;border-radius:0;
  border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap}
.tab button.aktif{color:var(--aksen);border-bottom-color:var(--aksen);font-weight:700}

.rincian{display:flex;justify-content:space-between;padding:7px 0;font-size:13px;
  border-bottom:1px dashed var(--garis)}
.rincian:last-child{border-bottom:none}
.rincian .nilai{font-weight:700;font-variant-numeric:tabular-nums}
.rincian.total{border-top:2px solid var(--judul);margin-top:6px;padding-top:11px;font-size:14.5px}

@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}
  .g21,.g12,.g3{grid-template-columns:1fr}}
@media(max-width:820px){
  .sidebar{transform:translateX(-100%);box-shadow:var(--bayang2)}
  .sidebar.buka{transform:none}
  .utama{margin-left:0}
  .hamburger{display:block}
  .isi{padding:15px 13px 34px}
  .g4,.g2{grid-template-columns:1fr}
  .kpi .nilai{font-size:19px}
  .topbar h2{font-size:15px}
  .filter .grup{min-width:calc(50% - 5px);flex:1}
  #tirai.tampil{display:block;position:fixed;inset:0;background:var(--tirai);z-index:35}
}
#tirai{display:none}
@media print{.sidebar,.topbar,.pita,.filter,button{display:none!important}.utama{margin:0}}
/* ============ PANDUAN PENGGUNAAN ============ */
#pdLatar{position:fixed;inset:0;background:var(--tirai);display:none;
  align-items:center;justify-content:center;z-index:110;padding:18px;backdrop-filter:blur(3px)}
#pdLatar.tampil{display:flex}
.pd-kotak-modal{background:var(--putih);border-radius:18px;width:100%;max-width:1020px;
  height:min(92vh,760px);display:flex;flex-direction:column;overflow:hidden;
  box-shadow:var(--bayang2);animation:naik .3s cubic-bezier(.2,.8,.3,1)}
.pd-kepala{padding:16px 22px;background:linear-gradient(120deg,var(--nav),var(--aksen-btn));
  color:#fff;display:flex;align-items:center;gap:13px;flex:0 0 auto}
.pd-kepala .pd-ikon{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;font-size:20px;flex:0 0 auto}
.pd-kepala h3{font-size:17px;font-weight:700;line-height:1.25}
.pd-kepala .pd-sub{font-size:11.5px;opacity:.78;margin-top:1px}
.pd-kepala .pd-x{margin-left:auto;background:rgba(255,255,255,.16);color:#fff;
  width:31px;height:31px;border-radius:9px;font-size:19px;line-height:1;flex:0 0 auto}
.pd-kepala .pd-x:hover{background:rgba(255,255,255,.28)}

.pd-badan{display:flex;flex:1;min-height:0}
.pd-nav{width:250px;border-right:1px solid var(--garis);background:var(--permukaan2);
  overflow-y:auto;padding:11px 9px;flex:0 0 auto}
.pd-cari{margin:2px 3px 10px}
.pd-cari input{padding:8px 10px;font-size:12.5px;background:var(--putih)}
.pd-grup{font-size:10px;font-weight:700;color:var(--teks2);letter-spacing:.9px;
  text-transform:uppercase;padding:12px 11px 5px}
.pd-nav-item{display:flex;align-items:flex-start;gap:9px;padding:9px 11px;border-radius:9px;
  cursor:pointer;margin-bottom:2px;transition:background .13s;user-select:none}
.pd-nav-item:hover{background:var(--kode)}
.pd-nav-item.aktif{background:var(--aksen-btn);color:#fff}
.pd-nav-item.aktif .pd-nav-ring{color:rgba(255,255,255,.72)}
.pd-nav-item .pd-nav-ikon{font-size:15px;flex:0 0 auto;line-height:1.35}
.pd-nav-item .pd-nav-jud{font-size:13px;font-weight:600;line-height:1.32}
.pd-nav-ring{font-size:10.5px;color:var(--teks2);line-height:1.35;margin-top:2px;display:block}

.pd-isi{flex:1;overflow-y:auto;padding:24px 28px 30px;min-width:0}
.pd-isi h2{font-size:20px;color:var(--judul);font-weight:800;margin-bottom:4px;
  display:flex;align-items:center;gap:10px}
.pd-isi h4{font-size:14px;color:var(--judul);font-weight:700;margin:22px 0 9px;
  padding-bottom:6px;border-bottom:2px solid var(--garis)}
.pd-isi p{margin-bottom:11px;font-size:13.5px;line-height:1.68}
.pd-isi code{background:var(--kode);padding:1px 6px;border-radius:5px;font-size:12px;
  font-family:'Consolas','Courier New',monospace;color:var(--judul)}
.pd-intro{font-size:14px;color:var(--teks2);line-height:1.7;padding-bottom:6px}
.pd-jalur{background:var(--kode);padding:1.5px 7px;border-radius:5px;font-size:12.5px;
  font-weight:600;color:var(--aksen);white-space:nowrap}

.pd-langkah{margin:0 0 13px 0;padding-left:0;counter-reset:pd}
.pd-langkah li{list-style:none;counter-increment:pd;position:relative;
  padding:0 0 13px 40px;font-size:13.5px;line-height:1.66}
.pd-langkah li::before{content:counter(pd);position:absolute;left:0;top:0;
  width:26px;height:26px;border-radius:50%;background:var(--aksen-btn);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700}
.pd-daftar{margin:0 0 13px 19px;font-size:13.5px;line-height:1.68}
.pd-daftar li{margin-bottom:7px;padding-left:3px}

.pd-tabel{width:100%;border-collapse:collapse;font-size:13px;margin:4px 0 15px}
.pd-tabel th{background:var(--kode);color:var(--judul);font-size:11px;padding:8px 11px;
  text-align:left;border-bottom:2px solid var(--garis2);position:static}
.pd-tabel td{padding:9px 11px;border-bottom:1px solid var(--garis);vertical-align:top;
  line-height:1.55}
.pd-tabel tr:last-child td{border-bottom:none}

.pd-kotak{padding:13px 15px;border-radius:11px;font-size:13px;line-height:1.66;margin:13px 0}
.pd-kotak.biru{background:var(--biru2);border-left:4px solid var(--aksen)}
.pd-kotak.kuning{background:var(--oranye2);border-left:4px solid var(--oranye)}
.pd-kotak.hijau{background:var(--hijau2);border-left:4px solid var(--hijau)}
.pd-kotak b{color:var(--judul)}

.pd-rumus{background:var(--rumus-bg);color:var(--rumus-teks);padding:15px 18px;border-radius:11px;
  font-family:'Consolas','Courier New',monospace;font-size:12.5px;line-height:1.85;margin:6px 0 13px}
.pd-rumus .pd-catatan{color:var(--rumus-catatan);font-size:11px}

.pd-tanya{padding:13px 0;border-bottom:1px solid var(--garis)}
.pd-tanya:last-child{border-bottom:none}
.pd-tanya b{display:block;font-size:13.5px;color:var(--judul);margin-bottom:5px}
.pd-tanya p{margin:0;font-size:13px;color:var(--teks2);line-height:1.66}

.pd-kaki{padding:12px 22px;border-top:1px solid var(--garis);display:flex;
  align-items:center;gap:11px;flex:0 0 auto;background:var(--permukaan2);flex-wrap:wrap}
.pd-cek{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--teks2);
  cursor:pointer;user-select:none}
.pd-cek input{width:auto;cursor:pointer}
.pd-maju{margin-left:auto;display:flex;gap:8px;align-items:center}
.pd-nomor{font-size:11.5px;color:var(--teks2);margin-right:4px}

.pd-bantu{background:rgba(255,255,255,.18);color:#fff;width:29px;height:29px;
  border-radius:8px;font-size:14px;line-height:1;flex:0 0 auto}
.tb-bantu{background:var(--kode);color:var(--aksen);width:31px;height:31px;border-radius:9px;
  font-size:15px;line-height:1;flex:0 0 auto;font-weight:700}
.tb-bantu:hover{background:var(--aksen-btn);color:#fff}

@media(max-width:820px){
  #pdLatar{padding:0}
  .pd-kotak-modal{max-width:100%;height:100vh;border-radius:0}
  .pd-badan{flex-direction:column}
  .pd-nav{width:100%;max-height:38vh;border-right:none;border-bottom:1px solid var(--garis)}
  .pd-isi{padding:18px 16px 26px}
  .pd-isi h2{font-size:17px}
  .pd-kaki{padding:10px 14px}
  .pd-maju{width:100%;margin-left:0;justify-content:space-between}
}
/* ============ KARTU RASIO CICILAN ============ */
.kotak-gauge{position:relative;height:132px;margin:2px 0 0}
.gauge-skala{display:flex;justify-content:space-between;padding:0 6px;margin:-2px 0 12px;
  font-size:10px;color:var(--teks2);font-weight:600}
.gauge-info{border-top:1px solid var(--garis);padding-top:10px}
.gauge-baris{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:5px 0;font-size:12.5px;color:var(--teks2)}
.gauge-baris b{color:var(--teks);font-weight:700;font-size:13px;white-space:nowrap}
.gauge-status{margin-top:10px;padding:7px 11px;border-radius:8px;font-size:11.5px;
  font-weight:700;text-align:center}
/* ============ SIDEBAR: MODE LEBAR / RAIL / SEMBUNYI ============ */
.sidebar{transition:width .22s cubic-bezier(.2,.8,.3,1),transform .22s cubic-bezier(.2,.8,.3,1)}
.utama{transition:margin-left .22s cubic-bezier(.2,.8,.3,1)}
.sb-kepala{position:relative}
.sb-ciut{position:absolute;right:9px;top:15px;background:rgba(255,255,255,.12);color:#fff;
  width:25px;height:25px;border-radius:7px;font-size:13px;line-height:1;display:flex;
  align-items:center;justify-content:center;flex:0 0 auto}
.sb-ciut:hover{background:rgba(255,255,255,.24)}
.sb-item{position:relative}
.sb-sembunyi{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;
  padding:7px;margin-bottom:8px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.72);
  font-size:11.5px;font-weight:600;border-radius:8px}
.sb-sembunyi:hover{background:rgba(255,255,255,.16);color:#fff}

/* --- mode rail: hanya ikon --- */
body.sb-rail .sidebar{width:66px}
body.sb-rail .utama{margin-left:66px}
body.sb-rail .sb-kepala{padding:16px 8px 13px;text-align:center}
body.sb-rail .sb-kepala .judul span,
body.sb-rail .sb-kepala .sub,
body.sb-rail .sb-ciut,
body.sb-rail .sb-pisah,
body.sb-rail .sb-sembunyi span,
body.sb-rail .sb-user div:not(.avatar),
body.sb-rail .sb-kaki .btn-abu{display:none}
body.sb-rail .sb-kepala .judul{font-size:19px}
body.sb-rail .sb-menu{padding:9px 7px}
body.sb-rail .sb-item{justify-content:center;padding:10px 0;gap:0;font-size:0}
body.sb-rail .sb-item .ikon{font-size:17px;width:auto}
body.sb-rail .sb-item::after{content:attr(data-nama);position:absolute;left:calc(100% + 9px);
  top:50%;transform:translateY(-50%);background:var(--toast);color:#fff;font-size:12px;
  font-weight:600;padding:6px 11px;border-radius:7px;white-space:nowrap;opacity:0;
  pointer-events:none;transition:opacity .13s;z-index:60;box-shadow:var(--bayang2)}
body.sb-rail .sb-item:hover::after{opacity:1}
body.sb-rail .sb-kaki{padding:10px 7px;text-align:center}
body.sb-rail .sb-user{justify-content:center;margin-bottom:0}
body.sb-rail .sb-sembunyi{padding:8px 0;margin-bottom:6px}

/* --- mode sembunyi penuh --- */
body.sb-tutup .sidebar{transform:translateX(-100%)}
body.sb-tutup .utama{margin-left:0}

/* ============ NAVIGASI BAWAH (HP) ============ */
.nav-bawah{display:none;position:fixed;left:0;right:0;bottom:0;z-index:45;
  background:var(--putih);border-top:1px solid var(--garis);
  padding:5px 4px calc(5px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -2px 12px rgba(16,24,40,.07)}
.nav-bawah-isi{display:flex;justify-content:space-around;align-items:stretch;gap:2px}
.nb-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;
  border-radius:9px;color:var(--teks2);font-size:9.5px;font-weight:600;cursor:pointer;
  background:none;line-height:1.25;text-align:center}
.nb-item .ikon{font-size:17px;line-height:1}
.nb-item.aktif{color:var(--aksen);background:var(--biru2)}
.nb-item:active{transform:scale(.94)}

@media(max-width:820px){
  body.sb-rail .sidebar{width:230px}
  body.sb-rail .utama,body.sb-tutup .utama{margin-left:0}
  body.sb-rail .sb-kepala{padding:18px 18px 14px;text-align:left}
  body.sb-rail .sb-kepala .judul span,body.sb-rail .sb-kepala .sub,
  body.sb-rail .sb-pisah,body.sb-rail .sb-sembunyi span,
  body.sb-rail .sb-user div:not(.avatar),body.sb-rail .sb-kaki .btn-abu{display:block}
  body.sb-rail .sb-user div:not(.avatar){display:block}
  body.sb-rail .sb-item{justify-content:flex-start;padding:9px 11px;gap:11px;font-size:13.5px}
  body.sb-rail .sb-item::after{display:none}
  body.sb-rail .sb-menu{padding:10px 9px}
  body.sb-rail .sb-kaki{padding:12px;text-align:left}
  body.sb-tutup .sidebar{transform:translateX(-100%)}
  .sb-ciut{display:none}
  .nav-bawah{display:block}
  .isi{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .toast{bottom:calc(74px + env(safe-area-inset-bottom,0px));right:12px;left:12px;max-width:none}
}
/* ============ PENYEMPURNAAN LAYAR KECIL ============ */
@media(max-width:820px){
  /* kartu ringkasan tetap dua kolom agar tidak terlalu panjang digulir */
  .g4,.g2,.g3,.g21,.g12{grid-template-columns:repeat(2,1fr)}
  .grid{gap:10px}
  .kpi{padding:12px 13px}
  .kpi .label{font-size:10px;line-height:1.35}
  .kpi .nilai{font-size:16.5px;margin:5px 0 2px;letter-spacing:-.3px}
  .kpi .kaki{font-size:9.5px;line-height:1.35}
  .kartu{padding:14px 13px;border-radius:12px}
  .kartu-judul{font-size:12.5px;flex-wrap:wrap;gap:7px}

  /* grafik lebih rendah supaya muat satu layar */
  .grafik-kotak{height:230px}
  .grafik-kotak.pendek{height:190px}
  .grafik-kotak.tinggi{height:270px}
  .kotak-gauge{height:118px}

  /* topbar ringkas */
  .topbar{padding:9px 12px;gap:8px}
  .topbar h2{font-size:15px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap}
  #pilihPeriode{min-width:112px!important;padding:7px 8px;font-size:12.5px}
  .tb-bantu{width:29px;height:29px;font-size:14px}

  /* pita: lebih rendah, tanpa titik penanda agar kalimat dapat
     ruang selebar mungkin di layar sempit */
  .pita{padding:0 12px;height:32px;gap:8px}
  .pita-teks{font-size:12px;line-height:32px}
  .pita-titik{display:none}

  /* tabel lebih rapat */
  .tabel-gulung{max-height:none;-webkit-overflow-scrolling:touch}
  .tabel-gulung table{font-size:12px}
  th{font-size:10px;padding:7px 8px}
  td{padding:8px 8px}

  /* sasaran sentuh lebih besar */
  .btn-kecil{padding:8px 12px;font-size:12.5px}
  .sb-item{padding:11px 12px}
  input,select,textarea{font-size:16px}   /* mencegah layar ikut membesar saat mengetik */
  .filter select,.filter input{font-size:16px;padding:9px 10px}

  /* modal memenuhi layar */
  .modal-latar{padding:0;align-items:flex-end}
  .modal,.modal.lebar{max-width:100%;max-height:94vh;border-radius:16px 16px 0 0}
  .modal-kaki{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .modal-kaki .btn{flex:1}
}
@media(max-width:480px){
  .g4,.g2,.g3,.g21,.g12{grid-template-columns:1fr}
  .isi{padding-left:11px;padding-right:11px}
  .kpi .nilai{font-size:19px}
  .grafik-kotak{height:215px}
}
/* ============ TOMBOL MENU: SELALU TERSEDIA ============ */
/* Aturan ini sengaja diletakkan paling akhir agar menimpa .hamburger{display:none}
   di bagian atas berkas. Tanpa ini, sidebar yang disembunyikan di layar lebar
   tidak punya tombol untuk memunculkannya kembali. */
.hamburger{display:flex!important;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;border-radius:9px;background:var(--kode);
  color:var(--judul);font-size:15px;line-height:1;flex:0 0 auto}
.hamburger:hover{background:var(--aksen-btn);color:#fff}

/* saat sidebar tersembunyi penuh, tombolnya ditonjolkan supaya mudah ditemukan */
body.sb-tutup .hamburger{background:var(--aksen-btn);color:#fff;
  box-shadow:0 0 0 3px rgba(46,117,182,.2)}
body.sb-tutup .hamburger::after{content:'Menu';font-size:11.5px;font-weight:700;
  margin-left:7px;letter-spacing:.2px}
body.sb-tutup .hamburger{width:auto;padding:0 11px}

/* penanda tepi kiri sebagai isyarat tambahan bahwa menu sedang disembunyikan */
.tepi-menu{display:none;position:fixed;left:0;top:0;bottom:0;width:6px;z-index:38;
  background:linear-gradient(90deg,rgba(46,117,182,.22),transparent);cursor:pointer}
body.sb-tutup .tepi-menu{display:block}
.tepi-menu:hover{background:linear-gradient(90deg,rgba(46,117,182,.45),transparent)}

@media(max-width:820px){
  body.sb-tutup .hamburger::after{content:none}
  body.sb-tutup .hamburger{width:34px;padding:0;background:var(--kode);color:var(--judul);
    box-shadow:none}
  .tepi-menu{display:none!important}
}

/* ============ INPUT SUARA & PENAFSIRAN AI ============ */
.btn-suara{background:linear-gradient(135deg,var(--ungu-btn1),var(--ungu-btn2));color:#fff}
.btn-suara:hover:not(:disabled){background:linear-gradient(135deg,var(--ungu-btn1h),var(--ungu-btn2h))}

.suara-petunjuk{display:flex;gap:11px;align-items:flex-start;background:var(--ungu2);
  border:1px solid var(--ungu-garis);border-radius:11px;padding:12px 13px;margin-bottom:15px;
  font-size:12.5px;color:var(--ungu-t);line-height:1.5}
.suara-petunjuk .ikon{font-size:20px;line-height:1.2;flex-shrink:0}
.suara-kecil{font-size:11.5px;color:var(--teks2);margin-top:3px}

.rekam-tombol{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  padding:17px 16px;border:none;border-radius:14px;color:#fff;
  background:linear-gradient(135deg,var(--ungu-btn1),var(--ungu-btn2));box-shadow:var(--bayang)}
.rekam-tombol:hover:not(:disabled){background:linear-gradient(135deg,var(--ungu-btn1h),var(--ungu-btn2h))}
.rekam-tombol:active:not(:disabled){transform:scale(.985)}
.rekam-ikon{font-size:27px;line-height:1;flex-shrink:0;width:48px;height:48px;border-radius:13px;
  background:rgba(255,255,255,.17);display:flex;align-items:center;justify-content:center}
.rekam-tombol.sibuk .rekam-ikon{animation:denyut 1.1s ease-in-out infinite}
.rekam-teks{flex:1;min-width:0}
.rekam-teks b{display:block;font-size:15.5px;margin-bottom:2px}
.rekam-teks i{display:block;font-style:normal;font-size:11.5px;opacity:.82;line-height:1.45}
.rekam-bantu{font-size:11.5px;color:var(--teks2);margin-top:8px;text-align:center;line-height:1.5}

.suara-atau{display:flex;align-items:center;gap:11px;margin:17px 0 3px;
  font-size:11px;color:var(--teks2);text-transform:uppercase;letter-spacing:.5px}
.suara-atau::before,.suara-atau::after{content:'';flex:1;height:1px;background:var(--garis)}

.suara-baris{display:flex;justify-content:space-between;align-items:center;gap:10px;
  margin-top:6px;font-size:11.5px;color:var(--teks2);flex-wrap:wrap}
.suara-baris a{font-size:11.5px;font-weight:600}
.suara-baris a.rekam{color:var(--merah-t)}
.suara-baris a.rekam::before{content:'';display:inline-block;width:7px;height:7px;
  border-radius:50%;background:var(--merah);margin-right:5px;vertical-align:middle;
  animation:denyut 1.1s ease-in-out infinite}
@keyframes denyut{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.78)}}

.suara-contoh{margin-top:13px;padding:11px 13px;background:var(--bg);border-radius:10px;
  font-size:12px;color:var(--teks2);line-height:1.7}
.suara-contoh b{display:block;color:var(--teks);font-size:11.5px;margin-bottom:4px}
.suara-contoh div{font-style:italic}

.putar.kecil{width:12px;height:12px;border-width:2px;display:inline-block;
  vertical-align:-2px;margin-right:6px}

.ai-kotak{background:var(--ungu2);border:1px solid var(--ungu-garis);border-radius:11px;
  padding:12px 13px;margin-bottom:16px}
.ai-kepala{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ai-label{font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:var(--ungu-t)}
.ai-yakin{font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px}
.ai-yakin.tinggi{background:var(--hijau2);color:var(--hijau-t)}
.ai-yakin.sedang{background:var(--oranye2);color:var(--oranye-t)}
.ai-yakin.rendah{background:var(--merah2);color:var(--merah-t)}
.ai-ucapan{margin-top:7px;font-size:13px;font-style:italic;color:var(--teks);line-height:1.5}
.ai-catatan{margin:9px 0 0;padding-left:17px;font-size:11.5px;color:var(--oranye-t);line-height:1.6}
.ai-catatan li{margin-bottom:2px}
.ai-ingat{margin-top:9px;font-size:11px;color:var(--teks2)}

/* ---- pilihan cara catat (tombol ➕ Catat di bilah bawah) ---- */
.pilih-cara{display:flex;flex-direction:column;gap:11px}
.pc-kartu{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  padding:16px 15px;border:1.5px solid var(--garis);border-radius:13px;
  background:var(--putih);color:var(--teks);font-weight:400}
.pc-kartu:hover{border-color:var(--aksen);background:var(--aksen-lembut)}
.pc-kartu:active{transform:scale(.985)}
.pc-ikon{font-size:26px;line-height:1;flex-shrink:0;width:44px;height:44px;border-radius:12px;
  background:var(--bg);display:flex;align-items:center;justify-content:center}
.pc-kartu:first-child .pc-ikon{background:var(--ungu2)}
.pc-teks{flex:1;min-width:0}
.pc-teks b{display:block;font-size:14.5px;color:var(--judul);margin-bottom:2px}
.pc-teks i{display:block;font-style:normal;font-size:12px;color:var(--teks2);line-height:1.45}
.pc-panah{font-size:22px;color:var(--teks2);flex-shrink:0;opacity:.5}
.pc-ingat{display:flex;align-items:center;gap:8px;margin-top:15px;font-size:12.5px;
  color:var(--teks2);cursor:pointer}
.pc-ingat input{width:auto;cursor:pointer}

/* ---- keadaan "sedang mendengarkan" (dikte langsung) ----
   Dipakai mode demo, dan siap dipakai versi terpasang bila suatu
   saat dikte langsung diaktifkan di sana juga. Warnanya merah agar
   jelas berbeda dari keadaan "sedang mengirim" yang tetap ungu. */
.rekam-tombol.dengar{background:linear-gradient(135deg,var(--merah),var(--merah-t))}
.rekam-tombol.dengar:hover:not(:disabled){
  background:linear-gradient(135deg,var(--merah),var(--merah-t));filter:brightness(1.06)}
.rekam-tombol.dengar .rekam-ikon{background:rgba(255,255,255,.22)}
@media(prefers-reduced-motion:reduce){
  .rekam-tombol.sibuk .rekam-ikon,.suara-baris a.rekam::before{animation:none}
}

/* ---- panel suara pada layar kecil ----
   Tombol pada bilah filter dibuat berbagi baris supaya "Catat dengan
   Suara" tidak terpotong, dan isi panelnya sedikit dirapatkan agar
   tetap muat satu layar tanpa banyak menggulung. */
@media(max-width:768px){
  .filter .btn{flex:1 1 auto;min-width:150px}
  .filter .btn.btn-abu{flex:0 0 auto;min-width:0}
  .rekam-tombol{padding:15px 14px;gap:11px}
  .rekam-ikon{width:44px;height:44px;font-size:24px;border-radius:12px}
  .rekam-teks b{font-size:14.5px}
  .rekam-teks i{font-size:11px}
  .suara-atau{margin:15px 0 3px}
  .suara-contoh{font-size:11.5px;line-height:1.65}
  .ai-ucapan{font-size:12.5px}
  .ai-kotak{padding:11px 12px;margin-bottom:14px}
}
@media(max-width:380px){
  .rekam-tombol{padding:13px 12px;gap:10px}
  .rekam-ikon{width:40px;height:40px;font-size:22px}
  .rekam-teks b{font-size:13.5px}
  .suara-baris{gap:6px}
}