/* ═══════════════════════════════════════════════════════════
   Check Paid — sistem visual

   Penyegaran tampilan tanpa mengubah struktur: seluruh nama kelas
   sama persis dengan sebelumnya, yang berubah hanya nilai visual —
   jarak, radius, bayangan, keadaan interaksi, dan perilaku responsif.

   Susunan berkas:
     1. Token          6. Kartu            11. Saringan
     2. Dasar          7. Chip & keadaan   12. KPI & pacing
     3. Utilitas       8. Tabel            13. Grafik & batang
     4. Tombol         9. Kerangka         14. Modal & masuk
     5. Form          10. Kepala halaman   15. Responsif
                                          16. Form HSMP & Package Catalog
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Token ────────────────────────────────────────────── */
/* Token desain ada di warna.css, dimuat lebih dulu oleh setiap halaman. */

/* ── 2. Dasar ────────────────────────────────────────────── */
* { box-sizing: border-box; }

html {
  background: var(--bg);
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: transparent;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* Tautan dalam halaman tidak lagi tertutup bar atas yang menempel. */
[id] { scroll-margin-top: calc(var(--topbar) + var(--bilah) + var(--s5)); }

a { color: var(--r600); text-decoration: none; transition: color var(--trans); }
a:hover { text-decoration: underline; }
button { font: inherit; }

/* Satu gaya fokus untuk semua elemen yang bisa diklik. Sebelumnya
   hampir tidak ada, sehingga navigasi dengan keyboard sulit diikuti. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--r600);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.ikon { width: 18px; height: 18px; flex: none; }

/* ── 3. Utilitas ─────────────────────────────────────────── */
.num, table, .kpi-nilai, .pacing-nilai { font-variant-numeric: tabular-nums; }
code {
  font-size: .92em; padding: 1px 5px; border-radius: 5px;
  background: var(--n050); color: var(--ink2);
}
.atas-spasi { flex: 1; }

/* ── 4. Tombol ───────────────────────────────────────────── */
.tombol-utama, .tombol-garis, .tombol-ikon {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2); border-radius: var(--r-md);
  font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: background var(--trans), border-color var(--trans),
              color var(--trans), box-shadow var(--trans), transform var(--trans);
}
/* Tombol ditekan lebih singkat daripada saat dilepas: tekanan harus terasa
   seketika, pemulihannya yang boleh melambat. Itu yang membuat responsnya
   terasa lembut tanpa terasa lambat. */
.tombol-utama:active, .tombol-garis:active, .tombol-ikon:active { transition-duration: var(--t-tekan); }

.tombol-utama {
  height: 48px; padding: 0 var(--s6); border: 0;
  background: var(--r600); color: #fff; font-size: 14.5px;
  box-shadow: 0 1px 2px rgba(165,0,23,.13), 0 4px 12px rgba(230,0,18,.15);
}
.tombol-utama:hover {
  background: var(--r900); transform: translateY(-1px); text-decoration: none;
  box-shadow: 0 2px 4px rgba(165,0,23,.13), 0 8px 18px rgba(230,0,18,.19);
}
.tombol-utama:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(165,0,23,.16); }

.tombol-garis {
  height: 40px; padding: 0 var(--s4);
  border: 1px solid var(--line); background: #fff;
  color: var(--r600); font-size: 13.5px; box-shadow: var(--sh1);
}
.tombol-garis:hover { background: var(--n050); border-color: var(--r200); text-decoration: none; }
.tombol-garis:active { background: var(--r050); border-color: var(--r200); }

.tombol-ikon {
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line); background: #fff; color: var(--ink2);
}
.tombol-ikon:hover { background: var(--n050); color: var(--r600); border-color: var(--r200); }
.tombol-ikon:active { background: var(--r050); color: var(--r600); }

/* ── 5. Form ─────────────────────────────────────────────── */
.label {
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink3);
}

.pilih { position: relative; }
.pilih select {
  width: 100%; height: 46px; padding: 0 40px 0 var(--s4);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--n050); color: var(--ink);
  font: inherit; font-size: 14px; appearance: none; cursor: pointer;
  transition: background var(--trans), border-color var(--trans), box-shadow var(--trans);
}
.pilih select:hover { border-color: var(--r200); background: #fff; }
.pilih select:focus-visible { outline: none; border-color: var(--r600); box-shadow: var(--sh-fokus); }
.pilih select.aktif { background: #fff; border-color: var(--r200); color: var(--r900); font-weight: 600; }
.pilih .ikon {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--ink3); pointer-events: none;
}

.masukan {
  display: block; width: 100%; height: 48px; margin: var(--s2) 0 var(--s5);
  padding: 0 var(--s4); border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--n050); color: var(--ink); font: inherit; font-size: 15px;
  transition: background var(--trans), border-color var(--trans), box-shadow var(--trans);
}
.masukan:hover { border-color: var(--r200); }
.masukan:focus-visible { outline: none; background: #fff; border-color: var(--r600); box-shadow: var(--sh-fokus); }

/* Kolom pencarian berbentuk pil */
.cari, .cari-kecil {
  display: flex; align-items: center; gap: var(--s3);
  border-radius: var(--r-full); background: var(--n100); color: var(--ink3);
  border: 1px solid transparent;
  transition: background var(--trans), border-color var(--trans), box-shadow var(--trans);
}
.cari { flex: 0 1 520px; min-width: 0; height: 46px; padding: 0 var(--s5); }
.cari-kecil { width: min(300px, 100%); height: 42px; padding: 0 var(--s4); }
.cari:hover, .cari-kecil:hover { background: var(--n050); border-color: var(--line); }
.cari:focus-within, .cari-kecil:focus-within {
  background: #fff; border-color: var(--r600); box-shadow: var(--sh-fokus);
}
.cari input, .cari-kecil input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: inherit; color: var(--ink);
}
.cari input { font-size: 14px; }
.cari-kecil input { font-size: 13.5px; }
.cari input::placeholder, .cari-kecil input::placeholder { color: var(--ink3); }

/* ── 6. Kartu ────────────────────────────────────────────── */
.kartu {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh2); padding: var(--pad-kartu-y) var(--pad-kartu-x);
  transition: box-shadow var(--trans), border-color var(--trans), transform var(--trans);
}
.tumpuk > * + * { margin-top: var(--gap); }

.kartu-kepala {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5);
}
.kartu-kepala > div:first-child { min-width: 0; }
.kartu-judul {
  margin: 0; font-size: clamp(16px, 1.2vw, 18px); font-weight: 700;
  letter-spacing: -.015em; color: var(--r900); line-height: 1.35;
}
.kartu-sub { margin: 4px 0 0; font-size: 13px; color: var(--ink2); line-height: 1.5; }
.kartu-kaki {
  margin: var(--s5) 0 0; padding-top: var(--s4); border-top: 1px solid var(--line2);
  font-size: 12.5px; color: var(--ink3); line-height: 1.6;
}

/* ── 7. Chip & keadaan ───────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 var(--s3); border-radius: var(--r-full);
  background: var(--n050); color: var(--ink2);
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
/* Dulu satu kelas .chip-hijau dipakai untuk dua arti yang berbeda:
   "berhasil" (Paid, Siap disimpan, Normal) dan sekadar penekanan merek
   (jumlah saringan aktif, peran Super Admin, label whitelist). Selama
   temanya hijau keduanya kebetulan cocok. Dengan merek merah tidak lagi:
   "Paid" yang merah akan terbaca sebagai peringatan. Jadi dipisah. */
.chip-sukses { background: var(--sukses050); color: var(--sukses); }
.chip-merek  { background: var(--r050); color: var(--r900); }
.chip-oranye { background: var(--or100); color: var(--or700); }
.chip-abu    { background: var(--n100); color: var(--ink2); }
.chip-galat  { background: var(--galat050); color: var(--galat); }

/* Belum tersedia: elemennya tetap dibangun, isinya kosong yang jujur. */
.belum {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s4) var(--s5); border-radius: var(--r-md);
  background: var(--n050); border: 1px dashed var(--n300);
  font-size: 13.5px; color: var(--ink2); line-height: 1.6;
}
.belum .ikon { color: var(--ink3); margin-top: 2px; }
.belum strong { display: block; color: var(--ink); margin-bottom: 2px; }
.belum-kecil { font-size: 12.5px; color: var(--ink3); font-weight: 500; line-height: 1.6; }
/* Versi ringkas untuk keterangan di bawah data yang tersedia. */
.belum-ringkas { padding: var(--s3) var(--s4); font-size: 12.5px; }
/* Dengan satu tindakan di kanan (turun ke bawah di layar sempit). */
.belum-aksi { align-items: center; flex-wrap: wrap; }
.belum-aksi > div { flex: 1 1 320px; }
.belum-aksi > .tombol-garis { flex: none; }

/* Gagal: spanduk merah muda di dalam kartu; kartu lain tetap normal. */
.gagal {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s4) var(--s5); border-radius: var(--r-md);
  background: var(--galat050); color: var(--galat); font-size: 13.5px; line-height: 1.6;
}
.gagal .ikon { color: var(--galat); margin-top: 2px; }

/* Memuat: kerangka abu berdenyut di posisi konten, bukan spinner.
   Denyutnya lambat dan jarak terang-gelapnya kecil supaya terbaca sebagai
   "sedang menunggu", bukan sebagai kedipan yang menarik perhatian. */
@keyframes denyut { 0%, 100% { opacity: 1; } 50% { opacity: .58; } }
.kerangka {
  display: block; border-radius: var(--r-sm); background: var(--n100);
  animation: denyut 1.8s ease-in-out infinite;
}

/* ── 8. Tabel ────────────────────────────────────────────── */
/* Bayangan tepi muncul sendiri saat isi tabel masih ada di luar layar,
   dan hilang saat sudah mentok — tanpa JavaScript. */
.tabel-wadah {
  /* relative: elemen absolut di dalam tabel (teks .sr di kepala kolom)
     ikut terpotong wadah. Tanpa ini ia lolos dan melebarkan halaman
     di ponsel meski tabelnya sendiri bisa digeser. */
  position: relative;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--n300) transparent;
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center,
    linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0 50%,    rgba(26,26,30,.13), transparent) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(26,26,30,.13), transparent) right center;
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 15px 100%, 15px 100%;
  background-attachment: local, local, scroll, scroll;
}
.tabel-wadah::-webkit-scrollbar { height: 8px; }
.tabel-wadah::-webkit-scrollbar-track { background: transparent; }
.tabel-wadah::-webkit-scrollbar-thumb { background: var(--n300); border-radius: var(--r-full); }
.tabel-wadah::-webkit-scrollbar-thumb:hover { background: var(--r200); }

table.tabel { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabel th {
  padding: var(--s3) var(--s4); text-align: left; white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink2); background: var(--r050);
}
.tabel th:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.tabel th:last-child  { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
/* Transisi dipasang di sel, bukan di baris — yang berubah warnanya sel,
   jadi kalau dipasang di baris peralihannya tidak pernah berjalan. */
.tabel td {
  padding: var(--s4); border-bottom: 1px solid var(--line2); white-space: nowrap;
  transition: background var(--trans-kecil);
}
.tabel tbody tr:hover td { background: var(--n050); }
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel .k { text-align: right; }
.tabel .tebal { font-weight: 700; }
.tabel .rr { font-weight: 800; color: var(--r600); font-size: 14.5px; }
.tabel .redup { color: var(--ink3); }

/* Kolom pertama menempel saat tabel digeser — berlaku di semua ukuran. */
.tabel .tempel { position: sticky; left: 0; z-index: 1; background: #fff; }
.tabel th.tempel { background: var(--r050); z-index: 2; }
.tabel tbody tr:hover td.tempel { background: var(--n050); }

.porsi { display: flex; align-items: center; gap: var(--s3); justify-content: flex-end; }
.porsi-jalur {
  width: 104px; height: 6px; border-radius: var(--r-full);
  background: var(--n050); overflow: hidden; flex: none;
}
.porsi-jalur > i { display: block; height: 100%; background: var(--r600); border-radius: inherit; }

/* ── 9. Kerangka aplikasi ────────────────────────────────── */
/* Latar aplikasi: karya seni `checkpaid_bg.png` — gelombang organik di
   kedua tepi, ilustrasi kartu dan koin di kanan bawah, pola titik, dan
   garis lengkung tipis. Inilah yang jadi gelombang merah muda di mockup.

   Berkasnya diwarnai ulang dari hijau ke merah dengan memutar rona ke
   355,3 derajat (rona #E60012) sambil mempertahankan saturasi dan
   kecerahan tiap piksel, jadi bayangan dan gradasi ilustrasinya utuh.
   Sumber hijau aslinya tetap disimpan di assets/background/.

   Lapisan pemudar 35% di atasnya yang membuat gelombangnya lembut;
   tanpa itu tepi kirinya merah tua pekat dan bersaing dengan isi. */
.latar {
  position: fixed; inset: 0; z-index: -1;
  background: var(--bg) url("/static/img/checkpaid_bg.png") center / cover no-repeat;
}
.latar::after { content: ""; position: absolute; inset: 0; background: rgba(247,247,248,.35); }

/* Sidebar */
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--sidebar);
  display: flex; flex-direction: column;
  /* Merah TUA (--r900), bukan merah merek. Dua permukaan sebesar sidebar
     dan bar atas dalam #E60012 akan terus berteriak dan membuat tombol
     merah di dalam isi halaman tenggelam. Dengan --r900 sebagai bidang,
     --r600 tetap punya pekerjaan: menandai yang bisa diklik. */
  background: var(--r900); border-right: 1px solid rgba(255,255,255,.14);
  transition: transform var(--trans-panel);
}
a.sb-kepala { display: block; text-decoration: none; transition: background var(--trans); }
a.sb-kepala:hover { background: rgba(255,255,255,.10); text-decoration: none; }
.sb-kepala {
  height: calc(var(--topbar) + var(--bilah));
  padding: var(--s6) var(--s6) 0;
  /* Tidak perlu latar sendiri: seluruh kolom sidebar sudah merah tua. */
  background: none; border-bottom: 0;
}
.sb-tanda {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: var(--r-md); color: var(--r600);
  background: #fff;
  box-shadow: 0 2px 8px rgba(26,26,30,.18);
}
.sb-tanda .ikon { width: 20px; height: 20px; stroke-width: 2.6; }
/* Logo Telkomsel di dalam kotak merah merek — sama dengan halaman masuk,
   jadi pengguna melihat tanda yang sama sebelum dan sesudah login. */
.sb-tanda img { width: 24px; height: 24px; object-fit: contain; }
.sb-nama {
  margin-top: var(--s3); font-size: 19px; font-weight: 800;
  letter-spacing: -.02em; color: #fff; line-height: 1.1;
}
/* --hias3 hanya 4,00:1 di atas kepala merah; --hias4 memberi 4,52:1.
   Bedanya dengan judul dijaga lewat ukuran dan ketebalan, bukan warna. */
.sb-sub { font-size: 12.5px; color: var(--hias4); }

.sb-nav { flex: 1; overflow-y: auto; padding: var(--s4) var(--s3); }
/* Grup Dashboard: tombol yang melipat sub-menunya.
   Dulu <div> dan sub-menunya selalu terbuka, jadi empat baris tambahan
   mendorong menu lain turun terus-menerus. */
.sb-grup {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%; height: 42px; padding: 0 var(--s4);
  border: 0; border-radius: var(--r-md);
  background: rgba(255,255,255,.16); color: #fff;
  font-family: inherit; font-weight: 700; font-size: 14.5px;
  text-align: left; cursor: pointer;
  transition: background var(--trans);
}
.sb-grup:hover { background: rgba(255,255,255,.26); }
.sb-grup .ikon:last-child {
  margin-left: auto;
  transition: transform var(--trans-panel);
}
html.sb-dasbor .sb-grup .ikon:last-child { transform: rotate(180deg); }

/* Lipatan halus DUA arah.
   grid-template-rows 0fr -> 1fr dipakai, bukan max-height: tingginya
   tidak perlu ditebak, jadi kurvanya terasa sama saat membuka dan
   menutup berapa pun jumlah isinya. Kalau browser tidak mengenal 0fr,
   deklarasinya diabaikan dan sub-menu tampil — gagal ke arah yang aman. */
.sb-sub-wadah {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--trans-panel);
}
.sb-sub-wadah > * { overflow: hidden; min-height: 0; }
html.sb-dasbor .sb-sub-wadah { grid-template-rows: 1fr; }

/* Jarak lewat padding, BUKAN margin: wadah pelipat memotong isinya
   dengan overflow, dan margin anak berada di luar kotak yang
   dipotong — sisa 20 px akan tetap terlihat saat tertutup. */
.sb-sub-daftar { list-style: none; margin: 0; padding: var(--s2) 0 var(--s3) var(--s4); }
.sb-sub-daftar a {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 38px; padding: 0 var(--s4); border-radius: var(--r-sm);
  color: rgba(255,255,255,.82); font-size: 13.5px;
  transition: background var(--trans), color var(--trans);
}
.sb-sub-daftar a::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.60); flex: none; transition: background var(--trans);
}
.sb-sub-daftar a:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.sb-sub-daftar a[aria-current="true"] { background: rgba(255,255,255,.16); color: #fff; font-weight: 700; }
.sb-sub-daftar a[aria-current="true"]::before { background: #fff; }

.sb-garis { height: 1px; background: rgba(255,255,255,.16); margin: var(--s2); }
.sb-item {
  display: flex; align-items: center; gap: var(--s4);
  width: 100%; min-height: 44px; padding: 0 var(--s4);
  border: 0; border-radius: var(--r-md); background: none;
  color: #fff; font-size: 14.5px; font-weight: 500;
  text-align: left; cursor: pointer;
  transition: background var(--trans), color var(--trans);
}
.sb-item .ikon { color: rgba(255,255,255,.72); transition: color var(--trans); }
.sb-item:hover { background: rgba(255,255,255,.12); text-decoration: none; }
.sb-item:hover .ikon { color: #fff; }
/* Halaman yang sedang dibuka ditandai bidang terang DAN garis kiri, bukan
   warna teks saja: di atas merah tua, beda warna teks nyaris tak terbaca. */
.sb-item[aria-current="page"] {
  background: rgba(255,255,255,.18); color: #fff; font-weight: 700;
  box-shadow: inset 3px 0 0 #fff;
}
.sb-item[aria-current="page"] .ikon { color: #fff; }

.sb-kaki {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s6); border-top: 1px solid rgba(255,255,255,.16);
  font-size: 12px; color: rgba(255,255,255,.72);
}
.sb-kaki img { height: 26px; width: auto; }

/* Bantuan: Veronika, asisten virtual yang sama dengan di halaman depan dan
   halaman masuk. Ditaruh di sidebar, bukan melayang, supaya tidak menutupi
   tabel atau tombol Unduh CSV. */
.sb-bantuan {
  display: flex; align-items: center; gap: var(--s3);
  margin: 0 var(--s3) var(--s3); padding: var(--s3);
  border: 1px solid rgba(255,255,255,.20); border-radius: var(--r-md);
  background: rgba(255,255,255,.12); color: #fff;
  transition: background var(--trans), border-color var(--trans), box-shadow var(--trans);
}
.sb-bantuan:hover { background: #fff; border-color: var(--r200); box-shadow: var(--sh1); text-decoration: none; }
.sb-bantuan:active { background: var(--r050); transition-duration: var(--t-tekan); }
.sb-bantuan img {
  width: 36px; height: 36px; flex: none; border-radius: 50%; object-fit: cover;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.28);
}
.sb-bantuan-judul { display: block; font-size: 13px; font-weight: 700; line-height: 1.3; color: #fff; }
.sb-bantuan-sub { display: block; font-size: 11.5px; line-height: 1.4; color: rgba(255,255,255,.74); }

/* Bar atas */
.atas {
  position: fixed; top: 0; right: 0; left: var(--sidebar); z-index: 30;
  background: var(--r900); transition: box-shadow var(--trans);
}
/* Bayangan halus muncul hanya setelah halaman digulir. */
body.digulir .atas { box-shadow: 0 1px 2px rgba(26,26,30,.04), 0 8px 24px rgba(26,26,30,.06); }

.atas-baris {
  height: var(--topbar); display: flex; align-items: center; gap: var(--s3);
  padding: 0 var(--pad-konten); border-bottom: 1px solid rgba(255,255,255,.14);
}
.periode {
  display: flex; align-items: center; gap: var(--s2);
  height: 46px; padding: 0 var(--s3); border-radius: var(--r-md);
  border: 1px solid var(--line); background: #fff; color: var(--r600);
  transition: border-color var(--trans), background var(--trans);
}
.periode:hover { border-color: var(--r200); background: var(--n050); }
.periode select {
  height: 100%; border: 0; background: none; outline: none; cursor: pointer;
  font: inherit; font-weight: 700; font-size: 14px; color: var(--ink);
  appearance: none; padding-right: var(--s1);
}
.periode .ikon:last-child { color: var(--ink3); }

.pengguna {
  position: relative; display: flex; align-items: center; gap: var(--s3);
  padding-left: var(--s4); border-left: 1px solid rgba(255,255,255,.22); text-align: right;
}
.pengguna-nama { font-weight: 700; font-size: 14px; line-height: 1.3; color: #fff; }
.pengguna-peran { font-size: 11.5px; color: rgba(255,255,255,.76); }
.avatar {
  display: grid; place-items: center; width: 42px; height: 42px;
  /* Putih di atas merah tua: lingkaran merah merek di sini nyaris lenyap. */
  border-radius: 50%; background: #fff; color: var(--r900);
  font-weight: 800; font-size: 14px; cursor: pointer;
  transition: box-shadow var(--trans), transform var(--trans);
}
.avatar:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(26,26,30,.28); }
.avatar:active { transform: translateY(0); transition-duration: var(--t-tekan); }
.pengguna form { margin: 0; }
.menu-pengguna summary { list-style: none; cursor: pointer; }
.menu-pengguna summary::-webkit-details-marker { display: none; }
.menu-pengguna-isi {
  position: absolute; right: 0; top: 52px; z-index: 50; padding: var(--s2);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--sh3);
  transform-origin: top right;
}
/* Muncul dari arah avatar yang membukanya, bukan sekadar menyala di tempat.
   Hanya saat membuka: <details> melepas isinya seketika saat ditutup,
   jadi peralihan keluar tidak mungkin dijalankan dengan CSS saja. */
@keyframes menu-turun {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.menu-pengguna[open] .menu-pengguna-isi { animation: menu-turun var(--t-dasar) var(--e-out) backwards; }

/* Bilah saringan — menempel saat digulir */
.bilah {
  height: var(--bilah); display: flex; align-items: center; gap: var(--s4);
  padding: 0 var(--pad-konten); border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.97); backdrop-filter: blur(6px);
}
.bilah-hitung { font-weight: 700; font-size: 14px; }

.selubung { display: none; }
.tombol-menu { display: none; }

/* Konten */
.konten {
  margin-left: var(--sidebar);
  padding: calc(var(--topbar) + var(--bilah) + var(--s6)) var(--pad-konten) 72px;
}
/* Konten naik sedikit saat halaman dibuka. Jaraknya kecil dan sekali jalan —
   cukup untuk menghaluskan pergantian halaman dan penerapan saringan, tanpa
   menunda pembacaan angka. */
@keyframes konten-masuk { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.konten-dalam {
  max-width: 1520px; margin: 0 auto;
  animation: konten-masuk 300ms var(--e-out) backwards;
}

/* ── 10. Kepala halaman ──────────────────────────────────── */
/* Kepala halaman dibuat ringkas: remah, judul, dan satu-dua baris
   keterangan dulu memakan ±190 px sebelum isi pertama; kini ±130 px. */
.remah { font-size: 13px; color: var(--ink3); margin-bottom: var(--s3); }
.remah span { color: var(--ink2); font-weight: 600; }

.kepala-hal {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s5); flex-wrap: wrap; margin-bottom: var(--s6);
}
/* Dua tombol unduh berdampingan: "hasil saringan" dan "semua". Membungkus
   ke baris baru di layar sempit supaya tidak menekan judul halaman. */
.grup-unduh { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }

.judul-hal { position: relative; padding-left: var(--s5); min-width: 0; }
.judul-hal::before {
  content: ""; position: absolute; left: 0; top: 5px; bottom: 5px;
  width: 4px; border-radius: 3px; background: var(--or);
}
.judul-hal h1 {
  margin: 0; font-size: clamp(22px, 1.9vw, 27px); font-weight: 800;
  letter-spacing: -.03em; color: var(--r900); line-height: 1.2;
}
.judul-hal p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink2); max-width: 96ch; }

.kaki-hal { margin-top: var(--s8); font-size: 12.5px; color: var(--ink3); line-height: 1.7; }
.kaki-hal b { color: var(--galat); }
.kaki-hal p { margin: var(--s1) 0; }

/* ── 11. Saringan ────────────────────────────────────────── */
.saringan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5) var(--s4); }
.saringan-grid .label { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s2); }
.lencana-p {
  padding: 2px 7px; border-radius: var(--r-full);
  background: var(--or100); color: var(--or700);
  font-size: 9.5px; font-weight: 700; letter-spacing: .02em; text-transform: none;
}
/* Kepala kartu saringan: judul, jumlah, Reset, dan tombol buka panel. */
.saringan-kepala {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3) var(--s4); flex-wrap: wrap;
}
.saringan-kepala .kartu-sub strong { color: var(--ink); }
.saringan-aksi { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.tombol-lipat .ikon:last-child { transition: transform var(--trans-panel); }
.tombol-lipat[aria-expanded="true"] { background: var(--n050); border-color: var(--r200); }
.tombol-lipat[aria-expanded="true"] .ikon:last-child { transform: rotate(180deg); }

/* Chip saringan aktif — klik untuk melepas satu saringan. */
.saringan-chip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s4); }
.chip-saring {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 0 var(--s2) 0 var(--s3);
  border: 1px solid transparent; border-radius: var(--r-full);
  background: var(--r050); color: var(--r900);
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
  transition: background var(--trans), border-color var(--trans), color var(--trans);
}
.chip-saring > span:first-child { font-weight: 500; color: var(--r600); }
.chip-saring .ikon { width: 14px; height: 14px; opacity: .55; transition: opacity var(--trans); }
.chip-saring:hover { background: #fff; border-color: var(--r200); text-decoration: none; }
.chip-saring:hover .ikon { opacity: 1; }
.chip-saring:active { background: var(--n050); transition-duration: var(--t-tekan); }

/* Panel dropdown yang bisa dilipat. Tingginya dianimasikan lewat
   grid-template-rows 0fr → 1fr, jadi tidak perlu mengukur tinggi isi
   dengan JavaScript. Padding dan margin negatif 4px memberi ruang untuk
   cincin fokus dropdown yang kalau tidak akan terpotong overflow. */
.saringan-lipat {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--trans-panel);
}
.saringan-lipat.terbuka { grid-template-rows: 1fr; }
.saringan-lipat-isi {
  min-height: 0; overflow: hidden;
  margin: 0 -4px; padding: 0 4px;
  opacity: 0; transition: opacity var(--trans-panel);
}
.saringan-lipat.terbuka .saringan-lipat-isi { opacity: 1; padding-bottom: 4px; }
.saringan-lipat-isi > :first-child { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line2); }
.saringan-lipat.tanpa-gerak, .saringan-lipat.tanpa-gerak .saringan-lipat-isi { transition: none; }

/* Satu kalimat dengan lencana di awalnya — blok biasa, bukan flex, supaya
   teksnya terlipat di samping lencana alih-alih turun ke baris sendiri. */
.saringan-catatan { margin: var(--s5) 0 0; font-size: 12.5px; line-height: 1.7; color: var(--ink3); }
.saringan-catatan .lencana-p { margin-right: 6px; }

/* Hanya untuk pembaca layar. */
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Saat saringan diterapkan: isi di bawah panel meredup dan garis tipis
   bergerak di bawah bilah, sampai jawaban server datang. Panel saringan
   sendiri tetap bisa dipakai. */
.tumpuk > * { transition: opacity var(--trans), box-shadow var(--trans), border-color var(--trans), transform var(--trans); }
body.sedang-memuat .tumpuk > :not(.saringan) { opacity: .5; pointer-events: none; }
.bilah { position: relative; }
.bilah::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--r400), transparent) no-repeat;
  background-size: 40% 100%; background-position: -70% 0;
  opacity: 0; transition: opacity var(--trans); pointer-events: none;
}
@keyframes pita { from { background-position: -70% 0; } to { background-position: 170% 0; } }
body.sedang-memuat .bilah::after { opacity: 1; animation: pita 1.1s var(--e-out) infinite; }

/* ── 12. KPI & pacing ────────────────────────────────────── */
.grid-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.kpi { display: flex; flex-direction: column; min-height: 176px; }
/* Angkatannya 2px saja — cukup untuk menandai kartu yang sedang disorot
   tanpa membuat baris kartu terasa bergoyang saat kursor melintas. */
.kpi:hover { box-shadow: var(--sh3); border-color: var(--r100); transform: translateY(-2px); }
.kpi-atas { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.kpi-atas > div { min-width: 0; }
.kpi-atas .label { line-height: 1.45; }
/* Arti angka dalam bahasa biasa, tepat di bawah label singkatannya. */
.kpi-arti { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink2); }
.kpi-tanda {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: var(--r-md); background: var(--r050); color: var(--r600); flex: none;
}
.kpi-tanda.oranye { background: var(--or100); color: var(--or); }
.kpi-isi { margin-top: auto; padding-top: var(--s5); }
.kpi-nilai {
  font-size: clamp(26px, 2.4vw, 33px); font-weight: 800;
  letter-spacing: -.035em; color: var(--r900); line-height: 1.1;
}
.kpi-satuan { font-size: 15px; font-weight: 500; color: var(--ink2); margin-left: 6px; letter-spacing: 0; }
/* Blok biasa, bukan flex: isinya campuran teks dan angka tebal yang harus
   bisa terlipat seperti kalimat. */
.kpi-kaki { margin-top: var(--s3); font-size: 13px; line-height: 1.5; color: var(--ink3); }
.kpi-kaki strong { font-weight: 700; color: var(--ink2); }

/* Jalur % paid: merah merek untuk terbayar di atas oranye muda untuk
   belum bayar, sama dengan warna donat komposisi di bawahnya. Di sini
   merah BUKAN peringatan — ia porsi yang sudah tertagih. */
.kpi-jalur {
  height: 6px; margin-top: var(--s3); overflow: hidden;
  border-radius: var(--r-full); background: var(--or100);
}
.kpi-jalur > i {
  display: block; height: 100%; border-radius: inherit; background: var(--r600);
  transform-origin: left center; animation: tumbuh 560ms var(--e-out) backwards;
}
.naik  { color: var(--sukses); font-weight: 700; }
.turun { color: var(--galat); font-weight: 700; }

.pacing { padding: var(--s6) var(--pad-kartu-x) 0; overflow: hidden; }
.pacing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pacing-grid > div { padding: 0 var(--s6); border-left: 1px solid var(--line); min-width: 0; }
.pacing-grid > div:first-child { padding-left: 0; border-left: 0; }
.pacing-nilai {
  display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap;
  margin-top: 6px; font-size: clamp(18px, 1.6vw, 22px); font-weight: 800;
  letter-spacing: -.02em; color: var(--r900);
}
.pacing-nilai.redup { color: var(--ink3); }
.pacing-catatan { font-size: 12px; font-weight: 500; color: var(--ink3); letter-spacing: 0; }
.pacing-jalur {
  height: 5px; background: var(--n050);
  margin: var(--s5) calc(var(--pad-kartu-x) * -1) 0;
}
/* Batang tumbuh dari kiri sekali saat dibuka. Dipakai hanya pada himpunan
   kecil (pacing dan empat batang churn) — kalau dipasang di tabel branch,
   puluhan batang bergerak bersamaan dan halamannya jadi gaduh. */
@keyframes tumbuh { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pacing-jalur > i {
  display: block; height: 100%; background: var(--r600); border-radius: 0 3px 3px 0;
  transform-origin: left center;
  animation: tumbuh 560ms var(--e-out) backwards;
}

/* ── 13. Grafik & batang ─────────────────────────────────── */
.grid-grafik { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gap); }
.legenda { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; font-size: 13px; color: var(--ink2); }
.legenda span { display: inline-flex; align-items: center; gap: 7px; }
.titik-cincin { width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--r600); }

.segmen { display: inline-flex; padding: 3px; border-radius: var(--r-md); border: 1px solid var(--line); background: #fff; }
.segmen button {
  min-height: 34px; padding: 0 var(--s4); border: 0; border-radius: var(--r-sm);
  background: none; color: var(--ink3); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background var(--trans), color var(--trans);
}
.segmen button:hover { color: var(--ink); background: var(--n050); }
.segmen button:active { background: var(--r050); transition-duration: var(--t-tekan); }
.segmen button[aria-pressed="true"] { background: var(--r050); color: var(--r600); font-weight: 700; }

.kanvas { position: relative; height: clamp(240px, 26vw, 320px); }

.donat-wadah { position: relative; width: min(220px, 70%); aspect-ratio: 1; margin: var(--s3) auto var(--s6); }
/* Putaran -90deg tetap ada di kedua ujung keyframe supaya cincinnya tidak
   ikut berputar — yang berubah hanya kepekatan dan skalanya. */
@keyframes donat-masuk {
  from { opacity: 0; transform: rotate(-90deg) scale(.96); }
  to   { opacity: 1; transform: rotate(-90deg) scale(1); }
}
.donat-wadah svg {
  width: 100%; height: 100%; transform: rotate(-90deg);
  animation: donat-masuk 520ms var(--e-out) backwards;
}
.donat-tengah { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.donat-tengah strong {
  font-size: clamp(28px, 3vw, 34px); font-weight: 800;
  letter-spacing: -.035em; color: var(--r900); line-height: 1;
}
.donat-tengah span { font-size: 13px; color: var(--ink3); margin-top: var(--s1); }

.baris-legenda {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) 0; border-bottom: 1px solid var(--line2); font-size: 14px;
}
.baris-legenda:last-of-type { border-bottom: 0; }
.baris-legenda i { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.baris-legenda strong { margin-left: auto; font-size: 16px; font-weight: 800; color: var(--r900); }
.baris-legenda em { font-style: normal; color: var(--ink3); width: 54px; text-align: right; }

.batang {
  display: grid; grid-template-columns: 120px minmax(0, 1fr) 148px;
  align-items: center; gap: var(--s4); padding: 7px 0;
}
.batang-nama { font-weight: 700; font-size: 14px; }
.batang-jalur { height: 26px; border-radius: var(--r-sm); background: var(--n050); overflow: hidden; }
.batang-jalur > i {
  display: block; height: 100%; border-radius: inherit;
  transform-origin: left center;
  animation: tumbuh 480ms var(--e-out) backwards;
  transition: width var(--trans);
}
.batang-nilai { text-align: right; font-weight: 800; color: var(--r900); font-size: 15px; }
.batang-nilai em { font-style: normal; font-weight: 500; font-size: 13px; color: var(--ink3); margin-left: 6px; }
.isi-high  { background: var(--or); }
.isi-mid   { background: var(--r400); }
.isi-low   { background: var(--r600); }
.isi-noncp { background: var(--r200); }

/* ── 14. Modal & halaman masuk ───────────────────────────── */
.modal-latar {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  padding: var(--s4); background: rgba(26,26,30,.45); backdrop-filter: blur(2px);
}
.modal-latar[hidden] { display: none; }
.modal {
  width: 100%; max-width: 420px; padding: var(--s7);
  background: #fff; border-radius: var(--r-xl); box-shadow: var(--sh3);
}

/* Modal sesi berakhir muncul tanpa peringatan, jadi kemunculannya dibuat
   bertahap: latar menggelap dulu, kotaknya menyusul naik sedikit. Dijalankan
   lewat animasi, bukan transisi, karena elemennya berpindah dari display:none. */
@keyframes pudar-masuk { from { opacity: 0; } to { opacity: 1; } }
@keyframes kotak-naik {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.modal-latar:not([hidden])        { animation: pudar-masuk var(--t-panel) var(--e-out) backwards; }
.modal-latar:not([hidden]) .modal { animation: kotak-naik var(--t-panel) var(--e-out) 60ms backwards; }
.modal h2 { margin: var(--s3) 0 6px; font-size: 20px; font-weight: 800; color: var(--r900); }
.modal p { margin: 0 0 var(--s6); color: var(--ink2); }

/* Halaman masuk — tata letaknya mengikuti cp_login.html di V2: latar
   buram, kartu putih di tengah, logo IndiHome di pojok kanan atas.

   Paletnya TIDAK lagi terpisah. Sampai 28 Sep halaman ini punya sepuluh
   token sendiri (--m-hijau #2D8653 dan kerabatnya), sengaja dipilih agar
   sama dengan login V2 supaya pengguna mengenalinya. Alasan itu gugur
   sejak 23 Sep: V2 tidak melayani alamat apa pun lagi. Sekarang halaman
   ini memakai palet merek yang sama dengan seluruh aplikasi. */
body.hal-masuk {
  background: var(--n100) url("/static/img/checkpaid_bg.png") center / cover fixed no-repeat;
}
.masuk-selubung {
  position: fixed; inset: 0; z-index: 0;
  background: rgba(26,26,30,.35);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.masuk-merek {
  position: fixed; top: 2vh; right: 2vw; z-index: 2;
  width: 12vw; min-width: 90px; max-width: 180px; height: auto;
  opacity: .9; pointer-events: none;
}
.masuk-wadah {
  position: relative; z-index: 1;
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center; padding: var(--s5);
}
.masuk-kartu {
  width: 100%; max-width: 420px; padding: 40px 36px 32px;
  background: rgba(255,255,255,.97); border-radius: 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,.13);
  /* Tinggi baris bawaan browser, sama dengan V2 — dengan 1,55 milik aplikasi
     kartunya jadi ~40px lebih tinggi dari halaman yang dikenal pengguna. */
  line-height: normal;
  animation: kotak-naik 420ms var(--e-out) backwards;
}

.masuk-logo { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 28px; }
.masuk-cincin {
  display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 14px;
  border-radius: 20px; background: var(--gradasi-merek);
  box-shadow: 0 6px 20px rgba(230,0,18,.28);
}
.masuk-cincin img { width: 42px; height: 42px; object-fit: contain; }
.masuk-judul { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.3px; line-height: 1.3; color: var(--ink); }
.masuk-sub { margin: 4px 0 0; font-size: 13px; color: var(--ink3); }

/* Pemberitahuan: keluar, dialihkan, atau gagal masuk. */
.masuk-info {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: var(--s4); padding: 10px 14px; border-radius: 10px;
  background: var(--r050); color: var(--r900);
  font-size: 12.5px; font-weight: 500; line-height: 1.5;
}
.masuk-info .ikon { width: 16px; height: 16px; margin-top: 1px; }
.masuk-info-galat { background: var(--galat050); color: var(--galat); }

.masuk-grup { margin-bottom: var(--s4); }
.masuk-label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink2); }
.masuk-isian {
  display: block; width: 100%; height: 44px; padding: 0 14px;
  border: 1.5px solid var(--n200); border-radius: 10px; background: #fff;
  font: inherit; font-size: 13.5px; color: var(--ink);
  transition: border-color var(--trans), box-shadow var(--trans);
}
.masuk-isian::placeholder { color: var(--ink3); }
.masuk-isian:hover { border-color: var(--n300); }
.masuk-isian:focus, .masuk-isian:focus-visible {
  outline: none; border-color: var(--r600); box-shadow: 0 0 0 3px rgba(230,0,18,.12);
}
.masuk-sandi { position: relative; }
.masuk-sandi .masuk-isian { padding-right: 46px; }
.masuk-mata {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 36px; height: 36px;
  border: 0; border-radius: 8px; background: none; color: var(--ink3); cursor: pointer;
  transition: color var(--trans), background var(--trans);
}
.masuk-mata:hover { color: var(--r600); background: var(--r050); }
.masuk-mata:active { background: rgba(230,0,18,.14); transition-duration: var(--t-tekan); }
.masuk-mata .ikon { width: 17px; height: 17px; }

.masuk-lupa-baris { display: flex; justify-content: flex-end; margin-top: 6px; }
/* Area kliknya 28px, tapi margin negatif membuatnya menempati ruang seperti
   teks biasa — jarak ke tombol Masuk tetap sama dengan V2. */
.masuk-lupa {
  min-height: 28px; padding: 2px 4px; margin: -6px -4px -6px 0;
  border: 0; border-radius: 6px; background: none; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--r600);
  text-decoration: underline transparent; text-underline-offset: 3px;
  transition: color var(--trans), text-decoration-color var(--trans);
}
.masuk-lupa:hover { color: var(--r900); text-decoration-color: currentColor; }

.masuk-tombol {
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
  width: 100%; height: 46px; margin-top: 8px;
  border: 0; border-radius: 10px; background: var(--gradasi-merek); color: #fff;
  font: inherit; font-size: 14px; font-weight: 700; letter-spacing: .02em; cursor: pointer;
  box-shadow: 0 1px 2px rgba(30,122,69,.14), 0 4px 12px rgba(230,0,18,.16);
  transition: transform var(--trans), box-shadow var(--trans), filter var(--trans);
}
.masuk-tombol:hover {
  transform: translateY(-1px); filter: brightness(.96);
  box-shadow: 0 2px 4px rgba(30,122,69,.14), 0 8px 18px rgba(230,0,18,.2);
}
.masuk-tombol:active { transform: translateY(0); filter: brightness(.92); transition-duration: var(--t-tekan); }
.masuk-tombol:disabled { cursor: progress; transform: none; filter: saturate(.85); }

/* Putaran kecil selama menunggu jawaban server. */
@keyframes putar { to { transform: rotate(360deg); } }
.masuk-putar {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  animation: putar 700ms linear infinite;
}

.masuk-atau {
  display: flex; align-items: center; gap: 10px; margin: 18px 0 4px;
  font-size: 12px; color: var(--ink3);
}
.masuk-atau::before, .masuk-atau::after { content: ""; flex: 1; height: 1px; background: var(--n200); }

.masuk-kembali {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; height: 42px; margin-top: 10px;
  border: 1.5px solid var(--n200); border-radius: 10px; background: var(--n050);
  font-size: 13px; font-weight: 600; color: var(--ink2);
  transition: background var(--trans), border-color var(--trans), color var(--trans);
}
.masuk-kembali:hover { background: var(--r050); border-color: var(--r600); color: var(--r600); text-decoration: none; }
.masuk-kembali:active { background: rgba(230,0,18,.14); transition-duration: var(--t-tekan); }
.masuk-kembali .ikon { width: 15px; height: 15px; transition: transform var(--trans); }
.masuk-kembali:hover .ikon { transform: translateX(-2px); }

.masuk-kaki {
  margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--n100);
  text-align: center; font-size: 11.5px; color: var(--ink3);
}
.masuk-kaki-tautan { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 8px; }
.masuk-kaki-tautan a {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px;
  border-radius: 6px; font-size: 11.5px; color: var(--ink3);
  transition: color var(--trans);
}
.masuk-kaki-tautan a:hover { color: var(--r600); text-decoration: none; }
.masuk-kaki-tautan img { width: 13px; height: 13px; opacity: .6; transition: opacity var(--trans); }
.masuk-kaki-tautan a:hover img { opacity: 1; }

/* Veronika — asisten virtual, sama dengan di halaman depan. */
.veronika {
  position: fixed; z-index: 10;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px; padding: 9px 16px 9px 10px;
  border: 1px solid var(--n200); border-radius: 18px;
  background: rgba(255,255,255,.95);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
  transition: transform var(--trans), box-shadow var(--trans);
}
.veronika:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.12); text-decoration: none; }
.veronika:active { transform: translateY(0); transition-duration: var(--t-tekan); }
.veronika img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--n200); }
.veronika-nama { display: block; font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--r900); }
.veronika-sub  { display: block; font-size: 10px; font-style: italic; color: var(--ink3); }

/* Modal lupa password */
.masuk-modal { max-width: 340px; padding: 28px; border-radius: 16px; text-align: center; }
.masuk-modal-ikon {
  display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 12px;
  border-radius: 14px; background: var(--r050); color: var(--r600);
}
.masuk-modal-ikon .ikon { width: 22px; height: 22px; }
.masuk-modal h2 { margin: 0 0 6px; font-size: 16px; font-weight: 800; color: var(--ink); }
.masuk-modal p { margin: 0 0 8px; font-size: 13px; line-height: 1.6; color: var(--ink2); }
.masuk-modal .masuk-modal-catatan { margin-bottom: 18px; font-size: 12.5px; color: var(--ink3); }
.masuk-modal-tutup {
  width: 100%; height: 42px; border: 0; border-radius: 10px;
  background: var(--n100); color: var(--ink2);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background var(--trans);
}
.masuk-modal-tutup:hover { background: var(--n200); }
.masuk-modal-tutup:active { background: var(--n200); transition-duration: var(--t-tekan); }

/* ── 15. Responsif ───────────────────────────────────────── */

/* Laptop kecil: sidebar sedikit dirampingkan, empat kartu jadi dua. */
@media (max-width: 1280px) {
  :root { --sidebar: 248px; }
  .grid-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tablet mendatar: grafik menumpuk, saringan dua kolom. */
@media (max-width: 1100px) {
  .grid-grafik { grid-template-columns: minmax(0, 1fr); }
  .saringan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pacing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s5); }
  .pacing-grid > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .pengguna-teks { display: none; }
}

/* Tablet tegak & ponsel: sidebar jadi menu tarik. */
@media (max-width: 860px) {
  :root { --topbar: 68px; --bilah: 50px; --sidebar: 288px; }

  .sidebar { transform: translateX(-100%); box-shadow: 0 0 48px rgba(26,26,30,.18); }
  body.menu-terbuka .sidebar { transform: none; }

  /* Selubung sudah ada di lebar ini meski belum terlihat, supaya bisa pudar
     masuk DAN keluar. Sebelumnya ia dipasang lewat display, yang tidak bisa
     dihaluskan — latar gelap muncul dan lenyap mendadak. Dibuat tidak
     menangkap klik selama tersembunyi. */
  .selubung {
    display: block; position: fixed; inset: 0; z-index: 35;
    background: rgba(26,26,30,.4);
    opacity: 0; pointer-events: none;
    transition: opacity var(--trans-panel);
  }
  body.menu-terbuka .selubung { opacity: 1; pointer-events: auto; backdrop-filter: blur(2px); }
  .tombol-menu { display: inline-flex; }
  .atas { left: 0; }
  .konten { margin-left: 0; }

  .kpi { min-height: 0; }
  .cari { flex: 1; }
  .cari-kecil { width: 100%; }
  .periode { display: none; }

  /* Sasaran sentuh nyaman di layar sentuh. */
  .tombol-garis, .segmen button, .sb-sub-daftar a { min-height: 44px; }
  .chip-saring { min-height: 40px; padding-left: var(--s4); }
  .baris-legenda { padding: var(--s4) 0; }
}

@media (max-width: 640px) {
  .grid-kpi, .saringan-grid, .pacing-grid { grid-template-columns: minmax(0, 1fr); }
  .saringan-aksi { width: 100%; }
  .saringan-aksi > * { flex: 1; }
  .pacing-grid > div { padding: 0; border-left: 0; }
  .kepala-hal { flex-direction: column; align-items: stretch; }
  .kepala-hal .tombol-utama { width: 100%; }
  .bilah { gap: var(--s3); }
  .bilah .chip { display: none; }
  .bilah-hitung { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
  .bilah .tombol-garis { flex: none; }
  .batang { grid-template-columns: 68px minmax(0, 1fr) 104px; gap: var(--s3); }
  .batang-nilai { font-size: 14px; }
  .modal { padding: var(--s6); }

  /* Halaman masuk: ruang di atas untuk logo IndiHome dan di bawah untuk
     Veronika, supaya keduanya tidak pernah menutupi kartu. Isian 16px
     mencegah Safari iOS memperbesar halaman saat isian disentuh. */
  .masuk-merek { width: 25vw; top: 1.5vh; right: 3vw; }
  .masuk-wadah { padding: 64px var(--s4) 92px; }
  .masuk-kartu { padding: 32px 24px 24px; border-radius: 20px; }
  .masuk-isian { height: 48px; font-size: 16px; }
  .masuk-mata { width: 40px; height: 40px; }
  .masuk-tombol { height: 48px; }
  .masuk-kembali { height: 46px; }
  .masuk-lupa { min-height: 40px; margin-top: -10px; margin-bottom: -4px; }
  .masuk-kaki-tautan a { min-height: 40px; }
  .veronika { padding: 7px 12px 7px 8px; }
  .veronika-sub { display: none; }
}

/* ── 16. Form HSMP & Package Catalog ─────────────────────── */
/* Komponen tambahan untuk dua aplikasi yang memakai kerangka yang sama.
   Semua nilai memakai token di bagian 1 — warna, jarak, sudut, bayangan,
   dan gerak sama persis dengan Check Paid. */

/* Tanpa bilah saringan: Form HSMP dan Package Catalog tidak punya
   bilah jumlah pelanggan, jadi tingginya nol dan merek sidebar dibuat
   mendatar supaya garis bawahnya sejajar dengan bar atas. */
body.tanpa-bilah { --bilah: 0px; }
body.tanpa-bilah a.sb-kepala, body.tanpa-bilah .sb-kepala {
  display: flex; align-items: center; gap: var(--s3);
  padding: 0 var(--s6);
}
body.tanpa-bilah .sb-nama { margin-top: 0; font-size: 17px; white-space: nowrap; }
body.tanpa-bilah .sb-merek-teks { min-width: 0; }

/* Sidebar: label kelompok, lencana jumlah, penanda tautan luar */
/* Menu sidebar lebih rapat di layar lebar supaya Super Admin (dengan
   kelompok Admin dan Layanan lain) tetap muat tanpa menggulir di laptop.
   Di layar sentuh kembali ke 44px lewat bagian 15. */
@media (min-width: 861px) {
  .sb-item { min-height: 40px; }
  .sb-garis { margin: 6px var(--s2); }
}
.sb-nav { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.34) transparent; }
.sb-nav::-webkit-scrollbar { width: 6px; }
.sb-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.34); border-radius: var(--r-full); }
/* Layar pendek: kartu Veronika diringkas jadi satu baris. */
@media (max-height: 860px) and (min-width: 861px) {
  .sb-bantuan { padding: var(--s2) var(--s3); margin-bottom: var(--s2); }
  .sb-bantuan img { width: 28px; height: 28px; }
  .sb-bantuan-sub { display: none; }
  .sb-kaki { padding-top: var(--s3); padding-bottom: var(--s3); }
}
.sb-label {
  padding: var(--s2) var(--s4) var(--s1);
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.75);
}
.sb-lencana {
  margin-left: auto; padding: 1px 8px; border-radius: var(--r-full);
  /* Putih dengan angka merah tua: di atas sidebar merah, pil merah muda
     berteks --r600 hanya 4,15:1 dan angkanya sulit dibaca. */
  background: #fff; color: var(--r900);
  font-size: 11.5px; font-weight: 700;
}
.sb-item[aria-current="page"] .sb-lencana { background: #fff; }
.sb-luar { margin-left: auto; display: inline-flex; color: rgba(255,255,255,.72); }
.sb-luar .ikon { width: 14px; height: 14px; }

.judul-bagian { margin: 0 0 var(--s3); font-size: 15px; font-weight: 700; color: var(--r900); }
.chip .ikon { width: 14px; height: 14px; }

/* ── Tata letak ── */
.grid-samping { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--gap); align-items: start; }
.grid-dua { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
.grid-ringkas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.grid-ringkas-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-seimbang { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.saringan-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Kartu angka ringkas: label, angka, keterangan */
.ringkas { display: flex; flex-direction: column; gap: 6px; }
.ringkas strong {
  font-size: clamp(22px, 2vw, 28px); font-weight: 800; letter-spacing: -.03em;
  color: var(--r900); line-height: 1.15;
}
.ringkas .kartu-sub { margin: 0; }

/* ── Isian ── */
.isian {
  display: block; width: 100%; min-height: 46px; padding: 0 var(--s4);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--n050); color: var(--ink);
  font: inherit; font-size: 14px;
  transition: background var(--trans), border-color var(--trans), box-shadow var(--trans);
}
textarea.isian { padding: var(--s3) var(--s4); min-height: 104px; line-height: 1.6; resize: vertical; }
.isian::placeholder { color: var(--ink3); opacity: .85; }
.isian:hover { border-color: var(--r200); background: #fff; }
.isian:focus-visible { outline: none; background: #fff; border-color: var(--r600); box-shadow: var(--sh-fokus); }
.isian[aria-invalid="true"] { border-color: var(--galat); }
.isian:disabled, .pilih select:disabled { cursor: not-allowed; opacity: .6; }
.isian:disabled:hover { border-color: var(--line); background: var(--n050); }

.isian-awalan { position: relative; }
.isian-awalan > span {
  position: absolute; left: var(--s4); top: 50%; transform: translateY(-50%);
  font-weight: 600; color: var(--ink3); pointer-events: none;
}
.isian-awalan .isian { padding-left: 44px; }

.form-label { display: block; margin-bottom: var(--s2); font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.45; }
.wajib { color: var(--galat); }
.form-bantu { margin: var(--s2) 0 0; font-size: 12.5px; color: var(--ink3); line-height: 1.55; }
.form-galat { margin: var(--s2) 0 0; font-size: 12.5px; font-weight: 600; color: var(--galat); }
.baris-bantu { display: flex; justify-content: space-between; gap: var(--s4); align-items: baseline; }
.baris-bantu .num { flex: none; }
.kurang { color: var(--or700); font-weight: 700; }
.form-aksi { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s5); }
.form-aksi .tombol-garis { height: 48px; }
.saringan-grid .label, .baris-saring .label, .kartu > .label { display: block; margin-bottom: var(--s2); }

fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
/* Pertanyaan yang belum boleh diisi tetap terlihat, tapi jelas redup. */
fieldset:disabled .langkah { opacity: .55; }
fieldset:disabled .tombol-utama { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
fieldset .langkah { transition: opacity var(--trans-panel); }

/* ── Langkah bernomor (Form HSMP) ── */
.form-hsmp { padding-top: var(--s6); padding-bottom: var(--s6); }
.langkah { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--s4); padding: var(--s5) 0; }
.langkah + .langkah, .form-lanjut .langkah:first-of-type { border-top: 1px solid var(--line2); }
form.langkah { padding-top: 0; }
.langkah-nomor {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--r050); color: var(--r600); font-weight: 800; font-size: 14px;
}
.langkah-isi { min-width: 0; }
.baris-cek { display: flex; gap: var(--s3); }
.baris-cek .isian { flex: 1; min-width: 0; font-size: 16px; letter-spacing: .03em; }
.baris-cek .tombol-utama { flex: none; height: 46px; }

/* Bar status hasil cek nomor. Sukses tetap hijau dan galat tetap merah
   tua: keduanya arti, bukan merek, jadi tidak ikut berganti warna. */
.status-bar {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s3) var(--s4); border-radius: var(--r-md); border: 1px solid transparent;
  font-size: 13.5px; line-height: 1.6;
  animation: pudar-masuk var(--t-dasar) var(--e-out) backwards;
}
.status-bar .ikon { margin-top: 2px; }
.status-bar strong { display: block; }
/* Difokus lewat skrip hanya supaya pembaca layar membacakan hasilnya;
   elemen ini tidak bisa diklik, jadi tidak perlu cincin fokus. */
.status-bar:focus, .spanduk-sukses:focus { outline: none; }
.status-bar.sukses { background: var(--sukses050); border-color: var(--sukses200); color: var(--sukses); }
.status-bar.sukses .ikon { color: var(--sukses); }
.status-bar.galat  { background: var(--galat050); border-color: var(--galat200); color: var(--galat); }
.status-bar.galat .ikon { color: var(--galat); }
.status-bar.netral { background: var(--n050); border-color: var(--line); color: var(--ink2); }
.status-bar.netral .ikon { color: var(--ink3); }
.status-usang { color: var(--or700); font-weight: 600; }

.detail-kiriman {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px var(--s4);
  margin: var(--s3) 0 0; padding-top: var(--s3); border-top: 1px solid rgba(140,47,29,.15);
}
.detail-kiriman dt { font-weight: 600; }
.detail-kiriman dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }

/* Pilihan Ya/Tidak */
.pilihan-radio { display: flex; gap: var(--s3); flex-wrap: wrap; }
.radio {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; padding: 0 var(--s5) 0 var(--s4);
  border: 1px solid var(--line); border-radius: var(--r-md); background: #fff;
  font-weight: 600; cursor: pointer;
  transition: background var(--trans), border-color var(--trans), box-shadow var(--trans);
}
.radio:hover { border-color: var(--r200); background: var(--n050); }
.radio input { width: 18px; height: 18px; margin: 0; accent-color: var(--r600); cursor: inherit; }
.radio:has(input:checked) { border-color: var(--r600); background: var(--n050); box-shadow: var(--sh-fokus); }
.radio:has(input:focus-visible) { outline: 2px solid var(--r600); outline-offset: 2px; }
.radio.nonaktif { opacity: .5; cursor: not-allowed; }
.radio.nonaktif:hover { border-color: var(--line); background: #fff; }

/* Pilihan mati yang KEBETULAN tercentang tetap harus terlihat abu, bukan
   merah. Tanpa aturan ini `.radio:has(input:checked)` di atas memberinya
   garis tepi merah dan bayangan fokus — terbaca seperti pilihan aktif,
   padahal tidak ada yang bisa dipilih. Tanda terpilihnya cukup dari titik
   di dalam radio-nya sendiri. */
.radio.nonaktif:has(input:checked) {
  border-color: var(--line); background: #fff; box-shadow: none;
}

/* Spanduk hasil kiriman di atas form */
.spanduk { margin-bottom: var(--gap); }
/* HIJAU seluruhnya. Sebelumnya setengah terkonversi: garis tepinya sudah
   --sukses200 tetapi latar dan teksnya masih merah, jadi "Data berhasil
   disimpan" terbaca seperti peringatan. */
.spanduk-sukses {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s4) var(--s5); border-radius: var(--r-md);
  background: var(--sukses050); border: 1px solid var(--sukses200); color: var(--sukses);
  font-size: 13.5px; line-height: 1.6;
  animation: kotak-naik var(--t-panel) var(--e-out) backwards;
}
.spanduk-sukses .ikon { color: var(--sukses); margin-top: 2px; }
.spanduk-sukses strong { display: block; }
.gagal strong { display: block; }

/* Kolom samping Form HSMP */
.angka-kecil { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s4); }
.angka-kecil > div { display: flex; flex-direction: column; gap: 2px; }
.angka-kecil strong { font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: var(--r900); line-height: 1.2; }
.angka-kecil span:last-child { font-size: 12.5px; color: var(--ink3); }

.daftar-ringkas { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.daftar-ringkas li + li { border-top: 1px solid var(--line2); }
.daftar-ringkas a {
  display: flex; flex-direction: column; gap: 2px; padding: var(--s3) var(--s2);
  margin: 0 calc(var(--s2) * -1); border-radius: var(--r-sm); color: var(--ink);
  transition: background var(--trans);
}
.daftar-ringkas a:hover { background: var(--n050); text-decoration: none; }
.daftar-ringkas span { font-size: 12.5px; color: var(--ink3); }

.legenda-status { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s3); }
.legenda-status li { display: flex; gap: var(--s3); font-size: 13px; color: var(--ink2); line-height: 1.5; }
.legenda-status strong { display: block; color: var(--ink); }
.titik { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 5px; }
.titik.sukses { background: var(--sukses); }
.titik.galat { background: var(--galat); }

/* ── Saringan halaman daftar ── */
.baris-saring {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--s4); align-items: end;
}
.baris-saring-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.baris-saring-aksi { display: flex; gap: var(--s2); flex-wrap: wrap; }
.baris-saring-aksi .tombol-utama, .baris-saring-aksi .tombol-garis { height: 46px; }
.saringan-kaki-ringkas {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
  margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line2);
}
.saringan-kaki-ringkas .form-bantu { margin: 0; }

/* Teks panjang di tabel (alasan, daftar kolom) boleh terlipat. */
.tabel td.teks-panjang { white-space: normal; min-width: 320px; max-width: 440px; line-height: 1.5; }
.teks-panjang { overflow-wrap: anywhere; }

/* Navigasi halaman */
.nav-hal { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: var(--s5); }
.nav-hal-btn {
  display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 var(--s2);
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff;
  color: var(--ink2); font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  transition: background var(--trans), border-color var(--trans), color var(--trans);
}
a.nav-hal-btn:hover { background: var(--n050); border-color: var(--r200); color: var(--r600); text-decoration: none; }
a.nav-hal-btn:active { background: var(--r050); transition-duration: var(--t-tekan); }
.nav-hal-btn.aktif { background: var(--r600); border-color: var(--r600); color: #fff; }
.nav-hal-btn[aria-disabled="true"] { opacity: .4; }
.nav-hal-btn .ikon { width: 16px; height: 16px; }
.nav-hal-jeda { display: inline-grid; place-items: center; min-width: 24px; height: 38px; color: var(--ink3); }
.putar-180 { display: inline-flex; transform: rotate(180deg); }

/* ── Batang ringkas (Reporting) ── */
/* Dua baris: nama dan angka di atas, batang selebar kartu di bawah.
   Di kartu sempit, tiga kolom sejajar hanya menyisakan beberapa piksel
   untuk batangnya sehingga perbandingannya tidak terbaca. */
.batang-ringkas {
  grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nama nilai" "jalur jalur";
  gap: 6px var(--s3); padding: var(--s2) 0;
}
.batang-ringkas .batang-nama { grid-area: nama; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batang-ringkas .batang-jalur { grid-area: jalur; height: 10px; border-radius: var(--r-full); }
.batang-ringkas .batang-nilai { grid-area: nilai; font-size: 14px; }
.batang-lebar .batang-nama { font-weight: 600; }

/* ── Tabel yang bisa diurutkan (Package Catalog) ── */
.tabel-urut th { padding: 0; }
.urut {
  display: inline-flex; align-items: center; gap: 6px; width: 100%;
  padding: var(--s3) var(--s4); border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink3); white-space: nowrap;
  transition: color var(--trans);
}
.tabel-urut th.k .urut { justify-content: flex-end; }
.urut:hover { color: var(--r600); }
.urut-tanda { width: 0; height: 0; border: 4px solid transparent; opacity: .35; transition: opacity var(--trans); }
.urut-tanda { border-top-color: currentColor; margin-top: 4px; }
[aria-sort] .urut { color: var(--r600); }
[aria-sort] .urut-tanda { opacity: 1; }
[aria-sort="ascending"] .urut-tanda { border-top-color: transparent; border-bottom-color: currentColor; margin-top: -4px; }

.selisih-murah { color: var(--sukses); font-weight: 700; }
.selisih-mahal { color: var(--or700); font-weight: 700; }

/* ── Zona unggah (belum aktif) ── */
.zona-unggah {
  display: grid; place-items: center; gap: 6px; padding: var(--s8) var(--s5);
  border: 2px dashed var(--n300); border-radius: var(--r-lg); background: var(--n050);
  text-align: center; color: var(--ink3);
}
.zona-unggah .ikon { width: 28px; height: 28px; color: var(--r200); }
.zona-unggah strong { color: var(--ink2); }
.zona-unggah[aria-disabled="true"] { opacity: .7; cursor: not-allowed; }

/* ── Isian tanggal dan kalender ── */
/* Teks dd/mm/yyyy, bukan <input type="date">: format tampilan input bawaan
   mengikuti bahasa browser, sehingga di Chrome berbahasa Inggris tanggal
   08/09 terbaca 9 Agustus. Kalendernya dibuat sendiri (tanggal.js) supaya
   nama bulan dan hari berbahasa Indonesia dan minggu dimulai Senin. */
.tgl { position: relative; }
.tgl .isian { padding-right: 52px; letter-spacing: .02em; }
.tgl-buka {
  position: absolute; right: 3px; top: 3px; bottom: 3px; width: 42px;
  display: grid; place-items: center; padding: 0; border: 0;
  border-radius: calc(var(--r-md) - 3px); background: none; color: var(--ink3); cursor: pointer;
  transition: background var(--trans), color var(--trans);
}
.tgl-buka:hover, .tgl-buka[aria-expanded="true"] { background: var(--r050); color: var(--r600); }
.tgl-buka:active { transition-duration: var(--t-tekan); }

.kal {
  position: absolute; z-index: 32; width: 304px; padding: var(--s3);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh3);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--trans), transform var(--trans), visibility 0s linear var(--t-dasar);
}
.kal.di-atas { transform: translateY(4px); }
.kal.terbuka { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.kal-kepala { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s1); }
.kal-judul { font-size: 14px; font-weight: 700; color: var(--r900); }
.kal-nav {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--ink2); cursor: pointer;
  transition: background var(--trans), color var(--trans);
}
.kal-nav:hover { background: var(--n050); color: var(--r600); }
.kal-nav:disabled { opacity: .3; cursor: default; background: none; }
.kal-nav .ikon { width: 16px; height: 16px; }
.kal-minggu, .kal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.kal-minggu { padding: 6px 0 4px; }
.kal-minggu span {
  text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink3);
}
.kal-grid { row-gap: 2px; }
.kal-hari {
  height: 36px; padding: 0; border: 0; border-radius: var(--r-sm); background: none;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background var(--trans-kecil), color var(--trans-kecil), box-shadow var(--trans-kecil);
}
.kal-hari:hover { background: var(--n050); }
.kal-hari.luar { color: var(--ink3); font-weight: 500; }
.kal-hari.hari-ini { box-shadow: inset 0 0 0 1.5px var(--r200); }
/* Rentang antara Dari dan Sampai: pita muda tanpa sudut, ujungnya lebih tua. */
.kal-hari.dalam { background: var(--n050); border-radius: 0; }
.kal-hari.pasangan { background: var(--r050); color: var(--r600); }
.kal-hari.terpilih { background: var(--r600); color: #fff; box-shadow: none; }
.kal-hari:disabled { color: var(--n300); background: none; box-shadow: none; cursor: not-allowed; font-weight: 500; }
.kal-hari:focus-visible { outline-offset: 0; }
.kal-kaki {
  display: flex; justify-content: space-between; gap: var(--s2);
  margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line2);
}
.kal-kaki button {
  height: 34px; padding: 0 var(--s3); border: 0; border-radius: var(--r-sm); background: none;
  font: inherit; font-size: 13px; font-weight: 700; color: var(--r600); cursor: pointer;
  transition: background var(--trans);
}
.kal-kaki button:hover { background: var(--n050); }
.kal-kaki button:disabled { color: var(--ink3); opacity: .5; cursor: default; background: none; }
.kal-kaki [data-kal-hapus] { color: var(--ink2); }

/* ── Rentang cepat ── */
.rentang-baris {
  display: flex; align-items: center; gap: var(--s2) var(--s4); flex-wrap: wrap;
  margin-bottom: var(--s4); padding-bottom: var(--s4); border-bottom: 1px solid var(--line2);
}
.rentang { display: flex; flex-wrap: wrap; gap: 6px; }
.rentang-pil {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r-full); background: #fff;
  font-size: 12.5px; font-weight: 600; color: var(--ink2); white-space: nowrap;
  transition: background var(--trans), border-color var(--trans), color var(--trans), box-shadow var(--trans);
}
.rentang-pil:hover { background: var(--n050); border-color: var(--r200); color: var(--r600); text-decoration: none; }
.rentang-pil:active { background: var(--r050); transition-duration: var(--t-tekan); }
.rentang-pil[aria-current="true"] {
  background: var(--r600); border-color: var(--r600); color: #fff;
  box-shadow: 0 1px 2px rgba(165,0,23,.13), 0 3px 8px rgba(230,0,18,.14);
}

/* ── Pembanding periode (Reporting) ── */
/* Netral: arah ditunjukkan panah, bukan hijau/merah, karena naik tidak
   selalu baik (rollback) dan turun tidak selalu buruk. */
.banding { margin-right: 2px; font-weight: 700; color: var(--ink2); font-variant-numeric: tabular-nums; }
/* Sebaris dengan teks, bukan inline-flex: kotak flex menambah tinggi baris
   sehingga angka KPI di kartu ini turun beberapa piksel dari kartu sebelah. */
.banding .ikon { width: 14px; height: 14px; margin-right: 2px; vertical-align: -2px; }

/* ── Ringkasan katalog ── */
.kepala-bagian .judul-bagian { margin: 0; }
.kepala-bagian .kartu-sub { margin-top: 2px; }
.tabel-pilih tbody tr { cursor: pointer; }
.tabel-pilih tbody td a { color: var(--r900); }
.tabel-pilih tbody tr:hover td a { color: var(--r600); }
.tabel-panah { display: inline-flex; transform: rotate(180deg); color: var(--ink3); transition: color var(--trans), transform var(--trans); }
.tabel-panah .ikon { width: 16px; height: 16px; }
.tabel-pilih tbody tr:hover .tabel-panah { color: var(--r600); transform: rotate(180deg) translateX(-2px); }

/* ── Sidebar besar & kecil ── */
/* Lencana aplikasi di sudut logo Telkomsel: satu-satunya pembeda
   aplikasi saat sidebar kecil. */
.sb-tanda { position: relative; flex: none; }
.sb-tanda-app {
  position: absolute; right: -6px; bottom: -6px;
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; color: var(--r600);
  box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgba(26,26,30,.18);
}
.sb-tanda .sb-tanda-app .ikon { width: 12px; height: 12px; stroke-width: 2.4; }

.sb-saat-kecil, .sb-saat-laci, .sb-hanya-kecil { display: none; }
.sb-ukuran .ikon { transition: transform var(--trans-panel), color var(--trans); }

@media (min-width: 861px) {
  html.sb-kecil { --sidebar: 76px; }
  /* Lebar sidebar, bar atas, dan isi bergeser bersama. Ikon menu tidak ikut
     bergerak: jarak kirinya sama di kedua ukuran, jadi yang terlihat hanya
     teksnya yang hilang dan sidebar yang menyempit. */
  .sidebar { transition: transform var(--trans-panel), width var(--trans-panel); }
  .atas { transition: box-shadow var(--trans), left var(--trans-panel); }
  .konten { transition: margin-left var(--trans-panel); }
  .sb-nav { overflow-x: hidden; }
  .sb-item, .sb-kepala, .sb-bantuan { white-space: nowrap; }
  .sb-kepala, .sb-bantuan { transition: background var(--trans), padding var(--trans-panel); }

  html.sb-kecil .sb-saat-besar { display: none; }
  html.sb-kecil .sb-saat-kecil { display: inline; }
  html.sb-kecil .sb-ukuran .ikon { transform: rotate(180deg); }

  /* Teks disembunyikan dengan cara .sr, bukan display:none, supaya nama
     menu dan jumlah Responder tetap dibacakan pembaca layar. */
  html.sb-kecil .sidebar .sb-teks, html.sb-kecil .sidebar .sb-lencana {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  html.sb-kecil .sb-merek-teks, html.sb-kecil .sb-luar, html.sb-kecil .sb-label,
  html.sb-kecil .sb-grup, html.sb-kecil .sb-sub-daftar,
  html.sb-kecil .sb-sub-wadah, html.sb-kecil .sb-kaki { display: none; }
  html.sb-kecil .sb-hanya-kecil { display: flex; }
  html.sb-kecil .sb-item { padding: 0 17px; }
  html.sb-kecil .sb-kepala, html.sb-kecil a.sb-kepala { padding-left: 19px; padding-right: 19px; }
  html.sb-kecil .sb-bantuan { padding: 9px; }
  html.sb-kecil .sb-bantuan img { width: 32px; height: 32px; }
  html.sb-kecil .sb-garis { margin: var(--s2) var(--s3); }
}
@media (max-width: 860px) {
  .sb-saat-besar { display: none; }
  .sb-saat-laci { display: inline; }
}

/* Tooltip sidebar kecil (app.js). */
.sb-tip {
  position: fixed; z-index: 45; pointer-events: none;
  padding: 6px 11px; border-radius: 8px;
  background: var(--ink); color: #fff; box-shadow: var(--sh2);
  font-size: 12.5px; font-weight: 600; line-height: 1.4; white-space: nowrap;
  opacity: 0; transform: translateX(-4px);
  transition: opacity var(--trans-kecil), transform var(--trans-kecil);
}
.sb-tip::before {
  content: ""; position: absolute; left: -4px; top: 50%; margin-top: -4px;
  border: 4px solid transparent; border-left: 0; border-right-color: var(--ink);
}
.sb-tip.tampil { opacity: 1; transform: none; }

/* ── Bar atas ── */
/* Menu akun */
.menu-pengguna-isi { width: 260px; text-align: left; }
.menu-akun {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s2) var(--s3); margin-bottom: var(--s1);
  border-bottom: 1px solid var(--line2);
}
.avatar-kecil { width: 36px; height: 36px; font-size: 12.5px; flex: none; cursor: default; }
.avatar-kecil:hover { transform: none; box-shadow: none; }
.menu-akun-teks { min-width: 0; }
.menu-akun-teks strong { display: block; font-size: 14px; line-height: 1.3; color: var(--ink); }
.menu-akun-teks span {
  display: block; font-size: 12px; color: var(--ink3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.menu-baris {
  display: flex; align-items: center; gap: var(--s3); width: 100%;
  min-height: 40px; padding: 0 var(--s3); border: 0; border-radius: var(--r-sm); background: none;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); text-align: left; cursor: pointer;
  transition: background var(--trans), color var(--trans);
}
.menu-baris .ikon { color: var(--ink3); transition: color var(--trans); }
.menu-baris:hover { background: var(--n050); color: var(--r600); text-decoration: none; }
.menu-baris:hover .ikon { color: var(--r600); }
.menu-baris:active { background: var(--r050); transition-duration: var(--t-tekan); }
.menu-keluar:hover { background: var(--galat050); color: var(--galat); }
.menu-keluar:hover .ikon { color: var(--galat); }

/* ── Panel detail kiriman (Responder) ── */
.tautan-baris {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 700; color: var(--r900); text-align: left;
  font-variant-numeric: tabular-nums; transition: color var(--trans);
}
.tautan-baris:hover { color: var(--r600); text-decoration: underline; text-underline-offset: 3px; }
.tabel-detail tbody tr { cursor: pointer; }
.tabel-detail tbody tr.dipilih td { background: var(--n050); }

.panel-latar { position: fixed; inset: 0; z-index: 80; }
.panel-latar[hidden] { display: none; }
.panel-selubung {
  position: absolute; inset: 0; background: rgba(26,26,30,.32);
  animation: pudar-masuk var(--t-panel) var(--e-out) backwards;
}
@keyframes panel-masuk { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes panel-keluar { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(24px); } }
@keyframes pudar-keluar { from { opacity: 1; } to { opacity: 0; } }
.panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100%);
  display: flex; flex-direction: column;
  background: #fff; border-left: 1px solid var(--line); box-shadow: -18px 0 48px rgba(26,26,30,.14);
  overscroll-behavior: contain; outline: none;
  animation: panel-masuk var(--t-panel) var(--e-out) backwards;
}
.panel-latar.keluar .panel { animation: panel-keluar 220ms var(--e-out) forwards; }
.panel-latar.keluar .panel-selubung { animation: pudar-keluar 220ms var(--e-out) forwards; }
.panel-kepala {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4);
  padding: var(--s6) var(--s6) var(--s5); border-bottom: 1px solid var(--line2);
}
.panel-kepala .label { display: block; }
.panel-judul { margin: 4px 0 var(--s2); font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: var(--r900); line-height: 1.2; }
.panel-isi { flex: 1; overflow-y: auto; padding: var(--s5) var(--s6); }
.panel-alasan {
  padding: var(--s4); border-radius: var(--r-md); background: var(--n050); border: 1px solid var(--line2);
}
.panel-alasan p { margin: var(--s2) 0 var(--s2); font-size: 15px; line-height: 1.65; color: var(--ink); overflow-wrap: anywhere; white-space: pre-line; }
.panel-alasan .form-bantu { display: block; margin: 0; }
.panel-data { margin: var(--s5) 0 0; display: grid; gap: 0; }
.panel-data > div {
  display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--s3);
  padding: var(--s3) 0; border-bottom: 1px solid var(--line2);
}
.panel-data dt { font-size: 12.5px; font-weight: 600; color: var(--ink3); }
.panel-data dd { margin: 0; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.panel-kaki {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s4) var(--s6); border-top: 1px solid var(--line2);
}
.panel-kaki .form-bantu { margin: 0; text-align: center; }
.panel-kaki .tombol-garis:disabled { opacity: .45; cursor: default; box-shadow: none; background: #fff; border-color: var(--line); }
.panel-kaki .putar-180 .ikon { width: 16px; height: 16px; }

/* ── Responsif bagian 16 ── */
@media (max-width: 1280px) {
  .baris-saring-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .grid-samping, .grid-dua, .grid-seimbang { grid-template-columns: minmax(0, 1fr); }
  .baris-saring { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .baris-saring-aksi { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  body.tanpa-bilah a.sb-kepala, body.tanpa-bilah .sb-kepala { padding: 0 var(--s5); }
  /* Kotak cari mengambil seluruh ruang antara tombol menu dan avatar;
     dulu berbagi rata dengan pengisi kosong sehingga terpotong "Ca…". */
  .atas-baris > .atas-spasi { display: none; }
  .cari { padding: 0 var(--s4); gap: var(--s2); }
  .panel-kepala, .panel-isi, .panel-kaki { padding-left: var(--s5); padding-right: var(--s5); }
  .nav-hal-btn { min-width: 44px; height: 44px; }
  .rentang-pil { height: 44px; padding: 0 var(--s4); }
  .kal-hari, .kal-nav, .kal-kaki button { height: 44px; }
  .kal-nav { width: 44px; }
}
@media (max-width: 640px) {
  .baris-saring, .baris-saring-5, .grid-ringkas, .grid-ringkas-2, .saringan-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .baris-saring-aksi > * { flex: 1; }
  .baris-cek { flex-direction: column; }
  .baris-cek .tombol-utama { width: 100%; }
  .langkah { grid-template-columns: 28px minmax(0, 1fr); gap: var(--s3); }
  .langkah-nomor { width: 28px; height: 28px; font-size: 13px; }
  .form-aksi .tombol-utama { width: 100%; }
  .angka-kecil strong { font-size: 22px; }
  .rentang-baris { flex-direction: column; align-items: stretch; }
  .panel-data > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .panel-kaki .form-bantu { display: none; }
  .panel-kaki .tombol-garis { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .spanduk-sukses { animation-name: pudar-masuk; }
}

/* Kurangi gerak — berlaku bila "Animation effects" di Windows dimatikan,
   yang umum di laptop kantor dengan mode kinerja.

   Yang dihilangkan hanya GERAK: geseran, angkatan, pembesaran, batang
   tumbuh, laci meluncur. Perubahan warna, bayangan, dan kepekatan tetap
   halus, karena itu bukan gerak. Versi sebelumnya mematikan semua transisi,
   sehingga di mesin dengan pengaturan ini setiap hover berganti mendadak —
   kebalikan dari yang dimaksud pengaturannya. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kpi:hover, .tombol-utama:hover, .avatar:hover,
  .masuk-tombol:hover, .veronika:hover, .masuk-kembali:hover .ikon { transform: none; }
  /* Putaran tetap ada karena itu penanda status, hanya dilambatkan. */
  .masuk-putar { animation-duration: 1.4s; }
  .sidebar, .saringan-lipat, .tombol-lipat .ikon:last-child { transition: none; }
  .sb-sub-wadah, .sb-grup .ikon:last-child { transition: none; }
  .batang-jalur > i, .pacing-jalur > i, .kpi-jalur > i { animation: none; }
  .kal, .kal.di-atas { transform: none; }
  .konten { transition: none; }
  .atas { transition: box-shadow var(--trans); }
  .sb-tip { transform: none; }
  .panel { animation-name: pudar-masuk; }
  .panel-latar.keluar .panel { animation-name: pudar-keluar; }
  .tabel-pilih tbody tr:hover .tabel-panah { transform: rotate(180deg); }
  /* Garis memuat berhenti bergerak dan tampil penuh selama menunggu. */
  body.sedang-memuat .bilah::after { animation: none; background-size: 100% 100%; background-position: 0 0; }
  /* Kemunculan tetap bertahap, tapi lewat kepekatan saja. */
  .konten-dalam, .masuk-kartu, .donat-wadah svg,
  .menu-pengguna[open] .menu-pengguna-isi,
  .modal-latar:not([hidden]) .modal { animation-name: pudar-masuk; }
}

/* Legenda garis pembanding bulan lalu di grafik tren. */
.titik-putus {
  width: 14px; height: 0; border-top: 2.5px dashed var(--n300); border-radius: 0;
}

/* ── 17. Unggah berkas ────────────────────────────────────── */
/* Halaman unggah WL: tiga jenis berkas dengan aturan berbeda, alurnya
   periksa dulu baru simpan. Bagian hasil pemeriksaan sengaja mendominasi
   halaman — yang paling penting di sini bukan tombol unggahnya, tapi
   bukti bahwa isi berkas sudah masuk ke kolom yang benar. */

.tab-baris {
  display: flex; gap: var(--s1); flex-wrap: wrap;
  padding: var(--s1); border-radius: var(--r-full); background: var(--n050);
  width: fit-content; max-width: 100%;
}
.tab {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s4);
  border-radius: var(--r-full); color: var(--ink2); font-size: 13.5px; font-weight: 600;
  transition: background var(--trans), color var(--trans);
}
.tab:hover { background: #fff; color: var(--r900); text-decoration: none; }
.tab:active { transition-duration: var(--t-tekan); }
.tab-aktif, .tab-aktif:hover { background: var(--r600); color: #fff; box-shadow: var(--sh1); }

.judul-kecil {
  margin: var(--s6) 0 var(--s1); font-size: 14px; font-weight: 700; color: var(--ink);
}

/* HIJAU, bukan merah merek. Kartu ini muncul setelah unggahan atau
   penyimpanan berhasil; dengan warna merek merah ia terbaca sebagai
   peringatan. Sisa migrasi tema 28 Sep yang terlewat — lihat catatan
   "hijau semantik dipertahankan" di CLAUDE.md. */
.kartu-berhasil { border-color: var(--sukses200); background: linear-gradient(180deg, var(--sukses050), #fff 60px); }
.kartu-berhasil .kartu-judul { display: flex; align-items: center; gap: var(--s2); color: var(--sukses); }
.kartu-berhasil .kartu-judul .ikon { color: var(--sukses); }

/* Daftar nomor kembar: bisa panjang, jadi dibatasi tingginya dan
   diberi gulir sendiri supaya tidak mendorong tombol keluar layar. */
.daftar-nomor {
  margin: var(--s2) 0 0; max-height: 120px; overflow-y: auto;
  font-size: 12.5px; line-height: 1.7; word-break: break-all;
}
.tabel-pendek { max-height: 320px; overflow-y: auto; }

.aksi-simpan {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line2);
}
.pilihan-mode { flex-basis: 100%; border: 0; padding: 0; margin: 0 0 var(--s2); }
.pilihan-mode legend { padding: 0; margin-bottom: var(--s2); }
.pilihan-mode .radio {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s3) var(--s4); margin-bottom: var(--s2);
  border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: 13px; line-height: 1.6; color: var(--ink2); cursor: pointer;
  transition: border-color var(--trans), background var(--trans);
}
.pilihan-mode .radio:hover { border-color: var(--r200); background: var(--n050); }
.pilihan-mode .radio:has(input:checked) { border-color: var(--r400); background: var(--n050); }
.pilihan-mode .radio input { margin-top: 3px; flex: none; }
.pilihan-mode .radio strong { color: var(--ink); }

/* Zona unggah adalah <label> yang membungkus <input type=file>: seluruh
   kotaknya bisa diklik tanpa JavaScript, dan tetap bisa difokus keyboard. */
.form-unggah { display: grid; gap: var(--s4); }
.zona-unggah { cursor: pointer; position: relative; }
.zona-unggah:hover { border-color: var(--r200); background: #fff; }
.zona-unggah:focus-within { border-color: var(--r400); box-shadow: 0 0 0 3px var(--r050); }
.berkas-isian {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.nama-berkas { font-size: 12.5px; color: var(--ink3); }
.nama-berkas.ada { color: var(--r600); font-weight: 600; }

.kosong-kecil { margin: 0; font-size: 13px; color: var(--ink3); }

/* ── 18. Kelola user ──────────────────────────────────────── */

/* Pesan "berhasil" — HIJAU. Sama seperti .kartu-berhasil: ini keadaan
   sukses, bukan penekanan merek. Merah di sini terbaca sebagai galat,
   justru kebalikan dari maksudnya. */
.berhasil {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s4) var(--s5); border-radius: var(--r-md);
  background: var(--sukses050); color: var(--sukses); font-size: 13.5px; line-height: 1.6;
}
.berhasil .ikon { color: var(--sukses); margin-top: 2px; }

/* Kata sandi sekali-tampil: dibuat besar dan berjarak supaya bisa dibaca
   dan disalin tanpa salah huruf. */
.sandi-sekali {
  margin: var(--s4) 0; padding: var(--s4) var(--s5);
  background: var(--n050); border: 1px dashed var(--r200); border-radius: var(--r-md);
  font-family: Consolas, "SF Mono", monospace; font-size: 22px; font-weight: 700;
  letter-spacing: 3px; color: var(--r900); text-align: center; user-select: all;
  word-break: break-all;
}

/* Dialog kelola per baris.
   Ditulis di LUAR tabel dan dibuka lewat :target, bukan <details> di dalam
   sel: selubung gelap position:fixed yang lahir di dalam <td> tidak pernah
   tampil di atas isi halaman (urutan penggambaran tabel), dan panel yang
   tumbuh di dalam sel membuat barisnya menjulur lalu terpotong oleh
   .tabel-wadah yang punya overflow-x: auto.
   Tanpa JavaScript sama sekali: tautan membuka, selubung menutup. */
.dialog { display: none; }
.dialog:target { display: block; }
/* 60/61: di atas sidebar (40) dan bar atas (30), sejajar dengan modal
   sesi berakhir. Dengan z-index 40, sidebar tidak ikut tergelapkan dan
   dialog terlihat seperti menempel di tengah halaman saja. */
.dialog-latar {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(26,26,30, .45);
}
.dialog-isi {
  position: fixed; z-index: 61; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto;
  display: grid; gap: var(--s4); padding: var(--s5);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh3);
}
/* min-width:0 wajib: tanpa itu isian di dalam grid tidak mau menyusut di
   bawah lebar bawaannya, dan isi dialog meluber ke samping. */
.dialog-isi > * { min-width: 0; }
.dialog-isi .isian, .dialog-isi .tgl { width: 100%; max-width: 100%; }

.dialog-kepala { display: flex; align-items: flex-start; gap: var(--s3); }
.dialog-judul { margin: 0; flex: 1; font-size: 15px; font-weight: 700; color: var(--ink); }
.dialog-judul span { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--ink3); }
.dialog-tutup {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: var(--r-md); color: var(--ink3);
  transition: background var(--trans), color var(--trans);
}
.dialog-tutup:hover { background: var(--r050); color: var(--r900); text-decoration: none; }

/* Halaman Data pelanggan. */
.form-cari-pelanggan { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.form-cari-pelanggan .isian { flex: 1 1 260px; max-width: 360px; }

/* Navigasi halaman. Tombol yang tidak bisa dipakai tetap DITAMPILKAN,
   bukan disembunyikan: posisi tombol yang berpindah-pindah antar halaman
   membuat orang salah klik. */
.halaman-nav {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s4); margin-top: var(--s5); flex-wrap: wrap;
}
.halaman-nomor { font-size: 13px; font-weight: 600; color: var(--ink2); }
.tombol-mati { opacity: .45; cursor: not-allowed; pointer-events: none; }

.kelola-form { display: grid; gap: var(--s2); }
/* Isian kata sandi tidak perlu selebar kartu: baris isian yang terlalu
   panjang justru sulit dipindai matanya. */
.form-sandi { max-width: 420px; margin-top: var(--s4); }
.form-sandi .label { margin-top: var(--s2); }
.form-sandi .form-bantu { margin-top: 0; }
.kelola-form + .kelola-form { padding-top: var(--s4); border-top: 1px solid var(--line); }
.kelola-form .label { margin: 0; }
.kelola-form button { justify-self: start; margin-top: var(--s1); }
.tombol-kecil { min-height: 32px; padding: 0 var(--s3); font-size: 12.5px; }
.tombol-bahaya {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--s4);
  border: 1px solid var(--galat); border-radius: var(--r-md); background: #fff; color: var(--galat);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background var(--trans), color var(--trans);
}
.tombol-bahaya:hover { background: var(--galat); color: #fff; }
.tombol-bahaya:active { transition-duration: var(--t-tekan); }
.tombol-bahaya .ikon { width: 14px; height: 14px; }

/* ── 19. Maintenance ──────────────────────────────────────── */

/* Banner pemberitahuan: cukup terlihat untuk dibaca, tidak sampai
   menutupi isi halaman. Warna oranye, bukan merah — ini pemberitahuan,
   bukan kegagalan. */
.banner-rawat {
  display: flex; align-items: flex-start; gap: var(--s3);
  margin-bottom: var(--s5); padding: var(--s3) var(--s4);
  border: 1px solid var(--or200); border-left: 4px solid var(--or);
  border-radius: var(--r-md); background: var(--or100);
  color: var(--or900); font-size: 13px; line-height: 1.6;
}
.banner-rawat .ikon { color: var(--or); margin-top: 2px; flex: none; }

.sakelar-rawat { display: grid; gap: var(--s4); }
.sakelar {
  display: flex; gap: var(--s4); align-items: flex-start;
  padding: var(--s4) var(--s5); border: 1px solid var(--line); border-radius: var(--r-md);
  cursor: pointer; transition: border-color var(--trans), background var(--trans);
}
.sakelar:hover { border-color: var(--r200); background: var(--n050); }
.sakelar:has(input:checked) { border-color: var(--or); background: var(--or100); }
.sakelar input { margin-top: 4px; flex: none; width: 18px; height: 18px; }
.sakelar-teks strong { display: block; color: var(--ink); font-size: 14px; }
.sakelar-teks span { display: block; margin-top: 4px; font-size: 13px; color: var(--ink2); line-height: 1.6; }

/* Halaman yang dilihat pengguna biasa selama maintenance. */
.hal-rawat {
  min-height: 100vh; display: grid; place-items: center; padding: var(--s6);
  background: var(--n050); font-family: "Plus Jakarta Sans", system-ui, sans-serif; color: var(--ink);
}
.rawat-kartu {
  max-width: 480px; width: 100%; padding: var(--s8) var(--s6); text-align: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh2);
}
.rawat-kartu h1 { margin: var(--s4) 0 var(--s2); font-size: 22px; }
.rawat-kartu p { margin: 0 0 var(--s3); font-size: 14px; color: var(--ink2); line-height: 1.7; }
.rawat-ikon {
  width: 56px; height: 56px; margin: 0 auto; display: grid; place-items: center;
  border-radius: 50%; background: var(--or100); color: var(--or);
}
.rawat-ikon .ikon { width: 28px; height: 28px; }
.rawat-kaki { margin-top: var(--s6); font-size: 12px; color: var(--ink3); }

/* ── 20. Sinkronisasi ─────────────────────────────────────── */

/* Catatan langkah pemuatan: urutan waktu, jadi tetap monospace supaya
   kolom jamnya lurus dan mudah diikuti. */
.catatan-muat {
  margin: 0; padding: var(--s4); max-height: 280px; overflow: auto;
  background: var(--gelap); color: var(--gelap-teks); border-radius: var(--r-md);
  font-family: Consolas, "SF Mono", monospace; font-size: 12px; line-height: 1.8;
  white-space: pre-wrap; word-break: break-word;
}

/* Daftar langkah bernomor di kartu keterangan ("Cara kerjanya").
   Namanya sengaja BUKAN .langkah: nama itu sudah dipakai kerangka
   bernomor di Form HSMP dengan `display: grid` dua kolom (32px + sisa).
   Aturan lama di sini tidak pernah mengembalikan `display`, jadi tiap
   <li> jatuh bergantian ke kolom 32 px dan teksnya patah satu huruf
   per baris. Kelas terpisah, bukan `display: block` yang menimpa. */
.alur { counter-reset: alur; display: grid; gap: var(--s4); margin: var(--s5) 0 0; padding: 0; list-style: none; }
.alur li {
  position: relative; counter-increment: alur; padding-left: 38px;
  font-size: 13.5px; line-height: 1.7; color: var(--ink2);
}
.alur li::before {
  content: counter(alur);
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--r050); color: var(--r600);
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
}
/* Garis penghubung antar-angka: urutannya berarti, jadi terlihat
   sebagai satu alur dan bukan lima butir lepas. Jaraknya dihitung dari
   gap di atas, supaya ikut menyesuaikan kalau gap-nya diubah. */
.alur li:not(:last-child)::after {
  content: ""; position: absolute; left: 11px; top: 28px;
  bottom: calc(-1 * var(--s4) - 2px); width: 2px; border-radius: 1px; background: var(--line);
}
.alur strong { color: var(--ink); font-weight: 700; }
.alur code { white-space: nowrap; }