.container{
  max-width:1100px;
  margin:auto;
  padding:0 15px;
}

/* HEADER */
.header{
  background:#111;
  color:#fff;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 0;
}
.logo{
  font-size:24px;
  font-weight:bold;
}

/* MAIN */
.main{
  display:flex;
  gap:20px;
  margin-top:20px;
}
.content{flex:3}
.sidebar{
  flex:1;
  background:var(--card);
  padding:15px;
}

/* ===== TOPBAR ===== */
.topbar{
  background:#0c0220;
  color:#fff;
}
.topbar-inner{
  display:flex;
  align-items:center;
  gap:20px;
  padding:12px 0;
}

.logo{
  font-weight:bold;
  font-size:20px;
}

.nav a{
  color:#fff;
  margin-right:15px;
  font-size:14px;
  opacity:.9;
}
.nav a:hover{opacity:1}

/* SEARCH */
.search input{
  padding:6px 12px;
  border-radius:20px;
  border:none;
  font-size:13px;
}

/* ===== ADS ===== */
.ads-wrap{
  background:#12042c;
}
.ads-inner{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  padding:10px 0;
}
.ad-box{
  height:90px;
  background:#2b145f;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
}

/* ===== BREADCRUMB ===== */
.breadcrumb-bar{
  margin:10px 0;
}
.breadcrumb{
  font-size:13px;
  color:#555;
}
.breadcrumb a{ color:#6a00ff }

/* ===== MAIN PAGE ===== */
.page{
  margin-top:20px;
}
.main{
  display:flex;
  gap:20px;
}
.content{ flex:3 }
.sidebar{
  flex:1;
  background:var(--card);
  padding:15px;
}

/* =====================
   FOOTER
===================== */
.site-footer{
  background:#0f1020;
  border-top:1px solid #1f2140;
  margin-top:40px;
}

.footer-inner{
  padding:30px 15px;
  text-align:center;
}

.footer-menu{
  display:flex;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.footer-menu a{
  font-size:13px;
  color:#aaa;
}

.footer-menu a:hover{
  color:#4ea1ff;
}

.footer-copy{
  font-size:12px;
  color:#666;
}

/* mobile */
@media(max-width:480px){
  .footer-menu{
    gap:12px;
  }
}

.release-meta{
  display:block;
  font-size:12px;
  color:#aaa;
  margin-top:4px;
}

.release-meta .dot{
  margin:0 5px;
  color:#555;
}

/* =====================
   NAV MOBILE HAMBURGER
===================== */

/* tombol strip 3 */
.nav-toggle{
  display:none;
  font-size:22px;
  background:none;
  border:none;
  color:#fff;
  cursor:pointer;
}

/* mobile */
@media(max-width:768px){

  .nav-toggle{
    display:block;
  }

  .nav{
    position:absolute;
    top:56px;
    left:0;
    right:0;
    background:#12121c;
    flex-direction:column;
    display:none;
    z-index:999;
  }

  .nav a{
    padding:12px;
    border-bottom:1px solid #222;
  }

  .nav.show{
    display:flex;
  }

  /* sembunyikan nav normal */
  .topbar-inner{
    position:relative;
  }
}

/* =====================
   HIDE LOGO ON MOBILE
===================== */
@media(max-width:768px){
  .logo{
    display:none;
  }
}

/* =====================
   SEARCH INPUT MOBILE
===================== */
@media(max-width:768px){

  .search{
    flex:1;              /* ambil sisa ruang */
    margin-left:8px;
  }

  .search input{
    width:98%;
    padding:8px 10px;
    font-size:14px;
  }

  .topbar-inner{
    gap:10px;
  }
}


/* MOBILE */
@media(max-width:768px){
  .ads-inner{ grid-template-columns:1fr }
  .main{ flex-direction:column }
}