/* =========================================================
   MOBILE UI FINAL FORCE - DESA BAJUH
   Khusus HP & Tablet
========================================================= */

@media (max-width: 768px) {
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        background: #f4fbf7 !important;
    }

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

    img {
        max-width: 100% !important;
    }

    /* ===============================
       NAVBAR MOBILE FINAL
    =============================== */

    .desa-navbar-final {
        width: 100% !important;
        padding: 0 !important;
        background: #ffffff !important;
        box-shadow: 0 10px 28px rgba(15, 23, 42, .06) !important;
        border-bottom: 1px solid rgba(226, 232, 240, .9) !important;
        overflow: hidden !important;
    }

    .desa-navbar-final-inner {
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px 14px 16px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 14px !important;
    }

    .desa-brand-final {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        text-decoration: none !important;
        padding: 0 !important;
    }

    .desa-brand-final-logo,
    .desa-brand-final img {
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        max-width: 58px !important;
        object-fit: contain !important;
    }

    .desa-brand-final-text {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        min-width: 0 !important;
    }

    .desa-brand-final-title {
        font-size: 20px !important;
        line-height: 1.1 !important;
        font-weight: 900 !important;
        color: #0f172a !important;
        letter-spacing: -.3px !important;
    }

    .desa-brand-final-subtitle {
        font-size: 13px !important;
        line-height: 1.2 !important;
        font-weight: 850 !important;
        color: #047857 !important;
    }

    .desa-menu-final {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 2px 2px 8px !important;
        margin: 0 !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .desa-menu-final::-webkit-scrollbar {
        display: none !important;
    }

    .desa-menu-final-link {
        flex: 0 0 auto !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 16px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
        white-space: nowrap !important;
        font-size: 14px !important;
        line-height: 1 !important;
        font-weight: 850 !important;
        color: #1e293b !important;
        text-decoration: none !important;
        background: transparent !important;
    }

    .desa-menu-final-link.active {
        background: #dcfce7 !important;
        color: #047857 !important;
    }

    .desa-actions-final {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 52px !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .desa-action-final-main {
        width: 100% !important;
        height: 50px !important;
        min-height: 50px !important;
        padding: 0 18px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 15px !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
        text-decoration: none !important;
    }

    .desa-action-final-admin {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
        padding: 0 !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .frontend-admin-login-icon,
    .frontend-admin-login-icon svg {
        width: 23px !important;
        height: 23px !important;
    }

    /* ===============================
       HERO MOBILE FINAL
    =============================== */

    .desa-public-main {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .desa-public-main > section:first-child {
        padding-top: 18px !important;
    }

    .hero,
    .hero-section,
    .hero-wrapper,
    .hero-card,
    .hero-slider,
    .hero-slide,
    .beranda-hero,
    .home-hero,
    .desa-hero,
    .welcome-hero {
        width: calc(100% - 24px) !important;
        max-width: calc(100% - 24px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        border-radius: 26px !important;
        overflow: hidden !important;
    }

    .hero-card,
    .hero-slide,
    .beranda-hero,
    .home-hero,
    .desa-hero,
    .welcome-hero {
        height: 430px !important;
        min-height: 430px !important;
        max-height: 430px !important;
        padding: 30px 22px 78px !important;
        display: flex !important;
        align-items: center !important;
        background-size: cover !important;
        background-position: center !important;
    }

    .hero h1,
    .hero-section h1,
    .hero-card h1,
    .hero-slide h1,
    .beranda-hero h1,
    .home-hero h1,
    .desa-hero h1,
    .welcome-hero h1 {
        font-size: 30px !important;
        line-height: 1.08 !important;
        letter-spacing: -.8px !important;
        max-width: 100% !important;
        margin: 12px 0 14px !important;
        text-wrap: balance !important;
    }

    .hero p,
    .hero-section p,
    .hero-card p,
    .hero-slide p,
    .beranda-hero p,
    .home-hero p,
    .desa-hero p,
    .welcome-hero p {
        font-size: 14.5px !important;
        line-height: 1.65 !important;
        max-height: 120px !important;
        overflow: hidden !important;
        margin: 0 !important;
    }

    .hero span,
    .hero-section span,
    .hero-card span,
    .hero-slide span,
    .beranda-hero span,
    .home-hero span {
        font-size: 11px !important;
        letter-spacing: .08em !important;
    }

    .hero button,
    .hero-card button,
    .hero-slide button,
    .beranda-hero button,
    .home-hero button {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 999px !important;
        opacity: .9 !important;
        z-index: 5 !important;
    }

    .hero button:first-of-type,
    .hero-card button:first-of-type,
    .hero-slide button:first-of-type,
    .beranda-hero button:first-of-type,
    .home-hero button:first-of-type {
        left: 22px !important;
        right: auto !important;
        top: auto !important;
        bottom: 22px !important;
        transform: none !important;
    }

    .hero button:last-of-type,
    .hero-card button:last-of-type,
    .hero-slide button:last-of-type,
    .beranda-hero button:last-of-type,
    .home-hero button:last-of-type {
        right: 22px !important;
        left: auto !important;
        top: auto !important;
        bottom: 22px !important;
        transform: none !important;
    }

    /* ===============================
       SECTION & CARD MOBILE
    =============================== */

    section {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    section h1,
    section h2,
    .section-title,
    .page-title {
        font-size: 25px !important;
        line-height: 1.18 !important;
        letter-spacing: -.5px !important;
    }

    section p,
    .section-desc,
    .page-desc {
        font-size: 14.5px !important;
        line-height: 1.7 !important;
    }

    .grid,
    .card-grid,
    .berita-grid,
    .galeri-grid,
    .perangkat-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .card,
    .berita-card,
    .galeri-card,
    .perangkat-card {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 22px !important;
        overflow: hidden !important;
    }

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

    .perangkat-photo,
    .perangkat-placeholder {
        width: 100% !important;
        height: 340px !important;
        border-radius: 18px !important;
        overflow: hidden !important;
    }

    .perangkat-photo img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center top !important;
    }

    form,
    .form-card,
    .pengaduan-card,
    .surat-card {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 24px !important;
    }

    input,
    select,
    textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 48px !important;
        font-size: 15px !important;
        border-radius: 14px !important;
    }

    textarea {
        min-height: 130px !important;
    }

    button,
    .btn {
        max-width: 100% !important;
        min-height: 46px !important;
        border-radius: 14px !important;
        font-size: 15px !important;
    }

    table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 430px) {
    .desa-brand-final-logo,
    .desa-brand-final img {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
    }

    .desa-brand-final-title {
        font-size: 19px !important;
    }

    .desa-brand-final-subtitle {
        font-size: 12.5px !important;
    }

    .desa-menu-final-link {
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 14px !important;
        font-size: 13.5px !important;
    }

    .desa-action-final-main {
        height: 48px !important;
        min-height: 48px !important;
        font-size: 14px !important;
    }

    .desa-action-final-admin {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
    }

    .hero-card,
    .hero-slide,
    .beranda-hero,
    .home-hero,
    .desa-hero,
    .welcome-hero {
        height: 400px !important;
        min-height: 400px !important;
        max-height: 400px !important;
        padding: 26px 20px 74px !important;
    }

    .hero h1,
    .hero-section h1,
    .hero-card h1,
    .hero-slide h1,
    .beranda-hero h1,
    .home-hero h1,
    .desa-hero h1,
    .welcome-hero h1 {
        font-size: 28px !important;
    }

    .hero p,
    .hero-section p,
    .hero-card p,
    .hero-slide p,
    .beranda-hero p,
    .home-hero p,
    .desa-hero p,
    .welcome-hero p {
        font-size: 14px !important;
        max-height: 105px !important;
    }
}