:root{
  --brand: #0d6efd;
  --brand-dark: #0a4fb8;
  --bg-soft: #f4f6f9;
  --text-muted: #6c757d;
}

body{
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  background: var(--bg-soft);
  color: #2b2f36;
}

a{ text-decoration:none; }

/* ===== NAVBAR ===== */
.navbar-brand{
  font-weight: 700;
  letter-spacing: .5px;
}
.navbar-cms{
  background: linear-gradient(90deg, var(--brand-dark), var(--brand));
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.navbar-cms .nav-link{
  color: #eaf1ff !important;
  font-weight: 500;
}
.navbar-cms .nav-link:hover,
.navbar-cms .nav-link.active{
  color: #fff !important;
  border-bottom: 2px solid #fff;
}

/* ===== HERO / TOP INFO ===== */
.topbar{
  background:#1b2733;
  color:#c9d3dc;
  font-size:.82rem;
}
.topbar a{ color:#c9d3dc; }
.topbar a:hover{ color:#fff; }

/* ===== CARD BERITA ===== */
.card-berita{
  border:none;
  border-radius:.6rem;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  transition:.2s transform ease, .2s box-shadow ease;
  height:100%;
}
.card-berita:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 22px rgba(0,0,0,.12);
}
.card-berita img{
  height:190px;
  object-fit:cover;
  width:100%;
}
.card-berita .card-body{ padding:1rem 1.1rem; }
.card-berita .kategori-badge{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.card-berita .judul-berita{
  font-weight:700;
  font-size:1rem;
  line-height:1.35;
  color:#212529;
}
.card-berita .judul-berita:hover{ color:var(--brand); }
.meta-berita{
  font-size:.78rem;
  color:var(--text-muted);
}

.headline-utama{
  border-radius:.7rem;
  overflow:hidden;
  position:relative;
  color:#fff;
  min-height:340px;
  display:flex;
  align-items:flex-end;
  background-size:cover;
  background-position:center;
}
.headline-utama::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.85) 100%);
}
.headline-utama .konten{
  position:relative;
  padding:1.5rem;
}

/* ===== SIDEBAR WIDGET ===== */
.widget{
  background:#fff;
  border-radius:.6rem;
  padding:1.1rem;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  margin-bottom:1.5rem;
}
.widget-title{
  font-weight:700;
  font-size:1rem;
  border-left:4px solid var(--brand);
  padding-left:.6rem;
  margin-bottom:1rem;
  text-transform:uppercase;
}
.widget ul{ list-style:none; padding-left:0; margin-bottom:0; }
.widget ul li{
  padding:.5rem 0;
  border-bottom:1px dashed #e6e6e6;
  font-size:.9rem;
}
.widget ul li:last-child{ border-bottom:none; }
.tag-cloud a{
  display:inline-block;
  background:#eef2ff;
  color:var(--brand-dark);
  padding:.25rem .6rem;
  border-radius:1rem;
  font-size:.78rem;
  margin:0 .3rem .4rem 0;
}
.tag-cloud a:hover{ background:var(--brand); color:#fff; }

/* ===== DETAIL BERITA ===== */
.isi-berita{ font-size:1.02rem; line-height:1.8; }
.isi-berita img{ max-width:100%; height:auto; border-radius:.4rem; }

/* ===== FOOTER ===== */
footer.footer-cms{
  background:#1b2733;
  color:#c9d3dc;
  padding:2.5rem 0 1rem;
  margin-top:3rem;
}
footer.footer-cms a{ color:#c9d3dc; }
footer.footer-cms a:hover{ color:#fff; }
footer.footer-cms h6{ color:#fff; font-weight:700; margin-bottom:1rem; }
.footer-bawah{
  border-top:1px solid rgba(255,255,255,.1);
  margin-top:1.5rem;
  padding-top:1rem;
  font-size:.82rem;
  text-align:center;
}

/* ===== ADMIN ===== */
.wrapper-admin{ display:flex; min-height:100vh; }
.sidebar-admin{
  width:250px;
  background:#1b2733;
  color:#c9d3dc;
  flex-shrink:0;
}
.sidebar-admin .brand{
  padding:1.1rem 1.2rem;
  font-weight:700;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar-admin a{
  display:block;
  padding:.65rem 1.2rem;
  color:#c9d3dc;
  font-size:.92rem;
}
.sidebar-admin a:hover,
.sidebar-admin a.active{
  background:rgba(255,255,255,.08);
  color:#fff;
  border-left:3px solid var(--brand);
}
.konten-admin{ flex:1; padding:1.5rem; }
.topbar-admin{
  background:#fff;
  padding:.8rem 1.2rem;
  border-radius:.5rem;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  margin-bottom:1.2rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.card-stat{
  border:none;
  border-radius:.6rem;
  color:#fff;
  padding:1.3rem;
  box-shadow:0 4px 14px rgba(0,0,0,.1);
}
.card-stat .angka{ font-size:1.8rem; font-weight:700; }
.card-stat i{ font-size:2.2rem; opacity:.5; }
.bg-1{ background:linear-gradient(135deg,#4facfe,#00f2fe); }
.bg-2{ background:linear-gradient(135deg,#43e97b,#38f9d7); }
.bg-3{ background:linear-gradient(135deg,#fa709a,#fee140); }
.bg-4{ background:linear-gradient(135deg,#667eea,#764ba2); }

.login-box{
  max-width:400px;
  margin:6rem auto;
  background:#fff;
  padding:2.2rem;
  border-radius:.7rem;
  box-shadow:0 8px 30px rgba(0,0,0,.12);
}

@media (max-width: 768px){
  .sidebar-admin{ position:fixed; left:-250px; top:0; bottom:0; z-index:1050; transition:.25s; }
  .sidebar-admin.show{ left:0; }
  .konten-admin{ width:100%; }
}