/* =========================================================
   FOREDI NUSANTARA - STYLE.CSS
   Versi bersih dari nol
   ========================================================= */

/* ========================= RESET ========================= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    scroll-padding-top:0;
}

body{
    font-family:"Poppins",sans-serif;
    font-size:16px;
    line-height:1.7;
    color:#24332d;
    background:#ffffff;
    overflow-x:hidden;
}

body.menu-open{
    overflow:hidden;
}

img,
video{
    display:block;
    max-width:100%;
}

a{
    color:inherit;
    text-decoration:none;
}

ul{
    list-style:none;
}

button,
input,
textarea,
select{
    font:inherit;
}

button{
    border:0;
    cursor:pointer;
}

:focus-visible{
    outline:3px solid rgba(255,213,79,.75);
    outline-offset:4px;
}

/* ====================== VARIABLES ======================== */
:root{
    --primary:#0b6e4f;
    --primary-dark:#074735;
    --primary-deep:#062f24;
    --secondary:#ffd54f;
    --secondary-dark:#d8a91e;
    --maroon:#741312;

    --white:#ffffff;
    --black:#18211d;
    --text:#33443d;
    --muted:#66756f;
    --light:#f5f8f6;
    --border:#dde7e2;

    --shadow-sm:0 8px 24px rgba(5,47,36,.08);
    --shadow:0 18px 45px rgba(5,47,36,.13);
    --shadow-lg:0 28px 70px rgba(0,0,0,.22);

    --radius-sm:12px;
    --radius:20px;
    --radius-lg:30px;

    --container:1220px;
    --header-height:92px;
    --transition:.32s ease;
}

/* ======================= UTILITIES ======================= */
.container{
    width:min(100% - 40px,var(--container));
    margin-inline:auto;
}

.section-page,
.section-page-auto{
    position:relative;
    width:100%;
    padding:110px 0;
}

.section-page{
    min-height:100vh;
    display:flex;
    align-items:center;
}

.section-page-auto{
    min-height:100vh;
}

.section-title{
    width:min(760px,100%);
    margin:0 auto 60px;
    text-align:center;
}

.section-title > span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:9px 18px;
    margin-bottom:16px;
    border-radius:999px;
    background:#e8f4ef;
    color:var(--primary);
    font-size:14px;
    font-weight:700;
    letter-spacing:.02em;
}

.section-title h2{
    margin-bottom:16px;
    color:var(--black);
    font-size:clamp(2rem,3.4vw,3rem);
    line-height:1.18;
    font-weight:800;
}

.section-title p{
    color:var(--muted);
    font-size:17px;
}

.btn-primary,
.btn-secondary{
    min-height:56px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:11px;
    padding:15px 30px;
    border-radius:999px;
    font-weight:700;
    transition:transform var(--transition),
               box-shadow var(--transition),
               background var(--transition),
               color var(--transition),
               border-color var(--transition);
}

.btn-primary{
    background:#25d366;
    color:#ffffff;
    box-shadow:0 14px 30px rgba(37,211,102,.25);
}

.btn-primary:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 40px rgba(37,211,102,.34);
}

.btn-secondary{
    color:#ffffff;
    border:2px solid rgba(255,255,255,.92);
    background:rgba(255,255,255,.03);
}

.btn-secondary:hover{
    transform:translateY(-4px);
    background:#ffffff;
    color:var(--primary-dark);
}

.btn-large{
    min-height:62px;
    padding:17px 36px;
    font-size:17px;
}

.wa-icon{
    width:25px;
    height:25px;
}

/* ====================== PRELOADER ======================== */
#preloader{
    position:fixed;
    inset:0;
    z-index:99999;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:22px;
    background:#ffffff;
    transition:opacity .45s ease,visibility .45s ease;
}

.loader-logo{
    width:100px;
}

.loader-logo img{
    width:100%;
    height:auto;
}

.loader-spinner{
    width:48px;
    height:48px;
    border:4px solid rgba(11,110,79,.15);
    border-top-color:var(--primary);
    border-radius:50%;
}

/* ===================== FIXED BUTTONS ===================== */
#backToTop{
    position:fixed;
    right:28px;
    bottom:108px;
    z-index:9997;
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--primary);
    color:#ffffff;
    box-shadow:var(--shadow);
    opacity:0;
    visibility:hidden;
    transform:translateY(16px);
    transition:var(--transition);
}

#backToTop.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

#backToTop:hover{
    background:var(--primary-dark);
    transform:translateY(-3px);
}

.wa-floating{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:9998;
    width:68px;
    height:68px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#25d366;
    box-shadow:0 16px 34px rgba(37,211,102,.35);
    transition:transform var(--transition);
}

.wa-floating:hover{
    transform:scale(1.08);
}

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

/* ========================= HEADER ======================== */
#header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    min-height:var(--header-height);
    z-index:1000;
    display:flex;
    align-items:center;
    background:linear-gradient(90deg,rgba(12,37,28,.86),rgba(3,24,17,.9));
    border-bottom:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    transition:min-height var(--transition),
               background var(--transition),
               box-shadow var(--transition);
}

#header.scrolled{
    min-height:78px;
    background:rgba(6,47,36,.97);
    box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.header-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.logo{
    flex:0 0 auto;
    display:flex;
    align-items:center;
}

.logo img{
    width:82px;
    height:82px;
    object-fit:contain;
    transition:width var(--transition),height var(--transition);
}

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

.navbar ul{
    display:flex;
    align-items:center;
    gap:clamp(20px,2.7vw,36px);
}

.navbar a{
    position:relative;
    color:#ffffff;
    font-size:15px;
    font-weight:600;
    transition:color var(--transition);
}

.navbar a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-9px;
    width:0;
    height:2px;
    border-radius:4px;
    background:var(--secondary);
    transition:width var(--transition);
}

.navbar a:hover,
.navbar a.active{
    color:var(--secondary);
}

.navbar a:hover::after,
.navbar a.active::after{
    width:100%;
}

.menu-toggle{
    width:46px;
    height:46px;
    display:none;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:rgba(255,255,255,.12);
    color:#ffffff;
    font-size:22px;
}

/* ========================== HERO ========================= */




































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

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

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

















/* ======================= KEUNGGULAN ====================== */
.keunggulan{
    background:linear-gradient(180deg,#f8fbf9,#eef5f1);
}

.keunggulan-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:18px;
}

.keunggulan-card{
    min-height:285px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding:30px 22px;
    border-radius:var(--radius);
    background:#ffffff;
    border:1px solid var(--border);
    box-shadow:var(--shadow-sm);
    text-align:center;
    transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
}

.keunggulan-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow);
    border-color:rgba(11,110,79,.22);
}

.keunggulan-card img,
.keunggulan-icon{
    width:72px;
    height:72px;
    margin-bottom:20px;
    object-fit:contain;
}

.keunggulan-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--primary);
    font-size:54px;
}

.keunggulan-card h3{
    margin-bottom:12px;
    color:var(--primary);
    font-size:20px;
    line-height:1.3;
}

.keunggulan-card p{
    color:var(--muted);
    font-size:14px;
    line-height:1.75;
}

/* ========================== PRODUK ======================= */
.produk{
    background:#ffffff;
}

.produk-wrapper{
    display:grid;
    grid-template-columns:minmax(300px,.9fr) minmax(0,1.1fr);
    align-items:center;
    gap:80px;
}

.produk-image{
    display:flex;
    align-items:center;
    justify-content:center;
}

.produk-image img{
    width:min(100%,470px);
    filter:drop-shadow(0 24px 25px rgba(0,0,0,.18));
}

.produk-content{
    max-width:620px;
}

.produk-badge{
    display:inline-flex;
    padding:9px 17px;
    border-radius:999px;
    background:#e9f5f0;
    color:var(--primary);
    font-size:14px;
    font-weight:700;
}

.produk-content h3{
    margin:18px 0 15px;
    color:var(--primary-dark);
    font-size:clamp(2rem,3.5vw,3rem);
    line-height:1.15;
}

.produk-content > p{
    margin-bottom:24px;
    color:var(--muted);
    font-size:16px;
}

/* ========================== MANFAAT ====================== */
.manfaat{
    background:
        linear-gradient(rgba(5,47,36,.93),rgba(5,47,36,.93)),
        radial-gradient(circle at 50% 0%,rgba(255,213,79,.18),transparent 44%);
    color:#ffffff;
}

.manfaat .section-title h2{
    color:#ffffff;
}

.manfaat .section-title p{
    color:rgba(255,255,255,.76);
}

.manfaat .section-title > span{
    background:rgba(255,255,255,.12);
    color:var(--secondary);
}

.manfaat-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px;
}

.manfaat-card{
    min-height:285px;
    padding:30px 24px;
    border-radius:var(--radius);
    background:rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.14);
    backdrop-filter:blur(9px);
    text-align:center;
    transition:transform var(--transition),background var(--transition);
}

.manfaat-card:hover{
    transform:translateY(-7px);
    background:rgba(255,255,255,.14);
}

.manfaat-icon{
    width:70px;
    height:70px;
    margin:0 auto 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,213,79,.14);
    color:var(--secondary);
    font-size:30px;
    border:1px solid rgba(255,213,79,.28);
}

.manfaat-card h3{
    margin-bottom:12px;
    color:#ffffff;
    font-size:20px;
    line-height:1.35;
}

.manfaat-card p{
    color:rgba(255,255,255,.75);
    font-size:14px;
}

.section-note{
    max-width:900px;
    margin:28px auto 0;
    padding:15px 20px;
    border-radius:14px;
    background:rgba(255,213,79,.12);
    border:1px solid rgba(255,213,79,.22);
    color:rgba(255,255,255,.82);
    text-align:center;
    font-size:13px;
}

/* ======================= CARA PAKAI ====================== */
.cara-pakai{
    background:linear-gradient(180deg,#ffffff,#f3f7f5);
}

.cara-wrapper{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:center;
    gap:62px;
}

.cara-video video{
    width:100%;
    max-height:500px;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    background:#000000;
}

.cara-content{
    display:grid;
    gap:16px;
}

.step{
    display:grid;
    grid-template-columns:56px 1fr;
    gap:18px;
    align-items:flex-start;
    padding:20px;
    border-radius:16px;
    background:#ffffff;
    border:1px solid var(--border);
    box-shadow:var(--shadow-sm);
}

.step-number{
    width:50px;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--primary);
    color:#ffffff;
    font-size:20px;
    font-weight:800;
    box-shadow:0 10px 22px rgba(11,110,79,.2);
}

.step-text h3{
    margin-bottom:5px;
    color:var(--primary-dark);
    font-size:18px;
}

.step-text p{
    color:var(--muted);
    font-size:14px;
}

.cara-warning{
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:26px;
    padding:17px 20px;
    border-radius:14px;
    background:#fff6dc;
    border:1px solid #f0d486;
    color:#755817;
}

.cara-warning i{
    color:#d29b14;
    font-size:23px;
}

/* ======================== TESTIMONI ====================== */
.testimoni{
    background:#eef5f1;
}

.testimoni-slider{
    padding:8px 6px 48px;
}

.testimoni-card{
    height:auto;
    padding:30px;
    border-radius:var(--radius);
    background:#ffffff;
    border:1px solid var(--border);
    box-shadow:var(--shadow-sm);
}

.testimoni-stars{
    margin-bottom:16px;
    color:#f0b400;
    font-size:20px;
    letter-spacing:3px;
}

.testimoni-card > p{
    margin-bottom:24px;
    color:var(--text);
    font-size:16px;
    font-style:italic;
}

.testimoni-user{
    display:flex;
    align-items:center;
    gap:14px;
}

.testimoni-user img{
    width:56px;
    height:56px;
    border-radius:50%;
    object-fit:cover;
}

.testimoni-user div{
    display:flex;
    flex-direction:column;
}

.testimoni-user strong{
    color:var(--primary-dark);
    font-size:14px;
}

.testimoni-user span{
    color:var(--muted);
    font-size:13px;
}

.swiper-pagination-bullet{
    width:10px;
    height:10px;
    background:#9ab8aa;
    opacity:1;
}

.swiper-pagination-bullet-active{
    width:28px;
    border-radius:999px;
    background:var(--primary);
}

/* ============================ FAQ ======================== */
.faq{
    background:#ffffff;
}

.faq-list{
    width:min(900px,100%);
    margin-inline:auto;
    display:grid;
    gap:14px;
}

.faq-item{
    overflow:hidden;
    border-radius:16px;
    background:#ffffff;
    border:1px solid var(--border);
    box-shadow:var(--shadow-sm);
}

.faq-question{
    width:100%;
    min-height:68px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:18px 22px;
    background:#ffffff;
    color:var(--primary-dark);
    text-align:left;
    font-weight:700;
}

.faq-question i{
    flex:0 0 auto;
    transition:transform var(--transition);
}

.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
}

.faq-answer p{
    padding:0 22px 22px;
    color:var(--muted);
}

.faq-item.active .faq-question{
    color:var(--primary);
}

.faq-item.active .faq-question i{
    transform:rotate(180deg);
}

/* ============================= CTA ======================= */
.cta-section{
    min-height:78vh;
    background:
        linear-gradient(135deg,rgba(6,47,36,.97),rgba(94,17,16,.94)),
        radial-gradient(circle at 80% 20%,rgba(255,213,79,.22),transparent 34%);
}

.cta-box{
    width:min(880px,100%);
    margin-inline:auto;
    padding:62px 50px;
    border-radius:var(--radius-lg);
    background:rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:var(--shadow-lg);
    backdrop-filter:blur(14px);
    text-align:center;
    color:#ffffff;
}

.cta-box > span{
    display:inline-block;
    margin-bottom:12px;
    color:var(--secondary);
    font-weight:700;
}

.cta-box h2{
    margin-bottom:14px;
    font-size:clamp(2rem,4vw,3.2rem);
    line-height:1.16;
}

.cta-box p{
    max-width:650px;
    margin:0 auto 28px;
    color:rgba(255,255,255,.78);
}

/* ============================ FOOTER ===================== */
.footer{
    background:#041f17;
    color:#ffffff;
    padding:50px 0 28px;
}

.footer-container{
    display:grid;
    gap:34px;
}

.footer-brand{
    display:flex;
    align-items:center;
    gap:18px;
}

.footer-logo{
    width:82px;
    height:82px;
    object-fit:contain;
}

.footer-brand h3{
    margin-bottom:4px;
    color:var(--secondary);
    font-size:22px;
}

.footer-brand p{
    color:rgba(255,255,255,.68);
}

.footer-links{
    display:flex;
    align-items:center;
    gap:24px;
    flex-wrap:wrap;
}

.footer-links a{
    color:rgba(255,255,255,.76);
    font-size:14px;
    transition:color var(--transition);
}

.footer-links a:hover{
    color:var(--secondary);
}

.footer-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,.10);
    color:rgba(255,255,255,.58);
    font-size:13px;
}

/* ========================== HELPERS ======================= */
::selection{
    background:var(--secondary);
    color:var(--primary-deep);
}

/* ================= PREMIUM FULLPAGE HERO V3 ================= */

/*
   Desktop:
   Setiap section utama menempati tinggi layar yang tersedia
   setelah header. Ukuran elemen tetap besar; yang dirapikan
   adalah padding, gap, dan distribusi ruang.
*/
.section-page{
    min-height:calc(100svh - var(--header-height));
    padding:clamp(34px,4.4vh,58px) 0;
    display:flex;
    align-items:center;
    scroll-margin-top:0;
}

.section-page > .container{
    width:min(100% - 40px,var(--container));
}

.section-title{
    margin-bottom:clamp(26px,3.5vh,42px);
}

.section-title > span{
    margin-bottom:10px;
}

.section-title h2{
    margin-bottom:9px;
    font-size:clamp(2rem,3.2vw,2.9rem);
}

.section-title p{
    font-size:clamp(14px,1.1vw,16px);
}

/* ---------------- HERO PREMIUM ---------------- */




























/* Area visual kanan */








.ring-1{
    width:390px;
    height:390px;
    border-width:2px;
}

.ring-2{
    width:475px;
    height:475px;
    border-width:2px;
}

.ring-3{
    width:555px;
    height:555px;
    border-color:rgba(255,198,40,.22);
}





/* Bintang cahaya statis/berkedip */

















/* Podium dibuat CSS, bukan menyatu pada gambar */








/* Feature bar lebih mirip referensi */














/* ---------------- SECTION FULL PAGE ---------------- */
.keunggulan-grid{
    gap:clamp(15px,1.5vw,22px);
}

.keunggulan-card{
    min-height:clamp(250px,31vh,315px);
    padding:clamp(24px,2.2vw,32px) 20px;
}

.keunggulan-card img,
.keunggulan-icon{
    width:clamp(64px,5vw,78px);
    height:clamp(64px,5vw,78px);
    margin-bottom:17px;
}

.produk-wrapper{
    gap:clamp(50px,6vw,82px);
}

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

.produk-content h3{
    font-size:clamp(2.2rem,3.5vw,3.15rem);
}

.manfaat-grid{
    gap:clamp(16px,1.6vw,22px);
}

.manfaat-card{
    min-height:clamp(250px,31vh,310px);
    padding:clamp(25px,2.3vw,33px) 22px;
}

.cara-wrapper{
    gap:clamp(45px,5vw,68px);
}

.cara-video video{
    max-height:440px;
}

.step{
    padding:17px 19px;
}

.testimoni-card{
    min-height:290px;
    padding:30px;
}

/* FAQ: rapatkan deskripsi dengan pertanyaan pertama */
.faq .section-title{
    margin-bottom:20px;
}

.faq-list{
    gap:11px;
}

.faq-question{
    min-height:60px;
    padding:15px 22px;
}

/* Menjaga section tidak terpotong pada layar yang sangat pendek */
@media (min-width:994px) and (max-height:760px){

    .section-page{
        min-height:calc(100svh - var(--header-height));
        padding:24px 0;
    }

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

    .section-title > span{
        margin-bottom:6px;
        padding:6px 14px;
    }

    .section-title h2{
        margin-bottom:4px;
        font-size:clamp(1.8rem,2.6vw,2.3rem);
    }

    .keunggulan-card,
    .manfaat-card{
        min-height:225px;
        padding-top:19px;
        padding-bottom:19px;
    }

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

    .cara-video video{
        max-height:330px;
    }

    .step{
        padding:11px 15px;
    }

    .faq-list{
        gap:7px;
    }

    .faq-question{
        min-height:50px;
        padding:11px 20px;
    }

}

/* ================= HERO VIEWPORT FIX V3.1 ================= */
/*
   Hero menempati seluruh tinggi area browser.
   Header bersifat fixed dan menindih bagian atas hero,
   sehingga tinggi hero tidak boleh dikurangi tinggi header.
*/






/* Pada layar desktop pendek, tetap satu layar tanpa menyisakan area putih. */


/* ================= TESTIMONI ONE-SCREEN FIX V3.2 ================= */

/*
   Tetap satu baris di desktop, bahkan bila Swiper/CDN belum aktif.
   Swiper yang aktif tetap dapat mengambil alih transform dan navigasi.
*/
.testimoni{
    min-height:calc(100svh - var(--header-height));
    overflow:hidden;
}

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

.testimoni .section-title{
    margin-bottom:clamp(22px,3vh,34px);
}

.testimoni-slider{
    width:100%;
    overflow:hidden;
    padding:4px 6px 42px;
}

.testimoni-slider .swiper-wrapper{
    display:flex;
    align-items:stretch;
    gap:20px;
}

.testimoni-slider .swiper-slide{
    flex:0 0 calc((100% - 40px) / 3);
    width:calc((100% - 40px) / 3);
    min-width:0;
    height:auto;
}

.testimoni-card{
    min-height:270px;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:26px;
}

.testimoni-card > p{
    flex:1;
    margin-bottom:18px;
    font-size:15px;
    line-height:1.7;
}

.testimoni-user img{
    width:50px;
    height:50px;
}

/* Laptop pendek: tetap muat satu layar tanpa mengecilkan berlebihan. */
@media (min-width:994px) and (max-height:820px){

    .testimoni{
        padding-top:24px;
        padding-bottom:20px;
    }

    .testimoni .section-title{
        margin-bottom:16px;
    }

    .testimoni-card{
        min-height:230px;
        padding:21px;
    }

    .testimoni-card > p{
        font-size:14px;
        line-height:1.55;
    }

}

/* ================= CARA PAKAI ONE-SCREEN FIX V3.3 ================= */

/*
   Desktop: judul, video, empat langkah, dan catatan bawah
   disusun di dalam tinggi layar yang tersedia di bawah header.
*/
@media (min-width:994px){


    .cara-pakai{
        height:calc(100svh - var(--header-height));
        min-height:calc(100svh - var(--header-height));
        padding:18px 0 14px;
        overflow:hidden;
        align-items:stretch;
    }

    .cara-pakai > .container{
        height:100%;
        display:grid;
        grid-template-rows:auto minmax(0,1fr) auto;
        align-items:stretch;
    }

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

    .cara-pakai .section-title > span{
        margin-bottom:6px;
        padding:6px 15px;
    }

    .cara-pakai .section-title h2{
        margin-bottom:5px;
        font-size:clamp(2rem,3vw,2.75rem);
    }

    .cara-pakai .section-title p{
        max-width:900px;
        margin-inline:auto;
        font-size:14px;
        line-height:1.45;
    }

    .cara-wrapper{
        min-height:0;
        height:100%;
        grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr);
        align-items:center;
        gap:clamp(34px,4vw,58px);
    }

    .cara-video{
        min-height:0;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .cara-video video{
        width:100%;
        height:min(48vh,390px);
        max-height:none;
        object-fit:cover;
        border-radius:18px;
    }

    .cara-content{
        min-height:0;
        display:grid;
        grid-template-rows:repeat(4,minmax(0,1fr));
        gap:10px;
    }

    .step{
        min-height:0;
        grid-template-columns:48px 1fr;
        gap:14px;
        align-items:center;
        padding:12px 17px;
        border-radius:15px;
    }

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

    .step-text h3{
        margin-bottom:3px;
        font-size:17px;
        line-height:1.25;
    }

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

    .cara-warning{
        margin-top:12px;
        padding:11px 17px;
        border-radius:13px;
        font-size:13px;
        line-height:1.45;
    }

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

}

/* Laptop dengan tinggi layar terbatas */
@media (min-width:994px) and (max-height:760px){


    .cara-pakai{
        padding-top:10px;
        padding-bottom:9px;
    }

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

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

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

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

    .cara-video video{
        height:min(45vh,315px);
    }

    .cara-content{
        gap:7px;
    }

    .step{
        grid-template-columns:40px 1fr;
        gap:11px;
        padding:8px 13px;
    }

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

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

    .step-text p{
        font-size:12px;
        line-height:1.35;
    }

    .cara-warning{
        margin-top:7px;
        padding:8px 14px;
        font-size:12px;
    }

}

/* ================= CARA PAKAI SPACING FIX V3.4 ================= */

/*
   Merapatkan:
   1) judul dengan isi utama,
   2) isi utama dengan catatan kuning.
   Ukuran video dan kartu tetap dipertahankan.
*/
@media (min-width:994px){


    .cara-pakai > .container{
        grid-template-rows:auto auto auto;
        align-content:start;
        row-gap:18px;
    }

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

    .cara-wrapper{
        height:auto;
        min-height:0;
        align-self:start;
        margin-top:0;
    }

    .cara-warning{
        margin-top:0;
        align-self:start;
    }

}

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


    .cara-pakai > .container{
        row-gap:10px;
    }

}

/* ================= CARA PAKAI BALANCED LAYOUT V3.5 ================= */

/*
   Menyeimbangkan ruang kosong atas dan bawah.
   Seluruh isi ditempatkan di tengah area layar,
   dengan jarak antarbagian tetap rapat dan rapi.
*/
@media (min-width:994px){


    .cara-pakai > .container{
        height:100%;
        display:grid;
        grid-template-rows:auto auto auto;
        align-content:center;
        row-gap:18px;
    }

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

    .cara-wrapper{
        height:auto;
        min-height:0;
        margin:0;
        align-self:center;
    }

    .cara-warning{
        margin-top:0;
        align-self:center;
    }

}

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


    .cara-pakai > .container{
        row-gap:10px;
    }

}

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

/*
   Menyesuaikan halaman Cara Pemakaian dengan referensi visual:
   - Judul dan subjudul lebih besar
   - Video lebih sempit tetapi lebih tinggi
   - Kartu langkah lebih besar dan tegas
   - Catatan bawah lebih besar dan rata tengah
   - Tetap muat satu layar pada desktop
*/
@media (min-width:994px){


    .cara-pakai{
        height:calc(100svh - var(--header-height));
        min-height:calc(100svh - var(--header-height));
        padding:16px 0 14px;
        overflow:hidden;
    }

    .cara-pakai > .container{
        height:100%;
        display:grid;
        grid-template-rows:auto minmax(0,1fr) auto;
        align-content:center;
        row-gap:16px;
    }

    .cara-pakai .section-title{
        margin-bottom:0;
        max-width:980px;
    }

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

    .cara-pakai .section-title h2{
        margin-bottom:8px;
        font-size:clamp(2.6rem,3.8vw,4rem);
        line-height:1.02;
        letter-spacing:-.035em;
    }

    .cara-pakai .section-title p{
        max-width:980px;
        margin-inline:auto;
        font-size:clamp(15px,1.15vw,18px);
        line-height:1.5;
    }

    .cara-wrapper{
        min-height:0;
        height:100%;
        grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
        align-items:center;
        gap:clamp(34px,4vw,58px);
    }

    .cara-video{
        min-height:0;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .cara-video video{
        width:92%;
        height:min(50vh,430px);
        max-height:none;
        object-fit:cover;
        border-radius:22px;
        box-shadow:0 22px 50px rgba(5,47,36,.18);
    }

    .cara-content{
        min-height:0;
        display:grid;
        grid-template-rows:repeat(4,minmax(0,1fr));
        gap:12px;
    }

    .step{
        min-height:0;
        grid-template-columns:60px 1fr;
        gap:18px;
        align-items:center;
        padding:17px 22px;
        border-radius:18px;
        box-shadow:0 12px 30px rgba(5,47,36,.08);
    }

    .step-number{
        width:56px;
        height:56px;
        font-size:22px;
        box-shadow:0 12px 25px rgba(11,110,79,.24);
    }

    .step-text h3{
        margin-bottom:5px;
        font-size:clamp(1.15rem,1.45vw,1.45rem);
        line-height:1.25;
    }

    .step-text p{
        font-size:clamp(14px,1vw,16px);
        line-height:1.55;
    }

    .cara-warning{
        min-height:76px;
        margin-top:0;
        padding:16px 24px;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:16px;
        border-radius:18px;
        text-align:center;
        font-size:clamp(16px,1.25vw,20px);
        font-weight:600;
        line-height:1.45;
    }

    .cara-warning i{
        flex:0 0 auto;
        font-size:28px;
    }

}

/* Desktop/laptop dengan tinggi layar terbatas */
@media (min-width:994px) and (max-height:820px){


    .cara-pakai{
        padding:10px 0 9px;
    }

    .cara-pakai > .container{
        row-gap:10px;
    }

    .cara-pakai .section-title h2{
        font-size:clamp(2.15rem,3.2vw,3rem);
        margin-bottom:4px;
    }

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

    .cara-video video{
        width:90%;
        height:min(45vh,340px);
    }

    .cara-content{
        gap:8px;
    }

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

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

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

    .step-text p{
        font-size:12px;
        line-height:1.4;
    }

    .cara-warning{
        min-height:54px;
        padding:10px 18px;
        font-size:14px;
    }

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

}


/* ================= NAVIGATION OFFSET FIX V3.7 ================= */
/*
   Offset menu diatur hanya oleh JavaScript.
   Ini mencegah section berhenti terlalu rendah dan memperlihatkan
   sebagian section sebelumnya di bawah header.
*/
html{
    scroll-padding-top:0 !important;
}

section[id]{
    scroll-margin-top:0 !important;
}

/* ================= PRODUK & CARA PAKAI FINAL ALIGNMENT V3.8 ================= */

@media (min-width:994px){


    /* ---------- PRODUK: seluruh isi masuk satu layar ---------- */
    .produk{
        height:calc(100svh - var(--header-height));
        min-height:calc(100svh - var(--header-height));
        padding:18px 0 14px;
        overflow:hidden;
        align-items:stretch;
    }

    .produk > .container{
        height:100%;
        display:grid;
        grid-template-rows:auto minmax(0,1fr);
        align-content:center;
    }

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

    .produk .section-title > span{
        margin-bottom:6px;
        padding:7px 16px;
    }

    .produk .section-title h2{
        margin-bottom:5px;
        font-size:clamp(2.25rem,3.25vw,3.15rem);
    }

    .produk .section-title p{
        font-size:15px;
        line-height:1.45;
    }

    .produk-wrapper{
        min-height:0;
        height:100%;
        grid-template-columns:minmax(330px,.92fr) minmax(0,1.08fr);
        align-items:center;
        gap:clamp(48px,5vw,72px);
    }

    .produk-image img{
        width:min(100%,430px);
        max-height:54vh;
        object-fit:contain;
    }

    .produk-content h3{
        margin:11px 0 9px;
        font-size:clamp(2.15rem,3.2vw,3rem);
    }

    .produk-content > p{
        margin-bottom:15px;
        font-size:15px;
        line-height:1.6;
    }

    .produk-list{
        gap:8px;
        margin-bottom:18px;
    }

    .produk-list li{
        font-size:15px;
        line-height:1.45;
    }

    .produk-actions .btn-primary,
    .produk-actions .btn-secondary{
        min-height:52px;
        padding:12px 27px;
    }

    /* ---------- CARA PAKAI: rapatkan header dengan body ---------- */
    .cara-pakai{
        height:calc(100svh - var(--header-height));
        min-height:calc(100svh - var(--header-height));
        padding:14px 0 12px;
        overflow:hidden;
        align-items:stretch;
    }

    .cara-pakai > .container{
        height:100%;
        display:grid;
        grid-template-rows:auto auto auto;
        align-content:center;
        row-gap:16px;
    }

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

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

    .cara-wrapper{
        height:auto;
        min-height:0;
        margin:0;
        align-self:center;
    }

    .cara-warning{
        margin-top:0;
        align-self:center;
    }

}

/* Laptop dengan tinggi layar terbatas */
@media (min-width:994px) and (max-height:820px){


    .produk{
        padding:10px 0 8px;
    }

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

    .produk .section-title > span{
        display:none;
    }

    .produk .section-title h2{
        font-size:2.15rem;
    }

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

    .produk-image img{
        width:min(100%,360px);
        max-height:47vh;
    }

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

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

    .produk-list{
        gap:5px;
        margin-bottom:12px;
    }

    .cara-pakai > .container{
        row-gap:10px;
    }

}

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

@media (min-width:994px){


    .produk{
        padding:12px 0 10px;
    }

    .produk > .container{
        grid-template-rows:auto auto;
        align-content:center;
        row-gap:18px;
    }

    .produk .section-title{
        margin-bottom:0;
    }

    .produk .section-title > span{
        margin-bottom:5px;
        padding:6px 15px;
    }

    .produk .section-title h2{
        margin-bottom:4px;
        font-size:clamp(2.45rem,3.5vw,3.35rem);
    }

    .produk .section-title p{
        font-size:16px;
        line-height:1.4;
    }

    .produk-wrapper{
        height:auto;
        grid-template-columns:minmax(390px,.95fr) minmax(0,1.05fr);
        align-items:center;
        gap:clamp(42px,4.8vw,68px);
        margin-top:0;
    }

    .produk-image{
        align-self:center;
    }

    .produk-image img{
        width:min(100%,500px);
        max-height:58vh;
    }

    .produk-content{
        align-self:center;
        max-width:650px;
    }

    .produk-badge{
        padding:8px 16px;
        font-size:14px;
    }

    .produk-content h3{
        margin:12px 0 10px;
        font-size:clamp(2.35rem,3.4vw,3.15rem);
        line-height:1.08;
    }

    .produk-content > p{
        margin-bottom:16px;
        font-size:16px;
        line-height:1.55;
    }

    .produk-list{
        gap:8px;
        margin-bottom:18px;
    }

    .produk-list li{
        font-size:16px;
        line-height:1.4;
    }

    .produk-actions{
        margin-top:4px;
    }

    .produk-actions .btn-primary{
        min-height:56px;
        padding:14px 30px;
        font-size:17px;
    }

}

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


    .produk{
        padding:8px 0 7px;
    }

    .produk > .container{
        row-gap:10px;
    }

    .produk .section-title h2{
        font-size:2.2rem;
    }

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

    .produk-wrapper{
        grid-template-columns:minmax(330px,.92fr) minmax(0,1.08fr);
        gap:38px;
    }

    .produk-image img{
        width:min(100%,410px);
        max-height:49vh;
    }

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

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

    .produk-actions .btn-primary{
        min-height:50px;
        padding:12px 26px;
        font-size:15px;
    }

}

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

@media (min-width:994px){


    /* ---------- PRODUK: lebih hidup, rapat, dan seimbang ---------- */
    .produk{
        position:relative;
        isolation:isolate;
        overflow:hidden;
        background:
            radial-gradient(circle at 24% 58%,rgba(24,137,99,.10),transparent 27%),
            radial-gradient(circle at 75% 52%,rgba(255,211,79,.09),transparent 25%),
            linear-gradient(180deg,#ffffff 0%,#f8fcfa 100%);
    }

    .produk::before,
    .produk::after{
        content:"";
        position:absolute;
        z-index:-1;
        border-radius:50%;
        pointer-events:none;
        filter:blur(8px);
    }

    .produk::before{
        width:360px;
        height:360px;
        left:7%;
        top:48%;
        transform:translateY(-50%);
        background:radial-gradient(circle,rgba(18,141,98,.15),transparent 68%);
    }

    .produk::after{
        width:300px;
        height:300px;
        right:7%;
        top:50%;
        transform:translateY(-50%);
        background:radial-gradient(circle,rgba(255,205,62,.12),transparent 70%);
    }

    .produk > .container{
        row-gap:14px;
    }

    .produk .section-title{
        margin-bottom:0;
    }

    .produk-wrapper{
        width:min(1120px,100%);
        margin-inline:auto;
        grid-template-columns:minmax(390px,.94fr) minmax(0,1.06fr);
        gap:clamp(38px,4.2vw,60px);
        padding:24px 28px;
        border:1px solid rgba(9,98,70,.10);
        border-radius:28px;
        background:rgba(255,255,255,.72);
        box-shadow:
            0 26px 60px rgba(5,66,47,.10),
            inset 0 1px 0 rgba(255,255,255,.92);
        backdrop-filter:blur(6px);
    }

    .produk-image{
        position:relative;
        min-height:470px;
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .produk-image::before{
        content:"";
        position:absolute;
        width:84%;
        aspect-ratio:1;
        border-radius:50%;
        background:
            radial-gradient(circle,
                rgba(33,162,112,.22) 0%,
                rgba(33,162,112,.08) 45%,
                transparent 70%);
        filter:blur(8px);
    }

    .produk-image::after{
        content:"";
        position:absolute;
        left:50%;
        bottom:8%;
        width:74%;
        height:42px;
        transform:translateX(-50%);
        border-radius:50%;
        background:rgba(4,59,42,.16);
        filter:blur(16px);
    }

    .produk-image img{
        position:relative;
        z-index:2;
        width:min(100%,500px);
        max-height:58vh;
        object-fit:contain;
        border-radius:20px;
        filter:
            drop-shadow(0 24px 30px rgba(0,0,0,.20))
            drop-shadow(0 0 22px rgba(22,135,94,.10));
        transition:transform .35s ease,filter .35s ease;
    }

    .produk-image:hover img{
        transform:translateY(-5px) scale(1.015);
        filter:
            drop-shadow(0 30px 34px rgba(0,0,0,.24))
            drop-shadow(0 0 26px rgba(22,135,94,.16));
    }

    .produk-content{
        padding:10px 4px;
    }

    .produk-badge{
        padding:9px 17px;
        border:1px solid rgba(10,118,83,.11);
        background:linear-gradient(135deg,#edf8f3,#e3f3ec);
        box-shadow:0 9px 22px rgba(7,97,69,.08);
    }

    .produk-content h3{
        margin:13px 0 10px;
        font-size:clamp(2.45rem,3.5vw,3.25rem);
    }

    .produk-content > p{
        max-width:650px;
        margin-bottom:17px;
        color:#53645f;
        font-size:16px;
        line-height:1.65;
    }

    .produk-list{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px 12px;
        margin-bottom:20px;
    }

    .produk-list li{
        min-height:48px;
        display:flex;
        align-items:center;
        gap:10px;
        padding:10px 12px;
        border:1px solid rgba(8,107,76,.09);
        border-radius:13px;
        background:rgba(248,252,250,.92);
        font-size:14px;
        line-height:1.35;
        box-shadow:0 8px 18px rgba(5,65,46,.05);
    }

    .produk-list li i{
        flex:0 0 auto;
        font-size:18px;
        color:#0b8f63;
    }

    .produk-actions{
        justify-content:flex-start;
    }

    .produk-actions .btn-primary{
        min-width:235px;
        box-shadow:
            0 15px 28px rgba(37,211,102,.26),
            0 0 0 1px rgba(255,255,255,.20) inset;
    }

    /* ---------- FOOTER: seluruh isi rata tengah ---------- */
    .footer{
        padding:48px 0 24px;
        background:
            radial-gradient(circle at 50% 0%,rgba(255,213,79,.08),transparent 32%),
            linear-gradient(180deg,#03281e 0%,#021f18 100%);
    }

    .footer-container{
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

    .footer-brand{
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:12px;
        width:100%;
        text-align:center;
    }

    .footer-logo{
        width:84px;
        height:84px;
        object-fit:contain;
    }

    .footer-brand h3{
        margin-bottom:5px;
        font-size:26px;
        color:var(--secondary);
    }

    .footer-brand p{
        max-width:620px;
        margin-inline:auto;
        color:rgba(255,255,255,.74);
        font-size:16px;
    }

    .footer-links{
        width:100%;
        justify-content:center;
        gap:12px 28px;
        margin:28px 0 26px;
        text-align:center;
    }

    .footer-links a{
        position:relative;
        color:rgba(255,255,255,.82);
    }

    .footer-links a::after{
        content:"";
        position:absolute;
        left:50%;
        bottom:-7px;
        width:0;
        height:2px;
        transform:translateX(-50%);
        border-radius:999px;
        background:var(--secondary);
        transition:width .25s ease;
    }

    .footer-links a:hover{
        color:#fff;
    }

    .footer-links a:hover::after{
        width:100%;
    }

    .footer-bottom{
        width:100%;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:7px;
        padding-top:20px;
        text-align:center;
        border-top:1px solid rgba(255,255,255,.10);
    }

    .footer-bottom p{
        margin:0;
        color:rgba(255,255,255,.58);
    }

}

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


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

    .produk-image{
        min-height:370px;
    }

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

    .produk-list{
        gap:7px 9px;
        margin-bottom:13px;
    }

    .produk-list li{
        min-height:40px;
        padding:7px 10px;
        font-size:12px;
    }

}

/* ========================================================= */
/* =============== HOVER SEMUA KARTU KEUNGGULAN ============ */
/* ========================================================= */

.keunggulan-card{
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.keunggulan-card:hover{
    transform:translateY(-10px) !important;

    border-color:rgba(0,128,90,.28);

    box-shadow:
        0 22px 45px rgba(0,70,50,.16);
}

.keunggulan-card img{
    transition:transform .35s ease;
}

.keunggulan-card:hover img{
    transform:scale(1.06);
}

/* =========================================================
   CARA PEMAKAIAN FINAL V4.1
   Enam langkah, dua jeda waktu, dan gambar cara pemakaian.
   ========================================================= */
.cara-pakai{
    background:
        radial-gradient(circle at 22% 50%,rgba(18,130,91,.08),transparent 28%),
        linear-gradient(180deg,#ffffff 0%,#f2f8f5 100%);
}

.cara-wrapper-final{
    display:grid;
    grid-template-columns:minmax(360px,.92fr) minmax(0,1.08fr);
    align-items:center;
    gap:clamp(30px,3.5vw,52px);
}

.cara-media{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
}

.cara-media::before{
    content:"";
    position:absolute;
    width:78%;
    aspect-ratio:1;
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,209,72,.20),rgba(14,115,81,.08) 48%,transparent 72%);
    filter:blur(18px);
}

.cara-media img{
    position:relative;
    z-index:1;
    width:min(100%,520px);
    max-height:58vh;
    object-fit:contain;
    border-radius:24px;
    box-shadow:0 24px 58px rgba(4,57,41,.18);
}

.cara-content-final{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.cara-content-final .step{
    min-height:145px;
    grid-template-columns:48px minmax(0,1fr);
    align-items:flex-start;
    gap:13px;
    padding:15px 16px;
    border-radius:17px;
    transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}

.cara-content-final .step:hover{
    transform:translateY(-4px);
    border-color:rgba(11,110,79,.22);
    box-shadow:0 16px 34px rgba(5,47,36,.11);
}

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

.cara-content-final .step-text h3{
    margin-bottom:4px;
    font-size:16px;
    line-height:1.28;
}

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

.time-badge{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-top:8px;
    padding:6px 10px;
    border-radius:999px;
    background:linear-gradient(135deg,#fff4c8,#ffe498);
    color:#755400;
    font-size:11px;
    line-height:1;
    font-weight:800;
    box-shadow:0 6px 15px rgba(199,148,18,.13);
}

.step-timed{
    border-color:rgba(216,169,30,.30);
    background:linear-gradient(145deg,#ffffff,#fffdf5);
}

.cara-pakai .cara-warning{
    justify-content:center;
    margin-top:16px;
    padding:14px 20px;
    text-align:center;
    border-radius:16px;
    font-size:13px;
    line-height:1.55;
}

.cara-pakai .cara-warning p{
    max-width:1050px;
}

.cara-pakai .cara-warning i{
    flex:0 0 auto;
    color:#a97800;
    font-size:24px;
}

@media (min-width:994px){

    .cara-pakai{
        height:calc(100svh - var(--header-height));
        min-height:calc(100svh - var(--header-height));
        padding:12px 0 10px;
        overflow:hidden;
    }

    .cara-pakai > .container{
        height:100%;
        display:grid;
        grid-template-rows:auto minmax(0,1fr) auto;
        align-content:center;
        row-gap:10px;
    }

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

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

    .cara-pakai .section-title h2{
        margin-bottom:4px;
        font-size:clamp(2.15rem,3.1vw,3rem);
    }

    .cara-pakai .section-title p{
        font-size:13px;
        line-height:1.4;
    }

}

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

    .cara-wrapper-final{
        grid-template-columns:minmax(310px,.88fr) minmax(0,1.12fr);
        gap:28px;
    }

    .cara-media img{
        width:min(100%,410px);
        max-height:49vh;
    }

    .cara-content-final{
        gap:8px;
    }

    .cara-content-final .step{
        min-height:112px;
        grid-template-columns:38px minmax(0,1fr);
        gap:10px;
        padding:9px 11px;
    }

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

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

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

    .time-badge{
        margin-top:5px;
        padding:5px 8px;
        font-size:9.5px;
    }

    .cara-pakai .cara-warning{
        margin-top:7px;
        padding:9px 14px;
        font-size:10.5px;
    }

}


/* =========================================================
   CARA PEMAKAIAN & INTERNAL SECTION ALIGNMENT V4.2
   - Cara pakai lebih rapi: gambar besar + 6 langkah vertikal
   - Semua target anchor aman dari navbar fixed
   ========================================================= */

section[id]{
    scroll-margin-top:0 !important;
}

@media (min-width:994px){


    .cara-pakai{
        height:calc(100svh - var(--header-height));
        min-height:calc(100svh - var(--header-height));
        padding:12px 0 10px;
        overflow:hidden;
    }

    .cara-pakai > .container{
        height:100%;
        display:grid;
        grid-template-rows:auto minmax(0,1fr) auto;
        align-content:center;
        row-gap:12px;
    }

    .cara-pakai .section-title{
        width:min(920px,100%);
        margin-bottom:0;
    }

    .cara-pakai .section-title h2{
        margin-bottom:5px;
        font-size:clamp(2.3rem,3.25vw,3.15rem);
        line-height:1.05;
    }

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

    .cara-wrapper-final{
        width:100%;
        height:100%;
        min-height:0;
        display:grid;
        grid-template-columns:minmax(390px,.92fr) minmax(0,1.08fr);
        align-items:center;
        gap:clamp(30px,3.2vw,48px);
    }

    .cara-media{
        height:min(56vh,520px);
        min-height:390px;
        overflow:hidden;
        border-radius:26px;
        background:#082f24;
        box-shadow:0 26px 60px rgba(4,57,41,.20);
    }

    .cara-media::before{
        display:none;
    }

    .cara-media img{
        width:100%;
        height:100%;
        max-height:none;
        object-fit:cover;
        object-position:center;
        border-radius:26px;
        box-shadow:none;
        transition:transform .45s ease;
    }

    .cara-media:hover img{
        transform:scale(1.025);
    }

    .cara-content-final{
        height:min(56vh,520px);
        min-height:390px;
        display:grid;
        grid-template-columns:1fr;
        grid-template-rows:repeat(6,minmax(0,1fr));
        gap:8px;
    }

    .cara-content-final .step{
        min-height:0;
        display:grid;
        grid-template-columns:46px minmax(0,1fr);
        align-items:center;
        gap:14px;
        padding:10px 16px;
        border-radius:16px;
        background:rgba(255,255,255,.95);
        box-shadow:0 10px 24px rgba(5,47,36,.07);
    }

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

    .cara-content-final .step-text h3{
        margin-bottom:2px;
        font-size:15px;
        line-height:1.22;
    }

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

    .cara-content-final .step-timed{
        grid-template-columns:46px minmax(0,1fr) auto;
        border-color:rgba(216,169,30,.32);
    }

    .cara-content-final .step-timed .time-badge{
        margin:0 0 0 10px;
        white-space:nowrap;
        align-self:center;
    }

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

    .cara-pakai .cara-warning{
        min-height:58px;
        margin-top:0;
        padding:11px 20px;
        font-size:11.5px;
        line-height:1.45;
    }

}

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

    .cara-pakai > .container{
        row-gap:8px;
    }

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

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

    .cara-wrapper-final{
        grid-template-columns:minmax(340px,.9fr) minmax(0,1.1fr);
        gap:26px;
    }

    .cara-media,
    .cara-content-final{
        height:min(53vh,440px);
        min-height:350px;
    }

    .cara-content-final{
        gap:6px;
    }

    .cara-content-final .step{
        grid-template-columns:40px minmax(0,1fr);
        gap:10px;
        padding:7px 12px;
    }

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

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

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

    .cara-content-final .step-timed{
        grid-template-columns:40px minmax(0,1fr) auto;
    }

    .time-badge{
        padding:5px 8px;
        font-size:8.8px;
    }

    .cara-pakai .cara-warning{
        min-height:46px;
        padding:8px 14px;
        font-size:9.5px;
    }

}


/* ================= CARA PAKAI FONT & BACK TO TOP V4.3 ================= */

/* Tombol kembali ke atas memakai tulisan putih agar mudah dipahami. */
#backToTop{
    width:74px;
    height:74px;
    padding:8px;
    text-align:center;
}

#backToTop span{
    display:block;
    color:#ffffff;
    font-size:9px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:.04em;
}

@media (min-width:994px){

    /* Memperbesar tulisan enam langkah tanpa mengubah susunan halaman. */
    .cara-content-final .step{
        grid-template-columns:50px minmax(0,1fr);
        gap:15px;
        padding:10px 17px;
    }

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

    .cara-content-final .step-text h3{
        margin-bottom:3px;
        font-size:17px;
        line-height:1.2;
    }

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

    .cara-content-final .step-timed{
        grid-template-columns:50px minmax(0,1fr) auto;
    }

    .time-badge{
        padding:7px 11px;
        font-size:10.8px;
    }

    .cara-pakai .cara-warning{
        font-size:12.5px;
    }

}

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

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

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

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

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

    .cara-content-final .step-timed{
        grid-template-columns:43px minmax(0,1fr) auto;
    }

    .time-badge{
        padding:5px 8px;
        font-size:9.2px;
    }

    .cara-pakai .cara-warning{
        font-size:10.5px;
    }

}

/* ================= FINAL READABILITY & REFRESH V4.4 ================= */

/* Subtitle pada Manfaat Foredi sudah dihapus dari HTML. */

@media (min-width:994px){

    /* Perbesar isi kartu Cara Pemakaian agar mudah dibaca di desktop. */
    .cara-content-final{
        gap:10px;
    }

    .cara-content-final .step{
        min-height:78px;
        grid-template-columns:54px minmax(0,1fr);
        gap:17px;
        padding:13px 19px;
    }

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

    .cara-content-final .step-text h3{
        margin-bottom:4px;
        font-size:20px;
        line-height:1.22;
    }

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

    .cara-content-final .step-timed{
        grid-template-columns:54px minmax(0,1fr) auto;
    }

    .time-badge{
        padding:8px 13px;
        font-size:12px;
        line-height:1.25;
    }

    .cara-pakai .cara-warning{
        font-size:13.5px;
        line-height:1.45;
    }

}

/* Laptop yang tingginya pendek tetap terbaca tanpa membuat layout berantakan. */
@media (min-width:994px) and (max-height:820px){

    .cara-content-final{
        gap:7px;
    }

    .cara-content-final .step{
        min-height:66px;
        grid-template-columns:47px minmax(0,1fr);
        gap:13px;
        padding:9px 15px;
    }

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

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

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

    .cara-content-final .step-timed{
        grid-template-columns:47px minmax(0,1fr) auto;
    }

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

    .cara-pakai .cara-warning{
        font-size:11.5px;
    }

}

@media (max-width:993px){

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

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

}

/* ================= CARA PAKAI FINAL SPACING & CROP V4.5 ================= */

@media (min-width:994px){

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

    .cara-pakai > .container{
        grid-template-rows:auto auto auto;
        align-content:start;
        row-gap:7px;
    }

    .cara-pakai .section-title{
        width:min(1040px,100%);
        margin:0 auto 2px;
    }

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

    .cara-pakai .section-title p{
        font-size:17px;
        line-height:1.45;
    }

    .cara-wrapper-final{
        height:auto;
        min-height:0;
        grid-template-columns:minmax(350px,.78fr) minmax(0,1.22fr);
        align-items:center;
        gap:28px;
        margin-top:0;
    }

    .cara-media{
        width:100%;
        max-width:620px;
        height:480px;
        min-height:0;
        justify-self:center;
        border-radius:24px;
    }

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

    .cara-content-final{
        height:auto;
        min-height:0;
        display:grid;
        grid-template-rows:repeat(6,auto);
        align-content:center;
        gap:8px;
    }

    .cara-content-final .step,
    .cara-content-final .step-timed{
        min-height:72px;
        grid-template-columns:54px minmax(0,1fr);
        gap:16px;
        padding:11px 18px;
        align-items:center;
    }

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

    .cara-content-final .step-text{
        min-width:0;
    }

    .cara-content-final .step-text h3{
        margin-bottom:3px;
        font-size:20px;
        line-height:1.2;
    }

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

    .cara-content-final .time-badge{
        position:static;
        display:inline-flex;
        width:max-content;
        max-width:100%;
        margin:6px 0 0;
        padding:6px 11px;
        font-size:11.5px;
        line-height:1.2;
        white-space:normal;
    }

    .cara-pakai .cara-warning{
        min-height:54px;
        margin-top:1px;
        padding:10px 18px;
        font-size:13px;
    }

}

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

    .cara-pakai{
        padding:5px 0 6px;
    }

    .cara-pakai > .container{
        row-gap:5px;
    }

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

    .cara-pakai .section-title p{
        font-size:15.5px;
        line-height:1.35;
    }

    .cara-wrapper-final{
        grid-template-columns:minmax(330px,.76fr) minmax(0,1.24fr);
        gap:24px;
    }

    .cara-media{
        max-width:590px;
        height:430px;
    }

    .cara-content-final{
        gap:6px;
    }

    .cara-content-final .step,
    .cara-content-final .step-timed{
        min-height:62px;
        grid-template-columns:48px minmax(0,1fr);
        gap:13px;
        padding:8px 14px;
    }

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

    .cara-content-final .step-text h3{
        font-size:18.5px;
        line-height:1.18;
    }

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

    .cara-content-final .time-badge{
        margin-top:4px;
        padding:5px 9px;
        font-size:10.5px;
    }

    .cara-pakai .cara-warning{
        min-height:46px;
        padding:7px 14px;
        font-size:11.5px;
    }

}

@media (max-width:993px){

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

    .cara-media{
        width:min(100%,620px);
        aspect-ratio:1.22/1;
        height:auto;
        margin-inline:auto;
        overflow:hidden;
    }

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

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

}

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

@media (min-width:994px){


    .cara-pakai{
        height:calc(100svh - var(--header-height));
        min-height:calc(100svh - var(--header-height));
        padding:8px 0 8px;
        overflow:hidden;
        align-items:stretch;
    }

    .cara-pakai > .container{
        height:100%;
        display:grid;
        grid-template-rows:auto minmax(0,1fr) auto;
        align-content:center;
        row-gap:10px;
    }

    .cara-pakai .section-title{
        width:100%;
        margin:0;
    }

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

    .cara-pakai .section-title h2{
        margin:0;
        font-size:clamp(2.7rem,3.7vw,3.7rem);
        line-height:1.08;
        letter-spacing:-.035em;
    }

    .cara-wrapper-final{
        width:100%;
        min-height:0;
        display:grid;
        grid-template-columns:minmax(420px,.96fr) minmax(0,1.04fr);
        align-items:center;
        gap:34px;
        margin:0;
    }

    .cara-media{
        position:relative;
        width:100%;
        max-width:680px;
        height:520px;
        min-height:0;
        justify-self:center;
        overflow:hidden;
        border:1px solid rgba(11,110,79,.12);
        border-radius:30px;
        background:#052e23;
        box-shadow:
            0 28px 60px rgba(5,47,36,.20),
            0 0 0 1px rgba(255,213,79,.12) inset;
    }

    .cara-media::after{
        content:"";
        position:absolute;
        inset:0;
        pointer-events:none;
        border-radius:inherit;
        background:
            linear-gradient(135deg,rgba(255,255,255,.08),transparent 28%),
            radial-gradient(circle at 50% 15%,rgba(255,213,79,.10),transparent 35%);
    }

    .cara-media img{
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center 48%;
        border-radius:inherit;
        transform:scale(1.03);
        transition:transform .55s ease,filter .55s ease;
    }

    .cara-media:hover img{
        transform:scale(1.065);
        filter:saturate(1.06) contrast(1.02);
    }

    .cara-content-final{
        min-height:0;
        display:grid;
        grid-template-rows:repeat(6,minmax(0,1fr));
        align-content:stretch;
        gap:10px;
    }

    .cara-content-final .step,
    .cara-content-final .step-timed{
        min-height:0;
        display:grid;
        grid-template-columns:66px minmax(0,1fr);
        align-items:center;
        gap:18px;
        padding:14px 20px;
        border:1px solid rgba(8,107,76,.14);
        border-radius:20px;
        background:
            linear-gradient(135deg,rgba(255,255,255,.98),rgba(247,252,249,.96));
        box-shadow:
            0 12px 26px rgba(5,65,46,.08),
            inset 0 1px 0 rgba(255,255,255,.95);
        transition:
            transform .3s ease,
            border-color .3s ease,
            box-shadow .3s ease;
    }

    .cara-content-final .step:hover{
        transform:translateX(-5px);
        border-color:rgba(11,110,79,.30);
        box-shadow:0 17px 34px rgba(5,65,46,.13);
    }

    .cara-content-final .step-timed{
        border-color:rgba(216,169,30,.42);
        background:
            linear-gradient(135deg,#fffdf7 0%,#fff9ea 100%);
    }

    .cara-content-final .step-number{
        width:62px;
        height:62px;
        display:flex;
        align-items:center;
        justify-content:center;
        border:2px solid rgba(255,255,255,.72);
        border-radius:50%;
        background:
            radial-gradient(circle at 30% 25%,#14956d,#087a58 54%,#05533d);
        color:#fff;
        font-size:22px;
        font-weight:800;
        box-shadow:
            0 11px 22px rgba(5,91,65,.24),
            inset 0 1px 0 rgba(255,255,255,.24);
    }

    .cara-content-final .step-text{
        min-width:0;
        align-self:center;
    }

    .cara-content-final .step-text h3{
        margin:0 0 4px;
        color:#034f3a;
        font-size:clamp(1.25rem,1.45vw,1.55rem);
        line-height:1.18;
        font-weight:800;
        letter-spacing:-.015em;
    }

    .cara-content-final .step-text p{
        margin:0;
        color:#52645e;
        font-size:clamp(.96rem,1.06vw,1.08rem);
        line-height:1.45;
    }

    .cara-content-final .time-badge{
        position:static;
        width:max-content;
        max-width:100%;
        display:inline-flex;
        align-items:center;
        gap:9px;
        margin:8px 0 0;
        padding:7px 12px;
        border:1px solid rgba(216,169,30,.35);
        border-radius:999px;
        background:linear-gradient(135deg,#fff3bd,#ffe486);
        color:#6f4d00;
        box-shadow:
            0 8px 18px rgba(216,169,30,.20),
            inset 0 1px 0 rgba(255,255,255,.78);
        white-space:normal;
    }

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

    .cara-content-final .time-badge > span{
        display:flex;
        align-items:baseline;
        gap:7px;
    }

    .cara-content-final .time-badge small{
        font-size:10px;
        line-height:1;
        font-weight:700;
        text-transform:uppercase;
        letter-spacing:.06em;
    }

    .cara-content-final .time-badge strong{
        font-size:12px;
        line-height:1;
        font-weight:800;
    }

    .cara-warning-final{
        min-height:68px;
        display:grid;
        grid-template-columns:54px minmax(0,1fr);
        align-items:center;
        gap:16px;
        margin:0;
        padding:10px 18px;
        border:1px solid rgba(216,169,30,.44);
        border-radius:20px;
        background:
            linear-gradient(135deg,#fff8df,#fff2c1);
        color:#684a06;
        box-shadow:0 12px 28px rgba(163,117,10,.11);
        text-align:left;
    }

    .cara-warning-final .warning-icon{
        width:50px;
        height:50px;
        display:flex;
        align-items:center;
        justify-content:center;
        border-radius:16px;
        background:linear-gradient(135deg,#ffd75a,#e6ad1f);
        color:#563900;
        font-size:24px;
        box-shadow:0 9px 20px rgba(187,132,7,.22);
    }

    .cara-warning-final .warning-copy{
        min-width:0;
    }

    .cara-warning-final .warning-copy strong{
        display:block;
        margin-bottom:2px;
        font-size:13px;
        line-height:1.1;
        letter-spacing:.08em;
    }

    .cara-warning-final .warning-copy p{
        margin:0;
        font-size:13px;
        line-height:1.4;
        font-weight:600;
    }

}

/* Laptop dengan tinggi pendek: tetap satu layar tanpa mengecilkan teks berlebihan */
@media (min-width:994px) and (max-height:820px){


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

    .cara-pakai > .container{
        row-gap:6px;
    }

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

    .cara-wrapper-final{
        grid-template-columns:minmax(370px,.92fr) minmax(0,1.08fr);
        gap:26px;
    }

    .cara-media{
        max-width:610px;
        height:460px;
    }

    .cara-content-final{
        gap:7px;
    }

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

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

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

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

    .cara-content-final .time-badge{
        margin-top:4px;
        padding:5px 10px;
    }

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

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

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

    .cara-warning-final{
        min-height:52px;
        grid-template-columns:42px minmax(0,1fr);
        gap:12px;
        padding:7px 13px;
        border-radius:16px;
    }

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

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

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

}

/* =========================================================
   PREMIUM GREEN-GOLD + CARA PAKAI CLEAN V4.7
   ========================================================= */

/* ==================== KEUNGGULAN PREMIUM ==================== */
.keunggulan{
    background:
        radial-gradient(circle at 50% 15%,rgba(255,213,79,.08),transparent 28%),
        linear-gradient(180deg,#0b3d2e 0%,#082f24 100%) !important;
    color:#fff;
}

.keunggulan .section-title > span{
    background:rgba(255,213,79,.13);
    color:#ffd54f;
    border:1px solid rgba(255,213,79,.28);
}

.keunggulan .section-title h2,
.keunggulan .section-title p{
    color:#fff;
}

.keunggulan .section-title p{
    color:rgba(255,255,255,.78);
}

.keunggulan-card{
    background:
        linear-gradient(180deg,rgba(19,74,57,.96),rgba(10,54,41,.98)) !important;
    border:1.5px solid rgba(255,213,79,.48) !important;
    box-shadow:
        0 18px 38px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.keunggulan-card:hover{
    transform:translateY(-9px);
    border-color:#ffd54f !important;
    box-shadow:
        0 24px 48px rgba(0,0,0,.28),
        0 0 24px rgba(255,213,79,.14) !important;
}

.keunggulan-card h3{
    color:#fff !important;
}

.keunggulan-card p{
    color:rgba(255,255,255,.78) !important;
}

.keunggulan-card img{
    filter:
        drop-shadow(0 10px 18px rgba(0,0,0,.22))
        drop-shadow(0 0 10px rgba(255,213,79,.10));
}


/* ====================== MANFAAT PREMIUM ===================== */
.manfaat{
    background:
        radial-gradient(circle at 50% 10%,rgba(255,213,79,.08),transparent 26%),
        linear-gradient(180deg,#0a382a 0%,#062b21 100%) !important;
    color:#fff;
}

.manfaat .section-title > span{
    background:rgba(255,213,79,.13);
    color:#ffd54f;
    border:1px solid rgba(255,213,79,.28);
}

.manfaat .section-title h2,
.manfaat .section-title p{
    color:#fff;
}

.manfaat-card{
    background:
        linear-gradient(180deg,rgba(20,78,60,.98),rgba(10,55,42,.98)) !important;
    border:1.5px solid rgba(255,213,79,.52) !important;
    box-shadow:
        0 18px 38px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.manfaat-card:hover{
    transform:translateY(-9px);
    border-color:#ffd54f !important;
    box-shadow:
        0 24px 48px rgba(0,0,0,.28),
        0 0 24px rgba(255,213,79,.14) !important;
}

.manfaat-card h3{
    color:#fff !important;
}

.manfaat-card p{
    color:rgba(255,255,255,.78) !important;
}

.manfaat-icon{
    width:104px !important;
    height:104px !important;
    margin:0 auto 22px !important;
    border-radius:50%;
    border:2px solid rgba(255,213,79,.75);
    background:rgba(4,42,31,.72);
    box-shadow:
        0 12px 24px rgba(0,0,0,.22),
        0 0 22px rgba(255,213,79,.12);
}

.manfaat-icon img{
    width:92px !important;
    height:92px !important;
    object-fit:contain;
    border-radius:50%;
}

.manfaat .section-note{
    color:rgba(255,255,255,.72);
    border-color:rgba(255,213,79,.28);
}


/* ==================== CARA PAKAI CLEAN ===================== */
@media (min-width:994px){


    .cara-pakai{
        height:calc(100svh - var(--header-height));
        min-height:calc(100svh - var(--header-height));
        padding:10px 0 12px !important;
        overflow:hidden;
        align-items:stretch;
    }

    .cara-pakai > .container{
        height:100%;
        display:grid;
        grid-template-rows:auto minmax(0,1fr) auto;
        row-gap:12px;
        align-content:center;
    }

    .cara-pakai .section-title{
        margin:0 !important;
    }

    .cara-pakai .section-title h2{
        margin:0 !important;
        font-size:clamp(2.55rem,3.4vw,3.35rem) !important;
        line-height:1.08;
    }

    .cara-wrapper-final{
        min-height:0;
        display:grid;
        grid-template-columns:minmax(420px,.92fr) minmax(0,1.08fr) !important;
        align-items:center;
        gap:30px !important;
        margin:0;
    }

    .cara-media{
        width:100%;
        height:min(60vh,560px) !important;
        max-width:650px;
        justify-self:center;
        border-radius:26px !important;
        overflow:hidden;
        border:1px solid rgba(11,110,79,.14);
        box-shadow:0 24px 50px rgba(5,47,36,.18);
        background:#0a382a;
    }

    .cara-media img{
        width:100%;
        height:100%;
        object-fit:cover !important;
        object-position:center 50% !important;
        transform:none !important;
    }

    .cara-content-final{
        min-height:0;
        display:grid;
        grid-template-rows:repeat(6,minmax(0,1fr));
        gap:9px !important;
    }

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

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

    .cara-content-final .step-text h3{
        margin:0 0 3px !important;
        font-size:clamp(1.15rem,1.3vw,1.38rem) !important;
        line-height:1.16 !important;
    }

    .cara-content-final .step-text p{
        margin:0 !important;
        font-size:clamp(.90rem,.98vw,1rem) !important;
        line-height:1.36 !important;
    }

    .cara-content-final .time-badge{
        margin-top:6px !important;
        padding:6px 11px !important;
    }

    .cara-warning-final{
        min-height:62px !important;
        grid-template-columns:50px minmax(0,1fr) !important;
        gap:14px !important;
        padding:9px 16px !important;
        margin:0 !important;
        border-radius:18px !important;
    }

    .cara-warning-final .warning-icon{
        width:46px !important;
        height:46px !important;
        border-radius:14px !important;
        font-size:21px !important;
    }

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

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

}

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


    .cara-pakai{
        padding:6px 0 8px !important;
    }

    .cara-pakai > .container{
        row-gap:7px !important;
    }

    .cara-pakai .section-title h2{
        font-size:2.35rem !important;
    }

    .cara-wrapper-final{
        grid-template-columns:minmax(360px,.90fr) minmax(0,1.10fr) !important;
        gap:24px !important;
    }

    .cara-media{
        height:min(54vh,440px) !important;
    }

    .cara-content-final{
        gap:6px !important;
    }

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

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

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

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

    .cara-content-final .time-badge{
        margin-top:3px !important;
        padding:4px 9px !important;
    }

    .cara-warning-final{
        min-height:48px !important;
        grid-template-columns:38px minmax(0,1fr) !important;
        gap:10px !important;
        padding:6px 11px !important;
    }

    .cara-warning-final .warning-icon{
        width:34px !important;
        height:34px !important;
        font-size:16px !important;
    }

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

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

}

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

@media (min-width:994px){


    .cara-pakai{
        height:calc(100svh - var(--header-height));
        min-height:calc(100svh - var(--header-height));
        padding:14px 0 12px !important;
        overflow:hidden;
    }

    .cara-pakai > .container{
        height:100%;
        display:grid;
        grid-template-rows:auto minmax(0,1fr) auto;
        row-gap:14px;
        align-content:center;
    }

    .cara-pakai .section-title{
        width:100%;
        margin:0 !important;
        position:relative;
        z-index:3;
    }

    .cara-pakai .section-title h2{
        margin:0 !important;
        text-align:center;
        font-size:clamp(2.65rem,3.5vw,3.5rem) !important;
        line-height:1.08;
    }

    .cara-wrapper-final{
        min-height:0;
        display:grid;
        grid-template-columns:minmax(430px,.88fr) minmax(0,1.12fr) !important;
        align-items:center;
        gap:30px !important;
        margin:0 !important;
    }

    .cara-media{
        width:100%;
        max-width:670px;
        height:min(58vh,520px) !important;
        align-self:center;
        justify-self:center;
        overflow:hidden;
        border-radius:28px !important;
        border:1px solid rgba(11,110,79,.16);
        background:#082f24;
        box-shadow:
            0 26px 54px rgba(5,47,36,.18),
            0 0 0 1px rgba(255,213,79,.08) inset;
    }

    .cara-media img{
        width:100%;
        height:100%;
        object-fit:cover !important;
        object-position:center 49% !important;
        transform:none !important;
    }

    .cara-content-final{
        min-height:0;
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        grid-template-rows:repeat(3,minmax(0,1fr)) !important;
        gap:12px !important;
        align-content:center;
    }

    .cara-content-final .step,
    .cara-content-final .step-timed{
        min-height:128px !important;
        display:grid !important;
        grid-template-columns:58px minmax(0,1fr) !important;
        align-items:flex-start !important;
        gap:15px !important;
        padding:16px 17px !important;
        border-radius:20px !important;
        overflow:visible !important;
    }

    .cara-content-final .step-number{
        width:54px !important;
        height:54px !important;
        margin-top:1px;
        font-size:19px !important;
    }

    .cara-content-final .step-text{
        min-width:0;
        align-self:flex-start;
    }

    .cara-content-final .step-text h3{
        margin:0 0 5px !important;
        font-size:clamp(1.05rem,1.12vw,1.22rem) !important;
        line-height:1.22 !important;
    }

    .cara-content-final .step-text p{
        margin:0 !important;
        font-size:clamp(.82rem,.86vw,.94rem) !important;
        line-height:1.42 !important;
    }

    .cara-content-final .time-badge{
        position:static !important;
        display:inline-flex !important;
        margin:8px 0 0 !important;
        padding:6px 10px !important;
        transform:none !important;
    }

    .cara-warning-final{
        width:100%;
        min-height:64px !important;
        margin:0 !important;
        padding:9px 18px !important;
        grid-template-columns:48px minmax(0,1fr) !important;
        gap:14px !important;
        border-radius:18px !important;
    }

    .cara-warning-final .warning-icon{
        width:44px !important;
        height:44px !important;
        border-radius:13px !important;
        font-size:20px !important;
    }

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

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

}

/* Laptop pendek */
@media (min-width:994px) and (max-height:820px){


    .cara-pakai{
        padding:8px 0 !important;
    }

    .cara-pakai > .container{
        row-gap:8px !important;
    }

    .cara-pakai .section-title h2{
        font-size:2.4rem !important;
    }

    .cara-wrapper-final{
        grid-template-columns:minmax(360px,.86fr) minmax(0,1.14fr) !important;
        gap:22px !important;
    }

    .cara-media{
        height:min(50vh,410px) !important;
    }

    .cara-content-final{
        gap:8px !important;
    }

    .cara-content-final .step,
    .cara-content-final .step-timed{
        min-height:104px !important;
        grid-template-columns:46px minmax(0,1fr) !important;
        gap:11px !important;
        padding:10px 12px !important;
        border-radius:15px !important;
    }

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

    .cara-content-final .step-text h3{
        margin-bottom:2px !important;
        font-size:14.5px !important;
    }

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

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

    .cara-warning-final{
        min-height:46px !important;
        padding:5px 10px !important;
        grid-template-columns:34px minmax(0,1fr) !important;
        gap:9px !important;
    }

    .cara-warning-final .warning-icon{
        width:31px !important;
        height:31px !important;
        font-size:14px !important;
    }

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

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

}

/* =========================================================
   CARA PEMAKAIAN FINISHING V4.9
   Judul rapat, border emas, warning merah model card
   ========================================================= */

@media (min-width:994px){


    .cara-pakai{
        padding:8px 0 10px !important;
    }

    .cara-pakai > .container{
        grid-template-rows:auto minmax(0,1fr) auto !important;
        row-gap:8px !important;
    }

    .cara-pakai .section-title{
        width:100% !important;
        margin:0 auto !important;
        text-align:center !important;
    }

    .cara-pakai .section-title h2{
        width:100% !important;
        margin:0 auto !important;
        text-align:center !important;
        font-size:clamp(2.65rem,3.4vw,3.45rem) !important;
        line-height:1.05 !important;
    }

    .cara-wrapper-final{
        margin:0 !important;
        align-self:center;
    }

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

    .cara-content-final .step:hover,
    .cara-content-final .step-timed:hover{
        border-color:#e7c15a !important;
        box-shadow:
            0 17px 34px rgba(5,65,46,.12),
            0 0 18px rgba(231,193,90,.12) !important;
    }

    .cara-warning-final{
        width:min(72%,900px) !important;
        min-height:88px !important;
        margin:2px auto 0 !important;
        padding:14px 24px !important;
        grid-template-columns:52px minmax(0,1fr) !important;
        gap:16px !important;
        border:2px solid #e7c15a !important;
        border-radius:22px !important;
        background:
            linear-gradient(135deg,#8f1010 0%,#b71919 48%,#8f1010 100%) !important;
        color:#ffffff !important;
        box-shadow:
            0 18px 38px rgba(126,10,10,.25),
            inset 0 1px 0 rgba(255,255,255,.10) !important;
        text-align:center !important;
    }

    .cara-warning-final .warning-icon{
        width:48px !important;
        height:48px !important;
        border:1px solid rgba(255,255,255,.34) !important;
        border-radius:15px !important;
        background:linear-gradient(135deg,#ffd65b,#e8ae20) !important;
        color:#6e4200 !important;
        font-size:21px !important;
        box-shadow:0 9px 20px rgba(0,0,0,.18) !important;
    }

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

    .cara-warning-final .warning-copy strong{
        display:block !important;
        margin:0 0 5px !important;
        color:#ffffff !important;
        font-size:18px !important;
        line-height:1.1 !important;
        font-weight:800 !important;
        letter-spacing:.08em !important;
    }

    .cara-warning-final .warning-copy p{
        max-width:740px !important;
        margin:0 auto !important;
        color:rgba(255,255,255,.96) !important;
        font-size:15px !important;
        line-height:1.48 !important;
        font-weight:500 !important;
        text-align:center !important;
    }

}

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


    .cara-pakai{
        padding:5px 0 6px !important;
    }

    .cara-pakai > .container{
        row-gap:5px !important;
    }

    .cara-pakai .section-title h2{
        font-size:2.35rem !important;
    }

    .cara-warning-final{
        width:min(76%,860px) !important;
        min-height:62px !important;
        margin-top:0 !important;
        padding:8px 16px !important;
        grid-template-columns:38px minmax(0,1fr) !important;
        gap:11px !important;
        border-radius:17px !important;
    }

    .cara-warning-final .warning-icon{
        width:34px !important;
        height:34px !important;
        border-radius:11px !important;
        font-size:15px !important;
    }

    .cara-warning-final .warning-copy strong{
        margin-bottom:2px !important;
        font-size:12px !important;
    }

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

}


/* ================= FOREDI FINAL V5.0 ================= */
.produk-wrapper{
    border:1.6px solid rgba(231,193,90,.72)!important;
    box-shadow:0 24px 54px rgba(5,47,36,.12),0 0 24px rgba(231,193,90,.08)!important;
}

@media (min-width:994px){

    .produk-content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;align-content:center}
    .produk-content>.produk-badge,.produk-content>h3,.produk-content>p{grid-column:1/-1}
    .produk-content .produk-list{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;margin-bottom:0}
    .produk-content .produk-list li{margin:0}
    .produk-content .produk-actions{grid-column:2;width:100%;margin-top:12px;justify-content:stretch}
    .produk-content .produk-actions .btn-primary{width:100%;max-width:none}

}

.cara-warning-final{
    width:min(68%,760px)!important;
    min-height:auto!important;
    display:block!important;
    margin:4px auto 0!important;
    padding:14px 24px 16px!important;
    border:2px solid #e7c15a!important;
    border-radius:22px!important;
    background:linear-gradient(135deg,#8b0f0f 0%,#b71919 48%,#8b0f0f 100%)!important;
    color:#fff!important;
    box-shadow:0 18px 38px rgba(126,10,10,.24),inset 0 1px 0 rgba(255,255,255,.10)!important;
    text-align:center!important;
}
.cara-warning-final .warning-heading{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:8px}
.cara-warning-final .warning-heading img{width:22px;height:22px;object-fit:contain;flex:0 0 22px}
.cara-warning-final .warning-heading strong{color:#fff;font-size:22px;line-height:1;font-weight:800;letter-spacing:.08em}
.cara-warning-final .warning-copy{max-width:650px;margin:0 auto;text-align:center}
.cara-warning-final .warning-copy p{margin:0;color:rgba(255,255,255,.97);font-size:15px;line-height:1.5;font-weight:500;text-align:center}
.cara-warning-final .warning-copy p+p{margin-top:5px}

@media (min-width:994px){

    .cara-pakai{padding-top:6px!important;padding-bottom:8px!important}
    .cara-pakai>.container{row-gap:6px!important}
    .cara-pakai .section-title,.cara-pakai .section-title h2{margin-bottom:0!important}

}

/* =========================================================
   FOREDI FINAL V5.1 - RAPATKAN CARA PEMAKAIAN
   ========================================================= */
@media (min-width:994px){

    .cara-pakai{
        padding:4px 0 6px !important;
    }

    .cara-pakai > .container{
        height:100% !important;
        display:grid !important;
        grid-template-rows:auto auto auto !important;
        align-content:center !important;
        row-gap:12px !important;
    }

    .cara-pakai .section-title{
        margin:0 auto !important;
        transform:translateY(10px);
    }

    .cara-pakai .section-title h2{
        margin:0 !important;
        line-height:1.02 !important;
    }

    .cara-wrapper-final{
        margin:0 !important;
        align-self:auto !important;
    }

    .cara-warning-final{
        width:min(54%,620px) !important;
        margin:0 auto !important;
        padding:10px 18px 11px !important;
        border-radius:18px !important;
        box-shadow:0 14px 28px rgba(126,10,10,.22),inset 0 1px 0 rgba(255,255,255,.10) !important;
    }

    .cara-warning-final .warning-heading{
        gap:7px !important;
        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{
        max-width:560px !important;
    }

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

    .cara-warning-final .warning-copy p + p{
        margin-top:2px !important;
    }

}

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

    .cara-pakai > .container{
        row-gap:7px !important;
    }

    .cara-pakai .section-title{
        transform:translateY(6px);
    }

    .cara-warning-final{
        width:min(58%,580px) !important;
        padding:6px 14px 7px !important;
        border-radius:15px !important;
    }

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

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

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

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

}

/* =========================================================
   FOREDI FINAL V5.2
   Seimbangkan posisi judul, body, dan kotak PERHATIAN
   ========================================================= */

@media (min-width:994px){


    .cara-pakai{
        height:calc(100svh - var(--header-height)) !important;
        min-height:calc(100svh - var(--header-height)) !important;
        padding:22px 0 18px !important;
        overflow:hidden !important;
    }

    .cara-pakai > .container{
        height:100% !important;
        display:grid !important;
        grid-template-rows:auto auto auto !important;
        align-content:space-between !important;
        row-gap:10px !important;
    }

    /* Judul dinaikkan, tetapi tetap punya jarak seimbang */
    .cara-pakai .section-title{
        width:100% !important;
        margin:0 auto !important;
        transform:none !important;
        align-self:start !important;
        text-align:center !important;
    }

    .cara-pakai .section-title h2{
        margin:0 !important;
        line-height:1.05 !important;
        text-align:center !important;
    }

    /* Body berada di tengah area yang tersedia */
    .cara-wrapper-final{
        width:100% !important;
        margin:0 !important;
        align-self:center !important;
    }

    /* Kotak perhatian diturunkan dan didekatkan ke bagian bawah */
    .cara-warning-final{
        align-self:end !important;
        margin:0 auto !important;
    }

}

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


    .cara-pakai{
        padding:12px 0 10px !important;
    }

    .cara-pakai > .container{
        row-gap:6px !important;
    }

    .cara-pakai .section-title{
        transform:none !important;
    }

}

/* =========================================================
   FOREDI FINAL V5.3
   Posisi judul, PERHATIAN, dan vertical middle kartu
   ========================================================= */

@media (min-width:994px){


    .cara-pakai{
        height:calc(100svh - var(--header-height)) !important;
        min-height:calc(100svh - var(--header-height)) !important;
        padding:14px 0 14px !important;
        overflow:hidden !important;
    }

    .cara-pakai > .container{
        height:100% !important;
        display:grid !important;
        grid-template-rows:82px minmax(0,1fr) 104px !important;
        align-content:stretch !important;
        row-gap:8px !important;
    }

    /* Judul sedikit diturunkan dan berada di tengah ruang atas */
    .cara-pakai .section-title{
        align-self:center !important;
        justify-self:center !important;
        margin:0 auto !important;
        transform:translateY(10px) !important;
        text-align:center !important;
    }

    .cara-pakai .section-title h2{
        margin:0 !important;
        text-align:center !important;
        line-height:1.05 !important;
    }

    /* Body berada tepat di tengah */
    .cara-wrapper-final{
        align-self:center !important;
        margin:0 !important;
    }

    /* Semua isi kartu berada di tengah secara vertikal */
    .cara-content-final .step,
    .cara-content-final .step-timed{
        align-items:center !important;
    }

    .cara-content-final .step-number{
        align-self:center !important;
        margin-top:0 !important;
    }

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

    /* Kotak PERHATIAN dinaikkan dan diposisikan di tengah ruang bawah */
    .cara-warning-final{
        align-self:center !important;
        justify-self:center !important;
        margin:0 auto !important;
        transform:translateY(-12px) !important;
    }

}

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


    .cara-pakai > .container{
        grid-template-rows:64px minmax(0,1fr) 78px !important;
        row-gap:5px !important;
    }

    .cara-pakai .section-title{
        transform:translateY(7px) !important;
    }

    .cara-warning-final{
        transform:translateY(-8px) !important;
    }

}

/* =========================================================
   TESTIMONI PREMIUM GREEN GOLD V5.4
   ========================================================= */

.testimoni{
    background:
        radial-gradient(circle at 50% 14%,rgba(255,213,79,.10),transparent 30%),
        linear-gradient(180deg,#0b3d2e 0%,#072f24 100%) !important;
    color:#ffffff;
}

.testimoni .section-title > span{
    color:#ffd54f !important;
    background:rgba(255,213,79,.13) !important;
    border:1px solid rgba(255,213,79,.30);
}

.testimoni .section-title h2{
    color:#ffffff !important;
}

.testimoni .section-title p{
    color:rgba(255,255,255,.76) !important;
}

.testimoni-slider{
    padding:0 !important;
    overflow:visible !important;
}

.testimoni-slider .swiper-wrapper{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:18px !important;
    transform:none !important;
}

.testimoni-slider .swiper-slide{
    width:auto !important;
    min-width:0 !important;
    height:auto !important;
    margin:0 !important;
}

.testimoni-card{
    min-height:230px !important;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:24px !important;
    border:1.5px solid rgba(231,193,90,.62) !important;
    border-radius:22px !important;
    background:
        linear-gradient(180deg,rgba(18,75,57,.98),rgba(9,51,39,.98)) !important;
    box-shadow:
        0 18px 36px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.05) !important;
    transition:
        transform .32s ease,
        border-color .32s ease,
        box-shadow .32s ease !important;
}

.testimoni-card:hover{
    transform:translateY(-8px) !important;
    border-color:#ffd54f !important;
    box-shadow:
        0 24px 46px rgba(0,0,0,.30),
        0 0 24px rgba(255,213,79,.14) !important;
}

.testimoni-stars{
    margin-bottom:14px !important;
    color:#ffd54f !important;
    font-size:20px !important;
    letter-spacing:3px;
    text-shadow:0 0 12px rgba(255,213,79,.20);
}

.testimoni-card > p{
    flex:1;
    margin-bottom:20px !important;
    color:rgba(255,255,255,.90) !important;
    font-size:14.5px !important;
    line-height:1.65 !important;
    font-style:italic;
}

.testimoni-user{
    padding-top:14px;
    border-top:1px solid rgba(231,193,90,.22);
}

.testimoni-user img{
    width:52px !important;
    height:52px !important;
    border:2px solid rgba(231,193,90,.72);
    box-shadow:0 8px 18px rgba(0,0,0,.22);
}

.testimoni-user strong{
    color:#ffffff !important;
    font-size:14px !important;
}

.testimoni-user span{
    color:rgba(255,255,255,.64) !important;
    font-size:12px !important;
}

.testimoni .swiper-pagination{
    display:none !important;
}

@media (min-width:994px){

    .testimoni{
        height:calc(100svh - var(--header-height));
        min-height:calc(100svh - var(--header-height));
        padding:22px 0 18px !important;
        overflow:hidden;
    }

    .testimoni > .container{
        height:100%;
        display:grid;
        grid-template-rows:auto minmax(0,1fr);
        align-content:center;
        row-gap:18px;
    }

    .testimoni .section-title{
        margin:0 auto !important;
    }

    .testimoni-slider .swiper-wrapper{
        align-content:center;
    }

}

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

    .testimoni{
        padding:12px 0 10px !important;
    }

    .testimoni > .container{
        row-gap:10px;
    }

    .testimoni .section-title h2{
        font-size:2.35rem !important;
    }

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

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

    .testimoni-stars{
        margin-bottom:9px !important;
        font-size:17px !important;
    }

    .testimoni-card > p{
        margin-bottom:12px !important;
        font-size:12.5px !important;
        line-height:1.45 !important;
    }

    .testimoni-user{
        padding-top:10px;
    }

    .testimoni-user img{
        width:42px !important;
        height:42px !important;
    }

    .testimoni-user strong{
        font-size:12px !important;
    }

    .testimoni-user span{
        font-size:10.5px !important;
    }

}

/* =========================================================
   TESTIMONI CHAT PREMIUM + HUBUNGI ADMIN V5.5
   ========================================================= */

@media (min-width:994px){

    .navbar ul{
        gap:18px !important;
    }

    .navbar a{
        font-size:13px !important;
        white-space:nowrap;
    }

}

.testimoni{
    background:
        radial-gradient(circle at 50% 12%,rgba(255,213,79,.10),transparent 30%),
        linear-gradient(180deg,#0b3d2e 0%,#072f24 100%) !important;
    color:#fff;
}

.testimoni .section-title > span{
    color:#ffd54f !important;
    background:rgba(255,213,79,.13) !important;
    border:1px solid rgba(255,213,79,.30);
}

.testimoni .section-title h2{
    color:#fff !important;
}

.testimoni .section-title p{
    color:rgba(255,255,255,.76) !important;
}

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

.testimoni-proof-card{
    min-width:0;
    min-height:225px;
    overflow:hidden;
    border:1.5px solid rgba(231,193,90,.64);
    border-radius:22px;
    background:linear-gradient(180deg,rgba(18,75,57,.98),rgba(9,51,39,.98));
    box-shadow:
        0 18px 36px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.05);
    transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}

.testimoni-proof-card:hover{
    transform:translateY(-7px);
    border-color:#ffd54f;
    box-shadow:
        0 24px 46px rgba(0,0,0,.30),
        0 0 24px rgba(255,213,79,.14);
}

.testimoni-proof-button{
    width:100%;
    display:block;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
    color:inherit;
}

.testimoni-proof-frame{
    position:relative;
    display:block;
    width:100%;
    height:155px;
    overflow:hidden;
    background:#061d16;
}

.testimoni-proof-frame img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center top;
    transition:transform .35s ease,filter .35s ease;
}

.testimoni-proof-button:hover img{
    transform:scale(1.035);
    filter:brightness(.72);
}

.testimoni-zoom{
    position:absolute;
    inset:auto 50% 14px auto;
    transform:translateX(50%) translateY(8px);
    display:flex;
    align-items:center;
    gap:7px;
    padding:8px 12px;
    border:1px solid rgba(255,213,79,.60);
    border-radius:999px;
    background:rgba(5,47,36,.90);
    color:#fff;
    font-size:12px;
    font-weight:700;
    opacity:0;
    transition:opacity .3s ease,transform .3s ease;
}

.testimoni-proof-button:hover .testimoni-zoom,
.testimoni-proof-button:focus-visible .testimoni-zoom{
    opacity:1;
    transform:translateX(50%) translateY(0);
}

.testimoni-proof-meta{
    padding:14px 17px 16px;
}

.testimoni-proof-meta .testimoni-stars{
    margin:0 0 7px !important;
    color:#ffd54f !important;
    font-size:16px !important;
    letter-spacing:2px;
}

.testimoni-proof-meta strong{
    display:block;
    color:#fff;
    font-size:14px;
}

.testimoni-proof-meta span{
    display:block;
    margin-top:2px;
    color:rgba(255,255,255,.62);
    font-size:11.5px;
}

.testimoni-proof-text{
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:24px;
}

.testimoni-quote-mark{
    position:absolute;
    top:7px;
    right:18px;
    color:rgba(255,213,79,.16);
    font-family:Georgia,serif;
    font-size:78px;
    line-height:1;
}

.testimoni-proof-text .testimoni-stars{
    margin:0 0 14px !important;
    color:#ffd54f !important;
    font-size:18px !important;
    letter-spacing:3px;
}

.testimoni-proof-text blockquote{
    position:relative;
    z-index:1;
    margin:0 0 20px;
    color:rgba(255,255,255,.92);
    font-size:15px;
    line-height:1.65;
    font-style:italic;
}

.testimoni-proof-user{
    display:flex;
    align-items:center;
    gap:12px;
    padding-top:14px;
    border-top:1px solid rgba(231,193,90,.24);
}

.testimoni-user-badge{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1.5px solid rgba(231,193,90,.72);
    border-radius:50%;
    background:rgba(255,213,79,.10);
    color:#ffd54f;
    font-size:18px;
}

.testimoni-proof-user strong{
    display:block;
    color:#fff;
    font-size:14px;
}

.testimoni-proof-user span{
    display:block;
    margin-top:2px;
    color:rgba(255,255,255,.62);
    font-size:12px;
}

/* Modal testimoni */
.testimoni-modal{
    position:fixed;
    inset:0;
    z-index:99999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px;
    background:rgba(0,0,0,.86);
    opacity:0;
    visibility:hidden;
    transition:opacity .25s ease,visibility .25s ease;
}

.testimoni-modal.open{
    opacity:1;
    visibility:visible;
}

.testimoni-modal-dialog{
    max-width:min(92vw,720px);
    max-height:88vh;
    overflow:auto;
    border:2px solid #e7c15a;
    border-radius:18px;
    background:#fff;
    box-shadow:0 25px 70px rgba(0,0,0,.45);
}

.testimoni-modal-dialog img{
    max-width:100%;
    height:auto;
    display:block;
}

.testimoni-modal-close{
    position:fixed;
    top:20px;
    right:22px;
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,213,79,.70);
    border-radius:50%;
    background:#0b3d2e;
    color:#fff;
    font-size:19px;
    cursor:pointer;
}

body.modal-open{
    overflow:hidden;
}

@media (min-width:994px){

    .testimoni{
        height:calc(100svh - var(--header-height));
        min-height:calc(100svh - var(--header-height));
        padding:18px 0 16px !important;
        overflow:hidden;
    }

    .testimoni > .container{
        height:100%;
        display:grid;
        grid-template-rows:auto minmax(0,1fr);
        align-content:center;
        row-gap:14px;
    }

    .testimoni .section-title{
        margin:0 auto !important;
    }

    .testimoni-proof-grid{
        align-content:center;
    }

}

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

    .testimoni{
        padding:10px 0 8px !important;
    }

    .testimoni > .container{
        row-gap:8px;
    }

    .testimoni .section-title h2{
        font-size:2.25rem !important;
    }

    .testimoni .section-title p{
        font-size:13px !important;
    }

    .testimoni-proof-card{
        min-height:176px;
        border-radius:17px;
    }

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

    .testimoni-proof-meta{
        padding:9px 12px 11px;
    }

    .testimoni-proof-meta .testimoni-stars{
        margin-bottom:4px !important;
        font-size:13px !important;
    }

    .testimoni-proof-meta strong{
        font-size:11px;
    }

    .testimoni-proof-meta span{
        font-size:9px;
    }

    .testimoni-proof-text{
        padding:16px;
    }

    .testimoni-proof-text blockquote{
        margin-bottom:11px;
        font-size:11.5px;
        line-height:1.45;
    }

    .testimoni-proof-user{
        padding-top:9px;
    }

    .testimoni-user-badge{
        width:36px;
        height:36px;
        font-size:14px;
    }

    .testimoni-proof-user strong{
        font-size:11px;
    }

    .testimoni-proof-user span{
        font-size:9px;
    }

}


/* ================= FOREDI FINAL V5.6 ================= */
main > .section-page{
    background:
        radial-gradient(circle at 50% 12%,rgba(255,213,79,.08),transparent 30%),
        linear-gradient(180deg,#0b3d2e 0%,#072f24 100%) !important;
    color:#fff;
}
main > .section-page .section-title > span{
    color:#ffd54f !important;background:rgba(255,213,79,.13) !important;
    border:1px solid rgba(255,213,79,.30) !important;
}
main > .section-page .section-title h2{color:#fff !important}
main > .section-page .section-title p{color:rgba(255,255,255,.76) !important}
.faq-item{background:linear-gradient(180deg,rgba(18,75,57,.98),rgba(9,51,39,.98)) !important;border:1.5px solid rgba(231,193,90,.56) !important}
.faq-question,.faq-answer{color:#fff !important}
.faq-answer p{color:rgba(255,255,255,.78) !important}
.cta-section{background:radial-gradient(circle at 50% 20%,rgba(255,213,79,.10),transparent 34%),linear-gradient(135deg,#0b3d2e 0%,#082f24 52%,#124b38 100%) !important}
.cta-box{border:1.5px solid rgba(231,193,90,.56) !important;background:linear-gradient(180deg,rgba(18,75,57,.96),rgba(9,51,39,.98)) !important}

@media (min-width:994px){

    .navbar ul{gap:16px !important}
    .navbar a{font-size:12.5px !important;white-space:nowrap}

}

.testimoni-text-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.testimoni-text-card{position:relative;min-width:0;min-height:230px;display:flex;flex-direction:column;padding:22px;overflow:hidden;border:1.5px solid rgba(231,193,90,.66);border-radius:22px;background:linear-gradient(180deg,rgba(18,75,57,.98),rgba(9,51,39,.98));box-shadow:0 18px 36px rgba(0,0,0,.23),inset 0 1px 0 rgba(255,255,255,.05);transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.testimoni-text-card::after{content:"“";position:absolute;top:2px;right:16px;color:rgba(255,213,79,.14);font-family:Georgia,serif;font-size:82px;line-height:1;pointer-events:none}
.testimoni-text-card:hover{transform:translateY(-7px);border-color:#ffd54f;box-shadow:0 25px 48px rgba(0,0,0,.30),0 0 24px rgba(255,213,79,.14)}
.testimoni-card-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}
.testimoni-card-top .testimoni-stars{margin:0 !important;color:#ffd54f !important;font-size:17px !important;letter-spacing:2.5px}
.testimoni-number{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:27px;padding:0 9px;border:1px solid rgba(231,193,90,.45);border-radius:999px;color:#ffd54f;background:rgba(255,213,79,.08);font-size:11px;font-weight:800;letter-spacing:.08em}
.testimoni-message{position:relative;z-index:1;flex:1;color:rgba(255,255,255,.91);font-size:13.5px;line-height:1.52;font-style:italic}
.testimoni-message p{margin:0;color:inherit}
.testimoni-message p+p{margin-top:7px}
.testimoni-text-user{position:relative;z-index:1;display:flex;align-items:center;gap:11px;margin-top:17px;padding-top:13px;border-top:1px solid rgba(231,193,90,.23)}
.testimoni-user-icon{width:43px;height:43px;display:flex;align-items:center;justify-content:center;flex:0 0 43px;border:1.5px solid rgba(231,193,90,.72);border-radius:50%;background:rgba(255,213,79,.10);color:#ffd54f;font-size:16px}
.testimoni-text-user strong{display:block;color:#fff;font-size:13px}
.testimoni-text-user span{display:block;margin-top:2px;color:rgba(255,255,255,.62);font-size:11px}

@media (min-width:994px){

    .testimoni{height:calc(100svh - var(--header-height));min-height:calc(100svh - var(--header-height));padding:17px 0 14px !important;overflow:hidden}
    .testimoni>.container{height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);align-content:center;row-gap:13px}
    .testimoni .section-title{margin:0 auto !important}
    .testimoni-text-grid{align-content:center}

}
@media (min-width:994px) and (max-height:820px){

    .testimoni{padding:9px 0 7px !important}
    .testimoni>.container{row-gap:7px}
    .testimoni .section-title h2{font-size:2.2rem !important}
    .testimoni .section-title p{font-size:12.5px !important}
    .testimoni-text-grid{gap:11px}
    .testimoni-text-card{min-height:178px;padding:14px;border-radius:17px}
    .testimoni-text-card::after{right:11px;font-size:58px}
    .testimoni-card-top{margin-bottom:7px}
    .testimoni-card-top .testimoni-stars{font-size:13px !important}
    .testimoni-number{min-width:29px;height:22px;font-size:9px}
    .testimoni-message{font-size:10.5px;line-height:1.35}
    .testimoni-message p+p{margin-top:4px}
    .testimoni-text-user{gap:8px;margin-top:8px;padding-top:8px}
    .testimoni-user-icon{width:32px;height:32px;flex-basis:32px;font-size:12px}
    .testimoni-text-user strong{font-size:10px}
    .testimoni-text-user span{font-size:8.5px}

}

/* =========================================================
   FOREDI FINAL V5.7
   Urutan Produk-Keunggulan + FAQ visible
   ========================================================= */

/* FAQ premium hijau-emas dan tulisan terlihat jelas */
.faq-item{
    background:
        linear-gradient(180deg,rgba(18,75,57,.98),rgba(9,51,39,.98)) !important;
    border:1.5px solid rgba(231,193,90,.58) !important;
    box-shadow:
        0 14px 30px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.faq-question{
    background:transparent !important;
    color:#ffffff !important;
}

.faq-question span{
    color:#ffffff !important;
}

.faq-question i{
    color:#ffd54f !important;
}

.faq-answer{
    color:#ffffff !important;
}

.faq-answer p{
    color:rgba(255,255,255,.82) !important;
}

.faq-item.active{
    border-color:#ffd54f !important;
    box-shadow:
        0 18px 36px rgba(0,0,0,.24),
        0 0 20px rgba(255,213,79,.10) !important;
}

.faq-item.active .faq-question,
.faq-item.active .faq-question span{
    color:#ffd54f !important;
}

/* Navbar tetap mengikuti urutan baru */
@media (min-width:994px){

    .navbar ul{
        gap:16px !important;
    }

    .navbar a{
        font-size:12.5px !important;
        white-space:nowrap;
    }

}

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

















































/* Area produk kanan */










/* Footer feature hero */














@keyframes heroProductFloat{
    0%,100%{transform:translateY(0) rotate(-1deg)}
    50%{transform:translateY(-14px) rotate(1deg)}
}

@keyframes heroAura{
    0%,100%{transform:scale(.96);opacity:.72}
    50%{transform:scale(1.04);opacity:1}
}



/* =========================================================
   HERO ONE-SCREEN FIX V5.9
   Header fixed menindih Hero, jadi tinggi Hero harus 100svh.
   ========================================================= */



/* Monitor/laptop dengan tinggi pendek */


/* =========================================================
   HERO FINAL V6.0
   Hapus label, feature middle align, animasi produk premium
   ========================================================= */

/* Label kanan dihapus dari HTML; aturan lama dinonaktifkan */


/* Kotak fitur Hero: seluruh isi benar-benar berada di tengah */












/* Animasi produk lebih hidup tetapi tetap lembut */






@keyframes heroProductPremiumFloat{
    0%,100%{
        transform:
            perspective(1100px)
            translate3d(var(--hero-shift-x),calc(var(--hero-shift-y) + 0px),0)
            rotateX(var(--hero-tilt-x))
            rotateY(var(--hero-tilt-y))
            rotate(-1deg)
            scale(1);
    }
    50%{
        transform:
            perspective(1100px)
            translate3d(var(--hero-shift-x),calc(var(--hero-shift-y) - 15px),0)
            rotateX(var(--hero-tilt-x))
            rotateY(var(--hero-tilt-y))
            rotate(1deg)
            scale(1.018);
    }
}

@keyframes heroAuraPremium{
    0%,100%{
        transform:scale(.94) rotate(0deg);
        opacity:.62;
    }
    50%{
        transform:scale(1.06) rotate(7deg);
        opacity:1;
    }
}

/* Saat mouse menggerakkan produk, animasi float tetap halus */


/* Pengguna yang mematikan animasi */


/* Laptop pendek */



/* =========================================================
   HERO GOLD EFFECTS + CLEARER VIDEO V6.1
   ========================================================= */





















































@keyframes heroGoldRing{
    0%,100%{transform:scale(.96) rotate(0deg);opacity:.62}
    50%{transform:scale(1.04) rotate(5deg);opacity:1}
}

@keyframes heroShadowPulse{
    0%,100%{transform:translateX(-50%) scaleX(.92);opacity:.66}
    50%{transform:translateX(-50%) scaleX(1.05);opacity:.90}
}

@keyframes heroParticleFloat{
    0%,100%{transform:translateY(0) scale(.85);opacity:.35}
    50%{transform:translateY(-15px) scale(1.15);opacity:1}
}

@keyframes heroSparkle{
    0%,100%{transform:scale(.5) rotate(0deg);opacity:.15}
    50%{transform:scale(1.15) rotate(45deg);opacity:1}
}



/* =========================================================
   HERO CLEAN PREMIUM V6.2
   Video tanpa blur, efek emas lebih halus, produk menyatu
   ========================================================= */

/* Video asli tetap hidup dan jelas */


/* Overlay tetap menjaga tulisan terbaca, tetapi tidak menutup video */


/* Hilangkan lingkaran besar yang membuat area produk terlalu ramai */


/* Glow lembut di belakang produk */


/* Produk menyatu ke background; warna putih checker tidak lagi menonjol */




/* Bayangan lebih kecil dan alami */


/* Partikel emas diperkecil agar elegan */




/* Hanya tiga sparkle penting */




@keyframes heroProductCleanFloat{
    0%,100%{
        transform:
            perspective(1100px)
            translate3d(var(--hero-shift-x),calc(var(--hero-shift-y) + 0px),0)
            rotateX(var(--hero-tilt-x))
            rotateY(var(--hero-tilt-y))
            rotate(-.4deg)
            scale(1);
    }
    50%{
        transform:
            perspective(1100px)
            translate3d(var(--hero-shift-x),calc(var(--hero-shift-y) - 10px),0)
            rotateX(var(--hero-tilt-x))
            rotateY(var(--hero-tilt-y))
            rotate(.4deg)
            scale(1.01);
    }
}

@keyframes heroSoftGlow{
    0%,100%{transform:scale(.96);opacity:.62}
    50%{transform:scale(1.04);opacity:.92}
}

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





























@keyframes heroLightPulse{
    0%,100%{opacity:.56;transform:translate(-50%,-50%) scale(.95)}
    50%{opacity:.80;transform:translate(-50%,-50%) scale(1.04)}
}

@keyframes heroRaysPulse{
    0%,100%{opacity:.30;transform:translate(-50%,-50%) scale(.96)}
    50%{opacity:.54;transform:translate(-50%,-50%) scale(1.04)}
}

@keyframes heroRingRotate{
    from{transform:translate(-50%,-50%) rotate(-7deg)}
    to{transform:translate(-50%,-50%) rotate(353deg)}
}

@keyframes heroSparkleDrift{
    0%,100%{opacity:.42;transform:translate(-50%,-50%) rotate(-3deg) scale(.96)}
    50%{opacity:.76;transform:translate(-50%,-53%) rotate(3deg) scale(1.03)}
}

@keyframes heroPodiumGlow{
    0%,100%{filter:drop-shadow(0 28px 24px rgba(0,0,0,.34)) drop-shadow(0 0 14px rgba(255,193,38,.16))}
    50%{filter:drop-shadow(0 31px 27px rgba(0,0,0,.38)) drop-shadow(0 0 27px rgba(255,193,38,.30))}
}

@keyframes heroBoxFloat{
    0%,100%{transform:translate(-50%,-50%) rotate(-4deg) translateY(0)}
    50%{transform:translate(-50%,-50%) rotate(-2.5deg) translateY(-13px)}
}

@keyframes heroSachetOne{
    0%,100%{transform:rotate(-5deg) translateY(0)}
    50%{transform:rotate(-2deg) translateY(-14px)}
}

@keyframes heroSachetTwo{
    0%,100%{transform:rotate(3deg) translateY(0)}
    50%{transform:rotate(6deg) translateY(-10px)}
}

@keyframes heroSachetThree{
    0%,100%{transform:rotate(8deg) translateY(0)}
    50%{transform:rotate(5deg) translateY(-8px)}
}



/* =========================================================
   FOREDI HERO LAYERED FIX V6.4
   Komposisi produk premium dan tidak saling menutupi
   ========================================================= */





/* Efek cahaya dipusatkan di belakang box */








/* Podium tepat di tengah dan sedikit lebih rendah */


/* Box menjadi fokus utama */


/* Sachet dibuat lebih kecil, hanya sebagai pendukung */


/* Sachet belakang kanan */


/* Sachet tengah kanan */


/* Sachet depan kanan bawah */


/* Pastikan box tidak tertutup */


/* Gerakan lebih lembut */
@keyframes heroBoxFloat{
    0%,100%{
        transform:translate(-50%,-50%) rotate(-3deg) translateY(0);
    }
    50%{
        transform:translate(-50%,-50%) rotate(-2deg) translateY(-9px);
    }
}

@keyframes heroSachetOne{
    0%,100%{transform:rotate(-6deg) translateY(0)}
    50%{transform:rotate(-3deg) translateY(-9px)}
}

@keyframes heroSachetTwo{
    0%,100%{transform:rotate(4deg) translateY(0)}
    50%{transform:rotate(6deg) translateY(-7px)}
}

@keyframes heroSachetThree{
    0%,100%{transform:rotate(9deg) translateY(0)}
    50%{transform:rotate(7deg) translateY(-6px)}
}

/* Hover/parallax tidak mengacaukan posisi box */


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



















































/* =========================================================
   FOREDI HERO CSS ORBIT V6.6
   Hanya memakai box, 3 sachet, podium; cahaya dan sparkle via CSS.
   ========================================================= */




































/* =========================================================
   FOREDI HERO COMPOSITION FIX V6.7
   Fokus: hero content middle align dan produk lebih kompak.
   ========================================================= */





/* Cahaya lebih lembut, tidak lagi seperti target besar */




/* Hanya dua ring utama */












/* Podium lebih dekat ke produk */


/* Box menjadi pusat komposisi */


/* Sachet bertumpuk rapi di depan kanan box */








/* Partikel lebih halus */














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



/* Komposisi kanan dibuat lebih rapat dan premium */




/* Hanya dua lingkaran agar tidak seperti target */










/* Podium naik mendekati produk */


/* Box fokus utama */


/* Sachet ditumpuk rapi di depan kanan */








/* Partikel diringankan */


/* =========================================================
   HERO CONTENT TRUE MIDDLE ALIGN V6.9
   Menempatkan isi Hero tepat di area antara header dan footer.
   ========================================================= */

/* =========================================================
   HERO FOREDI — VERSI BERSIH V7.0
   Satu-satunya aturan Hero. Jangan menambahkan patch Hero lain.
   ========================================================= */
.hero{
    position:relative;
    width:100%;
    height:100svh;
    min-height:720px;
    padding:var(--header-height) 0 0;
    overflow:hidden;
    display:grid;
    grid-template-rows:minmax(0,1fr) auto;
    color:#fff;
    isolation:isolate;
}

.hero-video{
    position:absolute;
    inset:0;
    z-index:-3;
    width:100%;
    height:100%;
    object-fit:cover;
}

.hero-overlay{
    position:absolute;
    inset:0;
    z-index:-2;
    background:
        radial-gradient(circle at 72% 44%,rgba(255,196,45,.15),transparent 34%),
        linear-gradient(90deg,rgba(2,25,17,.88) 0%,rgba(5,46,31,.68) 48%,rgba(2,22,15,.46) 100%);
}

.hero > .hero-container{
    width:min(100% - 40px,var(--container));
    min-height:0;
    margin-inline:auto;
    display:grid;
    grid-template-columns:minmax(0,.95fr) minmax(460px,1.05fr);
    align-items:center;
    gap:clamp(38px,5vw,76px);
    padding-block:clamp(22px,4vh,48px);
}

.hero-content,
.hero-content-middle{
    width:100%;
    max-width:720px;
    min-height:0;
    margin:0;
    align-self:center;
    transform:none;
}

.hero-badge{
    width:max-content;
    max-width:100%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 24px;
    margin:0 0 20px;
    border:1px solid rgba(255,213,79,.58);
    border-radius:999px;
    background:rgba(5,52,36,.72);
    color:#fff;
    font-size:14px;
    line-height:1.2;
    font-weight:700;
    backdrop-filter:blur(8px);
}

.hero-title{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    margin:0 0 18px;
    font-size:clamp(3.6rem,5.5vw,5.6rem);
    line-height:.92;
    letter-spacing:-.045em;
    font-weight:800;
}
.hero-title-white{color:#fff}
.hero-title-gold{color:var(--secondary);text-shadow:0 5px 24px rgba(255,198,30,.20)}

.hero-content h2{
    margin:0 0 16px;
    color:var(--secondary);
    font-size:clamp(1.5rem,2.15vw,2rem);
    line-height:1.25;
    font-weight:800;
}

.hero-content > p{
    max-width:700px;
    margin:0 0 18px;
    color:rgba(255,255,255,.90);
    font-size:clamp(15px,1.05vw,17px);
    line-height:1.65;
}

.hero-rating{
    width:max-content;
    max-width:100%;
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
    margin:0 0 20px;
    padding:10px 16px;
    border:1px solid rgba(255,213,79,.40);
    border-radius:16px;
    background:rgba(5,48,34,.58);
}
.hero-rating .stars{color:var(--secondary);font-size:20px;letter-spacing:2px;white-space:nowrap}
.hero-rating strong{margin-left:8px;color:#fff;font-size:20px;letter-spacing:0}
.hero-rating span{color:rgba(255,255,255,.84);font-size:15px}

.hero-buttons{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.hero-buttons .btn-primary,.hero-buttons .btn-secondary{min-height:56px;padding:14px 30px}

.hero-image,.hero-showcase{
    position:relative;
    min-height:0;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:visible;
}

.hero-stage{
    --mouse-x:0px;
    --mouse-y:0px;
    position:relative;
    width:min(650px,100%);
    aspect-ratio:1/.90;
    margin:auto;
}
.hero-stage .hero-layer{position:absolute;display:block;max-width:none;height:auto;object-fit:contain;pointer-events:none;user-select:none;transform-origin:center}

.hero-css-glow{
    position:absolute;
    z-index:1;
    left:50%;top:43%;width:58%;aspect-ratio:1;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle,rgba(255,240,155,.55),rgba(255,185,35,.18) 38%,transparent 70%);
    filter:blur(10px);
    animation:heroGlowPulse 5s ease-in-out infinite;
}

.hero-css-orbit{position:absolute;z-index:2;left:50%;top:44%;width:68%;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}
.orbit-line{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%);border:1.5px solid rgba(255,215,86,.52);box-shadow:0 0 12px rgba(255,188,27,.42),inset 0 0 8px rgba(255,215,86,.12)}
.orbit-line-1{width:100%;height:100%;animation:heroOrbitRotate 30s linear infinite}
.orbit-line-2{width:82%;height:82%;opacity:.72;animation:heroOrbitReverse 24s linear infinite}
.orbit-line-3,.orbit-line-4{display:none}
.hero-css-orbit::before{content:"";position:absolute;inset:8%;border-radius:50%;background:conic-gradient(from 10deg,transparent 0 28deg,rgba(255,227,130,.9) 34deg,transparent 42deg 116deg,rgba(255,195,43,.75) 123deg,transparent 132deg 224deg,rgba(255,237,165,.9) 232deg,transparent 241deg 326deg,rgba(255,190,35,.75) 334deg,transparent 342deg);mask:radial-gradient(circle,transparent 59%,#000 60% 62%,transparent 63%);animation:heroOrbitRotate 20s linear infinite;opacity:.6}
.orbit-star{position:absolute;width:15px;height:15px;animation:heroStarBlink 3s ease-in-out infinite}
.orbit-star::before,.orbit-star::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:999px;background:#fff3b0;box-shadow:0 0 10px #ffd54f}
.orbit-star::before{width:2px;height:100%}.orbit-star::after{width:100%;height:2px}
.orbit-star-1{left:10%;top:28%}.orbit-star-2{right:7%;top:32%;animation-delay:.5s}.orbit-star-3{left:22%;bottom:10%;animation-delay:1s}.orbit-star-4{right:20%;bottom:8%;animation-delay:1.5s}.orbit-star-5{left:49%;top:2%;animation-delay:.8s}.orbit-star-6{right:1%;top:58%;animation-delay:1.9s}

.hero-stage .hero-layer-podium{z-index:4;width:72%;left:50%;bottom:6%;transform:translateX(-50%);filter:drop-shadow(0 0 10px rgba(255,214,82,.65)) drop-shadow(0 0 24px rgba(255,175,0,.28));animation:heroPodiumPulse 5s ease-in-out infinite}
.hero-stage .hero-layer-box{z-index:7;width:71%;left:43%;top:40%;transform:translate(-50%,-50%) rotate(-2deg);filter:drop-shadow(0 28px 26px rgba(0,0,0,.42)) drop-shadow(0 0 18px rgba(255,194,35,.14));animation:heroBoxFloat 6.4s ease-in-out infinite}
.hero-stage .hero-layer-sachet{width:24%;filter:drop-shadow(0 16px 15px rgba(0,0,0,.38))}
.hero-stage .hero-layer-sachet-3{z-index:6;left:74%;top:39%;transform:translate(-50%,-50%) rotate(7deg) scale(.88);animation:heroSachetBack 7.1s ease-in-out infinite}
.hero-stage .hero-layer-sachet-2{z-index:8;left:69%;top:50%;transform:translate(-50%,-50%) rotate(2deg) scale(.94);animation:heroSachetMiddle 6.2s ease-in-out infinite}
.hero-stage .hero-layer-sachet-1{z-index:9;left:64%;top:61%;transform:translate(-50%,-50%) rotate(-5deg);animation:heroSachetFront 5.4s ease-in-out infinite}

.hero-css-particles{position:absolute;inset:0;z-index:10;pointer-events:none}
.hero-css-particles span{position:absolute;width:4px;height:4px;border-radius:50%;background:#ffd54f;box-shadow:0 0 8px rgba(255,213,79,.85);animation:heroParticle 5.8s ease-in-out infinite}
.hero-css-particles span:nth-child(1){left:16%;top:23%}.hero-css-particles span:nth-child(2){left:29%;top:13%;animation-delay:1s}.hero-css-particles span:nth-child(3){left:48%;top:9%;animation-delay:2s}.hero-css-particles span:nth-child(4){left:69%;top:15%;animation-delay:.7s}.hero-css-particles span:nth-child(5){left:84%;top:29%;animation-delay:1.7s}.hero-css-particles span:nth-child(6){left:86%;top:64%;animation-delay:2.4s}.hero-css-particles span:nth-child(7){left:63%;top:82%;animation-delay:.4s}.hero-css-particles span:nth-child(8){left:26%;top:76%;animation-delay:1.4s}.hero-css-particles span:nth-child(n+9){display:none}

.hero-footer{width:100%;margin:0;padding:10px 0 14px;background:rgba(3,31,22,.70);border-top:1px solid rgba(255,213,79,.17)}
.hero-features{width:min(100% - 40px,var(--container));margin-inline:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.hero-feature{min-height:112px;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:18px;padding:16px 20px;border-radius:20px;background:rgba(7,57,40,.80);border:1px solid rgba(255,213,79,.28);backdrop-filter:blur(10px);text-align:left;transition:transform var(--transition),background var(--transition),border-color var(--transition)}
.hero-feature:hover{transform:translateY(-5px);background:rgba(10,72,50,.88);border-color:rgba(255,213,79,.50)}
.hero-feature img{flex:0 0 auto;width:66px;height:66px;object-fit:contain}
.hero-feature-copy,.hero-feature div{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px}
.hero-feature strong{color:#fff;font-size:18px;line-height:1.2;font-weight:800}
.hero-feature span{color:rgba(255,255,255,.78);font-size:14px;line-height:1.35;font-weight:600}

@keyframes heroGlowPulse{0%,100%{opacity:.65;transform:translate(-50%,-50%) scale(.97)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}}
@keyframes heroOrbitRotate{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes heroOrbitReverse{from{transform:translate(-50%,-50%) rotate(360deg)}to{transform:translate(-50%,-50%) rotate(0)}}
@keyframes heroStarBlink{0%,100%{transform:scale(.45);opacity:.2}50%{transform:scale(1.1) rotate(45deg);opacity:1}}
@keyframes heroPodiumPulse{0%,100%{opacity:.72}50%{opacity:1}}
@keyframes heroBoxFloat{0%,100%{transform:translate(-50%,-50%) rotate(-2deg) translateY(0)}50%{transform:translate(-50%,-50%) rotate(-1deg) translateY(-8px)}}
@keyframes heroSachetBack{0%,100%{transform:translate(-50%,-50%) rotate(7deg) scale(.88) translateY(0)}50%{transform:translate(-50%,-50%) rotate(5deg) scale(.88) translateY(-6px)}}
@keyframes heroSachetMiddle{0%,100%{transform:translate(-50%,-50%) rotate(2deg) scale(.94) translateY(0)}50%{transform:translate(-50%,-50%) rotate(4deg) scale(.94) translateY(-8px)}}
@keyframes heroSachetFront{0%,100%{transform:translate(-50%,-50%) rotate(-5deg) translateY(0)}50%{transform:translate(-50%,-50%) rotate(-3deg) translateY(-10px)}}
@keyframes heroParticle{0%,100%{transform:translateY(0) scale(.75);opacity:.2}50%{transform:translateY(-12px) scale(1.15);opacity:1}}

@media (prefers-reduced-motion:reduce){.hero-stage *{animation:none!important}}

/* =========================================================
   FOREDI HERO SCALE BALANCE V7.1
   Mengecilkan elemen Hero agar kembali proporsional.
   ========================================================= */

@media (min-width:994px){
    .hero-title{
        font-size:clamp(3.15rem,4.75vw,4.85rem);
        margin-bottom:16px;
    }

    .hero-content h2{
        font-size:clamp(1.35rem,1.85vw,1.75rem);
        margin-bottom:14px;
    }

    .hero-content > p{
        max-width:650px;
        font-size:clamp(14px,.95vw,16px);
        margin-bottom:16px;
    }

    .hero-rating{
        gap:14px;
        margin-bottom:17px;
        padding:9px 14px;
        border-radius:14px;
    }

    .hero-rating .stars{
        font-size:18px;
    }

    .hero-rating strong{
        font-size:18px;
    }

    .hero-rating span{
        font-size:14px;
    }

    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary{
        min-height:52px;
        padding:12px 25px;
        font-size:15px;
    }

    .hero-stage{
        width:min(590px,100%);
    }

    .hero-css-orbit{
        width:62%;
    }

    .hero-css-glow{
        width:52%;
    }

    .hero-stage .hero-layer-podium{
        width:64%;
        bottom:8%;
    }

    .hero-stage .hero-layer-box{
        width:63%;
        left:43%;
        top:41%;
    }

    .hero-stage .hero-layer-sachet{
        width:20%;
    }

    .hero-stage .hero-layer-sachet-3{
        left:73%;
        top:40%;
    }

    .hero-stage .hero-layer-sachet-2{
        left:68%;
        top:50%;
    }

    .hero-stage .hero-layer-sachet-1{
        left:63%;
        top:60%;
    }

    .hero-footer{
        padding:8px 0 10px;
    }

    .hero-features{
        gap:12px;
    }

    .hero-feature{
        min-height:88px;
        gap:13px;
        padding:12px 15px;
        border-radius:17px;
    }

    .hero-feature img{
        width:50px;
        height:50px;
    }

    .hero-feature strong{
        font-size:15px;
    }

    .hero-feature span{
        font-size:11.5px;
        line-height:1.3;
    }
}

@media (min-width:994px) and (max-height:820px){
    .hero-title{
        font-size:clamp(2.9rem,4.2vw,4.25rem);
    }

    .hero-content h2{
        font-size:clamp(1.2rem,1.65vw,1.55rem);
    }

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

    .hero-feature{
        min-height:82px;
    }

    .hero-feature img{
        width:46px;
        height:46px;
    }
}

/* =========================================================
   HERO SINGLE PRODUCT V7.2
   Hanya memakai assets/images/hero/hero-product.png
   Belum menggunakan animasi — fokus layout dulu.
   ========================================================= */

.hero-image-single{
    position:relative;
    min-height:0 !important;
    height:100%;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:visible !important;
    isolation:isolate;
}

.hero-product-single{
    position:relative !important;
    z-index:5;
    width:min(100%,520px) !important;
    height:auto !important;
    max-height:calc(100svh - var(--header-height) - 175px);
    object-fit:contain;
    filter:
        drop-shadow(0 24px 28px rgba(0,0,0,.34))
        drop-shadow(0 0 20px rgba(255,190,40,.10));
}

/* Tidak ada orbit, podium, sparkle, glow, box, atau sachet terpisah pada Hero v7.2 */
.hero-image-single .hero-stage,
.hero-image-single .hero-css-orbit,
.hero-image-single .hero-css-glow,
.hero-image-single .hero-css-particles,
.hero-image-single .hero-layer{
    display:none !important;
}

/* Desktop: gambar berada seimbang di sisi kanan */
@media (min-width:994px){
    .hero-image-single{
        padding:4px 0 4px 18px;
    }

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

/* =========================================================
   HERO V7.8 - VIDEO BEHIND HERO PRODUCT
   Hanya memakai:
   - hero-product.png
   - hero-video.mp4
   Fokus sekarang: ukuran + posisi. Belum ada sparkle tambahan.
   ========================================================= */

.hero-image-single{
    position:relative !important;
    min-height:0 !important;
    height:100%;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:visible !important;
    isolation:isolate;
}

.hero-product-stage{
    position:relative;
    width:min(100%,650px);
    min-height:520px;
    display:flex;
    align-items:center;
    justify-content:center;
    isolation:isolate;
    overflow:visible;
}

/* Video dibatasi supaya tidak keluar dari lubang sobekan.
   Lebih kecil sedikit tidak masalah. */
.hero-product-video-wrap{
    position:absolute;
    z-index:1;
    left:50%;
    top:49%;
    width:69%;
    height:75%;
    transform:translate(-50%,-50%);
    overflow:hidden;

    /* bentuk oval/organik agar aman di dalam bingkai */
    border-radius:44% 46% 42% 45% / 48% 45% 50% 46%;
    clip-path:ellipse(48% 49% at 50% 50%);

    background:transparent;
    pointer-events:none;
}

/* Video dicrop dari tengah */
.hero-product-video{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    transform:scale(1.22);
    filter:
        saturate(1.12)
        contrast(1.05)
        brightness(1.03);
}

/* Hero-product diperbesar lagi sedikit */
.hero-product-stage .hero-product-single{
    position:relative !important;
    z-index:5 !important;
    width:min(100%,610px) !important;
    height:auto !important;
    max-height:calc(100svh - var(--header-height) - 105px);
    object-fit:contain;
    pointer-events:none;
    filter:
        drop-shadow(0 26px 34px rgba(0,0,0,.34))
        drop-shadow(0 0 18px rgba(255,190,40,.10));
}

/* Desktop */
@media (min-width:994px){
    .hero-image-single{
        padding:0 0 0 22px;
    }
}

/* =========================================================
   HERO V7.9 - VIDEO FIT INSIDE TORN FRAME
   Fokus:
   - hero-product.png diperbesar
   - hero-video.mp4 diperkecil
   - video tidak melewati bingkai dalam
   ========================================================= */

.hero-product-stage{
    width:min(100%,690px) !important;
    min-height:545px !important;
}

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

/* Perkecil area video supaya aman di dalam sobekan */
.hero-product-video-wrap{
    left:50% !important;
    top:49.5% !important;

    width:58% !important;
    height:66% !important;

    transform:translate(-50%,-50%) !important;

    border-radius:42% 44% 40% 43% / 46% 43% 48% 44% !important;
    clip-path:ellipse(46% 47% at 50% 50%) !important;

    overflow:hidden !important;
}

/* Crop video sedikit lebih ringan */
.hero-product-video{
    width:100% !important;
    height:100% !important;

    object-fit:cover !important;
    object-position:center center !important;

    transform:scale(1.08) !important;

    filter:
        saturate(1.08)
        contrast(1.03)
        brightness(.98) !important;
}

/* =========================================================
   HERO V7.10 - INNER SPARKLE ONLY
   - Tidak memakai hero-video.mp4
   - Background alam tetap terlihat
   - Glow + sparkle + titik warna hanya DI DALAM bingkai
   ========================================================= */

.hero-product-stage{
    position:relative;
    width:min(100%,700px) !important;
    min-height:550px !important;
    display:flex;
    align-items:center;
    justify-content:center;
    isolation:isolate;
    overflow:visible;
}

/* Hero product sedikit diperbesar */
.hero-product-stage .hero-product-single{
    position:relative !important;
    z-index:5 !important;
    width:min(100%,665px) !important;
    height:auto !important;
    max-height:calc(100svh - var(--header-height) - 92px) !important;
    object-fit:contain;
    pointer-events:none;
    filter:
        drop-shadow(0 28px 36px rgba(0,0,0,.34))
        drop-shadow(0 0 14px rgba(255,190,40,.08));
}

/* Matikan layer video lama bila masih ada */
.hero-product-video-wrap,
.hero-product-video{
    display:none !important;
}

/* Area FX dikunci aman DI DALAM bingkai */
.hero-inner-fx{
    position:absolute;
    z-index:2;
    left:50%;
    top:49%;
    width:61%;
    height:72%;
    transform:translate(-50%,-50%);
    overflow:hidden;
    pointer-events:none;

    /* bentuk organik, sengaja lebih kecil dari bingkai dalam */
    clip-path:polygon(
        50% 3%,
        64% 6%,
        76% 11%,
        86% 20%,
        92% 32%,
        95% 46%,
        94% 60%,
        90% 73%,
        83% 84%,
        72% 92%,
        59% 97%,
        46% 99%,
        33% 96%,
        22% 90%,
        14% 81%,
        8% 69%,
        5% 55%,
        6% 41%,
        10% 28%,
        17% 17%,
        28% 9%,
        39% 5%
    );

    background:transparent;
}

/* Glow emas lembut, bukan bidang padat */
.hero-inner-glow{
    position:absolute;
    left:43%;
    top:49%;
    width:88%;
    aspect-ratio:1;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:
        radial-gradient(circle,
            rgba(255,248,205,.65) 0%,
            rgba(255,218,112,.42) 11%,
            rgba(255,176,50,.22) 24%,
            rgba(255,139,22,.09) 40%,
            transparent 68%);
    filter:blur(7px);
    mix-blend-mode:screen;
    animation:innerGlowPulse 5.2s ease-in-out infinite;
}

/* Light streak tipis */
.hero-streak{
    position:absolute;
    width:44%;
    height:2px;
    border-radius:999px;
    opacity:.0;
    transform-origin:left center;
    filter:blur(.4px);
    animation:lightStreak 5.8s ease-in-out infinite;
}

.streak-1{
    left:11%;
    top:37%;
    transform:rotate(-18deg);
    background:linear-gradient(90deg, transparent, rgba(255,214,94,.80), transparent);
    animation-delay:.4s;
}

.streak-2{
    left:17%;
    top:58%;
    transform:rotate(12deg);
    background:linear-gradient(90deg, transparent, rgba(255,103,196,.48), transparent);
    animation-delay:2.0s;
}

.streak-3{
    left:39%;
    top:28%;
    transform:rotate(26deg);
    background:linear-gradient(90deg, transparent, rgba(83,226,255,.40), transparent);
    animation-delay:3.2s;
}

/* Bintang kecil emas */
.hero-spark{
    position:absolute;
    width:10px;
    height:10px;
    opacity:.2;
    animation:sparkTwinkle 3.1s ease-in-out infinite;
}

.hero-spark::before,
.hero-spark::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    background:#fff4b8;
    border-radius:999px;
    box-shadow:
        0 0 6px rgba(255,233,145,.95),
        0 0 14px rgba(255,185,50,.62);
}

.hero-spark::before{
    width:2px;
    height:100%;
}

.hero-spark::after{
    width:100%;
    height:2px;
}

.spark-1{left:14%;top:22%;animation-delay:.1s}
.spark-2{left:28%;top:16%;animation-delay:.9s;transform:scale(.65)}
.spark-3{left:72%;top:19%;animation-delay:1.5s}
.spark-4{left:84%;top:34%;animation-delay:.6s;transform:scale(.7)}
.spark-5{left:18%;top:62%;animation-delay:1.9s}
.spark-6{left:76%;top:64%;animation-delay:1.2s;transform:scale(.65)}
.spark-7{left:40%;top:80%;animation-delay:.5s;transform:scale(.58)}
.spark-8{left:58%;top:10%;animation-delay:2.2s;transform:scale(.72)}

/* Titik warna */
.hero-dot{
    position:absolute;
    width:8px;
    height:8px;
    border-radius:50%;
    opacity:.2;
    filter:blur(.2px);
    animation:colorDotTwinkle 4s ease-in-out infinite;
}

.dot-pink{
    background:#ff5bc8;
    box-shadow:
        0 0 8px rgba(255,91,200,.92),
        0 0 18px rgba(255,32,167,.55);
}

.dot-cyan{
    background:#66efff;
    box-shadow:
        0 0 8px rgba(102,239,255,.92),
        0 0 18px rgba(0,198,255,.50);
}

.dot-green{
    background:#a7ff78;
    box-shadow:
        0 0 8px rgba(167,255,120,.90),
        0 0 18px rgba(84,231,74,.48);
}

.dot-pink-1{left:17%;top:39%;animation-delay:.3s}
.dot-pink-2{left:78%;top:75%;animation-delay:2.1s}
.dot-cyan-1{left:74%;top:29%;animation-delay:1.1s}
.dot-cyan-2{left:34%;top:73%;animation-delay:2.8s}
.dot-green-1{left:16%;top:58%;animation-delay:1.7s}
.dot-green-2{left:67%;top:55%;animation-delay:.8s}

@keyframes innerGlowPulse{
    0%,100%{
        opacity:.56;
        transform:translate(-50%,-50%) scale(.97);
        filter:blur(8px) brightness(.95);
    }
    50%{
        opacity:.86;
        transform:translate(-50%,-50%) scale(1.035);
        filter:blur(6px) brightness(1.08);
    }
}

@keyframes sparkTwinkle{
    0%,100%{
        opacity:.12;
        filter:brightness(.9);
    }
    42%{
        opacity:.75;
        filter:brightness(1.5);
    }
    52%{
        opacity:1;
        filter:brightness(1.9);
    }
    68%{
        opacity:.28;
        filter:brightness(1);
    }
}

@keyframes colorDotTwinkle{
    0%,100%{
        opacity:.14;
        transform:scale(.75);
    }
    45%{
        opacity:.78;
        transform:scale(1.08);
    }
    58%{
        opacity:1;
        transform:scale(1.18);
    }
    75%{
        opacity:.32;
        transform:scale(.88);
    }
}

@keyframes lightStreak{
    0%,100%{
        opacity:0;
        filter:blur(1px);
    }
    40%{
        opacity:.0;
    }
    50%{
        opacity:.70;
        filter:blur(.2px);
    }
    60%{
        opacity:.08;
    }
}

@media (prefers-reduced-motion:reduce){
    .hero-inner-fx *{
        animation:none !important;
    }
}

/* =========================================================
   HERO V7.11 - MORE SPARKLE
   Menambah jumlah dan intensitas kelap-kelip.
   Tetap dikunci di dalam bingkai.
   ========================================================= */

/* Sedikit lebih terang */
.hero-spark{
    opacity:.24 !important;
}

.hero-spark::before,
.hero-spark::after{
    box-shadow:
        0 0 7px rgba(255,241,176,.98),
        0 0 16px rgba(255,192,58,.78),
        0 0 26px rgba(255,167,32,.35) !important;
}

/* Tambahan posisi bintang */
.spark-9{left:23% !important;top:31% !important;animation-delay:.35s;transform:scale(.52)}
.spark-10{left:36% !important;top:23% !important;animation-delay:1.25s;transform:scale(.78)}
.spark-11{left:66% !important;top:27% !important;animation-delay:.75s;transform:scale(.58)}
.spark-12{left:81% !important;top:49% !important;animation-delay:1.6s;transform:scale(.82)}
.spark-13{left:27% !important;top:76% !important;animation-delay:2.1s;transform:scale(.68)}
.spark-14{left:68% !important;top:82% !important;animation-delay:.55s;transform:scale(.55)}

/* Bikin kelap-kelip lebih terasa */
@keyframes sparkTwinkleV711{
    0%,100%{
        opacity:.08;
        transform:scale(.55);
        filter:brightness(.75);
    }
    26%{
        opacity:.32;
        transform:scale(.82);
        filter:brightness(1.1);
    }
    42%{
        opacity:.95;
        transform:scale(1.12);
        filter:brightness(1.75);
    }
    50%{
        opacity:1;
        transform:scale(1.32);
        filter:brightness(2.25);
    }
    58%{
        opacity:.55;
        transform:scale(.92);
        filter:brightness(1.25);
    }
    74%{
        opacity:.18;
        transform:scale(.68);
        filter:brightness(.9);
    }
}

.hero-spark{
    animation-name:sparkTwinkleV711 !important;
}

/* Titik warna juga sedikit lebih hidup */
@keyframes colorDotTwinkleV711{
    0%,100%{
        opacity:.10;
        transform:scale(.68);
    }
    38%{
        opacity:.72;
        transform:scale(1.08);
    }
    50%{
        opacity:1;
        transform:scale(1.28);
    }
    66%{
        opacity:.42;
        transform:scale(.9);
    }
}

.hero-dot{
    animation-name:colorDotTwinkleV711 !important;
}

/* Tambah sedikit pulse pada streak */
.hero-streak{
    animation-duration:4.8s !important;
}

/* =========================================================
   V7.12 - LOGO BESAR + MORE INNER SPARKLE
   ========================================================= */

/* Logo header diperbesar sedikit */
.site-logo,
.header-logo img,
.navbar-brand img,
.logo img{
    width:74px !important;
    height:74px !important;
    max-width:74px !important;
    max-height:74px !important;
    object-fit:contain !important;
}

/* Jika logo dibungkus anchor */
.site-logo,
.header-logo,
.navbar-brand,
.logo{
    min-width:74px;
}

/* Sedikit tambah glow emas lembut */
.hero-inner-glow{
    opacity:.95 !important;
    filter:blur(7px) brightness(1.06) !important;
}

/* Tambahan bintang sisi kiri/kanan/bawah */
.spark-15{left:11% !important;top:33% !important;animation-delay:.2s;transform:scale(.60)}
.spark-16{left:88% !important;top:28% !important;animation-delay:1.05s;transform:scale(.70)}
.spark-17{left:12% !important;top:73% !important;animation-delay:1.75s;transform:scale(.56)}
.spark-18{left:86% !important;top:69% !important;animation-delay:.68s;transform:scale(.76)}
.spark-19{left:31% !important;top:88% !important;animation-delay:2.15s;transform:scale(.62)}
.spark-20{left:67% !important;top:88% !important;animation-delay:1.32s;transform:scale(.66)}

/* Tambah titik warna di area kiri/kanan/bawah */
.dot-pink-3{left:84% !important;top:58% !important;animation-delay:1.45s}
.dot-cyan-3{left:14% !important;top:69% !important;animation-delay:2.05s}
.dot-green-3{left:53% !important;top:86% !important;animation-delay:.55s}

/* Light streak tambahan lebih menyebar namun tetap tipis */
.hero-inner-fx::before,
.hero-inner-fx::after{
    content:"";
    position:absolute;
    z-index:1;
    width:34%;
    height:2px;
    border-radius:999px;
    opacity:0;
    pointer-events:none;
    filter:blur(.45px);
}

.hero-inner-fx::before{
    left:8%;
    top:76%;
    transform:rotate(-11deg);
    background:linear-gradient(90deg,
        transparent,
        rgba(255,221,116,.72),
        rgba(255,119,207,.26),
        transparent);
    animation:extraStreakLeft 6.2s ease-in-out infinite;
}

.hero-inner-fx::after{
    right:7%;
    top:46%;
    transform:rotate(14deg);
    background:linear-gradient(90deg,
        transparent,
        rgba(91,233,255,.28),
        rgba(255,223,121,.65),
        transparent);
    animation:extraStreakRight 6.8s ease-in-out infinite;
}

@keyframes extraStreakLeft{
    0%,100%{opacity:0;transform:rotate(-11deg) translateX(-8px)}
    42%{opacity:.08}
    50%{opacity:.72;transform:rotate(-11deg) translateX(6px)}
    62%{opacity:.10}
}

@keyframes extraStreakRight{
    0%,100%{opacity:0;transform:rotate(14deg) translateX(8px)}
    37%{opacity:.08}
    50%{opacity:.66;transform:rotate(14deg) translateX(-5px)}
    63%{opacity:.10}
}

/* =========================================================
   HERO V7.16 - OUTER GLOW SPARKLE
   Neon box dihapus.
   Fokus: pernak-pernik emas sangat glowing + warna-warni terang
   di LUAR bingkai hero-product.
   ========================================================= */

.hero-product-stage{
    position:relative;
    isolation:isolate;
}

.hero-product-stage .hero-product-single{
    z-index:6 !important;
}

.hero-outer-fx{
    position:absolute;
    z-index:3;
    left:50%;
    top:50%;
    width:112%;
    height:108%;
    transform:translate(-50%,-50%);
    pointer-events:none;
    overflow:visible;
}

.outer-glow{
    position:absolute;
    border-radius:50%;
    mix-blend-mode:screen;
    filter:blur(18px);
    opacity:0;
    animation:outerGlowPulse 4.8s ease-in-out infinite;
}

.outer-glow-gold{
    width:24%;
    height:24%;
    left:7%;
    top:18%;
    background:radial-gradient(circle,
        rgba(255,255,230,1) 0%,
        rgba(255,229,133,.95) 12%,
        rgba(255,184,48,.78) 28%,
        rgba(255,131,14,.34) 50%,
        transparent 72%);
    animation-delay:.2s;
}

.outer-glow-pink{
    width:20%;
    height:20%;
    right:8%;
    top:28%;
    background:radial-gradient(circle,
        rgba(255,240,252,1) 0%,
        rgba(255,110,214,.92) 15%,
        rgba(255,35,166,.72) 34%,
        rgba(255,0,119,.28) 52%,
        transparent 72%);
    animation-delay:1.1s;
}

.outer-glow-cyan{
    width:18%;
    height:18%;
    left:10%;
    bottom:18%;
    background:radial-gradient(circle,
        rgba(238,255,255,1) 0%,
        rgba(112,241,255,.94) 14%,
        rgba(24,199,255,.68) 33%,
        rgba(0,123,255,.28) 52%,
        transparent 72%);
    animation-delay:2s;
}

.outer-glow-green{
    width:16%;
    height:16%;
    right:13%;
    bottom:14%;
    background:radial-gradient(circle,
        rgba(245,255,229,1) 0%,
        rgba(174,255,107,.90) 16%,
        rgba(103,226,62,.62) 35%,
        rgba(49,185,48,.24) 54%,
        transparent 72%);
    animation-delay:2.8s;
}

.outer-spark{
    position:absolute;
    width:14px;
    height:14px;
    opacity:.2;
    animation:outerSparkTwinkle 2.8s ease-in-out infinite;
}

.outer-spark::before,
.outer-spark::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    border-radius:999px;
    background:#fff6c8;
    box-shadow:
        0 0 8px rgba(255,247,205,1),
        0 0 18px rgba(255,213,90,.95),
        0 0 34px rgba(255,165,25,.55);
}

.outer-spark::before{
    width:2px;
    height:100%;
}

.outer-spark::after{
    width:100%;
    height:2px;
}

.outer-spark-1{left:3%;top:14%;animation-delay:.1s}
.outer-spark-2{left:12%;top:38%;animation-delay:.7s;transform:scale(.72)}
.outer-spark-3{left:5%;top:64%;animation-delay:1.4s;transform:scale(.90)}
.outer-spark-4{left:19%;bottom:4%;animation-delay:2.1s;transform:scale(.68)}
.outer-spark-5{right:4%;top:16%;animation-delay:.5s;transform:scale(.85)}
.outer-spark-6{right:11%;top:42%;animation-delay:1.2s}
.outer-spark-7{right:4%;top:66%;animation-delay:1.9s;transform:scale(.76)}
.outer-spark-8{right:18%;bottom:5%;animation-delay:2.4s}
.outer-spark-9{left:35%;top:2%;animation-delay:1s;transform:scale(.65)}
.outer-spark-10{right:34%;top:3%;animation-delay:1.6s;transform:scale(.62)}
.outer-spark-11{left:40%;bottom:1%;animation-delay:.9s;transform:scale(.74)}
.outer-spark-12{right:39%;bottom:0%;animation-delay:1.8s;transform:scale(.68)}

.outer-spark-2::before,
.outer-spark-2::after,
.outer-spark-7::before,
.outer-spark-7::after{
    background:#ff7edc;
    box-shadow:
        0 0 8px rgba(255,215,246,1),
        0 0 18px rgba(255,80,205,.95),
        0 0 34px rgba(255,0,153,.62);
}

.outer-spark-3::before,
.outer-spark-3::after,
.outer-spark-6::before,
.outer-spark-6::after{
    background:#6ceeff;
    box-shadow:
        0 0 8px rgba(220,253,255,1),
        0 0 18px rgba(70,227,255,.95),
        0 0 34px rgba(0,160,255,.60);
}

.outer-spark-4::before,
.outer-spark-4::after,
.outer-spark-8::before,
.outer-spark-8::after{
    background:#b7ff7c;
    box-shadow:
        0 0 8px rgba(242,255,225,1),
        0 0 18px rgba(163,255,106,.90),
        0 0 34px rgba(61,206,60,.52);
}

@keyframes outerGlowPulse{
    0%,100%{
        opacity:.26;
        transform:scale(.90);
        filter:blur(20px) brightness(.95);
    }
    45%{
        opacity:.95;
        transform:scale(1.08);
        filter:blur(15px) brightness(1.20);
    }
    60%{
        opacity:.62;
        transform:scale(1.02);
    }
}

@keyframes outerSparkTwinkle{
    0%,100%{
        opacity:.08;
        filter:brightness(.8);
    }
    34%{
        opacity:.40;
        filter:brightness(1.1);
    }
    48%{
        opacity:1;
        filter:brightness(2.1);
    }
    58%{
        opacity:.65;
        filter:brightness(1.35);
    }
    74%{
        opacity:.12;
        filter:brightness(.9);
    }
}

@media (prefers-reduced-motion:reduce){
    .hero-outer-fx *{
        animation:none !important;
    }
}

/* =========================================================
   V7.18 - PRODUCT CLEAN + BACK TO TOP VIDEO
   ========================================================= */

/* Label/pill lama pada halaman produk disembunyikan */
.product-highlights,
.product-points,
.product-tags,
.product-badges,
.product-info-grid{
    display:none !important;
}

/* Back to top video bulat */
.back-to-top-video{
    position:fixed;
    right:24px;
    bottom:118px;
    width:104px;
    height:104px;
    border:none;
    border-radius:50%;
    padding:0;
    margin:0;
    overflow:hidden;
    cursor:pointer;
    z-index:9998;
    background:#063d31;
    box-shadow:
        0 12px 32px rgba(0,0,0,.28),
        0 0 0 1px rgba(255,215,76,.18);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transform:translateY(14px) scale(.96);
    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease;
}

.back-to-top-video.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
}

.back-to-top-video-media{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
    z-index:1;
}

/* overlay gelap tipis supaya tulisan terbaca */
.back-to-top-video::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    border-radius:50%;
    background:rgba(0,34,28,.18);
    pointer-events:none;
}

.back-to-top-label{
    position:relative;
    z-index:3;
    display:block;
    color:#fff;
    text-align:center;
    text-transform:uppercase;
    font-weight:800;
    font-size:12px;
    line-height:1.18;
    letter-spacing:.2px;
    text-shadow:
        0 2px 4px rgba(0,0,0,.75),
        0 0 10px rgba(0,0,0,.55);
    pointer-events:none;
}

.back-to-top-video:hover{
    transform:translateY(-3px) scale(1.03);
}

.back-to-top-video:focus-visible{
    outline:3px solid #ffd54a;
    outline-offset:4px;
}

/* =========================================================
   V7.20 - HERO MOTION + PRODUCT IMAGE SIZE
   ========================================================= */

/* Hero product bergerak pelan: float + rotate + zoom lembut */
.hero-product-stage .hero-product-single{
    animation:heroProductPremiumMove 6.5s ease-in-out infinite !important;
    transform-origin:center center;
    will-change:transform, filter;
}

@keyframes heroProductPremiumMove{
    0%,100%{
        transform:translate3d(0,0,0) rotate(-0.6deg) scale(1);
        filter:
            drop-shadow(0 28px 36px rgba(0,0,0,.34))
            drop-shadow(0 0 14px rgba(255,190,40,.08));
    }
    25%{
        transform:translate3d(5px,-9px,0) rotate(0.4deg) scale(1.012);
    }
    50%{
        transform:translate3d(0,-17px,0) rotate(0.8deg) scale(1.025);
        filter:
            drop-shadow(0 34px 42px rgba(0,0,0,.31))
            drop-shadow(0 0 22px rgba(255,190,40,.16));
    }
    75%{
        transform:translate3d(-5px,-8px,0) rotate(-0.2deg) scale(1.012);
    }
}

/* Perbesar foredi-original.png pada section Produk */
.produk-image{
    overflow:visible !important;
}

.produk-image img{
    width:min(118%,610px) !important;
    max-width:none !important;
    filter:drop-shadow(0 28px 30px rgba(0,0,0,.20)) !important;
}

@media (prefers-reduced-motion:reduce){
    .hero-product-stage .hero-product-single{
        animation:none !important;
    }
}

/* =========================================================
   V7.22 FINAL - UKURAN PRODUK SEJAJAR DENGAN TEKS
   Target desktop mengikuti contoh Excel:
   gambar cukup besar, tetapi tidak lebih tinggi dari area teks.
   ========================================================= */

@media (min-width:994px){

    .produk .produk-wrapper{
        grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
        gap:26px !important;
        align-items:center !important;
        overflow:visible !important;
    }

    .produk .produk-image{
        width:100% !important;
        min-width:0 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        overflow:visible !important;
    }

    .produk .produk-image img{
        width:100% !important;
        max-width:665px !important;
        max-height:455px !important;
        height:auto !important;
        object-fit:contain !important;
        transform:none !important;
        transform-origin:center center !important;
        filter:drop-shadow(0 22px 28px rgba(0,0,0,.18)) !important;
    }

    .produk .produk-image:hover img{
        transform:scale(1.015) !important;
    }

    .produk .produk-content{
        max-width:620px !important;
        align-self:center !important;
    }
}

/* =========================================================
   V7.24 FINAL - TURUNKAN GAMBAR PRODUK SAJA
   Ukuran tetap seperti V7.22, hanya posisi desktop diturunkan.
   ========================================================= */

@media (min-width:994px){
    .produk .produk-image{
        padding-top:24px !important;
    }
}

/* =========================================================
   V7.25 - MANFAAT PREMIUM FINAL
   Urutan: BPOM > Formula Herbal > Antiseptik > Keharmonisan
   ========================================================= */

.manfaat-premium{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 50% -8%,
            rgba(255,215,79,.13) 0%,
            rgba(255,215,79,.045) 27%,
            transparent 48%),
        radial-gradient(circle at 8% 82%,
            rgba(28,143,102,.16) 0%,
            transparent 34%),
        linear-gradient(135deg,#053d2e 0%,#032f24 48%,#02291f 100%) !important;
    color:#fff;
}

.manfaat-premium::before,
.manfaat-premium::after{
    content:"";
    position:absolute;
    width:360px;
    height:360px;
    border-radius:50%;
    pointer-events:none;
    filter:blur(8px);
    opacity:.28;
}

.manfaat-premium::before{
    left:-185px;
    top:12%;
    background:radial-gradient(circle,
        rgba(255,213,79,.18),
        rgba(255,213,79,.03) 48%,
        transparent 72%);
}

.manfaat-premium::after{
    right:-190px;
    bottom:4%;
    background:radial-gradient(circle,
        rgba(30,181,126,.20),
        rgba(30,181,126,.03) 50%,
        transparent 72%);
}

.manfaat-premium > .container{
    position:relative;
    z-index:2;
}

.manfaat-premium .manfaat-title{
    width:min(900px,100%);
    margin-bottom:clamp(24px,3vh,38px) !important;
}

.manfaat-premium .manfaat-title > span{
    padding:8px 20px;
    border:1px solid rgba(255,213,79,.38);
    background:linear-gradient(135deg,
        rgba(255,213,79,.16),
        rgba(255,255,255,.055));
    color:#ffd84f;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.09),
        0 8px 22px rgba(0,0,0,.12);
}

.manfaat-premium .manfaat-title h2{
    color:#fff !important;
    text-shadow:0 5px 24px rgba(0,0,0,.30);
}

.manfaat-premium .manfaat-title p{
    max-width:720px;
    margin-inline:auto;
    color:rgba(255,255,255,.72) !important;
}

.manfaat-grid-premium{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    align-items:stretch;
    gap:clamp(14px,1.45vw,22px) !important;
}

.manfaat-card-premium{
    position:relative;
    isolation:isolate;
    min-height:clamp(390px,49vh,485px) !important;
    padding:clamp(20px,1.65vw,27px) clamp(17px,1.45vw,23px) 24px !important;
    display:flex !important;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    overflow:hidden;
    border-radius:26px !important;
    border:1px solid rgba(229,185,48,.64) !important;
    background:
        linear-gradient(155deg,
            rgba(17,91,68,.92) 0%,
            rgba(8,67,51,.96) 48%,
            rgba(5,52,40,.98) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.09),
        inset 0 0 0 1px rgba(255,215,79,.025),
        0 18px 45px rgba(0,0,0,.18) !important;
    text-align:center;
    transform:translateZ(0);
    transition:
        transform .38s cubic-bezier(.2,.75,.25,1),
        border-color .38s ease,
        box-shadow .38s ease,
        background .38s ease !important;
}

.manfaat-card-premium::before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:0;
    border-radius:inherit;
    background:
        linear-gradient(120deg,
            transparent 18%,
            rgba(255,255,255,.055) 36%,
            transparent 54%);
    transform:translateX(-120%);
    transition:transform .8s ease;
}

.manfaat-card-premium::after{
    content:"";
    position:absolute;
    z-index:3;
    left:17%;
    right:17%;
    top:0;
    height:1px;
    background:linear-gradient(90deg,
        transparent,
        rgba(255,229,121,.95),
        transparent);
    box-shadow:0 0 18px rgba(255,208,64,.55);
    opacity:.78;
}

.manfaat-card-premium:hover{
    transform:translateY(-9px) scale(1.012) !important;
    border-color:rgba(255,215,79,.95) !important;
    background:
        linear-gradient(155deg,
            rgba(21,105,78,.96) 0%,
            rgba(9,76,57,.98) 50%,
            rgba(5,55,42,.99) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 26px 58px rgba(0,0,0,.26),
        0 0 30px rgba(255,199,48,.10) !important;
}

.manfaat-card-premium:hover::before{
    transform:translateX(120%);
}

.manfaat-card-glow{
    position:absolute;
    z-index:-1;
    top:-100px;
    left:50%;
    width:250px;
    height:250px;
    transform:translateX(-50%);
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(255,216,83,.22) 0%,
        rgba(255,190,30,.08) 36%,
        transparent 70%);
    filter:blur(4px);
    opacity:.78;
    pointer-events:none;
    transition:opacity .38s ease,transform .38s ease;
}

.manfaat-card-premium:hover .manfaat-card-glow{
    opacity:1;
    transform:translateX(-50%) scale(1.15);
}

.manfaat-icon-premium{
    width:clamp(118px,8.6vw,150px) !important;
    height:clamp(118px,8.6vw,150px) !important;
    margin:0 auto clamp(14px,1.45vh,19px) !important;
    display:flex !important;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    border:0 !important;
    border-radius:50% !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
    transition:transform .42s cubic-bezier(.2,.75,.25,1),
               filter .42s ease;
}

.manfaat-icon-premium img{
    width:100% !important;
    height:100% !important;
    display:block;
    object-fit:contain !important;
    border-radius:50%;
    filter:
        drop-shadow(0 11px 16px rgba(0,0,0,.30))
        drop-shadow(0 0 10px rgba(255,197,42,.10));
}

.manfaat-card-premium:hover .manfaat-icon-premium{
    transform:translateY(-4px) scale(1.055);
    filter:brightness(1.07);
}

.manfaat-card-copy{
    width:100%;
    display:flex;
    flex:1 1 auto;
    flex-direction:column;
    align-items:center;
}

.manfaat-kicker{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:24px;
    margin-bottom:9px;
    padding:4px 10px;
    border:1px solid rgba(255,215,79,.20);
    border-radius:999px;
    background:rgba(255,215,79,.075);
    color:#f6d66f;
    font-size:10px;
    line-height:1.2;
    font-weight:800;
    letter-spacing:.105em;
}

.manfaat-card-premium h3{
    margin:0 0 11px !important;
    color:#fff !important;
    font-size:clamp(16px,1.15vw,20px) !important;
    line-height:1.28 !important;
    font-weight:800;
    text-wrap:balance;
}

.manfaat-card-premium p{
    margin:0 !important;
    color:rgba(245,250,247,.77) !important;
    font-size:clamp(12px,.82vw,14px) !important;
    line-height:1.68 !important;
    font-weight:400;
}

.manfaat-card-premium p strong{
    color:rgba(255,255,255,.94);
    font-weight:700;
}

/* Note lama dihapus dari HTML, ini hanya pengaman */
.manfaat-premium .section-note{
    display:none !important;
}

/* =========================================================
   V7.26 - MANFAAT PREMIUM COMPACT FINAL
   Ikon WEBP + card lebih rapi, elegan, dan muat satu layar.
   ========================================================= */

@media (min-width:994px){

    .manfaat-premium{
        min-height:calc(100svh - var(--header-height)) !important;
        padding:34px 0 38px !important;
        display:flex !important;
        align-items:center !important;
    }

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

    .manfaat-premium .manfaat-title{
        margin:0 auto 22px !important;
    }

    .manfaat-premium .manfaat-title > span{
        margin-bottom:8px !important;
        padding:7px 18px !important;
        font-size:13px !important;
    }

    .manfaat-premium .manfaat-title h2{
        margin-bottom:7px !important;
        font-size:clamp(2rem,2.65vw,2.7rem) !important;
        line-height:1.08 !important;
    }

    .manfaat-premium .manfaat-title p{
        max-width:760px !important;
        font-size:14px !important;
        line-height:1.5 !important;
    }

    .manfaat-grid-premium{
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:18px !important;
        align-items:stretch !important;
    }

    .manfaat-card-premium{
        min-height:0 !important;
        height:100% !important;
        padding:18px 18px 21px !important;
        border-radius:24px !important;
        justify-content:flex-start !important;
    }

    .manfaat-icon-premium{
        width:118px !important;
        height:118px !important;
        margin:0 auto 11px !important;
        flex:0 0 118px !important;
    }

    .manfaat-icon-premium img{
        width:118px !important;
        height:118px !important;
        max-width:none !important;
        object-fit:contain !important;
        border-radius:50% !important;
    }

    .manfaat-kicker{
        min-height:22px !important;
        margin-bottom:7px !important;
        padding:3px 9px !important;
        font-size:9px !important;
        letter-spacing:.09em !important;
    }

    .manfaat-card-premium h3{
        margin:0 0 8px !important;
        font-size:clamp(15px,1.02vw,18px) !important;
        line-height:1.22 !important;
    }

    .manfaat-card-premium p{
        font-size:12.2px !important;
        line-height:1.53 !important;
        color:rgba(248,252,250,.79) !important;
    }
}

/* Warna glow individual agar 4 card terasa hidup namun tetap satu identitas */
.manfaat-card-premium:nth-child(1) .manfaat-card-glow{
    background:radial-gradient(circle,
        rgba(255,218,90,.30) 0%,
        rgba(76,158,255,.10) 34%,
        transparent 70%) !important;
}

.manfaat-card-premium:nth-child(2) .manfaat-card-glow{
    background:radial-gradient(circle,
        rgba(212,255,101,.21) 0%,
        rgba(255,200,55,.11) 35%,
        transparent 70%) !important;
}

.manfaat-card-premium:nth-child(3) .manfaat-card-glow{
    background:radial-gradient(circle,
        rgba(91,255,164,.20) 0%,
        rgba(255,203,59,.12) 38%,
        transparent 70%) !important;
}

.manfaat-card-premium:nth-child(4) .manfaat-card-glow{
    background:radial-gradient(circle,
        rgba(255,205,74,.27) 0%,
        rgba(227,123,255,.07) 38%,
        transparent 70%) !important;
}

/* Ikon tetap utuh; hindari alt text rusak memanjang jika file gagal */
.manfaat-icon-premium{
    overflow:hidden !important;
}

.manfaat-icon-premium img{
    color:transparent !important;
    font-size:0 !important;
}


/* =========================================================
   V7.27 - NAVIGATION FLOW UPDATE
   Beranda > Produk > Keunggulan > Cara Pakai > Testimoni
   > FAQ > Keuntungan > Hubungi Admin
   Tidak mengubah desain/isi section.
   ========================================================= */

/* =========================================================
   V7.28 - KEUNGGULAN SPACING & CARD LANDSCAPE
   ========================================================= */
@media (min-width:994px){
    #keunggulan.manfaat-premium{
        min-height:calc(100svh - var(--header-height)) !important;
        padding:16px 0 118px !important;
        align-items:flex-start !important;
    }
    #keunggulan.manfaat-premium > .container{
        width:min(100% - 64px,1480px) !important;
        margin-top:0 !important;
    }
    #keunggulan .manfaat-title{margin:0 auto 16px !important;}
    #keunggulan .manfaat-title > span{margin-bottom:6px !important;}
    #keunggulan .manfaat-title h2{margin-bottom:5px !important;}
    #keunggulan .manfaat-title p{margin-bottom:0 !important;}
    #keunggulan .manfaat-grid-premium{
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:16px !important;
        align-items:stretch !important;
        padding-right:112px !important;
    }
    #keunggulan .manfaat-card-premium{
        min-height:0 !important;
        height:auto !important;
        padding:16px 16px 18px !important;
        border-radius:22px !important;
    }
    #keunggulan .manfaat-icon-premium{
        width:106px !important;height:106px !important;flex-basis:106px !important;margin-bottom:9px !important;
    }
    #keunggulan .manfaat-icon-premium img{width:106px !important;height:106px !important;}
    #keunggulan .manfaat-kicker{margin-bottom:6px !important;}
    #keunggulan .manfaat-card-premium h3{margin-bottom:7px !important;}
}
@media (min-width:1500px){#keunggulan .manfaat-grid-premium{padding-right:92px !important;}}

/* =========================================================
   V7.29 - KEUNGGULAN CARD TALLER + TEXT SLIGHTLY LARGER
   ========================================================= */
@media (min-width:994px){
    #keunggulan .manfaat-card-premium{
        min-height:455px !important;
        padding-top:22px !important;
        padding-bottom:26px !important;
    }
    #keunggulan .manfaat-card-premium h3{
        font-size:clamp(16.5px,1.08vw,19px) !important;
        line-height:1.30 !important;
    }
    #keunggulan .manfaat-card-premium p{
        font-size:13.6px !important;
        line-height:1.66 !important;
    }
}

/* =========================================================
   V7.32 - CARA PAKAI FINAL REFINEMENT ONLY
   MASTER: 2026-08-08 08:56
   Tidak menyentuh section Keunggulan.
   ========================================================= */

@media (min-width:994px){

    /* 1) Judul dinaikkan sedikit saja */
    #carapakai > .container{
        grid-template-rows:72px minmax(0,1fr) 104px !important;
    }

    #carapakai .section-title{
        transform:translateY(0) !important;
    }

    /* 2) Gambar kiri + card diperbesar vertikal secara ringan */
    #carapakai .cara-media{
        height:min(60vh,545px) !important;
    }

    #carapakai .cara-content-final{
        gap:13px !important;
    }

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

    /* 3) Teks card dibesarkan sedikit */
    #carapakai .cara-content-final .step-text h3{
        font-size:clamp(1.10rem,1.16vw,1.27rem) !important;
        line-height:1.24 !important;
    }

    #carapakai .cara-content-final .step-text p{
        font-size:clamp(.86rem,.90vw,.98rem) !important;
        line-height:1.45 !important;
    }

    /* 4) Kotak PERHATIAN DIPERKECIL kanan-kiri.
          Posisi vertikal tetap mengikuti V5.3. */
    #carapakai .cara-warning-final{
        width:min(48%,560px) !important;
    }
}

/* Laptop pendek: tambah ukuran tetap dijaga agar tidak melewati header/footer */
@media (min-width:994px) and (max-height:820px){

    #carapakai > .container{
        grid-template-rows:58px minmax(0,1fr) 78px !important;
    }

    #carapakai .section-title{
        transform:translateY(0) !important;
    }

    #carapakai .cara-media{
        height:min(52vh,430px) !important;
    }

    #carapakai .cara-content-final{
        gap:9px !important;
    }

    #carapakai .cara-content-final .step,
    #carapakai .cara-content-final .step-timed{
        min-height:110px !important;
        padding:11px 13px !important;
    }

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

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

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


/* =========================================================
   V7.33 - TESTIMONI CARD HOVER + FONT REFINEMENT ONLY
   Master: 2026-08-08 08:56
   Tidak menyentuh Keunggulan / Cara Pakai / section lain.
   ========================================================= */

.testimoni-text-card{
    min-height:250px !important;
    padding:24px !important;
    transform-origin:center center;
    transition:
        transform .34s cubic-bezier(.2,.75,.25,1),
        border-color .34s ease,
        box-shadow .34s ease,
        background .34s ease !important;
}

.testimoni-text-card:hover{
    position:relative;
    z-index:8;
    transform:translateY(-6px) scale(1.045) !important;
    border-color:#ffd54f !important;
    background:
        linear-gradient(180deg,rgba(21,88,66,.99),rgba(9,55,41,.99)) !important;
    box-shadow:
        0 28px 54px rgba(0,0,0,.34),
        0 0 28px rgba(255,213,79,.18) !important;
}

.testimoni-text-card:hover .testimoni-stars{
    text-shadow:0 0 13px rgba(255,213,79,.42);
}

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

.testimoni-text-user strong{
    font-size:14px !important;
}

.testimoni-text-user span{
    font-size:11.5px !important;
}

.testimoni-card-top .testimoni-stars{
    font-size:18px !important;
}


/* Laptop pendek: diperbesar sedikit, tetap muat satu layar */
@media (min-width:994px) and (max-height:820px){

    .testimoni-text-card{
        min-height:195px !important;
        padding:16px !important;
    }

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

    .testimoni-card-top .testimoni-stars{
        font-size:14px !important;
    }

    .testimoni-message{
        font-size:11.5px !important;
        line-height:1.42 !important;
    }

    .testimoni-text-user strong{
        font-size:11px !important;
    }

    .testimoni-text-user span{
        font-size:9.2px !important;
    }

    .testimoni-user-icon{
        width:35px !important;
        height:35px !important;
        flex-basis:35px !important;
    }
}

/* =========================================================
   V7.34 - KEUNTUNGAN PREMIUM
   6 card benefit baru dengan ikon khusus halaman Keuntungan.
   Tidak mengubah section lain.
   ========================================================= */

.keuntungan-premium{
    overflow:hidden;
    background:
        radial-gradient(circle at 50% 15%,rgba(255,213,79,.10),transparent 34%),
        linear-gradient(180deg,#0a4635 0%,#06382b 100%);
    color:#ffffff;
}

.keuntungan-premium::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 8% 55%,rgba(0,255,136,.06),transparent 24%),
        radial-gradient(circle at 92% 55%,rgba(255,213,79,.07),transparent 24%);
}

.keuntungan-premium > .container{
    position:relative;
    z-index:1;
}

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

.keuntungan-title > span{
    background:rgba(255,213,79,.12);
    border:1px solid rgba(255,213,79,.34);
    color:var(--secondary);
}

.keuntungan-title h2{
    color:#ffffff;
}

.keuntungan-title p{
    color:rgba(255,255,255,.80);
}

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

.keuntungan-card{
    position:relative;
    isolation:isolate;
    min-height:330px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding:20px 22px 24px;
    border:1px solid rgba(255,213,79,.54);
    border-radius:24px;
    background:
        linear-gradient(180deg,rgba(20,91,68,.90),rgba(7,65,48,.94));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 18px 38px rgba(0,0,0,.16);
    text-align:center;
    transition:
        transform .34s cubic-bezier(.2,.75,.25,1),
        border-color .34s ease,
        box-shadow .34s ease,
        background .34s ease;
}

.keuntungan-card::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    opacity:.55;
    background:linear-gradient(135deg,rgba(255,255,255,.05),transparent 34%);
}

.keuntungan-glow{
    position:absolute;
    left:50%;
    top:-90px;
    z-index:-1;
    width:220px;
    height:220px;
    transform:translateX(-50%);
    border-radius:50%;
    pointer-events:none;
    background:radial-gradient(circle,rgba(255,213,79,.18),transparent 68%);
    filter:blur(4px);
    transition:opacity .34s ease,transform .34s ease;
}

.keuntungan-card img{
    width:122px;
    height:122px;
    object-fit:contain;
    margin-bottom:10px;
    filter:
        drop-shadow(0 10px 16px rgba(0,0,0,.25))
        drop-shadow(0 0 12px rgba(255,213,79,.12));
    transition:transform .34s cubic-bezier(.2,.75,.25,1),filter .34s ease;
}

.keuntungan-kicker{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:26px;
    margin-bottom:9px;
    padding:5px 12px;
    border-radius:999px;
    border:1px solid rgba(255,213,79,.36);
    background:rgba(255,213,79,.09);
    color:var(--secondary);
    font-size:10px;
    line-height:1;
    font-weight:800;
    letter-spacing:.08em;
}

.keuntungan-card h3{
    margin-bottom:8px;
    color:#ffffff;
    font-size:18px;
    line-height:1.28;
    font-weight:800;
}

.keuntungan-card p{
    max-width:390px;
    color:rgba(255,255,255,.82);
    font-size:13px;
    line-height:1.58;
}

.keuntungan-card p strong{
    color:#ffffff;
    font-weight:800;
}

.keuntungan-card:hover{
    z-index:8;
    transform:translateY(-7px) scale(1.035);
    border-color:#ffd54f;
    background:
        linear-gradient(180deg,rgba(26,104,77,.98),rgba(8,68,50,.98));
    box-shadow:
        0 28px 55px rgba(0,0,0,.30),
        0 0 28px rgba(255,213,79,.15);
}

.keuntungan-card:hover img{
    transform:translateY(-4px) scale(1.07);
    filter:
        drop-shadow(0 13px 18px rgba(0,0,0,.30))
        drop-shadow(0 0 17px rgba(255,213,79,.26));
}

.keuntungan-card:hover .keuntungan-glow{
    transform:translateX(-50%) scale(1.18);
}

.keuntungan-card-priority{
    border-color:rgba(255,213,79,.72);
    background:
        radial-gradient(circle at 50% 0%,rgba(255,213,79,.10),transparent 42%),
        linear-gradient(180deg,rgba(22,94,70,.96),rgba(7,61,46,.96));
}


/* Desktop pendek: tetap muat dengan nyaman */
@media (min-width:994px) and (max-height:820px){

    #keuntungan.keuntungan-premium{
        padding:18px 0 28px !important;
        align-items:flex-start !important;
    }

    #keuntungan .keuntungan-title{
        margin-bottom:16px !important;
    }

    #keuntungan .keuntungan-title > span{
        margin-bottom:7px !important;
        padding:7px 15px !important;
        font-size:12px !important;
    }

    #keuntungan .keuntungan-title h2{
        margin-bottom:6px !important;
        font-size:clamp(2rem,2.8vw,2.55rem) !important;
    }

    #keuntungan .keuntungan-title p{
        font-size:14px !important;
    }

    #keuntungan .keuntungan-grid{
        gap:12px !important;
    }

    #keuntungan .keuntungan-card{
        min-height:235px !important;
        padding:12px 15px 15px !important;
        border-radius:19px !important;
    }

    #keuntungan .keuntungan-card img{
        width:82px !important;
        height:82px !important;
        margin-bottom:5px !important;
    }

    #keuntungan .keuntungan-kicker{
        min-height:20px !important;
        margin-bottom:5px !important;
        padding:4px 9px !important;
        font-size:8px !important;
    }

    #keuntungan .keuntungan-card h3{
        margin-bottom:5px !important;
        font-size:15px !important;
    }

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

    #keuntungan .keuntungan-card:hover{
        transform:translateY(-4px) scale(1.025) !important;
    }
}

/* =========================================================
   V7.35 - KEUNTUNGAN TITLE 1 BARIS + CARD LEBIH BESAR
   Hanya section #keuntungan.
   ========================================================= */

@media (min-width:1200px){

    #keuntungan.keuntungan-premium{
        padding-top:24px !important;
        padding-bottom:34px !important;
        align-items:flex-start !important;
    }

    #keuntungan .container{
        width:min(100% - 44px,1560px) !important;
    }

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

    #keuntungan .keuntungan-title > span{
        margin-bottom:8px !important;
    }

    #keuntungan .keuntungan-title h2{
        white-space:nowrap !important;
        font-size:clamp(2.15rem,2.75vw,3.15rem) !important;
        line-height:1.06 !important;
        margin-bottom:7px !important;
    }

    #keuntungan .keuntungan-title p{
        white-space:nowrap !important;
        font-size:15px !important;
        line-height:1.3 !important;
        margin-bottom:0 !important;
    }

    #keuntungan .keuntungan-grid{
        gap:16px !important;
        align-items:stretch !important;
    }

    #keuntungan .keuntungan-card{
        min-height:355px !important;
        padding:22px 20px 26px !important;
    }

    #keuntungan .keuntungan-card img{
        width:128px !important;
        height:128px !important;
        margin-bottom:11px !important;
    }

    #keuntungan .keuntungan-kicker{
        font-size:10.5px !important;
        margin-bottom:9px !important;
    }

    #keuntungan .keuntungan-card h3{
        font-size:18.5px !important;
        line-height:1.27 !important;
        margin-bottom:9px !important;
    }

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

@media (min-width:1200px) and (max-height:820px){

    #keuntungan.keuntungan-premium{
        padding-top:14px !important;
        padding-bottom:20px !important;
    }

    #keuntungan .keuntungan-title{
        margin-bottom:12px !important;
    }

    #keuntungan .keuntungan-title h2{
        font-size:clamp(1.95rem,2.35vw,2.55rem) !important;
        margin-bottom:5px !important;
    }

    #keuntungan .keuntungan-title p{
        font-size:13px !important;
    }

    #keuntungan .keuntungan-card{
        min-height:255px !important;
        padding:13px 14px 16px !important;
    }

    #keuntungan .keuntungan-card img{
        width:88px !important;
        height:88px !important;
        margin-bottom:5px !important;
    }

    #keuntungan .keuntungan-card h3{
        font-size:15.5px !important;
        margin-bottom:5px !important;
    }

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

/* V7.36 - khusus halaman Keuntungan */
@media (min-width:1200px){
  #keuntungan .keuntungan-grid{
    width:94% !important;
    max-width:1500px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  #keuntungan .keuntungan-kicker{font-size:11px !important;}
  #keuntungan .keuntungan-card h3{
    font-size:19.5px !important;
    line-height:1.28 !important;
  }
  #keuntungan .keuntungan-card p{
    font-size:14.5px !important;
    line-height:1.60 !important;
  }
}
@media (min-width:1200px) and (max-height:820px){
  #keuntungan .keuntungan-grid{width:94% !important;}
  #keuntungan .keuntungan-kicker{font-size:10.5px !important;}
  #keuntungan .keuntungan-card h3{font-size:16.5px !important;}
  #keuntungan .keuntungan-card p{
    font-size:11.8px !important;
    line-height:1.48 !important;
  }
}


/* =========================================================
   V7.37 - KEUNTUNGAN: CARD SEDIKIT LEBIH RAMPING,
   FONT SEDIKIT LEBIH BESAR, GRID GESER KE KIRI
   Hanya section #keuntungan.
   ========================================================= */

@media (min-width:1200px){

    #keuntungan .keuntungan-grid{
        width:91.5% !important;
        max-width:1450px !important;
        margin-left:3.2% !important;
        margin-right:auto !important;
        column-gap:16px !important;
    }

    #keuntungan .keuntungan-kicker{
        font-size:11.4px !important;
    }

    #keuntungan .keuntungan-card h3{
        font-size:20.2px !important;
        line-height:1.28 !important;
    }

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

/* Desktop/laptop pendek */
@media (min-width:1200px) and (max-height:820px){

    #keuntungan .keuntungan-grid{
        width:91.5% !important;
        max-width:1450px !important;
        margin-left:3.2% !important;
        margin-right:auto !important;
    }

    #keuntungan .keuntungan-kicker{
        font-size:10.8px !important;
    }

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

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


/* V7.38 - keuntungan: card sedikit lebih kecil + grid lebih ke kiri */
@media (min-width:1200px){
  #keuntungan .keuntungan-grid{
    width:89% !important;
    max-width:1410px !important;
    margin-left:2.3% !important;
    margin-right:auto !important;
    column-gap:16px !important;
  }
}
@media (min-width:1200px) and (max-height:820px){
  #keuntungan .keuntungan-grid{
    width:89% !important;
    max-width:1410px !important;
    margin-left:2.3% !important;
    margin-right:auto !important;
  }
}

/* =========================================================
   V7.40 - CARA PAKAI: POSISI + UKURAN RINGAN
   Hanya section #carapakai. Section lain tetap terkunci.
   ========================================================= */
@media (min-width:994px){
    /* Geser satu blok gambar + 6 card sedikit ke kiri */
    #carapakai .cara-wrapper-final{
        transform:translateX(-22px) !important;
        width:calc(100% - 22px) !important;
    }

    /* Gambar dibuat sedikit lebih tinggi */
    #carapakai .cara-media{
        height:min(62vh,565px) !important;
    }

    /* Enam card dibuat sedikit lebih tinggi */
    #carapakai .cara-content-final .step,
    #carapakai .cara-content-final .step-timed{
        min-height:146px !important;
        padding:19px 19px !important;
    }

    /* Teks card dinaikkan sedikit saja */
    #carapakai .cara-content-final .step-text h3{
        font-size:clamp(1.14rem,1.20vw,1.30rem) !important;
        line-height:1.22 !important;
    }

    #carapakai .cara-content-final .step-text p{
        font-size:clamp(.90rem,.94vw,1.01rem) !important;
        line-height:1.42 !important;
    }
}

/* Laptop/desktop dengan tinggi layar lebih pendek: tetap aman dari header/footer */
@media (min-width:994px) and (max-height:820px){
    #carapakai .cara-wrapper-final{
        transform:translateX(-18px) !important;
        width:calc(100% - 18px) !important;
    }

    #carapakai .cara-media{
        height:min(54vh,445px) !important;
    }

    #carapakai .cara-content-final .step,
    #carapakai .cara-content-final .step-timed{
        min-height:116px !important;
        padding:13px 14px !important;
    }

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

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

/* =========================================================
   V7.41 - TESTIMONI: POSISI + TINGGI + FONT RINGAN
   Hanya section #testimoni. Section lain tetap terkunci.
   ========================================================= */
@media (min-width:994px){
    /* Geser keenam card sedikit ke kiri agar aman dari tombol floating */
    #testimoni .testimoni-text-grid{
        transform:translateX(-20px) !important;
        width:calc(100% - 20px) !important;
    }

    /* Card sedikit lebih tinggi */
    #testimoni .testimoni-text-card{
        min-height:266px !important;
        padding:25px !important;
    }

    /* Teks di dalam card diperbesar sedikit */
    #testimoni .testimoni-message{
        font-size:15.2px !important;
        line-height:1.58 !important;
    }

    #testimoni .testimoni-text-user strong{
        font-size:14.5px !important;
    }

    #testimoni .testimoni-text-user span{
        font-size:12px !important;
    }

    #testimoni .testimoni-card-top .testimoni-stars{
        font-size:18.5px !important;
    }
}

/* Laptop/desktop pendek: penambahan tetap ringan agar muat satu layar */
@media (min-width:994px) and (max-height:820px){
    #testimoni .testimoni-text-grid{
        transform:translateX(-17px) !important;
        width:calc(100% - 17px) !important;
    }

    #testimoni .testimoni-text-card{
        min-height:205px !important;
        padding:17px !important;
    }

    #testimoni .testimoni-message{
        font-size:12.1px !important;
        line-height:1.43 !important;
    }

    #testimoni .testimoni-text-user strong{
        font-size:11.5px !important;
    }

    #testimoni .testimoni-text-user span{
        font-size:9.6px !important;
    }

    #testimoni .testimoni-card-top .testimoni-stars{
        font-size:14.5px !important;
    }
}

/* =========================================================
   V7.42 - KEUNTUNGAN: CARD SEDIKIT LEBIH PENDEK
   Hanya tinggi/padding vertikal card #keuntungan.
   ========================================================= */
@media (min-width:1200px){
    #keuntungan .keuntungan-card{
        min-height:325px !important;
        padding-top:18px !important;
        padding-bottom:20px !important;
    }
}

@media (min-width:1200px) and (max-height:820px){
    #keuntungan .keuntungan-card{
        min-height:238px !important;
        padding-top:11px !important;
        padding-bottom:13px !important;
    }
}

/* =========================================================
   V7.43 - HUBUNGI ADMIN: PREMIUM CONTACT CTA
   Hanya section #pesan. Section lain tetap terkunci.
   ========================================================= */
#pesan .cta-box{
    width:min(1120px,94%) !important;
    padding:42px 46px 38px !important;
    position:relative;
    overflow:hidden;
}
#pesan .cta-box::before{
    content:"";
    position:absolute;
    inset:-35% 18% auto;
    height:190px;
    background:radial-gradient(circle,rgba(255,213,79,.12),transparent 68%);
    pointer-events:none;
}
#pesan .cta-box > *{position:relative;z-index:1}
#pesan .cta-box h2{
    font-size:clamp(2.2rem,3.4vw,3.35rem) !important;
    margin-bottom:10px !important;
}
#pesan .cta-lead{
    max-width:820px !important;
    margin-bottom:24px !important;
    font-size:16px;
}
#pesan .cta-info-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin:0 auto 25px;
}
#pesan .cta-info-card{
    min-height:145px;
    padding:18px 16px;
    border:1px solid rgba(255,213,79,.48);
    border-radius:18px;
    background:linear-gradient(180deg,rgba(14,88,65,.78),rgba(7,53,40,.88));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 25px rgba(0,0,0,.14);
    transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}
#pesan .cta-info-card:hover{
    transform:translateY(-6px) scale(1.018);
    border-color:#ffd54f;
    box-shadow:0 15px 32px rgba(0,0,0,.22),0 0 22px rgba(255,213,79,.13);
}
#pesan .cta-info-icon{
    width:46px;height:46px;margin:0 auto 9px;
    display:grid;place-items:center;
    border-radius:50%;
    font-size:23px;
    background:rgba(255,213,79,.10);
    border:1px solid rgba(255,213,79,.45);
    box-shadow:0 0 18px rgba(255,213,79,.10);
}
#pesan .cta-info-card h3{
    margin:0 0 6px;
    color:#ffd54f;
    font-size:17px;
    line-height:1.25;
}
#pesan .cta-info-card p{
    margin:0 !important;
    color:rgba(255,255,255,.80) !important;
    font-size:13.5px;
    line-height:1.45;
}
#pesan .cta-wa-button{
    min-width:360px;
    justify-content:center;
    box-shadow:0 12px 30px rgba(37,211,102,.24),0 0 22px rgba(37,211,102,.12);
}
#pesan .cta-note{
    display:block;
    margin-top:12px;
    color:rgba(255,255,255,.60);
    font-size:11.5px;
}
@media (min-width:994px) and (max-height:820px){
    #pesan .cta-box{padding:28px 40px 25px !important}
    #pesan .cta-box h2{font-size:2.55rem !important}
    #pesan .cta-lead{margin-bottom:16px !important;font-size:14px}
    #pesan .cta-info-grid{margin-bottom:17px;gap:12px}
    #pesan .cta-info-card{min-height:112px;padding:12px 13px}
    #pesan .cta-info-icon{width:36px;height:36px;font-size:18px;margin-bottom:6px}
    #pesan .cta-info-card h3{font-size:14px;margin-bottom:4px}
    #pesan .cta-info-card p{font-size:11.5px !important;line-height:1.35}
    #pesan .cta-note{margin-top:8px;font-size:10px}
}

/* =========================================================
   V7.44 - HUBUNGI ADMIN LIVE ANIMATION
   Hanya section #pesan.
   - Tombol WhatsApp berdenyut
   - Bintang warna-warni berkelap-kelip
   - 3 mini-card bergerak halus seperti hero product
   ========================================================= */

#pesan .cta-box{
    isolation:isolate;
}

/* ---------- COLORFUL TWINKLING STARS ---------- */
#pesan .cta-sparkles{
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    overflow:hidden;
    pointer-events:none;
    border-radius:inherit;
}

#pesan .cta-sparkles .spark{
    position:absolute;
    width:7px;
    height:7px;
    border-radius:50%;
    opacity:.18;
    transform:scale(.35) rotate(0deg);
    filter:
        drop-shadow(0 0 5px currentColor)
        drop-shadow(0 0 10px currentColor);
    animation:ctaStarTwinkle 2.7s ease-in-out infinite;
}

#pesan .cta-sparkles .spark::before,
#pesan .cta-sparkles .spark::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    background:currentColor;
    border-radius:999px;
    transform:translate(-50%,-50%);
}
#pesan .cta-sparkles .spark::before{
    width:1px;
    height:18px;
}
#pesan .cta-sparkles .spark::after{
    width:18px;
    height:1px;
}

#pesan .spark-1{left:5%;top:15%;color:#ffd54f;animation-delay:.1s}
#pesan .spark-2{left:15%;top:66%;color:#00ffb3;animation-delay:1.1s}
#pesan .spark-3{left:25%;top:25%;color:#50d8ff;animation-delay:.65s}
#pesan .spark-4{left:34%;top:78%;color:#ff73d1;animation-delay:1.55s}
#pesan .spark-5{left:44%;top:13%;color:#ffd54f;animation-delay:.35s}
#pesan .spark-6{left:52%;top:70%;color:#9b7cff;animation-delay:1.9s}
#pesan .spark-7{left:61%;top:23%;color:#00ffb3;animation-delay:1.25s}
#pesan .spark-8{left:70%;top:80%;color:#ff8b55;animation-delay:.8s}
#pesan .spark-9{left:80%;top:18%;color:#58c7ff;animation-delay:1.65s}
#pesan .spark-10{left:90%;top:59%;color:#ffd54f;animation-delay:.45s}
#pesan .spark-11{left:8%;top:86%;color:#9b7cff;animation-delay:2.1s}
#pesan .spark-12{left:94%;top:31%;color:#ff73d1;animation-delay:1.35s}

@keyframes ctaStarTwinkle{
    0%,100%{
        opacity:.10;
        transform:scale(.25) rotate(0deg);
    }
    45%{
        opacity:1;
        transform:scale(1.05) rotate(90deg);
    }
    65%{
        opacity:.45;
        transform:scale(.62) rotate(145deg);
    }
}

/* ---------- FLOATING MINI CARDS ---------- */
#pesan .cta-info-card{
    will-change:transform;
    animation:ctaCardFloat 5.2s ease-in-out infinite;
}

#pesan .cta-info-card:nth-child(2){
    animation-delay:-1.7s;
}
#pesan .cta-info-card:nth-child(3){
    animation-delay:-3.4s;
}

@keyframes ctaCardFloat{
    0%,100%{
        transform:translateY(0) rotate(0deg);
    }
    50%{
        transform:translateY(-8px) rotate(.15deg);
    }
}

/* Hover tetap lebih kuat daripada gerakan otomatis */
#pesan .cta-info-card:hover{
    animation-play-state:paused;
    transform:translateY(-9px) scale(1.035);
}

/* glow bergerak lembut di dalam kartu */
#pesan .cta-info-card::before{
    content:"";
    position:absolute;
    inset:-45% -25%;
    z-index:-1;
    pointer-events:none;
    opacity:.28;
    background:
        radial-gradient(circle at 50% 50%,rgba(255,213,79,.20),transparent 43%);
    transform:translateX(-22%);
    animation:ctaCardGlow 4.6s ease-in-out infinite;
}

#pesan .cta-info-card:nth-child(2)::before{animation-delay:-1.5s}
#pesan .cta-info-card:nth-child(3)::before{animation-delay:-3s}

@keyframes ctaCardGlow{
    0%,100%{transform:translateX(-24%) scale(.92);opacity:.18}
    50%{transform:translateX(24%) scale(1.08);opacity:.42}
}

/* ---------- WHATSAPP PULSE ---------- */
#pesan .cta-wa-button{
    position:relative;
    isolation:isolate;
    animation:ctaWaPulse 1.9s ease-in-out infinite;
}

#pesan .cta-wa-button::before,
#pesan .cta-wa-button::after{
    content:"";
    position:absolute;
    inset:-7px;
    z-index:-1;
    border-radius:999px;
    border:2px solid rgba(37,211,102,.42);
    opacity:0;
    pointer-events:none;
    animation:ctaWaRing 1.9s ease-out infinite;
}

#pesan .cta-wa-button::after{
    animation-delay:.65s;
}

@keyframes ctaWaPulse{
    0%,100%{
        transform:scale(1);
        box-shadow:
            0 12px 30px rgba(37,211,102,.24),
            0 0 20px rgba(37,211,102,.12);
    }
    50%{
        transform:scale(1.035);
        box-shadow:
            0 16px 36px rgba(37,211,102,.32),
            0 0 34px rgba(37,211,102,.25);
    }
}

@keyframes ctaWaRing{
    0%{
        opacity:.65;
        transform:scale(.98);
    }
    75%,100%{
        opacity:0;
        transform:scale(1.15);
    }
}

/* Ikon WA ikut bernapas pelan */
#pesan .cta-wa-button .wa-icon{
    animation:ctaWaIcon 1.9s ease-in-out infinite;
}
@keyframes ctaWaIcon{
    0%,100%{transform:scale(1) rotate(0deg)}
    50%{transform:scale(1.10) rotate(-4deg)}
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
    #pesan .cta-sparkles .spark,
    #pesan .cta-info-card,
    #pesan .cta-info-card::before,
    #pesan .cta-wa-button,
    #pesan .cta-wa-button::before,
    #pesan .cta-wa-button::after,
    #pesan .cta-wa-button .wa-icon{
        animation:none !important;
    }
}

/* =========================================================
   V7.45 - HUBUNGI ADMIN
   Kotak LUAR bergerak halus.
   3 kotak chart di dalam TIDAK bergerak.
   ========================================================= */

/* Kotak besar/luar bergerak lembut */
#pesan .cta-box{
    will-change:transform;
    animation:ctaOuterFloat 6s ease-in-out infinite !important;
}

@keyframes ctaOuterFloat{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-7px);
    }
}

/* 3 mini-card dibuat diam */
#pesan .cta-info-card{
    animation:none !important;
    transform:none !important;
    will-change:auto !important;
}

/* Saat mouse mendekat, card tetap diam.
   Hanya border/glow yang boleh berubah. */
#pesan .cta-info-card:hover{
    animation:none !important;
    transform:none !important;
}

/* Glow di dalam mini-card juga tidak bergerak */
#pesan .cta-info-card::before{
    animation:none !important;
    transform:none !important;
    opacity:.26 !important;
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
    #pesan .cta-box{
        animation:none !important;
    }
}

/* FIX IKON DAUN HERO BADGE */
.hero-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.hero-badge .hero-badge-leaf{
    width:22px !important;
    height:22px !important;
    max-width:22px !important;
    max-height:22px !important;
    object-fit:contain !important;
    flex:0 0 22px;
    margin:0 !important;
}


/* =========================================================
   V7.47 - FAQ + HUBUNGI ADMIN INTERAKTIF
   ========================================================= */

#faq .faq-item{
    position:relative;
    transition:
        transform .30s ease,
        border-color .30s ease,
        box-shadow .30s ease,
        background .30s ease !important;
}

#faq .faq-item::before{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:inherit;
    pointer-events:none;
    opacity:0;
    background:
        radial-gradient(circle at 50% 0%,
            rgba(255,213,79,.18),
            transparent 58%);
    transition:opacity .30s ease;
}

#faq .faq-item:hover{
    transform:translateY(-5px) scale(1.01);
    border-color:rgba(255,213,79,.72) !important;
    background:
        linear-gradient(180deg,
            rgba(255,255,255,1),
            rgba(248,255,251,.98)) !important;
    box-shadow:
        0 18px 38px rgba(5,47,36,.14),
        0 0 24px rgba(255,213,79,.16) !important;
}

#faq .faq-item:hover::before{
    opacity:1;
}

#faq .faq-item:hover .faq-question{
    color:var(--primary-dark) !important;
}

#faq .faq-item:hover .faq-question i{
    color:#d8a91e !important;
    filter:drop-shadow(0 0 7px rgba(255,213,79,.40));
}

#pesan .cta-info-card{
    transform-origin:center center !important;
    transition:
        transform .30s cubic-bezier(.2,.75,.25,1),
        border-color .30s ease,
        box-shadow .30s ease,
        background .30s ease !important;
}

#pesan .cta-info-card:hover{
    position:relative;
    z-index:8;
    transform:translateY(-6px) scale(1.05) !important;
    border-color:rgba(255,213,79,.72) !important;
    background:
        linear-gradient(180deg,
            rgba(255,255,255,.16),
            rgba(255,255,255,.10)) !important;
    box-shadow:
        0 20px 42px rgba(0,0,0,.22),
        0 0 26px rgba(255,213,79,.16) !important;
}

#pesan .cta-info-card:hover::before{
    opacity:.44 !important;
}

@media (hover:none){
    #faq .faq-item:hover,
    #pesan .cta-info-card:hover{
        transform:none !important;
    }
}

/* =========================================================
   FAQ CYBERPUNK NEON UNGU + TEKS KUNING
   ========================================================= */

#faq .faq-item{
    position:relative;
    overflow:hidden;
    background:rgba(4,55,42,.92) !important;
    border:1px solid rgba(255,213,79,.36) !important;
    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease,
        background .28s ease !important;
}

#faq .faq-item::before{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:inherit;
    pointer-events:none;
    opacity:0;
    background:
        linear-gradient(
            120deg,
            rgba(126,55,255,.12),
            rgba(255,45,196,.12),
            rgba(126,55,255,.12)
        );
    box-shadow:
        0 0 14px rgba(126,55,255,.55),
        0 0 28px rgba(255,45,196,.26);
    transition:opacity .28s ease;
}

#faq .faq-item:hover{
    transform:translateY(-4px) scale(1.015);
    background:
        linear-gradient(
            135deg,
            rgba(5,58,43,.98),
            rgba(20,31,57,.96)
        ) !important;

    border-color:#9b5cff !important;

    box-shadow:
        0 0 8px rgba(155,92,255,.78),
        0 0 20px rgba(126,55,255,.55),
        0 0 34px rgba(255,45,196,.24),
        0 16px 34px rgba(0,0,0,.24) !important;
}

#faq .faq-item:hover::before{
    opacity:1;
}

#faq .faq-question{
    position:relative;
    z-index:2;
    background:transparent !important;
    transition:
        color .28s ease,
        text-shadow .28s ease !important;
}

#faq .faq-item:hover .faq-question{
    color:#ffd54f !important;
    text-shadow:
        0 0 6px rgba(255,213,79,.42),
        0 0 14px rgba(255,213,79,.18);
}

#faq .faq-item:hover .faq-question i{
    color:#ffd54f !important;
    filter:
        drop-shadow(0 0 5px rgba(155,92,255,.95))
        drop-shadow(0 0 8px rgba(255,45,196,.55));
}

#faq .faq-item.active{
    border-color:rgba(255,213,79,.72) !important;
}

#faq .faq-item.active .faq-question{
    color:#ffd54f !important;
}

@media (hover:none){
    #faq .faq-item:hover{
        transform:none;
    }
}