/* =========================================================================
   KUA DALAM ANGKA — Pusat Data & Informasi Keagamaan Kabupaten Trenggalek
   Tema: HIJAU dengan kombinasi KUNING EMAS, bernuansa BIRU (permintaan pemilik).
   Hijau = warna utama (angka, tombol, grafik pokok), kuning emas = aksen/kop &
   penanda status, biru = nuansa kedua (deret grafik pembanding, tautan sekunder,
   gelembung latar) supaya tampilan tidak monoton hijau.
   ========================================================================= */

:root {
  /* Hijau daun sebagai warna utama */
  --aksen: #15803D;
  --aksen-2: #2E9E5B;
  --aksen-tua: #14532D;
  --aksen-lembut: #EAF6EC;
  /* Kuning emas sebagai kombinasi (kop, lencana, penanda) */
  --emas: #C08A0E;
  --emas-tua: #7a5806;
  /* Biru sebagai nuansa */
  --biru: #1D4ED8;
  --biru-lembut: #E6EEFF;
  /* Tinta hijau tua & abu kehijauan supaya latar terasa satu keluarga */
  --tinta: #16281C;
  --redup: #5C6B60;
  --kertas: #F1F7EF;
  --kaca: rgba(255, 255, 255, 0.60);
  --kaca-pekat: rgba(255, 255, 255, 0.82);
  --garis: rgba(255, 255, 255, 0.62);
  --garis-lembut: rgba(21, 128, 61, 0.16);
  --radius: 18px;
  --radius-kecil: 12px;
  /* Rasio foto header majalah SAH & BILQIS (permintaan pemilik: "ubah rasio 7,47 : 1,
     kecil memanjang"). Dipakai banner halaman SAH DAN pratinjau di panel, jadi apa yang
     disetel panitia persis sama dengan yang tampil di halaman publik. */
  --rasio-banner: 7.47 / 1;
  --bayang: 0 18px 42px -24px rgba(16, 48, 30, 0.42), 0 2px 10px -6px rgba(16, 48, 30, 0.20);
  --bayang-kecil: 0 10px 24px -18px rgba(16, 48, 30, 0.5);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; }

body {
  min-height: 100vh;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--kertas);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: Marcellus, Inter, Georgia, serif; font-weight: 400; letter-spacing: 0.2px; margin: 0 0 8px; }
h1 { font-size: 2.05rem; line-height: 1.2; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.12rem; }
p { margin: 0 0 12px; }
a { color: var(--aksen-tua); text-decoration: none; }
a:hover { text-decoration: underline; }
small { font-size: 0.82em; color: var(--redup); }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.isi { padding: 26px 20px 8px; }

/* ---------- latar ---------- */

.latar {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  /* Latar: hijau muda → krem keemasan → biru sangat muda (tiga warna yang diminta). */
  background: linear-gradient(168deg, #F4FAF3 0%, #EDF7EC 38%, #FBF5E4 72%, #EDF4FF 100%);
}
.gelembung { position: absolute; border-radius: 50%; filter: blur(72px); opacity: 0.52; }
.gelembung.g1 { width: 520px; height: 520px; top: -170px; left: -140px; background: radial-gradient(circle, #b7e2c2, transparent 70%); }
.gelembung.g2 { width: 440px; height: 440px; top: 22%; right: -150px; background: radial-gradient(circle, #f4dfa0, transparent 70%); }
.gelembung.g3 { width: 560px; height: 560px; bottom: -230px; left: 16%; background: radial-gradient(circle, #bfd8ff, transparent 70%); }

/* ---------- bilah atas ---------- */

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(244, 250, 243, 0.80);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  border-bottom: 1px solid var(--garis-lembut);
}
.topbar-inner { display: flex; align-items: center; gap: 10px 20px; min-height: 76px; padding: 10px 20px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; text-decoration: none; }
.brand:hover { text-decoration: none; }
/* Logo aplikasi di bilah atas: berkas `logo-bilah.svg` (lambang + nama aplikasi).
   Tingginya dijaga tetap supaya bilah tidak melar, lebarnya mengikuti rasio berkas. */
.brand-logo { display: block; height: 56px; width: auto; }
a.brand:hover .brand-logo { filter: brightness(1.06); }

/* `flex-basis` sengaja diberi nilai kecil (bukan `auto`): dengan `auto`, menu yang
   lebarnya melebihi sisa ruang akan TERDORONG ke barisnya sendiri sehingga bilah atas
   jadi tiga baris (~250px) — brand di baris 1, menu di baris 2, tombol sesi di baris 3.
   Dengan basis kecil, menu tetap di baris pertama bersama brand & tombol sesi, lalu
   itemnya sendiri yang melipat ke baris kedua. */
.menu { display: flex; gap: 4px; flex: 1 1 320px; min-width: 0; flex-wrap: wrap; }
.menu a { padding: 7px 13px; border-radius: 999px; font-size: 0.9rem; font-weight: 500; color: var(--tinta); }
.menu a:hover { background: rgba(21, 128, 61, 0.08); text-decoration: none; }
.menu a.aktif { background: rgba(21, 128, 61, 0.14); color: var(--aksen-tua); font-weight: 600; }
/* Menu kustom (diisi Admin Kabupaten): tampil setelah menu bawaan, dengan penanda
   panah kecil karena tautannya membuka tab baru. */
/* Menu kustom memakai nuansa BIRU supaya berbeda dari menu bawaan yang hijau. */
.menu a.menu-kustom { border: 1px solid rgba(29, 78, 216, 0.30); color: var(--biru); font-weight: 600; }
.menu a.menu-kustom:hover { background: rgba(29, 78, 216, 0.12); }

/* Kop organisasi di pojok kanan atas — bentuk kop surat dua baris bergaris emas. */
.topbar-kanan { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.sesi { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.form-keluar { display: inline; }
.btn-masuk { font-weight: 500; }
.topbar-kop {
  position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  padding: 0 1px 6px; text-align: right; line-height: 1.3;
  font-family: Marcellus, Inter, Georgia, serif; text-transform: uppercase; color: var(--emas-tua);
}
.topbar-kop::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(192, 138, 14, 0), rgba(192, 138, 14, 0.62));
}
.kop-nama { font-size: 0.94rem; letter-spacing: 1.5px; color: #8a6206; }
.kop-cabang { font-size: 0.76rem; letter-spacing: 2.6px; color: var(--redup); }

/* ---------- teks berjalan (running text) ---------- */

/* Bilah bergulir di bawah menu; teks ditulis dua kali oleh views.js supaya gulirannya
   menyambung tanpa jeda (jalur digeser tepat setengah lebarnya, lalu berulang). */
.teks-berjalan {
  position: relative; overflow: hidden;
  border-bottom: 1px solid rgba(21, 128, 61, 0.18);
  background: linear-gradient(90deg, rgba(21, 128, 61, 0.12), rgba(192, 138, 14, 0.12) 46%, rgba(29, 78, 216, 0.10));
}
.teks-berjalan-jalur { display: inline-flex; gap: 64px; white-space: nowrap; padding: 7px 0; animation: teks-jalan 46s linear infinite; }
.teks-berjalan:hover .teks-berjalan-jalur { animation-play-state: paused; }
.teks-berjalan-isi { font-size: 0.86rem; font-weight: 500; color: var(--aksen-tua); letter-spacing: 0.2px; }
.teks-berjalan-isi::before { content: '◆'; margin-right: 12px; color: rgba(192, 138, 14, 0.85); font-size: 0.7em; vertical-align: middle; }
@keyframes teks-jalan {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* Pengunjung yang memilih mengurangi gerakan: teks tetap terbaca, tanpa berjalan. */
@media (prefers-reduced-motion: reduce) {
  .teks-berjalan-jalur { animation: none; }
  .teks-berjalan-isi:last-child { display: none; }
}

.centang-baris { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--tinta); }
.centang-baris input { width: 18px; height: 18px; accent-color: var(--aksen); }

/* ---------- pita mode contoh ---------- */

.pita-contoh {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 4px 0 22px; padding: 12px 18px;
  border-radius: var(--radius-kecil);
  border: 1px dashed rgba(21, 128, 61, 0.42);
  background: linear-gradient(120deg, rgba(21, 128, 61, 0.10), rgba(29, 78, 216, 0.06));
  font-size: 0.9rem; color: var(--aksen-tua);
}
.pita-contoh strong { text-transform: uppercase; letter-spacing: 1.4px; font-size: 0.76rem; }
.pita-contoh span { flex: 1 1 320px; color: var(--redup); }
.pita-contoh em { font-style: normal; font-weight: 600; color: var(--aksen-tua); }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-weight: 600; font-size: 0.94rem; cursor: pointer; text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-utama { color: #fff; background: linear-gradient(135deg, var(--aksen) 0%, var(--aksen-2) 100%); box-shadow: var(--bayang-kecil); }
.btn-utama:hover { filter: brightness(1.06); }
.btn-garis { color: var(--aksen-tua); background: rgba(255, 255, 255, 0.72); border-color: rgba(21, 128, 61, 0.28); }
.btn-garis:hover { background: #fff; }
.btn-mini { padding: 8px 14px; font-size: 0.85rem; }

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

.kartu {
  display: block; border-radius: var(--radius); padding: 22px;
  background: var(--kaca);
  border: 1px solid var(--garis);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--bayang);
  color: inherit;
}
a.kartu:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 22px 48px -24px rgba(16, 48, 30, 0.5); }
a.kartu { transition: transform 0.16s ease, box-shadow 0.16s ease; }

.bagian { margin: 42px 0; }
.bagian-kepala { margin-bottom: 22px; }
.bagian-kepala h2 { margin-bottom: 6px; }
.bagian-sub { color: var(--redup); margin: 0; max-width: 78ch; }

/* ---------- beranda: hero ---------- */

.hero { display: flex; gap: 32px; align-items: stretch; flex-wrap: wrap; padding: 30px; }
.hero-teks { flex: 1 1 420px; display: flex; flex-direction: column; gap: 10px; }
.hero-lencana {
  align-self: flex-start; padding: 5px 12px; border-radius: 999px; font-size: 0.74rem;
  letter-spacing: 1.1px; text-transform: uppercase; font-weight: 600;
  color: var(--emas-tua); background: rgba(192, 138, 14, 0.16);
  border: 1px solid rgba(192, 138, 14, 0.28);
}
.hero h1 { margin: 2px 0 0; font-size: 2.5rem; letter-spacing: 1px; }
.hero h1 .aksen { background: linear-gradient(120deg, var(--aksen), var(--aksen-2) 60%, var(--emas)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-kutipan {
  margin: 4px 0 0; padding: 12px 0 12px 18px; border-left: 3px solid rgba(29, 78, 216, 0.45);
  font-size: 1rem; color: var(--aksen-tua); font-style: italic;
}
.hero-sub { color: var(--redup); margin: 0; }
.hero-tombol { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.hero-sisi { flex: 1 1 300px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: center; }
.hero-petak {
  display: flex; flex-direction: column; gap: 2px; padding: 16px;
  border-radius: var(--radius-kecil); background: var(--kaca-pekat);
  border: 1px solid var(--garis);
}
.hero-petak-angka { font-family: Marcellus, serif; font-size: 1.5rem; color: var(--aksen-tua); }
.hero-petak-label { font-size: 0.8rem; color: var(--redup); }

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

.grid-stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 20px; }
.kartu-stat { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 22px; }
.stat-ikon { font-size: 1.5rem; line-height: 1; }
.stat-label { font-size: 0.85rem; color: var(--redup); font-weight: 500; }
.stat-angka { font-family: Marcellus, Inter, serif; font-size: 2.15rem; line-height: 1.1; color: var(--aksen-tua); }
.stat-satuan { font-size: 0.82rem; color: var(--redup); }
.stat-meta { margin-top: 6px; font-size: 0.82rem; color: var(--redup); }
.stat-panah { position: absolute; top: 20px; right: 20px; color: rgba(29, 78, 216, 0.42); font-size: 1.1rem; }
a.kartu-stat:hover .stat-panah { color: var(--biru); }

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

.grid-modul { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }
.kartu-modul { display: flex; flex-direction: column; gap: 8px; padding: 24px; }
.modul-atas { display: flex; align-items: center; justify-content: space-between; }
.modul-nomor { font-family: Marcellus, serif; font-size: 1.6rem; color: rgba(21, 128, 61, 0.32); }
.modul-ikon { font-size: 1.4rem; }
.modul-nama { font-family: Marcellus, serif; font-size: 1.24rem; color: var(--tinta); }
.modul-ringkas { font-size: 0.88rem; color: var(--redup); }
.modul-daftar { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; padding: 0; list-style: none; }
.modul-daftar li {
  font-size: 0.76rem; padding: 4px 10px; border-radius: 999px;
  background: rgba(21, 128, 61, 0.08); color: var(--aksen-tua);
}
.modul-buka { margin-top: auto; font-size: 0.85rem; font-weight: 600; color: var(--aksen); }

/* ---------- langkah pengisian ---------- */

.grid-langkah { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.kartu-langkah { position: relative; padding: 24px 22px 22px; }
.langkah-nomor {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--aksen), var(--emas));
  margin-bottom: 10px;
}
.langkah-isi { margin: 0; font-size: 0.9rem; color: var(--redup); }

/* ---------- kartu ajakan input ---------- */

.kartu-ajakan {
  display: flex; gap: 22px; align-items: flex-start; margin: 42px 0;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.78), rgba(234, 246, 236, 0.66));
  border: 1px dashed rgba(21, 128, 61, 0.38);
}
.ajakan-ikon { font-size: 2rem; line-height: 1; }
.kartu-ajakan h2 { margin-bottom: 6px; }
.kartu-ajakan p { color: var(--redup); margin-bottom: 16px; }
.ajakan-tombol { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- pita judul modul ---------- */

.pita { display: flex; gap: 20px; align-items: center; padding: 24px 26px; margin-bottom: 22px; }
.pita-nomor { font-family: Marcellus, serif; font-size: 2.4rem; color: rgba(192, 138, 14, 0.60); }
.pita-teks h1 { font-size: 1.7rem; margin: 0 0 4px; }
.pita-teks p { margin: 0; color: var(--redup); }

/* ---------- bilah penyaring ---------- */

.saring { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 16px 20px; margin-bottom: 22px; }
.saring-isi { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; color: var(--redup); }
.saring-isi select {
  font: inherit; font-size: 0.9rem; color: var(--tinta);
  padding: 9px 12px; border-radius: var(--radius-kecil);
  border: 1px solid rgba(21, 128, 61, 0.24); background: rgba(255, 255, 255, 0.85);
}
.saring-kanan { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
/* Catatan pada bilah pemilih tahun bila tahun yang dibuka belum punya data. */
.saring-catatan { flex: 1 1 320px; font-size: 0.82rem; color: var(--redup); padding-bottom: 10px; }

/* ---------- panel ---------- */

.kartu-panel { padding: 24px; margin-bottom: 22px; }
.panel-kepala { margin-bottom: 16px; }
.panel-judul { font-size: 1.24rem; margin: 0 0 4px; }
.panel-sub { margin: 0; font-size: 0.86rem; color: var(--redup); }
.grid-dua { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 22px; }
.grid-dua > .kartu-panel { margin-bottom: 0; }

.daftar-poin { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.daftar-poin li { color: var(--redup); }
.kosong { margin: 0; padding: 18px; border-radius: var(--radius-kecil); background: rgba(255, 255, 255, 0.6); color: var(--redup); font-size: 0.9rem; }

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

.grafik { margin: 0; }
.grafik-judul { font-size: 0.86rem; font-weight: 600; color: var(--redup); margin-bottom: 8px; }
.grafik-catatan { font-size: 0.8rem; color: var(--redup); margin: 8px 0 0; }
.g-svg { width: 100%; height: auto; display: block; }
.g-label, .g-nilai, .g-nilai-kecil, .g-label-tengah, .g-donat-angka, .g-donat-label { font-family: Inter, system-ui, sans-serif; }
.g-label { font-size: 13px; fill: var(--tinta); }
.g-nilai { font-size: 13px; font-weight: 600; fill: var(--aksen-tua); }
.g-nilai-kecil { font-size: 12px; fill: var(--redup); }
.g-label-tengah { font-size: 12px; fill: var(--redup); }
.g-trek { fill: rgba(21, 128, 61, 0.07); }
.g-garis-dasar { stroke: rgba(92, 107, 96, 0.2); stroke-width: 1; }
/* Garis acuan batas atas/bawah pada grafik garis banyak deret (tren usia catin):
   skala grafik itu mengikuti rentang data, jadi batasnya perlu terlihat. */
.g-garis-acuan { stroke: rgba(92, 107, 96, 0.16); stroke-width: 1; stroke-dasharray: 4 5; }
.g-titik { fill: #fff; stroke: var(--aksen); stroke-width: 2.4; }
/* Keterangan deret (pria/wanita) di bawah grafik garis banyak deret. */
.garis-legenda { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.garis-legenda li { display: flex; gap: 8px; align-items: center; font-size: 0.85rem; color: var(--redup); }
.g-trek-donat { stroke: rgba(21, 128, 61, 0.08); }
.g-donat-angka { font-size: 6.2px; font-weight: 700; fill: var(--tinta); }
.g-donat-label { font-size: 3.3px; fill: var(--redup); }
.g-baris:hover .g-trek { fill: rgba(21, 128, 61, 0.14); }

.donat-bungkus { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.donat-svg { width: 168px; max-width: 100%; height: auto; flex: 0 0 auto; }
.donat-legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; flex: 1 1 200px; }
.donat-legenda li { display: flex; gap: 10px; align-items: center; font-size: 0.88rem; }
.g-tanda { width: 12px; height: 12px; border-radius: 4px; flex: 0 0 12px; }
.g-legenda-label { flex: 1 1 auto; color: var(--redup); }
.g-legenda-nilai { font-weight: 600; }

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

.tabel-bungkus { overflow-x: auto; border-radius: var(--radius-kecil); }
.tabel { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 480px; }
.tabel th, .tabel td { padding: 11px 12px; text-align: left; border-bottom: 1px solid rgba(92, 107, 96, 0.14); }
.tabel th { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.8px; color: var(--redup); font-weight: 600; }
.tabel tbody tr:hover { background: rgba(21, 128, 61, 0.06); }
.tabel td.num, .tabel th.num { text-align: right; white-space: nowrap; }
.tabel td.aksi { text-align: right; }
.tabel td.num small { margin-left: 4px; }
.tautan-kecil { font-size: 0.85rem; font-weight: 600; color: var(--aksen); white-space: nowrap; }
/* Tautan sekunder (mis. dari/ke halaman lain) memakai nuansa biru supaya tidak
   bertabrakan dengan angka & tombol utama yang hijau. */
.tautan-biru, .kaki-tautan a { color: var(--biru); }

/* ---------- SAH (majalah) ---------- */

.kartu-info { padding: 20px 24px; margin-bottom: 22px; }
.kartu-info p:last-child { margin-bottom: 0; }
.kartu-info.tengah { text-align: center; padding: 40px 24px; }
.kartu-majalah { padding: 26px; margin-bottom: 22px; }
.majalah-kepala {
  padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid rgba(92, 107, 96, 0.16);
}
.majalah-lencana {
  display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 0.72rem;
  letter-spacing: 1.1px; text-transform: uppercase; font-weight: 600;
  color: var(--aksen-tua); background: rgba(21, 128, 61, 0.12);
}
.majalah-nama { font-size: 1.85rem; margin: 10px 0 6px; }
.majalah-sub { color: var(--redup); margin: 0 0 6px; max-width: 70ch; }
.majalah-jumlah { font-size: 0.8rem; color: var(--redup); }
.grid-tulisan { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.kartu-tulisan { padding: 22px; background: var(--kaca-pekat); }
.tulisan-meta { font-size: 0.78rem; color: var(--redup); margin: 0 0 8px; }
.tulisan-ringkas { font-size: 0.88rem; color: var(--redup); margin: 0; }

/* ---------- profil KUA ---------- */

.grid-kua { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 20px; }
.kartu-kua { display: flex; flex-direction: column; gap: 6px; padding: 22px; }
.kua-kode {
  align-self: flex-start; font-size: 0.72rem; font-weight: 700; letter-spacing: 1.6px;
  padding: 4px 10px; border-radius: 999px; color: #fff;
  background: linear-gradient(135deg, var(--aksen), var(--biru));
}
.kua-nama { font-family: Marcellus, serif; font-size: 1.1rem; line-height: 1.3; }
.kua-tahun { font-size: 0.78rem; color: var(--redup); }
.kua-ring { display: grid; gap: 6px; margin: 8px 0 4px; font-size: 0.86rem; }
.kua-ring small { color: var(--redup); }
.kepala-kua { display: flex; gap: 22px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; padding: 26px; margin-bottom: 22px; }
.kepala-kua h1 { margin: 8px 0 4px; font-size: 1.9rem; }
.kepala-sub { margin: 0; color: var(--redup); }
.kepala-nav { display: flex; gap: 10px; flex-wrap: wrap; }
.ring-kua { margin-bottom: 22px; }

.identitas { display: grid; gap: 10px; }
.identitas-baris { display: flex; gap: 16px; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(92, 107, 96, 0.12); }
.identitas-baris span { color: var(--redup); font-size: 0.86rem; }
.identitas-baris strong { text-align: right; font-weight: 600; }

/* ---------- kaki halaman ---------- */

.kaki { margin-top: 56px; border-top: 1px solid var(--garis-lembut); background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(16px); }
.kaki-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; padding: 30px 20px 38px; }
.kaki-kolom { display: flex; flex-direction: column; gap: 5px; }
.kaki-kolom strong { font-family: Marcellus, serif; font-size: 1.1rem; color: var(--aksen-tua); letter-spacing: 1px; }
/* Logo lengkap (dengan semboyan) di kaki halaman — ukurannya dijaga sedang supaya tidak
   mendominasi kaki, tetapi tulisannya tetap terbaca. */
.kaki-merek { align-items: flex-start; }
.kaki-logo { display: block; height: 108px; width: auto; margin-bottom: 4px; }
.kaki-kecil { font-size: 0.82rem; color: var(--redup); }
.kaki-tengah { align-items: center; text-align: center; }
.kaki-kanan { align-items: flex-end; text-align: right; }
.kaki-sosial { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.sos {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
  font-size: 0.8rem; font-weight: 600; background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(21, 128, 61, 0.22); color: var(--aksen-tua);
}
.sos:hover { text-decoration: none; background: #fff; }
.sos-kosong { color: var(--redup); border-style: dashed; cursor: default; }
.sos-ikon { font-size: 0.95rem; }
.kaki-tautan { font-size: 0.82rem; color: var(--redup); }

/* ---------- pesan (flash) & toast ---------- */

.flash {
  display: block; margin: 4px 0 20px; padding: 13px 18px;
  border-radius: var(--radius-kecil); font-size: 0.92rem; font-weight: 500;
  border: 1px solid transparent;
}
.flash-ok { color: #14532d; background: rgba(220, 252, 231, 0.85); border-color: rgba(34, 197, 94, 0.35); }
.flash-err { color: #7f1d1d; background: rgba(254, 226, 226, 0.88); border-color: rgba(220, 38, 38, 0.32); }
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 60;
  padding: 11px 20px; border-radius: 999px; font-size: 0.9rem; font-weight: 600;
  color: #fff; background: linear-gradient(135deg, var(--aksen), var(--aksen-2));
  box-shadow: var(--bayang); max-width: 90vw; text-align: center;
}

/* ---------- panel panitia ---------- */

.kartu-peringatan {
  display: flex; gap: 20px; align-items: flex-start; margin-bottom: 22px;
  background: linear-gradient(120deg, rgba(255, 251, 235, 0.86), rgba(255, 255, 255, 0.66));
  border: 1px dashed rgba(192, 138, 14, 0.5);
}
.kartu-peringatan h2 { margin-bottom: 4px; }
.kartu-peringatan p { margin: 0; color: var(--redup); }

.admin-pembuka { margin-bottom: 22px; }
.admin-pembuka h1 { margin: 8px 0 8px; }
.admin-pembuka p:last-child { margin-bottom: 0; }

.grid-admin { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.kartu-admin { display: flex; flex-direction: column; gap: 6px; padding: 20px; }
.kartu-admin.is-kabupaten { border-color: rgba(192, 138, 14, 0.42); }
.admin-ikon { font-size: 1.4rem; line-height: 1; }
.admin-nama { font-family: Marcellus, serif; font-size: 1.12rem; }
.admin-status { font-size: 0.78rem; }
.admin-status.is-ada { color: #15803d; }
.admin-status.is-belum { color: var(--emas-tua); }
.admin-buka { margin-top: auto; font-size: 0.85rem; font-weight: 600; color: var(--aksen); }

.kepala-admin {
  display: flex; gap: 22px; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; padding: 26px; margin-bottom: 22px;
}
.kepala-admin h1 { margin: 8px 0 6px; font-size: 1.85rem; }

.form-admin { display: flex; flex-direction: column; gap: 14px; }
.form-baris { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.form-sub { margin: 6px 0 0; font-size: 1rem; }
.kartu-pilih {
  padding: 14px 16px; border-radius: var(--radius-kecil);
  background: rgba(21, 128, 61, 0.06); border: 1px solid rgba(21, 128, 61, 0.16);
}
.kartu-pilih .kecil { margin: 6px 0 0; }
.saring-isi.lebar { width: 100%; }
.saring-isi input, .saring-isi textarea, .saring-isi select {
  font: inherit; font-size: 0.92rem; color: var(--tinta); width: 100%;
  padding: 10px 12px; border-radius: var(--radius-kecil);
  border: 1px solid rgba(21, 128, 61, 0.24); background: rgba(255, 255, 255, 0.9);
}
.saring-isi textarea { resize: vertical; }
.saring-isi input:focus, .saring-isi textarea:focus, .saring-isi select:focus {
  outline: 2px solid rgba(21, 128, 61, 0.35); outline-offset: 1px;
}
.form-sebaris { display: inline; }
.kecil { font-size: 0.82rem; color: var(--redup); }

.kaca-baca { display: grid; gap: 8px; }
.kaca-baris { display: flex; gap: 16px; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid rgba(92, 107, 96, 0.12); }
.kaca-baris span { color: var(--redup); font-size: 0.86rem; }
.kaca-baris strong { text-align: right; font-weight: 600; word-break: break-word; }

.lencana { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.76rem; font-weight: 600; }
.lencana-ada { color: #14532d; background: rgba(220, 252, 231, 0.9); }
.lencana-belum { color: #78350f; background: rgba(254, 243, 199, 0.92); }

.kartu-sandi { padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.kartu-sandi input[readonly] {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 1.5rem;
  letter-spacing: 3px; text-align: center; font-weight: 700; color: var(--aksen-tua);
}

/* ---------- kartu modul isian (unduh & unggah form) ---------- */

.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.kartu-form { display: flex; flex-direction: column; gap: 12px; padding: 22px; }
.form-kepala { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.form-kepala h3 { margin: 0; font-size: 1.1rem; }
.form-ikon { font-size: 1.3rem; line-height: 1; }
.form-status { margin-left: auto; font-size: 0.76rem; padding: 4px 10px; border-radius: 999px; font-weight: 600; }
.form-status.is-ada { color: #14532d; background: rgba(220, 252, 231, 0.9); }
.form-status.is-belum { color: #78350f; background: rgba(254, 243, 199, 0.92); }
.form-ringkas { margin: 0; font-size: 0.87rem; color: var(--redup); }
.form-kolom { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.form-kolom li { font-size: 0.75rem; padding: 4px 10px; border-radius: 999px; background: rgba(21, 128, 61, 0.08); color: var(--aksen-tua); }
.form-kolom li.wajib { background: rgba(192, 138, 14, 0.16); color: var(--emas-tua); font-weight: 600; }
.form-kolom li small { font-size: 0.9em; }
.form-aksi { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: auto; }
.unggah-tombol { display: inline-flex; cursor: pointer; }
.unggah-pesan { margin: 0; min-height: 1.1em; font-size: 0.82rem; color: var(--redup); }
.unggah-pesan.is-proses { color: var(--aksen-tua); }
.unggah-pesan.is-ok { color: #15803d; }
.unggah-pesan.is-galat { color: #b91c1c; }
.form-pratinjau { font-size: 0.82rem; color: var(--redup); }
.form-pratinjau summary { cursor: pointer; color: var(--aksen); font-weight: 600; }
.pratinjau-baris { padding: 5px 0; border-bottom: 1px dashed rgba(92, 107, 96, 0.2); }
.form-kosong { margin: 0; }
.saring-panel { margin-bottom: 16px; }
.angka-besar { font-family: Marcellus, serif; font-size: 1.9rem; color: var(--aksen-tua); margin: 0 0 4px; }
.kartu-sisi .donat-bungkus { justify-content: center; }

/* ---------- foto header majalah (rasio 7,47 : 1 — kecil memanjang) ---------- */

/* Banner memakai `--rasio-banner` + object-fit: cover, jadi foto bentuk apa pun tampil
   sebagai pita header yang panjang dan tipis tanpa perlu dipotong panitia lebih dulu. */
.majalah-banner {
  position: relative; margin: -26px -26px 20px; border-radius: calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0;
  overflow: hidden; background: rgba(21, 128, 61, 0.08);
  aspect-ratio: var(--rasio-banner); width: calc(100% + 52px);
}
.majalah-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.majalah-banner-kosong {
  display: grid; place-items: center;
  border-bottom: 1px dashed rgba(21, 128, 61, 0.3);
}
/* Banner tinggi hanya ±1/7 lebarnya, jadi teks "belum diunggah" dibuat memanjang
   (bukan bertumpuk) supaya tetap muat di dalam pitanya. */
.majalah-banner-kosong .banner-kosong-isi { flex-direction: row; gap: 10px; padding: 0 14px; }
.banner-kosong-isi {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 0.85rem; color: var(--redup); text-align: center; padding: 0 16px;
}
.kartu-banner { display: flex; flex-direction: column; gap: 12px; padding: 22px; }
/* Kartu gambar popup memakai gaya kartu banner, dibedakan supaya tidak tertukar dengan
   kartu foto header majalah. */
.kartu-popup { border-color: rgba(192, 138, 14, 0.34); }
.unggah-note { margin: 0; font-size: 0.84rem; color: var(--redup); }
.banner-pratinjau {
  position: relative; border-radius: var(--radius-kecil); overflow: hidden;
  background: rgba(21, 128, 61, 0.06); border: 1px solid rgba(21, 128, 61, 0.16);
  aspect-ratio: var(--rasio-banner); display: grid; place-items: center;
}
.banner-pratinjau img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- tulisan majalah & indeks kepuasan publik ---------- */

.kepala-tulisan { padding: 26px; margin-bottom: 22px; }
.kepala-tulisan h1 { margin: 10px 0 6px; font-size: 1.9rem; }
.tulisan-meta-besar { color: var(--redup); font-size: 0.9rem; margin: 0 0 8px; }
.tulisan-ringkas-besar { font-size: 1.02rem; color: var(--tinta); margin: 0 0 14px; }
.kartu-isi-tulisan { padding: 28px; font-size: 1.02rem; line-height: 1.75; }
.kartu-isi-tulisan p { margin: 0 0 16px; }
.kartu-isi-tulisan p:last-child { margin-bottom: 0; }
.aksi-baris { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.ikp-pembuka h1 { margin: 8px 0 10px; font-size: 1.7rem; }
.grid-pilih-ikp { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; }
.kartu-pilih-ikp { padding: 0; overflow: hidden; border-width: 2px; }
.kartu-pilih-ikp.is-baik { border-color: rgba(34, 197, 94, 0.5); }
.kartu-pilih-ikp.is-sedang { border-color: rgba(192, 138, 14, 0.5); }
.kartu-pilih-ikp.is-kurang { border-color: rgba(220, 38, 38, 0.45); }
.pilih-ikp-tombol {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 26px 18px; border: 0; background: transparent; cursor: pointer; font: inherit;
}
.pilih-ikon { font-size: 2.4rem; line-height: 1; }
.pilih-label { font-weight: 700; font-size: 1.06rem; color: var(--aksen-tua); }
.kartu-pilih-ikp:hover { transform: translateY(-2px); box-shadow: var(--bayang); }
.kartu-pilih-ikp.is-baik:hover { background: rgba(220, 252, 231, 0.7); }
.kartu-pilih-ikp.is-sedang:hover { background: rgba(254, 243, 199, 0.7); }
.kartu-pilih-ikp.is-kurang:hover { background: rgba(254, 226, 226, 0.7); }
/* Keadaan sebelum kecamatan dipilih: kartunya tetap terlihat (supaya pilihannya jelas
   sejak awal) tetapi belum bisa dikirim. */
.kartu-pilih-ikp.is-nonaktif { opacity: 0.62; }
.kartu-pilih-ikp.is-nonaktif:hover { transform: none; }
.kartu-pilih-ikp.is-nonaktif .pilih-ikp-tombol { cursor: not-allowed; }

/* ---------- pintasan bagian panel ---------- */

/* Panel Admin Kabupaten panjang (12 bagian), jadi kepala panel memuat daftar pintasan
   ke bagian yang paling sering dibutuhkan — termasuk pengelolaan kata sandi kecamatan. */
.pintasan-panel {
  display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(92, 107, 96, 0.16);
  width: 100%;
}
.pintasan-judul { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.8px; color: var(--redup); font-weight: 600; }
.pintasan-panel a {
  font-size: 0.8rem; font-weight: 600; padding: 5px 12px; border-radius: 999px;
  background: rgba(21, 128, 61, 0.09); color: var(--aksen-tua); white-space: nowrap;
}
.pintasan-panel a:hover { background: rgba(21, 128, 61, 0.18); text-decoration: none; }

/* Bagian yang ditautkan pintasan: beri jarak lebih saat digulir ke sana. */
.kartu-panel[id], .kartu[id] { scroll-margin-top: 96px; }

/* ---------- popup modal promosi ---------- */

/* Latar gelap + kotak gambar. Dimulai tersembunyi (atribut `hidden`) dan baru
   ditampilkan public/app.js, jadi tidak pernah menghalangi halaman tanpa JavaScript.
   Popup muncul setiap kali halaman dibuka; menutupnya menyembunyikan pada halaman itu. */
.popup-latar {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(22, 40, 28, 0.62);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: popup-muncul 0.22s ease-out;
}
.popup-latar[hidden] { display: none; }
/* Saat popup terbuka, halaman di belakangnya tidak ikut bergulir. */
html.popup-terbuka { overflow: hidden; }
@keyframes popup-muncul { from { opacity: 0; } to { opacity: 1; } }

.popup-kotak {
  position: relative; width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
  border-radius: var(--radius); padding: 16px 16px 18px;
  background: var(--kaca-pekat); border: 1px solid var(--garis);
  box-shadow: 0 30px 70px -30px rgba(12, 30, 18, 0.72);
  animation: popup-naik 0.24s ease-out;
}
@keyframes popup-naik { from { transform: translateY(14px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }

.popup-tutup {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(22, 40, 28, 0.55); color: #fff; font-size: 1.35rem; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
}
.popup-tutup:hover { background: rgba(22, 40, 28, 0.78); }

.popup-gambar-tautan { display: block; }
.popup-gambar {
  display: block; width: 100%; height: auto; max-height: 60vh; object-fit: contain;
  border-radius: var(--radius-kecil); background: rgba(21, 128, 61, 0.06);
}
.popup-keterangan { margin: 12px 2px 0; font-size: 0.92rem; color: var(--tinta); }
.popup-aksi { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.popup-aksi .btn { flex: 1 1 auto; }
.popup-pratinjau { position: relative; border-radius: var(--radius-kecil); overflow: hidden; background: rgba(21, 128, 61, 0.06); border: 1px solid rgba(21, 128, 61, 0.16); display: grid; place-items: center; min-height: 150px; }
.popup-pratinjau img { width: 100%; height: auto; max-height: 260px; object-fit: contain; display: block; }

/* ---------- ponsel & layar sedang ---------- */

@media (max-width: 1020px) {
  .hero h1 { font-size: 2.1rem; }
  .topbar-kanan { order: 3; align-items: flex-start; }
  .topbar-kop { align-items: flex-start; text-align: left; }
  .topbar-kop::after { background: linear-gradient(90deg, rgba(192, 138, 14, 0.62), rgba(192, 138, 14, 0)); }
}

@media (max-width: 720px) {
  body { font-size: 15px; }
  .isi { padding: 18px 16px 4px; }
  .wrap { padding: 0 16px; }
  .topbar-inner { padding: 10px 16px; gap: 8px 12px; }
  /* Bilah atas: logo dikecilkan agar tidak makan ruang menu. */
  .menu { gap: 2px; }
  .menu a { padding: 6px 10px; font-size: 0.84rem; }
  .hero { padding: 22px; gap: 22px; }
  .hero h1 { font-size: 1.75rem; }
  .hero-sisi { grid-template-columns: 1fr 1fr; gap: 12px; }
  .hero-petak { padding: 12px; }
  .hero-petak-angka { font-size: 1.25rem; }
  .pita { padding: 20px; gap: 14px; }
  .pita-nomor { font-size: 1.9rem; }
  .pita-teks h1 { font-size: 1.35rem; }
  .stat-angka { font-size: 1.85rem; }
  .saring-kanan { margin-left: 0; width: 100%; }
  .kaki-kanan, .kaki-tengah, .kaki-sosial { align-items: flex-start; justify-content: flex-start; text-align: left; }
  .topbar-kanan { align-items: flex-start; }
  .sesi { justify-content: flex-start; }
  .kartu-sandi input[readonly] { font-size: 1.12rem; letter-spacing: 1.6px; }
  .kaca-baris { flex-direction: column; gap: 2px; }
  .kaca-baris strong { text-align: left; }
  .majalah-banner { margin: -20px -20px 16px; width: calc(100% + 40px); }
  .popup-latar { padding: 12px; align-items: flex-end; }
  .popup-kotak { max-height: 84vh; padding: 12px 12px 14px; }
  .popup-gambar { max-height: 48vh; }
  .popup-aksi .btn { flex: 1 1 100%; }
  .donat-svg { width: 148px; }
  /* Di ponsel grafik digulir di dalam kotaknya (bukan dikecilkan sampai tulisan
     tak terbaca): dengan lebar 780 satuan SVG, mengecilkan ke ±310px membuat
     label 13px jadi ±5px. Lebar minimum 600px menjaga label tetap terbaca. */
  .kartu-panel .grafik { overflow-x: auto; }
  .kartu-panel .g-svg { min-width: 600px; }
}

@media (max-width: 460px) {
  .hero-sisi { grid-template-columns: 1fr; }
  .grid-stat { grid-template-columns: 1fr 1fr; gap: 12px; }
  .kartu-stat { padding: 16px; }
  .stat-angka { font-size: 1.6rem; }
  .stat-panah { display: none; }
}

/* ---------- cetak ---------- */

/* ---------- halaman siap cetak satu modul isian (tool Download to PDF) ---------- */

.halaman-cetak { padding-top: 26px; }
.cetak-alat { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 22px; }
/* Kop halaman siap cetak: logo di kiri, keterangan modul di kanan. */
.cetak-kop { display: flex; gap: 20px; align-items: center; padding: 22px 26px; margin-bottom: 20px; }
.cetak-logo { display: block; height: 96px; width: auto; flex: 0 0 auto; }
.cetak-kop-teks { min-width: 0; }
.cetak-kop .cetak-kop-sub { margin: 0 0 8px; font-size: 0.86rem; color: var(--redup); }
.cetak-kop h2 { margin: 0 0 6px; font-size: 1.15rem; }
.cetak-kop-kecil { margin: 0; font-size: 0.86rem; color: var(--redup); }
.cetak-isi { padding: 18px 20px; }
table.tabel-cetak { font-size: 0.8rem; }
table.tabel-cetak th, table.tabel-cetak td { padding: 7px 9px; }

@page { size: A4 portrait; margin: 14mm; }

@media print {
  .latar, .topbar, .kaki, .saring, .pita-contoh, .ajakan-tombol, .kepala-nav, .teks-berjalan, .popup-latar, .cetak-alat { display: none !important; }
  .cetak-kop, .cetak-isi { padding: 0; border: 0; box-shadow: none; background: #fff; }
  .tabel-bungkus { overflow: visible !important; }
  table.tabel-cetak { font-size: 9pt; }
  table.tabel-cetak thead { display: table-header-group; }
  table.tabel-cetak tr { break-inside: avoid; }
  body { background: #fff; font-size: 11pt; }
  .kartu, .kartu-stat, .kartu-panel { box-shadow: none; background: #fff; border-color: #ccc; backdrop-filter: none; }
  .kartu, .kartu-panel, .kartu-tulisan, figure.grafik, .tabel-bungkus { break-inside: avoid; }
  .isi { padding: 0; }
  a { color: inherit; }
  .grid-stat { grid-template-columns: repeat(3, 1fr); }
  /* Grafik tidak boleh dipaksa selebar layar ponsel saat dicetak — cetakan
     memakai seluruh lebar kertas (lihat juga @page di bilah cetak browser). */
  .kartu-panel .grafik { overflow: visible !important; }
  .kartu-panel .g-svg { min-width: 0 !important; }
}

/* ---------- logo aplikasi di layar kecil (aturan di akhir berkas) ----------
   Aturan @media HARUS ditulis setelah aturan dasarnya: kalau ditaruh sebelum
   `.brand-logo`/`.kaki-logo`/`.cetak-logo` didefinisikan, CSS memilih aturan yang
   paling akhir dan penyesuaian untuk ponsel tidak pernah berlaku. */
@media (max-width: 700px) {
  .brand-logo { height: 44px; }
  .kaki-logo { height: 92px; }
  .cetak-kop { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cetak-logo { height: 80px; }

  /* Bilah atas di ponsel: logo + tombol sesi di baris pertama, menu di baris kedua
     sebagai SATU baris yang bisa digeser ke samping (sebelumnya menu melipat sampai
     ±5 baris sehingga bilahnya setinggi ±314px — memakan sepertiga layar). */
  .topbar-inner { padding: 8px 14px 10px; gap: 8px 12px; }
  .topbar-kanan { order: 1; }
  .menu { order: 2; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
  .menu a { flex: 0 0 auto; }
}