/* GLOBAL */

body{
font-family:Arial, Helvetica, sans-serif;
margin:0;
background:#f5f5f5;
color:#333;
line-height:1.6;
}

/* HEADER */

.header{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 30px;
background:#fff;
border-bottom:1px solid #ddd;
}

.logo img{
height:38px;
}

.search{
display:flex;
align-items:center;
gap:6px;
}

.search input{
padding:8px;
width:220px;
border:1px solid #ccc;
border-radius:4px;
}

.search button{
padding:8px 14px;
background:#1a73e8;
color:white;
border:none;
border-radius:4px;
cursor:pointer;
}

.btn{
background:#1a73e8;
color:white;
border:none;
padding:8px 14px;
margin-left:5px;
border-radius:4px;
cursor:pointer;
}

/* MENU */

.menu{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:18px;
background:#fff;
padding:12px;
border-bottom:1px solid #ddd;
}

.menu a{
text-decoration:none;
color:#333;
font-weight:bold;
font-size:14px;
}

.menu a:hover{
color:#1a73e8;
}

/* LAYOUT */

.container{
display:grid;
grid-template-columns:220px 1fr 280px;
gap:25px;
max-width:1400px;
margin:auto;
padding:20px;
}

/* SIDEBAR KIRI */

.sidebar{
background:#fff;
padding:18px;
border-radius:6px;
border:1px solid #ddd;
height:fit-content;
}

.sidebar h3{
margin-top:0;
font-size:18px;
}

.sidebar ul{
list-style:none;
padding:0;
margin:0;
}

.sidebar li{
margin-bottom:10px;
}

.sidebar a{
text-decoration:none;
color:#333;
font-size:14px;
}

.sidebar a:hover{
color:#1a73e8;
}

/* IKLAN */

.ads{
width:100%;
margin-bottom:15px;
}

.ads img{
width:100%;
border-radius:6px;
}

/* CONTENT */

.content{
background:#fff;
padding:25px;
border-radius:6px;
border:1px solid #ddd;
}

/* ARTIKEL */

.news{
display:flex;
gap:16px;
margin-bottom:22px;
padding-bottom:18px;
border-bottom:1px solid #eee;
}

.news img{
width:210px;
border-radius:6px;
}

.news h3{
margin:0;
font-size:18px;
color:#1a0dab;
}

.news p{
margin-top:6px;
font-size:13px;
color:#777;
}

/* TOMBOL BERITA */

.btn-more{
background:#ff6a00;
border:none;
padding:10px 22px;
color:white;
border-radius:4px;
cursor:pointer;
margin-top:15px;
}

/* FOOTER */

.footer{
background:#fff;
margin-top:40px;
padding:35px;
border-top:1px solid #ddd;
}

.footer-menu{
display:flex;
flex-wrap:wrap;
gap:50px;
margin-top:15px;
}

.footer-menu a{
display:block;
text-decoration:none;
color:#555;
font-size:14px;
margin:5px 0;
}

.footer-menu a:hover{
color:#1a73e8;
}

.copyright{
text-align:center;
margin-top:25px;
font-size:14px;
color:#777;
}

/* SIDEBAR KANAN */

.rightbar{
position:sticky;
top:20px;
height:fit-content;
}

/* HERO BUTTON */

.hero-box{
background:#fff;
padding:16px;
margin-top:15px;
border:1px solid #ddd;
border-radius:6px;
text-align:center;
}

.hero-btn{
display:block;
padding:10px;
margin-top:10px;
text-decoration:none;
color:white;
border-radius:4px;
font-weight:bold;
}

.daftar{
background:#28a745;
}

.login{
background:#007bff;
}

/* RATING */

.rating-box{
background:#fff;
padding:15px;
margin-top:15px;
border:1px solid #ddd;
border-radius:6px;
text-align:center;
}

.stars{
font-size:22px;
margin:10px 0;
color:#f5a623;
}

/* BERITA POPULER */

.popular-box{
background:#fff;
padding:16px;
margin-top:15px;
border:1px solid #ddd;
border-radius:6px;
}

.popular-box ul{
padding:0;
margin:0;
list-style:none;
}

.popular-box li{
margin-bottom:10px;
}

.popular-box a{
text-decoration:none;
color:#333;
font-size:14px;
}

.popular-box a:hover{
color:#1a73e8;
}

/* REVIEW */

.review-box{
background:#fff;
padding:16px;
margin-top:15px;
border:1px solid #ddd;
border-radius:6px;
font-size:14px;
}

/* SEO ARTICLE */

.seo-article{
background:#fff;
padding:25px;
margin-top:30px;
border:1px solid #ddd;
border-radius:6px;
line-height:1.8;
font-size:15px;
}