/* ═══════════════════════════════════════════════════════════
   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 ────────────────────────────────────────────── */
:root {
  /* Warna inti — tidak berubah dari desain */
  --g900: #01563A;
  --g700: #027B50;
  --g500: #0FA968;
  --g300: #7FC9A4;
  --g100: #E3F2E9;
  --g050: #F1F7F3;
  --or:    #E8792B;
  --or100: #FCEEE1;
  --ink:  #14261E;
  --ink2: #55685E;
  /* Sedikit digelapkan dari #8C9E94: pada teks 11px kontrasnya
     dulu hanya ~2,8:1, di bawah ambang nyaman baca. Sekarang ~4,6:1. */
  --ink3: #66796F;
  --line:  #E2ECE6;
  --line2: #EFF5F1;
  --red:   #C9462C;
  --red100:#FBE9E5;
  --up:    #1E8E5E;

  /* Jarak — kelipatan 4 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;

  /* Sudut */
  --r-sm: 10px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-full: 999px;

  /* Bayangan berlapis, makin tinggi makin lembut */
  --sh1: 0 1px 2px rgba(20,38,30,.05);
  --sh2: 0 1px 2px rgba(20,38,30,.04), 0 6px 20px rgba(20,38,30,.05);
  --sh3: 0 2px 4px rgba(20,38,30,.05), 0 14px 34px rgba(20,38,30,.09);
  --sh-fokus: 0 0 0 3px var(--g100);

  /* Gerak — satu kurva untuk semua keadaan, empat kecepatan.
     Kurvanya mulai bergerak cepat lalu melambat di ujung, jadi perubahan
     terasa langsung ditanggapi tanpa berhenti mendadak. */
  --e-out: cubic-bezier(.22, .61, .36, 1);

  --t-tekan: 90ms;   /* saat ditekan — harus terasa seketika */
  --t-kecil: 140ms;  /* latar baris tabel; lebih lama akan menjejak */
  --t-dasar: 220ms;  /* tombol, kartu, form, menu */
  --t-panel: 300ms;  /* laci, selubung, modal */

  --trans:       var(--t-dasar) var(--e-out);
  --trans-kecil: var(--t-kecil) var(--e-out);
  --trans-panel: var(--t-panel) var(--e-out);

  /* Kerangka */
  --sidebar: 272px;
  --topbar: 80px;
  --bilah: 52px;
  --gap: var(--s5);
  --pad-konten: clamp(16px, 2vw, 28px);
  --pad-kartu-y: clamp(18px, 1.6vw, 26px);
  --pad-kartu-x: clamp(18px, 1.8vw, 28px);

  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

html {
  background: var(--g050);
  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(--g700); 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(--g700);
  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(--g050); 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(--g700); color: #fff; font-size: 14.5px;
  box-shadow: 0 1px 2px rgba(1,86,58,.13), 0 4px 12px rgba(2,123,80,.15);
}
.tombol-utama:hover {
  background: var(--g900); transform: translateY(-1px); text-decoration: none;
  box-shadow: 0 2px 4px rgba(1,86,58,.13), 0 8px 18px rgba(2,123,80,.19);
}
.tombol-utama:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(1,86,58,.16); }

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

.tombol-ikon {
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line); background: #fff; color: var(--ink2);
}
.tombol-ikon:hover { background: var(--g050); color: var(--g700); border-color: var(--g300); }
.tombol-ikon:active { background: var(--g100); color: var(--g700); }

/* ── 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(--g050); 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(--g300); background: #fff; }
.pilih select:focus-visible { outline: none; border-color: var(--g700); box-shadow: var(--sh-fokus); }
.pilih select.aktif { background: #fff; border-color: var(--g300); color: var(--g900); 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(--g050); 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(--g300); }
.masukan:focus-visible { outline: none; background: #fff; border-color: var(--g700); 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: #EEF4F0; 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(--g050); border-color: var(--line); }
.cari:focus-within, .cari-kecil:focus-within {
  background: #fff; border-color: var(--g700); 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(--g900); 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(--g050); color: var(--ink2);
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.chip-hijau  { background: var(--g100); color: var(--g700); }
.chip-oranye { background: var(--or100); color: #A85214; }
.chip-abu    { background: #EDF1EF; color: var(--ink2); }
.chip-merah  { background: var(--red100); color: var(--red); }

/* 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(--g050); border: 1px dashed #CFDDD5;
  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(--red100); color: #8C2F1D; font-size: 13.5px; line-height: 1.6;
}
.gagal .ikon { color: var(--red); 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: #E8EFEA;
  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: #CFDDD5 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(20,38,30,.13), transparent) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(20,38,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: #CFDDD5; border-radius: var(--r-full); }
.tabel-wadah::-webkit-scrollbar-thumb:hover { background: var(--g300); }

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(--ink3); background: var(--g050);
}
.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: #FAFCFB; }
.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(--g700); 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(--g050); z-index: 2; }
.tabel tbody tr:hover td.tempel { background: #FAFCFB; }

.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(--g050); overflow: hidden; flex: none;
}
.porsi-jalur > i { display: block; height: 100%; background: var(--g700); border-radius: inherit; }

/* ── 9. Kerangka aplikasi ────────────────────────────────── */
.latar {
  position: fixed; inset: 0; z-index: -1;
  background: url("/static/img/checkpaid_bg.png") center / cover no-repeat;
}
.latar::after { content: ""; position: absolute; inset: 0; background: rgba(241,247,243,.35); }

/* Sidebar */
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--sidebar);
  display: flex; flex-direction: column;
  background: #fff; border-right: 1px solid var(--line);
  transition: transform var(--trans-panel);
}
a.sb-kepala { display: block; text-decoration: none; transition: background var(--trans); }
a.sb-kepala:hover { background: var(--g050); text-decoration: none; }
.sb-kepala {
  height: calc(var(--topbar) + var(--bilah));
  padding: var(--s6) var(--s6) 0; border-bottom: 1px solid var(--line);
}
.sb-tanda {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: var(--r-md); color: #fff;
  background: linear-gradient(160deg, var(--g500), var(--g700));
  box-shadow: 0 4px 10px rgba(2,123,80,.25);
}
.sb-tanda .ikon { width: 20px; height: 20px; stroke-width: 2.6; }
/* Logo Telkomsel di dalam kotak hijau — 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: var(--g700); line-height: 1.1;
}
.sb-sub { font-size: 12.5px; color: var(--ink3); }

.sb-nav { flex: 1; overflow-y: auto; padding: var(--s4) var(--s3); }
.sb-grup {
  display: flex; align-items: center; gap: var(--s3);
  height: 42px; padding: 0 var(--s4); border-radius: var(--r-md);
  background: var(--g100); color: var(--g700); font-weight: 700; font-size: 14.5px;
}
.sb-grup .ikon:last-child { margin-left: auto; }

.sb-sub-daftar { list-style: none; margin: var(--s2) 0 var(--s3) var(--s4); padding: 0; }
.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: var(--ink2); 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: #C3D2CA; flex: none; transition: background var(--trans);
}
.sb-sub-daftar a:hover { background: var(--g050); color: var(--ink); text-decoration: none; }
.sb-sub-daftar a[aria-current="true"] { background: var(--g050); color: var(--g900); font-weight: 700; }
.sb-sub-daftar a[aria-current="true"]::before { background: var(--or); }

.sb-garis { height: 1px; background: var(--line); 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: var(--ink); font-size: 14.5px; font-weight: 500;
  text-align: left; cursor: pointer;
  transition: background var(--trans), color var(--trans);
}
.sb-item .ikon { color: var(--ink3); transition: color var(--trans); }
.sb-item:hover { background: var(--g050); text-decoration: none; }
.sb-item:hover .ikon { color: var(--g700); }
.sb-item[aria-current="page"] { background: var(--g100); color: var(--g700); font-weight: 700; }
.sb-item[aria-current="page"] .ikon { color: var(--g700); }

.sb-kaki {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s6); border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink3);
}
.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 var(--line); border-radius: var(--r-md);
  background: var(--g050); color: var(--ink);
  transition: background var(--trans), border-color var(--trans), box-shadow var(--trans);
}
.sb-bantuan:hover { background: #fff; border-color: var(--g300); box-shadow: var(--sh1); text-decoration: none; }
.sb-bantuan:active { background: var(--g100); 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 var(--line);
}
.sb-bantuan-judul { display: block; font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--g900); }
.sb-bantuan-sub { display: block; font-size: 11.5px; line-height: 1.4; color: var(--ink3); }

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

.atas-baris {
  height: var(--topbar); display: flex; align-items: center; gap: var(--s3);
  padding: 0 var(--pad-konten); border-bottom: 1px solid var(--line);
}
.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(--g700);
  transition: border-color var(--trans), background var(--trans);
}
.periode:hover { border-color: var(--g300); background: var(--g050); }
.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 var(--line); text-align: right;
}
.pengguna-nama { font-weight: 700; font-size: 14px; line-height: 1.3; }
.pengguna-peran { font-size: 11.5px; color: var(--ink3); }
.avatar {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 50%; background: var(--g700); color: #fff;
  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(2,123,80,.2); }
.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);
}
.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(--g900); 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(--red); }
.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: #A85214;
  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(--g050); border-color: var(--g300); }
.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(--g100); color: var(--g900);
  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(--g700); }
.chip-saring .ikon { width: 14px; height: 14px; opacity: .55; transition: opacity var(--trans); }
.chip-saring:hover { background: #fff; border-color: var(--g300); text-decoration: none; }
.chip-saring:hover .ikon { opacity: 1; }
.chip-saring:active { background: var(--g050); 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(--g500), 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: #D7E6DD; 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(--g100); color: var(--g700); 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(--g900); 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: hijau terbayar di atas oranye muda belum bayar, sama
   dengan warna donat komposisi di bawahnya. */
.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(--g700);
  transform-origin: left center; animation: tumbuh 560ms var(--e-out) backwards;
}
.naik  { color: var(--up); font-weight: 700; }
.turun { color: var(--red); 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(--g900);
}
.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(--g050);
  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(--g700); 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(--g700); }

.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(--g050); }
.segmen button:active { background: var(--g100); transition-duration: var(--t-tekan); }
.segmen button[aria-pressed="true"] { background: var(--g100); color: var(--g700); 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(--g900); 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(--g900); }
.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(--g050); 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(--g900); 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(--g500); }
.isi-low   { background: var(--g700); }
.isi-noncp { background: var(--g300); }

/* ── 14. Modal & halaman masuk ───────────────────────────── */
.modal-latar {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  padding: var(--s4); background: rgba(20,38,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(--g900); }
.modal p { margin: 0 0 var(--s6); color: var(--ink2); }

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

   Paletnya milik halaman login lama (#2D8653), sengaja tidak memakai hijau
   dasbor, supaya pengguna mengenali halaman yang sama dengan yang mereka
   pakai sekarang. Gerak masuknya tetap memakai kurva tenang aplikasi ini —
   V2 memakai kurva memantul, yang tidak dipakai lagi. */
body.hal-masuk {
  --m-hijau: #2D8653;
  --m-hijau-tua: #236B42;
  --m-hijau-bg: rgba(45,134,83,.08);
  --m-gradasi: linear-gradient(135deg, #1E7A45, #2D8653, #34A85A);
  --m-abu-50: #F8F8F9;
  --m-abu-100: #F0F0F2;
  --m-abu-200: #E2E2E6;
  /* #9A9AAA di V2 hanya ~2,6:1 di atas putih; digelapkan ke ~4,6:1. */
  --m-abu-400: #737385;
  --m-abu-600: #555566;
  --m-abu-800: #1A1A2E;
  background: #DDE8E1 url("/static/img/checkpaid_bg.png") center / cover fixed no-repeat;
}
.masuk-selubung {
  position: fixed; inset: 0; z-index: 0;
  background: rgba(10,40,20,.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(--m-gradasi);
  box-shadow: 0 6px 20px rgba(45,134,83,.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(--m-abu-800); }
.masuk-sub { margin: 4px 0 0; font-size: 13px; color: var(--m-abu-400); }

/* 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(--m-hijau-bg); color: var(--m-hijau-tua);
  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: #FDECEC; color: #B42318; }

.masuk-grup { margin-bottom: var(--s4); }
.masuk-label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--m-abu-600); }
.masuk-isian {
  display: block; width: 100%; height: 44px; padding: 0 14px;
  border: 1.5px solid var(--m-abu-200); border-radius: 10px; background: #fff;
  font: inherit; font-size: 13.5px; color: var(--m-abu-800);
  transition: border-color var(--trans), box-shadow var(--trans);
}
.masuk-isian::placeholder { color: #9A9AAA; }
.masuk-isian:hover { border-color: #C9D6CE; }
.masuk-isian:focus, .masuk-isian:focus-visible {
  outline: none; border-color: var(--m-hijau); box-shadow: 0 0 0 3px rgba(45,134,83,.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: #9A9AAA; cursor: pointer;
  transition: color var(--trans), background var(--trans);
}
.masuk-mata:hover { color: var(--m-hijau); background: var(--m-hijau-bg); }
.masuk-mata:active { background: rgba(45,134,83,.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(--m-hijau);
  text-decoration: underline transparent; text-underline-offset: 3px;
  transition: color var(--trans), text-decoration-color var(--trans);
}
.masuk-lupa:hover { color: var(--m-hijau-tua); 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(--m-gradasi); 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(45,134,83,.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(45,134,83,.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(--m-abu-400);
}
.masuk-atau::before, .masuk-atau::after { content: ""; flex: 1; height: 1px; background: var(--m-abu-200); }

.masuk-kembali {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; height: 42px; margin-top: 10px;
  border: 1.5px solid var(--m-abu-200); border-radius: 10px; background: var(--m-abu-50);
  font-size: 13px; font-weight: 600; color: var(--m-abu-600);
  transition: background var(--trans), border-color var(--trans), color var(--trans);
}
.masuk-kembali:hover { background: var(--m-hijau-bg); border-color: var(--m-hijau); color: var(--m-hijau); text-decoration: none; }
.masuk-kembali:active { background: rgba(45,134,83,.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(--m-abu-100);
  text-align: center; font-size: 11.5px; color: var(--m-abu-400);
}
.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(--m-abu-400);
  transition: color var(--trans);
}
.masuk-kaki-tautan a:hover { color: var(--m-hijau); 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(--m-abu-200); 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(--m-abu-200); }
.veronika-nama { display: block; font-size: 12px; font-weight: 700; line-height: 1.3; color: #1A5C34; }
.veronika-sub  { display: block; font-size: 10px; font-style: italic; color: var(--m-abu-400); }

/* 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(--m-hijau-bg); color: var(--m-hijau);
}
.masuk-modal-ikon .ikon { width: 22px; height: 22px; }
.masuk-modal h2 { margin: 0 0 6px; font-size: 16px; font-weight: 800; color: var(--m-abu-800); }
.masuk-modal p { margin: 0 0 8px; font-size: 13px; line-height: 1.6; color: var(--m-abu-600); }
.masuk-modal .masuk-modal-catatan { margin-bottom: 18px; font-size: 12.5px; color: var(--m-abu-400); }
.masuk-modal-tutup {
  width: 100%; height: 42px; border: 0; border-radius: 10px;
  background: var(--m-abu-100); color: var(--m-abu-600);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background var(--trans);
}
.masuk-modal-tutup:hover { background: var(--m-abu-200); }
.masuk-modal-tutup:active { background: #D6D6DC; 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(20,38,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(20,38,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: #CFDDD5 transparent; }
.sb-nav::-webkit-scrollbar { width: 6px; }
.sb-nav::-webkit-scrollbar-thumb { background: #CFDDD5; 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: var(--ink3);
}
.sb-lencana {
  margin-left: auto; padding: 1px 8px; border-radius: var(--r-full);
  background: var(--g100); color: var(--g700);
  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: var(--ink3); }
.sb-luar .ikon { width: 14px; height: 14px; }

.judul-bagian { margin: 0 0 var(--s3); font-size: 15px; font-weight: 700; color: var(--g900); }
.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(--g900); 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(--g050); 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(--g300); background: #fff; }
.isian:focus-visible { outline: none; background: #fff; border-color: var(--g700); box-shadow: var(--sh-fokus); }
.isian[aria-invalid="true"] { border-color: var(--red); }
.isian:disabled, .pilih select:disabled { cursor: not-allowed; opacity: .6; }
.isian:disabled:hover { border-color: var(--line); background: var(--g050); }

.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(--red); }
.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(--red); }
.baris-bantu { display: flex; justify-content: space-between; gap: var(--s4); align-items: baseline; }
.baris-bantu .num { flex: none; }
.kurang { color: #A85214; 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(--g100); color: var(--g700); 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 — hijau/merah seperti memo 1.2 */
.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.hijau  { background: var(--g100); border-color: #BFE0CD; color: var(--g900); }
.status-bar.hijau .ikon { color: var(--g700); }
.status-bar.merah  { background: var(--red100); border-color: #F2C6BC; color: #8C2F1D; }
.status-bar.merah .ikon { color: var(--red); }
.status-bar.netral { background: var(--g050); border-color: var(--line); color: var(--ink2); }
.status-bar.netral .ikon { color: var(--ink3); }
.status-usang { color: #A85214; 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(--g300); background: var(--g050); }
.radio input { width: 18px; height: 18px; margin: 0; accent-color: var(--g700); cursor: inherit; }
.radio:has(input:checked) { border-color: var(--g700); background: var(--g050); box-shadow: var(--sh-fokus); }
.radio:has(input:focus-visible) { outline: 2px solid var(--g700); outline-offset: 2px; }
.radio.nonaktif { opacity: .5; cursor: not-allowed; }
.radio.nonaktif:hover { border-color: var(--line); background: #fff; }

/* Spanduk hasil kiriman di atas form */
.spanduk { margin-bottom: var(--gap); }
.spanduk-sukses {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s4) var(--s5); border-radius: var(--r-md);
  background: var(--g100); border: 1px solid #BFE0CD; color: var(--g900);
  font-size: 13.5px; line-height: 1.6;
  animation: kotak-naik var(--t-panel) var(--e-out) backwards;
}
.spanduk-sukses .ikon { color: var(--g700); 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(--g900); 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(--g050); 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.hijau { background: var(--g500); }
.titik.merah { background: var(--red); }

/* ── 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(--g050); border-color: var(--g300); color: var(--g700); text-decoration: none; }
a.nav-hal-btn:active { background: var(--g100); transition-duration: var(--t-tekan); }
.nav-hal-btn.aktif { background: var(--g700); border-color: var(--g700); 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(--g700); }
.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(--g700); }
[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(--up); font-weight: 700; }
.selisih-mahal { color: #A85214; font-weight: 700; }

/* ── Zona unggah (belum aktif) ── */
.zona-unggah {
  display: grid; place-items: center; gap: 6px; padding: var(--s8) var(--s5);
  border: 2px dashed #CFDDD5; border-radius: var(--r-lg); background: var(--g050);
  text-align: center; color: var(--ink3);
}
.zona-unggah .ikon { width: 28px; height: 28px; color: var(--g300); }
.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(--g100); color: var(--g700); }
.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(--g900); }
.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(--g050); color: var(--g700); }
.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(--g050); }
.kal-hari.luar { color: var(--ink3); font-weight: 500; }
.kal-hari.hari-ini { box-shadow: inset 0 0 0 1.5px var(--g300); }
/* Rentang antara Dari dan Sampai: pita muda tanpa sudut, ujungnya lebih tua. */
.kal-hari.dalam { background: var(--g050); border-radius: 0; }
.kal-hari.pasangan { background: var(--g100); color: var(--g700); }
.kal-hari.terpilih { background: var(--g700); color: #fff; box-shadow: none; }
.kal-hari:disabled { color: #BFCBC4; 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(--g700); cursor: pointer;
  transition: background var(--trans);
}
.kal-kaki button:hover { background: var(--g050); }
.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(--g050); border-color: var(--g300); color: var(--g700); text-decoration: none; }
.rentang-pil:active { background: var(--g100); transition-duration: var(--t-tekan); }
.rentang-pil[aria-current="true"] {
  background: var(--g700); border-color: var(--g700); color: #fff;
  box-shadow: 0 1px 2px rgba(1,86,58,.13), 0 3px 8px rgba(2,123,80,.14);
}

/* ── Menu yang belum dibangun ── */
.sb-segera {
  margin-left: auto; padding: 1px 8px; border-radius: var(--r-full);
  background: #EDF1EF; color: var(--ink3);
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
}
.sb-item[aria-current="page"] .sb-segera { background: #fff; color: var(--g700); }

/* ── 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(--g900); }
.tabel-pilih tbody tr:hover td a { color: var(--g700); }
.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(--g700); 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(--g700);
  box-shadow: 0 0 0 1.5px var(--g100), 0 1px 3px rgba(20,38,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, jumlah Responder, dan tanda Segera tetap dibacakan. */
  html.sb-kecil .sidebar .sb-teks, html.sb-kecil .sidebar .sb-lencana, html.sb-kecil .sidebar .sb-segera {
    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-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 ── */
/* Kotak cari yang belum berfungsi: tetap di tempatnya, jelas tidak aktif. */
.cari-segera { cursor: not-allowed; }
.cari-segera input { cursor: not-allowed; }
.cari-segera input:disabled { color: var(--ink3); -webkit-text-fill-color: var(--ink3); }
.cari-segera:hover { background: #EEF4F0; border-color: transparent; }
.cari-segera .sb-segera { flex: none; }

/* 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(--g050); color: var(--g700); text-decoration: none; }
.menu-baris:hover .ikon { color: var(--g700); }
.menu-baris:active { background: var(--g100); transition-duration: var(--t-tekan); }
.menu-keluar:hover { background: var(--red100); color: var(--red); }
.menu-keluar:hover .ikon { color: var(--red); }

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

.panel-latar { position: fixed; inset: 0; z-index: 80; }
.panel-latar[hidden] { display: none; }
.panel-selubung {
  position: absolute; inset: 0; background: rgba(20,38,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(20,38,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(--g900); 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(--g050); 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; }
  .cari-segera .sb-segera { display: none; }
}
@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; }
  .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 #9FB3A8; 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(--g050);
  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(--g900); text-decoration: none; }
.tab:active { transition-duration: var(--t-tekan); }
.tab-aktif, .tab-aktif:hover { background: var(--g700); color: #fff; box-shadow: var(--sh1); }

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

.kartu-berhasil { border-color: var(--g300); background: linear-gradient(180deg, var(--g050), #fff 60px); }
.kartu-berhasil .kartu-judul { display: flex; align-items: center; gap: var(--s2); color: var(--g900); }
.kartu-berhasil .kartu-judul .ikon { color: var(--g500); }

/* 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(--g300); background: var(--g050); }
.pilihan-mode .radio:has(input:checked) { border-color: var(--g500); background: var(--g050); }
.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(--g300); background: #fff; }
.zona-unggah:focus-within { border-color: var(--g500); box-shadow: 0 0 0 3px var(--g100); }
.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(--g700); font-weight: 600; }

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

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

.berhasil {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s4) var(--s5); border-radius: var(--r-md);
  background: var(--g100); color: var(--g900); font-size: 13.5px; line-height: 1.6;
}
.berhasil .ikon { color: var(--g500); 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(--g050); border: 1px dashed var(--g300); border-radius: var(--r-md);
  font-family: Consolas, "SF Mono", monospace; font-size: 22px; font-weight: 700;
  letter-spacing: 3px; color: var(--g900); 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(20, 38, 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(--g100); color: var(--g900); text-decoration: none; }

.kelola-form { display: grid; gap: var(--s2); }
.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(--red); border-radius: var(--r-md); background: #fff; color: var(--red);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background var(--trans), color var(--trans);
}
.tombol-bahaya:hover { background: var(--red); 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 #F3CFA8; border-left: 4px solid var(--or);
  border-radius: var(--r-md); background: var(--or100);
  color: #7A3C0E; 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(--g300); background: var(--g050); }
.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(--g050); 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: #14261E; color: #D6E6DC; 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;
}

.langkah { margin: 0; padding-left: 20px; font-size: 13.5px; color: var(--ink2); line-height: 1.7; }
.langkah li { margin-bottom: var(--s2); }
.langkah strong { color: var(--ink); }