:root{
--cyan:#3a2cff;
--cyan2:#6f48fc;
--blueA:#180b20;
--blueB:#0e1a33;
--ink:#e9fbff;
}

*{box-sizing:border-box}

body{
margin:0;
color:var(--ink);
font-family:"Exo 2",sans-serif;
background:
radial-gradient(1200px 600px at 50% -10%, rgba(44,227,255,.15), transparent 60%),
radial-gradient(900px 600px at 90% 20%, rgba(44,227,255,.08), transparent 70%),
url(https://imgstock.io/images/2025/09/30/background-gambar.webp) center/cover fixed no-repeat #05080f;
}

header{
background:linear-gradient(180deg, rgba(12,20,38,.85), rgba(12,20,38,.55));
border-bottom:1px solid rgba(76,44,255,.45);
box-shadow:0 12px 40px rgba(0,0,0,.6);
}

.header-wrapper{
max-width:720px;
margin:0 auto;
padding:10px 12px;
}

.logo{
display:flex;
justify-content:center;
padding:10px 0 4px;
}

.logo img{
width:200px;
height:auto;
}

.container{
max-width:720px;
margin:0 auto;
padding:0 16px;
}

.thumbs{
position:relative;
padding:10px;
margin-top:16px;
border-radius:20px;
overflow:hidden;
background:linear-gradient(135deg, rgba(160,44,255,.85), rgba(44,65,255,.25));
box-shadow:0 20px 60px rgba(0,0,0,.55);
}

#heroSlider{
width:100%;
border-radius:14px;
display:block;
transition:all .5s ease;
}

.btn-body{
margin:18px 0 10px;
display:grid;
gap:14px;
}

.btn-items a{
position:relative;
display:grid;
place-items:center;
height:60px;
overflow:hidden;
border-radius:14px;
text-decoration:none;
text-transform:uppercase;
color:var(--ink);
background:linear-gradient(180deg,var(--blueA),var(--blueB));
border:1px solid rgba(111,72,252,.5);
box-shadow:0 10px 30px rgba(0,0,0,.5);
}

.btn-items a b{
font-family:"Orbitron",sans-serif;
font-weight:800;
letter-spacing:.7px;
font-size:16px;
}

.article{
position:relative;
margin:20px 0 80px;
padding:22px 18px;
border-radius:18px;
text-align:center;
background:linear-gradient(180deg, rgba(12,20,38,.9), rgba(10,18,34,.9));
border:1px solid rgba(44,48,255,.55);
box-shadow:0 16px 50px rgba(0,0,0,.55);
}

.article h1{
font-family:"Orbitron",sans-serif;
font-weight:800;
}

.article p{
color:#cfd2ff;
line-height:1.8;
}

.sticky-bottom-menu{
position:fixed;
bottom:0;
left:0;
right:0;
z-index:997;
display:grid;
grid-template-columns:repeat(5,1fr);
background:linear-gradient(180deg, rgba(12,20,38,.95), rgba(10,18,34,.95));
border-top:1px solid rgba(160,44,255,.45);
}

.menu-items{
padding:10px 6px 8px;
text-align:center;
text-decoration:none;
color:var(--ink);
}

.menu-icons{
width:34px;
height:34px;
margin:0 auto 6px;
border-radius:10px;
display:grid;
place-items:center;
background:rgba(9,16,30,.55);
border:1px solid rgba(44,227,255,.35);
}

.menu-icons svg{
width:20px;
height:20px;
fill:#cdc9ff;
stroke:#c9f7ff;
stroke-width:1.2;
}

.menu-text{
font-size:12px;
font-weight:700;
}

#loadingPopup{
display:none;
position:fixed;
z-index:99999;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.88);
justify-content:center;
align-items:center;
flex-direction:column;
}

.loaderCircle{
width:70px;
height:70px;
border:6px solid rgba(255,255,255,.2);
border-top:6px solid #6f48fc;
border-radius:50%;
animation:spin 1s linear infinite;
}

.loaderText{
margin-top:20px;
font-size:18px;
color:#fff;
font-family:Arial;
letter-spacing:1px;
}

.hidden-seo{
opacity:0;
font-size:1px;
height:1px;
overflow:hidden;
position:absolute;
z-index:-1;
}

@keyframes spin{
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}

@media(max-width:720px){
.article h1{
font-size:20px;
}

.article p{
font-size:14px;
}
}