/* =========================================================
   MOBILE-RESPONSIVE.CSS
   Satu-satunya sumber aturan tampilan mobile untuk seluruh
   project (Front-end + Dashboard Admin).

   PENTING — ATURAN KERAS FILE INI:
   1. SEMUA rule di file ini WAJIB berada di dalam
      @media screen and (max-width: 768px). Jangan pernah
      menambah rule di luar media query ini.
   2. File ini di-load SETELAH style.css utama (lihat
      layouts/app.blade.php & admin/layout.blade.php), supaya
      rule di sini menang lewat urutan cascade.
   3. style.css PUNYA breakpoint lamanya sendiri (900px, 600px,
      dst) yang MASIH AKTIF dan bisa numpuk di rentang ≤768px
      yang sama. Supaya tidak ada celah "setengah lama setengah
      baru", tiap selector di sini SENGAJA ditulis LENGKAP
      (bukan cuma properti yang "kurang") supaya benar-benar
      menguasai tampilan akhir, bukan cuma menambal.
   ========================================================= */

@media screen and (max-width: 768px) {

    /* ---------------------------------------------------
       1. GLOBAL
       --------------------------------------------------- */

    html, body {
        overflow-x: hidden;
    }

    body {
        font-size: 15px;
    }

    h1 { font-size: 1.6rem; line-height: 1.3; }
    h2 { font-size: 1.3rem; line-height: 1.3; }
    h3 { font-size: 1.1rem; line-height: 1.3; }

    .container {
        width: 92%;
    }

    section {
        padding: 40px 0;
    }

    img, svg {
        max-width: 100%;
        height: auto;
    }

    /* Grid 2 kolom umum (biar tetap "mirip desktop", bukan
       ditumpuk 1 kolom polos semua) dipakai di beberapa section
       di bawah lewat class masing-masing, bukan generic .grid,
       karena tiap section punya konten berbeda. */

    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .section-title h2 {
        font-size: 1.5rem;
        margin-top: 6px;
    }

    .section-title p {
        font-size: 0.9rem;
    }

    /* ---------------------------------------------------
       2. NAVBAR
       (dropdown menu mobile sudah ditangani rule lama di
       style.css @media 900px/600px — tidak disentuh di sini
       supaya tidak dobel logic. Hanya rapikan ukuran logo.)

       FIX "header hilang saat discroll di mobile": .navbar
       aslinya position:sticky (works fine di desktop), tapi
       `overflow-x:hidden` di html/body (poin 1 di atas) bikin
       position:sticky gagal nempel di banyak browser mobile
       (terutama Safari/iOS) — ini bug/keterbatasan bawaan CSS,
       bukan salah kode sticky-nya. Solusinya: khusus mobile,
       .navbar dipaksa position:fixed (kebal dari masalah
       overflow-hidden ancestor), lalu body diberi padding-top
       sebesar tinggi navbar supaya konten di bawahnya tidak
       ketutupan. Berlaku otomatis di SEMUA halaman karena
       navbar ini shared layout, bukan cuma halaman depan.
       --------------------------------------------------- */

    .navbar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }

    body {
        padding-top: 65px;
    }

    /* FIX: celah kosong di atas header "SAT LANTAS ADMIN" pada
       Dashboard Admin. `body{padding-top:65px}` di atas dibuat
       khusus untuk halaman FRONT-END, mengkompensasi .navbar yang
       dipaksa position:fixed (lihat komentar section 2 di atas).
       Header admin (.admin-top) TIDAK position:fixed — dia normal/
       static — jadi padding-top itu jadi ruang kosong tak terpakai
       di atasnya. Dibatalkan khusus untuk body halaman admin
       (body punya class .admin-body, lihat style.css). */
    body.admin-body {
        padding-top: 0;
    }

    .nav-wrapper {
        height: 64px;
    }

    .logo-image {
        width: 40px;
        height: 40px;
    }

    .logo-text .logo-title {
        font-size: 12px;
    }

    .logo-text .logo-subtitle {
        font-size: 7px;
    }

    /* ---------------------------------------------------
       3. HERO SECTION FRONT-END (Beranda)
       Urutan: 1) Judul  2) Foto Pejabat  3) Deskripsi
               4) Tombol  5) Badge Prinsip

       Semua properti hero-inner/hero-image/hero-text/
       hero-buttons ditulis LENGKAP di sini (bukan cuma
       tambahan) supaya menang total dari sistem grid lama
       di style.css (.hero-inner grid-template-columns dkk),
       menghindari tampilan hybrid/setengah-setengah.
       --------------------------------------------------- */

    .hero {
        overflow-x: hidden;
    }

    /* Watermark logo polisi (logopolisi.png) — di desktop nempel
       sudut kanan-atas (top:15px; right:25px; width:280px), tapi
       di mobile .hero-inner jadi kolom panjang & sempit sehingga
       watermark kepotong di tepi kanan. Diposisikan tengah dan
       diperkecil supaya tidak overflow. */
    .hero-watermark {
        top: auto;
        bottom: 90px;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        width: 60%;
        max-width: 220px;
    }

    .hero-inner {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        min-height: auto;
        padding: 14px 4% 14px;
        gap: 8px;
        text-align: center;
        align-items: center;
        overflow-x: hidden;
    }

    /* .hero-text jadi "transparan" secara layout — anak-anaknya
       ikut jadi flex item langsung di .hero-inner, sejajar dengan
       .hero-image-wrap, supaya foto bisa diselipkan DI ANTARA
       judul dan deskripsi lewat CSS order saja. Jarak antar semua
       elemen (judul/foto/deskripsi/tombol/badge) diatur SATU
       TEMPAT lewat `gap` di .hero-inner di atas (8px, sesuai
       permintaan "margin-bottom 6-10px"), bukan margin manual
       berulang di tiap elemen — supaya konsisten & gampang
       disetel ulang kalau perlu. */
    .hero-text {
        display: contents;
        padding: 0;
        text-align: center;
        align-items: center;
    }

    .hero-title-group {
        order: 1;
        width: 100%;
        margin: 0;
    }

    /* Badge kuning: dipusatkan khusus tampilan mobile */
    .hero-label {
        position: relative;
        top: 5px; /* semakin besar = semakin turun */
        display: block;
        width: fit-content;
        max-width: max-content;
        margin: 0 auto;
        padding: 7px 22px;
        text-align: center;
        white-space: nowrap;
    }

    /* Judul utama: digeser secara visual tanpa mendorong
       foto, stiker, tombol, atau elemen di bawahnya */
    .hero-title {
        position: relative;
        top: 20px;
        margin: 0;
        font-size: 1.55rem;
        line-height: 1.15;
        text-align: center;
    }

    /* === SAKRAL — JANGAN DIUBAH: Frame foto Kapolres & Kasat
       Lantas. Urutan (order:2) dan ukuran (width/aspect-ratio)
       wajib persis seperti ini — cuma margin-nya yang di-reset ke
       0 di sini karena jarak spasinya sekarang diambil alih oleh
       `gap` di .hero-inner (8px), supaya tidak dobel spasi. === */
    .hero-image-wrap {
        order: 2;
        width: 100%;
        max-width: 100%;
        margin: 0;
    }

    .hero-image {
        width: 100%;
        aspect-ratio: 4 / 3;
        height: auto;
        min-height: unset;
    }

    .hero-image img {
        height: 100%;
        object-fit: cover;
    }
    /* === AKHIR BAGIAN SAKRAL FRAME FOTO === */

    .hero-text p {
        order: 3;
        margin: 0 auto;
        text-align: center;
        font-size: 0.82rem;
        line-height: 1.35;
    }

    .hero-buttons {
        order: 4;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        width: 100%;
        margin: 0;
    }

    .hero-buttons a {
        width: auto;
        flex: 0 1 auto;
        height: 40px;
        padding: 0 18px;
        font-size: 0.85rem;
    }

    /* Sengaja diubah dari flex-wrap jadi GRID 2 kolom supaya
       susunan badge dipaksa persis 2 baris x 2 kolom (bukan lagi
       ikut wrap otomatis berdasarkan sisa lebar layar):
       baris 1 = Profesional, Amanah — baris 2 = Melayani, Tertib
       (urutan mengikuti urutan asli di home.blade.php, tidak perlu
       diubah di HTML). Stiker .hero-polisi tetap position:absolute
       jadi otomatis tidak ikut ke dalam grid ini. */
   .hero-pills {
        order: 5;
        position: relative;
        display: grid;

        /* 2 kolom mengikuti lebar isi badge */
        grid-template-columns: repeat(2, max-content);

        justify-content: center;
        justify-items: center;
        align-items: center;

        /* jarak antar badge */
        gap: 6px 10px;

        margin: 0;
        width: 100%;
    }

    /* === SAKRAL — JANGAN DIUBAH: Stiker kartun POLISI PRESISI.
       Koordinat, margin, dan posisi wajib persis seperti ini
       supaya tetap pas di sebelah badge "Tertib" dan tidak
       menggeser layout badge.
       CATATAN PERBAIKAN: opacity & transform SENGAJA TIDAK
       di-set statis di sini (beda dari versi sebelumnya) —
       biarkan dikontrol oleh state awal .hero-polisi (tersembunyi)
       dan animasi .hero-polisi.animate (muncul) dari style.css,
       supaya animasi entrance-nya benar-benar jalan seperti di
       desktop. Kalau di-paksa opacity:1/transform:none di sini,
       stiker akan full-visible SEJAK AWAL sebelum class .animate
       sempat ditambahkan JS, sehingga animasinya tidak terlihat
       sama sekali (cuma seperti kedipan cepat). === */
    .hero-pills .hero-polisi {
        position: absolute;
        width: 48px;
        max-width: 48px;
        right: -6px;
        bottom: -10px;
        pointer-events: none;
    }
    /* === AKHIR BAGIAN SAKRAL STIKER (posisi) === */

    /* Perlambat & haluskan animasi masuk stiker khusus mobile
       (desktop tetap pakai 1s dari style.css, tidak diubah).
       Kurva easing dibuat merata sepanjang durasi supaya terasa
       seperti slide mulus, bukan "meledak" di awal lalu diam. */
    /* Transisi KELUAR yang mulus (khusus mobile) — animasi
       .hero-polisi.animate di bawah cuma menangani MASUK; tanpa
       ini, saat class .animate dilepas (scroll ke bawah, hero-title
       keluar viewport), stiker langsung lenyap tiba-tiba tanpa
       transisi. `transition` di sini kalah prioritas dari
       `animation` saat .animate aktif (jadi tidak mengganggu efek
       masuk), tapi otomatis mengambil alih begitu .animate lepas,
       memberi efek slide-keluar yang mulus juga. */
    .hero-polisi {
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .hero-polisi.animate {
        animation: polisiMasuk 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        will-change: transform, opacity;
    }

    .chat-float {
        position: fixed;
        max-width: 48px;
        width: 48px;
        height: 48px;
        right: 15px;
        bottom: 15px;
        z-index: 999;
    }

    .chat-float img {
        width: 48px;
        height: 48px;
    }

    /* ---------------------------------------------------
       4. SECTION "VALUES" (Profesional/Amanah/Melayani/Tertib
       card di bawah hero — bukan hero-pills, ini section
       terpisah) & SECTION "LAYANAN" (4 card servis)
       Dibuat 2 kolom (bukan 1) supaya masih terasa "mirip
       desktop", tetap proporsional di layar 375-768px.
       --------------------------------------------------- */

    .values {
        padding: 50px 0 55px;
    }

   /* PRINSIP KAMI - 4 kartu dalam 1 baris khusus mobile
      (dirapikan: ukuran ikon, judul, dan teks disusutkan
      supaya pas 4 kartu sejajar tanpa ada tulisan kepotong) */
.value-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    width: 100%;
}

.value-card {
    padding: 14px 4px 12px;
    min-width: 0;
    min-height: unset;
    text-align: center;
    border-radius: 12px;
}

.value-icon {
    width: 42px;
    height: 42px;
    font-size: 17px;
    border-width: 2px;
    margin: 0 auto 8px;
    box-shadow: 0 0 0 3px rgba(10, 35, 69, 0.06),
        0 4px 10px rgba(10, 35, 69, 0.15);
}

.value-card h3 {
    font-size: 12.5px;
    line-height: 1.15;
    margin: 0 0 6px;
    word-break: break-word;
}

.value-card p {
    font-size: 10px;
    line-height: 1.35;
    max-width: 100%;
    padding: 0 1px;
}

    .services {
        padding: 50px 0 55px;
    }

    /* Layanan (KAMSEL/TURJAWALI/REGIDENT/GAKKUM) - dibuat 4 kolom
       sejajar juga (sama seperti Prinsip Kami), ukuran nomor/ikon/
       judul/teks/link disusutkan supaya pas & tidak ada yang
       kepotong di layar sempit. */
    .service-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        width: 100%;
    }

    .service-card {
        display: flex;
        flex-direction: column;
        padding: 12px 6px 10px;
        border-radius: 12px;
    }

    .service-number {
        right: 8px;
        top: 8px;
        font-size: 15px;
    }

    .service-icon {
        width: 38px;
        height: 38px;
        margin-bottom: 10px;
        border-radius: 10px;
    }

    .service-icon svg {
        width: 18px;
        height: 18px;
        stroke-width: 1.6;
    }

    .service-card h3 {
        font-size: 12px;
        margin-bottom: 6px;
        letter-spacing: 0;
        word-break: break-word;
    }

    .service-card p {
        font-size: 9.5px;
        line-height: 1.3;
        margin-bottom: 10px;
        min-height: unset;
    }

    .service-card a {
        font-size: 10px;
        gap: 3px;
        flex-wrap: wrap;
        /* Ini kuncinya: dorong tombol "Lihat Detail" ke paling
           bawah kartu, jadi sejajar di semua kartu walau panjang
           deskripsinya beda-beda (kartu sudah otomatis setinggi
           kartu tertinggi di barisnya lewat grid). */
        margin-top: auto;
    }

    /* ---------------------------------------------------
       4b. SECTION BERITA (.news-grid) — sebelumnya kepaksa
       jadi 1 kolom (memanjang ke bawah satu-satu) karena
       ketiban rule ".news-grid{grid-template-columns:1fr}"
       di style.css pada @media(max-width:600px). Di sini
       dipaksa balik jadi 2 kolom sejajar, dengan ukuran
       gambar/teks disusutkan supaya tetap rapi di kartu yang
       jadi lebih sempit.
       --------------------------------------------------- */

    .news-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }

    .news-card {
        border-radius: 12px;
    }

    .news-image {
        height: 90px;
    }

    .news-content {
        padding: 10px;
    }

    .news-content small {
        font-size: 10px;
    }

    .news-content h3 {
        font-size: 12.5px;
        line-height: 1.25;
        margin: 6px 0;
    }

    .news-content p {
        font-size: 10px;
        line-height: 1.3;
        margin-bottom: 8px;
    }

    .news-content a {
        font-size: 10px;
    }

    /* ---------------------------------------------------
       5. SECTION ASISTEN AI
       --------------------------------------------------- */

    .ai-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
        padding: 0;
    }

    /* ---------------------------------------------------
       6. SECTION "PUNYA KRITIK ATAU SARAN?" (complaint-section
       wrapper + complaint-banner card merah di dalamnya)

       Diminta TETAP memanjang ke samping di mobile (ikon-teks-
       tombol sejajar sebaris seperti desktop), bukan ditumpuk
       vertikal seperti sebelumnya (style.css @media 700px punya
       flex-direction:column — di sini ditimpa balik jadi row).
       Semua ukuran disusutkan banyak supaya tetap muat sebaris
       di layar sempit.
       --------------------------------------------------- */

    .complaint-section {
        padding: 40px 0 55px;
    }

    .complaint-banner {
        min-height: auto;
        padding: 14px 12px;
        display: flex;
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 10px;
    }

    .complaint-icon {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
    }

    .complaint-icon svg {
        width: 20px;
        height: 20px;
    }

    .complaint-content {
        min-width: 0;
    }

    .complaint-label {
        font-size: 9px;
        margin-bottom: 4px;
        letter-spacing: .5px;
    }

    .complaint-content h2 {
        font-size: 13px;
        margin: 0 0 3px;
        line-height: 1.2;
    }

    .complaint-content p {
        font-size: 9.5px;
        line-height: 1.3;
        max-width: 100%;
    }

    .complaint-button {
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
        padding: 8px 10px;
        font-size: 9.5px;
        gap: 4px;
        white-space: nowrap;
        border-radius: 8px;
    }

    .complaint-button-icon svg {
        width: 13px;
        height: 13px;
    }

    .complaint-arrow {
        font-size: 13px;
        margin-left: 2px;
    }

    /* ---------------------------------------------------
       7. FOOTER
       Dibuat 2 kolom (bukan ditumpuk 1 kolom penuh) supaya
       tetap terasa seperti footer desktop yang dipadatkan,
       bukan daftar vertikal panjang. Dirapikan lebih lanjut:
       ukuran teks & jarak disusutkan supaya terasa lebih
       ringkas/rapi di layar sempit.
       --------------------------------------------------- */

    footer {
        padding-top: 38px;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 16px;
        padding-bottom: 26px;
    }

    .footer-grid h3,
    .footer-grid h4 {
        font-size: 0.85rem;
        margin-bottom: 9px;
        letter-spacing: .2px;
    }

    .footer-grid p {
        font-size: 0.78rem;
        line-height: 1.5;
        margin-bottom: 5px;
    }

    .footer-link {
        font-size: 0.78rem;
        line-height: 1.5;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center;
        font-size: 0.72rem;
        padding: 14px 0;
    }

    .credit-link {
        width: 26px;
        height: 26px;
    }

    /* ---------------------------------------------------
       8. HALAMAN PROFIL (banner, poster+deskripsi, visimisi,
       pimpinan) — tetap dijaga urutan foto-di-atas-teks-di-
       bawah karena lebar layar tidak cukup untuk side-by-side
       tanpa memaksa teks jadi sangat sempit.
       --------------------------------------------------- */

    .profile-row,
    .profile-row-reverse {
        display: flex;
        flex-direction: column;
    }

    .profile-row-reverse .profile-image-card,
    .profile-row-reverse .profile-text-card {
        order: unset;
    }

    .profile-image-card img {
        width: 100%;
        height: auto;
    }

    .profile-text-card {
        padding: 28px 22px;
    }

    .profile-text-card h2 {
        font-size: 1.25rem;
    }

    .profile-wide-card img {
        width: 100%;
        height: auto;
    }

    /* ---------------------------------------------------
       9. HALAMAN DETAIL LAYANAN (Kamsel/Turjawali/Gakkum,
       via svc-hero) — foto di atas, panel teks di bawah.
       --------------------------------------------------- */

    /* Banner atas kosong (cuma background-image, dipakai bareng
       Kamsel/Turjawali/Gakkum/Regident) — di desktop height:365px
       tetap (base .page-hero tidak disentuh supaya halaman lain
       yang punya teks di dalamnya, mis. Pengaduan, tidak ikut
       kepotong). Selector di sini SENGAJA spesifik ke 4 varian
       unit ini saja. */
    .page-hero-kamsel,
    .page-hero-turjawali,
    .page-hero-gakkum,
    .page-hero-regident {
        height: 180px;
    }

    .svc-hero {
        padding: 20px 0 0;
    }

    .svc-hero-card {
        display: flex;
        flex-direction: column;
        border-radius: 18px;
    }

    /* Poster kedua (foto di svc-hero-card) — sebelumnya 260px,
       ditambah banner 365px di atasnya jadi dead space besar.
       Dikecilkan lagi supaya total 2 foto bertumpuk tidak makan
       lebih dari ~1 layar penuh. */
    .svc-hero-poster {
        height: 200px;
    }

    .svc-hero-panel {
        padding: 22px 20px;
    }

    .svc-hero-panel h2 {
        font-size: 1.2rem;
    }

    .svc-hero-points {
        gap: 8px;
    }

    .svc-hero-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /* Galeri "Kegiatan" (svc-activity-card) — style.css lama
       (breakpoint 600px) sudah set flex-basis:85% duluan, bikin
       1 kartu raksasa nyaris penuh layar. Ditulis LENGKAP di sini
       supaya menang total: 2 kartu kelihatan penuh + sedikit
       intip kartu ke-3 di tepi kanan (lihat komentar di
       .svc-activity-card di bawah), sebagai penanda visual kalau
       track ini bisa digeser — bukan cuma 1 kartu raksasa. */
    .svc-activities-track {
        gap: 12px;
    }

    .svc-activity-card {
        /* Sebelumnya persis (100%-12px)/2 => tepat 2 kartu penuh,
           tidak ada petunjuk visual kalau masih ada kartu ke-3.
           Basis diperkecil sedikit (bukan diperkecil ukuran
           kartunya secara drastis) supaya kartu ke-3 sedikit
           "mengintip" di tepi kanan sebagai penanda kalau
           track ini bisa digeser. */
        flex: 0 0 42%;
    }

    .svc-activity-photo {
        height: 110px;
    }

    /* ---------------------------------------------------
       10. HALAMAN SIM / STNK / BPKB (sim-detail-card)
       Diminta TETAP sejajar seperti desktop (foto kiri 45% +
       teks kanan 55%, grid dua kolom), BUKAN ditumpuk vertikal
       lagi. Semua ukuran (padding/font/margin) diskalakan turun
       bersamaan supaya proporsinya tetap konsisten walau jadi
       kecil — "tidak masalah kalau ukurannya kelihatan kecil"
       sesuai permintaan. Catatan: border-radius foto tidak perlu
       disentuh di sini karena sudah ada rule !important terpisah
       di style.css yang memaksanya 0 (kotak) di semua ukuran layar. */

    .sim-detail-card {
        display: grid;
        grid-template-columns: 45% 55%;
        min-height: unset;
        border-width: 4px;
        border-radius: 14px;
    }

    .sim-detail-image {
        padding: 6px;
    }

    .sim-detail-image img {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: none;
    }

    .sim-detail-content {
        padding: 8px 8px 12px;
    }

    .sim-detail-title {
        padding: 8px 6px;
        margin-bottom: 8px;
        border-radius: 0 0 8px 8px;
    }

    .sim-detail-title h1 {
        font-size: 11px;
        line-height: 1.25;
    }

    .sim-detail-description {
        padding: 0 4px;
    }

    .sim-detail-description h2 {
        font-size: 10.5px;
        line-height: 1.3;
        margin-bottom: 6px;
    }

    .sim-detail-description p {
        font-size: 7.5px;
        line-height: 1.4;
        text-align: left;
        margin-bottom: 6px;
    }

    .sim-publication-gallery {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .sim-documentation-item,
    .sim-documentation-item img {
        height: 200px;
    }

    /* ---------------------------------------------------
       11. HALAMAN "AJUKAN LAYANAN" & PAGE-HERO VARIAN LAIN
       (kamsel/turjawali/gakkum/regident/pengaduan)
       --------------------------------------------------- */

    .page-hero .container {
        padding: 35px 0;
    }

    .page-hero h1 {
        font-size: 1.7rem;
    }

    .form-card {
        padding: 22px;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-grid .full {
        grid-column: auto;
    }

    /* ---------------------------------------------------
       12. GENERIC CONTENT GRID (dipakai beberapa halaman
       informasi/kontak: 2 kolom desktop → 1 kolom mobile,
       karena kontennya blok teks panjang, bukan card kecil)
       --------------------------------------------------- */

    .content-grid,
    .contact-grid,
    .info-list,
    .about-grid {
        grid-template-columns: 1fr;
    }

    /* ---------------------------------------------------
       13. DASHBOARD ADMIN
       --------------------------------------------------- */

    .admin-top-inner {
        height: auto;
        flex-wrap: wrap;
        gap: 8px 12px;
        padding: 12px 0;
    }

    .admin-brand {
        font-size: 0.95rem;
    }

    .admin-link {
        margin-right: 10px;
        font-size: 0.85rem;
    }

    .admin-logout {
        font-size: 0.85rem;
    }

    .admin-shell {
        grid-template-columns: 1fr;
        /* FIX: di style.css desktop, .admin-shell punya
           min-height:calc(100vh - 70px) untuk bikin sidebar penuh
           setinggi layar (perlu karena sidebar & konten sejajar
           jadi 2 kolom). Begitu di mobile jadi 1 kolom (ditumpuk:
           baris menu di atas, konten di bawah), min-height itu
           JADI MASALAH: kalau konten halaman pendek (mis. Dashboard
           yang cuma ada 3 card + tabel kosong), grid meregangkan
           sisa ruang kosong itu ke baris-barisnya secara merata,
           munculnya jadi BLOK NAVY KOSONG di bawah baris menu
           (.admin-side ikut kena regang, bukan cuma sisa di bawah
           konten). Dibatalkan total di mobile — biar tinggi grid
           mengikuti tinggi konten asli, tidak diregangkan paksa. */
        min-height: unset;
        align-content: start;
    }

    .admin-side {
        flex-direction: row;
        overflow-x: auto;
        padding: 12px 10px;
        gap: 10px;
        white-space: nowrap;
    }

    .admin-side svg,
    .admin-side img {
        width: 20px;
        height: 20px;
    }

    /* Penanda visual tombol menu yang sedang aktif (class "active"
       ditambahkan dari layout.blade.php sesuai halaman yang dibuka).
       Dipakai juga sebagai target scrollIntoView oleh script di
       layout.blade.php supaya menu otomatis geser ke tombol ini
       saat halaman baru dimuat. */
    .admin-side a.active {
        background: #1e293b;
        color: #ffffff;
        font-weight: 700;
    }

    .admin-main {
        padding: 16px;
    }

    .admin-card {
        padding: 16px;
        margin-top: 14px;
    }

    /* Stats tetap 2 kolom (bukan 1) supaya masih terasa seperti
       ringkasan dashboard desktop, bukan daftar angka vertikal. */
    .stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .stats > div {
        padding: 16px;
    }

    .stats b {
        font-size: 1.3rem;
    }

    .form-grid .full {
        grid-column: auto;
    }

    .admin-main .btn-primary,
    .admin-main .btn-secondary {
        width: 100%;
        justify-content: center;
        margin-top: 8px;
    }

    .admin-main table .btn-primary,
    .admin-main table .btn-secondary {
        width: auto;
        margin-top: 0;
    }

    /* Hub "Update Konten" (7 tombol section) tetap 2 kolom */
    .content-section-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .content-section-btn {
        padding: 14px;
    }

    .content-preview img {
        max-height: 200px;
    }

    /* ---------------------------------------------------
       14. HALAMAN REGIDENT — 3 CARD SUB-LAYANAN (SIM/STNK/BPKB)
       [FINAL — jangan diubah lagi tanpa diminta]
       Diminta TETAP 3 kolom sejajar persis meniru desktop
       (bukan ditumpuk 1 kolom seperti bawaan style.css di
       @media 900px). Struktur aslinya di style.css memakai
       diagonal ::before (clip-path) + icon absolute + body/
       link dengan padding-left untuk "menghindari" diagonal
       itu — bukan sekadar padding biasa. Supaya bentuk
       diagonalnya tetap kelihatan mirip desktop walau card
       jadi sempit, SEMUA ukuran terkait (lebar diagonal,
       posisi & ukuran icon, padding-left body/link) diskalakan
       turun bersamaan (~30% dari desktop), bukan cuma font
       yang disusutkan sendirian. Konsekuensinya kartu jadi
       sangat kecil & teks deskripsi bisa wrap banyak baris —
       ini disengaja sesuai permintaan, tinggi kartu dibiarkan
       otomatis (min-height dilepas) supaya teks tidak kepotong. */

    .regident-service-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .regident-service-card {
        min-height: unset;
        border-radius: 10px;
    }

    /* Diagonal warna (biru/merah) — lebar diskalakan dari 130px */
    .regident-service-card::before {
        width: 40px;
    }

    .regident-service-card:hover::before {
        width: 44px;
    }

    /* Watermark logo transparan — diskalakan dari 140px */
    .regident-card-watermark {
        width: 55px;
        height: 55px;
        right: -8px;
    }

    /* Motif "flag" checkered di pojok kiri-bawah — dari 110x26px */
    .regident-card-flag {
        width: 42px;
        height: 10px;
        background-size: 5px 5px;
        background-position: 0 0, 0 2.5px, 2.5px -2.5px, -2.5px 0;
    }

    /* Motif segitiga pojok kanan-bawah — dari 54px */
    .regident-card-corner {
        width: 20px;
        height: 20px;
    }

    /* Icon di dalam diagonal — posisi & ukuran ikut diskalakan
       dari left:33px/top:28px/62x62px/font 28px */
    .regident-service-icon {
        left: 9px;
        top: 8px;
        width: 22px;
        height: 22px;
        font-size: 10px;
    }

    /* Body & link teks — padding-left diskalakan dari 150px
       supaya pas berhenti setelah diagonal+icon, TIDAK dibuat
       0/kecil sembarangan (itu penyebab teks "kabur" ke atas
       diagonal di percobaan sebelumnya) */
    .regident-service-body {
        padding: 10px 8px 4px 40px;
    }

    .regident-service-content h3 {
        margin: 0 0 3px;
        font-size: 10px;
        letter-spacing: 0;
        word-break: break-word;
    }

    .regident-service-content p {
        margin: 0;
        font-size: 7px;
        line-height: 1.3;
    }

    .regident-service-link {
        padding: 6px 8px 8px 40px;
        font-size: 7px;
    }

    .regident-service-link span {
        margin-left: 4px;
        font-size: 9px;
    }

    /* Galeri foto kegiatan Regident (regident-gallery) — TETAP
       memanjang 3 kolom sejajar ke samping (menang dari
       grid-template-columns:1fr bawaan style.css @media 700px).
       BEDA dari percobaan sebelumnya: gambar TIDAK di-crop pakai
       aspect-ratio+object-fit:cover (itu yang bikin foto keliatan
       "sliver"/terpotong). Di sini height dilepas ke auto & TANPA
       object-fit, jadi rasio asli foto dipertahankan dan seluruh
       isi foto kelihatan utuh — konsekuensinya tinggi foto jadi
       kecil/pendek di kolom sempit, itu sudah sesuai permintaan. */
    .regident-gallery {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        padding: 5px 5px 20px;
    }

    .regident-gallery-item {
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(10, 35, 75, .14);
    }

    .regident-gallery-item img {
        height: auto;
        max-height: none;
        object-fit: contain;
        border-radius: 10px;
    }

    /* ---------------------------------------------------
       15. BOX "DESKRIPSI UNIT REGIDENT" + MASKOT POLISI
       Sebelumnya maskot polisi memakai position:absolute
       menumpuk di atas teks (warisan layout desktop yang
       makai padding-bottom 170px sebagai "ruang kosong" buat
       ditumpangi gambar). Di layar sempit ini terasa kaku &
       jarak ke teks tidak konsisten. Di sini diubah jadi alur
       normal (bukan absolute) — maskot ditaruh RAPI DI TENGAH
       di bawah teks, dengan jarak yang jelas, jadi terasa lebih
       rapi tanpa mengganggu animasi reveal (opacity/transform
       reveal-nya tetap jalan, cuma sekarang posisi awal &
       akhirnya relatif terhadap alur normal, bukan absolute). */
    .regident-info-wrapper {
        margin-top: 22px;
    }

    .regident-description {
        display: flex;
        flex-direction: column;
        padding: 30px 24px 26px;
    }

    .regident-description-text {
        padding-bottom: 0;
    }

    .regident-description-label {
        font-size: 11px;
        letter-spacing: 2px;
    }

    .regident-description h2 {
        font-size: 1.4rem;
        margin-bottom: 12px;
    }

    .regident-description p {
        font-size: 0.85rem;
        line-height: 1.6;
        margin: 10px 0;
    }

    .regident-police {
        position: static;
        width: 150px;
        margin: 18px auto 0;
    }

    /* ---------------------------------------------------
       EFEK SENTUH (:active) UNTUK MOBILE — meniru :hover
       desktop, aktif langsung saat disentuh jari.
       --------------------------------------------------- */

    /* Hilangkan highlight biru/abu-abu bawaan browser saat
       kartu disentuh, supaya efek custom di bawah ini yang
       kelihatan, bukan highlight default OS/browser. */
    .service-card,
    .value-card {
        -webkit-tap-highlight-color: transparent;
    }

    /* Kartu LAYANAN (KAMSEL/TURJAWALI/REGIDENT/GAKKUM) —
       meniru persis efek :hover versi desktopnya.
       .touch-active ditambah/dicopot oleh JS (elemenFromPoint)
       supaya efeknya "ikut" saat jari digeser antar kartu tanpa
       diangkat — :active saja tidak bisa berpindah kartu. */
    .service-card:active,
    .service-card.touch-active {
        transform: translateY(-4px) scale(1.02);
        box-shadow: 0 8px 20px rgba(10, 35, 69, .18);
        border-color: transparent;
        transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    }

    .service-card:active::before,
    .service-card.touch-active::before {
        transform: scaleX(1);
    }

    .service-card:active .service-icon,
    .service-card.touch-active .service-icon {
        transform: rotate(-6deg) scale(1.08);
        background: #b91c1c;
    }

    .service-card:active .service-number,
    .service-card.touch-active .service-number {
        color: #e2e8f0;
        transform: translateY(-3px);
    }

    /* Kartu PRINSIP KAMI (Profesional/Amanah/Melayani/Tertib) —
       belum ada efek :hover khusus di desktop, jadi dikasih efek
       tekan generik seperti contoh yang diminta. Sama seperti di
       atas, .touch-active dikontrol JS untuk efek "ikut jari". */
    .value-card:active,
    .value-card.touch-active {
        transform: translateY(-4px) scale(1.02);
        box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
        transition: transform .15s ease, box-shadow .15s ease;
    }
}