/* =========================================================
   SI AWAL — tambahan di atas gaya tema.
   Berkas terpisah agar pembaruan tema tidak menimpa
   penyesuaian milik aplikasi.
   ========================================================= */

/* Nomor agenda adalah kode, bukan judul: ukurannya diselaraskan
   dengan sel lain dan tidak boleh terpotong ke baris baru. */
.kode-agenda {
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    color: #374151;
}

/* ---------- Formulir bertahap ---------- */
/* Nomor langkah: mengganti judul kartu yang datar, supaya urutan pengisian
   terbaca tanpa perlu dijelaskan. */
.langkah {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
}
.langkah-nomor {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--merah);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    margin-top: .1rem;
}
.langkah-judul {
    font-weight: 600;
    line-height: 1.25;
}

/* Penanda isian wajib: bintang merah setelah nama isian.
   Dipakai seragam di seluruh formulir aplikasi. */
.wajib::after {
    content: " *";
    color: var(--merah);
    font-weight: 700;
}
.opsional::after {
    content: " (opsional)";
    color: #9CA3AF;
    font-weight: 400;
    font-size: .92em;
}

/* Ringkasan akibat pilihan, tampil sebelum tombol simpan ditekan */
.pratinjau-akibat {
    border: 1px dashed var(--bs-border-color);
    border-radius: .5rem;
    padding: .625rem .75rem;
    background: #fff;
    font-size: .8rem;
}

/* ── Bahasa warna tombol ──────────────────────────────────────────────────
   Satu warna untuk satu maksud, supaya tombol tidak terbaca sebagai teks:

   btn-primary          tindakan utama yang menyimpan (Simpan, Catat, Gabungkan)
   btn-outline-primary  melangkah ke tahap kerja berikutnya (Pilah, Disposisi,
                        Telusuri, Catat pleno)
   btn-dokumen          membuka dokumen resmi atau bukti (emas, warna kedua
                        logo Bawaslu) — selalu berupa pratinjau
   btn-outline-secondary tindakan administratif netral (riwayat, alihkan,
                        tandai duplikat, unduh, tab baru)
   btn-outline-danger   tindakan yang menghapus
   btn-light            batal dan tutup
   ------------------------------------------------------------------------ */

/* Bootstrap memberi btn-light bingkai bening sehingga tampak seperti teks
   biasa; di aplikasi ini setiap tombol harus terlihat sebagai tombol. */
.btn-light {
    --bs-btn-border-color: #CED4DA;
    --bs-btn-hover-border-color: #ADB5BD;
}

.btn-dokumen {
    --bs-btn-color: var(--emas-tua);
    --bs-btn-bg: var(--emas-muda);
    --bs-btn-border-color: var(--emas);
    --bs-btn-hover-color: #3D2B00;
    --bs-btn-hover-bg: var(--emas);
    --bs-btn-hover-border-color: var(--emas);
    --bs-btn-active-color: #3D2B00;
    --bs-btn-active-bg: var(--emas);
    --bs-btn-active-border-color: var(--emas-tua);
    --bs-btn-focus-shadow-rgb: 242, 169, 0;
    font-weight: 500;
}

/* Tombol yang hanya berisi ikon tetap persegi supaya sejajar di dalam baris
   tabel dan tidak menyempit sampai tampak seperti ikon telanjang. */
.btn-ikon {
    min-width: 2rem;
}

/* ── Medan isian ──────────────────────────────────────────────────────────
   Tema menyetel --bs-body-bg: #F3F4F6, dan Bootstrap 5.3 memakai nilai itu
   sebagai latar .form-control maupun .form-select. Akibatnya setiap isian
   berwarna sama dengan latar halaman sehingga tidak terlihat sebagai tempat
   mengisi. Di sini latarnya dikembalikan putih dan bingkainya dipertegas
   (bawaan tema #E5E7EB terlalu pucat).
   ------------------------------------------------------------------------ */
.form-control,
.form-select,
.input-group-text {
    background-color: #fff;
    border-color: #CBD5E1;
}

.form-control:hover:not(:disabled):not([readonly]),
.form-select:hover:not(:disabled) {
    border-color: #94A3B8;
}

.form-check-input {
    background-color: #fff;
    border-color: #CBD5E1;
}

/* Yang terkunci tetap kelabu, supaya perbedaannya terbaca. */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: #F1F3F5;
    border-color: #E5E7EB;
}

.form-control::placeholder {
    color: #9CA3AF;
}

/* ── Nama aplikasi pada kop sidebar ───────────────────────────────────────
   "SI AWAL" hanya tujuh huruf, sedangkan "Bawaslu Kota Ternate" dua puluh.
   Pada ukuran bawaan tema, baris atas tampak jauh lebih pendek daripada
   baris bawahnya sehingga kopnya terlihat miring. Ukuran dan jarak hurufnya
   disetel agar kedua baris berakhir kira-kira sejajar.
   ------------------------------------------------------------------------ */
.brand-nama {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: .055em;
    line-height: 1.05;
    color: #fff;
}

@media (max-width: 575.98px) {
    .brand-nama { font-size: 1.4rem; }
}

/* ---------------------------------------------------------------------------
   Lingkaran ikon berwarna pada kartu dasbor.

   Kelasnya dibangun dinamis di dasbor.blade.php — `avatar-{{ $k['warna'] }}`
   — sehingga nama kelasnya tidak pernah muncul sebagai teks di berkas Blade
   mana pun, dan pencarian biasa tidak menemukannya. Akibatnya `avatar-emas`
   sempat dipakai tanpa pernah didefinisikan: lingkarannya kosong, ikonnya
   melayang tanpa latar, dan tidak ada yang menyadarinya sampai pengguna
   membandingkan keempat kartu.

   Karena itu SETIAP warna yang dipakai di kartu dasbor harus punya kelasnya
   di sini. `avatar-merah` sendiri ada di app.css.

   Warna pekat emas mengikuti pola yang sudah dipakai lonceng menu dan
   penanda tahap: latar emas dengan tulisan merah-kehitaman, bukan putih,
   sebab putih di atas emas hampir tidak terbaca.
   ------------------------------------------------------------------------ */
.avatar-emas { background: var(--emas); color: #4A080C; }
.avatar-arang { background: var(--arang); color: #fff; }

/* ---------------------------------------------------------------------------
   Halaman masuk: panel sambutan bergradien + panel formulir.

   Ditulis mobile-first dengan SATU markah untuk semua ukuran layar. Susunan
   bawaannya bertumpuk — panel sambutan menjadi kepala halaman dan kartu
   formulir menindihnya — lalu pada layar lebar berubah menjadi dua sisi
   berdampingan. Rancangan sebelumnya menggandakan blok merek khusus seluler
   lewat `d-none d-lg-flex`; itu berarti dua markah yang harus dirawat
   bersamaan, dan satu di antaranya selalu tertinggal saat yang lain diubah.
   ------------------------------------------------------------------------ */
.halaman-masuk { background: #fff; }

.masuk-bingkai {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
}

/* -- Panel sambutan ------------------------------------------------------- */
.masuk-sambut {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    color: #fff;
    background: linear-gradient(150deg, var(--merah) 0%, var(--merah-tua) 55%, var(--merah-sidebar) 100%);
    padding: 2.25rem 1.25rem 4.25rem;
}

.masuk-sambut-isi {
    position: relative;
    z-index: 1;
}

/* Logo dan tulisan merek diikat pada satu ukuran dasar `--skala`, dan
   keduanya dihitung darinya. Dengan begitu proporsi keduanya tetap sama di
   setiap ukuran layar, dan tiap media query cukup mengubah satu angka —
   bukan menyetel lebar logo dan ukuran huruf terpisah lalu berharap
   keduanya kebetulan seimbang. */
.masuk-sambut-isi { --skala: 60px; }

.masuk-logo {
    width: var(--skala);
    height: var(--skala);
    margin-bottom: calc(var(--skala) * .1);
}

/* Merek dibaca sebagai satu lockup di bawah logo: besar, tebal, dan dua
   warna dari logo Bawaslu — kata pertama putih, sisanya emas. */
.masuk-merek {
    font-size: calc(var(--skala) * .52);
    font-weight: 800;
    line-height: 1;
    letter-spacing: .02em;
    text-transform: uppercase;
    margin-bottom: calc(var(--skala) * .26);
    white-space: nowrap;
}

.masuk-merek-utama { color: #fff; }
.masuk-merek-sorot { color: var(--emas); }

.masuk-sambut-judul {
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
    margin: 0;
}

.masuk-sambut-teks {
    margin: .6rem 0 0;
    font-size: .95rem;
    color: rgba(255, 255, 255, .82);
}

/* Puncak hiasan di kaki panel; tingginya ikut lebar layar supaya bentuknya
   tidak menjadi pipih pada layar sempit. */
.masuk-puncak {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: 84px;
    display: block;
}

.masuk-puncak-dasar { fill: rgba(0, 0, 0, .18); }
.masuk-puncak-arang { fill: var(--arang); opacity: .55; }
.masuk-puncak-emas { fill: var(--emas); }

/* -- Panel formulir ------------------------------------------------------- */
.masuk-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0 1rem 1.5rem;
}

/* Kartu menindih panel sambutan pada layar sempit; itu sebab margin atasnya
   negatif dan z-index-nya di atas puncak hiasan. */
.masuk-kartu {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 460px;
    margin: -3rem auto 0;
    padding: 1.5rem;
    background: #fff;
    border-radius: 1.25rem;
    box-shadow: 0 .75rem 2rem rgba(28, 28, 30, .14);
}

.masuk-judul {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 .15rem;
}

.masuk-subjudul {
    font-size: .875rem;
    color: #6B7280;
    margin: 0 0 1.25rem;
}

.masuk-isian {
    background-color: #fff;
    border-color: #CBD5E1;
    border-radius: .7rem;
    font-size: .95rem;
    padding: .7rem .9rem;
}

.masuk-isian:focus {
    border-color: var(--merah);
    box-shadow: 0 0 0 .2rem rgba(200, 22, 30, .15);
}

/* Tombol mata diletakkan di dalam kolom sandi, bukan sebagai input-group,
   supaya tidak ada garis sambungan di tepi kolomnya. */
.masuk-sandi { position: relative; }

.masuk-sandi .masuk-isian { padding-right: 2.9rem; }

.masuk-mata {
    position: absolute;
    top: 50%;
    right: .35rem;
    transform: translateY(-50%);
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6B7280;
    line-height: 1;
}

.masuk-mata:hover { color: var(--merah); background: var(--merah-muda); }

.masuk-tombol {
    border-radius: .7rem;
    font-weight: 600;
    padding-top: .7rem;
    padding-bottom: .7rem;
}

/* Pemisah bergaris dengan label di tengah. */
.masuk-pemisah {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.5rem 0 .75rem;
    color: #9CA3AF;
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.masuk-pemisah::before,
.masuk-pemisah::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #E5E7EB;
}

.masuk-catatan {
    margin: 0;
    font-size: .8rem;
    line-height: 1.55;
    color: #6B7280;
}

.masuk-kaki {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin-top: 2rem;
    text-align: center;
    font-size: .78rem;
    color: #9CA3AF;
}

/* -- Penyesuaian per ukuran layar ---------------------------------------- */

/* Ponsel sangat sempit (360px ke bawah). */
@media (max-width: 359.98px) {
    .masuk-sambut { padding: 1.75rem 1rem 3.75rem; }
    .masuk-sambut-isi { --skala: 52px; }
    .masuk-sambut-judul { font-size: 1.15rem; }
    .masuk-kartu { padding: 1.25rem; border-radius: 1rem; }
}

/* Ponsel/tablet dalam posisi mendatar: panel sambutan dipangkas supaya
   formulirnya tidak terdorong jauh ke bawah layar yang pendek. */
@media (max-height: 520px) and (max-width: 991.98px) {
    .masuk-sambut { padding: 1.25rem 1.25rem 3rem; }
    .masuk-sambut-isi { --skala: 44px; }
    .masuk-sambut-judul { font-size: 1.1rem; }
    .masuk-puncak { height: 60px; }
}

@media (min-width: 576px) {
    .masuk-sambut { padding: 3rem 2rem 5rem; }
    .masuk-sambut-isi { --skala: 72px; }
    .masuk-sambut-judul { font-size: 1.5rem; }
    .masuk-puncak { height: 104px; }
    .masuk-kartu { padding: 2rem; margin-top: -3.5rem; }
}

@media (min-width: 768px) {
    .masuk-sambut-isi { --skala: 80px; }
    .masuk-sambut-judul { font-size: 1.6rem; }
    .masuk-puncak { height: 128px; }
}

/* Dua sisi berdampingan. Kartu kehilangan bayangan, sudut, dan tindihannya:
   di sini ia bukan lagi kartu melainkan isi panel kanan. */
@media (min-width: 992px) {
    .masuk-bingkai { flex-direction: row; }

    .masuk-sambut {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 3rem;
    }

    .masuk-sambut-isi { --skala: 96px; }
    .masuk-sambut-judul { font-size: 1.8rem; }
    .masuk-sambut-teks { font-size: 1rem; }
    .masuk-puncak { height: 188px; }

    .masuk-panel {
        flex: 1;
        justify-content: center;
        padding: 2.5rem 2rem 1.5rem;
    }

    .masuk-kartu {
        max-width: 400px;
        margin: auto;
        padding: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .masuk-kaki { margin-top: 2.5rem; }
}

@media (min-width: 1400px) {
    .masuk-sambut { padding: 4rem; }
    .masuk-sambut-isi { --skala: 112px; }
    .masuk-sambut-judul { font-size: 2.1rem; }
    .masuk-kartu { max-width: 420px; }
}

/* Layar lebar tetapi pendek (laptop 13" dengan bilah peramban tinggi):
   panel sambutan dipadatkan supaya puncak hiasannya tidak menelan
   judulnya. */
@media (min-width: 992px) and (max-height: 760px) {
    .masuk-sambut { padding: 2rem 2.5rem; }
    .masuk-sambut-isi { --skala: 76px; }
    .masuk-sambut-judul { font-size: 1.55rem; }
    .masuk-puncak { height: 132px; }
    .masuk-panel { padding: 1.5rem 2rem 1rem; }
    .masuk-kaki { margin-top: 1.5rem; }
}

/* ---------------------------------------------------------------------------
   Beranda publik.

   Mengikuti kerangka rancangan rujukan (tema/SI AWAL — Landing Page) dengan
   warna tema yang sudah jalan: merah, emas, dan arang dari logo Bawaslu,
   bukan nilai heksa dari berkas rujukan. Latar krem hangat satu-satunya
   nilai yang diambil apa adanya, sebab tema kita belum punya padanannya.

   Rujukannya hanya versi Desktop; susunan untuk layar sempit dirancang di
   sini, memakai pola yang sama dengan halaman masuk: satu markah, perubahan
   susunan sepenuhnya oleh media query.
   ------------------------------------------------------------------------ */
.halaman-beranda {
    --krem: #FBF8F1;
    background: var(--krem);
    color: var(--arang);
}

.beranda-wadah {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* -- Kepala --------------------------------------------------------------- */
.beranda-kepala {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--merah-sidebar);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.beranda-kepala-isi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 76px;
    padding-top: .5rem;
    padding-bottom: .5rem;
    flex-wrap: wrap;
}

.beranda-merek {
    display: flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
}

.beranda-merek img { width: 46px; height: 46px; }

.beranda-merek-teks { line-height: 1.1; }

.beranda-merek-nama {
    display: block;
    font-size: 1.78rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: .06em;
}

.beranda-merek-sub {
    display: block;
    font-size: .78rem;
    letter-spacing: .005em;
    color: rgba(255, 255, 255, .72);
}

.beranda-nav {
    display: none;
    align-items: center;
    gap: 1.25rem;
    font-size: .9rem;
}

.beranda-nav a {
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    padding: .25rem 0;
    border-bottom: 2px solid transparent;
}

.beranda-nav a:hover {
    color: #fff;
    border-bottom-color: var(--emas);
}

.beranda-tombol { border-radius: .7rem; font-weight: 600; }

/* Tiga tombol beranda, semuanya di atas latar gelap. */
.beranda-tombol-terang { background: #fff; color: var(--merah-tua); border: 0; }
.beranda-tombol-terang:hover { background: var(--emas-muda); color: var(--merah-tua); }

.beranda-tombol-emas { background: var(--emas); color: #4A080C; border: 0; }
.beranda-tombol-emas:hover { background: #ffb81a; color: #4A080C; }

.beranda-tombol-garis {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .45);
}

.beranda-tombol-garis:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border-color: #fff;
}

/* -- Hero ----------------------------------------------------------------- */
.beranda-hero {
    position: relative;
    overflow: hidden;
    padding: 2.5rem 0 7rem;
    background: linear-gradient(150deg, var(--merah) 0%, var(--merah-tua) 55%, var(--merah-sidebar) 100%);
    color: #fff;
}

/* Pola titik halus supaya bidang merah yang lebar tidak terbaca rata.
   Dibuat dari radial-gradient, bukan berkas gambar — satu baris, dan tetap
   jalan tanpa internet. */
.beranda-hero-pola {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: .5;
    pointer-events: none;
}

.beranda-puncak {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: 86px;
    display: block;
}

.beranda-puncak-dasar { fill: rgba(0, 0, 0, .16); }
.beranda-puncak-arang { fill: var(--arang); opacity: .5; }
.beranda-puncak-emas { fill: var(--emas); opacity: .9; }

.beranda-hero-isi {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 2rem;
    align-items: center;
}

/* Anak grid perlu min-width nol; tanpa itu teks panjang tanpa spasi
   (mis. alamat surel) melebarkan kolomnya dan mendorong kartu angka keluar. */
.beranda-hero-teks { min-width: 0; }

.beranda-kening {
    font-size: 1.17rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--emas);
    margin-bottom: .75rem;
}

.beranda-judul {
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1.16;
    letter-spacing: -.02em;
    margin: 0 0 .85rem;
    color: #fff;
}

.beranda-judul-sorot {
    color: var(--emas);
    /* Garis bawah tipis, bukan latar blok: pada judul besar latar blok
       menutup turunan huruf dan terbaca seperti penanda teks. */
    border-bottom: .16em solid rgba(242, 169, 0, .35);
}

.beranda-teks {
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .82);
    margin: 0 0 1.5rem;
    max-width: 52ch;
}

.beranda-aksi {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.beranda-tahapan {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.5rem;
    padding: .35rem .8rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .18);
    font-size: .82rem;
    color: rgba(255, 255, 255, .85);
}

.beranda-titik {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--emas);
    flex-shrink: 0;
}

/* -- Kartu angka pada hero ------------------------------------------------ */
.beranda-kartu-angka {
    background: #fff;
    border: 1px solid rgba(28, 28, 30, .08);
    border-radius: 1.25rem;
    box-shadow: 0 .75rem 2rem rgba(28, 28, 30, .08);
    padding: 1.25rem;
}

.beranda-kartu-kepala {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
}

.beranda-kartu-judul { font-weight: 700; font-size: .95rem; }
.beranda-kartu-sub { font-size: .78rem; color: #6B7280; }

.beranda-lencana {
    font-size: .68rem;
    font-weight: 600;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: var(--emas-muda);
    color: var(--emas-tua);
    white-space: nowrap;
}

.beranda-angka-baris {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(28, 28, 30, .07);
}

.beranda-angka-nilai {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1;
    color: var(--merah);
}

.beranda-angka-emas { color: var(--emas-tua); }

.beranda-angka-label {
    font-size: .72rem;
    color: #6B7280;
    margin-top: .2rem;
}

/* Grafik batang tujuh hari. Tinggi batang disetel inline dari data, jadi
   yang diatur di sini hanya kerangkanya. */
.beranda-grafik {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: end;
    gap: .35rem;
    height: 92px;
    margin: 1rem 0 .5rem;
}

.beranda-grafik-kolom {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    gap: .35rem;
}

.beranda-grafik-batang {
    background: linear-gradient(180deg, var(--merah) 0%, var(--merah-tua) 100%);
    border-radius: .3rem .3rem 0 0;
    min-height: 4px;
}

.beranda-grafik-label {
    font-size: .66rem;
    color: #9CA3AF;
    text-align: center;
}

.beranda-kartu-kaki {
    margin: 0;
    font-size: .72rem;
    line-height: 1.5;
    color: #9CA3AF;
}

/* -- Bagian umum ---------------------------------------------------------- */
.beranda-bagian {
    padding: 2.75rem 0;
    scroll-margin-top: 84px;
}
.beranda-bagian-abu { background: #fff; }

.beranda-bagian-judul {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -.01em;
    margin: 0 0 .6rem;
}

.beranda-sub-judul {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 .85rem;
}

.beranda-bagian-teks {
    font-size: .95rem;
    line-height: 1.7;
    color: #4B5563;
    margin: 0 0 1.5rem;
    max-width: 68ch;
}

.beranda-kisi {
    display: grid;
    gap: 1rem;
}

.beranda-dua-kolom {
    display: grid;
    gap: 2rem;
}

/* -- Kanal resmi ---------------------------------------------------------- */
/* Anak-anak kartu ini rata (ikon, judul, keterangan, rincian), jadi
   arahnya harus menurun. Versi sebelumnya membungkus teksnya dalam satu
   div sehingga flex mendatar benar; ketika markahnya dirata arahnya
   tertinggal, dan keempat bagiannya berjajar menyamping dalam kolom
   sempit — terlihat rusak. */
.beranda-kanal {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border: 1px solid rgba(28, 28, 30, .08);
    border-radius: 1rem;
    padding: 1.1rem;
}

.beranda-bagian-abu .beranda-kanal { background: var(--krem); }

.beranda-kanal-nama {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 .3rem;
}

.beranda-pasal {
    font-size: .68rem;
    font-weight: 600;
    color: var(--emas-tua);
    background: var(--emas-muda);
    border-radius: 999px;
    padding: .1rem .45rem;
    margin-left: .35rem;
    vertical-align: middle;
}

.beranda-kanal-teks {
    font-size: .85rem;
    line-height: 1.6;
    color: #4B5563;
    margin: 0 0 .4rem;
}

.beranda-kanal-rincian {
    font-size: .85rem;
    font-weight: 600;
    color: var(--merah);
}

.beranda-kanal-kosong {
    font-size: .8rem;
    color: #9CA3AF;
    font-style: italic;
}

/* -- Alur penanganan ------------------------------------------------------ */
.beranda-langkah {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .75rem;
}

.beranda-langkah-butir {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    background: var(--krem);
    border: 1px solid rgba(28, 28, 30, .07);
    border-radius: .9rem;
    padding: .9rem 1rem;
}

.beranda-langkah-nomor {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--merah);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
}

.beranda-langkah-nama { font-weight: 700; font-size: .95rem; }

.beranda-langkah-teks {
    margin: .15rem 0 0;
    font-size: .85rem;
    line-height: 1.55;
    color: #4B5563;
}

/* -- Dasar hukum ---------------------------------------------------------- */
.beranda-kutipan {
    background: var(--arang);
    color: #fff;
    border-radius: 1.25rem;
    padding: 1.5rem;
}

.beranda-kutipan-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--emas);
    margin-bottom: .85rem;
}

.beranda-dasar-daftar {
    margin: 0;
    padding-left: 1.1rem;
    font-size: .88rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, .85);
}

.beranda-dasar-daftar strong { color: #fff; }

.beranda-kutipan-sumber {
    margin-top: 1rem;
    padding-top: .85rem;
    border-top: 1px solid rgba(255, 255, 255, .15);
    font-size: .78rem;
    color: rgba(255, 255, 255, .6);
}

/* -- Statistik ------------------------------------------------------------ */
.beranda-bilah {
    display: grid;
    grid-template-columns: 8rem 1fr 2.5rem;
    align-items: center;
    gap: .6rem;
    margin-bottom: .5rem;
    font-size: .85rem;
}

.beranda-bilah-nama { color: #4B5563; }

.beranda-bilah-alur {
    height: 8px;
    border-radius: 999px;
    background: rgba(28, 28, 30, .08);
    overflow: hidden;
}

.beranda-bilah-isi {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--merah) 0%, var(--emas) 100%);
}

.beranda-bilah-nilai { font-weight: 700; text-align: right; }

.beranda-muara {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    padding: .6rem 0;
    border-bottom: 1px solid rgba(28, 28, 30, .07);
}

.beranda-muara:last-child { border-bottom: 0; }

.beranda-muara-nilai {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--merah);
    min-width: 2ch;
}

.beranda-muara-label { font-size: .85rem; color: #4B5563; }

/* -- Kaki ----------------------------------------------------------------- */
.beranda-kaki {
    background: var(--merah-sidebar);
    color: rgba(255, 255, 255, .8);
    padding: 2rem 0;
    font-size: .82rem;
}

.beranda-kaki-isi {
    display: grid;
    gap: 1.25rem;
}

.beranda-kaki-merek {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.beranda-kaki-nama { color: #fff; font-weight: 700; }
.beranda-kaki-alamat { color: rgba(255, 255, 255, .7); }

.beranda-kaki-kanan { display: grid; gap: .3rem; }

.beranda-kaki-hak {
    margin-top: .4rem;
    color: rgba(255, 255, 255, .55);
    font-size: .76rem;
}

/* -- Beranda: penyesuaian per ukuran layar -------------------------------- */

@media (max-width: 359.98px) {
    .beranda-merek-nama { font-size: 1.45rem; }
    .beranda-merek-sub { font-size: .7rem; }
    .beranda-merek img { width: 38px; height: 38px; }
    .beranda-kening { font-size: 1rem; letter-spacing: .1em; }
    .beranda-judul { font-size: 1.55rem; }
    .beranda-angka-nilai { font-size: 1.45rem; }
    .beranda-bilah { grid-template-columns: 6rem 1fr 2rem; font-size: .8rem; }
}

@media (min-width: 576px) {
    .beranda-judul { font-size: 2.15rem; }
    .beranda-kartu-angka { padding: 1.5rem; }
    .beranda-bagian-judul { font-size: 1.55rem; }
    .beranda-kisi { grid-template-columns: repeat(2, 1fr); }
    .beranda-penegasan { grid-template-columns: repeat(2, 1fr); gap: 1rem 1.5rem; padding: 1.35rem 1.5rem; }
    .beranda-puncak { height: 104px; }
}

@media (min-width: 768px) {
    .beranda-nav { display: flex; }
    .beranda-hero { padding: 3.5rem 0 8rem; }
    .beranda-puncak { height: 128px; }
    .beranda-judul { font-size: 2.5rem; }
    .beranda-bagian { padding: 3.5rem 0; }
    .beranda-langkah { grid-template-columns: repeat(2, 1fr); }
    .beranda-kaki-isi {
        grid-template-columns: 1fr auto;
        align-items: center;
    }
    .beranda-kaki-kanan { text-align: right; }
}

/* Hero menjadi dua kolom: teks di kiri, kartu angka di kanan — susunan yang
   dipakai rancangan rujukan. */
@media (min-width: 992px) {
    .beranda-hero { padding: 4.5rem 0 9.5rem; }
    .beranda-puncak { height: 168px; }
    .beranda-penegasan { grid-template-columns: repeat(4, 1fr); margin-top: -3.75rem; }
    .beranda-hero-isi { grid-template-columns: 1.15fr .85fr; gap: 3rem; }
    .beranda-judul { font-size: 2.9rem; }
    .beranda-teks { font-size: 1.05rem; }
    .beranda-bagian { padding: 4rem 0; }
    .beranda-bagian-judul { font-size: 1.75rem; }
    .beranda-kisi { grid-template-columns: repeat(3, 1fr); }
    .beranda-dua-kolom { grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
    .beranda-angka-nilai { font-size: 2rem; }
    .beranda-grafik { height: 116px; }
}

@media (min-width: 1200px) {
    .beranda-judul { font-size: 3.2rem; }
    .beranda-langkah { grid-template-columns: repeat(3, 1fr); }
}

/* Layar sempit dalam posisi mendatar: kepala tidak lagi menempel supaya
   tidak memakan tinggi layar yang sudah sedikit. */
@media (max-height: 520px) and (max-width: 991.98px) {
    .beranda-kepala { position: static; }
    .beranda-hero { padding: 1.5rem 0 4.5rem; }
    .beranda-judul { font-size: 1.5rem; }
    .beranda-puncak { height: 56px; }
    .beranda-hero-pola { opacity: .3; }
}

@media (prefers-reduced-motion: reduce) {
    .beranda-kepala { backdrop-filter: none; }
}

/* -- Beranda: elemen penegasan dan kepala bagian -------------------------- */

/* Bilah empat penegasan, menindih kaki hero supaya kedua bidang terikat dan
   tidak terbaca sebagai dua halaman yang ditempel. */
.beranda-penegasan {
    position: relative;
    z-index: 2;
    margin-top: -3.25rem;
    display: grid;
    gap: .75rem;
    background: #fff;
    border: 1px solid rgba(28, 28, 30, .08);
    border-radius: 1.25rem;
    box-shadow: 0 .75rem 2rem rgba(28, 28, 30, .1);
    padding: 1.15rem 1.25rem;
}

.beranda-penegasan-butir {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.beranda-penegasan-butir i {
    font-size: 1.25rem;
    color: var(--merah);
    flex-shrink: 0;
}

.beranda-penegasan-nama { font-weight: 700; font-size: .88rem; line-height: 1.2; }
.beranda-penegasan-teks { font-size: .76rem; color: #6B7280; }

/* Kepala tiap bagian: label kecil beremas di atas judul, memberi irama yang
   sama pada keempat bagian. */
.beranda-kepala-bagian { max-width: 70ch; }

.beranda-label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--emas-tua);
    margin-bottom: .6rem;
}

.beranda-label::before {
    content: '';
    width: 1.75rem;
    height: 3px;
    border-radius: 999px;
    background: var(--emas);
}

.beranda-halus { color: #9CA3AF; }

/* -- Kartu kanal ---------------------------------------------------------- */
.beranda-kanal-ikon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: .8rem;
    background: var(--merah-muda);
    color: var(--merah);
    font-size: 1.15rem;
    margin-bottom: .85rem;
}

.beranda-kanal-rincian i { margin-left: -.25rem; }

/* -- Grafik dengan alur latar --------------------------------------------- */
.beranda-grafik-nilai {
    font-size: .72rem;
    font-weight: 700;
    color: var(--merah);
    text-align: center;
    height: 1rem;
    line-height: 1rem;
}

.beranda-grafik-alur {
    flex: 1;
    display: flex;
    align-items: flex-end;
    background: rgba(28, 28, 30, .05);
    border-radius: .3rem;
    overflow: hidden;
}

.beranda-grafik-alur .beranda-grafik-batang { width: 100%; }

.beranda-grafik-kini {
    background: linear-gradient(180deg, var(--emas) 0%, var(--emas-tua) 100%);
}

/* -- Langkah alur --------------------------------------------------------- */
.beranda-langkah-pleno {
    border-color: rgba(242, 169, 0, .5);
    background: var(--emas-muda);
}

.beranda-langkah-pleno .beranda-langkah-nomor {
    background: var(--emas);
    color: #4A080C;
}

/* -- Panel statistik ------------------------------------------------------ */
.beranda-panel {
    background: var(--krem);
    border: 1px solid rgba(28, 28, 30, .07);
    border-radius: 1rem;
    padding: 1.25rem;
}

/* ---------------------------------------------------------------------------
   Tombol utama dan kanal formulir web.

   Tombol utama dibuat menonjol bukan dengan warna baru, melainkan dengan
   tiga hal sekaligus: latar emas pekat, cincin pucat di sekelilingnya, dan
   bidang yang lebih lega. Warna baru hanya akan menambah kosakata rupa
   tanpa perlu, sedangkan cincinnya membuat tombol ini satu-satunya yang
   tampak terangkat dari bidang merah.
   ------------------------------------------------------------------------ */
.beranda-tombol-utama {
    background: var(--emas);
    color: #4A080C;
    border: 0;
    padding: .85rem 1.5rem;
    font-weight: 700;
    box-shadow: 0 0 0 .3rem rgba(242, 169, 0, .22), 0 .5rem 1.25rem rgba(0, 0, 0, .18);
}

.beranda-tombol-utama:hover {
    background: #ffb81a;
    color: #4A080C;
    box-shadow: 0 0 0 .4rem rgba(242, 169, 0, .3), 0 .6rem 1.5rem rgba(0, 0, 0, .22);
}

/* ---------------------------------------------------------------------------
   Halaman formulir publik dan halaman berhasil.
   ------------------------------------------------------------------------ */
.lapor-kepala {
    position: relative;
    overflow: hidden;
    padding: 2.25rem 0;
    background: linear-gradient(150deg, var(--merah) 0%, var(--merah-tua) 100%);
    color: #fff;
}

.lapor-kepala-isi { position: relative; z-index: 1; }

.lapor-label { color: var(--emas); }
.lapor-label::before { background: var(--emas); }

.lapor-judul {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -.015em;
    margin: 0 0 .5rem;
    color: #fff;
}

.lapor-teks {
    margin: 0;
    font-size: .95rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .85);
    max-width: 62ch;
}

.lapor-bagian { padding: 2rem 0 3rem; }
.lapor-wadah { max-width: 800px; }

/* Peringatan bahwa ini bukan Laporan resmi. Diberi warna emas, bukan merah:
   ia keterangan yang wajib dibaca, bukan galat. */
.lapor-peringatan {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding: 1rem 1.15rem;
    border: 1px solid rgba(242, 169, 0, .5);
    border-left: 4px solid var(--emas);
    border-radius: .8rem;
    background: var(--emas-muda);
    font-size: .88rem;
    line-height: 1.6;
    color: #5C4700;
}

.lapor-peringatan i { font-size: 1.15rem; color: var(--emas-tua); flex-shrink: 0; }

.lapor-kartu {
    background: #fff;
    border: 1px solid rgba(28, 28, 30, .08);
    border-radius: 1.25rem;
    box-shadow: 0 .75rem 2rem rgba(28, 28, 30, .08);
    padding: 1.5rem;
}

.lapor-bagian-judul {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 1.75rem 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid rgba(28, 28, 30, .08);
    font-weight: 700;
}

.lapor-bagian-judul:first-of-type { margin-top: 0; }

.lapor-opsional {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #9CA3AF;
}

/* Kolom jebakan: disembunyikan tanpa `display: none`, sebab sebagian
   pengirim otomatis melewati kolom yang benar-benar tidak dirender. */
.lapor-jebakan {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.lapor-aksi {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: flex-end;
    align-items: center;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(28, 28, 30, .08);
}

/* -- Halaman berhasil ----------------------------------------------------- */
.lapor-berhasil { text-align: center; padding: 2rem 1.5rem; }

.lapor-tanda {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #E8F6EC;
    color: #1B7F3B;
    font-size: 1.6rem;
}

.lapor-tanda-netral { background: var(--emas-muda); color: var(--emas-tua); }

.lapor-judul-kecil { font-size: 1.35rem; font-weight: 800; margin: 0 0 .5rem; }

.lapor-teks-kecil {
    font-size: .92rem;
    line-height: 1.65;
    color: #4B5563;
    margin: 0 auto 1.5rem;
    max-width: 58ch;
}

.lapor-kode-blok {
    border: 1px dashed rgba(28, 28, 30, .2);
    border-radius: 1rem;
    background: var(--krem);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.lapor-kode-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #6B7280;
    margin-bottom: .35rem;
}

.lapor-kode {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--merah);
    word-break: break-all;
}

.lapor-kode-teks {
    margin: .75rem auto 0;
    font-size: .82rem;
    line-height: 1.6;
    color: #6B7280;
    max-width: 52ch;
}

.lapor-tenggat {
    padding: .85rem 1rem;
    border-radius: .8rem;
    background: var(--merah-muda);
    font-size: .85rem;
    line-height: 1.6;
    color: var(--merah-tua);
    text-align: left;
}

.lapor-berhasil .lapor-aksi { justify-content: center; }

@media (min-width: 768px) {
    .lapor-kepala { padding: 3rem 0; }
    .lapor-judul { font-size: 2.1rem; }
    .lapor-kartu { padding: 2rem; }
    .lapor-berhasil { padding: 2.75rem 2rem; }
}

/* ---------------------------------------------------------------------------
   Tiga tombol hero pada layar sempit.

   Bertumpuk bertiga memakan tinggi layar yang sudah sedikit, dan mendorong
   kartu angka jauh ke bawah. Susunannya diubah menjadi kisi dua kolom:
   tombol utama merentang penuh di baris atas — ia tindakan yang dituju
   pengunjung, jadi tidak boleh menyusut — sedangkan dua tombol keterangan
   berbagi satu baris di bawahnya.

   Ikon pada tombol keterangan dilepas di ukuran ini supaya labelnya
   mendapat ruang; maknanya sudah terbawa teksnya.
   ------------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    .beranda-aksi {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
        gap: .6rem;
    }

    .beranda-aksi > .beranda-tombol-utama { grid-column: 1 / -1; }

    .beranda-aksi > .beranda-tombol-terang,
    .beranda-aksi > .beranda-tombol-garis {
        padding: .65rem .5rem;
        font-size: .8rem;
        line-height: 1.3;
    }

    .beranda-aksi > .beranda-tombol-terang i { display: none; }
}

@media (max-width: 359.98px) {
    .beranda-aksi > .beranda-tombol-terang,
    .beranda-aksi > .beranda-tombol-garis {
        font-size: .74rem;
        padding: .6rem .35rem;
    }
}

/* Kartu kanal formulir web: satu-satunya yang dapat dipakai saat itu juga,
   jadi diberi warna emas di antara keenamnya. Berupa tautan, sehingga
   seluruh bidang kartunya dapat diklik. */
.beranda-kanal-sorot {
    border-color: rgba(242, 169, 0, .55);
    background: var(--emas-muda);
    text-decoration: none;
    color: var(--arang);
}

.beranda-bagian-abu .beranda-kanal-sorot { background: var(--emas-muda); }

.beranda-kanal-sorot:hover {
    border-color: var(--emas);
    background: #FFF3D6;
    color: var(--arang);
}

.beranda-kanal-sorot .beranda-kanal-ikon { background: var(--emas); color: #4A080C; }
.beranda-kanal-sorot .beranda-kanal-teks { color: #6B5200; }
.beranda-kanal-sorot .beranda-kanal-rincian { color: var(--emas-tua); font-weight: 700; }

/* Tombol masuk di kepala halaman publik: diperbesar dari ukuran kecil
   supaya sebanding dengan merek yang kini 1,78rem. */
.beranda-tombol-masuk {
    padding: .6rem 1.2rem;
    font-size: .95rem;
}

@media (max-width: 575.98px) {
    .beranda-tombol-masuk { padding: .5rem .9rem; font-size: .88rem; }
}

/* ---------------------------------------------------------------------------
   Sisipan tautan luar di tengah paragraf.

   Versi pertama berlatar arang pekat — pilihan itu keliru. Di kolom kiri ia
   menjadi blok gelap kedua yang bersaing dengan kartu Dasar Hukum di kolom
   kanan, dan bobotnya membuat halaman terasa berat sebelah. Isyarat "tautan
   ini membawa keluar" toh dibawa ikon panah dan kata-katanya, bukan warna
   latarnya.

   Sekarang berupa bilah terang bergaris emas di tepi kiri — sama bahasanya
   dengan peringatan pada halaman formulir — jadi ia terbaca sebagai
   keterangan yang menyela, bukan kartu tersendiri.
   ------------------------------------------------------------------------ */
.beranda-sisip {
    display: flex;
    flex-direction: column;
    gap: .65rem;
    margin: 0 0 1.25rem;
    padding: .8rem .95rem;
    border: 1px solid rgba(242, 169, 0, .45);
    border-left: 3px solid var(--emas);
    border-radius: .7rem;
    background: var(--emas-muda);
}

.beranda-sisip-ket {
    margin: 0;
    min-width: 0;
    font-size: .84rem;
    line-height: 1.55;
    color: #5C4700;
}

.beranda-sisip-ket strong { color: #4A3600; }

.beranda-tombol-sigap {
    flex-shrink: 0;
    align-self: flex-start;
    background: var(--emas);
    color: #4A080C;
    border: 0;
    padding: .42rem .85rem;
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
}

.beranda-tombol-sigap:hover { background: #ffb81a; color: #4A080C; }

@media (min-width: 576px) {
    .beranda-sisip {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .beranda-tombol-sigap { align-self: center; }
}
/* ---------------------------------------------------------------------------
   Overlay pramuat halaman utama.

   Ia menutupi isi halaman, tidak menyembunyikannya — tidak ada aturan yang
   membuat badan halaman tak terlihat, sehingga kegagalan JS tidak dapat
   meninggalkan halaman kosong.

   Penghilangannya berlapis: animasi di bawah memudarkannya sendiri mulai
   detik 0,75, sedangkan `pramuat.js` melepasnya lebih cepat pada
   `window.load`. Di jaringan lokal jalur kedua yang hampir selalu menang,
   dan pudar 0,35 detik membuatnya terbaca sebagai pembukaan halus alih-alih
   kedipan.
   ------------------------------------------------------------------------ */
.pramuat {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: linear-gradient(150deg, var(--merah) 0%, var(--merah-tua) 55%, var(--merah-sidebar) 100%);
    animation: pramuat-pudar .35s ease .75s forwards;
}

@keyframes pramuat-pudar {
    to { opacity: 0; visibility: hidden; }
}

/* Dilepas JS: memakai transisi, bukan animasi, supaya tidak bertabrakan
   dengan animasi jaring pengaman di atas. */
.pramuat-lepas {
    opacity: 0;
    visibility: hidden;
    animation: none;
    transition: opacity .35s ease, visibility .35s ease;
}

.pramuat-isi { text-align: center; }

.pramuat-logo {
    width: 72px;
    height: 72px;
    margin-bottom: .75rem;
}

.pramuat-merek {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

/* Bilah tipis yang bergerak kiri-kanan. Sengaja tanpa persentase kemajuan:
   pemuatannya tidak diukur, dan bilah yang mengaku tahu kemajuan padahal
   tidak adalah kebohongan kecil yang mudah dihindari. */
.pramuat-bilah {
    width: 150px;
    height: 3px;
    margin: 0 auto;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
    overflow: hidden;
}

.pramuat-bilah span {
    display: block;
    width: 45%;
    height: 100%;
    border-radius: 999px;
    background: var(--emas);
    animation: pramuat-geser 1.1s ease-in-out infinite;
}

@keyframes pramuat-geser {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(222%); }
}

/* ⚠ Wajib. `app.css` mematikan SEMUA animasi bagi pengguna yang meminta
   gerak dikurangi, termasuk animasi pemudar di atas — tanpa aturan ini
   overlay-nya tersangkut selamanya dan menutupi seluruh halaman. Bagi
   mereka overlay tidak ditampilkan sama sekali. */
@media (prefers-reduced-motion: reduce) {
    .pramuat { display: none; }
}

/* ---------------------------------------------------------------------------
   Kanvas jaring pada hero.

   Tanpa z-index: urutan markah yang menentukan lapisannya. Ia disisipkan
   tepat sesudah pola titik, sehingga menggambar di atas pola dan di bawah
   tulisan (`.beranda-hero-isi` berlapis 1) serta puncak hiasan yang datang
   setelahnya di markah.

   `pointer-events: none` wajib: tanpa itu kanvas yang menutupi seluruh hero
   akan menelan klik pada ketiga tombolnya.
   ------------------------------------------------------------------------ */
.beranda-jaring {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Penyunting teks berformat (CKEditor) pada Formulir Model A: Fakta dan
   Keterangan serta Analisis. Tinggi awal setara textarea lima baris. */
.editor-teks .ck-editor__editable_inline { min-height: 9rem; font-size: .875rem; }
.editor-teks.is-invalid .ck.ck-editor__main > .ck-editor__editable { border-color: var(--bs-danger); }
.editor-teks .ck.ck-toolbar { border-top-left-radius: .25rem; border-top-right-radius: .25rem; }