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

body{
background:
url("https://kilat.digital/images/2025/03/21/8154777cd63cf0e931502611b871f41e.gif"),
linear-gradient(#140000,#000);
color:white;
}


/* CONTAINER GLOBAL */

.nav-container,
.search-box,
.container,
.footer-container{
max-width:1200px;
width:90%;
margin:auto;
}


/* HEADER */

.top-header{
padding:15px 0;
}

.nav-container{
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
}

.logo img{
height:40px;
display:block;
}

.menu a{
color:white;
padding:6px 14px;
border-radius:5px;
text-decoration:none;
font-size:14px;
}

.menu a:hover{
background:red;
border-radius:20px;
}

.button-group{
display:flex;
gap:10px;
}

.login,
.register{
text-decoration:none;
padding:6px 15px;
border-radius:5px;
font-size:14px;
}

.login{
background:white;
color:black;
}

.register{
background:red;
color:white;
}

.login:hover{
background:red;
color:white;
}

.register:hover{
background:white;
color:black;
}


/* SEARCH */

.search-area{
padding:10px 0;
}

.search-box{
display:flex;
}

.search-box input{
flex:1;
padding:10px;
border:2px solid red;
outline:none;
}

.search-box button{
padding:10px 20px;
background:red;
border:none;
color:white;
cursor:pointer;
}


/* MAIN */

.container{
margin:40px auto;
display:flex;
gap:30px;
align-items:flex-start;
}


/* CONTENT */

.content{
flex:3;
text-align:center;
}

.banner{
margin:20px auto;
max-width:600px;
}

.banner img{
width:100%;
height:auto;
border:3px solid red;
box-shadow:
0 0 10px red,
0 0 20px red;
}


/* TABS */

.tabs{
margin-top:15px;
}

.tabs button{
background:#222;
border:none;
padding:10px 15px;
color:white;
margin:5px;
cursor:pointer;
border-radius:4px;
}

.tabs button:hover{
background:red;
}


/* TEXT */

.description{
margin-top:20px;
line-height:1.7;
text-align:left;
}


/* SIDEBAR */

.sidebar{
flex:1;
}

.price-box{
background:#222;
padding:20px;
border-radius:5px;
text-align:center;
}

.price{
font-size:22px;
margin:10px 0;
}

.bonus{
color:#00ff66;
margin-bottom:10px;
}

.btn-daftar,
.btn-preview{
display:block;
text-decoration:none;
padding:10px;
margin:10px 0;
border-radius:5px;
font-weight:bold;
}

.btn-daftar{
background:#28a745;
color:white;
}

.btn-preview{
background:#444;
color:white;
}

.btn-daftar:hover,
.btn-preview:hover{
background:red;
}


/* INFO BOX */

.info-box{
background:#111;
padding:20px;
margin-top:20px;
}

.info-box ul{
list-style:none;
margin-top:10px;
}

.info-box li{
margin-bottom:8px;
}


/* FOOTER */

footer{
background:#000;
padding:40px 0;
margin-top:50px;
}

.footer-container{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:30px;
}

.footer-menu ul{
list-style:none;
margin-top:10px;
}

.footer-menu li{
margin-bottom:6px;
}

.credit{
font-size:12px;
opacity:0.7;
}


/* ========================= */
/* MOBILE RESPONSIVE */
/* ========================= */

@media (max-width:768px){

.menu{
width:100%;
text-align:center;
margin:10px 0;
}

.container{
flex-direction:column;
}

.sidebar{
width:100%;
}

.banner{
max-width:100%;
}

.search-box{
flex-direction:column;
gap:10px;
}

.search-box button{
width:100%;
}

}