/* Explain: Styles for UI components, layout elements, animations, and specific page sections. */
.eyebrow {
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.hero-cinematic {
    position: relative;
    z-index: 10;
    isolation: isolate;
}

.brand-badge {
    border-radius: 54% 46% 62% 38% / 52% 58% 42% 48%;
}

.bubble-orb {
    position: absolute;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cream-color) 80%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 38%, transparent);
    box-shadow: inset 0 0 2rem color-mix(in srgb, var(--primary-color) 16%, transparent);
    animation: bubbleDrift 7s ease-in-out infinite;
}

.bubble-orb:nth-child(2n) {
    animation-delay: -2s;
}

.bubble-orb:nth-child(3n) {
    animation-delay: -4s;
}

.bubble-icon {
    transform-origin: center;
    animation: iconWiggle 3.2s ease-in-out infinite;
}

.ivory-panel {
    position: relative;
    border: 1px solid color-mix(in srgb, var(--primary-color) 20%, transparent);
    border-radius: 2rem;
    background: color-mix(in srgb, var(--surface-color) 92%, transparent);
    box-shadow: var(--shadow-soft);
}

.service-card,
.benefit-card,
.timeline-card,
.news-card,
.gallery-card,
.info-card,
.faq-card {
    border: 1px solid var(--border-color);
    border-radius: 1.75rem;
    background: color-mix(in srgb, var(--surface-color) 92%, transparent);
    box-shadow: var(--shadow-card);
    transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

.service-card:hover,
.benefit-card:hover,
.news-card:hover,
.info-card:hover {
    transform: translateY(-0.35rem);
    border-color: color-mix(in srgb, var(--primary-color) 55%, transparent);
    box-shadow: var(--shadow-soft);
}

/* Kartu pengumuman kembali memakai gaya kartu standar agar seragam dengan
   kartu informasi lain di halaman desa. */
.pengumuman-item {
    background: color-mix(in srgb, var(--surface-color) 92%, transparent);
}

.pengumuman-item:hover {
    border-color: color-mix(in srgb, var(--primary-color) 55%, transparent);
}

/* Kotak filter pengumuman dan agenda memakai latar hijau lembut agar mudah
   dikenali sebagai area pengurutan daftar, bukan bagian dari kartu berita. */
.pengumuman-filter,
.filter-panel {
    background: color-mix(in srgb, var(--whatsapp-color) 12%, var(--surface-color));
    border-color: color-mix(in srgb, var(--whatsapp-color) 32%, transparent);
}

.service-dot {
    display: inline-flex;
    height: 3.25rem;
    width: 3.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--secondary-color) 62%, var(--cream-color));
    color: var(--charcoal-color);
}

.credibility-item {
    display: flex;
    min-height: 4rem;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    border-radius: 999px;
    color: var(--charcoal-color);
    font-size: 0.92rem;
    font-weight: 900;
}

.badge-cat {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
    padding: 0.3rem 0.85rem;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary-hover);
}

/* Sorotan kata kunci pada hasil pencarian situs desa.
   Kata yang cocok dengan kata kunci warga diberi latar keemasan lembut agar
   bagian yang paling relevan langsung terlihat pada judul dan ringkasan. */
.search-mark {
    border-radius: 0.3rem;
    background: color-mix(in srgb, var(--secondary-color) 52%, transparent);
    padding: 0 0.15rem;
    font-weight: 900;
    color: var(--charcoal-color);
}

/* Penanda fokus tombol dibuat lebih tegas supaya tombol solid seperti
   "Lihat Dokumen" tetap terlihat jelas saat dinavigasi dengan keyboard. */
.btn:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 3px;
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--secondary-color) 40%, transparent);
}

.form-status {
    display: none;
    border-radius: 1rem;
    padding: 0.85rem 1.1rem;
    font-size: 0.9rem;
    line-height: 1.6;
}

.form-status.success {
    display: block;
    border: 1px solid color-mix(in srgb, var(--primary-color) 50%, transparent);
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
    color: var(--charcoal-color);
}

.form-status.error {
    display: block;
    border: 1px solid color-mix(in srgb, var(--accent-color) 48%, transparent);
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    color: var(--charcoal-color);
}

.admin-tab {
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--surface-color);
    color: var(--charcoal-color);
    font-weight: 800;
}

.admin-tab:hover {
    border-color: color-mix(in srgb, var(--primary-color) 55%, transparent);
}

.admin-tab.is-active {
    border-color: transparent;
    background: var(--primary-color);
    color: var(--cream-color);
}

.admin-tab.is-active:hover {
    background: var(--primary-hover);
}

/* Sidebar panel petugas: tombol menu berbentuk baris penuh di dalam bilah samping. */
.admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 70;
    display: flex;
    flex-direction: column;
    width: min(17rem, 85vw);
    overflow: hidden;
    border-right: 1px solid var(--border-color);
    background: var(--surface-color);
    transform: translateX(-100%);
    transition: transform 300ms ease, width 300ms ease;
}

.admin-sidebar.is-open {
    transform: translateX(0);
}

.admin-sidebar-head {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    height: 4.5rem;
    padding: 0 1rem;
    background: color-mix(in srgb, var(--primary-hover) 90%, var(--charcoal-color));
    color: var(--cream-color);
}

.admin-sidebar-brand {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.6rem;
}

.admin-sidebar-logo {
    height: 2.5rem;
    width: auto;
    flex-shrink: 0;
    object-fit: contain;
}

.admin-sidebar-brand-text {
    display: flex;
    flex-direction: column;
    font-family: var(--font-heading);
    line-height: 1.1;
    color: var(--cream-color);
}

.admin-sidebar-brand-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--cream-color);
}

.admin-sidebar-brand-sub {
    margin-top: 0.2rem;
    font-size: 0.72rem;
    font-weight: 300;
    letter-spacing: 0.03em;
    color: color-mix(in srgb, var(--cream-color) 72%, transparent);
}

.admin-sidebar-collapse-btn {
    display: inline-flex;
    height: 2.25rem;
    width: 2.25rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--cream-color) 30%, transparent);
    border-radius: 0.7rem;
    background: color-mix(in srgb, var(--cream-color) 14%, transparent);
    color: var(--cream-color);
    transition: background 300ms ease;
}

.admin-sidebar-collapse-btn:hover {
    background: color-mix(in srgb, var(--cream-color) 28%, transparent);
}

.admin-sidebar-tagline {
    flex-shrink: 0;
    margin: 0;
    border-bottom: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--primary-color) 6%, transparent);
    padding: 0.55rem 1rem;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.admin-sidebar-nav {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.4rem;
    overflow-y: auto;
    padding: 0.75rem;
}

.admin-sidebar-footer-link {
    position: relative;
    display: flex;
    min-height: 2.75rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0 0.75rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.7rem;
    background: var(--surface-color);
    padding: 0 0.75rem;
    font-size: 0.82rem;
    font-weight: 900;
    color: var(--charcoal-color);
    transition: background 300ms ease;
}

.admin-sidebar-footer-link:hover {
    background: var(--secondary-color);
}

.admin-side-icon {
    display: none;
    width: 1.25rem;
    flex-shrink: 0;
    text-align: center;
    font-size: 0.95rem;
}

.admin-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 65;
    background: color-mix(in srgb, var(--charcoal-color) 45%, transparent);
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms ease, visibility 300ms ease;
}

.admin-sidebar-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

.admin-side-group-btn {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 42px;
    align-items: center;
    justify-content: flex-start;
    gap: 0.55rem;
    border: 0;
    border-radius: 0.6rem;
    background: transparent;
    padding: 0 0.9rem;
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: left;
    transition: color 300ms ease, background 300ms ease;
}

.admin-side-label {
    flex: 1 1 auto;
    min-width: 0;
}

.admin-side-group-btn:hover {
    color: var(--primary-hover);
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
}

.admin-side-group-btn.is-open {
    color: var(--primary-hover);
}

/* Grup menu yang sedang aktif diberi latar warna tema lembut agar petugas
   langsung tahu sedang berada di kelompok menu mana. */
.admin-side-group-btn.is-active {
    background: color-mix(in srgb, var(--primary-color) 16%, transparent);
    color: var(--primary-hover);
}

.admin-side-group-btn.is-active:hover {
    background: color-mix(in srgb, var(--primary-color) 24%, transparent);
}

.admin-side-chevron {
    flex-shrink: 0;
    font-size: 0.6rem;
    transition: transform 300ms ease;
}

.admin-side-group-btn.is-open .admin-side-chevron {
    transform: rotate(180deg);
}

.admin-side-items {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.35rem;
}

.admin-side-items.is-collapsed {
    display: none;
}

.admin-tab.admin-side-link {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    gap: 0.7rem;
    border: 1px solid transparent;
    border-radius: 0.9rem;
    background: transparent;
    padding: 0 0.9rem;
    font-size: 0.86rem;
    font-weight: 800;
    color: var(--charcoal-color);
    text-align: left;
}

.admin-tab.admin-side-link:hover {
    border-color: transparent;
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
}

.admin-tab.admin-side-link.is-active {
    border-color: transparent;
    background: var(--primary-color);
    color: var(--cream-color);
}

.admin-tab.admin-side-link.is-active:hover {
    background: var(--primary-hover);
}

/* Menu Kelola Admin hanya boleh tampil untuk Admin Utama. Aturan .hidden
   dibuat lebih spesifik supaya tidak ditimpa oleh display:flex pada tautan
   bilah samping, sehingga menu benar-benar tersembunyi dari petugas biasa. */
.admin-tab.admin-side-link.hidden,
.admin-side-link.hidden {
    display: none !important;
}

.admin-side-link .admin-tab-badge {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    margin-left: 0;
    z-index: 2;
    box-shadow: 0 0 0 2px var(--surface-color);
}

#adminNotifBtn {
    position: relative;
}

#adminNotifBtn .admin-tab-badge {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    margin-left: 0;
    z-index: 2;
    box-shadow: 0 0 0 2px var(--surface-color);
}

.admin-main {
    min-width: 0;
}

@media (min-width: 1024px) {
    .admin-sidebar {
        width: 18rem;
        transform: none;
    }

    .admin-sidebar-backdrop {
        display: none;
    }

    .admin-main {
        padding-left: 18rem;
        transition: padding-left 300ms ease;
    }

    #adminDashboard.is-sidebar-collapsed .admin-main {
        padding-left: 4.75rem;
    }

    .admin-sidebar.is-collapsed {
        width: 4.75rem;
        overflow: visible;
    }

    .admin-sidebar.is-collapsed .admin-sidebar-head {
        flex-direction: column;
        gap: 0.6rem;
        padding: 0.85rem 0.5rem;
    }

    .admin-sidebar.is-collapsed .admin-sidebar-brand-text {
        display: none;
    }

    .admin-sidebar.is-collapsed .admin-sidebar-nav {
        overflow: visible;
        padding: 0.75rem 0.5rem;
    }

    .admin-sidebar.is-collapsed .admin-side-label,
    .admin-sidebar.is-collapsed .admin-side-chevron,
    .admin-sidebar.is-collapsed .admin-side-items,
    .admin-sidebar.is-collapsed .admin-sidebar-tagline {
        display: none;
    }

    .admin-sidebar.is-collapsed .admin-side-icon {
        display: inline-flex;
    }

    .admin-sidebar.is-collapsed .admin-side-group-btn {
        justify-content: center;
        padding: 0 0.35rem;
    }

    .admin-sidebar.is-collapsed .admin-sidebar-footer-link {
        justify-content: center;
        padding: 0 0.35rem;
    }

    .admin-sidebar.is-collapsed .admin-sidebar-footer-text {
        display: none;
    }

    .admin-sidebar.is-collapsed .admin-side-group-btn::after,
    .admin-sidebar.is-collapsed .admin-sidebar-footer-link::after {
        content: attr(data-tip);
        position: absolute;
        left: calc(100% + 0.6rem);
        top: 50%;
        z-index: 95;
        transform: translateY(-50%) translateX(-0.3rem);
        border-radius: 0.6rem;
        background: var(--charcoal-color);
        padding: 0.4rem 0.75rem;
        font-size: 0.74rem;
        font-weight: 800;
        letter-spacing: normal;
        text-transform: none;
        white-space: nowrap;
        color: var(--cream-color);
        box-shadow: var(--shadow-card);
        opacity: 0;
        pointer-events: none;
        transition: opacity 200ms ease, transform 200ms ease;
    }

    .admin-sidebar.is-collapsed .admin-side-group-btn:hover::after,
    .admin-sidebar.is-collapsed .admin-side-group-btn:focus-visible::after,
    .admin-sidebar.is-collapsed .admin-sidebar-footer-link:hover::after,
    .admin-sidebar.is-collapsed .admin-sidebar-footer-link:focus-visible::after {
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }
}

.status-tab {
    min-height: 2.75rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--surface-color);
    padding: 0 1.4rem;
    font-weight: 900;
    color: var(--charcoal-color);
    transition: background 300ms ease, border-color 300ms ease, color 300ms ease;
}

.status-tab:hover {
    border-color: color-mix(in srgb, var(--primary-color) 55%, transparent);
}

.status-tab.is-active {
    border-color: transparent;
    background: var(--primary-color);
    color: var(--cream-color);
}

.status-tab.is-active:hover {
    background: var(--primary-hover);
}

.mobile-menu {
    display: none;
    border-top: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--cream-color) 98%, transparent);
}

.mobile-menu.is-open {
    display: block;
}

.mobile-menu-group {
    display: block;
    margin: 0.55rem 0 0.1rem;
    padding: 0 1rem;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.mobile-menu-link {
    display: flex;
    min-height: 48px;
    align-items: center;
    gap: 0.7rem;
    border-radius: 0.9rem;
    padding: 0 1rem;
    font-family: var(--font-heading);
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--charcoal-color);
    transition: background 300ms ease, color 300ms ease;
}

.mobile-menu-link:hover {
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
    color: var(--primary-hover);
}

.mobile-menu-cta {
    justify-content: center;
    margin-top: 0.5rem;
    background: var(--accent-color);
    color: var(--cream-color);
}

.mobile-menu-cta:hover {
    background: var(--primary-hover);
    color: var(--cream-color);
}

.mobile-menu-admin {
    margin-top: 0.5rem;
    background: var(--primary-color);
    color: var(--cream-color);
    font-weight: 900;
}

.mobile-menu-admin:hover {
    background: var(--primary-hover);
    color: var(--cream-color);
}

/* Menu seluler berkelompok: setiap kategori berupa tombol yang membuka
   dan menutup daftar tautannya, ditandai garis penghubung dan ikon panah
   yang berputar saat terbuka. */
.mobile-menu-acc {
    display: block;
    width: 100%;
}

.mobile-menu-group-btn {
    display: flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    gap: 0.7rem;
    border: 0;
    border-radius: 0.9rem;
    background: transparent;
    padding: 0 1rem;
    font-family: var(--font-heading);
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--charcoal-color);
    text-align: left;
    transition: background 300ms ease, color 300ms ease;
}

.mobile-menu-group-btn:hover {
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    color: var(--primary-hover);
}

.mobile-menu-group-btn[aria-expanded="true"] {
    color: var(--primary-hover);
}

.mobile-menu-group-icon {
    width: 1.15rem;
    flex-shrink: 0;
    text-align: center;
    color: var(--secondary-color);
}

.mobile-menu-chevron {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.7rem;
    transition: transform 300ms ease;
}

.mobile-menu-group-btn[aria-expanded="true"] .mobile-menu-chevron {
    transform: rotate(180deg);
}

.mobile-menu-items {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0.2rem 0 0.35rem 1.55rem;
    padding-left: 0.55rem;
    border-left: 2px solid color-mix(in srgb, var(--primary-color) 22%, transparent);
}

.mobile-menu-items.is-collapsed {
    display: none;
}

.mobile-menu-sub {
    min-height: 44px;
    padding-left: 0.9rem;
    font-size: 0.92rem;
    font-weight: 700;
}

/* Sub-kategori "Jenis Layanan" di dalam menu seluler "Layanan".
   Ditampilkan seperti tautan biasa, bukan judul kategori, agar warga
   mengenalinya sebagai pilihan yang dapat dibuka. */
.mobile-menu-sub-btn {
    min-height: 44px;
    padding-left: 0.9rem;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: normal;
    text-transform: none;
    color: var(--charcoal-color);
}

.footer-link {
    display: flex;
    min-height: 44px;
    align-items: center;
    font-size: 0.9rem;
    color: var(--cream-color);
    transition: color 300ms ease;
}

.footer-link:hover {
    color: var(--secondary-color);
}

/* Penanda menu navigasi yang sedang aktif: diberi latar warna tema lembut
   dan dirapikan dalam bentuk pil agar halaman aktif mudah dikenali warga. */
.nav-item-active {
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
    padding: 0.4rem 0.85rem;
    color: var(--primary-hover) !important;
}

.nav-item-active:hover {
    background: color-mix(in srgb, var(--primary-color) 22%, transparent);
}

.mobile-nav-active {
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
    color: var(--primary-hover) !important;
}

.nav-underline {
    position: relative;
}

.nav-underline::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.4rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-color), var(--secondary-color));
    opacity: 0;
    transform: scaleX(0.35);
    transform-origin: center;
    transition: transform 300ms ease, opacity 300ms ease;
}

.nav-underline:hover::after,
.nav-underline:focus-visible::after {
    opacity: 1;
    transform: scaleX(1);
}

.nav-underline:focus-visible {
    outline: none;
    color: var(--primary-color);
}

.faq-card summary,
.svc-syarat summary {
    display: flex;
    cursor: pointer;
    list-style: none;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.faq-card summary::-webkit-details-marker,
.svc-syarat summary::-webkit-details-marker {
    display: none;
}

.svc-syarat summary {
    font-weight: 800;
    color: var(--primary-hover);
}

.faq-chevron,
.svc-chevron {
    transition: transform 300ms ease;
}

.faq-card[open] .faq-chevron,
.svc-syarat[open] .svc-chevron {
    transform: rotate(180deg);
}

.article-content {
    line-height: 1.9;
}

.article-content p {
    margin-bottom: 1rem;
}

.article-content ul {
    margin: 0 0 1rem 1.25rem;
    list-style: disc;
}

.article-content li {
    margin-bottom: 0.4rem;
}

.article-content h2 {
    margin: 1.6rem 0 0.75rem;
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--charcoal-color);
}

.article-content a {
    color: var(--primary-hover);
    text-decoration: underline;
}

@media (max-width: 640px) {
    .hero-cinematic h1 {
        text-wrap: balance;
    }
}

@keyframes bubbleDrift {
    0%, 100% {
        translate: 0 0;
        scale: 1;
    }
    50% {
        translate: 0.6rem -0.8rem;
        scale: 1.05;
    }
}

@keyframes iconWiggle {
    0%, 100% {
        rotate: 0deg;
        scale: 1;
    }
    40% {
        rotate: -7deg;
        scale: 1.06;
    }
    75% {
        rotate: 6deg;
        scale: 1.03;
    }
}

.admin-table th,
.admin-table td {
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--border-color);
    vertical-align: top;
}

.admin-table .admin-col-no {
    width: 3.25rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--text-muted);
}

.admin-table thead th {
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

.admin-table tbody tr:hover {
    background: color-mix(in srgb, var(--primary-color) 6%, transparent);
}

.admin-table tbody tr.admin-row-new {
    background: color-mix(in srgb, var(--accent-color) 8%, transparent);
}

.admin-table tbody tr.admin-row-new:hover {
    background: color-mix(in srgb, var(--accent-color) 15%, transparent);
}

.admin-new-badge {
    display: inline-flex;
    align-items: center;
    margin-right: 0.4rem;
    border-radius: 999px;
    background: var(--accent-color);
    padding: 0.12rem 0.5rem;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    color: var(--cream-color);
    vertical-align: middle;
}

.print-only {
    display: none;
}

@media print {
    html,
    body {
        height: auto !important;
        overflow: visible !important;
        background: #ffffff !important;
    }

    body * {
        visibility: hidden;
    }

    .print-area,
    .print-area * {
        visibility: visible;
    }

    .print-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }

    .print-area .overflow-x-auto {
        overflow: visible !important;
        border: 0 !important;
    }

    .print-area table {
        min-width: 0 !important;
        width: 100% !important;
    }

    .print-area th,
    .print-area td {
        border: 1px solid #999999;
        padding: 4px 6px;
        font-size: 10px;
    }

    .print-only {
        display: block !important;
    }

    .no-print {
        display: none !important;
    }
}

/* Tombol melayang untuk menyalakan bacaan suara otomatis saat kursor berada
   di atas elemen halaman publik. Mati secara bawaan dan menyala setelah ditekan. */
.tts-toggle {
    position: fixed;
    left: 1.1rem;
    right: auto;
    bottom: 1.35rem;
    z-index: 94;
    display: inline-flex;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--surface-color);
    padding: 0 0.95rem;
    font-size: 0.82rem;
    font-weight: 900;
    color: var(--charcoal-color);
    box-shadow: var(--shadow-soft);
    transition: background 300ms ease, color 300ms ease, border-color 300ms ease;
}

.tts-toggle:hover {
    border-color: color-mix(in srgb, var(--primary-color) 55%, transparent);
}

.tts-toggle.is-on {
    border-color: transparent;
    background: var(--primary-color);
    color: var(--cream-color);
}

.tts-toggle-label {
    display: none;
}

@media (min-width: 480px) {
    .tts-toggle-label {
        display: inline;
    }
}

.scroll-top {
    position: fixed;
    left: 1.1rem;
    right: auto;
    bottom: 5.6rem;
    z-index: 94;
    display: inline-flex;
    height: 3rem;
    width: 3rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: var(--primary-color);
    color: var(--cream-color);
    font-size: 1.05rem;
    box-shadow: var(--shadow-soft);
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.75rem);
    transition: opacity 300ms ease, transform 300ms ease, background 300ms ease, visibility 300ms ease;
}

.scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top:hover {
    background: var(--primary-hover);
}

/* Efek Animasi Gulir.
   Setiap bagian halaman memakai salah satu dari dua efek yang bergantian:
   zoom in (membesar lembut) dan gulir naik (muncul dari bawah), sehingga
   urutan kemunculan konten terasa lebih hidup dan tidak monoton. */
.reveal-on-scroll {
    opacity: 0;
    transition: opacity 700ms ease, transform 700ms ease;
}

/* Efek 1: zoom in, konten membesar lembut dari ukuran sedikit lebih kecil. */
.reveal-on-scroll.reveal-zoom {
    transform: scale(0.86);
}

.reveal-on-scroll.reveal-zoom.is-revealed {
    opacity: 1;
    transform: scale(1);
}

/* Efek 2: gulir naik, konten muncul naik dari bawah ke posisi aslinya. */
.reveal-on-scroll.reveal-slide-up {
    transform: translateY(2.75rem);
}

.reveal-on-scroll.reveal-slide-up.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

@media (max-width: 480px) {
    .tts-toggle {
        left: 0.9rem;
        bottom: 1.15rem;
    }

    .scroll-top {
        left: 0.9rem;
        right: auto;
        bottom: 5.4rem;
    }
}

/* Badge reCAPTCHA digeser penuh ke tepi kiri bawah halaman.
   Posisi ini menjaga badge tetap rapi menempel di sisi kiri sekaligus
   tidak menutupi tautan penting di footer maupun tombol kembali ke atas. */
.grecaptcha-badge {
    left: 0 !important;
    right: auto !important;
}

/* Navigasi halaman tabel panel petugas: tombol berpindah halaman data. */
.admin-pager-host {
    margin-top: 1.25rem;
}

.admin-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.admin-pager-pages {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.admin-pager-btn {
    display: inline-flex;
    min-height: 2.5rem;
    min-width: 2.5rem;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--surface-color);
    padding: 0 0.9rem;
    font-size: 0.82rem;
    font-weight: 900;
    color: var(--charcoal-color);
    transition: background 300ms ease, border-color 300ms ease, color 300ms ease;
}

.admin-pager-btn:hover {
    border-color: color-mix(in srgb, var(--primary-color) 55%, transparent);
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.admin-pager-btn.is-active {
    border-color: transparent;
    background: var(--primary-color);
    color: var(--cream-color);
}

.admin-pager-btn.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* Keterangan kebijakan data pribadi pada formulir pengajuan.
   Ditampilkan sebagai panel lipat yang rapi agar tidak mengganggu warga
   saat mengisi data, namun tetap mudah dibuka saat ingin dibaca. */
.policy-note {
    border: 1px solid var(--border-color);
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--primary-color) 5%, var(--surface-color));
    overflow: hidden;
}

.policy-note summary {
    display: flex;
    cursor: pointer;
    list-style: none;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 900;
    color: var(--charcoal-color);
}

.policy-note summary::-webkit-details-marker {
    display: none;
}

.policy-note summary:hover {
    background: color-mix(in srgb, var(--primary-color) 9%, transparent);
}

.policy-note-head {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.policy-chevron {
    flex-shrink: 0;
    color: var(--primary-hover);
    transition: transform 300ms ease;
}

.policy-note[open] .policy-chevron {
    transform: rotate(180deg);
}

.policy-body {
    border-top: 1px solid var(--border-color);
    padding: 0.9rem 1.1rem 1.15rem;
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--text-muted);
}

.policy-body p {
    margin: 0 0 0.65rem;
}

.policy-body ul {
    margin: 0 0 0.65rem 1.15rem;
    list-style: disc;
}

.policy-body li {
    margin-bottom: 0.35rem;
}

.policy-body p:last-child {
    margin-bottom: 0;
}

/* Pesan validasi berkas lampiran Surat Pengantar RT/RW pada formulir pengajuan.
   Menampilkan tiga keadaan: petunjuk biasa, berkas valid (hijau lembut),
   dan berkas tidak valid (merah lembut), agar warga langsung tahu hasil
   pemeriksaan berkas yang dipilihnya. */
.lampiran-validasi {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--primary-color) 5%, var(--surface-color));
    padding: 0.7rem 0.95rem;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--text-muted);
    transition: background 300ms ease, border-color 300ms ease, color 300ms ease;
}

.lampiran-validasi.is-valid {
    border-color: color-mix(in srgb, var(--whatsapp-color) 42%, transparent);
    background: color-mix(in srgb, var(--whatsapp-color) 10%, var(--surface-color));
    color: var(--whatsapp-hover);
}

.lampiran-validasi.is-invalid {
    border-color: color-mix(in srgb, var(--accent-color) 42%, transparent);
    background: color-mix(in srgb, var(--accent-color) 10%, var(--surface-color));
    color: var(--accent-color);
}

.lampiran-validasi-icon {
    flex-shrink: 0;
    margin-top: 0.12rem;
    color: var(--primary-color);
}

.lampiran-validasi.is-valid .lampiran-validasi-icon {
    color: var(--whatsapp-color);
}

.lampiran-validasi.is-invalid .lampiran-validasi-icon {
    color: var(--accent-color);
}

/* Sel foto pada tabel panel petugas: menampilkan tombol pratinjau yang
   membuka foto dalam menu turun yang rapi, beserta tombol unduh agar petugas
   dapat menyimpan foto ke perangkatnya. */
.admin-thumb-dropdown {
    display: inline-block;
}

.admin-thumb-trigger {
    display: inline-flex;
    min-height: 2.25rem;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--surface-color);
    padding: 0 0.85rem;
    font-size: 0.72rem;
    font-weight: 900;
    color: var(--primary-hover);
    cursor: pointer;
    list-style: none;
    transition: background 300ms ease, border-color 300ms ease, color 300ms ease;
}

.admin-thumb-trigger::-webkit-details-marker {
    display: none;
}

.admin-thumb-trigger:hover {
    border-color: color-mix(in srgb, var(--primary-color) 55%, transparent);
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.admin-thumb-chevron {
    font-size: 0.6rem;
    transition: transform 300ms ease;
}

.admin-thumb-dropdown[open] .admin-thumb-trigger {
    border-color: transparent;
    background: var(--primary-color);
    color: var(--cream-color);
}

.admin-thumb-dropdown[open] .admin-thumb-chevron {
    transform: rotate(180deg);
}

.admin-thumb-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
    width: 12rem;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    background: var(--surface-color);
    padding: 0.6rem;
    box-shadow: var(--shadow-card);
}

.admin-thumb-image {
    height: 7rem;
    width: 100%;
    border-radius: 0.7rem;
    border: 1px solid var(--border-color);
    background: var(--cream-color);
    object-fit: contain;
}

.admin-thumb-fallback {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-align: center;
}

.admin-thumb-download {
    display: inline-flex;
    min-height: 2.25rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 0;
    border-radius: 999px;
    background: var(--primary-color);
    padding: 0 0.9rem;
    font-size: 0.74rem;
    font-weight: 900;
    color: var(--cream-color);
    transition: background 300ms ease;
}

.admin-thumb-download:hover {
    background: var(--primary-hover);
}

/* Sel foto pada tabel panel petugas: menampilkan bulatan foto petugas secara
   langsung di tabel, disertai menu pratinjau dan tombol unduh foto. */
.admin-thumb-cell {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.admin-thumb-inline-slot {
    display: inline-flex;
    flex-shrink: 0;
}

.admin-thumb-inline {
    height: 2.75rem;
    width: 2.75rem;
    flex-shrink: 0;
    border-radius: 999px;
    border: 2px solid var(--border-color);
    background: var(--cream-color);
    object-fit: cover;
}

/* Kotak hasil pencarian status pendaftaran produk UMKM pada halaman partisipasi.
   Hasil muncul dengan animasi turun, berlatar hijau lembut saat produk
   ditemukan, dan berlatar merah lembut saat nomor tidak ditemukan. */
.umkm-cek-hasil {
    border-radius: 1.25rem;
    padding: 1.1rem 1.25rem;
}

.umkm-cek-hasil.is-found {
    border: 1px solid color-mix(in srgb, var(--whatsapp-color) 38%, transparent);
    background: color-mix(in srgb, var(--whatsapp-color) 14%, var(--surface-color));
    animation: umkmCekTurun 420ms ease both;
}

.umkm-cek-hasil.is-empty {
    border: 1px solid color-mix(in srgb, var(--accent-color) 38%, transparent);
    background: color-mix(in srgb, var(--accent-color) 12%, var(--surface-color));
    animation: umkmCekTurun 420ms ease both;
}

@keyframes umkmCekTurun {
    from {
        opacity: 0;
        transform: translateY(-0.85rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .umkm-cek-hasil.is-found,
    .umkm-cek-hasil.is-empty {
        animation: none;
    }
}

/* Kotak hasil cek cepat status permohonan surat dan pengaduan warga pada kartu
   pengajuan online serta formulir pengaduan. Hasil muncul dengan animasi turun,
   berlatar hijau lembut saat data ditemukan, dan merah lembut saat tidak
   ditemukan. Kartu kembali ke tampilan awal begitu kolom nomor dikosongkan. */
.cek-hasil {
    border-radius: 1.25rem;
    padding: 1.1rem 1.25rem;
}

.cek-hasil.is-found {
    border: 1px solid color-mix(in srgb, var(--whatsapp-color) 38%, transparent);
    background: color-mix(in srgb, var(--whatsapp-color) 14%, var(--surface-color));
    animation: cekHasilTurun 420ms ease both;
}

.cek-hasil.is-empty {
    border: 1px solid color-mix(in srgb, var(--accent-color) 38%, transparent);
    background: color-mix(in srgb, var(--accent-color) 12%, var(--surface-color));
    animation: cekHasilTurun 420ms ease both;
}

@keyframes cekHasilTurun {
    from {
        opacity: 0;
        transform: translateY(-0.85rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cek-hasil.is-found,
    .cek-hasil.is-empty {
        animation: none;
    }
}

/* Sub-navigasi "Jenis Layanan" pada menu utama halaman publik.
   Tersembunyi secara bawaan dan hanya terbuka ketika tombol Jenis Layanan
   diklik. Pada layar besar sub-navigasi tampil di samping kanan menu,
   sedangkan pada layar kecil tampil memanjang ke bawah. */
.nav-layanan-panel {
    overflow: visible !important;
}

.nav-sub-wrap {
    position: relative;
    display: block !important;
    width: 100%;
    flex: 0 0 100%;
}

.nav-sub-trigger {
    display: flex;
    width: 100%;
    min-height: 2.75rem;
    align-items: center;
    gap: 0.6rem;
    border: 0;
    border-radius: 0.7rem;
    background: transparent;
    padding: 0 0.85rem;
    color: var(--charcoal-color);
    font: inherit;
    font-weight: 900;
    text-align: left;
    cursor: pointer;
    transition: background 300ms ease, color 300ms ease;
}

.nav-sub-trigger:hover,
.nav-sub-trigger:focus-visible {
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-hover);
}

.nav-sub-trigger[aria-expanded="true"] {
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
    color: var(--primary-hover);
}

.nav-sub-trigger[aria-expanded="true"] {
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
    color: var(--primary-hover);
}

.nav-sub-chevron {
    transition: transform 300ms ease;
}

.nav-sub-trigger[aria-expanded="true"] .nav-sub-chevron {
    transform: rotate(90deg);
}

.nav-sub-panel {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0.2rem;
    width: 100%;
    min-width: 0;
    margin-top: 0.35rem;
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    background: var(--surface-color);
    padding: 0.4rem;
}

.nav-sub-panel.is-collapsed {
    display: none !important;
}

.nav-sub-link {
    display: flex;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    min-height: 2.5rem;
    align-items: center;
    gap: 0.55rem;
    border-radius: 0.7rem;
    padding: 0 0.75rem;
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--charcoal-color);
    transition: background 300ms ease, color 300ms ease;
}

.nav-sub-link:hover,
.nav-sub-link:focus-visible {
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    color: var(--primary-hover);
}

@media (min-width: 768px) {
    /* Di layar besar sub-navigasi "Jenis Layanan" tampil mengarah ke sisi
       kanan tombol pemicunya, dengan susunan antar pilihan tetap ke bawah,
       bukan berjajar melebar ke samping. */
    .nav-sub-panel {
        position: absolute;
        left: calc(100% + 0.4rem);
        top: 0;
        z-index: 2;
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        margin-top: 0;
        width: 15rem;
        box-shadow: var(--shadow-card);
    }

    .nav-sub-link {
        min-height: 2.35rem;
    }
}