/* ==========================================================
   PERBAIKAN TAMPILAN MOBILE (khusus halaman publik)
   --------------------------------------------------------
   File ini SENGAJA dipisah dari style.css & publik-caleg.css
   dan dimuat PALING TERAKHIR di includes/header.php, supaya
   semua aturan di sini otomatis "menang" menimpa aturan lama
   HANYA di dalam @media (max-width...) - tampilan desktop
   sama sekali tidak disentuh/berubah.

   Fokus perbaikan:
   1) Mengecilkan tinggi elemen-elemen besar (hero, section,
      peta) supaya tidak ada ruang kosong berlebihan di HP.
   2) Meringkas tinggi/panjang TABEL & KARTU di halaman publik
      (Daftar Caleg, Daftar Partai, Daftar Dapil, Detail Partai,
      Detail Dapil, Detail Caleg) supaya lebih rapi & tidak
      terlalu panjang saat di-scroll di HP.
   3) [Update] Semua ukuran teks, kartu, tinggi halaman, tabel,
      dan footer DIPERKECIL lagi satu tingkat supaya tampilan
      di HP terasa lebih ringkas/padat dan tidak "memenuhi
      layar" - konsisten di semua halaman publik.
   4) [Update] Kartu KACA yang membungkus tabel (Daftar Partai
      & Daftar Caleg) dipastikan TIDAK menyisakan area kosong
      panjang di bawah tabel sebelum gelombang footer - lihat
      blok ".dc2-hero-kaca" & ".dc2-card-tabel-partai" di bawah.
   5) [Update] Daftar Dapil: kartu dapil di HP diubah dari
      "ditumpuk ke bawah" menjadi SATU BARIS yang bisa digeser
      ke samping (swipe horizontal), supaya halaman tidak
      memanjang ke bawah walau jumlah dapil banyak - lihat
      blok ".grid-dapil" di bagian bawah file ini.
   ========================================================== */

/* ==========================================================
   KOTAK PENCARIAN DI HERO BERANDA - KHUSUS MOBILE
   --------------------------------------------------------
   Elemen baru (lihat index.php) disembunyikan total di desktop di
   sini (di luar media query), lalu baru dimunculkan sebagai kotak
   pencarian putih di dalam @media (max-width: 767px) di bawah.
   ========================================================== */
.hero-search-mobile { display: none; }

/* ==========================================================
   BOTTOM TAB BAR - KHUSUS MOBILE
   --------------------------------------------------------
   Dipasang cuma di 3 halaman: Daftar Partai, Daftar Caleg,
   Daftar Dapil (lihat markup ".mobile-tabbar" di masing-masing
   file .php tsb). Disembunyikan total di desktop di sini,
   baru ditampilkan sebagai bar melayang di bawah layar lewat
   @media (max-width: 767px) di bawah.
   ========================================================== */
.mobile-tabbar { display: none; }

@media (max-width: 767px) {

    /* ---------- NAVBAR (ukuran umum, lihat perbaikan posisi menu
       di blok @media max-width:700px di bagian bawah file ini) ---------- */
    .navbar-inner { padding: 8px 12px; }
    .brand-logo { width: 28px; height: 28px; }

    /* ---------- HERO BERANDA (index.php) ---------- */
    .hero { min-height: 300px; padding-bottom: 16px; }
    .hero-content { padding: 64px 16px 0; }
    .hero-eyebrow { margin-bottom: 2px; }
    .hero-content h1 { font-size: 1.5rem; }
    .hero-content h2.hero-sub { font-size: 0.9rem; margin-top: 3px; }

    /* [Update] Kotak pencarian tiruan di hero beranda DIHILANGKAN dari tampilan
       mobile (sebelumnya muncul mengambang di atas foto latar hero). Elemennya
       tetap ada di index.php tapi sudah disembunyikan total lewat ".hero-search-mobile
       { display:none; }" di luar media query, di atas file ini - jadi cukup
       dibiarkan begitu, tidak perlu di-flex-kan lagi di sini. */

    /* ---------- FITUR SINGKAT (4 kotak Cari/Dapil/Partai/Caleg) ----------
       Diubah dari "ikon di atas, teks di bawah, berjajar ke samping" menjadi
       KARTU MENDATAR bertumpuk ke bawah (ikon kiri, judul+deskripsi di kanan,
       panah di ujung kanan) - pakai CSS Grid supaya judul & deskripsi bisa
       ditumpuk rapi di satu kolom yang sama tanpa perlu ubah HTML (h4 & p
       sebelumnya cuma anak sejajar dari .feature, bukan di dalam 1 wrapper). */
    .features {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 14px 5% 18px;
    }
    .feature {
        display: grid;
        grid-template-columns: 44px 1fr 18px;
        grid-template-areas:
            "icon judul panah"
            "icon deskripsi panah";
        align-items: center;
        column-gap: 12px;
        row-gap: 1px;
        max-width: none;
        width: 100%;
        text-align: left;
        padding: 12px 14px;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 4px 14px rgba(20,30,60,0.08);
        border: 1px solid #eef1f7;
    }
    /* Garis pembatas vertikal antar fitur (dipakai waktu tampilan berjajar
       di desktop) dimatikan - di kartu bertumpuk begini garis itu tidak relevan lagi. */
    .feature + .feature::before { display: none; }
    .feature-icon {
        grid-area: icon;
        width: 42px;
        height: 42px;
        border-radius: 12px;
        font-size: 16px;
        margin: 0;
    }
    .feature h4 {
        grid-area: judul;
        font-size: 0.8rem;
        margin-bottom: 0;
        text-align: left;
    }
    .feature p {
        grid-area: deskripsi;
        font-size: 0.78rem;
        line-height: 1.3;
        text-align: left;
    }
    /* Panah ">" di ujung kanan tiap kartu - dekoratif (penanda "bisa diketuk"),
       ditambah lewat ::after supaya tidak perlu ubah HTML. */
    .feature::after {
        grid-area: panah;
        content: "\f105";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        color: var(--navy-dark);
        opacity: 0.45;
        font-size: 0.8rem;
        justify-self: end;
    }

    /* ---------- DAERAH PEMILIHAN (peta + legenda di beranda) ---------- */
    .dapil-section { padding: 16px 14px 8px; margin: 0 4% 18px; border-radius: 14px; }
    .section-heading { font-size: 1.12rem; }
    .dapil-left p { margin: 6px 0 10px; font-size: 0.78rem; line-height: 1.5; }
    .dapil-item { margin-bottom: 8px; gap: 8px; }
    .dapil-item-ic { width: 28px; height: 28px; }
    .map-visual { height: 180px; }
    .legenda-dapil { padding: 6px 10px; bottom: 8px; left: 8px; }
    .legenda-dapil h3 { font-size: 0.8rem; margin-bottom: 4px; }
    .legenda-item { font-size: 0.76rem; margin-bottom: 3px; }
    .info-dapil-box { padding: 8px 12px; font-size: 0.72rem; margin-top: 8px; }

    /* ---------- TENTANG (ringkas, di beranda) ---------- */
    .section-tentang { padding: 18px 5% 0; }
    .section-tentang h2 { font-size: 1.18rem; }
    .section-tentang p { margin: 6px 0 10px; font-size: 0.78rem; line-height: 1.5; }
    .tentang-text { padding-bottom: 10px; }
    .tentang-item { margin-bottom: 7px; gap: 8px; }
    .tentang-item-ic { width: 26px; height: 26px; }

    /* ---------- HERO "KACA" (Daftar Caleg / Daftar Partai / Daftar Dapil) ----------
       Sebelumnya pakai min-height:100vh, jadi di HP dengan konten pendek
       (misal Daftar Dapil yang cuma berisi 3 kartu) muncul area kosong
       besar di bawah kartu, sebelum lengkung putih & footer. Di HP,
       tinggi cukup mengikuti isi konten saja (tidak dipaksa 1 layar penuh). */
    .dc2-hero-kaca {
        min-height: 100vh; /* [Update] balik ke 100vh - foto Fakfak diperluas
                               supaya menutup penuh sampai bar hak cipta di
                               bawahnya, bukan berhenti tepat di kartu lalu
                               menyisakan area putih kosong. Aman dipakai lagi
                               sekarang karena bar bawah sudah tidak lagi
                               "position:fixed" (lihat ".mobile-tabbar" di
                               bagian bawah file ini) - jadi tidak ada lagi
                               dobel-hitung tinggi layar seperti sebelumnya. */
        height: auto; /* tetap boleh lebih tinggi dari 100vh kalau isinya
                          panjang (tabel Daftar Caleg/Partai yang banyak). */
        padding: 40px 14px 46px; /* padding-bawah disisakan SECUKUPNYA saja - persis
                                     seukuran gelombang putih di bawah (lihat
                                     ".dc2-kaca-fade-krem svg" yang dikecilkan jadi
                                     46px di bagian bawah file ini), supaya
                                     gelombang tidak lagi menutupi/menimpa tabel. */
    }
    .dc2-kaca-container { margin-top: 44px; }
    .dc2-hero-teks { margin-top: 0; }
    .dc2-hero-logo { width: 38px; height: 38px; margin-bottom: 4px; }
    .dc2-hero-judul { font-size: 1.02rem; margin-bottom: 3px; }
    .dc2-hero-sambutan { font-size: 0.72rem; margin-bottom: 10px; line-height: 1.4; }

    /* [Update] Kotak cari putih ("Cari nama caleg"/"Cari nama partai") di hero
       Daftar Caleg/Partai dikecilkan supaya proporsional dengan judul & teks
       di atasnya - sebelumnya melebar penuh dan terasa terlalu besar di HP. */
    .dc2-hero-search { max-width: 280px; padding: 8px 14px; }
    .dc2-hero-search input { font-size: 0.76rem; }
    .dc2-hero-search i { font-size: 0.78rem; }

    /* ---------- KARTU putih/kaca tempat tabel Daftar Caleg/Partai duduk ---------- */
    .dc2-card { margin-top: -18px; padding: 10px 10px 10px; border-radius: 12px; }
    .dc2-card-dapil { margin-top: -18px; }
    .dc2-card-tabel-partai { padding: 12px 10px 12px; }
    .dc2-tabel-partai-head { margin-bottom: 9px; gap: 8px; }
    .dc2-tabel-partai-head-icon { width: 30px; height: 30px; font-size: 0.85rem; border-radius: 9px; }
    .dc2-tabel-partai-head-judul { gap: 8px; }
    .dc2-tabel-partai-head-judul h3 { font-size: 0.84rem; }
    .dc2-tabel-partai-head-judul p { font-size: 0.74rem; }
    .dc2-tabel-partai-head-badge { padding: 5px 10px 5px 5px; gap: 6px; }
    .dc2-tabel-partai-head-badge-icon { width: 24px; height: 24px; font-size: 0.72rem; }
    .dc2-tabel-partai-head-badge p { font-size: 0.7rem; }
    .dc2-tabel-partai-head-badge strong { font-size: 0.74rem; }

    /* ==========================================================
       TABEL PUBLIK -> KARTU (Daftar Partai & Daftar Caleg)
       --------------------------------------------------------
       Struktur <table> aslinya TIDAK diubah (desktop tetap tabel
       biasa) - hanya TAMPILANNYA yang ditata ulang jadi kartu di
       HP, lewat CSS Grid di tiap <tr>. Sel-sel <td> yang sama
       persis (dirender oleh js/publik-caleg.js seperti biasa)
       dipetakan ke posisi baru pakai grid-template-areas, jadi
       TIDAK perlu ubah HTML atau JS sama sekali.
       ========================================================== */
    .dc2-tabel-wrap-kaca,
    .dc2-tabel-wrap { overflow-x: visible; box-shadow: none; }
    .dc2-tabel-partai { display: block; width: 100%; background: transparent; }
    .dc2-tabel-partai thead { display: none; }
    .dc2-tabel-partai tbody { display: flex; flex-direction: column; gap: 10px; }

    /* --- Kartu DAFTAR PARTAI: [no][logo] nama+singkatan (panah kanan) lalu
           baris jumlah caleg, lalu tombol "Lihat Caleg" selebar kartu --- */
    .dc2-tabel-partai tbody tr {
        display: grid;
        grid-template-columns: 32px 42px 1fr 16px;
        grid-template-areas:
            "no logo nama panah"
            "no logo singkatan panah"
            "jumlah jumlah jumlah jumlah"
            "aksi aksi aksi aksi";
        align-items: center;
        column-gap: 8px;
        row-gap: 6px;
        background: #fff !important;
        border-radius: 14px;
        padding: 12px;
        box-shadow: 0 4px 14px rgba(20,30,60,0.08);
        border: 1px solid #eef1f7;
    }
    .dc2-tabel-partai tbody tr td {
        display: block;
        padding: 0;
        border-bottom: none;
        text-align: left;
        font-size: 0.8rem;
    }
    .dc2-tabel-partai tbody tr td:nth-child(1) { grid-area: no; }
    .dc2-tabel-partai tbody tr td:nth-child(2) { grid-area: logo; }
    .dc2-tabel-partai tbody tr td:nth-child(3) { grid-area: nama; }
    .dc2-tabel-partai tbody tr td:nth-child(4) { grid-area: singkatan; }
    .dc2-tabel-partai tbody tr td:nth-child(5) { grid-area: jumlah; }
    .dc2-tabel-partai tbody tr td:nth-child(6) { grid-area: aksi; }
    /* Panah dekoratif di ujung kanan kartu (penanda "bisa diketuk") -
       aksi sebenarnya tetap lewat tombol "Lihat Caleg" di bawah. */
    .dc2-tabel-partai tbody tr::after {
        grid-area: panah;
        content: "\f105";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        color: var(--navy-dark);
        opacity: 0.4;
        font-size: 0.72rem;
        align-self: start;
    }
    .dc2-tabel-partai .tabel-partai-no {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        background: #dbe7fb;
        color: #14335e;
        border-radius: 8px;
        font-size: 0.78rem;
        font-weight: 800;
    }
    .tabel-partai-logo-wrap { width: 40px; height: 40px; margin: 0; font-size: 0.8rem; }
    .dc2-tabel-partai .tabel-partai-nama { font-size: 0.78rem; }
    .tabel-partai-singkatan-pill,
    .tabel-partai-jumlah-pill {
        padding: 3px 9px;
        font-size: 0.7rem;
        white-space: nowrap;
    }
    .tabel-partai-jumlah-pill { gap: 5px; width: fit-content; }
    .tabel-partai-btn-aksi {
        width: 100%;
        justify-content: center;
        padding: 8px 10px;
        font-size: 0.78rem;
        border-radius: 10px;
        gap: 5px;
    }
    /* Baris kosong ("Belum ada data...") - lebar penuh, bukan ikut grid area kecil */
    .dc2-tabel-partai tbody tr td.daftar-kosong {
        grid-column: 1 / -1;
        grid-row: 1 / -1;
        text-align: center;
        padding: 14px 0;
        font-size: 0.72rem;
    }
    .dc2-tabel-partai tbody tr:has(td.daftar-kosong) {
        background: transparent !important;
        box-shadow: none;
        border: none;
    }

    /* --- Kartu DAFTAR CALEG: struktur kolom beda (Nama / Partai / Dapil / Aksi),
           jadi area & susunannya ditimpa lagi khusus ".dc2-tabel-caleg" --- */
    .dc2-tabel-caleg tbody tr {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "nama nama"
            "partai dapil"
            "aksi aksi";
    }
    .dc2-tabel-caleg tbody tr::after { content: none; }
    .dc2-tabel-caleg tbody tr td:nth-child(1) { grid-area: nama; }
    .dc2-tabel-caleg tbody tr td:nth-child(2) { grid-area: partai; font-size: 0.78rem; color: #55607a; }
    .dc2-tabel-caleg tbody tr td:nth-child(3) { grid-area: dapil; font-size: 0.78rem; color: #55607a; text-align: right; }
    .dc2-tabel-caleg tbody tr td:nth-child(4) { grid-area: aksi; }
    .tabel-caleg-nama-wrap { gap: 8px; }
    .tabel-caleg-avatar { width: 34px; height: 34px; font-size: 0.9rem; }
    .tabel-caleg-nama { font-size: 0.78rem; }

    .dc2-tabel-footer { margin-top: 10px; gap: 8px; }
    .dc2-tabel-footer-info { font-size: 0.76rem; }
    .dc2-tabel-pagination-info { font-size: 0.78rem; min-width: 76px; }

    /* --- Kartu popup HASIL PENCARIAN (overlay) di Daftar Caleg ---
       [Perbaikan] Sebelumnya pakai grid 2 kolom tetap (repeat(2,1fr)).
       Kalau hasil pencariannya cuma 1 kartu, kartu itu jatuh di kolom
       kiri saja (kolom kanan kosong) sehingga terlihat "nyamping",
       tidak benar-benar di tengah panel. Diganti flexbox + center
       supaya hasil pencarian (1 kartu atau lebih) selalu rata tengah. */
    .dc2-search-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        grid-template-columns: none;
    }
    .dc2-search-list .daftar-caleg-row {
        width: 62%;
        min-width: 170px;
        max-width: 220px;
        padding: 38px 14px 14px;
        margin-top: 30px;
    }
    /* Nama & sub sebelumnya punya min-height untuk jaga-jaga 2 baris,
       bikin card jadi panjang ke bawah walau teksnya muat 1 baris.
       Dikurangi supaya tinggi card mengikuti isi teks yang sebenarnya. */
    .dc2-search-list .daftar-caleg-nama { min-height: 0; font-size: 0.8rem; }
    .dc2-search-list .daftar-caleg-sub { min-height: 0; margin-bottom: 4px; }
    .dc2-search-list .daftar-caleg-avatar { width: 56px; height: 56px; }
    .dc2-search-list .daftar-caleg-avatar-wrap { top: -28px; }
    .dc2-search-list .link-lihat-detail { padding: 6px 16px; font-size: 0.72rem; }

    /* ---------- KARTU DAPIL (Daftar Dapil) ----------
       Diubah dari grid yang ditumpuk ke bawah menjadi SATU BARIS yang
       bisa digeser ke samping (swipe), supaya halaman tetap pendek
       walau jumlah dapil banyak - lihat komentar detail di dekat
       akhir file ini (".grid-dapil, .card-dapil"). Ukuran kartu di
       bawah ini menyesuaikan mode geser-samping tersebut. */
    .card-dapil-peta { height: 155px; font-size: 1.6rem; }
    .card-dapil-body { padding: 10px 12px; }
    .card-dapil-body h3 { font-size: 0.82rem; margin-bottom: 3px; }
    .card-dapil-wilayah,
    .card-dapil-jumlah { font-size: 0.76rem; margin-bottom: 4px; }
    .card-dapil-body .btn-lihat-detail,
    .card-dapil .btn-lihat-detail { padding: 6px 12px; font-size: 0.76rem; }

    /* ---------- DETAIL PARTAI (banner + grid kartu caleg) ---------- */
    .dp3-banner { padding: 34px 14px 14px; gap: 8px; }
    .dp3-banner-logo { width: 48px; height: 48px; border-radius: 10px; font-size: 1.1rem; padding: 5px; }
    .dp3-banner-nama { font-size: 0.92rem; margin-bottom: 2px; }
    .dp3-banner-nama span { font-size: 0.72rem; }
    .dp3-banner-meta { font-size: 0.74rem; gap: 3px; }
    .dp3-container { padding: 12px 14px 0; }
    .dp3-container-lebar { padding: 12px 14px 0; }
    .dp3-section-title { font-size: 0.84rem; margin-bottom: 8px; }

    /* Kartu caleg tetap MENDATAR (foto kecil di kiri, teks di kanan)
       bukan bertumpuk ke bawah - supaya tinggi tiap kartu tetap pendek
       walau daftarnya panjang. */
    .dp3-grid { grid-template-columns: 1fr; gap: 6px; }
    .dp3-card { flex-direction: row; height: auto; min-height: 0; }
    .dp3-card-foto { width: 56px; height: 56px; aspect-ratio: 1 / 1; }
    .dp3-card-body { padding: 5px 8px; }
    .dp3-card-nama { font-size: 0.72rem; margin-bottom: 1px; }
    .dp3-card-sub { font-size: 0.7rem; }
    .dp3-card-body .btn-lihat-profil { padding: 3px 8px; font-size: 0.68rem; margin-top: 3px; }

    /* ---------- DETAIL DAPIL ---------- */
    .detail-dapil-hero { padding: 28px 14px 14px; min-height: 0; }
    .detail-dapil-badge { margin-bottom: 4px; }
    .detail-dapil-hero h1 { font-size: 0.95rem; margin-bottom: 4px; }
    .detail-dapil-sub { font-size: 0.76rem; margin-bottom: 8px; }
    .detail-dapil-pills { gap: 5px; }
    .detail-dapil-pills span { font-size: 0.7rem; padding: 3px 8px; }
    .breadcrumb-teks { margin: 8px 0; font-size: 0.76rem; }

    .tabel-caleg-wrap { margin-bottom: 14px; }
    .tabel-caleg-head { padding: 8px 10px; gap: 8px; }
    .tabel-caleg-judul { font-size: 0.78rem; }
    .tabel-caleg thead th { padding: 6px 8px; font-size: 0.68rem; }
    .tabel-caleg tbody td { padding: 5px 8px; font-size: 0.76rem; }
    .tabel-caleg-foto { width: 26px; height: 26px; font-size: 0.8rem; }

    .detail-dapil-tentang { padding: 12px; margin-bottom: 12px; }
    .detail-dapil-tentang-peta { width: 84px; height: 84px; font-size: 2.6rem; }
    .detail-dapil-tentang h3 { font-size: 0.82rem; margin-bottom: 4px; }
    .detail-dapil-tentang > p { font-size: 0.72rem; margin-bottom: 8px; }
    .detail-dapil-stats { padding: 8px; gap: 5px; margin-bottom: 8px; }
    .detail-dapil-wilayah-judul { font-size: 0.8rem; margin-bottom: 4px; }
    .detail-dapil-wilayah-list li { font-size: 0.8rem; padding: 2px 0 2px 12px; }

    /* ---------- MODAL "Lihat Caleg" (dipakai di Daftar Partai & Daftar Dapil) ---------- */
    .mcp-kiri { padding: 14px 12px 10px; gap: 5px; }
    .mcp-logo { width: 52px; height: 52px; font-size: 0.9rem; }
    .mcp-nama-partai { font-size: 0.76rem; }
    .mcp-jumlah, .mcp-wilayah { font-size: 0.72rem; }
    .mcp-kanan { padding: 10px 10px 10px; }
    .mcp-judul-kanan { font-size: 0.76rem; margin-bottom: 6px; }
    .mcp-dapil-tabs { gap: 5px; margin-bottom: 8px; }
    .mcp-dapil-tab { padding: 4px 10px; font-size: 0.7rem; }
    .mcp-row { padding: 5px 8px; gap: 6px; }
    .mcp-row-avatar { width: 22px; height: 22px; font-size: 0.72rem; }
    .mcp-row-nama { font-size: 0.76rem; }
    .mcp-row-dapil { font-size: 0.68rem; }
    .mcp-pagination { margin-top: 8px; padding-top: 8px; gap: 6px; }
    .mcp-pagination-btn { width: 22px; height: 22px; font-size: 0.72rem; }
    .mcp-pagination-info { font-size: 0.74rem; }

    /* ==========================================================
       DETAIL CALEG - disusun ulang mengikuti konsep desain referensi:
       layout 1 kolom, kartu profil ditengah & proporsional, foto
       persegi besar (object-fit:cover dipertahankan), tab bisa
       digeser horizontal, card informasi memenuhi lebar layar dengan
       margin rapi, video/kegiatan tetap carousel geser samping.
       Palet navy/putih/merah, struktur HTML, isi data, dan fungsi
       JS TIDAK diubah - murni ukuran/posisi/spacing lewat CSS ini.
       Catatan: header logo+hamburger pada gambar referensi adalah
       navbar utama situs, yang di halaman ini memang sengaja
       disembunyikan ($hide_navbar) dan diganti topbar tombol-kembali
       - bagian itu dipertahankan seperti semula, hanya dirapikan.
       ========================================================== */
    .dc2-hero-putih { height: 84px; }
    .detail-hero-topbar { padding: 10px 14px; }
    .tombol-kembali { width: 34px; height: 34px; font-size: 0.85rem; }
    .detail-caleg-page-bg { min-height: 0; overflow-x: hidden; }
    /* [PERBAIKAN UTAMA - penyebab kartu "geser"/terpotong]: .publik-container
       punya margin:auto kiri-kanan tanpa width eksplisit, sehingga di dalam
       .dc2-abu (flex column) lebarnya dihitung mengikuti ukuran konten
       (fit-content), bukan mengikuti lebar layar - membuat seluruh isi
       halaman melebar ke kanan & terpotong di HP. Dipaksa width:100% supaya
       selalu mengikuti lebar layar seperti seharusnya. */
    .dc2-abu.detail-caleg-abu .publik-container { overflow-x: hidden; width: 100%; }
    /* [Perbaikan] .detail-top-wave svg punya aturan umum tinggi 110px di
       breakpoint lain, lebih tinggi dari hero (84px) - membuat gelombang
       "meluber" ke bawah & menutupi bagian atas kartu ID. Disamakan
       supaya tidak overlap. */
    .detail-top-wave svg { height: 84px; }
    .detail-halaman-grid { margin-top: -8px; gap: 14px; overflow-x: hidden; }

    /* [Update] Sebelumnya wadah ini (dc2-card.detail-card-gabungan) dibuat
       polos/transparan supaya tab menyatu dengan latar - tapi ini bikin
       tampilannya tidak konsisten dengan card "Video Kampanye"
       (.detail-card-media) yang punya bungkus kaca biru laut. Sekarang
       disamakan persis gaya bungkusnya (gradasi biru + blur + shadow)
       supaya semua card di halaman ini konsisten. */
    .detail-card-gabungan {
        padding: 16px 12px 14px;
        background: linear-gradient(160deg, rgba(214,234,252,0.92) 0%, rgba(214,234,252,0.7) 55%, rgba(214,234,252,0.4) 100%);
        backdrop-filter: blur(6px);
        border-radius: 16px;
        box-shadow: 0 6px 16px rgba(20,30,50,0.07);
    }

    /* --- Kartu identitas (ID card): ditengahkan & proporsional, meniru
           kartu tanda peserta pada referensi ---
       [Perbaikan] Sebelumnya baris nomor+logo+nama partai bisa mendorong
       kartu melebar ke luar layar (kartu jadi "geser" ke kanan) kalau nama
       partainya panjang - penyebabnya nama partai adalah flex-item yang
       tidak diberi min-width:0, jadi browser tidak mau menyusutkan/
       mewrap teksnya walau induknya sudah dibolehkan menyusut. Diperbaiki
       lewat min-width:0 di elemen nama partai + flex-wrap sebagai
       jaring pengaman, plus kartu dibuat sedikit lebih kecil (94%) &
       overflow:hidden supaya dijamin tidak ada yang bocor keluar. */
    .detail-card-caleg { width: 88%; max-width: 310px; margin: 0 auto 32px; }
    .detail-id-card { padding: 16px 14px 18px; text-align: center; border-radius: 18px; overflow: hidden; }
    .detail-id-top { justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
    .detail-id-nomor-besar {
        font-size: 0.85rem;
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--navy-dark);
        color: #fff;
        border-radius: 6px;
        line-height: 1;
    }
    .detail-id-partai-info { flex: 1 1 auto; justify-content: center; gap: 8px; min-width: 0; max-width: 100%; }
    .detail-id-partai-logo { width: 26px; height: 26px; border-radius: 5px; flex-shrink: 0; }
    .detail-id-partai-nama {
        font-size: 0.76rem;
        text-align: left;
        letter-spacing: 0.01em;
        min-width: 0;
        flex-shrink: 1;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    .detail-id-divider { margin: 12px 0 10px; opacity: 0.15; }
    .detail-id-nourut-label { font-size: 0.78rem; margin-bottom: 12px; }
    .detail-id-nourut-label span { display: block; font-size: 1.7rem; margin: 2px 0 0; }

    /* Foto: persegi & cukup besar, object-fit:cover (aturan asal) dipertahankan,
       hanya rasio & ukurannya dijadikan lebih persegi & proporsional di HP */
    .detail-id-foto-wrap { width: 66%; max-width: 190px; margin: 0 auto 12px; }
    .detail-caleg-foto-wrap-polos { aspect-ratio: 1 / 1; border-radius: 14px; margin-bottom: 10px; }
    .detail-id-nama { font-size: 1rem; margin-bottom: 4px; overflow-wrap: break-word; word-break: break-word; }
    .detail-id-dapil-badge,
    .detail-caleg-dapil-badge { font-size: 0.8rem; }
    .detail-caleg-visimisi-singkat { font-size: 0.72rem; }


    /* --- Tab Profil/Riwayat/Pendidikan/Pekerjaan/Program: satu baris,
           bisa digeser ke samping, dibungkus bar abu-abu muda mengikuti
           konsep referensi (tab aktif tetap pil navy) --- */
    .detail-slider { margin-top: 14px; padding-top: 4px; }
    .detail-slider-head { margin-bottom: 10px; gap: 6px; justify-content: flex-start; }
    .detail-slider-tabs {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        gap: 6px;
        background: #eef1f5;
        border-radius: 14px;
        padding: 6px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .detail-slider-tabs::-webkit-scrollbar { display: none; }
    .detail-slider-tabs button {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 8px 14px;
        font-size: 0.72rem;
        border-radius: 10px;
    }
    .detail-slider-nav { display: none; }

    /* --- Card informasi (bio/riwayat): memenuhi lebar layar dengan margin
           rapi (mengandalkan padding container 12px di publik-caleg.css) --- */
    .detail-bio-strip,
    .detail-riwayat-block { padding: 16px; border-radius: 16px; font-size: 0.78rem; margin: 0; }
    .detail-bio-item { padding: 8px 2px; gap: 6px; }
    .detail-bio-label { flex-basis: 130px; }
    .detail-riwayat-block h4 { margin: 10px 0 6px; font-size: 0.72rem; }
    .detail-pendidikan-table th,
    .detail-pendidikan-table td { padding: 7px 10px; font-size: 0.78rem; }
    .detail-pendidikan-table thead th { font-size: 0.72rem; }
    .detail-visi, .detail-misi { padding: 12px 14px; }
    .detail-landing-heading-inner { padding: 7px 20px; }
    .detail-landing-heading h2 { font-size: 0.92rem; }
    .detail-card-media { padding: 16px 12px 14px; border-radius: 16px; margin: 0; }

    /* --- Video Kampanye & Kegiatan: grid statis -> carousel geser samping
           (pola sama dengan ".grid-dapil" di Daftar Dapil), kartu memakai
           lebar proporsional supaya kartu berikutnya "mengintip" di tepi,
           persis pola carousel pada referensi --- */
    .detail-grid-media {
        display: flex;
        flex-wrap: nowrap;
        grid-template-columns: none;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 12px;
        padding: 2px 2px 8px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .detail-grid-media::-webkit-scrollbar { display: none; }
    .detail-grid-media .detail-media-thumb {
        flex: 0 0 auto;
        width: 62%;
        max-width: 230px;
        scroll-snap-align: start;
    }
    .detail-grid-media .detail-media-thumb-img { height: 118px; }
    .detail-media-thumb-bawah { padding: 12px 14px 16px; min-height: 0; }
    .detail-media-thumb-caption {
        font-size: 0.85rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* ---------- BAR BAWAH (Daftar Partai/Caleg/Dapil) ----------
       [Update] Bukan lagi bar menu navigasi (Beranda/Partai/Caleg/Tentang)
       berlatar putih, tapi bar navy polos yang cuma menampilkan teks
       hak cipta (lihat markup ".mobile-tabbar" yang sudah diringkas
       di masing-masing file .php tsb).
       [Update lagi] Sebelumnya "position:fixed" nempel di dasar LAYAR,
       jadi kalau kontennya (kartu dapil dll) pendek, muncul area putih
       kosong besar di antara kartu dan bar ini (karena bar tetap di
       dasar layar walau konten di atasnya sudah habis). Diganti jadi
       elemen biasa (ikut alur halaman) yang langsung nempel persis di
       bawah hero/kartu, apa pun tinggi kontennya - jadi tidak ada lagi
       celah putih di antara keduanya. Karena isinya cuma teks hak cipta
       (bukan navigasi), tidak masalah dia ikut ter-scroll bersama
       konten, tidak perlu selalu terlihat di layar. */
    .mobile-tabbar {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        background: var(--navy-dark);
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    }
    .mobile-tabbar-copyright {
        margin: 0;
        color: #fff;
        font-size: 0.72rem;
        line-height: 1.4;
        text-align: center;
        opacity: 0.85;
    }

    /* [Update] Di 3 halaman yang sudah punya bottom tab bar sendiri (Daftar
       Caleg, Daftar Partai, Daftar Dapil - ditandai lewat body.has-mobile-tabbar),
       footer besar (kartu menu, ikuti kami, dst) beserta gelombang putih
       di atasnya DIHILANGKAN total khusus di HP, karena navigasinya sudah
       diwakili oleh tab bar di bawah layar. Footer tetap tampil normal
       di desktop dan di halaman lain (beranda, detail, dsb). */
    body.has-mobile-tabbar .site-footer,
    body.has-mobile-tabbar .footer-wave { display: none; }

    /* [Update] Halaman detail caleg TETAP pakai footer besar (card navy +
       menu + copyright) di HP, tapi gelombang putih/dua-warna di atasnya
       (.footer-wave) dihilangkan supaya langsung nyambung ke card navy
       tanpa hidebar. */
    body.page-detail-caleg .footer-wave { display: none; }
    /* [Update] Isi card footer (logo, deskripsi, Menu, Ikuti Kami) juga
       dihilangkan di halaman detail caleg - hanya sisakan teks hak cipta,
       menyerupai pola yang sama di halaman login. */
    body.page-detail-caleg .footer-grid { display: none; }
    body.page-detail-caleg .site-footer { padding: 14px 6%; }
    body.page-detail-caleg .footer-bottom { border-top: none; padding-top: 0; }

    /* [Update] Halaman login: gelombang (.footer-wave) DAN seluruh isi
       card footer (logo, deskripsi, Menu, Ikuti Kami) dihilangkan di HP,
       supaya yang tersisa cuma bar navy tipis berisi teks hak cipta saja -
       menyerupai bar bawah di Daftar Caleg/Partai/Dapil. */
    body.page-login .footer-wave { display: none; }
    body.page-login .footer-grid { display: none; }
    body.page-login .site-footer { padding: 14px 6%; }
    body.page-login .footer-bottom { border-top: none; padding-top: 0; }
    /* [Perbaikan] Strip putih yang muncul sesaat di bawah bar hak cipta saat
       discroll (efek "rubber-band"/overscroll di HP) - itu warna latar
       default html/body (putih) yang mengintip karena belum di-set. Diganti
       navy supaya menyatu dengan bar hak cipta, tidak ada lagi strip putih. */
    html:has(body.page-login),
    body.page-login {
        background: var(--navy-dark);
    }

    /* [Update] Di 3 halaman dengan hero foto (Daftar Caleg, Daftar Partai,
       Daftar Dapil), kartu putih bergelombang (.dc2-kaca-fade-krem) yang
       jadi transisi dari foto ke area putih di bawahnya DIHILANGKAN di HP
       sesuai revisi tampilan mobile. */
    body.has-mobile-tabbar .dc2-kaca-fade-krem { display: none; }

    /* [Update] BUG area putih kosong besar: ".site-shell" (style.css) punya
       "min-height:105vh" supaya footer normal selalu menyentuh dasar layar.
       Tapi di 3 halaman has-mobile-tabbar, footer besar sudah disembunyikan
       total (aturan tepat di atas) dan hero versi HP sengaja dibuat setinggi
       konten saja (bukan 100vh lagi - lihat ".dc2-hero-kaca" di bawah),
       sehingga sisa "min-height:105vh" itu jadi ruang kosong putih raksasa
       di antara kartu dan bilah bawah. Dihilangkan khusus di HP untuk
       halaman ini supaya tinggi halaman cuma mengikuti isi kontennya. */
    body.has-mobile-tabbar .site-shell { min-height: 0; }

    /* ---------- FOOTER ---------- */
    .site-footer { padding: 14px 5% 10px; }
    .footer-grid { gap: 16px; margin-bottom: 12px; }
    .footer-brand img { width: 32px; height: 32px; }
    .footer-brand h4 { font-size: 0.72rem; margin-bottom: 5px; }
    .footer-brand p { font-size: 0.76rem; line-height: 1.45; }
    .footer-col h5 { font-size: 0.78rem; margin-bottom: 6px; }
    .footer-col a { font-size: 0.72rem; margin-bottom: 5px; }
    .social-icons a { width: 28px; height: 28px; font-size: 0.78rem; }
    .footer-bottom { padding-top: 10px; font-size: 0.76rem; }
}

/* ---------- HP KECIL (iPhone SE dan sejenisnya) ---------- */
@media (max-width: 420px) {
    .hero { min-height: 260px; }
    .hero-content { padding: 54px 14px 0; }
    .hero-content h1 { font-size: 1.28rem; }
    .hero-content h2.hero-sub { font-size: 0.8rem; }

    .map-visual { height: 160px; }

    .dc2-hero-kaca { padding: 34px 10px 46px; } /* padding-bawah tetap 46px, disamakan
                                                     dengan tinggi gelombang, supaya di
                                                     HP kecil gelombang juga tidak
                                                     menimpa tabel/kartu */
    .dc2-kaca-container { margin-top: 34px; }
    .dc2-card { padding: 8px 8px 8px; }

    .dc2-tabel-partai tbody tr { padding: 10px; }
    .tabel-partai-logo-wrap { width: 34px; height: 34px; }

    .card-dapil-peta { height: 140px; } /* tetap dibiarkan cukup besar di HP kecil
                                            supaya peta di dalam kartu dapil tidak
                                            ikut terlalu sempit/susah dibaca */

    .dp3-banner { padding: 28px 12px 12px; }
    .dp3-banner-logo { width: 42px; height: 42px; }
    .dp3-banner-nama { font-size: 0.82rem; }

    .dp3-card-foto { width: 48px; height: 48px; }

    .detail-dapil-hero { padding: 24px 12px 12px; }
    .detail-dapil-tentang-peta { width: 68px; height: 68px; }

    /* Detail Caleg di HP kecil: kartu ID & foto sedikit dikecilkan lagi
       supaya tetap proporsional dan tidak memenuhi layar secara berlebihan */
    .detail-id-card { padding: 16px 12px 18px; }
    .detail-id-foto-wrap { width: 66%; max-width: 180px; }
    .detail-id-nama { font-size: 0.98rem; }
    .detail-grid-media .detail-media-thumb { width: 72%; }

    .site-footer { padding: 12px 5% 8px; }
    .footer-brand h4 { font-size: 0.78rem; }
    .footer-brand p { font-size: 0.72rem; }
}

/* ==========================================================
   NAVBAR: menu tetap sejajar dengan logo (bukan pindah ke
   baris baru di bawahnya), tulisan menu diperkecil, dan
   tombol Login dipastikan tidak terpotong di tepi layar.
   Breakpoint disamakan dengan style.css (max-width: 700px)
   supaya menimpa persis di rentang yang sama.
   ========================================================== */
@media (max-width: 700px) {
    .navbar-inner {
        flex-wrap: nowrap; /* jangan pindah ke baris baru - tetap 1 baris dengan logo */
        row-gap: 0;
        gap: 6px;
        padding: 8px 12px;
    }
    .brand {
        gap: 5px;
        flex: 1 1 auto; /* [Update] SEBELUMNYA flex-shrink:0 (dipaksa tidak
                            boleh menyusut sama sekali) - masalahnya judul
                            situs "Sistem Informasi Calon Legislatif
                            Kabupaten Fakfak" itu sangat panjang, jadi kalau
                            dipaksa tidak boleh menyusut, dia rebutan tempat
                            sama tombol Login (yang juga flex-shrink:0) dan
                            tombol Login-nya kedorong sampai keluar tepi
                            layar. Sekarang .brand boleh menyusut & teksnya
                            dipotong rapi (...) lewat .brand-text di bawah,
                            supaya tombol Login SELALU kebagian tempat. */
        min-width: 0;
    }
    .brand-logo { width: 28px; height: 28px; }
    .brand-text {
        font-size: 0.8rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }
    .nav-menu {
        flex: 0 1 auto; /* sebelumnya flex:1 0 100% memaksa jadi baris sendiri */
        gap: 8px;
        min-width: 0;
        justify-content: flex-end;
    }
    .nav-menu a {
        font-size: 0.72rem; /* teks menu diperkecil supaya muat sejajar dengan logo */
        padding: 2px 0;
    }
    .btn-login {
        padding: 8px 15px;
        font-size: 0.76rem;
        line-height: 1; /* [Update] mencegah tinggi baris teks bawaan browser
                            membuat ikon & tulisan "Login" terlihat keluar dari
                            bingkai pil navy-nya - sebelumnya padding 5px 9px
                            terlalu pas-pasan untuk ikon+teks. Padding ditambah
                            lagi (7px 13px -> 8px 15px) + teks "Login" dibungkus
                            <span> di header.php supaya perataan vertikalnya
                            konsisten di semua browser, bukan cuma andalkan
                            text-node flex item bawaan. */
        gap: 5px;
        margin: 0;
        flex-shrink: 0; /* tombol Login tidak boleh ikut menyusut/terpotong */
        white-space: nowrap;
    }
    .btn-login i { font-size: 0.74rem; line-height: 1; }
    .btn-login span { line-height: 1; }
}

/* ==========================================================
   DAFTAR DAPIL: kartu digeser ke samping (bukan ditumpuk)
   --------------------------------------------------------
   Sebelumnya ".grid-dapil" jadi grid 2 kolom (<=700px) lalu
   1 kolom penuh (<=480px) - artinya semua kartu ditumpuk ke
   BAWAH dan halaman jadi panjang kalau dapil-nya banyak.

   Diganti jadi flex satu baris yang overflow-x:auto (scroll-
   snap), supaya pengguna tinggal geser jarinya ke samping
   untuk pindah kartu, dan tinggi halaman hanya setinggi 1
   kartu saja. Berlaku di seluruh rentang mobile (<=767px, di
   bawah lebar iPad supaya iPad tetap tampilan desktop),
   menimpa aturan grid 2/1 kolom dari publik-caleg.css.
   ========================================================== */
@media (max-width: 767px) {
    .grid-dapil {
        display: flex;
        flex-wrap: nowrap;
        grid-template-columns: none; /* batalkan grid lama */
        overflow-x: auto;
        overflow-y: hidden;
        gap: 12px;
        padding: 2px 2px 10px; /* ruang tipis kiri/kanan + bawah untuk bayangan kartu */
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox: sembunyikan scrollbar bawaan */
    }
    .grid-dapil::-webkit-scrollbar {
        display: none; /* Chrome/Safari/Edge: sembunyikan scrollbar bawaan, tetap bisa digeser */
    }
    .card-dapil {
        flex: 0 0 auto;
        width: 90%; /* dilebarkan (sebelumnya 76%) supaya peta interaktif di
                        dalam kartu tidak ikut terlalu sempit/susah dibaca -
                        kartu berikutnya tetap sedikit "mengintip" di tepi
                        kanan sebagai penanda kartu bisa digeser */
        scroll-snap-align: start;
    }

    /* [Update] Petunjuk "Geser untuk lihat dapil lainnya" DIHAPUS atas
       permintaan — kartu dapil tetap bisa digeser seperti biasa (scroll-snap
       masih aktif di .grid-dapil di atas), cuma teks petunjuknya saja yang
       tidak lagi ditampilkan. */
}

@media (max-width: 420px) {
    .card-dapil { width: 94%; }
}

/* ==========================================================
   GARIS TIPIS "NYASAR" DI ANTARA GELOMBANG PUTIH & KONTEN
   DI BAWAHNYA (paling kelihatan di HP): terjadi karena SVG
   gelombang (preserveAspectRatio="none") dan tepi section di
   bawahnya tidak menyatu sempurna secara sub-pixel di layar
   sempit, jadi tampak garis tipis sisa foto/gradient hero.
   Diperbaiki dengan menambah overlap & warna latar penutup.
   ========================================================== */
@media (max-width: 767px) {
    .hero-wave { bottom: -3px; }
    .features {
        position: relative;
        margin-top: -3px;
        background: #fff;
    }
    .dc2-kaca-fade-krem { bottom: -3px; }

    /* [Update] Gelombang di hero beranda (index.php) sebelumnya masih ikut
       ukuran desktop (90px) di HP, jadi tampak tebal/tinggi dengan banyak
       lengkungan yang makan banyak ruang. Dikecilkan supaya senada dengan
       gelombang di Daftar Caleg/Partai/Dapil di bawah ini. */
    .hero-wave svg { height: 50px; }

    /* Gelombang putih di Daftar Partai/Caleg/Dapil dikecilkan tingginya
       (dari 90px) supaya pas dengan padding-bawah ".dc2-hero-kaca" di
       atas (46px) dan TIDAK menutupi/menimpa baris terakhir tabel atau
       kartu lagi - sebelumnya gelombang ini lebih tinggi dari sisa
       ruang di bawah kartu, jadi ikut "memakan" bagian bawah tabel. */
    .dc2-kaca-fade-krem svg { height: 46px; }
}