/* Dashboard admin Spatial Indonesia.
 *
 * Temanya sama dengan situsnya: ruang angkasa. Yang membuatnya terbaca sebagai
 * satu produk bukan sekadar warna ungu, melainkan tiga hal yang dipinjam dari
 * tata suryanya — latar berbintang, permukaan yang mengambang di atasnya, dan
 * warna yang selalu berarti sesuatu (tiap menu punya warna planetnya sendiri).
 *
 * Semua efek ruang angkasa di sini murni CSS. Tidak ada kanvas, tidak ada loop
 * JavaScript, tidak ada satu pun berkas gambar yang diunduh: dashboard dibuka
 * berjam-jam sambil menulis artikel, dan latar yang membakar baterai adalah
 * ongkos yang tidak sepadan dengan keindahannya.
 */

/* ── token ─────────────────────────────────────────────────────────────────
 * Palet mengikuti src/data/planets.js supaya dashboard dan tata surya memakai
 * ungu yang persis sama, bukan dua ungu yang mirip. */
:root {
  --ungu: #9E94F9;
  --ungu-tua: #6a5ae0;
  --mint: #a99bf2;
  --kertas: #f3f2f8;
  --hijau: #5ad1c0;
  --perhatian: #f2a65a;
  --bahaya: #f2686a;
  --redup: #a49fb8;
  --samar: #837e99;

  /* Ruang angkasa: nyaris hitam, tapi condong ungu — hitam murni membuat
     pendar ungu di atasnya terlihat seperti noda, bukan cahaya. */
  --ruang: #0c0a1c;
  --ruang-2: #141130;

  /* Permukaan kaca. Alpha rendah supaya bintang di belakangnya tetap terasa
     tanpa mengganggu keterbacaan teks. */
  --kaca: rgba(41, 36, 74, .78);
  --kaca-2: rgba(54, 47, 94, .7);
  --kaca-3: rgba(66, 58, 112, .64);
  --garis: rgba(243, 242, 248, .1);
  --garis-2: rgba(243, 242, 248, .2);

  /* Warna halaman aktif — disetel app.js tiap pindah menu. */
  --halaman: #9E94F9;

  --sisi: 246px;
  --r-besar: 22px;
  --r: 14px;
  --r-kecil: 10px;
  --font: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --lentur: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }

/* Atribut `hidden` hanya berarti `display: none` di stylesheet bawaan browser,
 * dan aturan kelas apa pun yang menyetel `display` mengalahkannya. Karena
 * `.bidang` memakai `display: flex`, kolom "Tautan Medium" tetap tampil walau
 * sudah diberi `hidden` — bug yang terlihat seperti kesalahan JavaScript padahal
 * murni soal presedensi CSS. Ditutup sekali di sini untuk seluruh dashboard. */
[hidden] { display: none !important; }

/* ── latar berbintang ──────────────────────────────────────────────────────
 * Tiga lapis bintang, masing-masing sebuah pola radial-gradient yang diulang.
 * Satu elemen per lapis, bukan satu elemen per bintang: ratusan <span> akan
 * membebani tata letak tanpa terlihat lebih baik.
 *
 * Ukuran petak tiap lapis sengaja dibuat tidak saling kelipatan (180/260/340),
 * supaya pengulangannya tidak pernah sejajar dan matanya tidak menangkap pola. */
body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(178deg, #1a1640 0%, var(--ruang) 46%, #070612 100%)
    fixed;
  color: var(--kertas);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  content: '';
  position: fixed;
  inset: -10%;
  z-index: -2;
  background-image:
    radial-gradient(1.4px 1.4px at 34px 22px, rgba(255,255,255,.85), transparent 100%),
    radial-gradient(1px 1px at 128px 96px, rgba(255,255,255,.5), transparent 100%),
    radial-gradient(1.6px 1.6px at 70px 150px, rgba(200,192,255,.7), transparent 100%),
    radial-gradient(1px 1px at 158px 40px, rgba(255,255,255,.4), transparent 100%),
    radial-gradient(1.2px 1.2px at 20px 120px, rgba(255,255,255,.55), transparent 100%),
    radial-gradient(1px 1px at 210px 200px, rgba(180,170,255,.45), transparent 100%),
    radial-gradient(1.8px 1.8px at 250px 60px, rgba(255,255,255,.6), transparent 100%),
    radial-gradient(1px 1px at 300px 260px, rgba(255,255,255,.35), transparent 100%);
  background-size: 180px 180px, 260px 260px, 340px 340px, 180px 180px, 260px 260px, 340px 340px, 420px 420px, 340px 340px;
  opacity: .8;
  animation: hanyut 240s linear infinite;
}

/* Pendar aurora. Dua sumber cahaya, dan yang di kiri atas memakai --halaman:
   warnanya ikut berubah tiap kali menu berpindah, jadi perpindahan halaman
   terasa di seluruh layar, bukan cuma di daftar isinya. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(56% 46% at 8% -10%, color-mix(in srgb, var(--halaman) 55%, transparent), transparent 66%),
    radial-gradient(50% 40% at 96% 2%, rgba(120, 100, 255, .42), transparent 68%),
    radial-gradient(90% 60% at 50% 120%, rgba(106, 90, 224, .3), transparent 66%);
  transition: background 1.2s var(--lentur);
}

@keyframes hanyut {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-420px, -340px, 0); }
}

h1 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.03em; }
h2 { margin: 0 0 16px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
h3 { margin: 0; font-size: 14.5px; font-weight: 600; }
a { color: inherit; }
code { font-family: var(--mono); font-size: 12px; color: var(--mint); }

.redup { color: var(--redup); }
.kecil { font-size: 12px; }
.galat { color: var(--bahaya); }
.kosong { padding: 40px 28px; color: var(--redup); text-align: center; }
.tautan { color: var(--ungu); text-decoration: none; }
.tautan:hover { text-decoration: underline; }

/* Cincin fokus yang sama di mana pun. Dashboard ini penuh tombol kecil, dan
   navigasi papan tik jadi tidak mungkin tanpa penanda yang konsisten. */
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--ungu);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── layar masuk ───────────────────────────────────────────────────────────── */
.masuk { display: grid; place-items: center; min-height: 100vh; padding: 24px; }

.masuk-kartu {
  position: relative;
  width: min(400px, 100%);
  padding: 40px 36px 36px;
  border: 1px solid var(--garis-2);
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(38, 35, 54, .82), rgba(18, 16, 28, .88));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .07);
}

.masuk-orbit {
  position: relative;
  display: grid;
  place-items: center;
  height: 96px;
  margin-bottom: 22px;
}
.orbit-matahari {
  position: absolute;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #cfc9ff, var(--ungu) 55%, var(--ungu-tua));
  box-shadow: 0 0 26px rgba(158, 148, 249, .75), 0 0 60px rgba(106, 90, 224, .45);
}
.orbit-cincin {
  position: absolute;
  border: 1px solid rgba(158, 148, 249, .22);
  border-radius: 50%;
}
/* Planetnya diletakkan di tepi cincin lalu cincinnya yang diputar — satu
   animasi transform untuk dua benda, dan orbitnya dijamin bulat sempurna. */
.orbit-cincin i {
  position: absolute;
  top: 50%; left: -4px;
  width: 8px; height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 12px rgba(169, 155, 242, .9);
}
.orbit-cincin-1 { width: 62px; height: 62px; animation: putar 14s linear infinite; }
.orbit-cincin-2 { width: 94px; height: 94px; animation: putar 26s linear infinite reverse; }
.orbit-cincin-2 i { width: 6px; height: 6px; margin-top: -3px; background: var(--ungu); }

@keyframes putar { to { transform: rotate(360deg); } }

.masuk-kepala { margin-bottom: 26px; text-align: center; }
.masuk-kepala h1 { font-size: 22px; }
.masuk-kepala p { margin: 6px 0 0; color: var(--redup); font-size: 13px; }

.masuk-form { display: flex; flex-direction: column; gap: 16px; }
.masuk-galat {
  margin: 0;
  padding: 10px 14px;
  border: 1px solid rgba(242, 104, 106, .35);
  border-radius: var(--r-kecil);
  background: rgba(242, 104, 106, .1);
  color: #ff9b9d;
  font-size: 12.5px;
}

/* ── kerangka ──────────────────────────────────────────────────────────────
 * Aplikasinya tidak menempel ke tepi jendela: ia mengambang di atas latar
 * berbintang dengan sedikit jarak, seperti panel di situsnya. */
.kerangka {
  display: grid;
  grid-template-columns: var(--sisi) 1fr;
  gap: 14px;
  min-height: 100vh;
  padding: 14px;
}

.sisi {
  position: sticky;
  top: 14px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  height: calc(100vh - 28px);
  padding: 22px 16px 18px;
  border: 1px solid var(--garis);
  border-radius: var(--r-besar);
  background: linear-gradient(180deg, rgba(32, 27, 60, .86), rgba(16, 13, 34, .9));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  overflow-y: auto;
  scrollbar-width: thin;
}

.merek { display: flex; align-items: center; gap: 12px; padding: 4px 8px 0; text-decoration: none; }
.merek-orb {
  position: relative;
  width: 30px; height: 30px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #d7d2ff, var(--ungu) 52%, var(--ungu-tua));
  box-shadow: 0 0 20px rgba(158, 148, 249, .6);
}
/* Cincin tipis mengelilingi orb — kutipan langsung dari Saturnus di menu Gabung. */
.merek-orb::after {
  content: '';
  position: absolute;
  inset: -7px -12px;
  border: 1px solid rgba(169, 155, 242, .5);
  border-radius: 50%;
  transform: rotate(-22deg);
}
.merek-teks { display: flex; flex-direction: column; line-height: 1.25; }
.merek-teks strong { font-size: 13.5px; letter-spacing: -.01em; }
.merek-teks em { color: var(--samar); font-size: 11px; font-style: normal; letter-spacing: .08em; text-transform: uppercase; }

.nav { display: flex; flex-direction: column; gap: 3px; flex: 1; }

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 10px 7px 7px;
  border-radius: var(--r);
  color: #aaa4bd;
  text-decoration: none;
  font-size: 13.5px;
  transition: background .18s, color .18s;
}
.nav-item:hover { background: rgba(158, 148, 249, .07); color: var(--kertas); }

/* Ubin ikon: kotak membulat berwarna halaman. Saat aktif ia terisi penuh dan
   memendar — penanda yang terbaca sebelum tulisannya sempat dibaca. */
.nav-ubin {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  flex: 0 0 auto;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--warna) 26%, transparent);
  background: color-mix(in srgb, var(--warna) 11%, transparent);
  color: var(--warna);
  transition: background .2s, box-shadow .2s, transform .2s var(--lentur);
}
.nav-item:hover .nav-ubin { transform: translateY(-1px); }

.nav-teks { flex: 1; }

.nav-item.aktif {
  background: linear-gradient(90deg, color-mix(in srgb, var(--warna) 15%, transparent), transparent 78%);
  color: var(--kertas);
  font-weight: 500;
}
.nav-item.aktif .nav-ubin {
  background: color-mix(in srgb, var(--warna) 88%, #000);
  border-color: transparent;
  color: #14121c;
  box-shadow: 0 0 20px color-mix(in srgb, var(--warna) 45%, transparent);
}
/* Garis penanda di tepi kiri, sejajar dengan tepi sidebar. */
.nav-item.aktif::before {
  content: '';
  position: absolute;
  left: -16px; top: 50%;
  width: 3px; height: 22px;
  margin-top: -11px;
  border-radius: 0 3px 3px 0;
  background: var(--warna);
  box-shadow: 0 0 12px var(--warna);
}

.nav-lencana {
  min-width: 21px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--perhatian);
  color: #14121c;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}

.nav-grup { margin-top: 4px; }

.nav-grup-kepala {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 5px 10px;
  border: none;
  background: none;
  color: var(--samar);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .15s;
}
.nav-grup-kepala:hover { color: var(--kertas); }

.nav-grup-label { flex: 1; text-align: left; }

.nav-grup-chevron {
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  transition: transform .2s var(--lentur, ease);
}
.nav-grup-chevron svg { width: 12px; height: 12px; }
.nav-grup-kepala:not(.collapsed) .nav-grup-chevron { transform: rotate(90deg); }

.nav-grup-isi {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .22s ease;
}
.nav-grup-dalam {
  overflow: hidden;
}
.nav-grup-isi.nav-grup-tutup {
  grid-template-rows: 0fr;
}

.sisi-kaki {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 10px 0;
  border-top: 1px solid var(--garis);
  color: var(--samar);
  font-size: 11.5px;
}
.sisi-kaki-titik {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--hijau);
  box-shadow: 0 0 10px rgba(90, 209, 192, .9);
  animation: denyut 2.6s ease-in-out infinite;
}
@keyframes denyut { 50% { opacity: .35; } }

/* ── topbar ───────────────────────────────────────────────────────────────── */
.utama { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 14px 11px 20px;
  border: 1px solid var(--garis);
  border-radius: var(--r-besar);
  background: var(--kaca);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.jejak-nav { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.jejak-akar { color: var(--samar); }
.jejak-pisah { color: var(--samar); opacity: .5; }
.jejak-kini { display: flex; align-items: center; gap: 7px; color: var(--kertas); font-weight: 500; }
.jejak-kini::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--warna, var(--ungu));
  box-shadow: 0 0 10px var(--warna, var(--ungu));
}

.topbar-aksi { display: flex; align-items: center; gap: 8px; }

.ikon-btn {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--garis);
  border-radius: 11px;
  background: rgba(243, 242, 248, .03);
  color: var(--redup);
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
}
.ikon-btn:hover { color: var(--ungu); border-color: rgba(158, 148, 249, .45); background: rgba(158, 148, 249, .1); }
.ikon-btn-keluar:hover { color: var(--bahaya); border-color: rgba(242, 104, 106, .45); background: rgba(242, 104, 106, .1); }

.pengguna {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 4px;
  padding: 4px 14px 4px 4px;
  border: 1px solid var(--garis);
  border-radius: 999px;
  background: rgba(243, 242, 248, .03);
}
.avatar {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--ungu), var(--ungu-tua));
  color: #14121c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
.pengguna-teks { display: flex; flex-direction: column; line-height: 1.2; }
.pengguna-teks strong { font-size: 12.5px; font-weight: 500; }
.pengguna-teks em { color: var(--samar); font-size: 10.5px; font-style: normal; letter-spacing: .1em; text-transform: uppercase; }

/* ── isi ──────────────────────────────────────────────────────────────────── */
.isi {
  flex: 1;
  padding: 26px 28px 48px;
  border: 1px solid var(--garis);
  border-radius: var(--r-besar);
  background: var(--kaca);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow-x: hidden;
}
.isi-masuk { animation: naikHalus .42s var(--lentur) both; }
@keyframes naikHalus { from { opacity: 0; transform: translateY(8px); } }

.halaman-kepala {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
/* Judul halaman memakai gradien yang berujung pada warna halaman aktif —
   sama seperti judul besar di referensinya, tapi warnanya ikut menu. */
.halaman-kepala h1 {
  background: linear-gradient(94deg, #ffffff 10%, color-mix(in srgb, var(--halaman) 92%, #fff));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.halaman-kepala p { margin: 6px 0 0; color: var(--redup); font-size: 13px; max-width: 62ch; }
/* `.kendali` lebarnya 100% supaya pas di dalam form. Di kepala halaman ia
   berdiri sendiri sebagai penyaring, dan lebar penuh membuatnya terlihat
   seperti bidang isian yang salah tempat. */
.halaman-kepala > select.kendali,
.halaman-kepala select { width: auto; min-width: 190px; border-radius: 999px; }

.saring { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.saring .kendali { max-width: 250px; border-radius: 999px; }
.halaman-nav { display: flex; align-items: center; gap: 10px; margin-top: 16px; }

/* ── tombol ───────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 17px;
  border: 1px solid var(--garis-2);
  border-radius: 999px;
  background: rgba(243, 242, 248, .04);
  color: var(--kertas);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .16s, background .16s, transform .16s var(--lentur);
}
.btn:hover:not(:disabled) { border-color: rgba(158, 148, 249, .5); background: rgba(158, 148, 249, .1); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .38; cursor: not-allowed; }

.btn-utama {
  border-color: transparent;
  background: linear-gradient(135deg, var(--ungu), var(--ungu-tua));
  color: #14121c;
  font-weight: 600;
  box-shadow: 0 6px 22px rgba(106, 90, 224, .35);
}
.btn-utama:hover:not(:disabled) {
  background: linear-gradient(135deg, #ada3ff, #7768e8);
  box-shadow: 0 8px 28px rgba(106, 90, 224, .5);
}
.btn-bahaya:hover:not(:disabled) { border-color: rgba(242, 104, 106, .5); color: #ff9b9d; background: rgba(242, 104, 106, .1); }
.btn-kecil { padding: 5px 12px; font-size: 12px; }
.btn-lebar { width: 100%; justify-content: center; padding: 12px; }

.btn-ikon {
  display: grid;
  place-items: center;
  width: 27px; height: 27px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--garis-2);
  border-radius: 50%;
  background: transparent;
  color: var(--redup);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: color .16s, border-color .16s;
}
.btn-ikon:hover { border-color: var(--ungu); color: var(--ungu); }
.aksi-baris { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }

/* Di dalam tabel, tombol aksi tidak boleh terbungkus: tombol pil lebih lebar
   daripada tombol persegi yang dipakai sebelumnya, dan "Sunting/Hapus" yang
   menumpuk membuat tinggi tiap baris melompat-lompat. Kolomnya yang menyesuaikan. */
.tabel .aksi-baris { flex-wrap: nowrap; justify-content: flex-end; }
.tabel .aksi-baris .btn { white-space: nowrap; }

/* ── form ─────────────────────────────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: 16px; }
.bidang { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.bidang-label { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--samar); }
.bidang-petunjuk { color: var(--redup); font-size: 11.5px; line-height: 1.5; }
.bidang-galat { color: #ff9b9d; font-size: 11.5px; }
.baris-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.baris-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.form-aksi { display: flex; justify-content: flex-end; gap: 10px; padding-top: 8px; }

.kendali {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--garis-2);
  border-radius: var(--r-kecil);
  background: rgba(8, 7, 14, .5);
  color: var(--kertas);
  font-family: inherit;
  font-size: 13.5px;
  transition: border-color .16s, box-shadow .16s;
}
.kendali::placeholder { color: var(--samar); }
.kendali:focus {
  border-color: var(--ungu);
  outline: none;
  box-shadow: 0 0 0 3px rgba(158, 148, 249, .16);
}
.kendali-kecil { padding: 7px 10px; font-size: 12.5px; }
.kendali-galat { border-color: rgba(242, 104, 106, .7); }
input[type="color"].kendali { height: 40px; padding: 4px; cursor: pointer; }
textarea.kendali { resize: vertical; min-height: 58px; line-height: 1.6; }
select.kendali, select {
  appearance: none;
  /* Panah sendiri sebagai data-URI: tidak ada berkas yang diunduh, dan
     warnanya cocok dengan teks — panah bawaan sistem selalu terlalu terang
     di atas permukaan segelap ini. */
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f8aa3' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 15px;
  padding-right: 34px;
}
option { background: #17151f; color: var(--kertas); }

.kotak {
  margin: 0;
  padding: 16px 18px 18px;
  border: 1px solid var(--garis);
  border-radius: var(--r);
  background: rgba(243, 242, 248, .022);
}
.kotak legend {
  padding: 0 8px;
  color: var(--mint);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.kotak > p:first-of-type { margin-top: 0; }

.butir-daftar { display: flex; flex-direction: column; gap: 9px; margin-bottom: 12px; }
.butir {
  display: grid;
  grid-template-columns: 130px 165px 1fr 27px;
  gap: 9px;
  align-items: start;
  padding: 9px;
  border: 1px solid var(--garis);
  border-radius: var(--r-kecil);
  background: rgba(8, 7, 14, .3);
}
.butir-2 { grid-template-columns: 165px 1fr 27px; }

/* ── tabel ────────────────────────────────────────────────────────────────── */
.tabel-bungkus {
  border: 1px solid var(--garis);
  border-radius: var(--r);
  background: rgba(8, 7, 14, .34);
  overflow-x: auto;
}
.tabel { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabel th {
  padding: 12px 16px;
  border-bottom: 1px solid var(--garis);
  color: var(--samar);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
.tabel td { padding: 14px 16px; border-bottom: 1px solid var(--garis); vertical-align: top; }
.tabel tr:last-child td { border-bottom: none; }
.tabel tbody tr { transition: background .14s; }
.tabel tbody tr:hover { background: rgba(158, 148, 249, .05); }
.sparing-teks { margin: 7px 0 0; max-width: 62ch; color: #c4bfd6; font-size: 12.5px; line-height: 1.6; }

.lencana {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: .05em;
  white-space: nowrap;
}
.lencana-netral { background: rgba(243, 242, 248, .09); color: #b3aec6; }
.lencana-redup { background: rgba(243, 242, 248, .045); color: var(--samar); }
.lencana-hijau { background: rgba(90, 209, 192, .15); color: var(--hijau); }
.lencana-biru { background: rgba(158, 148, 249, .16); color: var(--ungu); }
.lencana-ungu { background: rgba(106, 90, 224, .26); color: var(--mint); }
.lencana-perhatian { background: rgba(242, 166, 90, .15); color: var(--perhatian); }

.warna-contoh {
  display: inline-block;
  width: 20px; height: 20px;
  border-radius: 6px;
  border: 1px solid var(--garis-2);
  box-shadow: 0 0 12px currentColor;
}
.glif { font-size: 16px; color: var(--mint); }

/* ── panel & kartu ────────────────────────────────────────────────────────── */
.panel {
  margin-bottom: 18px;
  padding: 20px 22px;
  border: 1px solid var(--garis);
  border-radius: var(--r);
  background: var(--kaca-2);
}
.panel-kepala { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.panel-kepala h2 { margin: 0; }

/* ── beranda ──────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  margin-bottom: 22px;
  padding: 30px 32px;
  border: 1px solid var(--garis-2);
  border-radius: var(--r-besar);
  background:
    radial-gradient(70% 110% at 0% 0%, color-mix(in srgb, var(--halaman) 30%, transparent), transparent 55%),
    linear-gradient(110deg, #6b56ff 0%, #5442d6 26%, #3a2f92 52%, #2a2358 76%, rgba(41, 36, 74, .92) 100%);
  overflow: hidden;
}
/* Busur orbit di sudut kanan. Dua lingkaran besar yang sebagian besar berada
   di luar kartu — yang terlihat cuma lengkungnya, seperti tepi orbit planet. */
.hero::after {
  content: '';
  position: absolute;
  right: -120px; top: -90px;
  width: 340px; height: 340px;
  border: 1px solid rgba(243, 242, 248, .1);
  border-radius: 50%;
  box-shadow: inset 0 0 0 60px rgba(243, 242, 248, .022), 0 0 0 46px rgba(158, 148, 249, .05);
  pointer-events: none;
}
.hero h1 {
  font-size: 34px;
  line-height: 1.1;
  background: linear-gradient(94deg, #ffffff 14%, #e6e2ff 58%, #bcb2ff 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p { position: relative; margin: 12px 0 0; max-width: 54ch; color: #cfc9e4; font-size: 13.5px; }

.stat-kisi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  border: 1px solid var(--garis);
  border-radius: var(--r);
  background: var(--kaca-2);
  overflow: hidden;
  transition: border-color .2s, transform .2s var(--lentur);
}
.stat:hover { transform: translateY(-2px); border-color: var(--garis-2); }
/* Titik cahaya di pojok — versi kecil dari matahari di tengah tata surya. */
.stat::before {
  content: '';
  position: absolute;
  right: -30px; top: -30px;
  width: 90px; height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(158, 148, 249, .3), transparent 70%);
}
.stat-perhatian { border-color: rgba(242, 166, 90, .32); }
.stat-perhatian::before { background: radial-gradient(circle, rgba(242, 166, 90, .24), transparent 70%); }
.stat-nilai {
  font-size: 34px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.035em;
  background: linear-gradient(155deg, #ffffff 30%, #d6d0ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-perhatian .stat-nilai { background: linear-gradient(160deg, #ffd9ad, var(--perhatian)); -webkit-background-clip: text; background-clip: text; }
.stat-judul { font-size: 12.5px; }
.stat-catatan { color: var(--samar); font-size: 11.5px; }

.acara-sorot { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.acara-hitung {
  display: grid;
  place-items: center;
  width: 92px; height: 92px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(158, 148, 249, .3);
  background: radial-gradient(circle, rgba(106, 90, 224, .22), transparent 70%);
}
.acara-angka { font-size: 30px; font-weight: 600; line-height: 1; color: var(--ungu); letter-spacing: -.03em; }
.acara-hitung span:last-child { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }

.jejak { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; }
.jejak li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--garis);
}
.jejak li:last-child { border-bottom: none; padding-bottom: 0; }
.jejak-kanan { margin-left: auto; text-align: right; }

.kartu-kisi { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 15px; }
.kartu {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 20px;
  border: 1px solid var(--garis);
  border-radius: var(--r);
  background: var(--kaca-2);
  overflow: hidden;
  transition: border-color .2s, transform .2s var(--lentur);
}
.kartu:hover { transform: translateY(-2px); border-color: var(--garis-2); }
.kartu-kepala { display: flex; gap: 13px; align-items: flex-start; }
.kartu-no { font-size: 24px; font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.kartu-meta { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.kartu-judul { margin: 0; font-size: 13.5px; font-weight: 500; }
.kartu-lead { margin: 0; font-size: 12.5px; line-height: 1.55; }
.kartu-angka {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 10px;
  margin-top: auto;
  border-top: 1px solid var(--garis);
}
.angka { display: flex; flex-direction: column; font-size: 12.5px; }
.angka em { color: var(--samar); font-size: 10px; font-style: normal; letter-spacing: .12em; text-transform: uppercase; }

/* ── panel geser & modal ──────────────────────────────────────────────────── */
.drawer-lapis, .modal-lapis {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(5, 4, 9, .68);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: pudar .2s;
}
@keyframes pudar { from { opacity: 0; } }

.drawer-lapis { display: flex; justify-content: flex-end; padding: 14px; }
.drawer {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  height: 100%;
  border: 1px solid var(--garis-2);
  border-radius: var(--r-besar);
  background: linear-gradient(170deg, rgba(34, 31, 48, .96), rgba(14, 12, 22, .97));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: -30px 0 80px rgba(0, 0, 0, .55);
  animation: geser .32s var(--lentur);
  overflow: hidden;
}
@keyframes geser { from { transform: translateX(28px); opacity: 0; } }
.drawer-kepala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--garis);
}
.drawer-kepala h2 { margin: 0; font-size: 15.5px; }
.drawer-isi { padding: 24px; overflow-y: auto; }

.modal-lapis { display: grid; place-items: center; }
.modal {
  padding: 26px;
  border: 1px solid var(--garis-2);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(38, 35, 54, .96), rgba(18, 16, 28, .97));
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6);
  animation: naik .24s var(--lentur);
}
@keyframes naik { from { transform: translateY(12px) scale(.98); opacity: 0; } }
.modal-kecil { width: min(410px, 92vw); }
.modal-pesan { margin: 0 0 20px; line-height: 1.6; }
.modal-aksi { display: flex; justify-content: flex-end; gap: 10px; }

/* ── pesan sementara ──────────────────────────────────────────────────────── */
.toast-wrap { position: fixed; right: 22px; bottom: 22px; z-index: 90; display: flex; flex-direction: column; gap: 9px; }
.toast {
  padding: 12px 18px;
  border: 1px solid var(--garis-2);
  border-radius: var(--r-kecil);
  background: linear-gradient(140deg, rgba(40, 37, 56, .97), rgba(20, 18, 30, .97));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 13px;
  max-width: 380px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55);
  animation: naik .24s var(--lentur);
  transition: opacity .35s, transform .35s;
}
.toast-sukses { border-color: rgba(90, 209, 192, .45); box-shadow: 0 16px 40px rgba(0, 0, 0, .55), 0 0 24px rgba(90, 209, 192, .12); }
.toast-galat { border-color: rgba(242, 104, 106, .45); box-shadow: 0 16px 40px rgba(0, 0, 0, .55), 0 0 24px rgba(242, 104, 106, .12); }
.toast.keluar { opacity: 0; transform: translateY(8px); }

/* ── editor Quill ─────────────────────────────────────────────────────────── */
.editor { min-height: 320px; background: rgba(8, 7, 14, .42); border-radius: 0 0 var(--r-kecil) var(--r-kecil); }
.ql-toolbar.ql-snow, .ql-container.ql-snow { border-color: var(--garis-2); }
.ql-toolbar.ql-snow { border-radius: var(--r-kecil) var(--r-kecil) 0 0; background: rgba(243, 242, 248, .04); }
.ql-container.ql-snow { border-radius: 0 0 var(--r-kecil) var(--r-kecil); font-family: var(--font); font-size: 14px; }
.ql-editor { min-height: 300px; color: var(--kertas); line-height: 1.7; }
.ql-editor.ql-blank::before { color: var(--samar); font-style: normal; }
.ql-editor h2, .ql-editor h3, .ql-editor h4 { color: var(--kertas); letter-spacing: -.01em; }
.ql-editor blockquote { border-left: 2px solid var(--ungu); padding-left: 16px; color: var(--mint); }
.ql-editor a { color: var(--ungu); }
.ql-editor pre.ql-syntax { background: rgba(8, 7, 14, .8); border-radius: 8px; color: #c9c4dd; }
.ql-snow .ql-stroke { stroke: #b3aec6; }
.ql-snow .ql-fill { fill: #b3aec6; }
.ql-snow .ql-picker { color: #b3aec6; }
.ql-snow .ql-picker-options { background: #1e1c2b; border-color: var(--garis-2); border-radius: 8px; }
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--ungu); }
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--ungu); }
.ql-snow .ql-tooltip {
  background: #1e1c2b;
  border-color: var(--garis-2);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
  color: var(--kertas);
}
.ql-snow .ql-tooltip input[type=text] {
  background: rgba(8, 7, 14, .6);
  border-color: var(--garis-2);
  border-radius: 6px;
  color: var(--kertas);
}

/* ── batang gulir ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(158, 148, 249, .2); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(158, 148, 249, .38); background-clip: content-box; }

/* ── tombol hamburger & tabir mobile ──────────────────────────────────────── */
.sisi-toggle { display: none; }
.sisi-tabir {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 79;
  background: rgba(5, 4, 9, .6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .28s;
  pointer-events: none;
}
.sisi-tabir.sisi-tabir-buka {
  opacity: 1;
  pointer-events: auto;
}

/* ── layar sempit ─────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .sisi-toggle { display: grid; }
  .sisi-tabir { display: block; }

  .kerangka { grid-template-columns: 1fr; padding: 10px; gap: 10px; }

  .sisi {
    position: fixed;
    inset: 0;
    z-index: 80;
    height: 100vh;
    width: 280px;
    border-radius: 0 var(--r-besar) var(--r-besar) 0;
    transform: translateX(-100%);
    transition: transform .28s var(--lentur), opacity .28s;
    opacity: 0;
    pointer-events: none;
  }
  .sisi.sisi-buka {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav { flex-direction: column; gap: 3px; }
  .nav-item.aktif::before { display: none; }

  .isi { padding: 20px 14px 40px; }
  .topbar { padding: 10px 12px; gap: 8px; }
  .pengguna-teks { display: none; }
  .pengguna { padding: 3px; margin-left: 0; border: none; background: transparent; }

  .baris-2, .baris-3 { grid-template-columns: 1fr; }
  .butir { grid-template-columns: 1fr; }
  .butir-2 { grid-template-columns: 1fr; }

  .hero { padding: 22px 18px; }
  .hero h1 { font-size: 24px; }
  .hero::after { width: 200px; height: 200px; right: -80px; top: -60px; }

  .halaman-kepala { flex-direction: column; gap: 12px; }
  .halaman-kepala > select.kendali,
  .halaman-kepala select { width: 100%; min-width: 0; }

  .stat-kisi { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat-nilai { font-size: 26px; }
  .stat { padding: 16px; }

  .kartu-kisi { grid-template-columns: 1fr; }

  .drawer-lapis { padding: 0; }
  .drawer { border-radius: 0; width: 100%; max-width: 100%; }
  .drawer-kepala { padding: 16px; }
  .drawer-isi { padding: 16px; }

  .modal-kecil { width: 94vw; }

  .pantau-kolom { grid-template-columns: 1fr; }
  .pantau-status { flex-direction: column; gap: 14px; }
  .acara-sorot { flex-direction: column; align-items: flex-start; gap: 14px; }

  .tabel-bungkus { border-radius: var(--r-kecil); }
  .tabel th { padding: 10px 12px; font-size: 10px; }
  .tabel td { padding: 10px 12px; font-size: 12.5px; }

  .saring { flex-direction: column; }
  .saring .kendali { max-width: 100%; }

  .form-aksi { flex-wrap: wrap; }

  .toast-wrap { right: 10px; bottom: 10px; left: 10px; }
  .toast { max-width: 100%; }

  .lg-peta { height: 140px; }

  .pilih-bahasa { display: none; }
  .topbar-aksi { gap: 6px; }
  .topbar-aksi .ikon-btn:not(.ikon-btn-keluar) { display: none; }

  .jejak-nav { font-size: 12px; gap: 6px; min-width: 0; }
  .jejak-akar { display: none; }
  .jejak-pisah { display: none; }
}

@media (max-width: 480px) {
  .kerangka { padding: 6px; gap: 6px; }
  .topbar { padding: 8px 10px; border-radius: 16px; gap: 6px; }
  .isi { padding: 14px 10px 32px; border-radius: 16px; }

  .sisi-toggle { width: 30px; height: 30px; border-radius: 9px; }
  .ikon-btn { width: 30px; height: 30px; border-radius: 9px; }

  .jejak-kini { font-size: 12px; gap: 5px; }
  .jejak-kini::before { width: 6px; height: 6px; }

  .stat-kisi { grid-template-columns: 1fr; }
  .stat-nilai { font-size: 22px; }
  .stat { padding: 14px; }

  .hero { padding: 18px 16px; }
  .hero h1 { font-size: 20px; }
  .hero p { font-size: 12px; }
  .hero::after { display: none; }

  .halaman-kepala h1 { font-size: 18px; }
  h1 { font-size: 18px; }

  .sisi { width: 100%; border-radius: 0; }

  .acara-hitung { width: 68px; height: 68px; }
  .acara-angka { font-size: 20px; }

  .tabel .aksi-baris { flex-wrap: wrap; }
  .tabel .aksi-baris .btn { font-size: 11px; padding: 4px 8px; }
  .tabel th { padding: 8px 10px; font-size: 9.5px; }
  .tabel td { padding: 8px 10px; font-size: 12px; }

  .pilih-bar { flex-direction: column; gap: 10px; }

  .panel { padding: 16px; }
  .panel-kepala { flex-direction: column; gap: 8px; align-items: flex-start; }
  .panel-kepala h2 { font-size: 13.5px; }

  .kartu { padding: 16px; }
  .kartu-atas { padding: 14px 16px 10px; }

  .btn { padding: 8px 14px; font-size: 12px; }
  .btn-utama { padding: 10px 16px; }

  .form { gap: 14px; }
  .kendali { padding: 9px 11px; font-size: 13px; }

  .db-kisi { grid-template-columns: 1fr 1fr; }

  .avatar { width: 26px; height: 26px; font-size: 10px; }

  .masuk-kartu { padding: 28px 22px 24px; border-radius: 20px; }
  .masuk-kartu h1 { font-size: 18px; }

  .draf-pulih { flex-direction: column; gap: 10px; }
  .draf-pulih span { min-width: 0; }
}

/* ── gerak dikurangi ──────────────────────────────────────────────────────
 * Latar yang hanyut dan orbit yang berputar adalah dekorasi. Kalau sistem
 * meminta gerak dikurangi, semuanya diam — tampilannya tidak kehilangan apa
 * pun yang membawa informasi. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
 * Kartu menu tata surya
 * ══════════════════════════════════════════════════════════════════════════
 * Tiap kartu memakai warna aksen menunya lewat --w, sehingga tepi, nomor, dan
 * pendarnya sekaligus mengikuti planet yang diwakili. */

.kartu-menu {
  gap: 0;
  padding: 0;
  border-color: color-mix(in srgb, var(--w, var(--ungu)) 22%, var(--garis));
}
.kartu-menu::after {
  /* Garis tipis di tepi atas, warna planetnya. Penanda yang cukup untuk
     membedakan tujuh kartu tanpa mewarnai seluruh permukaannya. */
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--w, var(--ungu)), transparent 78%);
}
.kartu-mati { opacity: .58; }
.kartu-mati:hover { opacity: 1; }

.kartu-atas {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
}
.kartu-identitas { display: flex; align-items: center; gap: 13px; }
.kartu-menu .kartu-no {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: 0 0 auto;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--w, var(--ungu)) 32%, transparent);
  background: color-mix(in srgb, var(--w, var(--ungu)) 13%, transparent);
  color: var(--w, var(--ungu));
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}
.kartu-identitas h3 { margin-bottom: 1px; }

/* ── pratinjau orbit ───────────────────────────────────────────────────────
 * Bukan ilustrasi: jarak dan ukuran bola dihitung dari nilai orbit dan size
 * yang tersimpan, jadi kartunya memperlihatkan susunan yang sebenarnya. */
.orb-pratinjau {
  position: relative;
  height: 54px;
  margin: 0 20px;
  border-top: 1px solid var(--garis);
  border-bottom: 1px solid var(--garis);
  background:
    radial-gradient(70% 120% at 0% 50%, rgba(158, 148, 249, .1), transparent 60%);
}
.orb-matahari {
  position: absolute;
  left: 0; top: 50%;
  width: 22px; height: 22px;
  margin: -11px 0 0 -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #e2deff, var(--ungu) 52%, var(--ungu-tua));
  box-shadow: 0 0 22px rgba(158, 148, 249, .6);
}
.orb-kecil { width: 16px; height: 16px; margin: -8px 0 0 -4px; }
.orb-lintasan {
  position: absolute;
  left: 0; top: 50%;
  height: 1px;
  border-top: 1px dashed rgba(243, 242, 248, .18);
}
.orb-planet {
  position: absolute;
  top: 50%;
  border-radius: 50%;
  background: var(--w, var(--mint));
  box-shadow: 0 0 16px color-mix(in srgb, var(--w, var(--mint)) 65%, transparent);
  transform: translate(-50%, -50%);
}
/* Cincin Saturnus: elips tipis yang dimiringkan, bukan berkas gambar. */
.orb-bercincin::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 230%; height: 42%;
  border: 1px solid color-mix(in srgb, var(--w, var(--mint)) 75%, transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-18deg);
}
.orb-inti { background: radial-gradient(60% 120% at 50% 50%, rgba(158, 148, 249, .14), transparent 65%); }
.orb-inti .orb-matahari { left: 50%; margin-left: -14px; width: 28px; height: 28px; margin-top: -14px; }

.kartu-orbit-teks { margin: 10px 20px 0; }

.kartu-isi { padding: 12px 20px 0; }
.kartu-menu .kartu-judul { font-size: 14.5px; font-weight: 600; margin-bottom: 5px; }
.kartu-menu .kartu-lead {
  font-size: 12.5px;
  line-height: 1.55;
  /* Dua baris, lalu dipotong. Panjang lead berbeda-beda antar menu dan kartu
     yang tingginya melompat-lompat membuat kisinya terlihat berantakan. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kartu-butir {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 14px 20px 0;
  padding-top: 12px;
  border-top: 1px solid var(--garis);
}
.kartu-aksi { display: flex; gap: 8px; padding: 14px 20px 18px; margin-top: auto; }

/* ══════════════════════════════════════════════════════════════════════════
 * Pemantauan
 * ══════════════════════════════════════════════════════════════════════════ */

.pantau-status {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 26px;
  margin-bottom: 20px;
  padding: 22px 24px;
  border: 1px solid var(--garis-2);
  border-radius: var(--r);
  background: var(--kaca-2);
  flex-wrap: wrap;
}
.pantau-status-kiri { display: flex; align-items: center; gap: 16px; }

/* Cincin berdenyut: warnanya menyatakan tingkat, dan denyutnya menarik mata ke
   sana lebih dulu daripada teks mana pun di halaman. */
.pantau-cincin {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid currentColor;
}
.pantau-inti {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 16px currentColor;
}
.pantau-cincin::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid currentColor;
  animation: riak 2.8s ease-out infinite;
}
@keyframes riak {
  0% { transform: scale(1); opacity: .8; }
  100% { transform: scale(1.65); opacity: 0; }
}
.pantau-aman { color: var(--hijau); border-color: rgba(90, 209, 192, .3); }
.pantau-waspada { color: var(--perhatian); border-color: rgba(242, 166, 90, .35); }
.pantau-kritis { color: var(--bahaya); border-color: rgba(242, 104, 106, .45); }
.pantau-status strong { color: var(--kertas); font-size: 15px; }

.pantau-catatan {
  margin: 0;
  padding-left: 18px;
  max-width: 62ch;
  color: #c4bfd6;
  font-size: 12.5px;
  line-height: 1.7;
}
.pantau-catatan li::marker { color: var(--samar); }

.pantau-kolom { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; }
.pantau-kolom > .panel { margin-bottom: 0; }

/* ── grafik batang ─────────────────────────────────────────────────────────
 * Empat belas batang tidak sepadan dengan menambah pustaka grafik yang harus
 * dijaga, diperbarui, dan ikut terunduh pengguna. */
.grafik {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 118px;
  padding: 8px 0;
}
.grafik-batang {
  flex: 1;
  display: flex;
  align-items: flex-end;
  height: 100%;
  border-radius: 4px;
  background: rgba(243, 242, 248, .035);
  cursor: default;
}
.grafik-isi {
  width: 100%;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--ungu), var(--ungu-tua));
  transition: height .5s var(--lentur);
}
.grafik-berat { background: linear-gradient(180deg, var(--perhatian), #c97a2e); }
.grafik-kaki { display: flex; justify-content: space-between; margin-top: 8px; }

.db-kisi { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.db-baris {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--garis);
  border-radius: var(--r-kecil);
  background: rgba(8, 7, 20, .34);
}
.db-baris strong { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }

/* ── perubahan di jejak audit ──────────────────────────────────────────────── */
.ubah-daftar { display: flex; flex-direction: column; gap: 5px; }
.ubah {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 12px;
}
.ubah-medan {
  padding: 1px 7px;
  border-radius: 5px;
  background: rgba(158, 148, 249, .14);
  color: var(--mint);
  font-family: var(--mono);
  font-size: 11px;
}
.ubah-dari { color: var(--samar); text-decoration: line-through; text-decoration-color: rgba(242, 104, 106, .5); }
.ubah-panah { color: var(--samar); }
.ubah-jadi { color: #cfe9e3; }

/* pantau-kolom dan pantau-status responsif sudah ditangani di blok utama */

/* ══════════════════════════════════════════════════════════════════════════
 * Aksesibilitas, editor, dan aksi massal
 * ══════════════════════════════════════════════════════════════════════════ */

/* Tautan lewati: tersembunyi sampai difokuskan papan tik. Bukan
   `display: none` — elemen yang benar-benar disembunyikan tidak bisa
   menerima fokus, jadi tautannya jadi tidak pernah bisa dipakai. */
.lewati {
  position: fixed;
  top: 10px; left: 10px;
  z-index: 200;
  padding: 10px 18px;
  border-radius: var(--r-kecil);
  background: var(--ungu);
  color: #14121c;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .18s var(--lentur);
}
.lewati:focus { transform: none; }
.isi:focus { outline: none; }
.isi:focus-visible { outline: 2px solid var(--ungu); outline-offset: -2px; }

/* ── status penyimpanan di editor ─────────────────────────────────────────── */
.form-aksi { align-items: center; }
.editor-jejak {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
}
.editor-jejak::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.editor-jejak.bersih { color: var(--samar); }
.editor-jejak.kotor { color: var(--perhatian); }

.draf-pulih {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 13px 16px;
  border: 1px solid rgba(242, 166, 90, .38);
  border-radius: var(--r-kecil);
  background: rgba(242, 166, 90, .08);
  font-size: 12.5px;
}
.draf-pulih span { flex: 1; min-width: 200px; color: #f0d3ae; }

/* ── aksi massal ──────────────────────────────────────────────────────────── */
.pilih-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 11px 16px;
  border: 1px solid rgba(158, 148, 249, .38);
  border-radius: var(--r-kecil);
  background: rgba(158, 148, 249, .1);
  animation: naikHalus .22s var(--lentur);
}
.pilih-jumlah { margin-right: auto; font-size: 13px; font-weight: 600; color: var(--mint); }

.pilih-kotak {
  width: 16px; height: 16px;
  accent-color: var(--ungu);
  cursor: pointer;
  vertical-align: middle;
}
.tabel th:has(.pilih-kotak) { padding-right: 0; }

/* Baris terpilih diberi tanda supaya jelas apa yang akan kena aksi massal. */
.tabel tbody tr:has(.pilih-kotak:checked) {
  background: rgba(158, 148, 249, .08);
  box-shadow: inset 3px 0 0 var(--ungu);
}

/* ── pemilih bahasa ────────────────────────────────────────────────────────
 * Dua tombol, bukan dropdown. Pilihannya cuma dua dan keduanya muat di layar,
 * jadi dropdown hanya menambah satu klik untuk sesuatu yang bisa langsung
 * dilihat dan ditekan. */
.pilih-bahasa {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--garis);
  border-radius: 999px;
  background: rgba(8, 7, 20, .4);
}
.bahasa-btn {
  padding: 4px 11px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--redup);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background .16s, color .16s;
}
.bahasa-btn:hover { color: var(--kertas); }
.bahasa-btn.aktif {
  background: color-mix(in srgb, var(--ungu) 88%, #000);
  color: #14121c;
}
/* Nama lengkap bahasa hanya untuk screen reader di topbar — dua huruf sudah
   cukup jelas secara visual dan menghemat ruang yang sempit. */
.bahasa-penuh {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Di layar login ruangnya lega, jadi nama lengkapnya ditampilkan. */
.masuk-kartu .pilih-bahasa { display: flex; justify-content: center; margin-top: 22px; }
.masuk-kartu .bahasa-btn { padding: 6px 16px; }
.masuk-kartu .bahasa-penuh {
  position: static;
  width: auto; height: auto;
  margin: 0 0 0 6px;
  clip-path: none;
  font-weight: 400;
  opacity: .8;
}

/* ── langit komunitas ──────────────────────────────────────────────────────
   Peta sebaran bintang. Proyeksinya equirectangular — ra mendatar, dec
   menurun — bukan kubah bundar, karena yang dicari admin di sini adalah
   "menumpuk atau tidak", dan penumpukan paling mudah terbaca di kisi lurus.
   Kubah bundar terlihat lebih benar secara astronomi dan justru menyulitkan
   penilaian itu: kerapatan di dekat kutub jadi menipu. */
.lg-peta-kartu { gap: 14px; }
.lg-peta-kepala h3 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.lg-peta-kepala p { margin: 0; max-width: 66ch; }

.lg-peta {
  position: relative;
  height: 168px;
  border: 1px solid var(--garis);
  border-radius: 10px;
  background:
    radial-gradient(circle at 30% 20%, rgba(158, 148, 249, .12), transparent 60%),
    linear-gradient(180deg, #0a0818, #12102a);
  overflow: hidden;
}

/* Khatulistiwa langit (dec 0°): satu-satunya penanda skala. Lebih dari satu
   garis dan petanya mulai terbaca sebagai grafik, bukan sebagai langit. */
.lg-khatulistiwa {
  position: absolute;
  left: 0; right: 0; top: 50%;
  border-top: 1px dashed rgba(243, 242, 248, .14);
}

.lg-titik {
  position: absolute;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  transition: transform .15s ease;
}
.lg-titik:hover { transform: scale(1.6); }

.lg-approved { background: #ffe9c4; box-shadow: 0 0 9px rgba(255, 233, 196, .85); }
.lg-pending  { background: var(--perhatian); box-shadow: 0 0 7px rgba(242, 166, 90, .6); }
/* Yang dipadamkan tetap digambar: admin perlu tahu bahwa titik itu pernah ada
   sebelum menghapusnya, dan sebaran jadi menyesatkan kalau sebagiannya hilang. */
.lg-rejected { background: rgba(243, 242, 248, .2); }

.kecil.mono { font-family: var(--mono); font-size: 11px; letter-spacing: -.01em; }