*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:#0b0b0b;                /* hitam */
  color:#f1f5f9;                     /* teks terang */
}
.topbar{
  background:#000;color:#f5c97a;     /* emas */
  text-align:center;
  padding:8px 10px;font-size:13px
}
.header{
  max-width:1200px;margin:0 auto;display:grid;gap:12px;
  grid-template-columns:1fr;align-items:center;padding:12px
}
.logo{max-width:220px}
.promo img{width:100%;border-radius:10px;box-shadow:0 10px 24px rgba(0,0,0,.6)}

.nav{
  background:linear-gradient(135deg,#7f1d1d,#3b0a0a);  /* merah gelap */
  color:#fff;display:flex;gap:12px;flex-wrap:wrap;
  align-items:center;padding:10px 12px
}
.nav-item{
  color:#fde68a;                      /* emas */
  text-decoration:none;font-weight:700;font-size:14px;
  padding:6px 8px;border-radius:8px
}
.nav-item:hover,.nav-item.active{
  background:rgba(245,201,122,.18);   /* glow emas tipis */
}
.nav-right{margin-left:auto;display:flex;gap:8px;align-items:center}
.search{
  border-radius:999px;border:0;padding:6px 10px;font-size:13px
}
.watch{
  background:linear-gradient(135deg,#dc2626,#f5c97a);  /* merah–emas */
  color:#111;text-decoration:none;font-weight:800;
  padding:6px 10px;border-radius:999px;
  box-shadow:0 8px 20px rgba(245,201,122,.45)
}

.breadcrumb{
  max-width:1200px;margin:10px auto;padding:10px 12px;
  background:#0f0f10;border-radius:10px;color:#f5c97a;font-size:13px
}

.layout{
  max-width:1200px;margin:12px auto;padding:0 12px;
  display:grid;grid-template-columns:1fr;gap:16px
}
.content{
  background:#0f0f10;border-radius:14px;padding:16px;
  box-shadow:0 20px 40px rgba(0,0,0,.7)
}
.tags{display:flex;gap:8px;margin-bottom:6px}
.tag{
  background:#1f2933;color:#fde68a;padding:4px 10px;border-radius:999px;
  font-size:12px;font-weight:700
}
.tag.red{background:#dc2626;color:#fff}
.meta{color:#cbd5f5;font-size:13px;margin-bottom:10px}
.hero-img{width:100%;border-radius:12px;margin:10px 0}

.cta-box{
  display:flex;gap:10px;margin-top:12px;flex-wrap:wrap
}
.btn{
  display:inline-block;padding:10px 14px;border-radius:999px;
  text-decoration:none;font-weight:800;border:2px solid transparent
}
.btn.primary{
  background:linear-gradient(135deg,#dc2626,#f5c97a);  /* merah–emas */
  color:#111;
  box-shadow:0 10px 26px rgba(245,201,122,.45)
}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{
  background:transparent;border-color:#f5c97a;color:#fde68a
}

.sidebar{
  display:grid;gap:12px
}
.widget{
  background:#0f0f10;border-radius:14px;padding:8px;
  box-shadow:0 20px 40px rgba(0,0,0,.7)
}
.widget img{width:100%;border-radius:10px}

.footer-mini{
  background:#000;color:#9ca3af;text-align:center;
  padding:14px 10px;font-size:13px;border-top:1px solid rgba(255,255,255,.08)
}
.footer-mini strong{color:#f5c97a}

@media(min-width:900px){
  .header{grid-template-columns:280px 1fr}
  .layout{grid-template-columns:1fr 360px}
}