body{
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  display:flex; min-height:100vh; flex-direction:column;
}
main#content{ flex:1 0 auto; }

a{ color:var(--accent); } a:hover{ color:var(--accent-ink); text-decoration:none; }
:focus{ outline:none; }

#headlineCarousel .carousel-indicators li {
  background-color: #fff;
}
#headlineCarousel .carousel-indicators .active {
  background-color: var(--accent);
}

/* ===== Header (desktop 2-baris) ===== */
.site-header{ background:var(--paper); border-bottom:1px solid var(--border); }
.site-header.elevated{ box-shadow:0 10px 30px rgba(17,24,39,.06); }
.topbar{ padding:.55rem 0; }
/* ===== Brand Logo ===== */
.brand { display: inline-flex; align-items: center; }
.brand-logo {
  height: 32px; width: auto; object-fit: contain; display: block;
}
@media (min-width: 992px) {
  .brand-logo { height: 32px; }
}

.icon-btn{ width:38px; height:38px; border-radius:10px; border:1px solid var(--border); background:var(--paper); display:inline-flex; align-items:center; justify-content:center; }
.icon-btn:focus{ box-shadow:0 0 0 .2rem rgba(138,180,255,.35); border-color:var(--focus); }

.search-wrap{ min-width:420px; max-width:560px; flex:1; justify-content:center; }
.search-group .input-group-text{ background:var(--paper); border:1px solid var(--border); border-right:0; }
.search-group .form-control{ border:1px solid var(--border); border-left:0; }
.search-group .form-control:focus{ border-color:var(--focus); box-shadow:0 0 0 .2rem rgba(138,180,255,.22); }

.socials{ display:flex; align-items:center; gap:8px; }
.socials a{ width:36px; height:36px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); background:var(--paper); color:var(--ink); transition:.15s; }
.socials a:hover{ background:var(--soft); color:var(--accent); border-color:var(--focus); }

/* Menubar (desktop) */
.menubar{ background:var(--paper); border-top:1px solid var(--border); position:relative; z-index:1030; padding-bottom:.1rem; }
.menu-scroll{ display:flex; align-items:center; gap:.25rem; padding:.35rem 0; position:relative; z-index:2; overflow:visible; }
.menu-link{
  display:inline-flex; align-items:center; height:38px; padding:0 .8rem;
  border-radius:9px; color:var(--ink); font-weight:600; border:1px solid transparent;
  background:var(--paper); font-size:14px;
}
.menu-link:hover{ background:var(--soft); color:var(--accent); }
.menu-link.active{ background:var(--soft); color:var(--accent-ink); border-color:var(--focus); }
.menu-link.has-caret i{ margin-left:.25rem; font-size:16px; line-height:1; opacity:.85; transition:transform .18s ease; }
.menu-link.has-caret[aria-expanded="true"] i{ transform:rotate(180deg); }
.menubar .dropdown-toggle::after{ display:none!important; }

.menu-dropdown{ position:relative; display:inline-flex; }
.menu-dropdown .dropdown-menu{
  margin-top:.45rem; border-radius:12px; border:1px solid var(--border);
  box-shadow:0 12px 28px rgba(17,24,39,.12); min-width:12rem; z-index:1050;
  max-height:320px; overflow:auto; background:var(--paper);
}
.menu-dropdown .dropdown-item:hover,
.menu-dropdown .dropdown-item.active,
.menu-dropdown .dropdown-item:active,
.menu-dropdown .dropdown-item:focus{ background:var(--soft); color:var(--accent); }

.menu-dropdown .dropdown-item{ font-size:.90rem }

/* Mobile drawer (kiri → kanan) */
.drawer-backdrop{
  position:fixed; inset:0; background:rgba(15,23,42,.55);
  opacity:0; visibility:hidden; transition:.2s ease; z-index:1040;
}
.drawer-backdrop.open{ opacity:1; visibility:visible; }

.drawer{
  position:fixed; top:0; left:0; height:100%; width:86vw; max-width:420px; background:var(--paper);
  box-shadow:12px 0 30px rgba(15,23,42,.2); transform:translateX(-100%);
  transition:transform .28s ease; z-index:1050; display:flex; flex-direction:column;
  border-right:1px solid var(--border);
}
.drawer.open{ transform:translateX(0); }

.drawer-head{ padding:16px 18px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); }
.drawer-title{ font-weight:800; letter-spacing:.2px; }
.drawer-close{ width:36px; height:36px; border-radius:10px; border:1px solid var(--border); display:inline-flex; align-items:center; justify-content:center; background:var(--paper); }
.drawer-close:focus{ box-shadow:0 0 0 .2rem rgba(138,180,255,.35); }
.drawer-body{ padding:8px 12px 16px; overflow:auto; }

.d-item{ padding:12px 8px; border-radius:12px;font-size:14px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
.d-item:hover{ background:var(--soft); }
.d-left{ display:flex; align-items:center; gap:10px; }
.d-left .mdi{ font-size:18px; width:22px; text-align:center; }
.d-text{ font-weight:700; color:var(--ink); }
.d-arrow{ color:var(--muted); transition:.2s; }
.d-item[aria-expanded="true"] .d-arrow{ transform:rotate(180deg); }

/* ===== Drawer mobile active state ===== */
.d-text.active {
  color: var(--accent);
}

.d-sub a.active {
  color: var(--accent);
  font-weight: 600;
}


.d-sub{ padding:4px 5px; margin:4px 0 0 16px; background:var(--paper); }
.d-sub a{ display:block; padding:8px 8px; border-radius:8px; color:var(--ink); }
.d-sub a:hover{ background:var(--soft); color:var(--accent); }

/* Hide menubar on mobile */
@media (max-width:991.98px){ .menubar{ display:none; } }

/* Remove focus border on active menu link (consistency with hover) */
.menu-link:focus, .menu-link:active, .menu-link.show{
  border:none!important; box-shadow:none!important; outline:none!important;
  background:var(--soft)!important; color:var(--accent-ink)!important;
}

/* ===== Ticker ===== */
.ticker-shell{ background:var(--paper); border-bottom:1px solid var(--border); }
.ticker-grid{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:.8rem; padding:.35rem 0; }
.ticker-badge{
  background:var(--accent); color:#fff; font-weight:600; font-size:.78rem; letter-spacing:.06em;
  padding:.35rem .6rem; border-radius:6px; text-transform:uppercase;
}
.ticker-rail{
  overflow:hidden; position:relative; border-left:1px solid var(--border); padding-left:.8rem;
  -webkit-mask-image:linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
}
.ticker-track{
  display:inline-flex; align-items:center; gap:2rem; white-space:nowrap; padding:.2rem 0;
  will-change:transform; animation:tickerSlide var(--tickerDur, 36s) linear infinite; backface-visibility:hidden;
}
.ticker-shell:hover .ticker-track{ animation-play-state:paused; }
.ti{ color:var(--muted); text-decoration:none; display:inline-flex; align-items:center; font-size:.95rem; }
.ti:hover{ color:var(--ink); text-decoration:underline; }
.ti i{ color:var(--accent); margin-right:.35rem; font-size:16px; }

@keyframes tickerSlide{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media(max-width:576px){
  .ticker-rail{ overflow:hidden; }
  .ticker-track{ animation:tickerSlide var(--tickerDurMobile, 28s) linear infinite; }
}
@media (prefers-reduced-motion:reduce){ .ticker-track{ animation:none!important; } }

/* ===== Main content ===== */
.section-title{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem; }
.section-title h2{ font-size:1.1rem; margin:0; }
.badge-cat{
  background:var(--soft); color:var(--accent-ink); border:1px solid var(--focus);
  padding:.2rem .55rem; border-radius:999px; font-size:.75rem; font-weight:600;
}
.muted{ color:var(--muted); }
.card{ background:var(--paper); border:1px solid var(--border); border-radius:14px; }
.card-img-top{ border-top-left-radius:14px; border-top-right-radius:14px; }
.clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* Hero */
.hero{
  position:relative; border-radius:16px; overflow:hidden; background:var(--soft);
  min-height:320px; height:420px;
}
.hero img{
  width:100%; height:100%; height:420px; object-fit:cover; object-position:center; opacity:.94;
}
.hero .overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 60%, rgba(0, 0, 0, 0.85) 100%);
}
.hero .content{ position:absolute; left:0; right:0; bottom:0; padding:1rem 1rem 1.1rem; }
.hero h1{ font-size:1.6rem; line-height:1.25; margin:0 0 .35rem; }
.hero .meta{ color:var(--muted); font-size:.9rem; }
@media (max-width:768px){
  .hero{ max-height:300px; min-height:200px; }
  .hero img{ max-height:300px; }
}

/* Trending + lists */
.trend-card{ background:var(--paper); border:1px solid var(--border); border-radius:18px; }
.list-unstyled li+li{ border-top:1px dashed var(--border); }
.mini-list .item{ display:flex; align-items:flex-start; padding:10px 0; border-top:1px dashed var(--border); }
.mini-list .item:first-child{ border-top:0; padding-top:0; }
.mini-list .thumb{ flex:0 0 112px; width:112px; height:72px; border-radius:10px; overflow:hidden; background:var(--soft); }
.mini-list .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.mini-list .info{ flex:1; min-width:0; padding-left:12px; }
.mini-list .title{ color:var(--ink); font-weight:500; margin-bottom:.25rem; }
.mini-list .meta{ font-size:.86rem; color:var(--muted); }

/* Footer */
footer{ border-top:1px solid var(--border); background:var(--paper); color:var(--muted); }

/* Breadcrumb */
.breadcrumb{ background:transparent; margin-bottom:.5rem;margin-top:-1rem; }
.breadcrumb-item+.breadcrumb-item::before{ content:"›"; color:var(--muted); }

/* Artikel */
.article-header{ margin-bottom:1rem; }
.article-title{ font-size:1.75rem; line-height:1.25; margin-bottom:.5rem; color:var(--ink); }
.article-meta{ color:var(--muted); font-size:.95rem; }
.meta-dot::before{ content:"•"; margin:0 .4rem; color:var(--muted); }

.cover{ border-radius:16px; overflow:hidden; background:var(--soft); border:1px solid var(--border); }
.cover img{ width:100%; height:auto; display:block; }

.article-content{ background:var(--paper); border:1px solid var(--border); border-radius:16px; padding:1.25rem; }
.article-content h2{ font-size:1.4rem; margin-top:1.25rem; }
.article-content h3{ font-size:1.2rem; margin-top:1rem; }
.article-content p{ line-height:1.8; }
.article-content ul, .article-content ol{ padding-left:1.2rem; }
.article-content blockquote{ border-left:4px solid var(--accent); background:var(--soft); padding:.8rem 1rem; border-radius:8px; color:var(--ink); }
.article-content figure{ margin:1rem 0; text-align:center; }
.article-content figcaption{ font-size:.9rem; color:var(--muted); }
.article-content img{ max-width:100%; height:auto; border-radius:12px; }
.article-content table{ width:100%; border-collapse:collapse; margin:1rem 0; }
.article-content table th, .article-content table td{ border:1px solid var(--border); padding:.6rem; }

/* Share bar */
.share-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.btn-share{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border); background:var(--paper); color:var(--ink); border-radius:999px; padding:.4rem .7rem; font-size:.9rem; }
.btn-share:hover{ background:var(--soft); color:var(--accent); }
.copy-badge{ display:none; margin-left:8px; color:var(--accent-ink); font-weight:600; }
.copy-badge.show{ display:inline; }

/* Uniform image ratio wrappers */
.thumb-wrap{ position:relative; overflow:hidden; background:var(--soft); border-radius:14px 14px 0 0 ; border:1px solid var(--border); }
.thumb-wrap img.thumb-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ratio-16x10{ padding-top:62.5%; } /* cocok utk thumb 320x200 */
.ratio-16x9{ padding-top:56.25%; }
.ratio-4x3{ padding-top:75%; }