:root{
  --mb-radius: 18px;
  --mb-shadow: 0 18px 40px rgba(15, 23, 42, .10);
  --mb-shadow-sm: 0 10px 24px rgba(15, 23, 42, .08);
  --mb-bg: #f5f7fb;
  --mb-surface: rgba(255,255,255,.88);
  --mb-text: #0f172a;
  --mb-muted: #64748b;
  --mb-primary: #1d4ed8;
}

/* Typography */
*{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
body{ background: var(--mb-bg); color: var(--mb-text); }

/* Links */
a{ color: inherit; text-decoration: none; }
a:hover{ color: var(--mb-primary); text-decoration: none; }

/* Utilities */
.rounded-4{ border-radius: var(--mb-radius) !important; }
.small-muted{ color: var(--mb-muted); }
.text-truncate-2{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Topbar */
.topbar{
  background: #0b1220;
  color: #e2e8f0;
  border-bottom: 1px solid rgba(226,232,240,.08);
}
.topbar-link{
  color: #e2e8f0;
  text-decoration: none;
  font-weight: 600;
}
.topbar-link:hover{
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Header */
.header-blur{
  backdrop-filter: blur(12px);
  background: var(--mb-surface) !important;   /* modern */
  background-color: rgba(255,255,255,.92);   /* fallback */
  border-bottom: 1px solid rgba(15,23,42,.06);
}

.brand-mark{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0f172a, #2563eb);
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.4px;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px rgba(37, 99, 235, .18);
}
.brand-name{ font-weight: 800; color: #0f172a; letter-spacing: .2px; }

.nav-link-news{
  font-weight: 700;
  color: #334155;
  border-radius: 999px;
  padding: .55rem .85rem;
}
.nav-link-news:hover{
  background: rgba(29,78,216,.08);
  color: #0f172a;
}
.nav-link-news.active{
  background: rgba(29,78,216,.12);
  color: var(--mb-primary);
}

.search-pill{
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 10px 18px rgba(15,23,42,.06);
}
.search-pill .form-control{ min-width: 260px; }
.search-pill .form-control:focus{ box-shadow: none; }

/* Cards */
.card{ border-radius: var(--mb-radius); }
.card-soft{
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: var(--mb-shadow-sm);
  background: #fff;
}
.news-card{
  transition: transform .18s ease, box-shadow .18s ease;
}
.news-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--mb-shadow);
}

/* Badges */
.badge-category{
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.03);
  color: #0f172a;
  font-weight: 700;
}

/* Breadcrumb */
.breadcrumb a{ color: var(--mb-primary); }

/* Ads placeholder (kalau masih dipakai di tempat lain) */
.ad-slot{ min-height: 140px; border-style: dashed !important; }

/* Article readability */
.article-content{ color: #0f172a; }
.article-content p{
  line-height: 1.9;
  margin-bottom: 1rem;
  color: #0f172a;
}
.article-content h2, .article-content h3{ margin-top: 1.4rem; }

/* Sidebar lists */
.list-group-item{ border-color: rgba(15,23,42,.06) !important; }

/* Social buttons (brand colors) */
.social-btn{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 10px 18px rgba(15,23,42,.06);
  color: #fff;
  transition: transform .15s ease, filter .15s ease;
}
.social-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  color: #fff;
}
.social-ig{ background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.social-x{ background: #0f172a; }
.social-yt{ background: #ff0000; }
.social-fb{ background: #1877f2; }
.social-wa{ background: #25D366; }

/* ===== FIX POPULER: supaya tidak melewati kotak ===== */
.min-w-0{ min-width: 0; }
.popular-item{
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .85rem 1rem;
  border: 0;
}
.popular-thumb{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  object-fit: cover;
  flex: 0 0 auto;
}
.popular-title{
  font-weight: 700;
  color: #0f172a;
}
.popular-meta{
  margin-top: .25rem;
  font-size: .85rem;
  color: #64748b;
}
.popular-item:hover .popular-title{
  color: var(--mb-primary);
}

/* ===== IKLAN: carousel bergerak hanya di kotak iklan ===== */
.ad-box{ height: 250px; }
.ad-img{ object-fit: cover; }
.ad-box .carousel,
.ad-box .carousel-inner,
.ad-box .carousel-item{ height: 100%; }

/* ===== Profile Card Footer ===== */
.profile-card{
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
}
.profile-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-top: 1px dashed rgba(15,23,42,.12);
  gap: 12px;
}
.profile-row:first-of-type{ border-top: none; }
.profile-label{
  font-size: .9rem;
  color: #64748b;
}
.profile-value{
  font-size: .95rem;
  font-weight: 700;
  color: #0f172a;
  text-align: right;
}

/* ===== Footer bottom seperti awal (1 baris) ===== */
.footer-bottom-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}
.footer-copy{ white-space: nowrap; }

.footer-nav{
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* Footer links (HANYA SATU DEFINISI) */
.footer-link{
  color: #334155;
  font-weight: 600;
  text-decoration: none;
}
.footer-link:hover{
  color: var(--mb-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Mobile fallback */
@media (max-width: 767.98px){
  .footer-bottom-row{
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-nav{
    flex-wrap: wrap;
    white-space: normal;
    gap: 10px 14px;
  }
  .footer-copy{ white-space: normal; }
}