/* =========================
   FIX MOBILE HERO DESA BAJUH
   Pakai hero atas saja
========================= */
@media (max-width: 768px) {
    /* Hero utama */
    .um-home-section {
        padding: 12px 14px 16px !important;
        background: #eef8ef !important;
    }

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

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

    .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(.58) !important;
    }

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

    .um-home-content {
        position: absolute !important;
        left: 20px !important;
        right: 50px !important;
        bottom: 24px !important;
        z-index: 4 !important;
        color: #fff !important;
        pointer-events: none !important;
    }

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

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

    /* tombol panah */
    .um-home-btn {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 999px !important;
        border: none !important;
        background: rgba(255, 255, 255, .58) !important;
        color: rgba(4, 120, 87, .82) !important;
        font-size: 16px !important;
        font-weight: 900 !important;
        z-index: 8 !important;
        cursor: pointer !important;
        backdrop-filter: blur(6px) !important;
        box-shadow: none !important;
        pointer-events: auto !important;
    }

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

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

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

    /* dots */
    .um-home-dots {
        position: absolute !important;
        left: 18px !important;
        bottom: 10px !important;
        z-index: 8 !important;
        display: flex !important;
        gap: 6px !important;
        pointer-events: auto !important;
    }

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

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

    /* Header mobile */
    .um-mobile-header {
        background: #fff !important;
        border-bottom: 1px solid #e5e7eb !important;
        box-shadow: 0 8px 24px rgba(15, 23, 42, .06) !important;
    }

    .um-mobile-nav {
        height: 72px !important;
        padding: 10px 16px !important;
    }

    .um-mobile-logo {
        width: 42px !important;
        height: 42px !important;
    }

    .um-mobile-title {
        font-size: 17px !important;
        font-weight: 900 !important;
        color: #0f172a !important;
    }

    .um-mobile-subtitle {
        font-size: 11px !important;
        font-weight: 800 !important;
        color: #047857 !important;
    }

    .um-menu-btn {
        width: 46px !important;
        height: 46px !important;
        border-radius: 16px !important;
        background: #16a34a !important;
        box-shadow: 0 12px 28px rgba(22, 163, 74, .22) !important;
    }
}