/* ==========================================================================
   CV Online Dinamis — gaya tampilan
   --------------------------------------------------------------------------
   Ditulis tangan tanpa kerangka kerja CSS. Aplikasi ini diunggah manual ke
   shared hosting tanpa langkah build, sehingga berkas tunggal yang dapat
   dibaca dan disunting langsung lebih berguna daripada keluaran kompilasi.

   Warna disusun sebagai variabel agar tema gelap hanya perlu mengganti nilai,
   bukan menulis ulang aturan.
   ========================================================================== */

:root {
  --latar: #f6f7f9;
  --permukaan: #ffffff;
  --permukaan-2: #f1f3f6;
  --garis: #e3e7ec;
  --garis-tegas: #cbd3dd;
  --teks: #14181f;
  --teks-lembut: #5b6675;
  --teks-samar: #8b96a5;

  --aksen: #2563eb;
  --aksen-lembut: #eaf1fe;
  --aksen-gelap: #1d4ed8;

  --hijau: #059669;
  --hijau-lembut: #e6f6f0;
  --merah: #dc2626;
  --merah-lembut: #fdecec;
  --kuning: #d97706;
  --kuning-lembut: #fdf3e4;

  --radius: 10px;
  --radius-kecil: 6px;
  --bayang: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --bayang-tinggi: 0 4px 12px rgba(16, 24, 40, .10);
  --lebar-maks: 1240px;
  --tinggi-navbar: 57px;   /* 56px isi + 1px garis bawah */

  --gulir: #c9d1db;
  --gulir-terang: #aab4c1;
}

[data-tema="gelap"] {
  --latar: #0e1116;
  --permukaan: #161b22;
  --permukaan-2: #1c222b;
  --garis: #262d38;
  --garis-tegas: #39414e;
  --teks: #e6eaf0;
  --teks-lembut: #9aa6b5;
  --teks-samar: #6b7686;

  --aksen: #5b8def;
  --aksen-lembut: #17233c;
  --aksen-gelap: #7ba4f5;

  --hijau: #2fb98d;
  --hijau-lembut: #10251f;
  --merah: #f87171;
  --merah-lembut: #2a1618;
  --kuning: #eab308;
  --kuning-lembut: #291f0d;

  --bayang: 0 1px 2px rgba(0, 0, 0, .4);
  --bayang-tinggi: 0 6px 18px rgba(0, 0, 0, .5);

  --gulir: #39414e;
  --gulir-terang: #4d5766;
}

*, *::before, *::after { box-sizing: border-box; }

/*
 | Atribut hidden hanya diberi display:none oleh gaya bawaan peramban, sehingga
 | aturan penulis seperti `.bidang { display:flex }` mengalahkannya. Tanpa baris
 | ini, isian yang disembunyikan skrip tetap terlihat.
 */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

/*
 | Bilah gulir.
 |
 | Bawaan Windows berupa palang abu-abu lebar dengan tombol panah di kedua
 | ujungnya — lebih tebal daripada garis mana pun di aplikasi ini, dan menarik
 | perhatian ke sesuatu yang tidak perlu dilihat. Di sini ia dipersempit dan
 | diwarnai dengan variabel tema, sehingga ikut berganti pada tema gelap.
 |
 | Ditulis dua kali dengan sengaja: `scrollbar-width`/`scrollbar-color` adalah
 | properti standarnya (Firefox, dan Chrome sejak versi 121), sedangkan
 | `::-webkit-scrollbar` melayani Safari dan Chrome lama. Peramban yang
 | mengenali keduanya memakai yang standar.
 */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--gulir) transparent;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
  background-color: var(--gulir);
  border-radius: 999px;
  /* Garis transparan seukuran jarak yang diinginkan: itulah cara membuat
     gagangnya tampak ramping tanpa mempersempit bidang yang dapat ditarik. */
  border: 3px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover { background-color: var(--gulir-terang); }
::-webkit-scrollbar-corner { background: transparent; }

body {
  margin: 0;
  background: var(--latar);
  color: var(--teks);
  font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--aksen); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .5rem; font-weight: 650; line-height: 1.25; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .75rem; }

/* Angka rupiah dibaca sebagai kolom, bukan sebagai kalimat: lebar digit yang
   seragam membuat perbandingan antarbaris dapat dilakukan sekilas. */
.angka, td.angka, th.angka, .nilai-kpi {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ------------------------------------------------------------------ tata letak */

.pembungkus { max-width: var(--lebar-maks); margin: 0 auto; padding: 0 1.25rem; }

.utama { padding: 1.5rem 0 4rem; }

.baris-judul {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: flex-end; justify-content: space-between;
  margin-bottom: 1.25rem;
}
.baris-judul .keterangan { color: var(--teks-lembut); margin: 0; font-size: .9rem; }

/* -------------------------------------------------------------------- navbar */

.navbar {
  background: var(--permukaan);
  border-bottom: 1px solid var(--garis);
  position: sticky; top: 0; z-index: 50;
}
.navbar-isi { display: flex; align-items: center; gap: 1rem; height: 56px; }

.merek { display: flex; align-items: center; gap: .6rem; font-weight: 680; color: var(--teks); letter-spacing: -.02em; }
.merek:hover { text-decoration: none; }
.merek-ikon {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--aksen); color: #fff;
  display: grid; place-items: center; font-size: .78rem; font-weight: 700;
}

.navbar-kanan { display: flex; align-items: center; gap: .5rem; }

.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--permukaan-2); color: var(--teks-lembut);
  display: grid; place-items: center; font-size: .75rem; font-weight: 650;
  border: 1px solid var(--garis);
}

/* ------------------------------------------------------------- bilah sisi */

/*
 | Navigasi dashboard berupa kolom tegak yang menetap di tepi kiri.
 |
 | Daftar menunya panjang — sepuluh modul, profil, pesan, tiga halaman
 | pengaturan — dan daftar panjang adalah hal yang dilakukan kolom dengan
 | baik dan bilah mendatar tidak. Isi dashboard sendiri berupa tabel dan
 | formulir yang justru menginginkan lebar, jadi menukar tinggi bilah atas
 | dengan lebar sisi kiri adalah pertukaran yang menguntungkan keduanya.
 */
.dashboard {
  --lebar-sisi: 264px;
}

.sisi {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 80;
  width: var(--lebar-sisi);
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .85rem .7rem 0;
  background: var(--permukaan);
  border-right: 1px solid var(--garis);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sisi-kepala { display: flex; align-items: center; gap: .5rem; padding: .2rem .4rem .55rem; }
.sisi-kepala .merek { font-size: 1rem; }
/* Kekhususan sengaja dinaikkan: aturan .tombol-ikon di bawah berkas ini
   memasang display-nya sendiri dan akan menang bila selektornya seimbang. */
.dashboard .sisi .sisi-tutup { display: none; margin-left: auto; }

.kotak-cari-sisi {
  display: flex; align-items: center; gap: .45rem;
  margin: 0 .1rem .45rem;
  padding: 0 .6rem;
  border: 1px solid var(--garis);
  border-radius: 999px;
  background: var(--permukaan-2);
}
.kotak-cari-sisi .ikon { flex: none; color: var(--teks-samar); }
.kotak-cari-sisi input[type="search"] {
  border: 0; background: none; padding: .5rem 0; width: 100%;
  font-size: .87rem; color: var(--teks); min-height: 0;
}
.kotak-cari-sisi input[type="search"]:focus { outline: none; box-shadow: none; }
.kotak-cari-sisi:focus-within { border-color: var(--aksen); background: var(--permukaan); }

.sisi-nav { display: flex; flex-direction: column; gap: .1rem; }

.sisi-tautan {
  display: flex; align-items: center; gap: .65rem;
  padding: .52rem .6rem;
  border-radius: var(--radius-kecil);
  color: var(--teks-lembut);
  font-size: .9rem; font-weight: 550;
  cursor: pointer;
  list-style: none;
}
.sisi-tautan::-webkit-details-marker { display: none; }
.sisi-tautan > span:first-of-type { flex: 1; min-width: 0; }
.sisi-tautan .ikon { flex: none; color: var(--teks-samar); }
.sisi-tautan:hover { background: var(--permukaan-2); color: var(--teks); text-decoration: none; }
.sisi-tautan:hover .ikon { color: var(--teks-lembut); }
.sisi-tautan:focus-visible { outline: 2px solid var(--aksen); outline-offset: -2px; }

.sisi-tautan.aktif { background: var(--aksen-lembut); color: var(--aksen-gelap); font-weight: 620; }
.sisi-tautan.aktif .ikon { color: var(--aksen); }
.sisi-tautan.induk-aktif { color: var(--teks); }
.sisi-tautan.induk-aktif .ikon { color: var(--aksen); }

/* Panah kelompok berputar mengikuti keadaan <details>. */
.sisi-grup > summary .ikon-panah { transition: transform .16s ease; }
.sisi-grup[open] > summary .ikon-panah { transform: rotate(180deg); }

/*
 | Anak kelompok diberi garis pemandu di kiri, bukan sekadar indentasi:
 | dengan dua belas entri, garis itulah yang menjaga mata tetap tahu di
 | kelompok mana ia berada saat menyusuri daftar.
 */
.sisi-anak {
  display: flex; flex-direction: column; gap: .05rem;
  margin: .15rem 0 .35rem 1.15rem;
  padding-left: .55rem;
  border-left: 1px solid var(--garis);
}
.sisi-anak a {
  display: flex; align-items: center; gap: .55rem;
  padding: .4rem .5rem;
  border-radius: var(--radius-kecil);
  color: var(--teks-lembut);
  font-size: .845rem;
}
.sisi-anak a .ikon { flex: none; color: var(--teks-samar); }
.sisi-anak a:hover { background: var(--permukaan-2); color: var(--teks); text-decoration: none; }
.sisi-anak a.aktif { background: var(--aksen-lembut); color: var(--aksen-gelap); font-weight: 600; }
.sisi-anak a.aktif .ikon { color: var(--aksen); }

/* Kaki didorong ke dasar kolom, berapa pun panjang daftar di atasnya. */
.sisi-kaki {
  margin-top: auto;
  position: sticky; bottom: 0;
  padding: .5rem 0 .7rem;
  background: var(--permukaan);
  border-top: 1px solid var(--garis);
}

.sisi-pengguna { display: flex; align-items: center; gap: .4rem; padding: .45rem .6rem 0; }
.sisi-pengguna .avatar { flex: none; }
.sisi-pengguna-nama { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.sisi-pengguna-nama strong { font-size: .84rem; font-weight: 620; }
.sisi-pengguna-nama span,
.sisi-pengguna-nama strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sisi-pengguna form { display: contents; }

/* Bilah atas dan tirai hanya hidup di layar sempit. */
.bilah-ponsel { display: none; }
.tirai-sisi { display: none; }

.dashboard .utama { margin-left: var(--lebar-sisi); padding: 1.6rem 0 4rem; }

/* Tautan lewati: tersembunyi sampai difokuskan dengan papan ketik. */
.lewati {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: .55rem .9rem; border-radius: 0 0 var(--radius) 0;
  background: var(--aksen); color: #fff;
}
.lewati:focus { left: 0; }

@media (max-width: 1024px) {
  .sisi {
    width: min(300px, 84vw);
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: var(--bayang-tinggi);
  }
  .sisi.terbuka { transform: none; }
  .dashboard .sisi .sisi-tutup { display: inline-flex; }

  .dashboard .utama { margin-left: 0; padding-top: 1.1rem; }

  .bilah-ponsel {
    display: flex; align-items: center; gap: .5rem;
    position: sticky; top: 0; z-index: 70;
    padding: .5rem .9rem;
    height: 56px;
    background: var(--permukaan);
    border-bottom: 1px solid var(--garis);
  }

  .tirai-sisi {
    display: block;
    position: fixed; inset: 0; z-index: 75;
    background: rgba(11, 16, 32, .45);
  }
  .tirai-sisi[hidden] { display: none; }
}

/* Peramban yang menghormati "kurangi gerak" tidak perlu laci yang meluncur. */
@media (prefers-reduced-motion: reduce) {
  .sisi { transition: none; }
}

/* ---------------------------------------------------------------- pemilih periode */

.pemilih-periode { display: flex; align-items: center; gap: .3rem; }
.pemilih-periode .label-periode {
  font-weight: 600; font-size: .88rem; min-width: 118px; text-align: center;
  padding: .3rem .5rem; border-radius: var(--radius-kecil); background: var(--permukaan-2);
}

/* -------------------------------------------------------------------- kartu */

.kartu {
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  box-shadow: var(--bayang);
  margin-bottom: 1.1rem;
  overflow: hidden;
}
.kartu-kepala {
  padding: .85rem 1.1rem; border-bottom: 1px solid var(--garis);
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
}
.kartu-kepala h2, .kartu-kepala h3 { margin: 0; }
.kartu-kepala .sub { color: var(--teks-lembut); font-size: .85rem; margin: 0; }
.kartu-isi { padding: 1.1rem; }
.kartu-isi.rapat { padding: 0; }

/* ---------------------------------------------------------------------- KPI */

.kisi-kpi {
  display: grid; gap: 1rem; margin-bottom: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.kpi {
  background: var(--permukaan); border: 1px solid var(--garis);
  border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--bayang);
}
.kpi .judul-kpi { color: var(--teks-lembut); font-size: .82rem; font-weight: 550; margin-bottom: .35rem; }
.kpi .nilai-kpi { font-size: 1.6rem; font-weight: 680; letter-spacing: -.02em; line-height: 1.15; }
.kpi .banding { font-size: .8rem; color: var(--teks-lembut); margin-top: .3rem; display: flex; align-items: center; gap: .3rem; }

.naik { color: var(--hijau); }
.turun { color: var(--merah); }
.netral { color: var(--teks-lembut); }

/* -------------------------------------------------------------------- tabel */

.tabel-bungkus { overflow-x: auto; }

table.tabel { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.tabel th, table.tabel td { padding: .6rem .8rem; text-align: left; border-bottom: 1px solid var(--garis); vertical-align: middle; }
table.tabel th {
  font-weight: 600; color: var(--teks-lembut); font-size: .78rem;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
  background: var(--permukaan-2); position: sticky; top: 0;
}
table.tabel td.angka, table.tabel th.angka { text-align: right; white-space: nowrap; }
table.tabel tbody tr:hover { background: var(--permukaan-2); }
table.tabel tfoot td {
  font-weight: 680; background: var(--permukaan-2);
  border-top: 2px solid var(--garis-tegas); border-bottom: none;
}
table.tabel .baris-total td { font-weight: 680; background: var(--permukaan-2); }

.tabel-rapat th, .tabel-rapat td { padding: .45rem .6rem; }

.kosong { padding: 2.25rem 1rem; text-align: center; color: var(--teks-samar); }
.kosong strong { display: block; color: var(--teks-lembut); margin-bottom: .25rem; font-weight: 600; }

/* ------------------------------------------------------------------ formulir */

.kisi-form { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }

/*
 | Formulir isian dibaca dari atas ke bawah, satu isian per baris.
 |
 | Kisi yang menata isian dari kiri ke kanan memang hemat ruang, tetapi memaksa
 | mata melompat mendatar lalu turun — dan pada formulir panjang, urutan
 | pengisian menjadi sulit ditebak. Satu kolom membuat urutannya sama dengan
 | urutan membaca.
 */
.kisi-form-tegak { grid-template-columns: 1fr; max-width: 720px; gap: 1.15rem; }

.bidang { display: flex; flex-direction: column; gap: .35rem; }
.bidang label { font-size: .85rem; font-weight: 600; color: var(--teks); }
.bidang .petunjuk { font-size: .79rem; color: var(--teks-samar); line-height: 1.45; }

input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"],
input[type="url"], input[type="tel"], input[type="number"], input[type="search"],
select, textarea {
  width: 100%;
  min-height: 42px;
  padding: .6rem .8rem;
  border: 1px solid var(--garis);
  border-radius: 10px;
  background: var(--permukaan);
  color: var(--teks);
  font: inherit;
  font-size: .92rem;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
  -webkit-appearance: none;
  appearance: none;
}

input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) {
  border-color: var(--garis-tegas);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--aksen);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--aksen) 16%, transparent);
}

input::placeholder, textarea::placeholder { color: var(--teks-samar); }

input:disabled, select:disabled, textarea:disabled {
  background: var(--permukaan-2); color: var(--teks-samar); cursor: not-allowed;
}

/* Panah select digambar sendiri agar bentuknya sama di semua peramban. */
select {
  padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6675' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
}

[data-tema="gelap"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa6b5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Ikon kalender bawaan peramban dibuat senada, bukan dihilangkan: penggantinya
   berarti menulis ulang seluruh pemilih tanggal, dan pemilih bawaan sudah
   dikenal pengguna serta dapat diakses lewat papan ketik. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: .55;
  cursor: pointer;
  padding: .15rem;
  border-radius: 4px;
  transition: opacity .14s, background .14s;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator {
  opacity: 1;
  background: var(--permukaan-2);
}
[data-tema="gelap"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-tema="gelap"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-tema="gelap"] input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1); }

input[type="file"] {
  width: 100%;
  max-width: 100%;
  /* Nama berkas bisa panjang sekali; tanpa ini ia mendorong isian keluar
     dari kolomnya dan merusak lebar kisi di sekitarnya. */
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .9rem;
  color: var(--teks-lembut);
  padding: .35rem 0;
}
input[type="file"]::file-selector-button {
  margin-right: .6rem;
  padding: .5rem .8rem;
  border: 1px solid var(--garis-tegas);
  border-radius: 10px;
  background: var(--permukaan);
  color: var(--teks);
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .14s;
}
input[type="file"]::file-selector-button:hover { background: var(--permukaan-2); }

input[type="color"] {
  width: 52px; height: 42px; padding: 3px;
  border: 1px solid var(--garis); border-radius: 10px;
  background: var(--permukaan); cursor: pointer;
}

textarea { resize: vertical; min-height: 108px; font-family: inherit; line-height: 1.6; }

input.angka, td input.angka { text-align: right; font-variant-numeric: tabular-nums; }

.centang {
  display: flex; align-items: center; gap: .55rem;
  font-size: .9rem; color: var(--teks);
  padding: .55rem .75rem;
  border: 1px solid var(--garis); border-radius: 10px;
  background: var(--permukaan-2);
  cursor: pointer;
  transition: border-color .14s, background .14s;
}
.centang:hover { border-color: var(--garis-tegas); }
.centang input {
  width: 18px; height: 18px; min-height: 0; flex: none;
  accent-color: var(--aksen); cursor: pointer;
}
td .centang, .tabel .centang { border: 0; background: none; padding: 0; }

/* ------------------------------------------------------------------- tombol */

.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 40px;
  padding: .55rem 1rem; border-radius: 10px;
  border: 1px solid var(--garis); background: var(--permukaan); color: var(--teks);
  font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease, transform .06s ease;
}
.tombol:hover { background: var(--permukaan-2); border-color: var(--garis-tegas); text-decoration: none; }
.tombol:active { transform: translateY(1px); }
.tombol:focus-visible { outline: 2px solid var(--aksen); outline-offset: 2px; }

.tombol-utama {
  background: var(--aksen); border-color: var(--aksen); color: #fff;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--aksen) 35%, transparent);
}
.tombol-utama:hover {
  background: var(--aksen-gelap); border-color: var(--aksen-gelap);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--aksen) 35%, transparent);
}

.tombol-bahaya { color: var(--merah); border-color: color-mix(in srgb, var(--merah) 30%, var(--garis)); }
.tombol-bahaya:hover { background: var(--merah-lembut); border-color: var(--merah); }

.tombol-kecil { min-height: 34px; padding: .35rem .7rem; font-size: .82rem; }
.tombol-ikon { min-height: 40px; padding: .4rem .55rem; line-height: 1; }
.tombol-halus { border-color: transparent; background: transparent; color: var(--teks-lembut); }
.tombol-halus:hover { background: var(--permukaan-2); color: var(--teks); }

.tombol-grup { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* -------------------------------------------------------------------- badge */

.lencana {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .18rem .5rem; border-radius: 999px;
  font-size: .74rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  background: var(--permukaan-2); color: var(--teks-lembut);
}
.lencana-hijau { background: var(--hijau-lembut); color: var(--hijau); }
.lencana-merah { background: var(--merah-lembut); color: var(--merah); }
.lencana-kuning { background: var(--kuning-lembut); color: var(--kuning); }
.lencana-biru { background: var(--aksen-lembut); color: var(--aksen-gelap); }

/* Titik penanda mendampingi warna, sehingga status tetap terbaca oleh pembaca
   yang kesulitan membedakan warna. */
.titik { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* ---------------------------------------------------------------- pemberitahuan */

.pesan {
  padding: .7rem 1rem; border-radius: var(--radius); margin-bottom: 1rem;
  border: 1px solid transparent; font-size: .9rem;
  display: flex; gap: .6rem; align-items: flex-start;
}
.pesan-sukses { background: var(--hijau-lembut); border-color: color-mix(in srgb, var(--hijau) 25%, transparent); color: var(--hijau); }
.pesan-galat { background: var(--merah-lembut); border-color: color-mix(in srgb, var(--merah) 25%, transparent); color: var(--merah); }
.pesan-peringatan { background: var(--kuning-lembut); border-color: color-mix(in srgb, var(--kuning) 25%, transparent); color: var(--kuning); }
.pesan-info { background: var(--aksen-lembut); border-color: color-mix(in srgb, var(--aksen) 22%, transparent); color: var(--aksen-gelap); }

.galat-bidang { color: var(--merah); font-size: .78rem; margin-top: .15rem; }

/* ------------------------------------------------------------------- grafik */

.grafik { display: block; width: 100%; height: auto; }

.kisi-grafik { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); }

details.data-grafik { margin-top: .75rem; border-top: 1px solid var(--garis); padding-top: .6rem; }
details.data-grafik summary {
  cursor: pointer; font-size: .82rem; color: var(--teks-lembut); font-weight: 550;
  list-style: none; display: inline-flex; align-items: center; gap: .35rem;
}
details.data-grafik summary::-webkit-details-marker { display: none; }
details.data-grafik summary::before { content: "▸"; transition: transform .15s; display: inline-block; }
details.data-grafik[open] summary::before { transform: rotate(90deg); }
details.data-grafik .tabel-bungkus { margin-top: .6rem; max-height: 280px; overflow-y: auto; }

/* -------------------------------------------------------------------- rasio */

.kisi-rasio { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.kartu-rasio { border: 1px solid var(--garis); border-radius: var(--radius); padding: .9rem 1rem; background: var(--permukaan); }
.kartu-rasio .atas { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; margin-bottom: .35rem; }
.kartu-rasio .nama-rasio { font-size: .85rem; font-weight: 600; color: var(--teks-lembut); }
.kartu-rasio .angka-rasio { font-size: 1.5rem; font-weight: 680; letter-spacing: -.02em; }
.kartu-rasio .arti { font-size: .8rem; color: var(--teks-samar); margin-top: .35rem; line-height: 1.45; }
.kartu-rasio .kaki { display: flex; justify-content: space-between; align-items: flex-end; gap: .75rem; margin-top: .5rem; }
.kartu-rasio .kaki .grafik { width: 120px; flex: none; }
.kartu-rasio .kaki > span:first-child { white-space: nowrap; }

.bar-serapan { height: 8px; border-radius: 999px; background: var(--permukaan-2); overflow: hidden; position: relative; }
.bar-serapan span { display: block; height: 100%; border-radius: 999px; background: var(--aksen); }
.bar-serapan .penanda-waktu { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--teks-lembut); border-radius: 2px; }

/* --------------------------------------------------------------- editor markdown */

.editor-markdown { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.editor-markdown textarea { min-height: 320px; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: .85rem; line-height: 1.6; }
.pratinjau-markdown {
  border: 1px solid var(--garis); border-radius: var(--radius-kecil);
  padding: .85rem 1rem; background: var(--permukaan-2); overflow-y: auto; min-height: 320px; max-height: 520px;
}
.alat-markdown { display: flex; gap: .25rem; flex-wrap: wrap; margin-bottom: .5rem; }

.prosa h1, .prosa h2, .prosa h3 { margin-top: 1.1rem; }
.prosa h1:first-child, .prosa h2:first-child, .prosa h3:first-child { margin-top: 0; }
.prosa ul, .prosa ol { padding-left: 1.35rem; margin: 0 0 .75rem; }
.prosa li { margin-bottom: .2rem; }
.prosa blockquote {
  margin: 0 0 .75rem; padding: .35rem 0 .35rem .9rem;
  border-left: 3px solid var(--garis-tegas); color: var(--teks-lembut);
}
.prosa code {
  background: var(--permukaan-2); padding: .1rem .3rem; border-radius: 4px;
  font-family: "SFMono-Regular", Consolas, monospace; font-size: .85em;
}
.prosa pre { background: var(--permukaan-2); padding: .75rem; border-radius: var(--radius-kecil); overflow-x: auto; }
.prosa table { width: 100%; border-collapse: collapse; font-size: .87rem; margin-bottom: .85rem; }
.prosa th, .prosa td { border: 1px solid var(--garis); padding: .4rem .6rem; }
.prosa th { background: var(--permukaan-2); }

/* ------------------------------------------------------------------ halaman masuk */

/*
 | Halaman masuk dan verifikasi dua langkah.
 |
 | Latar selebar layar dipisahkan dari kartunya. Latar boleh apa saja — warna,
 | gradasi, bahkan foto — sementara kartunya tetap permukaan tenang dengan
 | kontras yang terjamin. Tanpa pemisahan itu, satu gambar yang ramai sudah
 | cukup membuat formulirnya tak terbaca.
 */
.panggung-masuk {
  min-height: 100vh;
  min-height: 100dvh;   /* bilah alamat ponsel tidak lagi memotong bagian bawah */
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: var(--latar);
}

.kotak-masuk { width: 100%; max-width: 400px; }

.kartu-masuk {
  background: var(--permukaan);
  border-radius: 16px;
  padding: 2rem 1.75rem 1.75rem;
  box-shadow: 0 18px 44px rgba(11, 16, 32, .22), 0 2px 6px rgba(11, 16, 32, .10);
}

/* Di dalam kartu masuk, kartu bersarang hanya menambah kotak di dalam kotak. */
.kartu-masuk .kartu {
  background: none; border: 0; box-shadow: none; margin: 0;
}
.kartu-masuk .kartu-isi { padding: 0; }

.kepala-masuk { text-align: center; margin-bottom: 1.4rem; }
.kepala-masuk .merek-ikon { width: 46px; height: 46px; font-size: 1.05rem; margin: 0 auto .7rem; border-radius: 12px; }
.merek-logo-masuk { display: block; height: 44px; width: auto; margin: 0 auto .8rem; }
.kepala-masuk h1 { font-size: 1.32rem; margin-bottom: .15rem; letter-spacing: -.02em; }
.kepala-masuk p { color: var(--teks-lembut); font-size: .875rem; margin: 0; }

/*
 | Tautan kaki berada di atas latar yang warnanya tidak diketahui, jadi ia
 | diberi permukaan tipis sendiri alih-alih mengandalkan warna teks — putih di
 | atas latar terang sama tak terbacanya dengan gelap di atas latar gelap.
 */
.kaki-masuk { text-align: center; margin: 1rem 0 0; font-size: .84rem; }
.kaki-masuk a {
  display: inline-block;
  padding: .35rem .8rem;
  border-radius: 999px;
  color: #fff;
  background: rgba(15, 20, 35, .38);
  backdrop-filter: blur(6px);
}
.kaki-masuk a:hover { background: rgba(15, 20, 35, .55); text-decoration: none; }

.kotak-masuk .bidang label { font-size: .855rem; }
.kotak-masuk .tombol { min-height: 44px; }

/* Di dalam kartu masuk, centang tampil polos: permukaan berkotak di sekeliling
   satu baris "ingat saya" membuatnya terbaca sebagai isian ketiga. */
.kotak-masuk .centang {
  background: none; border: 0; padding: 0 .1rem; min-height: 0;
  font-size: .855rem;
}

.pemisah { display: flex; align-items: center; gap: .75rem; margin: 1.1rem 0; color: var(--teks-samar); font-size: .8rem; }
.pemisah::before, .pemisah::after { content: ""; flex: 1; height: 1px; background: var(--garis); }

.tombol-google {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; min-height: 44px; font-weight: 600;
}
.tombol-google:hover { text-decoration: none; }

.catatan-masuk {
  margin: 1.15rem 0 0;
  text-align: center;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--teks-samar);
}
.catatan-masuk strong { color: var(--teks-lembut); font-weight: 620; }

/* Tombol yang tampil sebagai tautan: untuk aksi sekunder yang harus berupa
   form (keluar) tetapi tidak pantas menyaingi tombol utama secara visual. */
.tombol-teks {
  background: none; border: 0; padding: .3rem;
  font: inherit; font-size: .84rem; font-weight: 600;
  color: var(--teks-lembut); cursor: pointer;
}
.tombol-teks:hover { color: var(--teks); text-decoration: underline; }

/* ------------------------------------------------------------------ dua faktor */

.kotak-rahasia {
  font-family: "SFMono-Regular", Consolas, monospace; font-size: 1rem; letter-spacing: .12em;
  background: var(--permukaan-2); border: 1px dashed var(--garis-tegas);
  padding: .7rem; border-radius: var(--radius-kecil); text-align: center; word-break: break-all;
}
.qr-bungkus { display: grid; place-items: center; padding: 1rem; background: #fff; border-radius: var(--radius); border: 1px solid var(--garis); }
.daftar-kode { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .5rem; }
.daftar-kode code {
  display: block; text-align: center; padding: .5rem;
  background: var(--permukaan-2); border-radius: var(--radius-kecil);
  font-family: "SFMono-Regular", Consolas, monospace; font-size: .9rem; letter-spacing: .05em;
}
.input-kode {
  text-align: center;
  font-size: 1.3rem !important;
  letter-spacing: .3em;
  /* Padding kiri mengimbangi jarak antarhuruf yang hanya menempel di kanan
     tiap karakter — tanpa itu, teks yang "di tengah" tampak bergeser ke kanan. */
  padding-left: calc(.3em + .75rem) !important;
  font-family: "SFMono-Regular", Consolas, monospace;
  min-height: 52px !important;
}
.input-kode::placeholder { color: var(--teks-samar); opacity: .5; }

/* ---------------------------------------------------------------------- lain */

.tab-bar { display: flex; gap: .25rem; border-bottom: 1px solid var(--garis); margin-bottom: 1.1rem; overflow-x: auto; }
.tab-bar a {
  padding: .55rem .85rem; color: var(--teks-lembut); font-weight: 550; font-size: .9rem;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.tab-bar a:hover { color: var(--teks); text-decoration: none; }
.tab-bar a.aktif { color: var(--aksen); border-bottom-color: var(--aksen); font-weight: 620; }

.dua-kolom { display: grid; gap: 1.1rem; grid-template-columns: 1fr 1fr; }
.tiga-kolom { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.kolom-samping { display: grid; gap: 1.1rem; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); align-items: start; }

.daftar-ringkas { list-style: none; margin: 0; padding: 0; }
.daftar-ringkas li {
  display: flex; justify-content: space-between; gap: .75rem;
  padding: .5rem 0; border-bottom: 1px solid var(--garis); font-size: .88rem;
}
.daftar-ringkas li:last-child { border-bottom: none; }
.daftar-ringkas .nilai { font-weight: 600; font-variant-numeric: tabular-nums; }

.pagination { display: flex; gap: .25rem; flex-wrap: wrap; padding: .85rem 1.1rem; align-items: center; }
.pagination a, .pagination span {
  padding: .3rem .6rem; border-radius: var(--radius-kecil); font-size: .85rem;
  border: 1px solid var(--garis); color: var(--teks-lembut);
}
.pagination a:hover { background: var(--permukaan-2); text-decoration: none; }
.pagination .aktif, .pagination [aria-current="page"] span { background: var(--aksen); border-color: var(--aksen); color: #fff; }

.baris-inline { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.dorong-kanan { margin-left: auto; }
.samar { color: var(--teks-samar); }
.lembut { color: var(--teks-lembut); }
.kecil { font-size: .82rem; }
.tebal { font-weight: 650; }
.tengah { text-align: center; }
.kanan { text-align: right; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; }
.sembunyi { display: none !important; }
.tampil-ponsel { display: none; }

.baris-form-sebaris { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); align-items: end; }

/* ------------------------------------------------------------------ responsif */

@media (max-width: 980px) {
  .kolom-samping, .dua-kolom, .editor-markdown { grid-template-columns: 1fr; }
  .kisi-grafik { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body { font-size: 14px; }
  .pembungkus { padding: 0 .9rem; }

  .pemilih-periode .label-periode { min-width: 0; font-size: .78rem; white-space: nowrap; padding: .3rem .4rem; }
  .navbar-isi { gap: .4rem; }
  .navbar-kanan { gap: .3rem; margin-left: auto; }
  .sembunyi-ponsel { display: none !important; }
  .tampil-ponsel { display: block; }
  .kpi .nilai-kpi { font-size: 1.35rem; }
  table.tabel th, table.tabel td { padding: .5rem .55rem; }
}

@media print {
  .navbar, .tombol, .tab-bar, .pesan, form { display: none !important; }
  body { background: #fff; }
  .kartu { border: 1px solid #ddd; box-shadow: none; break-inside: avoid; }
}

/* ==========================================================================
   CV Online — tambahan gaya
   --------------------------------------------------------------------------
   Bagian di bawah ini melengkapi sistem dasar di atas dengan hal-hal yang
   khas CV: kartu profil kaca di halaman publik, lini masa kegiatan, dialog
   kontak, dan penataan dua kolom halaman publik.
   ========================================================================== */

/* --------------------------------------------------------------- halaman publik */

.publik {
  --lebar-kartu: 340px;
  --tinggi-header: 250px;
  background: var(--latar);
}

/*
 | Panggung: bidang latar lebar penuh berada di lapisan bawah sebagai elemen
 | terpisah, bukan sebagai latar belakang pembungkus isi. Dengan begitu kartu
 | profil dapat naik ke dalam bidang itu tanpa ikut terpotong olehnya, dan
 | tinggi bidang dapat diatur admin tanpa menyentuh tata letak isi.
 */
.publik-panggung { position: relative; }

.publik-latar {
  position: absolute;
  inset: 0 0 auto 0;
  min-height: var(--tinggi-header);
  background: var(--permukaan-2);
  border-bottom: 1px solid var(--garis);
  z-index: 0;
}

.publik-isi {
  position: relative;
  z-index: 1;
  max-width: var(--lebar-maks);
  margin: 0 auto;
  padding: 3.25rem 1rem 4rem;
  display: grid;
  grid-template-columns: var(--lebar-kartu) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

/*
 | Kartu profil menempel saat halaman digulir. Ini bukan sekadar hiasan:
 | tombol "Get In Touch" adalah satu-satunya jalan menghubungi pemilik, dan
 | pengunjung paling ingin menekannya justru setelah membaca jauh ke bawah.
 |
 | Jarak menempelnya dihitung dari tinggi navbar, bukan dari angka bebas:
 | navbar juga menempel, jadi offset yang lebih kecil membuat bagian atas kartu
 | tersembunyi di baliknya begitu halaman digulir.
 */
.kolom-kartu { position: sticky; top: calc(var(--tinggi-navbar) + 1rem); }
.kolom-isi { min-width: 0; }

/*
 | Kartu selalu menempel — tingginya yang mengalah, bukan sifat menempelnya.
 |
 | Elemen sticky dibatasi kotak isi induknya. Di ujung gulungan, tepi bawah
 | kolom isi berhenti kira-kira setinggi footer di atas tepi bawah jendela;
 | bila kartu lebih tinggi daripada ruang yang tersisa di atas garis itu,
 | peramban berhenti menahannya dan justru mendorongnya ke atas — sebagian
 | kartu masuk ke balik navbar dan sudut atasnya terpotong.
 |
 | Versi sebelumnya menjawabnya dengan mematikan sifat menempel pada jendela
 | pendek. Itu menukar satu cacat dengan cacat yang lebih besar: di layar
 | laptop kartunya tidak pernah mengambang sama sekali, padahal di monitor
 | besar ia bekerja. Perilaku yang berbeda-beda menurut ukuran layar justru
 | terbaca sebagai kerusakan.
 |
 | Jawaban yang dipakai sekarang menghilangkan sebabnya: tinggi kartu dibatasi
 | oleh tinggi jendela, sehingga ia tidak pernah lebih tinggi daripada ruang
 | yang tersedia dan tidak pernah terdorong. Di layar tinggi rumusnya tidak
 | berpengaruh apa pun — kartu memakai proporsi aslinya; makin pendek
 | jendelanya, makin sedikit bagian foto yang tampak, sementara nama,
 | statistik, dan tombolnya tetap utuh karena berada di dasar kartu.
 |
 | Angka 21rem adalah jumlah ruang yang terpakai di luar kartu: jarak
 | menempel, daftar tautan di bawahnya, padding halaman, dan footer.
 */
@media (min-width: 901px) {
  .kartu-profil {
    max-height: calc(100vh - 21rem);
    min-height: 16rem;
  }
}

/* ------------------------------------------------------------- bilah tab */

/*
 | Tab diletakkan rata bawah pada bidang latar, sehingga garis bawahnya
 | berimpit dengan tepi bawah header dan keduanya terbaca sebagai satu bagian.
 */
/*
 | Bidang setinggi header yang mendorong bilah tab ke tepi bawahnya. Tingginya
 | ada di sini, bukan pada bilah tabnya sendiri.
 |
 | Sebelumnya tinggi itu dipasang langsung pada elemen yang menggulung
 | mendatar, dan itu menimbulkan dua masalah sekaligus: kotak gulung setinggi
 | ±200 piksel membentang tak terlihat di hampir seluruh header, dan menurut
 | spesifikasi CSS `overflow-x: auto` memaksa sumbu satunya menjadi `auto`
 | juga — sehingga kotak itu punya sisa gulungan tegak dua piksel (setinggi
 | garis bawahnya). Akibatnya, saat kursor berada di mana pun pada bidang
 | header, putaran roda pertama menggulung kotak itu dua piksel alih-alih
 | menggulung halaman: bilah tab tampak bergeser turun sendiri.
 */
.tab-bidang {
  display: flex;
  align-items: flex-end;
  gap: .25rem;
  min-height: calc(var(--tinggi-header) - 3.25rem - 1px);
  margin-bottom: 1.3rem;
  /*
   | Garis bawahnya ada di sini, bukan pada bilah tab yang menggulung.
   | Pada elemen yang menggulung, garis itu ikut hilang begitu isinya
   | tergeser, dan garis bawah tab aktif — yang ditarik naik agar berimpit
   | dengannya — terpotong oleh batas gulungan.
   */
  border-bottom: 1px solid var(--garis-tegas);
}

.tab-publik {
  display: flex;
  gap: 1.6rem;
  align-items: flex-end;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;   /* menutup sisa gulungan tegak dua piksel itu */
  scrollbar-width: none;
}

.tab-publik::-webkit-scrollbar { display: none; }

/*
 | Tombol geser bilah tab.
 |
 | Muncul hanya bila deretan tabnya memang lebih lebar daripada ruangnya, dan
 | masing-masing padam begitu sisi itu tercapai — tombol yang selalu ada tetapi
 | kadang tidak melakukan apa-apa lebih membingungkan daripada tombol yang
 | hilang. Di layar sentuh bilahnya tetap dapat digeser dengan jari; tombol ini
 | untuk tetikus, yang tidak punya cara menggeser mendatar.
 */
.geser-tab {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: .15rem;
  padding: 0;
  border: 1px solid var(--garis);
  border-radius: 50%;
  background: var(--permukaan);
  color: var(--teks-lembut);
  cursor: pointer;
  transition: opacity .14s ease, border-color .14s ease;
}

.geser-tab:hover { border-color: var(--aksen); color: var(--aksen); }
.geser-tab:focus-visible { outline: 2px solid var(--aksen); outline-offset: 2px; }
.geser-tab[hidden] { display: none; }
.geser-tab:disabled { opacity: .3; cursor: default; border-color: var(--garis); color: var(--teks-samar); }

/* Di atas latar gelap, tombolnya ikut menjadi tembus pandang agar tidak
   tampak seperti dua kancing putih yang menempel di header. */
.header-gelap .geser-tab {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
}
.header-gelap .geser-tab:hover { background: rgba(255, 255, 255, .22); border-color: #fff; }
.header-gelap .geser-tab:disabled { background: rgba(255, 255, 255, .06); }

/*
 | Garis tab aktif digambar sebagai bayangan ke dalam, bukan sebagai border
 | yang ditarik naik dengan margin negatif. Bayangan ke dalam berada di dalam
 | kotak padding, jadi tidak pernah dipotong batas gulungan bilahnya.
 */
.tab-publik a {
  padding: .45rem .1rem .6rem;
  white-space: nowrap;
  color: var(--teks-lembut);
  font-size: 1.02rem;
}

.tab-publik a:hover { color: var(--teks); text-decoration: none; }

.tab-publik a.aktif {
  color: var(--aksen);
  font-weight: 600;
  box-shadow: inset 0 -3px 0 var(--aksen);
}

/* Di atas latar gelap, seluruh bilah tab dibalik menjadi putih. */
/*
 | Di atas latar gelap, warna aksen apa adanya bisa terlalu redup. Yang dipakai
 | adalah versi terangnya — tetap warna yang sama, hanya cukup kontras untuk
 | dibaca di sana.
 */
.header-gelap .tab-bidang { border-bottom-color: rgba(255, 255, 255, .45); }
.header-gelap .tab-publik a { color: rgba(255, 255, 255, .76); }
.header-gelap .tab-publik a:hover { color: #fff; }
.header-gelap .tab-publik a.aktif {
  color: color-mix(in srgb, var(--aksen) 55%, #fff);
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--aksen) 55%, #fff);
}

@media (max-width: 900px) {
  .publik-isi { grid-template-columns: 1fr; gap: 1.4rem; padding-top: 2rem; }
  .kolom-kartu { position: static; max-width: 420px; margin: 0 auto; width: 100%; }
  .publik-latar { min-height: calc(var(--tinggi-header) * .6); }

  /*
   | Pada layar sempit bilah tab jatuh di bawah kartu — sudah keluar dari
   | bidang latar — sehingga warnanya kembali mengikuti tema halaman.
   */
  .tab-bidang { min-height: 0; }
  .tab-publik { gap: 1.1rem; }

  /* Kartu sedikit lebih pendek di layar sempit agar isi CV cepat terjangkau. */
  .kartu-profil { aspect-ratio: 3 / 4.15; }
  .header-gelap .tab-bidang { border-bottom-color: var(--garis-tegas); }
  .header-gelap .tab-publik a { color: var(--teks-lembut); }
  .header-gelap .tab-publik a.aktif {
    color: var(--aksen);
    box-shadow: inset 0 -3px 0 var(--aksen);
  }
}

/* ------------------------------------------------------------- kartu profil */

.kartu-profil {
  position: relative;
  /* Lebar dikunci pada lebar kolomnya. Tanpa ini, membatasi tinggi kartu akan
     ikut menyusutkan lebarnya demi mempertahankan rasio — dan kartu yang
     menyempit membuat nama serta tombolnya patah ke beberapa baris. */
  width: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: #14181f;
  box-shadow: 0 18px 40px rgba(16, 24, 40, .18), 0 2px 6px rgba(16, 24, 40, .10);
  aspect-ratio: 3 / 4.6;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  isolation: isolate;
}

.kartu-profil-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Tanpa foto, kartu tetap tampil utuh dengan inisial besar di tengah. */
.kartu-profil-kosong {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, #253044, #121820);
  font-size: 5rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .22);
  letter-spacing: .05em;
}

/*
 | Gradasi gelap menjaga teks tetap terbaca di atas foto apa pun. Dibuat
 | bertahap, bukan satu blok pekat, supaya wajah pada foto tidak ikut tertutup.
 */
.kartu-profil-tirai {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 34%,
    rgba(0, 0, 0, .38) 56%,
    rgba(0, 0, 0, .78) 78%,
    rgba(0, 0, 0, .92) 100%
  );
}

.kartu-profil-isi {
  position: relative;
  z-index: 2;
  padding: 1.1rem 1.15rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.kartu-profil-nama {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.lencana-verifikasi {
  flex: none;
  width: 20px;
  height: 20px;
  display: inline-block;
}

.kartu-profil-tagline {
  margin: -.35rem 0 0;
  font-size: .93rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, .84);
}

.kartu-profil-statistik {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  text-align: center;
}

.kartu-profil-statistik > div + div {
  border-left: 1px solid rgba(255, 255, 255, .22);
}

.kartu-profil-statistik .nilai {
  display: block;
  font-size: 1.16rem;
  font-weight: 700;
  line-height: 1.25;
}

.kartu-profil-statistik .label {
  display: block;
  font-size: .74rem;
  color: rgba(255, 255, 255, .72);
  margin-top: .1rem;
}

.kartu-profil-aksi { display: flex; gap: .55rem; align-items: stretch; }

/*
 | Tombol pil putih. Diberi warna sendiri, bukan mewarisi .tombol-utama,
 | karena latarnya adalah foto: kontras terhadap foto sembarang hanya dapat
 | dijamin oleh putih pekat.
 */
.tombol-pil {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .78rem 1rem;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #14181f;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}

.tombol-pil:hover { text-decoration: none; box-shadow: 0 6px 16px rgba(0, 0, 0, .28); }
.tombol-pil:active { transform: translateY(1px); }

.tombol-bulat {
  flex: none;
  width: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.tombol-bulat:hover { background: rgba(255, 255, 255, .24); text-decoration: none; }

.kartu-tautan {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  margin-top: .9rem;
  font-size: .85rem;
}

.kartu-tautan a { color: var(--teks-lembut); }

/* ------------------------------------------------------------ bagian publik */

.bagian {
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem;
  margin-bottom: 1.1rem;
  background: var(--permukaan);
  border: 1px solid var(--garis);
  scroll-margin-top: calc(var(--tinggi-navbar) + 1rem);
}

.bagian > h2 {
  margin: 0 0 1.1rem;
  font-size: 1.12rem;
  display: flex;
  align-items: center;
  gap: .55rem;
}

.bagian > h2 .ikon-bagian { color: var(--aksen); font-size: 1rem; }

/* Bagian berlatar gambar gelap: seluruh teks di dalamnya perlu dibalik. */
.bagian-gelap, .bagian-gelap h2, .bagian-gelap h3, .bagian-gelap .prosa { color: #fff; }
.bagian-gelap .lembut, .bagian-gelap .samar, .bagian-gelap .keterangan { color: rgba(255, 255, 255, .78); }
.bagian-gelap .entri { border-color: rgba(255, 255, 255, .22); }
.bagian-gelap .lencana { background: rgba(255, 255, 255, .16); color: #fff; }

/* --------------------------------------------------------------- daftar entri */

.entri {
  padding: .95rem 0;
  border-top: 1px solid var(--garis);
}

.entri:first-of-type { border-top: 0; padding-top: 0; }

/*
 | Kepala entri: judul, lencana status, lalu rentang waktu di ujung kanan.
 |
 | Judulnya diberi `flex: 1 1 auto` dengan `min-width: 0` supaya ia menyusut
 | dan membungkus barisnya sendiri alih-alih mendorong lencana dan tanggal
 | keluar dari baris. Tanpa keduanya, judul panjang memakan seluruh baris
 | pertama, lencana terlempar ke baris kedua, dan tanggal — yang didorong ke
 | kanan oleh margin otomatis — ikut mendarat di baris itu, jauh terpisah dari
 | lencananya. Dua keterangan yang tak berhubungan pada satu baris itulah yang
 | terbaca sebagai tumpang tindih.
 */
.entri-kepala {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: .9rem;
  row-gap: .25rem;
}

/* Judul dan lencana berbagi kolom pertama dan membungkus di dalamnya. */
.entri-judul-blok {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .5rem;
  min-width: 0;
}

.entri-judul {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  min-width: 0;
  overflow-wrap: anywhere;   /* alamat atau kode panjang tanpa spasi */
}

/*
 | Di layar sempit tidak ada ruang untuk menaruh tanggal di ujung kanan tanpa
 | menghimpit judul. Ia turun ke barisnya sendiri, rata kiri sejajar dengan
 | judul — bukan rata kanan, yang akan membuatnya tampak mengambang sendirian.
 */
/*
 | Di layar sempit tidak ada ruang untuk menaruh tanggal di ujung kanan tanpa
 | menghimpit judul. Kolomnya dihapus dan tanggal turun ke barisnya sendiri,
 | rata kiri sejajar dengan judul — bukan rata kanan, yang akan membuatnya
 | tampak mengambang sendirian.
 */
@media (max-width: 640px) {
  .entri-kepala { grid-template-columns: minmax(0, 1fr); }

  .entri-kepala .entri-tahun {
    grid-column: 1;
    justify-self: start;
    margin-left: 0;
    white-space: normal;
  }
}

.entri-meta {
  margin: .18rem 0 0;
  font-size: .88rem;
  color: var(--teks-lembut);
}

.entri-tahun {
  grid-column: 2;
  justify-self: end;
  margin-left: auto;
  font-size: .84rem;
  color: var(--teks-samar);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.entri .prosa { margin-top: .5rem; font-size: .92rem; }
.entri .prosa p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ lini masa */

.lini-masa { position: relative; padding-left: 1.4rem; }

.lini-masa::before {
  content: '';
  position: absolute;
  left: 5px;
  top: .4rem;
  bottom: .4rem;
  width: 2px;
  background: var(--garis);
}

.lini-masa .entri { border-top: 0; position: relative; padding: .8rem 0; }

.lini-masa .entri::before {
  content: '';
  position: absolute;
  left: -1.4rem;
  top: 1.15rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--permukaan);
  border: 2px solid var(--garis-tegas);
}

.lini-masa .entri.terjadwal::before { border-color: var(--kuning); }
.lini-masa .entri.berjalan::before { border-color: var(--aksen); background: var(--aksen); }
.lini-masa .entri.terlaksana::before { border-color: var(--hijau); background: var(--hijau); }

.galeri {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .5rem;
  margin-top: .7rem;
}

.galeri img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-kecil);
  border: 1px solid var(--garis);
  background: var(--permukaan-2);
}

/* ---------------------------------------------------------------- pencarian */

.kotak-cari {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.1rem;
}

.kotak-cari input[type="search"] { flex: 1; }

.hasil-cari .entri-judul mark {
  background: var(--kuning-lembut);
  color: inherit;
  padding: 0 .12em;
  border-radius: 3px;
}

/* -------------------------------------------------------------------- modal */

.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(9, 13, 20, .58);
  display: grid;
  place-items: center;
  padding: 1rem;
  overflow-y: auto;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.modal[hidden] { display: none; }

.modal-kotak {
  width: min(560px, 100%);
  background: var(--permukaan);
  color: var(--teks);
  border-radius: 16px;
  box-shadow: var(--bayang-tinggi);
  overflow: hidden;
}

.modal-kepala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--garis);
}

.modal-kepala h2 { margin: 0; font-size: 1.05rem; }
.modal-isi { padding: 1.2rem; }
.modal-kaki {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  padding: .9rem 1.2rem;
  border-top: 1px solid var(--garis);
  background: var(--permukaan-2);
}

body.terkunci { overflow: hidden; }

/* Kolom umpan untuk bot: tersembunyi dari mata dan dari pembaca layar. */
.umpan { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------ penyesuaian dashboard */

.bidang-mati { opacity: .5; }

/* Isian yang butuh lebar penuh di dalam kisi formulir otomatis. */
.bidang-penuh { grid-column: 1 / -1; }

.baris-aksi { display: flex; gap: .4rem; justify-content: flex-end; }
.form-sunting { background: var(--permukaan-2); }

.kisi-modul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: .75rem;
}

.ubin-modul {
  display: block;
  padding: .9rem 1rem;
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  background: var(--permukaan);
  color: var(--teks);
}

.ubin-modul:hover { border-color: var(--aksen); text-decoration: none; box-shadow: var(--bayang); }
.ubin-modul .nilai { display: block; font-size: 1.55rem; font-weight: 700; line-height: 1.15; }
.ubin-modul .label { display: block; font-size: .84rem; color: var(--teks-lembut); margin-top: .1rem; }

/*
 | Sepasang tombol naik-turun yang dibaca sebagai satu kendali: dua formulir
 | terpisah — masing-masing perlu tokennya sendiri — tetapi dirapatkan menjadi
 | satu kotak bersudut, sehingga tidak tampak seperti dua tombol yang kebetulan
 | bersebelahan.
 */
.kelompok-urut { display: flex; }
.kelompok-urut form { display: contents; }

.kelompok-urut .tombol {
  border-radius: 0;
  padding-left: .45rem;
  padding-right: .45rem;
}
.kelompok-urut form:first-child .tombol { border-radius: var(--radius-kecil) 0 0 var(--radius-kecil); }
.kelompok-urut form:last-child .tombol { border-radius: 0 var(--radius-kecil) var(--radius-kecil) 0; margin-left: -1px; }
.kelompok-urut .tombol:hover:not(:disabled) { position: relative; z-index: 1; }

/* Tombol mati tetap terlihat, hanya jelas tak dapat ditekan: menyembunyikannya
   membuat deretan tombol berubah panjang dari baris ke baris. */
.tombol:disabled { opacity: .38; cursor: default; }
.tombol:disabled:hover { background: var(--permukaan); border-color: var(--garis-tegas); }

.baris-bagian {
  border: 1px solid var(--garis);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  margin-bottom: .7rem;
  background: var(--permukaan);
}

.pratinjau-latar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border-radius: var(--radius-kecil);
  border: 1px solid var(--garis);
  background: var(--permukaan-2);
}

/* Keterangan di dalam petak. Latar yang dipratinjau bisa gelap atau terang,
   jadi teks abu-abu netral diberi halo tipis agar terbaca di atas keduanya. */
.pratinjau-latar span {
  font-size: .7rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(115, 122, 133, .95);
  text-shadow: 0 0 3px rgba(255, 255, 255, .55), 0 0 6px rgba(0, 0, 0, .25);
}

@media print {
  .navbar, .tab-publik, .kartu-profil-aksi, .modal, .tombol { display: none !important; }
  /* Saat dicetak seluruh tab ditampilkan — kertas tidak punya tab. */
  .panel-tab.sembunyi { display: block !important; }
  .publik-latar { display: none !important; }
  .publik-isi { padding-top: 0 !important; }
  .publik-isi { display: block; }
  .bagian { break-inside: avoid; border: 0; padding: 0 0 1rem; }
}

/* ---------------------------------------------------- pratinjau latar header */

.pratinjau-header {
  min-height: 110px;
  border-radius: var(--radius);
  border: 1px solid var(--garis);
  background: var(--permukaan-2);
  display: grid;
  place-items: center;
  font-size: .85rem;
  color: var(--teks-samar);
  padding: 1rem;
  text-align: center;
}

.pratinjau-header .pratinjau-teks-terang {
  color: rgba(255, 255, 255, .82);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

/*
 | Pratinjau halaman masuk: latar sungguhan dengan kartu formulir yang
 | disederhanakan menjadi tiga balok. Menampilkan formulir yang benar-benar
 | dapat diisi di dalam halaman pengaturan hanya akan mengundang orang
 | mengisinya; yang perlu dinilai di sini adalah latarnya.
 */
.pratinjau-masuk {
  min-height: 170px;
  border-radius: var(--radius);
  border: 1px solid var(--garis);
  background: var(--permukaan-2);
  display: grid;
  place-items: center;
  padding: 1.2rem;
}

.pratinjau-masuk-kartu {
  width: min(210px, 70%);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .9rem;
  border-radius: 10px;
  background: var(--permukaan);
  box-shadow: 0 10px 26px rgba(11, 16, 32, .25);
}
.pratinjau-masuk-kartu span { height: 9px; border-radius: 4px; background: var(--permukaan-2); }
.pratinjau-masuk-kartu span:first-child { width: 55%; background: var(--garis-tegas); }
.pratinjau-masuk-kartu span:last-child { background: var(--aksen); }

/* ==========================================================================
   Kartu input — dibedakan dari kartu daftar, terlipat secara bawaan
   --------------------------------------------------------------------------
   Pada halaman modul, formulir tambah selalu berada di atas daftar isi. Bila
   keduanya berupa kartu putih yang sama, formulir kosong itu merebut perhatian
   dari isi yang justru ingin dibaca. Kartu input diberi kepala berwarna dan
   dilipat secara bawaan: ia hadir sebagai tombol "tambah", bukan sebagai
   formulir yang menunggu diisi.

   Dibangun dari <details>/<summary>, bukan JavaScript — terbuka lewat papan
   ketik, terbaca pembaca layar, dan tetap berfungsi bila skrip gagal dimuat.
   ========================================================================== */

.kartu-input {
  border-radius: 14px;
  margin-bottom: 1.4rem;
  overflow: hidden;
  border: 1px solid transparent;
  background: var(--permukaan);
  box-shadow: var(--bayang);
}

.kartu-input > summary {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .95rem 1.1rem;
  cursor: pointer;
  list-style: none;
  color: #fff;
  /* Seluruh gradasi diturunkan dari warna aksen: bila admin memilih merah,
     kepala kartu ikut merah alih-alih tetap ungu seperti warna bawaan. */
  background: linear-gradient(100deg,
              color-mix(in srgb, var(--aksen) 62%, #0b1020) 0%,
              var(--aksen) 58%,
              color-mix(in srgb, var(--aksen) 72%, #fff) 100%);
  transition: filter .14s ease;
}

.kartu-input > summary::-webkit-details-marker { display: none; }
.kartu-input > summary:hover { filter: brightness(1.08); }
.kartu-input > summary:focus-visible { outline: 2px solid var(--aksen); outline-offset: -2px; }

.kartu-input-ikon {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  font-size: 1.2rem; font-weight: 400; line-height: 1;
  transition: transform .18s ease;
}

.kartu-input[open] .kartu-input-ikon { transform: rotate(45deg); }

.kartu-input-teks { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.kartu-input-teks strong { font-size: 1rem; font-weight: 650; }
.kartu-input-teks span { font-size: .83rem; color: rgba(255, 255, 255, .78); }

.kartu-input-lencana {
  margin-left: auto;
  flex: none;
  padding: .25rem .7rem;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .9);
}

.kartu-input-panah {
  flex: none;
  font-size: 1.1rem;
  line-height: 1;
  color: rgba(255, 255, 255, .8);
  transition: transform .18s ease;
}

.kartu-input[open] .kartu-input-panah { transform: rotate(180deg); }

.kartu-input-isi {
  padding: 1.35rem 1.1rem 1.1rem;
  border: 1px solid var(--garis);
  border-top: 0;
  border-radius: 0 0 14px 14px;
}

@media (max-width: 620px) {
  .kartu-input-lencana { display: none; }
}

/* ------------------------------------------------------- editor Markdown */

.editor-md {
  border: 1px solid var(--garis);
  border-radius: 10px;
  overflow: hidden;
  background: var(--permukaan);
}

.editor-md:focus-within { border-color: var(--aksen); box-shadow: 0 0 0 3px color-mix(in srgb, var(--aksen) 16%, transparent); }

.editor-md-alat {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
  padding: .4rem .45rem;
  border-bottom: 1px solid var(--garis);
  background: var(--permukaan-2);
}

.editor-md-alat button {
  min-height: 30px;
  padding: .25rem .55rem;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--teks-lembut);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s;
}

.editor-md-alat button:hover { background: var(--permukaan); color: var(--teks); }
.editor-md-alat button[aria-pressed="true"] { background: var(--aksen-lembut); color: var(--aksen-gelap); }
.editor-md-alat .pemisah { width: 1px; margin: .2rem .3rem; background: var(--garis); }
.editor-md-alat .dorong-kanan { margin-left: auto; }

.editor-md textarea {
  border: 0;
  border-radius: 0;
  min-height: 150px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: .87rem;
}
.editor-md textarea:focus { box-shadow: none; }

.editor-md-pratinjau {
  padding: .9rem 1rem;
  min-height: 150px;
  background: var(--permukaan);
  font-size: .92rem;
}
.editor-md-pratinjau > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------- ikon */

/*
 | Ikon SVG sebaris mewarisi warna dan ukuran teks di sekitarnya. Penyelarasan
 | vertikalnya diatur di sini sekali, bukan di tiap tempat pemakaian.
 */
.ikon {
  flex: none;
  vertical-align: -.18em;
  stroke: currentColor;
}

.ikon-bagian .ikon { color: var(--aksen); }

/* ------------------------------------------------------------------ merek */

.merek-logo {
  height: 30px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: block;
}

.merek-teks {
  font-weight: 680;
  letter-spacing: -.02em;
  /* Judul panjang dipendekkan, bukan dihapus: navbar tanpa penanda apa pun
     tidak memberi tahu pengunjung situs siapa yang sedang ia buka. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 46vw;
}

@media (min-width: 761px) { .merek-teks { max-width: none; } }

/* Mode tanpa logo menyisakan tautan tak bertanda; beri lebar agar tetap dapat diklik. */
.merek:has(.sembunyi:only-child) { width: 28px; height: 28px; }

/* --------------------------------------------------- pencarian pada navbar */

.kotak-cari-navbar {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: auto;      /* pencarian selalu di ujung kanan bilah */
}

/* ------------------------------------------------------- tautan navbar */

.tautan-navbar {
  display: flex;
  align-items: center;
  gap: .25rem;
  min-width: 0;
  margin-left: .75rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.tautan-navbar::-webkit-scrollbar { display: none; }

/*
 | Tautan navbar memakai warna aksen yang dipilih di Pengaturan, sama seperti
 | tab aktif dan tombol utama. Navbar adalah bidang pertama yang dilihat
 | pengunjung; membiarkannya abu-abu netral membuat warna pilihan Anda baru
 | muncul setelah halaman digulir.
 */
.tautan-navbar a {
  padding: .35rem .6rem;
  border-radius: var(--radius-kecil);
  color: var(--aksen);
  font-size: .88rem;
  font-weight: 600;
  white-space: nowrap;
}
.tautan-navbar a:hover {
  background: var(--aksen-lembut);
  color: var(--aksen-gelap);
  text-decoration: none;
}
.tautan-navbar a:focus-visible { outline: 2px solid var(--aksen); outline-offset: 1px; }

.kotak-cari-navbar .ikon {
  position: absolute;
  left: .65rem;
  color: var(--teks-samar);
  pointer-events: none;
}

/*
 | Garisnya nyata, bukan transparan. Pada tema terang, permukaan kedua sudah
 | cukup berbeda dari putih untuk membuat kotaknya terbaca; pada tema gelap
 | selisih antara #161b22 dan #1c222b nyaris tidak terlihat, sehingga kolom
 | pencarian seakan lenyap dari bilahnya. Satu garis menyelesaikan keduanya.
 */
.kotak-cari-navbar input[type="search"] {
  width: 210px;
  min-height: 36px;
  padding: .4rem .7rem .4rem 2.1rem;
  border-radius: 999px;
  background: var(--permukaan-2);
  border: 1px solid var(--garis);
  font-size: .87rem;
}

.kotak-cari-navbar input[type="search"]::placeholder { color: var(--teks-samar); }

.kotak-cari-navbar input[type="search"]:hover { border-color: var(--garis-tegas); }

.kotak-cari-navbar input[type="search"]:focus {
  background: var(--permukaan);
  border-color: var(--aksen);
  width: 250px;
}

/* Di dalam .navbar-kanan, marginnya sudah diatur oleh tata letak induk. */
.navbar-kanan .kotak-cari-navbar { margin-left: .25rem; }

/* Pemicu menu hanya hidup di layar sempit. */
.tombol-menu-publik { display: none; }

@media (max-width: 760px) {
  .kotak-cari-navbar input[type="search"],
  .kotak-cari-navbar input[type="search"]:focus { width: 120px; }

  /*
   | Susunan di ponsel: merek, kolom pencarian, lalu tombol menu di ujung
   | kanan. Deretan tautan berubah menjadi panel yang turun di bawah navbar.
   |
   | Dibuat sebagai panel sejak sekarang, bukan nanti ketika tautannya sudah
   | telanjur banyak: baris kedua yang digulir mendatar masih terbaca untuk dua
   | atau tiga tautan, tetapi menyembunyikan sisanya di luar layar begitu
   | jumlahnya bertambah — dan tidak ada yang memberi tahu bahwa masih ada
   | tautan lain di sana.
   */
  .navbar-isi { gap: .5rem; }
  .tombol-menu-publik { display: inline-flex; order: 3; flex: none; }
  .kotak-cari-navbar { order: 2; margin-left: auto; }
  .merek { order: 1; }
  .merek-teks { max-width: 38vw; }

  .tautan-navbar {
    order: 4;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: .4rem;
    overflow: visible;
    background: var(--permukaan);
    border-bottom: 1px solid var(--garis);
    box-shadow: var(--bayang-tinggi);
  }

  .tautan-navbar.terbuka { display: flex; }

  .tautan-navbar a {
    padding: .7rem .75rem;
    font-size: .95rem;
    border-radius: var(--radius-kecil);
  }
}

/* ------------------------------------------------- ikon tema terang/gelap */

/*
 | Kedua ikon selalu ada di DOM dan ditukar lewat CSS, bukan ditulis ulang oleh
 | JavaScript. Dengan begitu ikonnya sudah benar pada gambar pertama halaman,
 | sebelum skrip apa pun sempat berjalan.
 */
[data-tema="gelap"] .ikon-terang { display: none; }
:root:not([data-tema="gelap"]) .ikon-gelap { display: none; }
.ikon-tema { display: inline-flex; }


.ubin-modul .label { display: inline-flex; align-items: center; gap: .35rem; }