/* =====================================================
   DESA BAJUH - FINAL UI WARGA
   Berlaku untuk semua halaman pengguna/warga
===================================================== */

:root {
    --desa-green: #059669;
    --desa-green-dark: #064e3b;
    --desa-lime: #36d22f;
    --desa-soft: #f8fafc;
    --desa-soft-green: #ecfdf5;
    --desa-text: #0f172a;
    --desa-muted: #64748b;
    --desa-border: #e2e8f0;
    --desa-white: #ffffff;
    --desa-shadow: 0 18px 48px rgba(15, 23, 42, .08);
    --desa-container: 1120px;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #ffffff !important;
    color: var(--desa-text) !important;
    overflow-x: hidden !important;
}

/* =====================================================
   GLOBAL CONTAINER
===================================================== */

@media (min-width: 1024px) {
    .header-container,
    .nav-container,
    .navbar-container,
    .hero-container,
    .section,
    .section-container,
    .home-section,
    .news-header,
    .berita-header,
    .news-grid,
    .berita-grid,
    .news-list,
    .berita-list,
    .galeri-home-container,
    .galeri-container,
    .footer-container,
    .apb-container,
    .apb-wrap,
    .content-container,
    .page-container,
    .profile-container,
    .perangkat-container,
    .form-container {
        max-width: var(--desa-container) !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }
}

/* =====================================================
   NAVBAR WARGA
===================================================== */

.site-header,
header,
.navbar,
.main-header {
    background: rgba(255, 255, 255, .96) !important;
    backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(226, 232, 240, .9) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .045) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
}

.header-container,
.nav-container,
.navbar-container {
    min-height: 78px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
}

.brand,
.site-brand,
.logo-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 210px !important;
}

.brand-logo,
.brand-fallback,
.site-logo,
.logo-wrap img,
.brand img {
    width: 50px !important;
    height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    object-fit: contain !important;
}

.brand-title,
.site-title,
.logo-title {
    font-size: 20px !important;
    line-height: 1.05 !important;
    font-weight: 950 !important;
    letter-spacing: -.45px !important;
    margin: 0 !important;
    color: var(--desa-text) !important;
}

.brand-subtitle,
.site-subtitle,
.logo-subtitle {
    font-size: 12px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    margin-top: 3px !important;
    color: #047857 !important;
}

.desktop-nav,
.nav-menu,
.navbar-menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 18px !important;
    flex: 1 !important;
}

.desktop-nav a,
.nav-menu a,
.navbar-menu a {
    color: #334155 !important;
    text-decoration: none !important;
    font-size: 13.5px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    padding: 11px 4px !important;
    border-radius: 999px !important;
    transition: .25s ease !important;
}

.desktop-nav a:hover,
.nav-menu a:hover,
.navbar-menu a:hover {
    color: #047857 !important;
    background: #ecfdf5 !important;
}

.desktop-nav a.active,
.nav-menu a.active,
.navbar-menu a.active {
    padding: 12px 18px !important;
    color: #047857 !important;
    background: #dcfce7 !important;
}

.login-btn,
.admin-btn,
.btn-login,
a[href*="login"] {
    min-height: 46px !important;
    padding: 0 22px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13.5px !important;
    font-weight: 950 !important;
    text-decoration: none !important;
}

a[href*="pengajuan-surat"],
.btn-green,
.btn-primary {
    border-radius: 999px !important;
    font-weight: 950 !important;
}

/* =====================================================
   HERO BERANDA
===================================================== */

.hero,
.home-hero,
.hero-section {
    min-height: 430px !important;
    max-height: 520px !important;
    overflow: hidden !important;
}

.hero-container {
    padding-top: 46px !important;
    padding-bottom: 56px !important;
}

.hero-badge {
    font-size: 11.5px !important;
    padding: 8px 16px !important;
    margin-bottom: 14px !important;
}

.hero-title,
.home-hero-title {
    max-width: 760px !important;
    font-size: clamp(36px, 4vw, 56px) !important;
    line-height: 1.02 !important;
    letter-spacing: -1.6px !important;
    margin-bottom: 14px !important;
}

.hero-text,
.home-hero-text {
    max-width: 650px !important;
    font-size: 15px !important;
    line-height: 1.68 !important;
    margin-bottom: 18px !important;
}

.hero-actions {
    display: none !important;
}

.hero-arrow,
.slider-arrow,
.hero-nav button,
.slider-nav button {
    width: 46px !important;
    height: 46px !important;
    border-radius: 999px !important;
    opacity: .88 !important;
    box-shadow: 0 12px 35px rgba(15, 23, 42, .18) !important;
}

/* =====================================================
   SECTION GLOBAL
===================================================== */

section {
    box-sizing: border-box !important;
}

.section,
.section-white,
.home-section,
.profile-section,
.news-section,
.berita-section,
.berita-home-section,
.galeri-home-section,
.apb-home-section,
.penduduk-section,
.perangkat-section {
    padding-top: 42px !important;
    padding-bottom: 46px !important;
}

.section-title,
.title,
.news-title,
.berita-title,
.galeri-title h1 {
    color: var(--desa-text) !important;
    font-size: clamp(28px, 3vw, 42px) !important;
    line-height: 1.1 !important;
    letter-spacing: -1px !important;
    margin-bottom: 10px !important;
}

.section-text,
.text,
.section-desc {
    color: var(--desa-muted) !important;
    font-size: 14.5px !important;
    line-height: 1.65 !important;
}

/* =====================================================
   BERITA DESA BERANDA
===================================================== */

.news-section,
.berita-section,
.berita-home-section,
section:has(.news-card),
section:has(.berita-card) {
    background: #ffffff !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.news-header,
.berita-header {
    margin-bottom: 18px !important;
    text-align: left !important;
}

.news-header h2,
.berita-header h2,
.news-section h2,
.berita-section h2,
.berita-home-section h2 {
    color: var(--desa-lime) !important;
    font-size: 31px !important;
    line-height: 1 !important;
    margin: 0 0 8px !important;
    font-weight: 950 !important;
    letter-spacing: -1px !important;
    text-align: left !important;
}

.news-header p,
.berita-header p,
.news-section > p,
.berita-section > p,
.berita-home-section > p {
    color: #0f172a !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    text-align: left !important;
}

.news-grid,
.berita-grid,
.news-list,
.berita-list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    justify-content: start !important;
    align-items: start !important;
}

.news-card,
.berita-card {
    width: 100% !important;
    max-width: none !important;
    background: #ffffff !important;
    border: 1px solid var(--desa-border) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: var(--desa-shadow) !important;
    transition: transform .25s ease, box-shadow .25s ease !important;
}

.news-card:hover,
.berita-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .12) !important;
}

.news-card img,
.berita-card img,
.news-image,
.berita-image {
    width: 100% !important;
    height: 185px !important;
    object-fit: cover !important;
    display: block !important;
}

.news-card-body,
.berita-card-body,
.news-content,
.berita-content {
    padding: 16px !important;
    min-height: 160px !important;
}

.news-card h3,
.berita-card h3,
.news-content h3,
.berita-content h3 {
    color: var(--desa-text) !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    font-weight: 950 !important;
    margin: 0 0 8px !important;
}

.news-card p,
.berita-card p,
.news-content p,
.berita-content p {
    color: #475569 !important;
    font-size: 12.7px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}

.news-more,
.berita-more,
.lihat-berita-wrap {
    max-width: var(--desa-container) !important;
    margin: 16px auto 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    display: flex !important;
    justify-content: flex-end !important;
}

/* =====================================================
   GALERI DESA BERANDA - SAMA RATA DAN SAMA BESAR
===================================================== */

.galeri-home-section {
    background: #f6f8fa !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.galeri-home-container {
    text-align: left !important;
}

.galeri-home-head {
    margin: 0 0 18px !important;
    padding: 0 !important;
    text-align: left !important;
}

.galeri-home-head h2 {
    color: var(--desa-lime) !important;
    font-size: 31px !important;
    line-height: 1 !important;
    margin: 0 0 8px !important;
    font-weight: 950 !important;
    letter-spacing: -1px !important;
    text-transform: uppercase !important;
    text-align: left !important;
}

.galeri-home-head p {
    color: #0f172a !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    text-align: left !important;
}

.galeri-home-grid {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    justify-content: start !important;
    align-items: start !important;
    margin: 0 !important;
    padding: 0 !important;
}

.galeri-home-item {
    width: 100% !important;
    max-width: none !important;
    height: 185px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #e2e8f0 !important;
    box-shadow: var(--desa-shadow) !important;
    cursor: zoom-in !important;
    transition: transform .25s ease, box-shadow .25s ease !important;
}

.galeri-home-item:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .12) !important;
}

.galeri-home-item img {
    width: 100% !important;
    height: 185px !important;
    object-fit: cover !important;
    display: block !important;
}

.galeri-home-more {
    width: 100% !important;
    margin-top: 16px !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
}

.galeri-home-more a {
    color: #0f172a !important;
    text-decoration: none !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
}

/* =====================================================
   HALAMAN GALERI
===================================================== */

.galeri-page {
    background: #f8fafc !important;
    padding: 36px 0 56px !important;
    min-height: 64vh !important;
}

.galeri-title {
    margin-bottom: 18px !important;
    text-align: left !important;
}

.galeri-title h1 {
    color: var(--desa-lime) !important;
    font-size: 40px !important;
    line-height: 1 !important;
    margin: 0 0 8px !important;
    font-weight: 950 !important;
    letter-spacing: -1.4px !important;
    text-transform: uppercase !important;
}

.galeri-title p {
    color: #0f172a !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}

.galeri-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

.galeri-card {
    width: 100% !important;
    height: 175px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    border: 0 !important;
    box-shadow: var(--desa-shadow) !important;
}

.galeri-card img {
    width: 100% !important;
    height: 175px !important;
    object-fit: cover !important;
}

/* =====================================================
   PROFIL DESA
===================================================== */

.profile-grid,
.profil-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    align-items: start !important;
}

.profile-card,
.profil-card,
.info-panel,
.sambutan-card,
.welcome-card {
    background: #ffffff !important;
    border: 1px solid var(--desa-border) !important;
    border-radius: 22px !important;
    box-shadow: var(--desa-shadow) !important;
    padding: 22px !important;
}

.profile-card h2,
.profil-card h2,
.info-panel h3 {
    font-size: 24px !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
}

.profile-card p,
.profil-card p,
.info-panel p {
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: #475569 !important;
}

/* =====================================================
   PERANGKAT DESA
===================================================== */

.perangkat-grid,
.staff-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

.perangkat-card,
.staff-card {
    background: #ffffff !important;
    border: 1px solid var(--desa-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--desa-shadow) !important;
    padding: 18px !important;
    transition: .25s ease !important;
}

.perangkat-card:hover,
.staff-card:hover {
    transform: translateY(-4px) !important;
}

.perangkat-card img,
.staff-card img {
    width: 100% !important;
    height: 240px !important;
    object-fit: cover !important;
    border-radius: 14px !important;
}

.perangkat-card h3,
.staff-card h3 {
    font-size: 18px !important;
    line-height: 1.25 !important;
    margin: 14px 0 5px !important;
}

.perangkat-card p,
.staff-card p {
    font-size: 13.5px !important;
    color: #047857 !important;
    font-weight: 900 !important;
}

/* =====================================================
   APB DESA WARGA
===================================================== */

.apb-public,
.apb-page,
.apb-section {
    background: #f8fafc !important;
    padding: 36px 0 56px !important;
}

.summary-grid,
.apb-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

.summary-card,
.apb-summary-card {
    background: #ffffff !important;
    border: 1px solid var(--desa-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--desa-shadow) !important;
    padding: 18px !important;
}

.summary-card strong,
.apb-summary-card strong {
    font-size: 22px !important;
    line-height: 1.2 !important;
}

/* =====================================================
   FORM PENGADUAN DAN PENGAJUAN SURAT
===================================================== */

.form-card,
.layanan-card,
.pengaduan-card,
.surat-card,
.card {
    border-radius: 22px !important;
    border: 1px solid var(--desa-border) !important;
    box-shadow: var(--desa-shadow) !important;
}

input,
select,
textarea {
    border-radius: 14px !important;
    font-size: 14px !important;
}

button,
.btn {
    border-radius: 999px !important;
    font-weight: 950 !important;
}

/* =====================================================
   FOOTER
===================================================== */

.footer,
footer {
    background: linear-gradient(135deg, #064e3b, #047857) !important;
    color: #ffffff !important;
    margin-top: 0 !important;
}

.footer-container {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
}

.footer h3,
footer h3 {
    color: #ffffff !important;
    font-size: 19px !important;
    line-height: 1.25 !important;
}

.footer p,
.footer a,
footer p,
footer a {
    color: rgba(255, 255, 255, .88) !important;
    font-size: 13.5px !important;
    line-height: 1.65 !important;
}

/* =====================================================
   ANIMASI SCROLL
===================================================== */

.reveal-up,
section,
.news-card,
.berita-card,
.galeri-home-item,
.galeri-card,
.perangkat-card,
.profile-card,
.summary-card {
    transition: opacity .55s ease, transform .55s ease !important;
}

.js-reveal {
    opacity: 0 !important;
    transform: translateY(22px) !important;
}

.js-reveal.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (min-width: 1024px) and (max-width: 1366px) {
    :root {
        --desa-container: 1060px;
    }

    .header-container,
    .nav-container,
    .navbar-container {
        min-height: 70px !important;
    }

    .brand-logo,
    .brand-fallback,
    .site-logo,
    .logo-wrap img,
    .brand img {
        width: 44px !important;
        height: 44px !important;
    }

    .brand-title,
    .site-title,
    .logo-title {
        font-size: 18px !important;
    }

    .brand-subtitle,
    .site-subtitle,
    .logo-subtitle {
        font-size: 11px !important;
    }

    .desktop-nav,
    .nav-menu,
    .navbar-menu {
        gap: 14px !important;
    }

    .desktop-nav a,
    .nav-menu a,
    .navbar-menu a {
        font-size: 12.5px !important;
    }

    .login-btn,
    .admin-btn,
    .btn-login {
        min-height: 42px !important;
        padding: 0 18px !important;
        font-size: 12.5px !important;
    }

    .news-card img,
    .berita-card img,
    .news-image,
    .berita-image,
    .galeri-home-item,
    .galeri-home-item img {
        height: 170px !important;
    }

    .galeri-card,
    .galeri-card img {
        height: 155px !important;
    }

    .section,
    .section-white,
    .home-section,
    .profile-section,
    .news-section,
    .berita-section,
    .berita-home-section,
    .galeri-home-section,
    .apb-home-section,
    .penduduk-section,
    .perangkat-section {
        padding-top: 34px !important;
        padding-bottom: 42px !important;
    }
}

@media (max-width: 900px) {
    :root {
        --desa-container: 100%;
    }

    .header-container,
    .nav-container,
    .navbar-container,
    .hero-container,
    .section,
    .section-container,
    .home-section,
    .news-header,
    .berita-header,
    .news-grid,
    .berita-grid,
    .news-list,
    .berita-list,
    .galeri-home-container,
    .galeri-container,
    .footer-container,
    .apb-container,
    .page-container,
    .profile-container,
    .perangkat-container,
    .form-container {
        width: 100% !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
        box-sizing: border-box !important;
    }

    .desktop-nav,
    .nav-menu,
    .navbar-menu {
        display: none !important;
    }

    .brand-logo,
    .brand-fallback,
    .site-logo,
    .logo-wrap img,
    .brand img {
        width: 46px !important;
        height: 46px !important;
    }

    .brand-title,
    .site-title,
    .logo-title {
        font-size: 18px !important;
    }

    .hero,
    .home-hero,
    .hero-section {
        min-height: 430px !important;
        max-height: none !important;
    }

    .hero-title,
    .home-hero-title {
        font-size: 38px !important;
    }

    .news-grid,
    .berita-grid,
    .news-list,
    .berita-list,
    .galeri-home-grid,
    .galeri-grid,
    .perangkat-grid,
    .staff-grid,
    .profile-grid,
    .profil-grid,
    .summary-grid,
    .apb-summary-grid {
        grid-template-columns: 1fr !important;
    }

    .news-card img,
    .berita-card img,
    .news-image,
    .berita-image,
    .galeri-home-item,
    .galeri-home-item img,
    .galeri-card,
    .galeri-card img {
        height: 230px !important;
    }

    .section,
    .section-white,
    .home-section,
    .news-section,
    .berita-section,
    .berita-home-section,
    .galeri-home-section {
        padding-top: 34px !important;
        padding-bottom: 38px !important;
    }
}