/* ==========================================
   HERO MOBILE PREMIUM ZONAPRODUKID
========================================== */

@media (max-width:768px){

    .hero{
        padding:20px 0 40px;
        overflow:hidden;
    }

    .hero-wrapper{
        display:flex !important;
        flex-direction:column-reverse !important;
        gap:25px;
    }

    /* Banner full atas */
    .hero-right{
        width:100%;
        margin:0;
    }

    .hero-card{
        width:100%;
        border-radius:24px;
        overflow:hidden;
        box-shadow:0 15px 30px rgba(0,0,0,.12);
    }

    .hero-card img,
    .hero-image{
        width:100%;
        height:auto;
        display:block;
        object-fit:cover;
    }

    /* Teks */
    .hero-left{
        text-align:left;
    }

    .hero-left h1{
        font-size:36px;
        line-height:1.15;
        margin-bottom:16px;
    }

    .hero-left p{
        font-size:15px;
        line-height:1.7;
    }

    /* Statistik */
    .hero-stats{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:12px;
        margin-top:25px;
    }

    .stat-box{
        padding:18px;
        border-radius:18px;
    }

    .stat-box h2{
        font-size:28px;
    }

    /* Tombol */
    .hero-buttons{
        display:flex;
        flex-direction:column;
        gap:12px;
        margin-top:24px;
    }

    .hero-buttons .btn{
        width:100%;
        justify-content:center;
    }

}