*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#0f0f0f;
color:#fff;
}

/* NAVBAR */

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 8%;
background:#111;
position:sticky;
top:0;
z-index:1000;
}

.logo img{
width: 70px;
height: 70px;
   border-radius: 50%;
}

.navbar ul{
display:flex;
list-style:none;
gap:25px;
}

.navbar a{
color:white;
text-decoration:none;
font-weight:600;
}

/* HERO */

.hero{
height: 80vh;
display:flex;
justify-content:center;
align-items:center;
text-align:center;

background:
linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
url("assets/banner.jpg");

background-size:cover;
background-position:center;
}

.hero-content{
max-width:800px;
padding:20px;
}

.hero h1{
font-size:48px;
margin-bottom:20px;
text-shadow:0 0 15px black;
}

.hero p{
font-size:20px;
margin-bottom:25px;
}

.btn{
display:inline-block;
background:#ff9800;
color:white;
padding:15px 40px;
border-radius:18px;
text-decoration:none;
font-weight:700;
}

.btn:hover{
background:#ffb300;
}

/* STATS */

.stats{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
padding:60px 8%;
}

.stat-box{
background:#1a1a1a;
padding:30px;
border-radius:15px;
border:1px solid #ff9800;
text-align:center;
}

.stat-box h2{
color:#ffb300;
}

/* PRODUK */

.products{
padding:60px 8%;
}

.products h2{
text-align:center;
margin-bottom:40px;
}

.product-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
}

.product-card{
background:#1a1a1a;
padding:25px;
border-radius:15px;
border:1px solid #ff9800;
text-align:center;
}

.product-card h3{
color:#ffb300;
font-size:30px;
margin-bottom:10px;
}

.product-card p{
margin:10px 0;
}

.product-card a{
display:inline-block;
padding:10px 20px;
background:#ff9800;
color:white;
border-radius:8px;
text-decoration:none;
}

/* TESTIMONI */

.testimonials{
padding:60px 8%;
}

.testimonial{
background:#1a1a1a;
padding:20px;
margin-bottom:15px;
border-radius:12px;
border:1px solid #333;
}

/* TOPUP PAGE */

.topup-page{
min-height:90vh;
display:flex;
justify-content:center;
align-items:center;
padding:30px;
}

.topup-card{
width:100%;
max-width:600px;
background:#1a1a1a;
padding:35px;
border-radius:20px;
border:1px solid #ff9800;
}

.topup-card h1{
text-align:center;
color:#ffb300;
margin-bottom:25px;
}

.topup-card label{
display:block;
margin-top:15px;
margin-bottom:8px;
}

.topup-card input,
.topup-card select{
width:100%;
padding:15px;
border:none;
border-radius:10px;
background:#2b2b2b;
color:white;
margin-bottom:15px;
}

.topup-card button{
width:100%;
padding:15px;
background:#ff9800;
color:white;
border:none;
border-radius:10px;
font-size:16px;
font-weight:bold;
cursor:pointer;
}

.topup-card button:hover{
background:#ffb300;
}

/* CONTACT */

.contact-page{
padding:80px 8%;
text-align:center;
}

.contact-page h1{
margin-bottom:20px;
color:#ffb300;
}

footer{
background:#111;
text-align:center;
padding:30px;
margin-top:40px;
}
.topup-box{
max-width:700px;
margin:auto;
background:#1a1a1a;
padding:30px;
border-radius:20px;
border:2px solid #ffb300;
}

.topup-banner{
width:100%;
border-radius:15px;
margin-bottom:20px;
}

.topup-box h1{
text-align:center;
margin-bottom:20px;
color:#ffb300;
}

.topup-box input,
.topup-box select{
width:100%;
padding:15px;
margin-top:15px;
border:none;
border-radius:10px;
background:#2a2a2a;
color:white;
}

.paket-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:15px;
margin-top:20px;
}

.paket-btn{
padding:20px;
background:#222;
color:white;
border:2px solid #444;
border-radius:12px;
cursor:pointer;
font-weight:bold;
}

.paket-btn:hover{
border-color:#ffb300;
}

.order-btn{
width:100%;
padding:18px;
margin-top:20px;
background:#ff9800;
border:none;
border-radius:10px;
font-size:18px;
font-weight:bold;
color:white;
cursor:pointer;
}
.popular{
background:#ffb300;
color:black;
padding:12px;
border-radius:10px;
font-weight:bold;
text-align:center;
margin:15px 0;
}
.popular{
    border:3px solid gold;
    transform:scale(1.05);
}
.package-card:hover{
    transform:translateY(-8px);
    box-shadow:0 0 25px rgba(255,215,0,.4);
}
.hero-content{
    animation:fadeUp .8s ease;
}
@keyframes fadeUp{
from{
opacity:0;
transform:translateY(40px);
}
to{
opacity:1;
transform:translateY(0);
}
}
.hero-content{
    animation: slideUp 1s ease-out;
}

@keyframes slideUp{
    0%{
        opacity:0;
        transform:translateY(80px);
    }

    100%{
        opacity:1;
        transform:translateY(0);
    }
}
.hero-content{
    animation: heroAnimation 1.2s ease-out;
}

@keyframes heroAnimation{
    0%{
        opacity:0;
        transform:translateY(60px) scale(0.9);
    }

    100%{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}
.hero-content h1{
    font-size:4rem;
}
.logo img{
    width:80px;
}
.topup-container{
    max-width:900px;
}
.topup-container{
    box-shadow:0 0 30px rgba(255,215,0,.25);
}
.order-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 0 20px gold;
}
.topup-title{
    font-size: 48px;
    font-weight: 800;
    color: #ffd700;
    text-align: center;
    margin-bottom: 20px;

    opacity: 0;
    animation: munculNimbul 1.2s ease forwards;
}

@keyframes munculNimbul{
    0%{
        opacity: 0;
        transform: translateY(60px) scale(0.8);
        text-shadow: none;
    }

    50%{
        opacity: 1;
        transform: translateY(-10px) scale(1.08);
        text-shadow:
        0 0 15px #ffd700,
        0 0 30px #ffd700;
    }

    100%{
        opacity: 1;
        transform: translateY(0) scale(1);
        text-shadow:
        0 0 10px #ffd700;
    }
}
.topup-title{
    animation:
    munculNimbul 1.2s ease forwards,
    glowGold 2s infinite alternate;
}

@keyframes glowGold{
    from{
        text-shadow: 0 0 10px #ffd700;
    }

    to{
        text-shadow:
        0 0 20px #ffd700,
        0 0 40px #ffd700,
        0 0 60px #ffd700;
    }
}
.package-card{
    transition: all .3s ease;
}

.package-card:hover{
    transform: translateY(-10px);
    box-shadow: 0 0 25px #ffd700;
    border-color: #ffd700;
}
button{
    transition: all .15s ease;
}

button:active{
    transform: scale(.92);
}
.package-card.selected{
    border: 3px solid #ffd700;
    box-shadow: 0 0 30px #ffd700;
    transform: scale(1.05);
}
.hero img{
    animation: floating 5s ease-in-out infinite;
}

@keyframes floating{
    0%,100%{
        transform: translateY(0);
    }

    50%{
        transform: translateY(-15px);
    }
}
.order-btn{
    position: relative;
    overflow: hidden;
}

.order-btn::before{
    content:"";
    position:absolute;
    left:-100%;
    top:0;
    width:100%;
    height:100%;
    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.5),
        transparent
    );

    animation: shine 2s infinite;
}

@keyframes shine{
    100%{
        left:200%;
    }
}
.hidden{
    opacity:0;
    transform:translateY(50px);
}

.show{
    opacity:1;
    transform:translateY(0);
    transition:.8s;
}
.package-card::before{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:20px;
    background:linear-gradient(
        90deg,
        transparent,
        #ffd700,
        transparent
    );
    animation:borderMove 3s linear infinite;
}

@keyframes borderMove{
    0%{
        transform:translateX(-100%);
    }
    100%{
        transform:translateX(100%);
    }
}
.popular{
    transform:scale(1.08);
    box-shadow:0 0 30px #ffd700;
}
.selected{
    transform:scale(1.05);
    box-shadow:0 0 35px #ffd700;
}
.hero-title{
    overflow:hidden;
    white-space:nowrap;
    border-right:4px solid gold;
    animation:
    typing 3s steps(30),
    blink .7s infinite;
}
.particle{
    animation:float 8s linear infinite;
}
.order-btn{
    animation:pulse 2s infinite;
}

@keyframes pulse{
    0%{
        box-shadow:0 0 0 0 rgba(255,215,0,.8);
    }
    70%{
        box-shadow:0 0 0 20px rgba(255,215,0,0);
    }
    100%{
        box-shadow:0 0 0 0 rgba(255,215,0,0);
    }
}
.stat-card:hover{
 transform:translateY(-10px);
 box-shadow:0 0 25px gold;
}
.package-card:hover{
 transform:translateY(-12px) scale(1.03);
}
.selected{
 background:rgba(255,215,0,.1);
 box-shadow:0 0 30px gold;
}
.order-btn:active{
 transform:scale(.95);
}
.wa{
position:fixed;
bottom:25px;
right:25px;
width:60px;
height:60px;
display:flex;
align-items:center;
justify-content:center;
font-size:30px;
text-decoration:none;
background:#25d366;
border-radius:50%;
z-index:9999;
box-shadow:0 0 20px rgba(37,211,102,.5);
}
@media(max-width:768px){

.hero h1{
font-size:2rem;
}

.hero p{
font-size:1rem;
}

.navbar{
flex-direction:column;
gap:15px;
}

.navbar ul{
gap:15px;
}

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

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

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

}