/* Telebot Suite — gaya bersama.
   Satu tangga jarak, lima ukuran huruf, satu kerapatan. Mobile dulu.
   Tidak boleh ada yang meluber di 360px. PRD §10.1 */

/* =======================================================================
   0. TOKEN — semua angka tampilan berasal dari sini.
      Kalau sebuah nilai tidak ada di daftar ini, nilai itu salah.
   ======================================================================= */
:root {
  color-scheme: dark;

  /* ---- warna (tidak berubah; halaman lain memakainya) ---- */
  --bg: #0a0f1d;
  --bg2: #0e1526;
  --kartu: #121a2d;
  --kartu2: #16203a;
  --garis: #233049;
  --garis2: #2e3d5c;
  --teks: #e9eef8;
  --redup: #93a1bf;
  --redup2: #6c7b9c;
  --hijau: #2ad19a;
  --hijau-bg: rgba(42, 209, 154, .12);
  --kuning: #f3c15a;
  --kuning-bg: rgba(243, 193, 90, .12);
  --merah: #f3736a;
  --merah-bg: rgba(243, 115, 106, .12);
  --biru: #5b9dff;
  --biru-bg: rgba(91, 157, 255, .12);

  /* ---- jarak: enam anak tangga, tidak ada angka di luar ini ---- */
  --r1: 4px;
  --r2: 8px;
  --r3: 12px;
  --r4: 16px;
  --r5: 24px;
  --r6: 36px;

  /* ---- ukuran huruf: enam tingkat ---- */
  --t1: 11.5px;   /* label kecil, huruf kapital */
  --t2: 13px;     /* keterangan */
  --t3: 15px;     /* isi */
  --t4: 17px;     /* judul kartu */
  --t5: 21px;     /* judul bagian */
  --t6: 26px;     /* judul halaman */

  /* ---- kerapatan: tinggi yang seragam di seluruh aplikasi ---- */
  --tinggi-tbl: 44px;
  --tinggi-tbl-kecil: 34px;
  --tinggi-isian: 44px;
  --tinggi-baris: 38px;

  /* ---- lengkung ---- */
  --b1: 8px;
  --b2: 11px;
  --b3: 14px;
  --b-bulat: 999px;
  --r: var(--b3);           /* nama lama, masih dipakai beberapa halaman */

  /* ---- kerangka aplikasi ---- */
  --sisi: 248px;
  --sisi-ciut: 68px;
  --atas: 56px;
  --bawah: 62px;
  --isi-max: 1100px;

  --bayang: 0 10px 30px rgba(0, 0, 0, .35);
  --cepat: .15s cubic-bezier(.2, .8, .3, 1);
}

/* Layar besar memakai tetikus: tombol boleh sedikit lebih rapat. */
@media (min-width: 1024px) {
  :root {
    --tinggi-tbl: 40px;
    --tinggi-isian: 40px;
    --tinggi-baris: 36px;
  }
}

/* =======================================================================
   1. DASAR
   ======================================================================= */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--teks);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--t3);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Satu lapis cahaya diam di belakang — murah, tidak beranimasi. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 12% -6%, rgba(42, 209, 154, .10), transparent 65%),
    radial-gradient(55vw 46vh at 94% 4%, rgba(91, 157, 255, .09), transparent 65%);
}

a { color: var(--biru); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 var(--r2); line-height: 1.25; letter-spacing: -.3px; }
h1 { font-size: var(--t6); }
h2 { font-size: var(--t5); }
h3 { font-size: var(--t4); }
p { margin: 0 0 var(--r3); }
small, .kecil { font-size: var(--t2); color: var(--redup); }
.redup { color: var(--redup); }
.tengah { text-align: center; }
code {
  background: var(--bg2); border: 1px solid var(--garis); border-radius: var(--r1);
  padding: 1px 5px; font-size: var(--t2);
}
.sembunyi { display: none !important; }

/* Fokus papan tik: selalu terlihat, di mana pun. */
:focus-visible {
  outline: 2px solid var(--biru);
  outline-offset: 2px;
  border-radius: var(--r1);
}

/* Lompat ke isi — tombol pertama bagi pemakai papan tik. */
.lewati {
  position: fixed; top: var(--r2); left: var(--r2); z-index: 120;
  transform: translateY(-200%);
  padding: var(--r2) var(--r4); border-radius: var(--b2);
  background: var(--hijau); color: #04120d; font-weight: 700;
}
.lewati:focus { transform: none; text-decoration: none; }

/* =======================================================================
   2. TOMBOL
   ======================================================================= */
.tbl {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--r2);
  min-height: var(--tinggi-tbl); padding: 0 var(--r4);
  border-radius: var(--b2); border: 1px solid var(--garis2);
  background: var(--kartu2); color: var(--teks);
  font: inherit; font-weight: 600; font-size: 14.5px; line-height: 1.2;
  cursor: pointer; width: auto; max-width: 100%;
  transition: background var(--cepat), border-color var(--cepat), color var(--cepat);
}
.tbl:hover { border-color: #3d5080; background: #1b2744; }
.tbl:active { transform: translateY(1px); }
.tbl.utama {
  background: linear-gradient(180deg, #2ad19a, #1fae80);
  border-color: transparent; color: #04120d;
  box-shadow: 0 4px 14px rgba(42, 209, 154, .22);
}
.tbl.utama:hover { filter: brightness(1.07); }
.tbl.bahaya { color: var(--merah); border-color: rgba(243, 115, 106, .35); background: var(--merah-bg); }
.tbl.kecil {
  min-height: var(--tinggi-tbl-kecil); padding: 0 var(--r3);
  font-size: var(--t2); border-radius: var(--b1);
}
.tbl:disabled { opacity: .45; cursor: not-allowed; }
.tbl.penuh { width: 100%; }

/* Tombol ikon persegi (lonceng, ciut, tutup). */
.ikon-tbl {
  display: inline-grid; place-items: center; flex: none;
  width: var(--tinggi-tbl-kecil); height: var(--tinggi-tbl-kecil); padding: 0;
  border: 1px solid var(--garis2); border-radius: var(--b1);
  background: var(--kartu2); color: var(--teks); cursor: pointer;
  transition: background var(--cepat), border-color var(--cepat);
}
.ikon-tbl:hover { border-color: #3d5080; background: #1b2744; }
.ikon-tbl svg { display: block; }

/* =======================================================================
   3. ISIAN
   ======================================================================= */
label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: var(--r1); }
.bantu { font-size: var(--t2); color: var(--redup); margin: -2px 0 var(--r3); }

/* Panduan "ambil kuncinya di sini" di bawah isian kunci API. Sengaja dibuat
   kotak sendiri yang redup: ia harus mudah ditemukan saat pertama kali mengisi,
   tapi tidak boleh ikut meramaikan halaman sesudah semua kunci terpasang. */
.panduan-api {
  margin: calc(var(--r2) * -1) 0 var(--r3);
  padding: var(--r2) var(--r3);
  border: 1px dashed var(--garis2);
  border-radius: var(--b2);
  background: rgba(91, 157, 255, .05);
}
.panduan-judul { font-size: var(--t2); color: var(--redup); margin: 0 0 var(--r1); }
.panduan-daftar { list-style: none; margin: 0; padding: 0; }
.panduan-daftar li + li { margin-top: var(--r1); }
.panduan-daftar a {
  font-size: var(--t2); color: #8fb8ff; text-decoration: none;
  /* Nama penyedia + URL panjang tidak boleh melebarkan halaman di layar sempit. */
  display: inline-block; max-width: 100%; overflow-wrap: anywhere;
}
.panduan-daftar a:hover { text-decoration: underline; }
/* Panah "membuka di luar" (U+2197). Ditulis sebagai escape CSS dengan spasi
   penutup, bukan karakter mentah, supaya tidak bergantung pada charset berkas. */
.panduan-daftar a::after { content: ' \2197 '; color: var(--redup2); }
input, select, textarea {
  width: 100%; min-height: var(--tinggi-isian); padding: var(--r2) var(--r3);
  border-radius: var(--b2); border: 1px solid var(--garis);
  background: var(--bg2); color: var(--teks);
  font: inherit; font-size: var(--t3); outline: none;
  transition: border-color var(--cepat), box-shadow var(--cepat);
}
textarea { min-height: 110px; resize: vertical; line-height: 1.5; padding-top: var(--r2); }
input:focus, select:focus, textarea:focus {
  border-color: #3f69b5; box-shadow: 0 0 0 3px rgba(91, 157, 255, .16);
}
.isian { margin-bottom: var(--r3); }
.baris { display: grid; gap: var(--r3); }
@media (min-width: 640px) { .baris.dua { grid-template-columns: 1fr 1fr; } }

/* =======================================================================
   4. KARTU
   ======================================================================= */
.kartu {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(22, 32, 58, .86), rgba(18, 26, 45, .86));
  border: 1px solid var(--garis); border-radius: var(--b3);
  padding: var(--r4); margin-bottom: var(--r3);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .035) inset;
  transition: border-color var(--cepat);
}
.kartu:hover { border-color: #2c3d60; }
.kartu.rapat { padding: var(--r3); }
.kartu-judul {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--r2); flex-wrap: wrap; margin-bottom: var(--r3);
}
.kartu-judul h2, .kartu-judul h3 { margin: 0; }

/* =======================================================================
   5. LENCANA, STATISTIK, DAFTAR
   ======================================================================= */
.lencana {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px var(--r2); border-radius: var(--b-bulat);
  font-size: 12px; font-weight: 700; border: 1px solid var(--garis2);
  color: var(--redup); white-space: nowrap;
}
.lencana.hijau { color: var(--hijau); background: var(--hijau-bg); border-color: rgba(42, 209, 154, .3); }
.lencana.kuning { color: var(--kuning); background: var(--kuning-bg); border-color: rgba(243, 193, 90, .3); }
.lencana.merah { color: var(--merah); background: var(--merah-bg); border-color: rgba(243, 115, 106, .3); }

/* Lencana status yang sekaligus tautan ke postingannya di Telegram (halaman
   Antrean & Log). Warnanya diwarisi dari .lencana.<warna> di atas — yang
   ditambahkan di sini hanya tanda bahwa ia bisa diklik, karena tautan yang
   tidak terlihat seperti tautan sama saja dengan tidak ada: versi
   sebelumnya menaruhnya sebagai teks abu kecil dan pemilik produk
   melewatkannya sampai ia memintanya dibuat. */
.lencana-tautan { text-decoration: none; cursor: pointer; }
.lencana-tautan:hover,
.lencana-tautan:focus-visible { text-decoration: underline; filter: brightness(1.15); }
.lencana.biru { color: var(--biru); background: var(--biru-bg); border-color: rgba(91, 157, 255, .3); }
/* Lencana kata kunci: satu per kata, jadi ia tidak boleh pernah lebih lebar
   daripada barisnya. .lencana biasa ber-nowrap; untuk yang ini satu kata kunci
   sepanjang apa pun membungkus di dalam lencananya sendiri, bukan meluber
   keluar kartu lalu terpotong tanpa jejak. */
.lencana.kunci { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.titik { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.lencana.hijau .titik { animation: kedip 2.4s ease-in-out infinite; }
@keyframes kedip { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

.statistik {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--r2); margin-bottom: var(--r3);
}
@media (min-width: 720px) { .statistik { grid-template-columns: repeat(4, 1fr); } }
.stat {
  background: linear-gradient(180deg, rgba(22, 32, 58, .8), rgba(16, 24, 42, .8));
  border: 1px solid var(--garis); border-radius: var(--b3); padding: var(--r3);
  transition: border-color var(--cepat);
}
.stat:hover { border-color: #2c3d60; }
.stat .angka {
  font-size: 24px; font-weight: 800; letter-spacing: -.6px; overflow-wrap: anywhere;
  background: linear-gradient(135deg, #e9eef8 10%, #2ad19a 60%, #5b9dff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat .nama { font-size: var(--t1); color: var(--redup); text-transform: uppercase; letter-spacing: .5px; }

.daftar { display: flex; flex-direction: column; gap: var(--r2); }
.item {
  display: flex; align-items: center; gap: var(--r3);
  min-height: var(--tinggi-baris); padding: var(--r3);
  background: var(--bg2); border: 1px solid var(--garis); border-radius: var(--b2);
  transition: border-color var(--cepat), background var(--cepat);
}
.item:hover { border-color: #2c3d60; background: #141e36; }
.item .isi { min-width: 0; flex: 1; }
.item .judul { font-weight: 600; overflow-wrap: anywhere; }
.item .sub { font-size: var(--t2); color: var(--redup); overflow-wrap: anywhere; }
/* Deretan tombol di kanan satu baris daftar. flex-wrap: wrap WAJIB ada.
   Di <=480px (lihat blok @media di bawah) .aksi jadi selebar barisnya dan
   ditambat ke kanan; tanpa pembungkusan, tombol yang tidak muat meluber ke
   KIRI — di 320px tombol pertama mulai di x negatif, hurufnya terpotong
   .kartu dan sebagiannya tidak bisa disentuh. Yang lolos hanya label yang
   kebetulan pendek, jadi luber itu kembali tiap kali ada label yang sedikit
   lebih panjang atau tombol yang bertambah. Dengan wrap, deret tombol
   sepanjang apa pun turun baris dan tidak ada yang keluar kartu.
   (.tbl sendiri sudah ber-max-width:100%, jadi satu tombol yang lebih lebar
   daripada barisnya pun ikut terkurung.) */
.item .aksi { display: flex; flex-wrap: wrap; gap: 6px; flex: none; }

/* =======================================================================
   6. KEADAAN KOSONG & PESAN
   ======================================================================= */
.kosong {
  text-align: center; padding: var(--r5) var(--r4);
  border: 1px dashed var(--garis2); border-radius: var(--b3); color: var(--redup);
}
.kosong .ikon { font-size: 30px; margin-bottom: var(--r2); }
.kosong h3 { color: var(--teks); margin: 0 0 6px; }
.kosong p { max-width: 46ch; margin-left: auto; margin-right: auto; }
.kosong p + p { margin-top: 6px; }
.kosong .tbl { margin-top: var(--r3); }

.pesan {
  padding: var(--r3); border-radius: var(--b2);
  font-size: 13.5px; margin-bottom: var(--r3); border: 1px solid;
}
.pesan.info { color: var(--biru); background: var(--biru-bg); border-color: rgba(91, 157, 255, .3); }
.pesan.ok { color: var(--hijau); background: var(--hijau-bg); border-color: rgba(42, 209, 154, .3); }
.pesan.awas { color: var(--kuning); background: var(--kuning-bg); border-color: rgba(243, 193, 90, .3); }
.pesan.salah { color: var(--merah); background: var(--merah-bg); border-color: rgba(243, 115, 106, .3); }

/* =======================================================================
   7. TOAST
   ======================================================================= */
#toast {
  position: fixed; left: 50%; z-index: 110;
  bottom: calc(var(--bawah) + var(--r3) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: var(--r2); width: min(92vw, 420px);
}
@media (min-width: 1024px) { #toast { bottom: var(--r5); } }
.toast {
  padding: var(--r3) var(--r4); border-radius: var(--b2);
  background: #1a2440; border: 1px solid var(--garis2);
  box-shadow: var(--bayang); font-size: 14px; animation: naik .18s ease;
}
.toast.ok { border-color: rgba(42, 209, 154, .45); }
.toast.salah { border-color: rgba(243, 115, 106, .45); }
@keyframes naik { from { opacity: 0; transform: translateY(8px); } }

/* =======================================================================
   8. KERANGKA APLIKASI — sisi kiri tetap, bar atas, bar bawah
   ======================================================================= */
.cangkang { display: flex; min-height: 100vh; }

/* ---------- navigasi sisi ---------- */
.sisi {
  display: flex; flex-direction: column; flex: none;
  background: rgba(12, 18, 33, .94);
  border-right: 1px solid var(--garis);
}
.sisi-atas {
  display: flex; align-items: center; gap: var(--r2);
  height: var(--atas); padding: 0 var(--r3);
  border-bottom: 1px solid var(--garis); flex: none;
}
.merek {
  display: flex; align-items: center; gap: var(--r2);
  font-weight: 800; letter-spacing: -.4px; min-width: 0;
}
.merek .logo {
  width: 26px; height: 26px; border-radius: var(--b1); flex: none;
  background: linear-gradient(135deg, #2ad19a, #5b9dff);
  display: grid; place-items: center;
}
.merek-teks { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ciut, #tutup-laci { margin-left: auto; }
#tutup-laci { display: none; }

.nav {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--r3) var(--r2) var(--r4);
  scrollbar-width: thin;
}
.nav-judul {
  padding: var(--r3) var(--r2) var(--r1);
  font-size: var(--t1); font-weight: 800; letter-spacing: .9px;
  text-transform: uppercase; color: var(--redup2);
}
.nav-pisah { height: 1px; margin: var(--r2) var(--r2); background: var(--garis); border: 0; }
.nav button {
  display: flex; align-items: center; gap: var(--r3);
  width: 100%; min-height: var(--tinggi-baris); padding: 0 var(--r3);
  margin-bottom: 2px;
  border: 0; border-radius: var(--b1); background: transparent;
  color: var(--redup); font: inherit; font-size: 13.5px; font-weight: 600;
  text-align: left; cursor: pointer;
  transition: background var(--cepat), color var(--cepat);
}
.nav button .ikon { flex: none; display: grid; place-items: center; width: 20px; height: 20px; }
.nav button .teks { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav button .tanda { flex: none; display: grid; place-items: center; }
.nav button:hover { background: var(--kartu2); color: var(--teks); }
.nav button.aktif { background: var(--biru-bg); color: var(--teks); box-shadow: inset 2px 0 0 var(--hijau); }
.nav button.kunci { color: var(--redup2); }
.nav button.kunci .teks { opacity: .75; }

/* titik status relay langsung di menunya */
.nav .titik-status { width: 9px; height: 9px; border-radius: 50%; background: var(--redup2); }
.nav .titik-status.hijau { background: var(--hijau); box-shadow: 0 0 0 3px rgba(42, 209, 154, .18); animation: kedip 2.4s ease-in-out infinite; }
.nav .titik-status.kuning { background: var(--kuning); box-shadow: 0 0 0 3px rgba(243, 193, 90, .16); }
.nav .titik-status.merah { background: var(--merah); box-shadow: 0 0 0 3px rgba(243, 115, 106, .18); }

/* ---------- kolom kanan ---------- */
.kolom { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.atas {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--r2);
  height: var(--atas); padding: 0 var(--r4);
  background: rgba(10, 15, 29, .92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--garis);
}
.atas-judul {
  min-width: 0; font-size: var(--t4); font-weight: 700; letter-spacing: -.3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.atas-aksi { display: flex; align-items: center; gap: 6px; flex: none; }
.atas-aksi:empty { display: none; }
.atas .kanan { margin-left: auto; display: flex; align-items: center; gap: var(--r2); flex: none; }
.atas .kanan #siapa {
  min-width: 0; max-width: 26vw;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

main {
  flex: 1 1 auto; min-width: 0;
  width: 100%; max-width: var(--isi-max); margin: 0 auto;
  padding: var(--r4) var(--r4) calc(var(--bawah) + var(--r5) + env(safe-area-inset-bottom, 0px));
}

/* satu halaman = satu kotak; yang tidak aktif cukup disembunyikan */
.hal[hidden] { display: none; }

/* ---------- bar bawah (di bawah 1024px) ---------- */
.bawah {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: grid; grid-template-columns: repeat(6, 1fr);
  height: calc(var(--bawah) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(12, 18, 33, .97); backdrop-filter: blur(10px);
  border-top: 1px solid var(--garis);
}
.bawah button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 0; padding: 0 2px;
  border: 0; background: transparent; color: var(--redup2);
  font: inherit; font-size: 10.5px; font-weight: 600; cursor: pointer;
  transition: color var(--cepat);
}
.bawah button .teks {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bawah button .ikon { position: relative; display: grid; place-items: center; height: 22px; }
.bawah button .titik-status {
  position: absolute; top: -1px; right: -5px;
  width: 8px; height: 8px; border-radius: 50%;
  border: 2px solid #0c1221; box-sizing: content-box;
}
.bawah button.aktif { color: var(--hijau); }
.bawah button.kunci { opacity: .55; }

/* ---------- tirai ---------- */
.tirai {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(4, 8, 18, .6); backdrop-filter: blur(2px);
}

/* =======================================================================
   9. TIGA UKURAN LAYAR
   ======================================================================= */

/* --- di bawah 1024px: sisi jadi lembar yang naik dari bawah --- */
@media (max-width: 1023px) {
  .sisi {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
    max-height: 80vh;
    border: 1px solid var(--garis); border-bottom: 0;
    border-radius: var(--b3) var(--b3) 0 0;
    box-shadow: 0 -16px 40px rgba(0, 0, 0, .45);
    transform: translateY(101%);
    transition: transform .22s cubic-bezier(.2, .8, .3, 1);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .sisi.buka { transform: none; }
  .sisi-atas { border-radius: var(--b3) var(--b3) 0 0; position: relative; }
  /* gagang kecil, penanda bahwa ini lembar yang bisa ditutup */
  .sisi-atas::before {
    content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
    width: 38px; height: 4px; border-radius: var(--b-bulat); background: var(--garis2);
  }
  #ciut { display: none; }
  #tutup-laci { display: inline-grid; }
  .nav { padding-bottom: var(--r5); }
  .nav button { min-height: 46px; font-size: var(--t3); }
}

/* --- 1024px ke atas: sisi tetap, bar bawah hilang --- */
@media (min-width: 1024px) {
  .sisi {
    position: sticky; top: 0; height: 100vh; width: var(--sisi);
    transition: width .18s cubic-bezier(.2, .8, .3, 1);
  }
  .bawah, .tirai { display: none !important; }
  main { padding: var(--r5) var(--r5) var(--r6); }
  .atas { padding: 0 var(--r5); }

  /* sisi yang diciutkan: ikon saja */
  .ciut .sisi { width: var(--sisi-ciut); }
  .ciut .sisi .merek-teks,
  .ciut .sisi .nav-judul,
  .ciut .sisi .nav button .teks { display: none; }
  .ciut .sisi .nav button { justify-content: center; padding: 0; gap: 0; }
  .ciut .sisi .nav button .tanda { position: absolute; right: 9px; top: 7px; }
  .ciut .sisi .nav button { position: relative; }
  .ciut .sisi .sisi-atas { justify-content: center; padding: 0 var(--r2); }
  .ciut .sisi #ciut { margin-left: 0; }
  .ciut .sisi .merek { gap: 0; }
  .ciut .sisi .nav-pisah { margin-top: var(--r3); }
}

/* --- layar sangat sempit --- */
@media (max-width: 719px) {
  .atas .kanan #siapa { display: none; }
}
@media (max-width: 420px) {
  .atas { padding: 0 var(--r3); gap: 6px; }
  main { padding-left: var(--r3); padding-right: var(--r3); }
  .atas .kanan { gap: 6px; }
  #keluar { padding: 0 var(--r2); }
}
@media (max-width: 380px) {
  .kartu { padding: var(--r3); }
  .kartu.rapat { padding: var(--r3) var(--r2); }
  .stat { padding: var(--r3) var(--r2); }
  .stat .angka { font-size: 21px; }
  .kosong { padding: var(--r5) var(--r3); }
}

/* =======================================================================
   10. TABEL — zebra halus, kepala menempel
   ======================================================================= */
.tabel { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabel th, .tabel td {
  text-align: left; padding: var(--r2) var(--r3);
  border-bottom: 1px solid var(--garis);
}
.tabel th {
  position: sticky; top: var(--atas); z-index: 1;
  background: #101829; color: var(--redup);
  font-size: var(--t1); text-transform: uppercase; letter-spacing: .4px; font-weight: 700;
}
.tabel tbody tr:nth-child(even) { background: rgba(255, 255, 255, .022); }
.tabel tbody tr:hover { background: rgba(91, 157, 255, .06); }
.gulir { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gulir .tabel th { top: 0; }
/* Di layar besar tabel panjang menggulung di dalam kotaknya sendiri, jadi kepala
   tabel benar-benar menempel. Di HP biarkan halaman yang menggulung. */
@media (min-width: 1024px) {
  .gulir { max-height: 66vh; overflow: auto; }
}

/* =======================================================================
   11. POTONGAN LAIN YANG DIPAKAI HALAMAN
   ======================================================================= */
.kode-pair {
  font-size: clamp(30px, 11vw, 44px); font-weight: 800; letter-spacing: 10px;
  text-align: center; color: var(--hijau); margin: var(--r2) 0 var(--r1);
  text-shadow: 0 0 22px rgba(42, 209, 154, .35);
}
.langkah { display: flex; gap: var(--r3); margin-bottom: var(--r3); }
.langkah .no {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--kartu2); border: 1px solid var(--garis2);
  display: grid; place-items: center; font-size: var(--t2); font-weight: 700;
}
.bar { height: 7px; border-radius: var(--b-bulat); background: var(--bg2); border: 1px solid var(--garis); overflow: hidden; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, #2ad19a, #5b9dff); }

.pil { display: flex; gap: var(--r2); flex-wrap: wrap; }
.pil button {
  flex: 1 1 120px; padding: var(--r3); border-radius: var(--b2);
  border: 1px solid var(--garis); background: var(--bg2); color: var(--teks);
  font: inherit; cursor: pointer; text-align: left;
  transition: border-color var(--cepat), background var(--cepat);
}
.pil button.aktif { border-color: var(--hijau); background: var(--hijau-bg); }
.pil button b { display: block; font-size: 14px; }
.pil button span { font-size: 12px; color: var(--redup); }

.tombol-baris { display: flex; gap: var(--r2); flex-wrap: wrap; }
.tombol-baris .tbl { flex: 1 1 160px; }
@media (min-width: 560px) { .tombol-baris .tbl { flex: 0 0 auto; } }

/* rangka muat (skeleton) */
.rangka {
  border-radius: var(--b1); height: 14px; margin: var(--r2) 0;
  background: linear-gradient(90deg, #16203a 25%, #1d2a49 37%, #16203a 63%);
  background-size: 400% 100%; animation: geser 1.3s ease infinite;
}
@keyframes geser { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* =======================================================================
   12. POLA BERSAMA ANTAR HALAMAN (PRD §10.1)
   ======================================================================= */
.hal-kepala { margin: 0 0 var(--r4); }
.hal-kepala .hal-judul {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--r2); flex-wrap: wrap;
}
.hal-kepala .hal-judul h1 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.hal-kepala .hal-judul > .tbl, .hal-kepala .hal-judul > .lencana { flex: none; }
/* judul sudah ada di bar atas — yang di dalam isi disembunyikan */
.hal-kepala .hal-judul h1.rangkap { display: none; }
.hal-kepala .hal-judul > .naik-ke-atas { display: none; }
.hal-kepala .hal-judul.tanpa-judul { justify-content: flex-start; }
.hal-kepala .hal-judul:empty, .hal-kepala .hal-judul.kosong { display: none; }
.hal-kepala .hal-judul.kosong + .hal-intro { margin-top: 0; }
.atas-aksi .tbl {
  display: inline-block; max-width: 34vw;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: var(--tinggi-tbl-kecil);
}

.hal-intro {
  margin: 0; color: var(--redup); font-size: 14px; line-height: 1.55;
  max-width: 66ch; overflow-wrap: anywhere;
}
.hal-kepala .hal-judul + .hal-intro { margin-top: 7px; }
.hal-intro b { color: var(--teks); }

.hal-lanjut {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--r2); flex-wrap: wrap; margin: 0 0 var(--r3);
  padding: var(--r2) var(--r3);
  border: 1px dashed var(--garis2); border-radius: var(--b2);
  font-size: var(--t2); color: var(--redup);
}
.hal-lanjut .isi { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.hal-lanjut .isi b { color: var(--teks); }
.hal-lanjut .tbl { flex: none; }

.pita-contoh { border-style: dashed; }
.pita-contoh b { display: inline; }
.statistik + .hal-intro, .statistik + .kecil { margin-top: -4px; }

@media (max-width: 480px) {
  .item { flex-wrap: wrap; }
  .item .aksi { width: 100%; justify-content: flex-end; }
  .kartu-judul { row-gap: 6px; }
}

/* =======================================================================
   13. PEMBERITAHUAN (PRD §4.18)
   ======================================================================= */
.lonceng {
  position: relative; flex: none; display: inline-grid; place-items: center;
  width: var(--tinggi-tbl-kecil); height: var(--tinggi-tbl-kecil); padding: 0;
  border: 1px solid var(--garis2); border-radius: var(--b1);
  background: var(--kartu2); color: var(--teks); cursor: pointer;
  transition: border-color var(--cepat), background var(--cepat);
}
.lonceng:hover { border-color: #3d5080; background: #1b2744; }
.lonceng svg { display: block; }
.lonceng .jml {
  position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: var(--b-bulat); background: var(--merah); color: #2a0b08;
  font-size: 10.5px; font-weight: 800; line-height: 17px; text-align: center;
  border: 2px solid var(--bg);
}
.lonceng.ada { color: var(--kuning); }
.lonceng .coret {
  display: none; position: absolute; left: 7px; right: 7px; height: 2px; border-radius: 2px;
  background: var(--redup); transform: rotate(-38deg); box-shadow: 0 -2px 0 rgba(10, 15, 29, .95);
}
.lonceng.mati { color: var(--redup); }
.lonceng.mati .coret { display: block; }

#pita:empty { display: none; }

.pita-mati {
  display: flex; align-items: center; gap: var(--r2); flex-wrap: wrap;
  padding: var(--r3); margin-bottom: var(--r3); border-radius: var(--b2);
  border: 1px solid rgba(243, 115, 106, .45); background: var(--merah-bg);
  color: var(--merah); font-size: 13.5px;
}
.pita-mati .isi { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.pita-mati > .titik { flex: none; animation: kedip 1.4s ease-in-out infinite; }
.pita-mati .tbl { flex: none; color: var(--teks); }

.nf-ajak-isi { display: flex; gap: var(--r2); align-items: flex-start; }
.nf-ajak-ikon { font-size: 20px; line-height: 1.2; flex: none; }
.nf-ajak-tombol { display: flex; gap: var(--r2); flex-wrap: wrap; margin-top: var(--r3); }
.nf-ajak-tombol .tbl { flex: 1 1 130px; }
.nf-mati b { display: block; overflow-wrap: anywhere; }

/* =======================================================================
   14. DAFTAR PINTASAN PAPAN TIK (tombol ?)
   ======================================================================= */
.pintas {
  position: fixed; inset: 0; z-index: 130;
  display: grid; place-items: center; padding: var(--r4);
  background: rgba(4, 8, 18, .66);
}
.pintas-kotak {
  width: min(100%, 420px); max-height: 80vh; overflow: auto;
  background: var(--kartu); border: 1px solid var(--garis2); border-radius: var(--b3);
  padding: var(--r4); box-shadow: var(--bayang);
}
.pintas-kotak h2 { font-size: var(--t4); }
.pintas-baris {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--r3); padding: var(--r2) 0; border-top: 1px solid var(--garis);
  font-size: var(--t2); color: var(--redup);
}
.pintas-baris kbd {
  flex: none; min-width: 26px; text-align: center;
  padding: 2px 7px; border-radius: 6px;
  border: 1px solid var(--garis2); background: var(--bg2);
  color: var(--teks); font-family: inherit; font-size: 12px; font-weight: 700;
}

/* =======================================================================
   16. HORMATI "KURANGI GERAKAN"
   ======================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- kotak konfirmasi sendiri (lihat tanya() di app.js) ----------
   Dipakai menggantikan window.confirm(), yang bisa dimatikan peramban lewat
   centang "jangan tanya lagi" dan sesudah itu membuat setiap tombol hapus
   berhenti bekerja tanpa pesan apa pun. */
.dialog-latar {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: 18px;
  background: rgba(4, 9, 20, .68);
}
.dialog {
  width: min(100%, 440px);
  padding: 18px;
  border: 1px solid var(--garis2);
  border-radius: var(--b3);
  background: var(--kartu);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
.dialog h3 { margin: 0 0 8px; }
.dialog-isi { font-size: var(--t3); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.dialog-tombol { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-top: 16px; }
.dialog-tombol .tbl { flex: 0 1 auto; }
@media (max-width: 380px) {
  .dialog { padding: 14px; }
  .dialog-tombol .tbl { flex: 1 1 100%; }
}

/* Nama kampanye di riwayat Antrean & Log: tombol yang membuka kampanye itu
   (#iklan/<ad_id>). Dibuat terlihat seperti tautan, bukan seperti tombol,
   karena itulah yang ia lakukan — berpindah, bukan mengubah sesuatu. */
.antrean-ke-iklan {
  padding: 0; border: 0; background: transparent;
  color: var(--biru); font: inherit; font-size: inherit;
  text-align: left; text-decoration: underline;
  cursor: pointer; overflow-wrap: anywhere;
}
.antrean-ke-iklan:hover { color: var(--teks); }

/* Kartu mesin saat BERHENTI. Diberi tepi merah bukan untuk menakuti, tapi
   karena selama ia berhenti tidak ada satu pun kiriman yang berangkat —
   dan itu keadaan yang paling sering tidak disadari orang. */
.kartu.awas-mesin { border-color: rgba(255, 99, 99, .45); }