/* penanggak.com — gaya versi 2 (27 Sep 2026). SATU lapis; tiap kelas didefinisikan sekali.
   Acuan: pedoman di konten/PEDOMAN.md. Nada visual ala IndiHome/Telkom: tenang, satu aksen emas
   untuk tombol utama, kop "kabel" (ilustrasi kampung versi kecil).

   SKALA HURUF (Plus Jakarta Sans, satu keluarga; peran dibedakan lewat ukuran + bobot):
     --f-display  judul besar H1 / karosel   40→64px  800  1.05
     --f-h2       judul bagian               28→40px  800  1.1
     --f-h3       subjudul, judul kartu      20px     700  1.25
     --f-lead     paragraf pembuka           19px     400  1.5   (abu tua)
     --f-isi      isi                        17px     400  1.6
     --f-tombol   tombol                     16px     700
     --f-kecil    keterangan, tanggal, label 13px     600  1.4
   Jangan menambah ukuran baru; pakai salah satu variabel di bawah. */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("fonts/plus-jakarta-sans.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --f-display: clamp(40px, 6.4vw, 64px);
  --f-h2: clamp(28px, 3.6vw, 40px);
  --f-h3: 20px;
  --f-lead: 19px;
  --f-isi: 17px;
  --f-tombol: 16px;
  --f-kecil: 13px;

  --hitam: #090a0b;       /* hitam logo */
  --teks: #1f2024;        /* isi */
  --teks-2: #55565c;      /* lead, keterangan (7,3:1 di atas putih) */
  --garis: #e6e6e3;
  --abu: #f4f4f2;         /* bidang netral: kartu, kop, kotak bantuan */
  --putih: #ffffff;
  --emas: #ffcd56;        /* HANYA bidang: tombol utama, penanda */
  --emas-tua: #f5bd2e;
  --emas-teks: #8a6205;   /* huruf emas di atas putih (5,5:1) */
  --kabel-emas: #e0a100;
  /* warna semantik (11 Okt 2026, halaman akun): merah = galat/aksi merusak, hijau = berhasil/tersambung.
     Bukan warna merek; sama di semua merek. --garis-isian = tepi isian form (3,4:1, batas WCAG 1.4.11). */
  --merah: #b42318;       /* 6,8:1 di atas putih */
  --merah-tua: #8f1c13;
  --hijau: #1a7f37;       /* 5,1:1 di atas putih */
  --garis-isian: #8a8b91;

  --lebar: 1180px;
  --gutter: 20px;
  --radius: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--putih); color: var(--teks);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--f-isi); line-height: 1.6;
}
main { flex: 1; }
img, svg { display: block; max-width: 100%; }
p { margin: 0; }
h1, h2, h3 { margin: 0; color: var(--hitam); text-wrap: balance; }
h1 { font-size: var(--f-display); font-weight: 800; line-height: 1.05; letter-spacing: -0.04em; }
h2 { font-size: var(--f-h2); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
h3 { font-size: var(--f-h3); font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; }
a { color: var(--emas-teks); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--hitam); }
:focus-visible { outline: 3px solid var(--hitam); outline-offset: 3px; border-radius: 6px; }

.lead { font-size: var(--f-lead); line-height: 1.5; color: var(--teks-2); max-width: 36em; }
.meta { font-size: var(--f-kecil); font-weight: 600; line-height: 1.4; color: var(--emas-teks); }
.kampung-teks { display: grid; gap: 14px; font-size: var(--f-lead); line-height: 1.5; color: var(--teks-2); max-width: 36em; }
.prosa { display: grid; gap: 18px; max-width: 38em; }
.judul-kecil { font-size: var(--f-h3); font-weight: 700; margin-bottom: 14px; }
.sumber { font-size: var(--f-kecil); color: var(--teks-2); }
.sumber ul { margin: 8px 0 0; padding-left: 18px; }
.sumber li { margin: 4px 0; }

.lompat { position: absolute; left: -9999px; top: 8px; background: var(--putih); padding: 10px 14px; z-index: 30; }
.lompat:focus { left: 8px; }
.bungkus { width: 100%; max-width: calc(var(--lebar) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- tombol: satu bentuk, tiga peran ---------- */
.tbl { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px;
       border-radius: 999px; border: 2px solid transparent; font-family: inherit; font-size: var(--f-tombol); font-weight: 700; line-height: 1; letter-spacing: -0.005em;
       text-decoration: none; white-space: nowrap; cursor: pointer; }
.tbl-emas { background: var(--emas); border-color: var(--emas); color: var(--hitam); }            /* utama */
.tbl-emas:hover { background: var(--emas-tua); border-color: var(--emas-tua); color: var(--hitam); }
.tbl-hitam { background: var(--hitam); border-color: var(--hitam); color: var(--putih); }         /* utama di atas bidang emas */
.tbl-hitam:hover { background: #2a2b2f; border-color: #2a2b2f; color: var(--putih); }
.tbl-garis { background: transparent; border-color: var(--hitam); color: var(--hitam); }         /* kedua */
.tbl-garis:hover { background: var(--hitam); color: var(--putih); }
.tbl svg { width: 18px; height: 18px; flex-shrink: 0; }
.tombol { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- kop: logo sendiri + kabel di atas menu ---------- */
.kop { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--garis); }
.kop-baris { display: flex; align-items: center; gap: 32px; min-height: 72px; }
.merek { display: flex; align-items: center; gap: 12px; color: var(--hitam); text-decoration: none; font-weight: 800; letter-spacing: -0.03em; }
.merek img { width: 30px; height: auto; }
.merek-besar { font-size: 22px; flex-shrink: 0; white-space: nowrap; }
.merek-besar img { width: 34px; }
.merek-besar span { display: flex; flex-direction: column; line-height: 1.05; }
/* tagar selebar nama merek (30 Sep, permintaan pemilik): em = lebar nama ÷ lebar tagar per 1px, diukur di Chrome.
   Nama atau tagar berubah = ukur ulang. mascaFi menimpa di merek.css. */
.merek-besar small { font-size: .5277em; font-weight: 700; letter-spacing: 0; color: var(--emas-teks); margin-top: 3px; }
.kop-jaringan { display: none; position: relative; flex: 1; align-self: stretch; }
/* 13 Okt 2026 (pilihan C): kabel = tepi bawah kop (≥1000px, digambar aset/kop.js), titik emas di bawah halaman aktif.
   .berkabel dipasang JS sesudah kabel tergambar; tanpa JS garis batas biasa (border-bottom) tetap ada. */
.kop-kabel { display: none; position: absolute; left: 0; bottom: -20px; width: 100%; height: 24px; overflow: visible; pointer-events: none; }
.kop-kabel .kabel-tepi { fill: none; stroke: var(--hitam); stroke-width: 1.3; stroke-linecap: round; }
.kop-kabel .kabel-titik { fill: var(--emas); stroke: var(--hitam); stroke-width: 1.2; transition: transform .28s cubic-bezier(.3,.7,.2,1); }
.kop-kabel .kabel-titik.sembunyi { opacity: 0; }
.kop.gulir { box-shadow: 0 10px 18px -16px rgba(9,10,11,.45); }
.menu { display: flex; justify-content: center; gap: 28px; }
.menu a { color: #3f4046; text-decoration: none; font-size: 15px; font-weight: 600; padding: 4px 0; }
.menu a:hover { color: var(--hitam); }
.menu a[aria-current="page"] { color: var(--hitam); font-weight: 800; }
.kop-jaringan .menu { height: 100%; align-items: center; }
.kop-kanan { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* tombol WA selalu tampil: di HP dan 1000–1299px ikon saja (aria-label/title tetap "Chat WhatsApp"), ≥1300px berteks.
   11 Okt 2026: batas berteks naik dari 1180px karena tautan Akun ikut di kop-kanan (menu desktop tak boleh tertindih). */
.kop-kanan .tbl { display: none; min-height: 44px; }
.kop-kanan .kop-wa { display: inline-flex; padding: 0 12px; }
.kop-kanan .kop-wa .tbl-teks { display: none; }
.tombol-menu { width: 46px; height: 46px; border: 0; border-radius: 12px; background: var(--abu); color: var(--hitam); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.kop .laci { display: none; overflow: hidden; }
.kop .laci.buka { display: block; }
.laci-isi { padding: 4px var(--gutter) 16px; }
.laci a:not(.tbl) { display: flex; align-items: center; min-height: 52px; color: var(--hitam); text-decoration: none; font-size: 18px; font-weight: 700; border-top: 1px solid var(--garis); }
.laci .laci-wa { display: flex; width: 100%; margin-top: 12px; }
/* tautan Akun (DESAIN.md §14): ikon di kop sejak 360px (kebanyakan HP Android 360-412px), label "Akun" ≥1300px
   (menu desktop tak boleh tertindih). <360px hanya di laci: logo + 3 tombol 44px tidak muat di 280px isi.
   .kini = sedang di halaman akun mana pun; aria-current hanya di akun.html (bangun.py). */
/* 13 Okt 2026 (pemilik): Akun = tombol emas utama kop (menggantikan Chat WhatsApp); label tampil sejak 420px. */
.kop-akun { display: none; align-items: center; justify-content: center; gap: 8px; width: 46px; height: 46px; border-radius: 12px; background: var(--emas); color: var(--di-emas, var(--hitam)); text-decoration: none; font-size: var(--f-tombol); font-weight: 700; }
.kop-akun:hover { background: var(--emas-tua); color: var(--di-emas, var(--hitam)); }
/* 13 Okt 2026: penanda halaman akun (.kini) TANPA garis: di tombol emas garis hitam terbaca sebagai border. */
/* Judul/wadah yang difokuskan JS (tabindex=-1, untuk pembaca layar) tak perlu cincin fokus: tak bisa dijangkau Tab. */
[tabindex="-1"]:focus { outline: none; }
.kop-akun .kop-akun-teks { display: none; }
/* sudah masuk (aset/kop.js): latar abu + bulatan inisial emas + nama depan */
.kop-akun.sudah { background: var(--abu); color: var(--hitam); }
.kop-akun.sudah:hover { background: var(--garis); color: var(--hitam); }
.kop-inisial { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--emas); color: var(--di-emas, var(--hitam)); font-size: var(--f-kecil); font-weight: 800; flex-shrink: 0; }
.kop-akun-teks { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.laci .laci-akun { gap: 10px; }
.laci-akun svg { flex-shrink: 0; }
.laci-akun.kini { font-weight: 800; }
@media (min-width: 360px) { .kop-akun { display: inline-flex; } }
@media (min-width: 420px) { .kop-akun { width: auto; padding: 0 18px 0 14px; border-radius: 999px; } .kop-akun .kop-akun-teks { display: inline; } }
/* HP sempit: tiga tombol kop 44px (batas sentuh) berjarak 6px. Diukur 12 Okt 2026 (Plus Jakarta Sans 800, Pillow):
   Penanggak 22px = 161px logo + 12 + 144 = 317px, terlalu mepet di isi 320px (layar 360px) → logo 20px di bawah 390px
   (= 146px, sisa 17px; tagar ikut mengecil karena em). mascaFi (logo 40px dari merek.css) muat tanpa perubahan. */
@media (max-width: 419px) {
  .kop-baris { gap: 12px; }
  .kop-kanan { gap: 6px; }
  .kop-akun, .tombol-menu { width: 44px; height: 44px; }
  .kop-kanan .kop-wa { padding: 0 11px; }
}
@media (max-width: 389px) {
  .merek-besar { font-size: 20px; }
  .merek-besar img { width: 30px; }
}

/* ---------- karosel pembuka ---------- */
.karosel { padding: 12px 0 0; }
.karosel-jalur { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; border-radius: 28px; scrollbar-width: none; }
.karosel-jalur::-webkit-scrollbar { display: none; }
/* layar sempit: tinggi jalur mengikuti slide aktif (diatur karosel.js), tiap slide setinggi isinya sendiri.
   Tanpa ini semua slide meregang setinggi slide terpanjang (promo) dan slide pembuka berlubang di bawah tombol. */
.karosel-jalur.ikut-tinggi { align-items: flex-start; overflow-y: hidden; transition: height .35s ease; }
.slide { flex: 0 0 100%; scroll-snap-align: start; position: relative; overflow: hidden; border-radius: 28px; min-height: 460px; padding: 32px 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.slide-teks { position: relative; z-index: 1; display: grid; gap: 16px; justify-items: start; max-width: 34em; }
.slide-judul { font-size: var(--f-display); font-weight: 800; line-height: 1.05; letter-spacing: -0.04em; max-width: 14ch; color: inherit; }
.slide p { font-size: var(--f-lead); line-height: 1.5; max-width: 30em; }
.slide-emas { background: var(--emas); color: var(--hitam); }
.slide-gelap { background: var(--hitam); color: var(--putih); }
.slide-gelap p { color: #d4d4d8; }
.slide-terang { background: var(--abu); color: var(--hitam); }
.slide-terang p { color: var(--teks-2); }
.slide-gambar { align-self: flex-end; width: 62%; max-width: 360px; height: auto; }
.slide-emas .lanskap { margin: 0 -24px -32px; width: calc(100% + 48px); height: 150px; }
.karosel-kendali { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 14px; }
/* titik: bidang sentuh 28×28 (≥24×24), garisnya digambar ::before supaya tetap tipis */
.karosel-titik { display: flex; }
.karosel-titik button { position: relative; width: 28px; height: 28px; border: 0; padding: 0; background: transparent; border-radius: 8px; cursor: pointer; }
.karosel-titik button::before { content: ""; position: absolute; left: 4px; right: 4px; top: 11px; height: 6px; border-radius: 3px; background: #d9d9d6; transition: background-color .15s, left .15s, right .15s; }
.karosel-titik button:hover::before { background: #b9b9b6; }
.karosel-titik button[aria-current="true"]::before { left: 2px; right: 2px; background: var(--hitam); }
.karosel-panah { display: flex; gap: 8px; margin-left: auto; }
.karosel-panah button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #d4d4d8; background: var(--putih); color: var(--hitam); font-size: 24px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.karosel-panah button[hidden] { display: none; }
.karosel-panah button:hover { border-color: var(--hitam); }
.karosel-jeda svg { width: 18px; height: 18px; }
.karosel-jeda[aria-pressed="true"] { background: var(--hitam); border-color: var(--hitam); color: var(--putih); }

/* ilustrasi kampung (tiang, rumah, kabel) */
.lanskap .tanah, .lanskap .tiang, .lanskap .bangunan { stroke: var(--hitam); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.lanskap .bangunan { fill: #fff8e1; }
.lanskap .kabel-utama { stroke: var(--hitam); fill: none; stroke-width: 4; stroke-linecap: round; }
.lanskap .turun, .lanskap .sinyal { stroke: var(--hitam); fill: none; stroke-width: 2.5; stroke-linecap: round; }
.lanskap .sinyal { stroke-width: 4; }
.lanskap .jendela { fill: var(--hitam); stroke: none; }

/* ---------- bagian ---------- */
.bagian { padding: 40px 0; }
.bagian-rapat { padding: 36px 0 8px; }
.bagian-kepala { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 32px; margin-bottom: 24px; }
.bagian-kepala > div { display: grid; gap: 8px; }
.bagian-kepala > a { font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
.judul-halaman { padding: 40px 0 8px; }
.judul-halaman h1 { max-width: 18ch; }
.judul-halaman .lead { margin-top: 16px; }

/* baris ikon layanan */
.baris-layanan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 8px; }
.baris-layanan a { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--hitam); text-decoration: none; font-size: 14px; font-weight: 600; line-height: 1.3; }
.ikon-bulat { width: 64px; height: 64px; border-radius: 20px; background: var(--abu); display: flex; align-items: center; justify-content: center; transition: background-color .15s; }
.ikon-bulat svg { width: 30px; height: 30px; }
.baris-layanan a:hover .ikon-bulat { background: var(--emas); }

/* kartu kabar */
.kabar-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.kabar-grid li { display: flex; }
.kabar-grid a { flex: 1; display: grid; align-content: start; gap: 10px; padding: 20px; border-radius: var(--radius); border: 1px solid var(--garis); color: var(--hitam); text-decoration: none; }
.kabar-grid a:hover { border-color: var(--hitam); }
.kabar-grid img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; background: var(--abu); }
.kabar-grid p { color: var(--teks-2); font-size: 15px; }
.foto-utama { width: 100%; height: auto; max-height: 560px; object-fit: cover; border-radius: var(--radius); margin-top: 20px; }
.kabar-sub { margin: 40px 0 16px; font-size: 24px; }
.kabar-catatan { margin-top: 22px; max-width: 760px; padding: 14px 16px; border-radius: 14px; background: var(--abu); font-size: 15px; }

/* prinsip / langkah / daftar tautan */
.prinsip { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.prinsip li { padding: 22px; border-radius: var(--radius); background: var(--abu); }
.prinsip b { display: block; font-size: var(--f-h3); font-weight: 700; letter-spacing: -0.015em; margin-bottom: 6px; color: var(--hitam); }
.prinsip span { color: var(--teks-2); }

.tanya { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }
.tanya li { display: grid; gap: 10px; max-width: 46em; }
.tanya .lama { font-size: 15px; color: var(--teks-2); text-decoration: line-through; text-decoration-color: rgba(9,10,11,.35); }
.tanya .baru { font-size: clamp(24px, 3vw, 32px); font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; }
.tanya .baru::after { content: ""; display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--emas); margin-top: 14px; }
.tanya p { color: var(--teks-2); max-width: 34em; }

.kabel { list-style: none; margin: 0; padding: 0 0 0 52px; position: relative; display: grid; gap: 26px; }
.kabel::before { content: ""; position: absolute; left: 17px; top: 8px; bottom: 8px; width: 3px; background: var(--garis); border-radius: 2px; }
.kabel .kabel-isi { position: absolute; left: 17px; top: 8px; bottom: 8px; width: 3px; background: var(--hitam); border-radius: 2px; transform-origin: top; }
.kabel li { position: relative; }
.kabel .simpul { position: absolute; left: -52px; top: -4px; width: 38px; height: 38px; border-radius: 50%; background: var(--emas); border: 3px solid var(--hitam); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; color: var(--hitam); }
.kabel b { display: block; font-size: var(--f-h3); font-weight: 700; color: var(--hitam); }
.kabel span { color: var(--teks-2); }

.baris-daftar { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--hitam); }
.baris-daftar > li { display: grid; gap: 10px; padding: 22px 0; border-bottom: 1px solid var(--garis); scroll-margin-top: 90px; }
.baris-daftar p { color: var(--teks-2); max-width: 36em; }
.baris-daftar .tbl { justify-self: start; }
.butir { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; font-weight: 600; color: var(--teks); }
.butir li::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--emas); border: 1.5px solid var(--hitam); vertical-align: 1px; }

.tautan-besar { list-style: none; margin: 0; padding: 0; display: grid; border-top: 2px solid var(--hitam); }
.tautan-besar li { display: flex; }
.tautan-besar a { flex: 1; display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--garis); color: var(--hitam); text-decoration: none; }
.tautan-besar b { font-size: var(--f-h3); font-weight: 700; letter-spacing: -0.015em; }
.tautan-besar span { grid-column: 1; color: var(--teks-2); font-size: 15px; }
.tautan-besar svg { grid-column: 2; grid-row: 1 / span 2; width: 24px; height: 24px; transition: transform .2s; }
.tautan-besar a:hover b { text-decoration: underline; text-underline-offset: 5px; }
.tautan-besar a:hover svg { transform: translateX(4px); }

.langkah-panduan { list-style: none; margin: 0; padding: 0; counter-reset: lp; display: grid; gap: 12px; max-width: 760px; }
.langkah-panduan li { counter-increment: lp; display: grid; grid-template-columns: 44px 1fr; gap: 4px 16px; padding: 18px; border-radius: var(--radius); background: var(--abu); }
.langkah-panduan li::before { content: counter(lp); grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; background: var(--hitam); color: var(--emas); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.langkah-panduan b { font-size: 18px; color: var(--hitam); }
.langkah-panduan span { color: var(--teks-2); }

.aturan { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 760px; }
.aturan li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; color: var(--teks); }
.aturan li::before { content: ""; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--emas) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23090a0b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 14px no-repeat; }

/* belajar */
.kelompok { font-size: 17px; margin: 28px 0 12px; }
.kelompok:first-child { margin-top: 0; }
.sumber-grid, .panduan-daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sumber-grid a { display: grid; gap: 6px; height: 100%; padding: 18px; border-radius: var(--radius); border: 1px solid var(--garis); color: var(--hitam); text-decoration: none; }
.sumber-grid a:hover { border-color: var(--hitam); }
.sumber-grid em { font-style: normal; font-size: var(--f-kecil); font-weight: 600; color: var(--emas-teks); }
.sumber-grid b { font-size: 18px; letter-spacing: -0.015em; }
.sumber-grid span { color: var(--teks-2); font-size: 15px; }
.panduan-daftar a { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; height: 100%; padding: 20px; border-radius: var(--radius); background: var(--abu); color: var(--hitam); text-decoration: none; }
.panduan-daftar a:hover { background: var(--emas); }
.panduan-daftar b { font-size: 18px; letter-spacing: -0.015em; }
.panduan-daftar span { grid-column: 1; color: var(--teks-2); font-size: 15px; }
.panduan-daftar svg { grid-column: 2; grid-row: 1 / span 2; width: 24px; height: 24px; }

/* cctv */
.cctv-program { display: grid; gap: 28px; }
/* 29 Sep 2026: layar live lebar penuh (pemilik: "layar live-nya diperbesar"), aturan jadi kotak ringkas di bawah */
.cctv-layar-besar { min-width: 0; display: grid; gap: 32px; }
.cctv-lokasi-kepala { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.cctv-lokasi-judul { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: var(--f-h3); }
.cctv-lokasi-judul .ikon { flex: none; width: 26px; height: 26px; color: var(--emas-teks); }
.cctv-lokasi-alamat { margin: 2px 0 0 34px; font-size: var(--f-kecil); color: var(--teks-2); }
/* 30 Sep: titik terjadwal yang kameranya belum terpasang */
.cctv-segera { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; border-radius: 16px; background: repeating-linear-gradient(135deg, #1f2226 0 14px, #1b1d21 14px 28px); }
.cctv-segera > svg { width: 64px; height: 64px; color: #5b6270; }
.cctv-segera-label { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(9, 10, 11, .72); color: #fff; font-size: var(--f-kecil); font-weight: 600; }
.cctv-segera-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--emas); }
.tbl.tbl-kecil { min-height: 0; padding: 7px 14px; font-size: var(--f-kecil); }
.cctv-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.cctv-aturan { padding: 18px 20px; border-radius: var(--radius); background: var(--abu); }
.cctv-aturan .judul-kecil { margin: 0 0 10px; font-size: var(--f-isi); }
.cctv-aturan .aturan { gap: 8px; max-width: none; font-size: var(--f-kecil); color: var(--teks-2); }
.cctv-aturan .aturan li { grid-template-columns: 18px 1fr; gap: 8px; color: var(--teks-2); }
.cctv-aturan .aturan li::before { width: 16px; height: 16px; margin-top: 1px; background-size: 10px; }
.cctv-aturan p { margin: 14px 0 0 !important; }
/* satu kamera saja (penanggak.com): tetap besar, tapi setinggi ±70% layar supaya utuh terlihat */
.cctv-grid > li:only-child { width: 100%; max-width: min(100%, calc(70vh * 16 / 9)); }
.cctv-grid figure { margin: 0; }
.cctv-grid img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; background: #1f2023; }
.cctv-grid figcaption { margin-top: 8px; font-weight: 700; }
.cctv-grid figcaption span { display: block; font-weight: 500; font-size: var(--f-kecil); color: var(--teks-2); }
.cctv-video { position: relative; }
/* 1 Okt 2026: tombol layar penuh, pojok kanan bawah, ikon putih tanpa latar (senada ikon live) */
.cctv-penuh { position: absolute; right: 6px; bottom: 6px; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); }
/* 1 Okt 2026: tombol suara (kiri tombol layar penuh) + kotak kode; keduanya & layar penuh disembunyikan saat offline */
.cctv-suara { position: absolute; right: 44px; bottom: 6px; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); }
.cctv-suara .cctv-suara-on { display: none; }
.cctv-suara[aria-pressed="true"] .cctv-suara-on { display: inline; }
.cctv-suara[aria-pressed="true"] .cctv-suara-off { display: none; }
.cctv-suara:focus-visible { outline: 2px solid #fff; outline-offset: 1px; border-radius: 6px; }
.cctv-mati .cctv-penuh, .cctv-mati .cctv-suara, .cctv-mati .cctv-kode { display: none; }
.cctv-audio { display: none; }
.cctv-kode { position: absolute; left: 50%; bottom: 48px; z-index: 3; transform: translateX(-50%); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: min(300px, calc(100% - 24px)); padding: 10px 12px; border-radius: 12px; background: rgba(9, 10, 11, .86); color: #fff; font-size: var(--f-kecil); }
.cctv-kode[hidden] { display: none; }
.cctv-kode label { display: flex; flex: 1; flex-direction: column; gap: 4px; font-weight: 600; }
.cctv-kode input { width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; font: inherit; font-weight: 700; letter-spacing: .15em; }
.cctv-kode button[type="submit"] { align-self: flex-end; padding: 8px 12px; border: 0; border-radius: 8px; background: var(--emas); color: var(--di-emas, #090a0b); font: inherit; font-weight: 700; cursor: pointer; }
.cctv-kode-tutup { position: absolute; top: 2px; right: 6px; padding: 0 4px; border: 0; background: none; color: #fff; font-size: 18px; cursor: pointer; }
.cctv-kode small { flex-basis: 100%; color: #fca5a5; }
.cctv-kode small:empty { display: none; }
.cctv-penuh:focus-visible { outline: 2px solid #fff; outline-offset: 1px; border-radius: 6px; }
.cctv-penuh-tutup { display: none; }
.cctv-video:fullscreen .cctv-penuh-buka, .cctv-video:-webkit-full-screen .cctv-penuh-buka { display: none; }
.cctv-video:fullscreen .cctv-penuh-tutup, .cctv-video:-webkit-full-screen .cctv-penuh-tutup { display: inline; }
.cctv-video:fullscreen, .cctv-video:-webkit-full-screen { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: #000; }
.cctv-video:fullscreen video, .cctv-video:fullscreen img, .cctv-video:-webkit-full-screen video, .cctv-video:-webkit-full-screen img { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: contain; border-radius: 0; }
.cctv-video:fullscreen .cctv-status, .cctv-video:-webkit-full-screen .cctv-status { border-radius: 0; }
/* 1 Okt 2026: siaran live tanpa tombol apa pun — sembunyikan ikon play/kontrol bawaan Safari/Chrome HP */
.cctv-video video::-webkit-media-controls, .cctv-video video::-webkit-media-controls-start-playback-button,
.cctv-video video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }
.cctv-video video { pointer-events: none; }
.cctv-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; background: #1f2023; }
/* 16 Okt 2026 (pemilik, ide E): penanda siaran = tag ala siaran TV di judul halaman CCTV: "LIVE" merah + jam WITA hitam.
   h1 flex: tag di POJOK KANAN sejajar tepi kanan grid kamera (pemilik 16 Okt: menempel judul terasa menumpuk), tengah tinggi
   baris judul; di HP judul memenuhi lebar → tag turun ke baris berikut, rata kiri. */
.judul-halaman h1.h1-lencana { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 16px; row-gap: 10px; max-width: none; }
.judul-halaman h1.h1-lencana > span:first-child { flex: 0 1 auto; min-width: 0; }
.cctv-live { flex: none; display: inline-flex; border-radius: 5px; overflow: hidden; font-size: 13px; font-weight: 700; letter-spacing: .06em; line-height: 1; }
.cctv-live-merah { padding: 7px 9px; background: #d92d20; color: #fff; }
.cctv-live-jam { padding: 7px 9px; background: #1f2024; color: #fff; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.cctv-live-jam[hidden] { display: none; }
/* 1 Okt 2026: keadaan offline di DALAM kotak siaran — label sudut "Offline" (abu), layar "tanpa sinyal" bergaris halus,
   ikon kamera dicoret dengan cincin mencari sinyal (berdenyut hanya bila pengunjung tak meminta gerak minimal) */
.cctv-offline { display: none; position: absolute; top: 12px; right: 12px; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(9, 10, 11, .72); color: #fff; font-size: var(--f-kecil); font-weight: 600; pointer-events: none; z-index: 1; }
.cctv-offline::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #8b8f98; }
.cctv-mati .cctv-offline { display: inline-flex; }
.cctv-status { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin: 0; padding: 24px; border-radius: 16px; text-align: center;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 4px), radial-gradient(ellipse at center, #272a30 0%, #16181b 72%); color: #e4e4e7; }
.cctv-status[hidden] { display: none; }
.cctv-sinyal { position: relative; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: rgba(255, 255, 255, .06); color: #8b8f98; }
.cctv-sinyal svg { width: 38px; height: 38px; }
.cctv-sinyal::before, .cctv-sinyal::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .22); opacity: 0; }
.cctv-sinyal::before, .cctv-sinyal::after { animation: cctv-cari 2.4s ease-out infinite; }   /* selalu: browser pemilik reduced-motion */
.cctv-sinyal::after { animation-delay: 1.2s; }
@keyframes cctv-cari { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }
@media (max-width: 480px) { .cctv-sinyal { width: 56px; height: 56px; } .cctv-sinyal svg { width: 30px; height: 30px; } }
.cctv-uji { margin-left: 6px; font-style: normal; font-size: var(--f-kecil); font-weight: 600; color: var(--emas-teks); }
.cctv-uji-sendiri { margin-left: 0; }   /* 1 Okt: label "Uji coba" tanpa "Kamera N" di depannya, rata dengan layar */
.rekaman-kode { max-width: 420px; }
.rekaman-kode-baris { display: flex; gap: 10px; }
.rekaman-kode-baris input { flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid var(--garis); border-radius: 12px; font: inherit; font-weight: 700; letter-spacing: .2em; }
.rekaman-kode-pesan { margin: 10px 0 0; font-size: var(--f-kecil); color: var(--teks-2); }
/* tahap 1 akun pengurus (11 Okt 2026): tombol masuk di bawah kotak kode; blok "Masuk lagi" ditampilkan rekaman.js */
.rekaman-pengurus { margin-top: 16px; }
.rekaman-masuk-lagi { display: grid; gap: 12px; justify-items: start; max-width: 420px; }
.rekaman-masuk-lagi[hidden] { display: none; }
/* Jarak atas 24px untuk .bagian (pengganti style="padding-top:24px" sebaris di rekaman.html, CSP style-src-attr).
   Dua kelas supaya menang dari .bagian di @media lebar (yang ditulis lebih bawah). */
.bagian.bagian-atas-24 { padding-top: 24px; }
.rekaman { display: grid; gap: 14px; max-width: 880px; }
.rekaman .rekaman-video { max-height: 58vh; object-fit: contain; }
.rekaman-kendali { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.rekaman-lompat { padding: 8px 12px; border: 1px solid var(--garis); border-radius: 10px; background: var(--putih); font: inherit; font-size: var(--f-kecil); font-weight: 600; cursor: pointer; }
.rekaman-waktu { min-width: 88px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.rekaman-garis { position: relative; height: 44px; border-radius: 10px; background: var(--abu); cursor: pointer; touch-action: manipulation; overflow: hidden; }
.rekaman-garis:focus-visible { outline: 2px solid var(--hitam); outline-offset: 2px; }
.rekaman-blok span { position: absolute; top: 0; bottom: 0; }
.rb-rekam { top: 12px !important; bottom: 12px !important; background: #b9bcc3; border-radius: 2px; }
.rb-gerak { width: 2px; margin-left: -1px; background: #e5484d; }
.rekaman-kepala { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--hitam); pointer-events: none; }
.rekaman-kepala::before { content: ""; position: absolute; top: -1px; left: -5px; border: 6px solid transparent; border-top-color: var(--hitam); }
.rekaman-skala { position: relative; height: 18px; font-size: var(--f-kecil); color: var(--teks-2); }
.rekaman-skala span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.rekaman-sedang { margin: 0; font-size: var(--f-kecil); color: var(--teks-2); }
.rekaman-titik { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #e5484d; }
.rekaman-bawah { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 0; font-size: var(--f-kecil); }
.rekaman-kunci { padding: 0; border: 0; background: none; color: var(--teks-2); font: inherit; font-size: var(--f-kecil); text-decoration: underline; cursor: pointer; }
/* 1 Okt 2026: pilih lokasi (daftar pilihan bila lokasi > 1, atau judul lokasi bila satu) lalu kamera di lokasi itu */
.rekaman-pilih { display: grid; gap: 12px; }
.rekaman-pilih .cctv-lokasi-kepala { margin-bottom: 0; }
.rekaman-lokasi { display: grid; gap: 6px; max-width: 420px; }
.rekaman-label { font-size: var(--f-kecil); font-weight: 600; color: var(--teks-2); }
.rekaman-lokasi select { padding: 12px 14px; border: 1px solid var(--garis); border-radius: 12px; background: var(--putih); color: var(--teks); font: inherit; font-weight: 700; }
.rekaman-kelompok { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rekaman-kelompok[hidden] { display: none; }
.rekaman-alamat { flex-basis: 100%; margin: -4px 0 0; font-size: var(--f-kecil); color: var(--teks-2); }
.rekaman-kamera { display: grid; gap: 2px; padding: 10px 16px; border: 1px solid var(--garis); border-radius: 14px; background: var(--putih); color: var(--teks); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.rekaman-kamera span { font-size: var(--f-kecil); font-weight: 500; color: var(--teks-2); }
.rekaman-kamera[aria-pressed="true"] { border-color: var(--hitam); box-shadow: inset 0 0 0 1px var(--hitam); }
.rekaman-kamera[hidden] { display: none; }   /* 1 Okt: kamera tunggal di lokasinya tak diberi tombol "Kamera N" */
.rekaman-video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; background: #1f2023; }
.cctv-layar { display: grid; gap: 14px; padding: 22px; border-radius: var(--radius); background: #16181b; color: #d4d4d8; }
.cctv-layar .kotak { aspect-ratio: 16 / 9; border-radius: 14px; background: repeating-linear-gradient(135deg, #1f2226 0 14px, #1b1d21 14px 28px); display: flex; align-items: center; justify-content: center; }
.cctv-layar .kotak svg { width: 72px; height: 72px; color: #5b6270; }

/* peta */
.peta-bungkus { display: grid; gap: 12px; }
.peta { height: 360px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--garis); background: #eef0ee; z-index: 0; }
.peta-penuh .peta { height: min(72vh, 680px); }
.peta-bawah { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.peta-info { font-size: 15px; color: var(--teks-2); }
.peta-hasil { font-weight: 700; min-height: 1.6em; }
.peta .leaflet-control-attribution { font-size: 10px; }
.peta-ubin { filter: grayscale(1) contrast(0.9) brightness(1.05); }
/* klaster titik (leaflet.markercluster): lingkaran warna merek berisi jumlah titik; pecah saat diperbesar */
.klaster { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--emas); border: 2px solid var(--hitam); color: var(--hitam); font-weight: 800; font-size: 13px; letter-spacing: -0.02em; box-shadow: 0 0 0 4px rgba(255, 255, 255, .7); }
.klaster-besar { font-size: 15px; }
/* peta ringkas di HP: satu jari menggulir halaman, dua jari menggeser peta; petunjuk muncul sebentar saat satu jari menyeret */
.peta-petunjuk { position: absolute; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 20px; text-align: center; background: rgba(9, 10, 11, .5); color: var(--putih); font-weight: 700; font-size: 17px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.peta-petunjuk.tampil { opacity: 1; }

/* agenda + jadwal sholat */
.agenda { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--hitam); }
.agenda li { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--garis); }
.agenda h3 { font-size: 18px; }
.agenda p { color: var(--teks-2); font-size: 15px; margin-top: 4px; }
.agenda-bulan { font-size: 20px; margin: 36px 0 10px; }
.agenda-bulan:first-child { margin-top: 0; }
.tgl { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 58px; height: 62px; border-radius: 12px; border: 2px solid var(--hitam); line-height: 1; color: var(--hitam); }
.tgl b { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }
.tgl span { font-size: 12px; font-weight: 700; margin-top: 4px; }
.jenis { display: inline-block; margin-bottom: 4px; font-size: var(--f-kecil); font-weight: 700; }
.jenis-nasional { color: #b42318; }
.jenis-desa { color: var(--emas-teks); }
.kartu-sholat .hari-ini { padding: 18px 18px 10px; border-radius: var(--radius); background: var(--hitam); color: var(--putih); }
.hari-ini h2 { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 700; letter-spacing: 0; color: #b4b4ba; }
.hari-ini h2 span { color: var(--putih); }
.sholat { list-style: none; margin: 12px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sholat li { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 12px; background: #1f2023; }
.sholat span { font-size: var(--f-kecil); font-weight: 600; color: #b4b4ba; }
.sholat b { font-size: 20px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sholat li.kini { background: var(--emas); color: var(--hitam); }
.sholat li.kini span { color: var(--hitam); }
.hari-ini .catatan { margin: 8px 2px 8px; font-size: 12px; color: #8c8c93; }
.sorot-agenda { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 2px 10px; border-top: 1px solid #2a2b2f; color: var(--putih); text-decoration: none; }
.sorot-agenda:hover { color: var(--putih); }
.sorot-agenda .tgl { border-color: var(--emas); color: var(--emas); }
.sorot-agenda small { display: block; font-size: var(--f-kecil); font-weight: 600; color: #b4b4ba; }
.sorot-agenda strong { display: block; font-size: 18px; line-height: 1.25; }

/* bantuan */
.bantuan-ringkas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 24px; border-radius: 24px; background: var(--abu); }
.bantuan-ringkas h2 { font-size: 24px; }
.bantuan-ringkas .lead { margin-top: 6px; font-size: var(--f-isi); }
.tj { max-width: 820px; border-top: 2px solid var(--hitam); }
.tj details { border-bottom: 1px solid var(--garis); }
.tj summary { list-style: none; cursor: pointer; min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; font-size: 18px; font-weight: 700; color: var(--hitam); }
.tj summary::-webkit-details-marker { display: none; }
.tj summary svg { flex-shrink: 0; transition: transform .2s; }
.tj details[open] summary svg { transform: rotate(45deg); }
.tj .jawab { padding: 0 0 20px; color: var(--teks-2); max-width: 40em; }
.tj .jawab p + p { margin-top: 10px; font-weight: 700; }
.nomor-penting { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.nomor-penting a { display: flex; flex-direction: column; padding: 14px 16px; border-radius: 16px; border: 2px solid var(--hitam); color: var(--hitam); text-decoration: none; }
.nomor-penting b { font-size: 34px; letter-spacing: -0.04em; line-height: 1; }
.nomor-penting span { margin-top: 6px; font-size: 14px; color: var(--teks-2); }
.nomor-penting a:hover { background: var(--hitam); color: var(--putih); }
.nomor-penting a:hover span { color: #d4d4d8; }

/* halaman asal nama (kampung) */
.kampung-grid { display: grid; gap: 32px; }
.arti { display: grid; gap: 4px; }
.arti p { font-size: clamp(40px, 9vw, 88px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; color: var(--hitam); }
.arti p span { font-weight: 400; color: var(--emas-teks); letter-spacing: -0.03em; }
.kampung-grid .kampung-teks { margin-top: 24px; }
.mata-air { margin-top: 32px; }
.mata-air h3, .dasan h3, .tetangga h3 { font-size: 17px; margin-bottom: 12px; }
.mata-air ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mata-air li { padding: 6px 14px; border-radius: 999px; background: var(--abu); font-size: 15px; font-weight: 600; }
.dasan ul { list-style: none; margin: 0; padding: 0; }
.dasan > ul { display: grid; gap: 14px; }
.dasan > ul > li { border-top: 2px solid var(--hitam); padding-top: 10px; }
.dasan b { display: block; font-size: 19px; letter-spacing: -0.01em; }
.dasan li ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dasan li li { padding: 4px 12px; border-radius: 999px; border: 1.5px solid #c9c9ce; font-size: 15px; font-weight: 600; }
.dasan li li.kita { background: var(--emas); border-color: var(--hitam); font-weight: 800; }
.tetangga-peta { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 6px; text-align: center; font-size: 14px; }
.tetangga-peta div { display: flex; flex-direction: column; justify-content: center; padding: 10px 6px; border-radius: 12px; background: var(--abu); }
.tetangga-peta small { font-size: 12px; font-weight: 600; color: var(--teks-2); }
.tetangga-peta b { font-size: 15px; }
.tetangga-peta .pusat { grid-column: 2; grid-row: 2; background: var(--emas); font-size: 17px; }
.tetangga-peta .u { grid-column: 2; grid-row: 1; } .tetangga-peta .s { grid-column: 2; grid-row: 3; }
.tetangga-peta .b { grid-column: 1; grid-row: 2; } .tetangga-peta .t { grid-column: 3; grid-row: 2; }
.tonggak { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--hitam); }
.tonggak li { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--garis); }
.tonggak b { font-size: 18px; color: var(--hitam); }
.tonggak span { color: var(--teks-2); }
.hidup { display: grid; gap: 22px; }
.hidup h3 { margin-bottom: 6px; }
.hidup p { color: var(--teks-2); }
.angka { display: flex; flex-wrap: wrap; gap: 24px 56px; }
.angka b { display: block; font-size: 48px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.angka span { font-size: 15px; color: var(--teks-2); }

/* ---------- kaki ---------- */
.kaki { border-top: 1px solid var(--garis); padding: 36px 0 28px; font-size: 15px; }
.kaki-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.kaki-merek { grid-column: 1 / -1; display: grid; gap: 6px; color: var(--teks-2); }
.kaki-merek .merek { font-size: 20px; margin-bottom: 4px; }
.kaki h3 { font-size: 15px; letter-spacing: 0; margin-bottom: 8px; }
.kaki ul { list-style: none; margin: 0; padding: 0; }
.kaki li a { display: inline-flex; align-items: center; min-height: 36px; color: var(--teks-2); text-decoration: none; }
.kaki li a:hover { color: var(--hitam); text-decoration: underline; }

/* ---------- gerak: keadaan awal hanya bila gerak.js akan jalan ---------- */
.gerak .lanskap .kabel-utama, .gerak .lanskap .turun, .gerak .lanskap .sinyal { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .ikon-bulat, .tautan-besar svg, .tj summary svg, .kop-kabel .kabel-titik, .karosel-jalur.ikut-tinggi, .karosel-titik button::before { transition: none; }
}

/* ---------- layar sedang ---------- */
@media (min-width: 720px) {
  :root { --gutter: 36px; }
  .bagian { padding: 64px 0; }
  .bagian-rapat { padding: 48px 0 8px; }
  .bagian-kepala { margin-bottom: 32px; }
  .judul-halaman { padding-top: 64px; }
  .slide { min-height: 520px; padding: 56px; flex-direction: row; align-items: center; }
  .slide-emas { align-items: flex-start; padding-bottom: 210px; }
  .slide-emas .lanskap { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; width: 100%; height: auto; }
  .slide-gambar { width: 38%; align-self: center; }
  .baris-layanan { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .kabar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prinsip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .tanya { gap: 56px; }
  .baris-daftar > li { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) 240px; align-items: start; gap: 12px 40px; padding: 32px 0; }
  .baris-daftar .tbl { justify-self: end; }
  .tautan-besar { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
  .sumber-grid, .panduan-daftar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .cctv-grid { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 24px; }
  /* 29 Sep: lebih dari satu kamera di halaman (beberapa lokasi) → semua layar 2 kolom sama besar, termasuk lokasi
     yang kameranya cuma satu (pemilik: layar Gang Kosan harus seukuran layar masjid) */
  /* 30 Sep: lokasi berkamera satu kini berdampingan dua per baris (tak ada lagi ruang kosong di kanan);
     lokasi berkamera banyak memakai baris penuh, layarnya tetap 2 kolom → semua layar tetap sama besar */
  .cctv-banyak { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .cctv-banyak .cctv-lokasi-banyak { grid-column: 1 / -1; }
  .cctv-banyak .cctv-grid { grid-template-columns: minmax(0, 1fr); }
  .cctv-banyak .cctv-lokasi-banyak .cctv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cctv-banyak .cctv-grid > li:only-child { max-width: none; }
  .cctv-aturan .aturan { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .peta { height: 460px; }
  .agenda li { grid-template-columns: 70px minmax(0, 1fr); gap: 22px; padding: 20px 0; }
  .tgl { width: 70px; height: 74px; }
  .tgl b { font-size: 30px; }
  .agenda h3 { font-size: 21px; }
  .sholat { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bantuan-ringkas { padding: 32px 40px; }
  .nomor-penting { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kampung-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; }
  .hidup { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; }
  .dasan > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  /* 720-999px: merek selebar baris, 4 kolom tautan di bawahnya (≥1000px: lihat layar lebar) */
  .kaki-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- layar lebar ---------- */
@media (min-width: 1000px) and (max-width: 1179px) {
  .kop-baris { gap: 20px; }
  .menu { gap: 18px; }
}
@media (min-width: 1300px) {
  .kop-kanan .kop-wa { padding: 0 22px; }
  .kop-kanan .kop-wa .tbl-teks { display: inline; }
  .kop-akun { width: auto; padding: 0 18px 0 14px; }
  .kop-akun .kop-akun-teks { display: inline; }
}
@media (min-width: 1000px) {
  :root { --gutter: 48px; }
  .kop-baris { min-height: 76px; }
  .kop-jaringan { display: block; }
  .kop-kabel { display: block; }
  .kop.berkabel { border-bottom-color: transparent; }
  .kop-kanan .tbl { display: inline-flex; }
  .kop-akun { height: 44px; border-radius: 999px; }
  .tombol-menu, .kop .laci { display: none !important; }
  /* kaki 5 kolom (merek + 4 kolom tautan, 11 Okt 2026: + "Akun CCTV") */
  .kaki-grid { grid-template-columns: 2fr repeat(4, minmax(0, 1fr)); }
  .kaki-merek { grid-column: auto; }
  .kabel { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding: 60px 0 0; }
  .kabel::before, .kabel .kabel-isi { left: 19px; right: calc((100% - 96px) / 4 - 19px); top: 17px; bottom: auto; width: auto; height: 3px; }
  .kabel .kabel-isi { transform-origin: left; }
  .kabel .simpul { left: 0; top: -60px; }
  .kartu-sholat .hari-ini { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 40px; align-items: center; }
  .kartu-sholat .sorot-agenda { border-top: 0; border-left: 1px solid #2a2b2f; padding-left: 32px; }
}

/* produk (ala IndiHome): kartu ikon + kategori + judul. Beranda = kartu tautan; produk.html = kartu lengkap */
.produk-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.produk > .kartu-produk, .produk-lengkap .produk { position: relative; height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px; border: 1px solid var(--garis); border-radius: var(--radius); background: var(--putih); color: var(--teks); text-decoration: none; scroll-margin-top: 90px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.produk .ikon-bulat { flex-shrink: 0; width: 56px; height: 56px; border-radius: 16px; background: #fff4d6; margin-bottom: 10px; }
.produk .ikon-bulat svg { width: 28px; height: 28px; }
.produk .meta { font-size: var(--f-kecil); font-weight: 600; color: var(--emas-teks); }
.produk h3 { font-size: var(--f-h3); font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; color: var(--hitam); margin: 0; }
.produk p { color: var(--teks-2); margin: 0; font-size: 15px; line-height: 1.55; }
.produk .lanjut { margin-top: auto; padding-top: 12px; font-weight: 700; font-size: var(--f-tombol); color: var(--hitam); display: inline-flex; align-items: center; gap: 6px; }
.produk .lanjut::after { content: "→"; transition: transform .15s; }
.kartu-produk:hover { border-color: var(--hitam); box-shadow: 0 10px 28px rgba(9, 10, 11, .08); transform: translateY(-2px); }
.kartu-produk:hover .ikon-bulat { background: var(--emas); }
.kartu-produk:hover .lanjut::after { transform: translateX(3px); }
.produk-lengkap .produk:target { border-color: var(--hitam); box-shadow: 0 0 0 3px var(--emas); }
.produk-lengkap .butir { flex-direction: column; margin: 4px 0 8px; }
.produk-lengkap .tbl { margin-top: auto; }
@media (prefers-reduced-motion: reduce) { .kartu-produk, .produk .lanjut::after { transition: none; } .kartu-produk:hover { transform: none; } }
@media (min-width: 720px) {
  .produk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
/* beranda di layar sempit: 8 kartu penuh = ±2.500 px gulir; jadi petak ringkas 2 kolom (ikon + judul),
   rinciannya tetap di halaman Produk. Kartu lengkap (.produk-lengkap) tidak ikut. */
@media (max-width: 719px) {
  .produk-grid:not(.produk-lengkap) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .produk-grid:not(.produk-lengkap) .kartu-produk { padding: 14px 14px 16px; gap: 4px; }
  .produk-grid:not(.produk-lengkap) .ikon-bulat { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 6px; }
  .produk-grid:not(.produk-lengkap) .ikon-bulat svg { width: 22px; height: 22px; }
  .produk-grid:not(.produk-lengkap) h3 { font-size: 16px; line-height: 1.25; }
  .produk-grid:not(.produk-lengkap) .meta, .produk-grid:not(.produk-lengkap) p, .produk-grid:not(.produk-lengkap) .lanjut { display: none; }
}
@media (min-width: 1000px) {
  .produk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* paket & harga (ala IndiHome): tab radio tanpa JS, kartu harga */
.paket > input { position: absolute; opacity: 0; pointer-events: none; }
.paket > label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; margin: 0 8px 20px 0; border-radius: 999px; border: 1.5px solid var(--hitam); font-weight: 700; font-size: var(--f-tombol); cursor: pointer; }
.paket > input:checked + label { background: var(--hitam); color: var(--putih); }
.paket > input:focus-visible + label { outline: 3px solid var(--emas); outline-offset: 2px; }
.paket-panel { display: none; }
#paket-pocer:checked ~ .paket-pocer, #paket-rumah:checked ~ .paket-rumah { display: block; }
.paket-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.paket-grid li { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 22px; border: 1px solid var(--garis); border-radius: var(--radius); background: var(--putih); }
.paket-grid li:first-child { background: var(--emas); border-color: var(--emas); }
.paket-grid li:first-child .meta { color: var(--hitam); }
.paket-grid .meta { font-size: var(--f-kecil); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--emas-teks); }
.paket-utama { font-size: var(--f-h2); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--hitam); }
.paket-harga { font-size: var(--f-h3); font-weight: 700; color: var(--hitam); margin-top: 6px; }
.paket-grid small { font-size: var(--f-kecil); color: var(--teks-2); }
.paket-grid li:first-child small { color: var(--hitam); }
.paket-grid .tbl { margin-top: 14px; align-self: stretch; justify-content: center; padding-left: 12px; padding-right: 12px; }
.paket-bawah { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; margin-top: 20px; }
.paket-bawah p { color: var(--teks-2); max-width: 40em; margin: 0; }
@media (min-width: 1000px) { .paket-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 559px) { .paket-rumah .paket-grid { grid-template-columns: minmax(0, 1fr); } }
.slide-catatan { font-size: var(--f-kecil); line-height: 1.4; max-width: 36em; opacity: .8; }
/* fakta singkat di slide (label), pengganti paragraf panjang */
.slide-fakta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.slide-fakta li { font-size: var(--f-kecil); font-weight: 700; line-height: 1; padding: 8px 12px; border-radius: 999px; }
.slide-emas .slide-fakta li { background: rgba(9, 10, 11, .08); }
.slide-gelap .slide-fakta li { background: rgba(255, 255, 255, .12); color: var(--putih); }
.slide-terang .slide-fakta li { background: var(--putih); color: var(--hitam); }

/* ---------- akun pelanggan + CCTV rumah (11 Okt 2026) ----------
   Halaman masuk, daftar, lupa-sandi, akun (Kameraku), kamera, keamanan, privasi, syarat. Kontrak DOM: skrip/akun/HALAMAN.md.
   Keadaan ditukar akun.js lewat atribut hidden; di dalam .akun hidden SELALU menang atas display milik kelas.
   Huruf hanya dari skala --f-*; label isian = peran isi (17px tebal), supaya terbaca di HP murah di bawah terik. */
.akun [hidden] { display: none !important; }
.akun-bagian { padding: 28px 0 48px; }
.akun-sempit { max-width: 480px; }
.akun-judul { font-size: var(--f-h2); line-height: 1.1; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.akun-lead { font-size: var(--f-lead); line-height: 1.5; color: var(--teks-2); margin-top: 8px; }
.akun-sub { font-size: var(--f-h3); }
.akun-sub-kecil { font-size: var(--f-isi); font-weight: 700; letter-spacing: 0; margin-top: 8px; }
.akun-layar, .akun-langkah { display: grid; gap: 16px; padding-top: 16px; }
.akun-layar[data-layar="isi"] { padding-top: 0; }
.akun-memuat { padding: 24px 0; color: var(--teks-2); }
.akun-ket { font-size: var(--f-kecil); line-height: 1.4; color: var(--teks-2); }
.akun-alt { color: var(--teks-2); }
.akun-alt a { font-weight: 700; }

/* form */
.akun-form { display: grid; gap: 18px; max-width: 480px; }
.akun-form > .tbl, .akun-tombol .tbl { width: 100%; }
.akun-tombol { display: grid; gap: 10px; max-width: 480px; }
.akun-tombol-baris { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.akun .tbl:disabled { opacity: .6; cursor: progress; }
.isian { display: grid; gap: 6px; }
.isian label { font-weight: 700; color: var(--hitam); }
.isian input, .isian select { width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--garis-isian); border-radius: 12px; background: var(--putih); color: var(--teks); font: inherit; }
.isian input:focus, .isian select:focus { border-color: var(--hitam); }
.isian input[aria-invalid="true"] { border-color: var(--merah); }
.isian-kode { font-weight: 700; letter-spacing: .15em; font-variant-numeric: tabular-nums; }
.isian-kode::placeholder { letter-spacing: .05em; font-weight: 400; }
.isian-bantu { font-size: var(--f-kecil); line-height: 1.4; color: var(--teks-2); }
.isian-sandi { display: flex; gap: 8px; }
.isian-sandi input { flex: 1; min-width: 0; }
.isian-lihat { flex-shrink: 0; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--garis-isian); border-radius: 12px; background: var(--abu); color: var(--hitam); font: inherit; font-size: var(--f-tombol); font-weight: 700; cursor: pointer; }
.isian-lihat[aria-pressed="true"] { background: var(--hitam); border-color: var(--hitam); color: var(--putih); }
.isian-centang { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; }
.isian-centang input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--hitam); }
.isian-centang a { font-weight: 700; }

/* pesan & catatan keadaan. Wilayah pesan kosong disembunyikan secara visual saja (absolute + clip, keluar dari alur
   grid sehingga tak menambah jarak), tapi tetap di pohon aksesibilitas supaya isinya diumumkan pembaca layar. */
.akun-pesan:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.akun-pesan:not(:empty) { padding: 12px 14px; border-radius: 12px; border-left: 4px solid var(--garis-isian); background: var(--abu); }
.akun-pesan[data-jenis="galat"] { border-left-color: var(--merah); color: var(--merah); font-weight: 600; }
.akun-pesan[data-jenis="sukses"] { border-left-color: var(--hijau); }
.akun-catatan { padding: 14px 16px; border-radius: 14px; background: var(--abu); }
.akun-peringatan { border-left: 4px solid var(--hitam); }
.akun-berhasil { border-left: 4px solid var(--hijau); }
.akun-tautan { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--emas-teks); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; cursor: pointer; }
.akun-tautan:hover { color: var(--hitam); }
.akun-kirim-ke b { color: var(--hitam); white-space: nowrap; }
.akun-nomor-besar { font-size: var(--f-h2); font-weight: 800; line-height: 1.1; letter-spacing: .02em; word-spacing: .25em; color: var(--hitam); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.akun-ulang { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 44px; color: var(--teks-2); }
.akun-tautan-daftar { list-style: none; margin: 0; padding: 0; display: grid; }
.akun-tautan-daftar a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* baris atas halaman yang butuh masuk */
.akun-alat { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--garis); }
.akun-halo { color: var(--teks-2); overflow-wrap: anywhere; }
.akun-halo b { color: var(--hitam); }
.akun-alat-tautan { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
.akun-alat-tautan a { display: inline-flex; align-items: center; min-height: 44px; color: var(--hitam); font-weight: 700; text-decoration: none; }
.akun-alat-tautan a:hover, .akun-alat-tautan a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.akun-alat-tautan .akun-tautan { color: var(--hitam); text-decoration: none; }
.akun-alat-tautan .akun-tautan:hover { text-decoration: underline; }
/* bukan HP sendiri (perangkat tak tepercaya): tombol Keluar menonjol, DESAIN.md §14 */
.akun-keluar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 16px; border-radius: 14px; background: var(--abu); }
.akun-keluar p { font-weight: 700; color: var(--hitam); }

/* bagian & daftar */
.akun-panel { display: grid; gap: 14px; padding: 28px 0; border-top: 1px solid var(--garis); scroll-margin-top: 90px; }
.akun-daftar { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--garis); }
.akun-daftar:empty { display: none; }
.akun-baris { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 0; border-bottom: 1px solid var(--garis); }
.akun-baris > div:first-child { flex: 1 1 220px; min-width: 0; }
.akun-baris-judul { font-weight: 700; color: var(--hitam); overflow-wrap: anywhere; }
.akun-baris-aksi { display: flex; flex-wrap: wrap; gap: 8px; }
.akun-lencana { display: inline-block; margin-left: 4px; padding: 2px 10px; border-radius: 999px; background: var(--abu); font-size: var(--f-kecil); font-weight: 700; color: var(--hitam); }
.akun-kotak { display: grid; gap: 12px; max-width: 480px; padding: 18px; border-radius: var(--radius); background: var(--abu); }
.akun-kosong { display: grid; gap: 16px; padding-top: 8px; }
.akun-lompat { display: flex; flex-wrap: wrap; gap: 8px; }
.akun-lompat a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--abu); color: var(--hitam); font-size: var(--f-kecil); font-weight: 700; text-decoration: none; }
.akun-lompat a:hover { background: var(--garis); color: var(--hitam); }
.akun-lagi { justify-self: start; }
.tbl-bahaya { background: var(--merah); border-color: var(--merah); color: var(--putih); }
.tbl-bahaya:hover { background: var(--merah-tua); border-color: var(--merah-tua); color: var(--putih); }

/* Kameraku */
.akun-kamera-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.akun-kamera-kartu { display: grid; gap: 4px; height: 100%; padding: 20px; border: 1px solid var(--garis); border-radius: var(--radius); color: var(--teks); text-decoration: none; }
.akun-kamera-kartu:hover { border-color: var(--hitam); color: var(--teks); }
.akun-kamera-kartu h3 { margin-top: 6px; overflow-wrap: anywhere; }
.akun-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--f-kecil); font-weight: 700; color: var(--teks-2); }
.akun-status::before { content: ""; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: #8b8f98; }
.akun-status[data-status="online"] { color: var(--hijau); }
.akun-status[data-status="online"]::before { background: var(--hijau); }
.akun-tambah { border-top: 1px solid var(--garis); border-bottom: 1px solid var(--garis); }
.akun-tambah summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; font-weight: 700; color: var(--hitam); cursor: pointer; }
.akun-tambah summary::-webkit-details-marker { display: none; }
.akun-tambah summary svg { flex-shrink: 0; transition: transform .2s; }
.akun-tambah[open] summary svg { transform: rotate(45deg); }
.akun-tambah .akun-form { padding: 4px 0 20px; }

/* halaman kamera: kotak siaran memakai .cctv-video (halaman CCTV publik), garis waktu memakai .rekaman-* */
.akun-kepala { display: grid; gap: 6px; padding-top: 16px; }
.akun-kepala .akun-ket { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.akun-tab { display: flex; flex-wrap: wrap; gap: 8px; }
.akun-tab button { min-height: 44px; padding: 0 20px; border: 1.5px solid var(--hitam); border-radius: 999px; background: transparent; color: var(--hitam); font: inherit; font-size: var(--f-tombol); font-weight: 700; cursor: pointer; }
.akun-tab button[aria-selected="true"] { background: var(--hitam); color: var(--putih); }
.akun-panel-tab { display: grid; gap: 14px; max-width: 880px; }
.akun-layar-pesan { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 6px 14px; border-radius: 999px; background: rgba(9, 10, 11, .72); color: #fff; font-size: var(--f-kecil); font-weight: 600; white-space: nowrap; pointer-events: none; }
.akun-mati { display: grid; gap: 10px; max-width: 880px; padding: 18px; border-radius: var(--radius); background: var(--abu); }
.akun-mati-judul { font-weight: 700; color: var(--hitam); }
.akun-mati .akun-tombol { margin-top: 4px; }
.akun-rekaman-atas { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 20px; }
.akun-rekaman-atas .isian { flex: 1 1 220px; max-width: 360px; }
.akun-skala { position: relative; height: 18px; font-size: var(--f-kecil); color: var(--teks-2); font-variant-numeric: tabular-nums; }
.akun-skala span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.akun-skala span:nth-child(1) { left: 0; transform: none; }
.akun-skala span:nth-child(2) { left: 25%; }
.akun-skala span:nth-child(3) { left: 50%; }
.akun-skala span:nth-child(4) { left: 75%; }
.akun-skala span:nth-child(5) { right: 0; transform: none; }

/* Kebijakan Privasi & Syarat Layanan */
.hukum { display: grid; gap: 28px; max-width: 46em; }
.hukum-versi { font-size: var(--f-kecil); font-weight: 700; color: var(--teks-2); }
.hukum-draf { padding: 14px 16px; border-radius: 14px; border-left: 4px solid var(--merah); background: var(--abu); font-weight: 700; color: var(--hitam); }
.hukum-isi { padding: 18px 20px; border-radius: var(--radius); background: var(--abu); }
.hukum-isi ol { margin: 0; padding-left: 22px; display: grid; gap: 2px; }
.hukum-isi li { padding: 5px 0; }
.hukum-isi a { font-weight: 600; }
.hukum-bagian { display: grid; gap: 12px; scroll-margin-top: 90px; }
.hukum-bagian h2 { font-size: var(--f-h3); letter-spacing: -0.015em; }
.hukum-butir { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.hukum-lain { font-weight: 700; }
.penampung { padding: 0 4px; border-radius: 4px; outline: 1.5px dashed var(--merah); background: transparent; color: var(--merah); font-weight: 700; }

@media (prefers-reduced-motion: reduce) { .akun-tambah summary svg { transition: none; } }
@media (min-width: 720px) {
  .akun-bagian { padding: 40px 0 72px; }
  .akun-kamera-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 1000px) {
  .akun-kamera-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 16 Okt 2026: cctv.penanggak.com (bangun.py layar_cctv): kop ramping tanpa menu, kamera langsung tampil */
.kop-layar .kop-baris { justify-content: space-between; }
.layar-ke-situs { font-size: var(--f-kecil); }
.layar-cctv { padding-top: 24px; }
.kaki-layar { margin-top: 48px; padding: 24px 0 40px; border-top: 1px solid var(--garis); color: var(--teks-2); font-size: var(--f-kecil); }
.kaki-layar .bungkus { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.kaki-layar-tombol { display: flex; flex-wrap: wrap; gap: 12px; }

/* 21 Okt 2026: kartu unduh aplikasi (halaman TV) */
.unduh-app { display: grid; grid-template-columns: auto 1fr; gap: 18px 22px; align-items: center; padding: 22px; border-radius: var(--radius); background: var(--abu); max-width: 760px; }
.unduh-app img { width: 88px; height: 88px; border-radius: 20px; }
.unduh-app-teks { display: grid; gap: 4px; }
.unduh-app-teks b { font-size: 18px; color: var(--hitam); }
.unduh-app-aksi .tbl { flex: 1 1 auto; }
.unduh-app-teks small { color: var(--teks-2); }
.unduh-app-aksi { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 720px) { .unduh-app { grid-template-columns: auto 1fr auto; } .unduh-app-aksi { grid-column: auto; } }

/* 22 Okt 2026: PG-Hub (/hub), layar awal aplikasi pegawai: kop ramping + kisi ubin */
.hub-kop { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--garis); background: var(--putih); }
.hub-kop img { width: 36px; height: 36px; border-radius: 9px; }
.hub-kop b { font-size: 20px; color: var(--hitam); letter-spacing: -0.02em; }
.hub-kisi { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 16px; max-width: 960px; margin: 0 auto; }
.hub-ubin { display: grid; align-content: start; gap: 6px; padding: 16px; border-radius: var(--radius); background: var(--abu); color: var(--teks); text-decoration: none; }
.hub-ubin:active { background: var(--garis); }
.hub-ubin img { width: 56px; height: 56px; border-radius: 14px; margin-bottom: 6px; }
.hub-ubin b { font-size: 17px; color: var(--hitam); }
.hub-ubin small { color: var(--teks-2); font-size: var(--f-kecil); line-height: 1.4; }