/* =========================================================
   FOREDI NUSANTARA - RESPONSIVE.CSS
   Responsive desktop, laptop, tablet, dan mobile
   ========================================================= */

/* ===================== DESKTOP BESAR ===================== */
@media (min-width:1440px){


    :root{
        --container:1280px;
    }

    

    


}


/* ========================= LAPTOP ========================= */
@media (max-width:1199px){


    :root{
        --container:1040px;
        --header-height:86px;
    }

    .container{
        width:min(100% - 36px,var(--container));
    }

    .section-page,
    .section-page-auto{
        padding:92px 0;
    }

    .navbar ul{
        gap:22px;
    }

    .navbar a{
        font-size:14px;
    }

    .logo img{
        width:76px;
        height:76px;
    }

    #header.scrolled .logo img{
        width:64px;
        height:64px;
    }

    

    

    

    

    

    

    

    .ring-1{
        width:310px;
        height:310px;
    }

    .ring-2{
        width:380px;
        height:380px;
    }

    .ring-3{
        width:450px;
        height:450px;
    }

    

    .keunggulan-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .keunggulan-card:nth-child(4),
    .keunggulan-card:nth-child(5){
        grid-column:span 1;
    }

    .manfaat-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .produk-wrapper,
    .cara-wrapper{
        gap:52px;
    }


}


/* ====================== LAPTOP PENDEK ===================== */
@media (min-width:994px) and (max-height:820px){


    :root{
        --header-height:78px;
    }

    #header{
        min-height:78px;
    }

    .logo img{
        width:64px;
        height:64px;
    }

    #header.scrolled .logo img{
        width:58px;
        height:58px;
    }

    

    

    

    

    

    

    

    .btn-primary,
    .btn-secondary{
        min-height:50px;
        padding:12px 26px;
    }

    

    

    .ring-1{
        width:270px;
        height:270px;
    }

    .ring-2{
        width:335px;
        height:335px;
    }

    .ring-3{
        width:400px;
        height:400px;
    }

    

    

    


}


/* ========================= TABLET ========================= */
@media (max-width:993px){


    :root{
        --header-height:82px;
    }

    html{
        scroll-padding-top:82px;
    }

    .container{
        width:min(100% - 32px,760px);
    }

    .section-page,
    .section-page-auto{
        min-height:auto;
        padding:84px 0;
    }

    .section-title{
        margin-bottom:44px;
    }

    .section-title p{
        font-size:16px;
    }

    #header,
    #header.scrolled{
        min-height:82px;
    }

    .logo img,
    #header.scrolled .logo img{
        width:70px;
        height:70px;
    }

    .menu-toggle{
        display:flex;
    }

    .navbar{
        position:fixed;
        top:82px;
        right:-100%;
        width:min(340px,88vw);
        height:calc(100vh - 82px);
        padding:28px 24px;
        background:rgba(4,31,23,.98);
        box-shadow:-15px 20px 45px rgba(0,0,0,.25);
        transition:right .35s ease;
        overflow-y:auto;
    }

    .navbar.active{
        right:0;
    }

    .navbar ul{
        flex-direction:column;
        align-items:stretch;
        gap:5px;
    }

    .navbar a{
        display:block;
        padding:14px 12px;
        border-radius:10px;
        font-size:16px;
    }

    .navbar a::after{
        display:none;
    }

    .navbar a:hover,
    .navbar a.active{
        background:rgba(255,255,255,.08);
    }

    

    

    

    

    

    

    

    

    

    .keunggulan-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .keunggulan-card{
        min-height:260px;
    }

    .produk-wrapper,
    .cara-wrapper{
        grid-template-columns:1fr;
        gap:42px;
        text-align:center;
    }

    .produk-content{
        max-width:720px;
        margin-inline:auto;
    }

    .produk-list{
        width:min(560px,100%);
        margin-inline:auto;
        text-align:left;
    }

    .produk-image img{
        width:min(100%,420px);
    }

    .manfaat-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .cara-video{
        width:min(650px,100%);
        margin-inline:auto;
    }

    .cara-content{
        width:min(720px,100%);
        margin-inline:auto;
        text-align:left;
    }

    .cta-section{
        min-height:auto;
    }


}


/* ========================= MOBILE ========================= */
@media (max-width:767px){


    :root{
        --header-height:74px;
    }

    html{
        scroll-padding-top:74px;
    }

    body{
        font-size:15px;
    }

    .container{
        width:min(100% - 28px,620px);
    }

    .section-page,
    .section-page-auto{
        padding:70px 0;
    }

    .section-title{
        margin-bottom:36px;
    }

    .section-title > span{
        padding:8px 15px;
        font-size:12px;
    }

    .section-title h2{
        font-size:clamp(1.75rem,8vw,2.35rem);
    }

    .section-title p{
        font-size:14px;
    }

    #header,
    #header.scrolled{
        min-height:74px;
    }

    .logo img,
    #header.scrolled .logo img{
        width:62px;
        height:62px;
    }

    .navbar{
        top:74px;
        height:calc(100vh - 74px);
    }

    .menu-toggle{
        width:42px;
        height:42px;
    }

    

    

    

    

    

    

    

    

    

    

    .btn-primary,
    .btn-secondary{
        min-height:52px;
        padding:13px 24px;
    }

    .btn-large{
        min-height:56px;
        padding:14px 26px;
    }

    

    

    

    .ring-1{
        width:220px;
        height:220px;
    }

    .ring-2{
        width:270px;
        height:270px;
    }

    .ring-3{
        width:320px;
        height:320px;
    }

    

    

    

    

    

    

    .keunggulan-grid,
    .manfaat-grid{
        grid-template-columns:1fr;
    }

    .keunggulan-card,
    .manfaat-card{
        min-height:auto;
        padding:26px 22px;
    }

    .keunggulan-card img,
    .keunggulan-icon{
        width:64px;
        height:64px;
    }

    .produk-wrapper{
        gap:32px;
    }

    .produk-image img{
        width:min(90%,340px);
    }

    .produk-content h3{
        font-size:2rem;
    }

    .produk-content > p{
        font-size:14px;
    }

    .manfaat-card{
        min-height:auto;
    }

    .section-note{
        font-size:12px;
    }

    .cara-wrapper{
        gap:30px;
    }

    .cara-video video{
        border-radius:14px;
    }

    .step{
        grid-template-columns:46px 1fr;
        gap:14px;
        padding:17px;
    }

    .step-number{
        width:44px;
        height:44px;
        font-size:18px;
    }

    .step-text h3{
        font-size:16px;
    }

    .cara-warning{
        align-items:flex-start;
        font-size:13px;
    }

    .testimoni-card{
        padding:24px 20px;
    }

    .faq-question{
        min-height:62px;
        padding:16px 18px;
        font-size:14px;
    }

    .faq-answer p{
        padding:0 18px 18px;
        font-size:13px;
    }

    .cta-box{
        padding:42px 22px;
        border-radius:22px;
    }

    .cta-box p{
        font-size:14px;
    }

    .footer{
        padding:42px 0 24px;
    }

    .footer-brand{
        flex-direction:column;
        text-align:center;
    }

    .footer-links{
        justify-content:center;
    }

    .footer-bottom{
        flex-direction:column;
        text-align:center;
    }

    #backToTop{
        right:18px;
        bottom:91px;
        width:44px;
        height:44px;
    }

    .wa-floating{
        right:15px;
        bottom:15px;
        width:62px;
        height:62px;
    }

    .wa-floating img{
        width:32px;
        height:32px;
    }


}


/* ======================= MOBILE KECIL ===================== */
@media (max-width:420px){


    .container{
        width:min(100% - 22px,390px);
    }

    .logo img,
    #header.scrolled .logo img{
        width:56px;
        height:56px;
    }

    

    

    

    

    

    .ring-1{
        width:190px;
        height:190px;
    }

    .ring-2{
        width:235px;
        height:235px;
    }

    .ring-3{
        width:280px;
        height:280px;
    }

    

    

    

    .step{
        grid-template-columns:40px 1fr;
        padding:15px;
    }

    .step-number{
        width:40px;
        height:40px;
        font-size:16px;
    }


}


/* ================ REDUCE MOTION / AKSESIBILITAS ========== */
@media (prefers-reduced-motion:reduce){


    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }


}

/* ================= PREMIUM MOBILE HERO V3 ================= */

@media (max-width:1199px){

    

    

    

    .ring-1{width:340px;height:340px}
    .ring-2{width:415px;height:415px}
    .ring-3{width:485px;height:485px}

    

}

@media (max-width:993px){

    .section-page{
        min-height:auto;
        padding:82px 0;
    }

    

    

    

    

    

    

    

    

}

@media (max-width:767px){

    

    

    

    

    

    

    .ring-1{width:235px;height:235px}
    .ring-2{width:290px;height:290px}
    .ring-3{width:340px;height:340px}

    

    

    

    

    

    

    

    .keunggulan-card,
    .manfaat-card,
    .testimoni-card{
        min-height:auto;
    }

}

@media (max-width:420px){

    

    

    

    .ring-1{width:205px;height:205px}
    .ring-2{width:250px;height:250px}
    .ring-3{width:295px;height:295px}

    

}

/* ================= TESTIMONI RESPONSIVE FIX V3.2 ================= */
@media (max-width:993px){

    .testimoni{
        min-height:auto;
        overflow:hidden;
    }

    .testimoni-slider .swiper-wrapper{
        gap:18px;
    }

    .testimoni-slider .swiper-slide{
        flex-basis:calc((100% - 18px) / 2);
        width:calc((100% - 18px) / 2);
    }

}

@media (max-width:767px){

    .testimoni-slider{
        padding-bottom:38px;
    }

    .testimoni-slider .swiper-wrapper{
        gap:14px;
    }

    .testimoni-slider .swiper-slide{
        flex-basis:100%;
        width:100%;
    }

    .testimoni-card{
        min-height:auto;
    }

}

/* ================= CARA PAKAI RESPONSIVE V3.3 ================= */
@media (max-width:993px){


    .cara-pakai{
        height:auto;
        min-height:auto;
        overflow:visible;
    }

    .cara-pakai > .container{
        height:auto;
        display:block;
    }

    .cara-pakai .section-title{
        margin-bottom:34px;
    }

    .cara-wrapper{
        height:auto;
    }

    .cara-video video{
        height:auto;
        max-height:430px;
        object-fit:cover;
    }

    .cara-content{
        display:grid;
        grid-template-rows:none;
        gap:14px;
    }

    .cara-warning{
        margin-top:22px;
    }

}

/* ================= CARA PAKAI RESPONSIVE PREMIUM V3.6 ================= */

@media (max-width:993px){


    .cara-pakai{
        height:auto;
        min-height:auto;
        padding:78px 0;
        overflow:visible;
    }

    .cara-pakai > .container{
        height:auto;
        display:block;
    }

    .cara-pakai .section-title{
        margin-bottom:34px;
    }

    .cara-pakai .section-title h2{
        font-size:clamp(2.1rem,6vw,3rem);
    }

    .cara-pakai .section-title p{
        font-size:15px;
    }

    .cara-wrapper{
        height:auto;
        grid-template-columns:1fr;
        gap:34px;
    }

    .cara-video video{
        width:min(92%,680px);
        height:auto;
        max-height:460px;
        margin-inline:auto;
        object-fit:cover;
    }

    .cara-content{
        width:min(720px,100%);
        margin-inline:auto;
        gap:14px;
    }

    .step{
        grid-template-columns:54px 1fr;
        gap:16px;
        padding:18px 20px;
    }

    .step-number{
        width:50px;
        height:50px;
        font-size:20px;
    }

    .step-text h3{
        font-size:20px;
    }

    .step-text p{
        font-size:15px;
    }

    .cara-warning{
        min-height:auto;
        margin-top:26px;
        padding:18px 22px;
        justify-content:center;
        text-align:center;
        font-size:17px;
    }

}

@media (max-width:767px){


    .cara-pakai{
        padding:68px 0;
    }

    .cara-pakai .section-title{
        margin-bottom:28px;
    }

    .cara-pakai .section-title h2{
        font-size:clamp(1.9rem,9vw,2.5rem);
    }

    .cara-pakai .section-title p{
        font-size:14px;
    }

    .cara-video video{
        width:100%;
        max-height:360px;
        border-radius:16px;
    }

    .cara-content{
        gap:12px;
    }

    .step{
        grid-template-columns:46px 1fr;
        gap:13px;
        padding:15px 16px;
        border-radius:15px;
    }

    .step-number{
        width:44px;
        height:44px;
        font-size:17px;
    }

    .step-text h3{
        font-size:17px;
    }

    .step-text p{
        font-size:13px;
    }

    .cara-warning{
        flex-direction:column;
        gap:8px;
        padding:16px 18px;
        font-size:15px;
        line-height:1.5;
    }

    .cara-warning i{
        font-size:24px;
    }

}

@media (max-width:420px){


    .cara-pakai .section-title h2{
        font-size:2rem;
    }

    .step{
        grid-template-columns:40px 1fr;
    }

    .step-number{
        width:38px;
        height:38px;
        font-size:15px;
    }

    .step-text h3{
        font-size:16px;
    }

    .step-text p{
        font-size:12.5px;
    }

}

/* ================= PRODUK & CARA PAKAI RESPONSIVE V3.8 ================= */

@media (max-width:993px){


    .produk,
    .cara-pakai{
        height:auto;
        min-height:auto;
        overflow:visible;
    }

    .produk > .container,
    .cara-pakai > .container{
        height:auto;
        display:block;
    }

    .produk .section-title,
    .cara-pakai .section-title{
        margin-bottom:34px;
    }

    .produk-wrapper,
    .cara-wrapper{
        height:auto;
    }

    .produk-image img{
        width:min(100%,420px);
        max-height:none;
    }

}

@media (max-width:767px){


    .produk .section-title,
    .cara-pakai .section-title{
        margin-bottom:28px;
    }

}

/* ================= PRODUK RESPONSIVE COMPACT V3.9 ================= */

@media (max-width:993px){


    .produk > .container{
        display:block;
    }

    .produk .section-title{
        margin-bottom:30px;
    }

    .produk-wrapper{
        grid-template-columns:1fr;
        gap:30px;
    }

    .produk-image img{
        width:min(100%,460px);
    }

    .produk-content{
        max-width:720px;
        margin-inline:auto;
    }

}

@media (max-width:767px){


    .produk .section-title{
        margin-bottom:24px;
    }

    .produk-image img{
        width:min(94%,390px);
    }

    .produk-content h3{
        font-size:2rem;
    }

    .produk-content > p,
    .produk-list li{
        font-size:14px;
    }

}

/* ================= PRODUK & FOOTER RESPONSIVE V4.0 ================= */

@media (max-width:993px){


    .produk-wrapper{
        width:min(760px,100%);
        margin-inline:auto;
        padding:26px 22px;
        border:1px solid rgba(9,98,70,.10);
        border-radius:24px;
        background:rgba(255,255,255,.78);
        box-shadow:0 22px 48px rgba(5,66,47,.09);
    }

    .produk-image{
        min-height:auto;
    }

    .produk-content{
        padding:0;
    }

    .produk-list{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
        text-align:left;
    }

    .produk-list li{
        padding:11px 12px;
        border:1px solid rgba(8,107,76,.09);
        border-radius:12px;
        background:#f8fcfa;
    }

    .footer{
        padding:44px 0 22px;
    }

    .footer-container,
    .footer-brand,
    .footer-bottom{
        align-items:center;
        text-align:center;
    }

    .footer-brand{
        flex-direction:column;
    }

    .footer-links{
        justify-content:center;
        gap:14px 22px;
        margin:25px 0 23px;
    }

    .footer-bottom{
        flex-direction:column;
        gap:7px;
    }

}

@media (max-width:767px){


    .produk-wrapper{
        padding:22px 16px;
        border-radius:20px;
    }

    .produk-list{
        grid-template-columns:1fr;
    }

    .produk-actions .btn-primary{
        width:100%;
    }

    .footer-logo{
        width:72px;
        height:72px;
    }

    .footer-brand h3{
        font-size:23px;
    }

    .footer-brand p{
        font-size:14px;
    }

    .footer-links{
        gap:12px 18px;
        font-size:14px;
    }

}


/* =========================================================
   CARA PEMAKAIAN FINAL - RESPONSIVE V4.1
   ========================================================= */
@media (max-width:993px){

    .cara-pakai{
        height:auto;
        min-height:auto;
        overflow:visible;
        padding:78px 0;
    }

    .cara-pakai > .container{
        height:auto;
        display:block;
    }

    .cara-pakai .section-title{
        margin-bottom:30px;
    }

    .cara-wrapper-final{
        grid-template-columns:1fr;
        gap:30px;
    }

    .cara-media img{
        width:min(100%,560px);
        max-height:none;
    }

    .cara-content-final{
        width:min(760px,100%);
        margin-inline:auto;
        grid-template-columns:repeat(2,minmax(0,1fr));
        text-align:left;
    }

    .cara-content-final .step{
        min-height:150px;
    }

    .cara-pakai .cara-warning{
        margin-top:22px;
    }

}

@media (max-width:767px){

    .cara-pakai{
        padding:68px 0;
    }

    .cara-pakai .section-title{
        margin-bottom:25px;
    }

    .cara-content-final{
        grid-template-columns:1fr;
        gap:11px;
    }

    .cara-content-final .step{
        min-height:auto;
        grid-template-columns:44px minmax(0,1fr);
        padding:15px;
    }

    .cara-content-final .step-number{
        width:40px;
        height:40px;
        font-size:16px;
    }

    .cara-content-final .step-text h3{
        font-size:16px;
    }

    .cara-content-final .step-text p{
        font-size:13px;
    }

    .time-badge{
        font-size:10.5px;
    }

    .cara-pakai .cara-warning{
        flex-direction:column;
        gap:8px;
        padding:15px 17px;
        font-size:12px;
    }

}

@media (max-width:420px){

    .cara-media img{
        border-radius:17px;
    }

    .cara-content-final .step{
        grid-template-columns:38px minmax(0,1fr);
        gap:11px;
        padding:14px 13px;
    }

    .cara-content-final .step-number{
        width:36px;
        height:36px;
        font-size:14px;
    }

    .cara-content-final .step-text h3{
        font-size:15px;
    }

    .cara-content-final .step-text p{
        font-size:12px;
    }

}


/* =========================================================
   CARA PEMAKAIAN RESPONSIVE V4.2
   ========================================================= */
@media (max-width:993px){

    .cara-pakai{
        height:auto;
        min-height:auto;
        padding:84px 0;
        overflow:visible;
    }

    .cara-pakai > .container{
        height:auto;
        display:block;
    }

    .cara-pakai .section-title{
        margin-bottom:32px;
    }

    .cara-wrapper-final{
        grid-template-columns:1fr;
        gap:30px;
    }

    .cara-media{
        width:min(680px,100%);
        height:auto;
        min-height:0;
        margin-inline:auto;
        border-radius:22px;
        overflow:hidden;
    }

    .cara-media img{
        width:100%;
        height:auto;
        max-height:none;
        object-fit:contain;
        border-radius:22px;
    }

    .cara-content-final{
        width:min(760px,100%);
        height:auto;
        min-height:0;
        margin-inline:auto;
        grid-template-columns:1fr;
        grid-template-rows:none;
        gap:11px;
    }

    .cara-content-final .step,
    .cara-content-final .step-timed{
        min-height:92px;
        grid-template-columns:50px minmax(0,1fr);
        padding:15px 17px;
    }

    .cara-content-final .step-timed .time-badge{
        grid-column:2;
        margin:7px 0 0;
        justify-self:start;
    }

    .cara-pakai .cara-warning{
        margin-top:24px;
    }

}

@media (max-width:767px){

    .cara-pakai{
        padding:70px 0;
    }

    .cara-pakai .section-title{
        margin-bottom:26px;
    }

    .cara-wrapper-final{
        gap:24px;
    }

    .cara-content-final .step,
    .cara-content-final .step-timed{
        min-height:auto;
        grid-template-columns:44px minmax(0,1fr);
        gap:12px;
        padding:14px;
    }

    .cara-content-final .step-number{
        width:40px;
        height:40px;
        font-size:15px;
    }

    .cara-content-final .step-text h3{
        font-size:16px;
    }

    .cara-content-final .step-text p{
        font-size:13px;
    }

    .time-badge{
        font-size:10px;
    }

}


/* ================= CARA PAKAI & BACK TO TOP RESPONSIVE V4.3 ================= */
@media (max-width:993px){

    .cara-content-final .step-text h3{
        font-size:18px;
    }

    .cara-content-final .step-text p{
        font-size:14px;
        line-height:1.5;
    }

    #backToTop{
        width:66px;
        height:66px;
        right:16px;
        bottom:90px;
    }

    #backToTop span{
        font-size:8px;
    }

}

@media (max-width:767px){

    .cara-content-final .step-text h3{
        font-size:17px;
    }

    .cara-content-final .step-text p{
        font-size:13.5px;
    }

    #backToTop{
        width:60px;
        height:60px;
        right:16px;
        bottom:88px;
    }

    #backToTop span{
        font-size:7.2px;
    }

}

/* =========================================================
   CARA PEMAKAIAN RESPONSIVE PREMIUM V4.6
   ========================================================= */

@media (max-width:993px){


    .cara-pakai{
        height:auto;
        min-height:auto;
        padding:84px 0;
        overflow:visible;
    }

    .cara-pakai > .container{
        height:auto;
        display:block;
    }

    .cara-pakai .section-title{
        margin-bottom:30px;
    }

    .cara-pakai .section-title > span,
    .cara-pakai .section-title p{
        display:none;
    }

    .cara-wrapper-final{
        grid-template-columns:1fr;
        gap:30px;
    }

    .cara-media{
        width:min(100%,650px);
        height:auto;
        aspect-ratio:1.16/1;
        margin-inline:auto;
        overflow:hidden;
        border-radius:24px;
    }

    .cara-media img{
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center 48%;
        border-radius:inherit;
    }

    .cara-content-final{
        width:min(100%,760px);
        margin-inline:auto;
        display:grid;
        grid-template-columns:1fr;
        gap:12px;
    }

    .cara-content-final .step,
    .cara-content-final .step-timed{
        min-height:auto;
        grid-template-columns:58px minmax(0,1fr);
        gap:16px;
        padding:17px 18px;
        border-radius:18px;
    }

    .cara-content-final .step-number{
        width:54px;
        height:54px;
        font-size:19px;
    }

    .cara-content-final .step-text h3{
        font-size:20px;
    }

    .cara-content-final .step-text p{
        font-size:15px;
        line-height:1.5;
    }

    .cara-content-final .time-badge{
        position:static;
        margin-top:8px;
    }

    .cara-warning-final{
        width:min(100%,760px);
        margin:24px auto 0;
    }

}

@media (max-width:767px){


    .cara-pakai{
        padding:70px 0;
    }

    .cara-pakai .section-title{
        margin-bottom:24px;
    }

    .cara-pakai .section-title h2{
        font-size:clamp(2rem,9vw,2.65rem);
    }

    .cara-wrapper-final{
        gap:24px;
    }

    .cara-media{
        aspect-ratio:1/1;
        border-radius:20px;
    }

    .cara-content-final .step,
    .cara-content-final .step-timed{
        grid-template-columns:48px minmax(0,1fr);
        gap:13px;
        padding:15px 14px;
        border-radius:16px;
    }

    .cara-content-final .step-number{
        width:44px;
        height:44px;
        font-size:16px;
    }

    .cara-content-final .step-text h3{
        font-size:17px;
    }

    .cara-content-final .step-text p{
        font-size:13.5px;
        line-height:1.48;
    }

    .cara-content-final .time-badge{
        padding:6px 10px;
    }

    .cara-content-final .time-badge i{
        font-size:15px;
    }

    .cara-content-final .time-badge small{
        font-size:8px;
    }

    .cara-content-final .time-badge strong{
        font-size:10px;
    }

    .cara-warning-final{
        grid-template-columns:44px minmax(0,1fr);
        gap:12px;
        padding:12px;
        border-radius:16px;
    }

    .cara-warning-final .warning-icon{
        width:40px;
        height:40px;
        border-radius:12px;
        font-size:18px;
    }

    .cara-warning-final .warning-copy strong{
        font-size:11px;
    }

    .cara-warning-final .warning-copy p{
        font-size:11.5px;
        line-height:1.42;
    }

}

/* =========================================================
   PREMIUM GREEN-GOLD RESPONSIVE V4.7
   ========================================================= */

@media (max-width:993px){


    .keunggulan-card,
    .manfaat-card{
        border-color:rgba(255,213,79,.48) !important;
    }

    .cara-pakai{
        height:auto !important;
        min-height:auto !important;
        padding:82px 0 !important;
        overflow:visible !important;
    }

    .cara-pakai > .container{
        height:auto !important;
        display:block !important;
    }

    .cara-pakai .section-title{
        margin-bottom:28px !important;
    }

    .cara-wrapper-final{
        grid-template-columns:1fr !important;
        gap:28px !important;
    }

    .cara-media{
        width:min(100%,640px) !important;
        height:auto !important;
        aspect-ratio:1.15/1;
        margin-inline:auto;
    }

    .cara-content-final{
        width:min(100%,760px);
        margin-inline:auto;
        gap:12px !important;
    }

}

@media (max-width:767px){


    .manfaat-icon{
        width:90px !important;
        height:90px !important;
    }

    .manfaat-icon img{
        width:80px !important;
        height:80px !important;
    }

    .cara-media{
        aspect-ratio:1/1 !important;
    }

    .cara-content-final .step,
    .cara-content-final .step-timed{
        grid-template-columns:46px minmax(0,1fr) !important;
        gap:12px !important;
        padding:14px !important;
    }

    .cara-content-final .step-number{
        width:42px !important;
        height:42px !important;
        font-size:15px !important;
    }

    .cara-content-final .step-text h3{
        font-size:17px !important;
    }

    .cara-content-final .step-text p{
        font-size:13.5px !important;
        line-height:1.45 !important;
    }

}

/* =========================================================
   CARA PEMAKAIAN BALANCED RESPONSIVE V4.8
   ========================================================= */

@media (max-width:993px){


    .cara-pakai{
        height:auto !important;
        min-height:auto !important;
        padding:82px 0 !important;
        overflow:visible !important;
    }

    .cara-pakai > .container{
        height:auto !important;
        display:block !important;
    }

    .cara-pakai .section-title{
        margin-bottom:28px !important;
    }

    .cara-wrapper-final{
        grid-template-columns:1fr !important;
        gap:28px !important;
    }

    .cara-media{
        width:min(100%,650px) !important;
        height:auto !important;
        aspect-ratio:1.16/1;
        margin-inline:auto;
    }

    .cara-content-final{
        width:min(100%,760px);
        margin-inline:auto;
        grid-template-columns:1fr !important;
        grid-template-rows:none !important;
        gap:12px !important;
    }

    .cara-content-final .step,
    .cara-content-final .step-timed{
        min-height:auto !important;
        grid-template-columns:56px minmax(0,1fr) !important;
        align-items:center !important;
        padding:16px 18px !important;
    }

    .cara-content-final .time-badge{
        position:static !important;
        margin-top:8px !important;
    }

    .cara-warning-final{
        width:min(100%,760px);
        margin:24px auto 0 !important;
    }

}

@media (max-width:767px){


    .cara-media{
        aspect-ratio:1/1 !important;
    }

    .cara-content-final .step,
    .cara-content-final .step-timed{
        grid-template-columns:46px minmax(0,1fr) !important;
        gap:12px !important;
        padding:14px !important;
    }

    .cara-content-final .step-number{
        width:42px !important;
        height:42px !important;
        font-size:15px !important;
    }

    .cara-content-final .step-text h3{
        font-size:17px !important;
    }

    .cara-content-final .step-text p{
        font-size:13.5px !important;
    }

}

/* =========================================================
   CARA PEMAKAIAN FINISHING RESPONSIVE V4.9
   ========================================================= */

@media (max-width:993px){


    .cara-pakai .section-title{
        text-align:center !important;
        margin-bottom:22px !important;
    }

    .cara-pakai .section-title h2{
        text-align:center !important;
    }

    .cara-content-final .step,
    .cara-content-final .step-timed{
        border:1.5px solid rgba(231,193,90,.58) !important;
    }

    .cara-warning-final{
        width:min(88%,760px) !important;
        margin:20px auto 0 !important;
        padding:14px 18px !important;
        grid-template-columns:48px minmax(0,1fr) !important;
        gap:14px !important;
        border:2px solid #e7c15a !important;
        border-radius:20px !important;
        background:
            linear-gradient(135deg,#8f1010 0%,#b71919 48%,#8f1010 100%) !important;
        color:#ffffff !important;
        text-align:center !important;
    }

    .cara-warning-final .warning-icon{
        width:44px !important;
        height:44px !important;
        background:linear-gradient(135deg,#ffd65b,#e8ae20) !important;
        color:#6e4200 !important;
        font-size:19px !important;
    }

    .cara-warning-final .warning-copy{
        text-align:center !important;
    }

    .cara-warning-final .warning-copy strong{
        margin-bottom:4px !important;
        color:#ffffff !important;
        font-size:16px !important;
    }

    .cara-warning-final .warning-copy p{
        margin:0 auto !important;
        color:rgba(255,255,255,.96) !important;
        font-size:14px !important;
        line-height:1.45 !important;
        text-align:center !important;
    }

}

@media (max-width:767px){


    .cara-warning-final{
        width:100% !important;
        grid-template-columns:1fr !important;
        justify-items:center !important;
        gap:9px !important;
        padding:15px !important;
    }

    .cara-warning-final .warning-icon{
        width:42px !important;
        height:42px !important;
    }

    .cara-warning-final .warning-copy strong{
        font-size:15px !important;
    }

    .cara-warning-final .warning-copy p{
        font-size:12.5px !important;
        line-height:1.45 !important;
    }

}


/* =============== FOREDI FINAL V5.0 RESPONSIVE =============== */
@media (max-width:993px){

    .produk-content{display:block!important}
    .produk-content .produk-list{display:block!important}
    .produk-content .produk-actions{width:100%;margin-top:16px}
    .cara-warning-final{width:min(88%,720px)!important;margin:20px auto 0!important;padding:14px 18px 16px!important}
    .cara-warning-final .warning-heading img{width:21px;height:21px;flex-basis:21px}
    .cara-warning-final .warning-heading strong{font-size:20px}
    .cara-warning-final .warning-copy p{font-size:14px}

}
@media (max-width:767px){

    .cara-warning-final{width:100%!important;padding:14px!important;border-radius:18px!important}
    .cara-warning-final .warning-heading{gap:7px}
    .cara-warning-final .warning-heading img{width:19px;height:19px;flex-basis:19px}
    .cara-warning-final .warning-heading strong{font-size:17px}
    .cara-warning-final .warning-copy p{font-size:12.5px;line-height:1.45}

}

/* =========================================================
   FOREDI FINAL V5.1 - RESPONSIVE RAPAT
   ========================================================= */
@media (max-width:993px){

    .cara-pakai .section-title{
        margin-bottom:18px !important;
    }

    .cara-warning-final{
        width:min(82%,640px) !important;
        margin:16px auto 0 !important;
        padding:11px 16px 12px !important;
    }

    .cara-warning-final .warning-heading{
        margin-bottom:5px !important;
    }

    .cara-warning-final .warning-heading img{
        width:18px !important;
        height:18px !important;
        flex-basis:18px !important;
    }

    .cara-warning-final .warning-heading strong{
        font-size:18px !important;
    }

    .cara-warning-final .warning-copy p{
        font-size:13px !important;
        line-height:1.38 !important;
    }

}

@media (max-width:767px){

    .cara-warning-final{
        width:100% !important;
        margin-top:14px !important;
    }

}

/* =========================================================
   FOREDI FINAL V5.2 - RESPONSIVE
   ========================================================= */

@media (max-width:993px){


    .cara-pakai .section-title{
        transform:none !important;
        margin-bottom:24px !important;
    }

    .cara-warning-final{
        margin-top:22px !important;
        margin-bottom:0 !important;
    }

}

@media (max-width:767px){


    .cara-pakai .section-title{
        margin-bottom:20px !important;
    }

    .cara-warning-final{
        margin-top:18px !important;
    }

}

/* =========================================================
   FOREDI FINAL V5.3 - RESPONSIVE
   ========================================================= */

@media (max-width:993px){


    .cara-pakai .section-title{
        transform:none !important;
        margin-bottom:22px !important;
    }

    .cara-content-final .step,
    .cara-content-final .step-timed{
        align-items:center !important;
    }

    .cara-content-final .step-number,
    .cara-content-final .step-text{
        align-self:center !important;
    }

    .cara-warning-final{
        transform:none !important;
        margin-top:20px !important;
    }

}

/* =========================================================
   TESTIMONI PREMIUM RESPONSIVE V5.4
   ========================================================= */

@media (max-width:993px){

    .testimoni{
        min-height:auto !important;
        padding:84px 0 !important;
        overflow:visible !important;
    }

    .testimoni-slider .swiper-wrapper{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:16px !important;
    }

    .testimoni-card{
        min-height:220px !important;
    }

}

@media (max-width:767px){

    .testimoni{
        padding:70px 0 !important;
    }

    .testimoni-slider .swiper-wrapper{
        grid-template-columns:1fr !important;
        gap:14px !important;
    }

    .testimoni-card{
        min-height:auto !important;
        padding:21px 18px !important;
    }

    .testimoni-card > p{
        font-size:14px !important;
    }

}

/* =========================================================
   TESTIMONI CHAT PREMIUM RESPONSIVE V5.5
   ========================================================= */

@media (max-width:993px){

    .testimoni{
        min-height:auto !important;
        padding:84px 0 !important;
        overflow:visible !important;
    }

    .testimoni-proof-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:15px;
    }

    .testimoni-proof-frame{
        height:190px;
    }

}

@media (max-width:767px){

    .testimoni{
        padding:70px 0 !important;
    }

    .testimoni-proof-grid{
        grid-template-columns:1fr;
        gap:14px;
    }

    .testimoni-proof-card{
        min-height:auto;
    }

    .testimoni-proof-frame{
        height:240px;
    }

    .testimoni-modal{
        padding:16px;
    }

    .testimoni-modal-close{
        top:12px;
        right:12px;
        width:42px;
        height:42px;
    }

}

@media (max-width:420px){

    .testimoni-proof-frame{
        height:210px;
    }

}


/* ================= FOREDI FINAL V5.6 RESPONSIVE ================= */
@media (max-width:993px){

    .testimoni{min-height:auto !important;padding:84px 0 !important;overflow:visible !important}
    .testimoni-text-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
    .testimoni-text-card{min-height:230px}

}
@media (max-width:767px){

    .testimoni{padding:70px 0 !important}
    .testimoni-text-grid{grid-template-columns:1fr;gap:14px}
    .testimoni-text-card{min-height:auto;padding:20px 18px}
    .testimoni-message{font-size:13px}

}

/* =========================================================
   FOREDI FINAL V5.7 RESPONSIVE
   ========================================================= */

@media (max-width:767px){

    .faq-question{
        padding:15px 16px !important;
    }

    .faq-answer p{
        padding:0 16px 18px !important;
    }

}

/* =========================================================
   HERO PREMIUM RESPONSIVE V5.8
   ========================================================= */





/* =========================================================
   HERO ONE-SCREEN RESPONSIVE V5.9
   ========================================================= */



/* =========================================================
   HERO FINAL V6.0 RESPONSIVE
   ========================================================= */






/* =========================================================
   HERO GOLD EFFECTS RESPONSIVE V6.1
   ========================================================= */





/* =========================================================
   HERO CLEAN PREMIUM RESPONSIVE V6.2
   ========================================================= */





/* =========================================================
   FOREDI HERO LAYERED RESPONSIVE V6.3
   ========================================================= */









/* =========================================================
   FOREDI HERO LAYERED FIX RESPONSIVE V6.4
   ========================================================= */









/* =========================================================
   FOREDI HERO FINAL RESPONSIVE V6.5
   ========================================================= */









/* =========================================================
   FOREDI HERO CSS ORBIT RESPONSIVE V6.6
   ========================================================= */





/* =========================================================
   FOREDI HERO COMPOSITION FIX RESPONSIVE V6.7
   ========================================================= */









/* =========================================================
   FOREDI HERO CENTER + COMPOSITION RESPONSIVE V6.8
   ========================================================= */

/* =========================================================
   HERO RESPONSIVE — VERSI BERSIH V7.0
   ========================================================= */
@media (max-width:1200px) and (min-width:994px){
    .hero > .hero-container{grid-template-columns:minmax(0,.98fr) minmax(430px,1.02fr);gap:34px}
    .hero-title{font-size:clamp(3.25rem,5vw,4.65rem)}
    .hero-stage{width:min(570px,100%)}
    .hero-feature{padding-inline:14px;gap:14px}
    .hero-feature img{width:60px;height:60px}
    .hero-feature strong{font-size:16px}
    .hero-feature span{font-size:12px}
}

@media (max-width:993px){
    .hero{height:auto;min-height:100svh;padding-top:var(--header-height);overflow:visible}
    .hero > .hero-container{grid-template-columns:1fr;gap:24px;padding-block:42px 24px;text-align:center}
    .hero-content,.hero-content-middle{max-width:820px;margin-inline:auto}
    .hero-badge{margin-inline:auto}
    .hero-title{align-items:center;font-size:clamp(3rem,9vw,4.7rem)}
    .hero-content > p{margin-inline:auto}
    .hero-rating{margin-inline:auto;margin-bottom:20px;justify-content:center}
    .hero-buttons{justify-content:center}
    .hero-image,.hero-showcase{min-height:470px}
    .hero-stage{width:min(620px,94%)}
    .hero-features{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:767px){
    .hero > .hero-container{width:min(100% - 28px,var(--container));padding-top:34px}
    .hero-badge{font-size:12px;padding:9px 17px;margin-bottom:16px}
    .hero-title{font-size:clamp(2.65rem,13vw,4rem);margin-bottom:16px}
    .hero-content h2{font-size:clamp(1.25rem,6vw,1.65rem)}
    .hero-content > p{font-size:14px;line-height:1.6}
    .hero-rating{width:100%;gap:10px;padding:10px 12px}
    .hero-rating .stars,.hero-rating strong{font-size:17px}
    .hero-rating span{width:100%;font-size:13px}
    .hero-buttons{gap:12px}
    .hero-buttons .btn-primary,.hero-buttons .btn-secondary{min-height:52px;padding:12px 22px}
    .hero-image,.hero-showcase{min-height:360px}
    .hero-stage{width:min(490px,108%)}
    .hero-stage .hero-layer-box{width:75%;left:42%}
    .hero-stage .hero-layer-sachet{width:26%}
    .hero-stage .hero-layer-podium{width:76%}
    .hero-css-orbit{width:72%}
    .hero-footer{padding-block:12px}
    .hero-features{width:min(100% - 24px,var(--container));grid-template-columns:1fr;gap:10px}
    .hero-feature{min-height:92px;justify-content:flex-start;padding:13px 18px}
    .hero-feature img{width:58px;height:58px}
    .hero-feature strong{font-size:17px}
    .hero-feature span{font-size:13px}
}

@media (max-width:480px){
    .hero-image,.hero-showcase{min-height:310px}
    .hero-stage{width:112%}
    .hero-feature{border-radius:16px}
}

/* =========================================================
   HERO SINGLE PRODUCT RESPONSIVE V7.2
   ========================================================= */

@media (max-width:1200px) and (min-width:994px){
    .hero-product-single{
        width:min(92%,455px) !important;
        max-height:calc(100svh - var(--header-height) - 180px);
    }
}

@media (max-width:993px){
    .hero-image-single{
        min-height:390px !important;
        height:auto;
        margin-top:18px;
        padding:0;
    }

    .hero-product-single{
        width:min(86%,470px) !important;
        max-height:none;
    }
}

@media (max-width:767px){
    .hero-image-single{
        min-height:330px !important;
        margin-top:12px;
    }

    .hero-product-single{
        width:min(88%,390px) !important;
    }
}

@media (max-width:480px){
    .hero-image-single{
        min-height:285px !important;
    }

    .hero-product-single{
        width:min(92%,340px) !important;
    }
}

/* =========================================================
   HERO V7.8 RESPONSIVE
   ========================================================= */

@media (max-width:1200px) and (min-width:994px){
    .hero-product-stage{
        width:min(100%,600px);
        min-height:500px;
    }

    .hero-product-stage .hero-product-single{
        width:min(100%,565px) !important;
        max-height:calc(100svh - var(--header-height) - 115px);
    }

    .hero-product-video-wrap{
        width:68%;
        height:74%;
    }
}

@media (max-width:993px){
    .hero-image-single{
        min-height:430px !important;
        height:auto;
        margin-top:16px;
        padding:0;
    }

    .hero-product-stage{
        width:min(100%,540px);
        min-height:430px;
    }

    .hero-product-stage .hero-product-single{
        width:min(96%,520px) !important;
        max-height:none;
    }

    .hero-product-video-wrap{
        width:69%;
        height:75%;
    }
}

@media (max-width:767px){
    .hero-image-single{
        min-height:355px !important;
        margin-top:10px;
    }

    .hero-product-stage{
        width:min(100%,450px);
        min-height:355px;
    }

    .hero-product-stage .hero-product-single{
        width:min(98%,435px) !important;
    }

    .hero-product-video-wrap{
        width:70%;
        height:74%;
    }
}

@media (max-width:480px){
    .hero-image-single{
        min-height:305px !important;
    }

    .hero-product-stage{
        width:min(100%,385px);
        min-height:305px;
    }

    .hero-product-stage .hero-product-single{
        width:min(100%,370px) !important;
    }

    .hero-product-video-wrap{
        width:70%;
        height:73%;
    }
}

/* =========================================================
   HERO V7.9 RESPONSIVE
   ========================================================= */

@media (max-width:1200px) and (min-width:994px){
    .hero-product-stage{
        width:min(100%,635px) !important;
        min-height:515px !important;
    }

    .hero-product-stage .hero-product-single{
        width:min(100%,605px) !important;
        max-height:calc(100svh - var(--header-height) - 105px) !important;
    }

    .hero-product-video-wrap{
        width:58% !important;
        height:65% !important;
    }
}

@media (max-width:993px){
    .hero-product-stage{
        width:min(100%,570px) !important;
        min-height:455px !important;
    }

    .hero-product-stage .hero-product-single{
        width:min(97%,550px) !important;
        max-height:none !important;
    }

    .hero-product-video-wrap{
        width:59% !important;
        height:65% !important;
    }
}

@media (max-width:767px){
    .hero-product-stage{
        width:min(100%,475px) !important;
        min-height:380px !important;
    }

    .hero-product-stage .hero-product-single{
        width:min(99%,460px) !important;
    }

    .hero-product-video-wrap{
        width:60% !important;
        height:64% !important;
    }
}

@media (max-width:480px){
    .hero-product-stage{
        width:min(100%,395px) !important;
        min-height:320px !important;
    }

    .hero-product-stage .hero-product-single{
        width:min(100%,382px) !important;
    }

    .hero-product-video-wrap{
        width:60% !important;
        height:63% !important;
    }
}

/* =========================================================
   HERO V7.10 RESPONSIVE
   ========================================================= */

@media (max-width:1200px) and (min-width:994px){
    .hero-product-stage{
        width:min(100%,645px) !important;
        min-height:520px !important;
    }

    .hero-product-stage .hero-product-single{
        width:min(100%,615px) !important;
        max-height:calc(100svh - var(--header-height) - 100px) !important;
    }

    .hero-inner-fx{
        width:61% !important;
        height:72% !important;
    }
}

@media (max-width:993px){
    .hero-product-stage{
        width:min(100%,580px) !important;
        min-height:460px !important;
    }

    .hero-product-stage .hero-product-single{
        width:min(97%,560px) !important;
        max-height:none !important;
    }

    .hero-inner-fx{
        width:62% !important;
        height:72% !important;
    }
}

@media (max-width:767px){
    .hero-product-stage{
        width:min(100%,485px) !important;
        min-height:390px !important;
    }

    .hero-product-stage .hero-product-single{
        width:min(99%,470px) !important;
    }

    .hero-inner-fx{
        width:63% !important;
        height:71% !important;
    }

    .hero-spark{
        width:8px;
        height:8px;
    }

    .hero-dot{
        width:6px;
        height:6px;
    }
}

@media (max-width:480px){
    .hero-product-stage{
        width:min(100%,400px) !important;
        min-height:325px !important;
    }

    .hero-product-stage .hero-product-single{
        width:min(100%,388px) !important;
    }

    .hero-inner-fx{
        width:64% !important;
        height:70% !important;
    }
}

/* =========================================================
   HERO V7.11 MORE SPARKLE RESPONSIVE
   ========================================================= */

@media (max-width:767px){
    .spark-9,
    .spark-11,
    .spark-13{
        display:none !important;
    }
}

@media (max-width:480px){
    .spark-10,
    .spark-12,
    .spark-14{
        transform:scale(.45) !important;
    }
}

/* =========================================================
   V7.12 RESPONSIVE LOGO + SPARKLE
   ========================================================= */

@media (max-width:993px){
    .site-logo,
    .header-logo img,
    .navbar-brand img,
    .logo img{
        width:66px !important;
        height:66px !important;
        max-width:66px !important;
        max-height:66px !important;
    }
}

@media (max-width:767px){
    .site-logo,
    .header-logo img,
    .navbar-brand img,
    .logo img{
        width:58px !important;
        height:58px !important;
        max-width:58px !important;
        max-height:58px !important;
    }

    .spark-15,
    .spark-17,
    .spark-19{
        display:none !important;
    }
}

@media (max-width:480px){
    .site-logo,
    .header-logo img,
    .navbar-brand img,
    .logo img{
        width:52px !important;
        height:52px !important;
        max-width:52px !important;
        max-height:52px !important;
    }

    .hero-inner-fx::before,
    .hero-inner-fx::after{
        width:28%;
    }
}

/* =========================================================
   HERO V7.16 OUTER GLOW RESPONSIVE
   ========================================================= */

@media (max-width:1200px) and (min-width:994px){
    .hero-outer-fx{
        width:110%;
        height:106%;
    }

    .outer-spark{
        width:13px;
        height:13px;
    }
}

@media (max-width:993px){
    .hero-outer-fx{
        width:108%;
        height:105%;
    }

    .outer-spark{
        width:11px;
        height:11px;
    }
}

@media (max-width:767px){
    .hero-outer-fx{
        width:106%;
        height:103%;
    }

    .outer-spark{
        width:9px;
        height:9px;
    }

    .outer-spark-9,
    .outer-spark-10,
    .outer-spark-11,
    .outer-spark-12{
        display:none;
    }
}

@media (max-width:480px){
    .hero-outer-fx{
        width:104%;
        height:102%;
    }

    .outer-spark{
        width:8px;
        height:8px;
    }
}

/* =========================================================
   V7.18 RESPONSIVE
   ========================================================= */

@media (max-width:767px){
    .back-to-top-video{
        right:16px;
        bottom:96px;
        width:88px;
        height:88px;
    }

    .back-to-top-label{
        font-size:10px;
    }
}

@media (max-width:480px){
    .back-to-top-video{
        right:12px;
        bottom:88px;
        width:78px;
        height:78px;
    }

    .back-to-top-label{
        font-size:9px;
        line-height:1.15;
    }
}

/* =========================================================
   V7.20 RESPONSIVE - PRODUCT IMAGE
   ========================================================= */

@media (max-width:1199px) and (min-width:994px){
    .produk-image img{
        width:min(116%,560px) !important;
    }
}

@media (max-width:993px){
    .produk-image img{
        width:min(100%,500px) !important;
        max-width:100% !important;
    }
}

@media (max-width:767px){
    .produk-image img{
        width:min(96%,410px) !important;
    }
}

@media (max-width:420px){
    .produk-image img{
        width:min(98%,360px) !important;
    }
}

/* =========================================================
   V7.22 FINAL - PRODUK IMAGE RESPONSIVE
   ========================================================= */

@media (max-width:1199px) and (min-width:994px){
    .produk .produk-wrapper{
        grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
        gap:24px !important;
    }

    .produk .produk-image img{
        width:100% !important;
        max-width:610px !important;
        max-height:420px !important;
        transform:none !important;
    }
}

@media (max-width:993px){
    .produk .produk-image{
        overflow:visible !important;
        justify-content:center !important;
    }

    .produk .produk-image img{
        width:min(100%,500px) !important;
        max-width:500px !important;
        max-height:none !important;
        transform:none !important;
    }
}

@media (max-width:767px){
    .produk .produk-image img{
        width:min(94%,410px) !important;
        max-width:410px !important;
    }
}

@media (max-width:420px){
    .produk .produk-image img{
        width:min(96%,350px) !important;
        max-width:350px !important;
    }
}

/* =========================================================
   V7.24 RESPONSIVE - RESET POSISI PRODUK
   Tablet & HP tidak ikut diturunkan.
   ========================================================= */

@media (max-width:993px){
    .produk .produk-image{
        padding-top:0 !important;
    }
}

/* =========================================================
   V7.25 - MANFAAT PREMIUM RESPONSIVE
   ========================================================= */

@media (max-width:1199px) and (min-width:994px){

    .manfaat-grid-premium{
        gap:14px !important;
    }

    .manfaat-card-premium{
        min-height:430px !important;
        padding:20px 15px 21px !important;
    }

    .manfaat-icon-premium{
        width:118px !important;
        height:118px !important;
    }

    .manfaat-card-premium h3{
        font-size:16px !important;
    }

    .manfaat-card-premium p{
        font-size:12px !important;
        line-height:1.6 !important;
    }
}


@media (max-width:993px){

    .manfaat-premium{
        min-height:auto !important;
        padding:82px 0 !important;
    }

    .manfaat-grid-premium{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:18px !important;
        width:min(820px,100%);
        margin-inline:auto;
    }

    .manfaat-card-premium{
        min-height:420px !important;
        padding:25px 22px !important;
    }

    .manfaat-icon-premium{
        width:138px !important;
        height:138px !important;
    }

    .manfaat-card-premium h3{
        font-size:19px !important;
    }

    .manfaat-card-premium p{
        font-size:13.5px !important;
    }
}


@media (max-width:767px){

    .manfaat-premium{
        padding:70px 0 !important;
    }

    .manfaat-premium .manfaat-title{
        margin-bottom:28px !important;
    }

    .manfaat-premium .manfaat-title p{
        font-size:13px !important;
    }

    .manfaat-grid-premium{
        grid-template-columns:1fr !important;
        gap:15px !important;
        width:min(520px,100%);
    }

    .manfaat-card-premium{
        min-height:auto !important;
        padding:24px 21px 26px !important;
        border-radius:22px !important;
    }

    .manfaat-icon-premium{
        width:130px !important;
        height:130px !important;
        margin-bottom:14px !important;
    }

    .manfaat-card-premium h3{
        max-width:420px;
        font-size:18px !important;
    }

    .manfaat-card-premium p{
        max-width:440px;
        font-size:13px !important;
        line-height:1.65 !important;
    }

    .manfaat-kicker{
        font-size:9.5px;
    }
}


@media (max-width:420px){

    .manfaat-premium{
        padding:64px 0 !important;
    }

    .manfaat-card-premium{
        padding:22px 17px 24px !important;
    }

    .manfaat-icon-premium{
        width:116px !important;
        height:116px !important;
    }

    .manfaat-card-premium h3{
        font-size:17px !important;
    }

    .manfaat-card-premium p{
        font-size:12.5px !important;
    }
}

/* =========================================================
   V7.26 - MANFAAT PREMIUM RESPONSIVE FINAL
   ========================================================= */

@media (max-width:1199px) and (min-width:994px){

    .manfaat-premium > .container{
        width:min(100% - 32px,1180px) !important;
    }

    .manfaat-grid-premium{
        gap:13px !important;
    }

    .manfaat-card-premium{
        padding:17px 14px 19px !important;
    }

    .manfaat-icon-premium,
    .manfaat-icon-premium img{
        width:102px !important;
        height:102px !important;
    }

    .manfaat-icon-premium{
        flex-basis:102px !important;
    }

    .manfaat-card-premium h3{
        font-size:14.5px !important;
    }

    .manfaat-card-premium p{
        font-size:11.2px !important;
        line-height:1.48 !important;
    }
}

@media (max-width:993px){

    .manfaat-premium{
        min-height:auto !important;
        padding:72px 0 !important;
    }

    .manfaat-premium .manfaat-title{
        margin-bottom:28px !important;
    }

    .manfaat-grid-premium{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        width:min(820px,100%) !important;
        gap:18px !important;
    }

    .manfaat-card-premium{
        min-height:auto !important;
        padding:23px 21px 25px !important;
    }

    .manfaat-icon-premium,
    .manfaat-icon-premium img{
        width:126px !important;
        height:126px !important;
    }

    .manfaat-icon-premium{
        flex-basis:126px !important;
    }

    .manfaat-card-premium h3{
        font-size:18px !important;
    }

    .manfaat-card-premium p{
        font-size:13px !important;
        line-height:1.6 !important;
    }
}

@media (max-width:767px){

    .manfaat-premium{
        padding:64px 0 !important;
    }

    .manfaat-grid-premium{
        grid-template-columns:1fr !important;
        width:min(520px,100%) !important;
        gap:15px !important;
    }

    .manfaat-card-premium{
        padding:22px 19px 24px !important;
    }

    .manfaat-icon-premium,
    .manfaat-icon-premium img{
        width:118px !important;
        height:118px !important;
    }

    .manfaat-icon-premium{
        flex-basis:118px !important;
    }

    .manfaat-card-premium h3{
        font-size:17px !important;
    }

    .manfaat-card-premium p{
        font-size:12.8px !important;
        line-height:1.6 !important;
    }
}

@media (max-width:420px){

    .manfaat-premium{
        padding:58px 0 !important;
    }

    .manfaat-card-premium{
        padding:20px 16px 22px !important;
    }

    .manfaat-icon-premium,
    .manfaat-icon-premium img{
        width:108px !important;
        height:108px !important;
    }

    .manfaat-icon-premium{
        flex-basis:108px !important;
    }
}


/* =========================================================
   V7.27 - NAVIGATION FLOW UPDATE
   Tidak ada perubahan responsive visual.
   ========================================================= */

/* =========================================================
   V7.28 - KEUNGGULAN RESPONSIVE SPACING
   ========================================================= */
@media (max-width:1199px) and (min-width:994px){
    #keunggulan.manfaat-premium{padding:14px 0 118px !important;}
    #keunggulan.manfaat-premium > .container{width:min(100% - 38px,1180px) !important;}
    #keunggulan .manfaat-title{margin-bottom:15px !important;}
    #keunggulan .manfaat-grid-premium{gap:12px !important;padding-right:98px !important;}
    #keunggulan .manfaat-card-premium{padding:15px 13px 17px !important;}
    #keunggulan .manfaat-icon-premium,#keunggulan .manfaat-icon-premium img{width:96px !important;height:96px !important;}
    #keunggulan .manfaat-icon-premium{flex-basis:96px !important;}
}
@media (max-width:993px){
    #keunggulan.manfaat-premium{padding-top:34px !important;padding-bottom:126px !important;}
    #keunggulan .manfaat-title{margin-bottom:24px !important;}
    #keunggulan .manfaat-grid-premium{padding-right:0 !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media (max-width:767px){
    #keunggulan.manfaat-premium{padding-top:26px !important;padding-bottom:132px !important;}
    #keunggulan .manfaat-title{margin-bottom:20px !important;}
    #keunggulan .manfaat-grid-premium{grid-template-columns:1fr !important;gap:14px !important;}
    #keunggulan .manfaat-card-premium{min-height:auto !important;}
}
@media (max-width:420px){#keunggulan.manfaat-premium{padding-top:22px !important;padding-bottom:128px !important;}}

/* =========================================================
   V7.29 - KEUNGGULAN CARD HEIGHT + TEXT SIZE RESPONSIVE
   ========================================================= */
@media (max-width:1199px) and (min-width:994px){
    #keunggulan .manfaat-card-premium{min-height:430px !important;}
    #keunggulan .manfaat-card-premium h3{font-size:16.5px !important;}
    #keunggulan .manfaat-card-premium p{font-size:12.8px !important;line-height:1.62 !important;}
}
@media (max-width:993px){
    #keunggulan .manfaat-card-premium{min-height:400px !important;}
    #keunggulan .manfaat-card-premium p{font-size:13.4px !important;line-height:1.64 !important;}
}
@media (max-width:767px){
    #keunggulan .manfaat-card-premium{min-height:auto !important;}
    #keunggulan .manfaat-card-premium p{font-size:13.6px !important;}
}

/* =========================================================
   V7.32 - CARA PAKAI RESPONSIVE ONLY
   Tidak mengubah section lain.
   ========================================================= */

@media (max-width:993px){

    #carapakai .section-title{
        margin-bottom:18px !important;
    }

    #carapakai .cara-media img{
        min-height:360px !important;
        object-fit:cover !important;
    }

    #carapakai .cara-content-final .step,
    #carapakai .cara-content-final .step-timed{
        padding:20px 21px !important;
    }

    #carapakai .cara-content-final .step-text h3{
        font-size:20.5px !important;
    }

    #carapakai .cara-content-final .step-text p{
        font-size:15.5px !important;
        line-height:1.5 !important;
    }

    #carapakai .cara-warning-final{
        width:min(76%,600px) !important;
    }
}

@media (max-width:767px){

    #carapakai .cara-media img{
        min-height:300px !important;
    }

    #carapakai .cara-content-final .step,
    #carapakai .cara-content-final .step-timed{
        padding:18px !important;
    }

    #carapakai .cara-content-final .step-text h3{
        font-size:17.5px !important;
    }

    #carapakai .cara-content-final .step-text p{
        font-size:14px !important;
    }

    #carapakai .cara-warning-final{
        width:92% !important;
    }
}


/* =========================================================
   V7.33 - TESTIMONI RESPONSIVE HOVER/FONT ONLY
   ========================================================= */

@media (max-width:993px){

    .testimoni-text-card{
        min-height:245px !important;
        padding:23px !important;
    }

    .testimoni-message{
        font-size:14.5px !important;
        line-height:1.58 !important;
    }

    .testimoni-text-card:hover{
        transform:translateY(-5px) scale(1.025) !important;
    }
}

@media (max-width:767px){

    .testimoni-text-card{
        min-height:auto !important;
        padding:21px 19px !important;
    }

    .testimoni-message{
        font-size:14px !important;
        line-height:1.58 !important;
    }

    /* Pada perangkat sentuh cukup efek naik ringan agar tidak melebar keluar layar */
    .testimoni-text-card:hover{
        transform:translateY(-4px) scale(1.01) !important;
    }
}

@media (hover:none){
    .testimoni-text-card:hover{
        transform:none !important;
    }
}

/* =========================================================
   V7.34 - KEUNTUNGAN PREMIUM RESPONSIVE
   ========================================================= */

@media (max-width:1199px){

    .keuntungan-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:15px;
    }

    .keuntungan-card{
        min-height:315px;
        padding:19px 17px 22px;
    }

    .keuntungan-card img{
        width:112px;
        height:112px;
    }

    .keuntungan-card h3{
        font-size:17px;
    }

    .keuntungan-card p{
        font-size:12.5px;
    }
}

@media (max-width:993px){

    .keuntungan-title{
        margin-bottom:28px;
    }

    .keuntungan-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:17px;
    }

    .keuntungan-card{
        min-height:320px;
    }
}

@media (max-width:767px){

    .keuntungan-grid{
        grid-template-columns:1fr;
        gap:15px;
    }

    .keuntungan-card{
        min-height:auto;
        padding:22px 20px 24px;
    }

    .keuntungan-card img{
        width:118px;
        height:118px;
    }

    .keuntungan-card h3{
        font-size:18px;
    }

    .keuntungan-card p{
        font-size:13.5px;
        line-height:1.6;
    }

    .keuntungan-card:hover{
        transform:translateY(-4px) scale(1.01);
    }
}

@media (hover:none){
    .keuntungan-card:hover{
        transform:none;
    }

    .keuntungan-card:hover img{
        transform:none;
    }
}

/* =========================================================
   V7.35 - KEUNTUNGAN RESPONSIVE
   ========================================================= */

@media (max-width:1199px) and (min-width:994px){

    #keuntungan .keuntungan-title{
        width:min(1080px,100%) !important;
        margin-bottom:18px !important;
    }

    #keuntungan .keuntungan-title h2{
        white-space:nowrap !important;
        font-size:clamp(1.85rem,2.7vw,2.45rem) !important;
        margin-bottom:7px !important;
    }

    #keuntungan .keuntungan-title p{
        white-space:nowrap !important;
        font-size:12.5px !important;
    }

    #keuntungan .keuntungan-card{
        min-height:330px !important;
    }

    #keuntungan .keuntungan-card h3{
        font-size:17.5px !important;
    }

    #keuntungan .keuntungan-card p{
        font-size:13px !important;
        line-height:1.58 !important;
    }
}

@media (max-width:993px){

    #keuntungan .keuntungan-title h2,
    #keuntungan .keuntungan-title p{
        white-space:normal !important;
    }

    #keuntungan .keuntungan-card{
        min-height:325px !important;
    }

    #keuntungan .keuntungan-card h3{
        font-size:18px !important;
    }

    #keuntungan .keuntungan-card p{
        font-size:13.5px !important;
        line-height:1.6 !important;
    }
}

@media (max-width:767px){

    #keuntungan .keuntungan-card{
        min-height:auto !important;
    }
}

/* V7.43 - Hubungi Admin responsive */
@media (max-width:768px){
    #pesan .cta-box{width:100% !important;padding:34px 18px 30px !important}
    #pesan .cta-info-grid{grid-template-columns:1fr;gap:12px}
    #pesan .cta-info-card{min-height:auto;padding:16px 14px}
    #pesan .cta-wa-button{min-width:0;width:100%}
    #pesan .cta-note{font-size:10.5px}
}

/* =========================================================
   V7.46 - MOBILE SPACING FINAL
   Rapikan jarak header -> isi pada HP.
   CATATAN: section #keunggulan sengaja TIDAK disentuh.
   ========================================================= */

@media (max-width:767px){

    /* ---------- BERANDA / HERO ---------- */
    #home > .hero-container{
        padding-top:26px !important;
    }

    #home .hero-badge{
        margin-bottom:12px !important;
    }

    #home .hero-title{
        margin-bottom:9px !important;
    }

    #home .hero-content h2{
        margin-bottom:13px !important;
        line-height:1.28 !important;
    }

    #home .hero-content > p{
        margin-bottom:17px !important;
        font-size:13.2px !important;
        line-height:1.52 !important;
    }

    #home .hero-rating{
        margin-bottom:12px !important;
        padding:9px 11px !important;
    }

    #home .hero-buttons{
        gap:9px !important;
    }

    #home .hero-buttons .btn-primary,
    #home .hero-buttons .btn-secondary{
        min-height:49px !important;
        padding:11px 21px !important;
    }

    /* ---------- SECTION LAIN ----------
       Samakan jarak atas dengan Keunggulan yang sudah pas.
       #keunggulan tidak dimasukkan ke selector ini. */
    #produk,
    #carapakai,
    #testimoni,
    #faq,
    #keuntungan,
    #pesan{
        padding-top:26px !important;
    }

    #produk .section-title,
    #carapakai .section-title,
    #testimoni .section-title,
    #faq .section-title,
    #keuntungan .section-title{
        margin-top:0 !important;
    }

    /* Hubungi Admin: jangan kembali terpusat terlalu rendah. */
    #pesan{
        min-height:auto !important;
        align-items:flex-start !important;
    }
}

@media (max-width:420px){

    #home > .hero-container{
        padding-top:22px !important;
    }

    #home .hero-title{
        margin-bottom:8px !important;
    }

    #home .hero-content h2{
        margin-bottom:11px !important;
    }

    #home .hero-content > p{
        margin-bottom:15px !important;
        font-size:12.8px !important;
        line-height:1.5 !important;
    }

    #home .hero-rating{
        margin-bottom:10px !important;
    }

    #produk,
    #carapakai,
    #testimoni,
    #faq,
    #keuntungan,
    #pesan{
        padding-top:22px !important;
    }
}