@media (min-width: 769px) {
    .um-home-section,
    .um-mobile-header,
    .um-mobile-drawer,
    .um-mobile-overlay {
        display: none !important;
    }
}

@media (max-width: 768px) {
    body {
        overflow-x: hidden !important;
    }

    /* Rapikan hero atas */
    .um-home-section {
        padding: 12px 14px 16px !important;
        background: #eef8ef !important;
    }

    .um-home-card {
        position: relative !important;
        height: 170px !important;
        min-height: 170px !important;
        max-height: 170px !important;
        border-radius: 22px !important;
        overflow: hidden !important;
        background: #064e3b !important;
        box-shadow: 0 12px 32px rgba(15, 23, 42, .12) !important;
    }

    .um-home-track {
        display: flex !important;
        height: 100% !important;
        transition: transform .32s ease !important;
    }

    .um-home-slide {
        min-width: 100% !important;
        height: 100% !important;
    }

    .um-home-slide img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        display: block !important;
        filter: brightness(.55) contrast(1.04) !important;
    }

    .um-home-card::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        background: linear-gradient(
            90deg,
            rgba(3, 37, 30, .72),
            rgba(3, 37, 30, .42),
            rgba(3, 37, 30, .16)
        ) !important;
        z-index: 2 !important;
        pointer-events: none !important;
    }

    .um-home-content {
        position: absolute !important;
        left: 22px !important;
        right: 50px !important;
        bottom: 26px !important;
        z-index: 4 !important;
        color: #ffffff !important;
    }

    .um-home-title {
        margin: 0 0 8px !important;
        font-size: 20px !important;
        line-height: 1.12 !important;
        font-weight: 950 !important;
        color: #ffffff !important;
        text-shadow: 0 2px 8px rgba(0,0,0,.25) !important;
    }

    .um-home-desc {
        margin: 0 !important;
        max-width: 285px !important;
        font-size: 11.5px !important;
        line-height: 1.45 !important;
        font-weight: 750 !important;
        color: rgba(255,255,255,.96) !important;
        text-shadow: 0 2px 8px rgba(0,0,0,.25) !important;
    }

    /* Panah dibuat lebih halus */
    .um-home-btn {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 32px !important;
        height: 32px !important;
        border: none !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, .55) !important;
        color: rgba(4, 120, 87, .8) !important;
        font-size: 15px !important;
        font-weight: 950 !important;
        z-index: 7 !important;
        box-shadow: none !important;
        backdrop-filter: blur(6px) !important;
    }

    .um-home-btn.prev {
        left: 10px !important;
    }

    .um-home-btn.next {
        right: 10px !important;
    }

    .um-home-dots {
        position: absolute !important;
        left: 22px !important;
        bottom: 11px !important;
        z-index: 7 !important;
        display: flex !important;
        gap: 6px !important;
    }

    .um-home-dot {
        width: 16px !important;
        height: 6px !important;
        border: none !important;
        border-radius: 999px !important;
        background: rgba(255,255,255,.42) !important;
    }

    .um-home-dot.active {
        width: 28px !important;
        background: rgba(255,255,255,.9) !important;
    }

    /* Ini bagian penting: sembunyikan hero/kotak hijau lama */
    body.um-home-ready .hero-card,
    body.um-home-ready .hero-slide,
    body.um-home-ready .beranda-hero,
    body.um-home-ready .home-hero,
    body.um-home-ready .desa-hero,
    body.um-home-ready .welcome-hero,
    body.um-home-ready section.hero,
    body.um-home-ready .hero:not(.um-home-card) {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        visibility: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Kalau ada hero mobile dobel, yang kedua disembunyikan */
    .um-home-section:nth-of-type(n+2) {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .um-hide-green-duplicate,
    .um-hide-green-duplicate-parent {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        visibility: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .um-home-section {
        padding: 10px 14px 14px !important;
        background: #eef8ef !important;
    }

    .um-home-card {
        height: 165px !important;
        min-height: 165px !important;
        max-height: 165px !important;
        border-radius: 20px !important;
        overflow: hidden !important;
    }

    .um-home-content {
        left: 28px !important;
        right: 42px !important;
        bottom: 26px !important;
    }

    .um-home-title {
        font-size: 18px !important;
        line-height: 1.12 !important;
    }

    .um-home-desc {
        font-size: 11px !important;
        line-height: 1.42 !important;
        max-width: 270px !important;
    }

    .um-home-btn {
        width: 31px !important;
        height: 31px !important;
        background: rgba(255, 255, 255, .48) !important;
        color: rgba(4, 120, 87, .72) !important;
        box-shadow: none !important;
    }

    .um-home-btn.prev {
        left: 8px !important;
    }

    .um-home-btn.next {
        right: 8px !important;
    }
}
/* ==============================
   FINAL RAPI HERO MOBILE ATAS
============================== */
@media (max-width: 768px) {
    .um-home-section {
        padding: 10px 14px 14px !important;
        background: #eef8ef !important;
    }

    .um-home-card {
        height: 165px !important;
        min-height: 165px !important;
        max-height: 165px !important;
        border-radius: 20px !important;
        overflow: hidden !important;
    }

    .um-home-slide img {
        object-fit: cover !important;
        object-position: center center !important;
        filter: brightness(.48) contrast(1.05) !important;
    }

    .um-home-card::after {
        background: linear-gradient(
            90deg,
            rgba(2, 44, 34, .78),
            rgba(2, 44, 34, .48),
            rgba(2, 44, 34, .20)
        ) !important;
    }

    /* Teks digeser agar tidak ketimpa tombol panah */
    .um-home-content {
        left: 54px !important;
        right: 38px !important;
        bottom: 38px !important;
        z-index: 9 !important;
    }

    .um-home-title {
        font-size: 18px !important;
        line-height: 1.12 !important;
        font-weight: 950 !important;
        margin: 0 0 7px !important;
        color: #ffffff !important;
        text-shadow: 0 2px 8px rgba(0,0,0,.35) !important;
    }

    .um-home-desc {
        font-size: 10.8px !important;
        line-height: 1.35 !important;
        font-weight: 750 !important;
        max-width: 270px !important;
        color: rgba(255,255,255,.96) !important;
        text-shadow: 0 2px 8px rgba(0,0,0,.35) !important;
    }

    /* Panah dibuat kecil, transparan, tidak ganggu teks */
    .um-home-btn {
        width: 28px !important;
        height: 28px !important;
        background: rgba(255, 255, 255, .36) !important;
        color: rgba(4, 120, 87, .65) !important;
        font-size: 13px !important;
        box-shadow: none !important;
        backdrop-filter: blur(5px) !important;
        z-index: 10 !important;
    }

    .um-home-btn.prev {
        left: 10px !important;
        top: 52% !important;
    }

    .um-home-btn.next {
        right: 10px !important;
        top: 52% !important;
    }

    .um-home-btn:hover,
    .um-home-btn:active {
        background: rgba(255,255,255,.58) !important;
        color: #047857 !important;
    }

    .um-home-dots {
        left: 54px !important;
        bottom: 15px !important;
        gap: 5px !important;
        z-index: 10 !important;
    }

    .um-home-dot {
        width: 14px !important;
        height: 5px !important;
        background: rgba(255,255,255,.38) !important;
        border-radius: 999px !important;
    }

    .um-home-dot.active {
        width: 24px !important;
        background: rgba(255,255,255,.88) !important;
    }
}

@media (max-width: 430px) {
    .um-home-card {
        height: 158px !important;
    }

    .um-home-content {
        left: 52px !important;
        right: 34px !important;
        bottom: 36px !important;
    }

    .um-home-title {
        font-size: 17px !important;
    }

    .um-home-desc {
        font-size: 10.3px !important;
        max-width: 250px !important;
    }

    .um-home-dots {
        left: 52px !important;
        bottom: 13px !important;
    }
}
/* =====================================================
   FINAL FIX BOX HERO MOBILE BERANDA
   Rapikan box gambar, teks, panah, dan dots
===================================================== */

@media (max-width: 768px) {
    .um-home-section {
        padding: 12px 14px 16px !important;
        background: #eef8ef !important;
    }

    .um-home-card {
        position: relative !important;
        width: 100% !important;
        height: 178px !important;
        min-height: 178px !important;
        max-height: 178px !important;
        border-radius: 22px !important;
        overflow: hidden !important;
        background: #064e3b !important;
        box-shadow: 0 12px 32px rgba(15, 23, 42, .12) !important;
    }

    .um-home-track,
    .um-home-slide {
        height: 100% !important;
    }

    .um-home-slide img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
        display: block !important;
        filter: brightness(.48) contrast(1.05) !important;
    }

    .um-home-card::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 2 !important;
        background: linear-gradient(
            90deg,
            rgba(2, 44, 34, .82),
            rgba(2, 44, 34, .50),
            rgba(2, 44, 34, .20)
        ) !important;
        pointer-events: none !important;
    }

    /* Teks digeser ke kanan agar tidak ketimpa panah kiri */
    .um-home-content {
        position: absolute !important;
        left: 70px !important;
        right: 45px !important;
        bottom: 43px !important;
        z-index: 9 !important;
        color: #ffffff !important;
    }

    .um-home-title {
        margin: 0 0 7px !important;
        font-size: 17.5px !important;
        line-height: 1.12 !important;
        font-weight: 950 !important;
        color: #ffffff !important;
        letter-spacing: -.3px !important;
        text-shadow: 0 2px 9px rgba(0, 0, 0, .38) !important;
    }

    .um-home-desc {
        margin: 0 !important;
        max-width: 260px !important;
        font-size: 10.5px !important;
        line-height: 1.38 !important;
        font-weight: 750 !important;
        color: rgba(255, 255, 255, .97) !important;
        text-shadow: 0 2px 8px rgba(0, 0, 0, .35) !important;
    }

    /* Panah dibuat kecil dan tidak terlalu menonjol */
    .um-home-btn {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 30px !important;
        height: 30px !important;
        border: none !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, .38) !important;
        color: rgba(4, 120, 87, .72) !important;
        font-size: 14px !important;
        font-weight: 950 !important;
        box-shadow: none !important;
        backdrop-filter: blur(5px) !important;
        z-index: 10 !important;
    }

    .um-home-btn.prev {
        left: 16px !important;
    }

    .um-home-btn.next {
        right: 16px !important;
    }

    .um-home-btn:hover,
    .um-home-btn:active {
        background: rgba(255, 255, 255, .58) !important;
        color: #047857 !important;
    }

    /* Dots diposisikan di bawah teks */
    .um-home-dots {
        position: absolute !important;
        left: 70px !important;
        bottom: 16px !important;
        z-index: 10 !important;
        display: flex !important;
        gap: 6px !important;
    }

    .um-home-dot {
        width: 14px !important;
        height: 6px !important;
        border: none !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, .36) !important;
        padding: 0 !important;
    }

    .um-home-dot.active {
        width: 26px !important;
        background: rgba(255, 255, 255, .90) !important;
    }
}

@media (max-width: 430px) {
    .um-home-card {
        height: 172px !important;
        min-height: 172px !important;
        max-height: 172px !important;
        border-radius: 20px !important;
    }

    .um-home-content {
        left: 66px !important;
        right: 40px !important;
        bottom: 42px !important;
    }

    .um-home-title {
        font-size: 16.5px !important;
        line-height: 1.12 !important;
    }

    .um-home-desc {
        font-size: 10px !important;
        line-height: 1.35 !important;
        max-width: 235px !important;
    }

    .um-home-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 13px !important;
    }

    .um-home-btn.prev {
        left: 14px !important;
    }

    .um-home-btn.next {
        right: 14px !important;
    }

    .um-home-dots {
        left: 66px !important;
        bottom: 15px !important;
    }
}