/* FIX OVERFLOW GLOBAL */
html, body{
    overflow-x:hidden;
    max-width:100%;
}

/* cegah elemen keluar layar */
*{
    max-width:100%;
}

/* ================= GLOBAL FIX ================= */
*{
    box-sizing:border-box;
}

body{
    overflow-x:hidden; /* cegah geser kanan kiri */
}

/* ================= HERO ================= */
.hero{
    padding:140px 20px;
    text-align:center;
    position:relative;
    overflow:hidden;
}

/* efek glow */
.hero::before{
    content:'';
    position:absolute;
    width:400px;
    height:400px;
    background:radial-gradient(circle, rgba(201,168,76,0.3), transparent);
    top:-100px;
    left:-100px;
    filter:blur(80px);
}

.hero::after{
    content:'';
    position:absolute;
    width:400px;
    height:400px;
    background:radial-gradient(circle, rgba(201,168,76,0.2), transparent);
    bottom:-100px;
    right:-100px;
    filter:blur(80px);
}

/* animasi masuk */
.hero h1{
    font-size:42px;
    color:var(--gold);
    animation:fadeUp 1s ease;
}

.hero p{
    margin-top:20px;
    color:#ccc;
    max-width:600px;
    margin-left:auto;
    margin-right:auto;
    animation:fadeUp 1.2s ease;
}

.hero-btn{
    margin-top:30px;
    animation:fadeUp 1.4s ease;
}

/* ================= BUTTON ================= */
.btn-primary{
    background:linear-gradient(135deg,#C9A84C,#e5c76b);
    color:#000;
    padding:14px 28px;
    border-radius:8px;
    text-decoration:none;
    font-weight:600;
    transition:0.3s;
}

.btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 25px rgba(201,168,76,0.4);
}

/* ================= SECTION ================= */
.section{
    padding:90px 20px;
}

.section.dark{
    background:var(--dark2);
}

.section h2{
    font-size:32px;
    margin-bottom:10px;
}

.sub{
    color:#aaa;
    margin-bottom:40px;
}

/* ================= GRID ================= */
.grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

/* ================= CARD ================= */
.card{
    background:linear-gradient(145deg,#1a1a1a,#111);
    padding:25px;
    border-radius:15px;
    transition:0.3s;
    border:1px solid rgba(255,255,255,0.05);
    position:relative;
    overflow:hidden;
}

/* glow hover */
.card::before{
    content:'';
    position:absolute;
    width:200px;
    height:200px;
    background:radial-gradient(circle, rgba(201,168,76,0.2), transparent);
    top:-50px;
    right:-50px;
    opacity:0;
    transition:0.4s;
}

.card:hover::before{
    opacity:1;
}

.card:hover{
    transform:translateY(-8px);
    border-color:rgba(201,168,76,0.4);
}

/* icon */
.card i{
    font-size:28px;
    color:var(--gold);
    margin-bottom:10px;
}

/* ================= IMAGE ================= */
.card img{
    width:100%;
    height:180px;
    object-fit:cover;
    border-radius:10px;
    margin-bottom:10px;
}

/* ================= PRICE ================= */
.price{
    color:var(--gold);
    font-size:22px;
    margin:10px 0;
}

/* highlight */
.highlight{
    border:1px solid var(--gold);
    box-shadow:0 0 20px rgba(201,168,76,0.2);
}

/* ================= TESTIMONI ================= */
.card img[style*="border-radius:50%"]{
    width:70px;
    height:70px;
    object-fit:cover;
    margin:auto;
}

/* ================= CTA ================= */
.cta{
    padding:120px 20px;
    text-align:center;
    position:relative;
}

.cta::before{
    content:'';
    position:absolute;
    width:500px;
    height:500px;
    background:radial-gradient(circle, rgba(201,168,76,0.15), transparent);
    top:-150px;
    left:50%;
    transform:translateX(-50%);
    filter:blur(100px);
}

.cta h2{
    margin-bottom:20px;
}

/* ================= ANIMATION ================= */
@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(30px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* ================= RESPONSIVE ================= */
@media (max-width: 992px){
    .grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width: 768px){

    .hero{
        padding:100px 15px;
    }

    .hero h1{
        font-size:28px;
    }

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

    .card{
        padding:20px;
    }

    .card img{
        height:160px;
    }

    .btn-primary{
        display:inline-block;
        width:100%;
    }

}

/* ================= SMOOTH GLOBAL ================= */
*{
    transition:all 0.3s ease;
}

/* ================= ANIMATION BASE ================= */
.fade-up{
    opacity:0;
    transform:translateY(40px);
    transition:all 0.8s cubic-bezier(0.22,1,0.36,1);
}

.fade-up.show{
    opacity:1;
    transform:translateY(0);
}

/* ================= HERO IMPROVED ================= */
.hero h1{
    animation:fadeUpSmooth 1s ease forwards;
}

.hero p{
    animation:fadeUpSmooth 1.2s ease forwards;
}

.hero-btn{
    animation:fadeUpSmooth 1.4s ease forwards;
}

@keyframes fadeUpSmooth{
    from{
        opacity:0;
        transform:translateY(30px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* ================= CARD HOVER SMOOTH ================= */
.card{
    transition:all 0.4s cubic-bezier(0.22,1,0.36,1);
}

.card:hover{
    transform:translateY(-10px) scale(1.02);
}

/* ================= BUTTON SMOOTH ================= */
.btn-primary{
    transition:all 0.3s ease;
}

.btn-primary:hover{
    transform:translateY(-3px) scale(1.03);
}