/* berita.co — global.css
   1) Reset & tautan  2) Komponen bersama (dipakai ≥2 halaman)  3) Animasi & responsif (breakpoint 1080px / 640px)
   Nilai warna/font/ukuran memakai custom property dari tokens.css. */

/* ---- 1. Reset ---- */
body { margin:0; background:var(--bc-bg); font-family:var(--bc-font-sans); color:var(--bc-ink); -webkit-font-smoothing:antialiased; }
a { color:var(--bc-ink); text-decoration:none; }
a:hover { color:var(--bc-red); }
.bc-main-wrap { display: block; }

/* ---- 2. Komponen bersama ---- */
.bc-topbar { background:var(--bc-ink); color:var(--bc-on-dark); font-size: var(--bc-fs-12) }
.bc-topbar__row { max-width: var(--bc-container); margin:0 auto; padding:8px 24px; display:flex; align-items:center; justify-content:flex-end; gap:16px }
.bc-topbar__row-2 { display:flex; gap:20px; font-weight:600 }
.bc-topbar__link { color:var(--bc-on-dark) }
.bc-topbar__link:hover { color:var(--bc-white) }
.bc-ticker { background:var(--bc-red); color:var(--bc-white); overflow:hidden; display:flex; align-items:stretch }
.bc-ticker__kicker { background:var(--bc-ink); padding:8px 16px; font-size: var(--bc-fs-12); font-weight:800; letter-spacing:0.12em; display:flex; align-items:center; flex-shrink:0; z-index:1 }
.bc-ticker__row { overflow:hidden; flex:1; display:flex; align-items:center }
.bc-ticker__row-2 { display:flex; gap:48px; white-space:nowrap; animation:ticker-scroll 42s linear infinite; padding-left:24px; font-size: var(--bc-fs-13); font-weight:600 }
.bc-ticker__row-3 { display:flex; align-items:center; gap:48px }
.bc-ticker__label { opacity:0.5 }
.bc-masthead { background:var(--bc-white); border-bottom:3px solid var(--bc-ink) }
.bc-masthead__row { max-width: var(--bc-container); margin:0 auto; padding:20px 24px 14px; display:flex; align-items:center; justify-content:space-between; gap:32px }
.bc-masthead__link { display:flex; flex-shrink:0 }
.bc-masthead__img { height:40px; width:auto; display:block }
.bc-masthead__nav { display:flex; align-items:center; gap:28px; font-size: var(--bc-fs-15); font-weight:700 }
.bc-masthead__link-2 { color:var(--bc-red); border-bottom:3px solid var(--bc-red); padding:6px 0 }
.bc-masthead__link-2:hover { color: var(--bc-red) }
.bc-masthead__link-3 { padding:6px 0 }
.bc-masthead__form { display:flex; align-items:center; gap:0; border:1.5px solid var(--bc-ink); flex-shrink:0 }
.bc-masthead__input { border:none; outline:none; padding:8px 12px; font-family:var(--bc-font-sans); font-size: var(--bc-fs-13); width:160px; background:transparent }
.bc-masthead__btn { background:var(--bc-ink); color:var(--bc-white); border:none; padding:8px 14px; font-family:var(--bc-font-sans); font-size: var(--bc-fs-12); font-weight:700; cursor:pointer; letter-spacing:0.06em }
.bc-masthead__btn:hover { background:var(--bc-red) }
.bc-masthead__btn-2 { background:none; border:1.5px solid var(--bc-ink); padding:10px 12px; cursor:pointer; flex-direction:column; gap:5px; align-items:stretch; width:44px; height:44px; justify-content:center }
.bc-masthead__label { height:2.5px; background:var(--bc-ink); display:block }
.bc-masthead__label-2 { height:2.5px; background:var(--bc-ink); display:block; width:60% }
.bc-menu-mobile { position:fixed; inset:0; background:var(--bc-red); z-index:1000; display:flex; flex-direction:column; padding:20px 24px 32px; overflow:auto }
.bc-menu-mobile__row { display:flex; align-items:center; justify-content:space-between; border-bottom:2px solid rgba(255,255,255,0.35); padding-bottom:16px }
.bc-menu-mobile__label { color:var(--bc-white); font-size: var(--bc-fs-18); font-weight:800; letter-spacing:-0.01em }
.bc-menu-mobile__label-2 { opacity:0.75 }
.bc-menu-mobile__btn { background:none; border:1.5px solid var(--bc-white); color:var(--bc-white); width:44px; height:44px; font-size: var(--bc-fs-22); cursor:pointer; display:flex; align-items:center; justify-content:center; font-family:var(--bc-font-sans) }
.bc-menu-mobile__nav { display:flex; flex-direction:column; margin-top:12px }
.bc-menu-mobile-link { display:flex; align-items:baseline; gap:16px; color:var(--bc-white); padding:18px 0; border-bottom:1px solid rgba(255,255,255,0.25); animation:menu-in 0.45s 0.05s both }
.bc-menu-mobile-link:hover { color: var(--bc-white) }
.bc-menu-mobile-link__mono { font-family:var(--bc-font-mono); font-size: var(--bc-fs-13); opacity:0.7 }
.bc-menu-mobile-link__label { font-size: var(--bc-fs-42); font-weight:800; letter-spacing:-0.02em; line-height:1.05 }
.bc-menu-mobile-link-2 { display:flex; align-items:baseline; gap:16px; color:var(--bc-white); padding:18px 0; border-bottom:1px solid rgba(255,255,255,0.25); animation:menu-in 0.45s 0.12s both }
.bc-menu-mobile-link-2:hover { color: var(--bc-white) }
.bc-menu-mobile-link-3 { display:flex; align-items:baseline; gap:16px; color:var(--bc-white); padding:18px 0; border-bottom:1px solid rgba(255,255,255,0.25); animation:menu-in 0.45s 0.19s both }
.bc-menu-mobile-link-3:hover { color: var(--bc-white) }
.bc-menu-mobile-link-4 { display:flex; align-items:baseline; gap:16px; color:var(--bc-white); padding:18px 0; border-bottom:1px solid rgba(255,255,255,0.25); animation:menu-in 0.45s 0.26s both }
.bc-menu-mobile-link-4:hover { color: var(--bc-white) }
.bc-menu-mobile__form { display:flex; margin-top:28px; border:1.5px solid var(--bc-white); animation:menu-in 0.45s 0.35s both }
.bc-menu-mobile__input { flex:1; border:none; outline:none; background:transparent; color:var(--bc-white); padding:12px 14px; font-family:var(--bc-font-sans); font-size: var(--bc-fs-15) }
.bc-menu-mobile__btn-2 { background:var(--bc-white); color:var(--bc-red); border:none; padding:12px 18px; font-family:var(--bc-font-sans); font-size: var(--bc-fs-13); font-weight:800; letter-spacing:0.06em; cursor:pointer }
.bc-menu-mobile__row-2 { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:auto; padding-top:36px; animation:menu-in 0.45s 0.45s both }
.bc-menu-mobile__link { color:var(--bc-white); font-size: var(--bc-fs-13-5); font-weight:600; opacity:0.85 }
.bc-menu-mobile__link:hover { color: var(--bc-white) }
.bc-terpopuler-item { display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--bc-line-soft) }
.bc-terpopuler-item__label { font-size: var(--bc-fs-26); font-weight:800; color:var(--bc-red); line-height:1; min-width:24px }
.bc-terpopuler-item__link { font-size: var(--bc-fs-14); font-weight:700; line-height:1.4; text-wrap:pretty }
.bc-tag-chip { font-size: var(--bc-fs-12); font-weight:700; background:var(--bc-white); border:1px solid var(--bc-line); padding:5px 10px; color:var(--bc-ink-2) }
.bc-tag-chip:hover { border-color:var(--bc-red); color:var(--bc-red) }
.bc-footer { background:var(--bc-white); border-top:3px solid var(--bc-ink) }
.bc-footer__box { max-width: var(--bc-container); margin:0 auto; padding:36px 24px 20px }
.bc-footer__grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; padding-bottom:28px; border-bottom:1px solid var(--bc-line-soft) }
.bc-footer__col { display:flex; flex-direction:column; gap:14px }
.bc-footer__img { height:32px; width:auto; align-self:flex-start }
.bc-footer__text { margin:0; font-size: var(--bc-fs-13); line-height:1.6; color:var(--bc-muted); max-width:320px }
.bc-footer__col-2 { display:flex; flex-direction:column; gap:10px }
.bc-footer__kicker { font-size: var(--bc-fs-12); font-weight:800; letter-spacing:0.1em; color:var(--bc-muted-2) }
.bc-footer__link { font-size: var(--bc-fs-14); font-weight:600 }
.bc-footer__row { display:flex; justify-content:space-between; align-items:center; padding-top:18px; font-size: var(--bc-fs-12); color:var(--bc-muted-2) }
.bc-breadcrumb-2 { font-size: var(--bc-fs-12-5); color:var(--bc-muted-2); display:flex; gap:8px; align-items:center }
.bc-breadcrumb__link-2 { color:var(--bc-muted-2); font-weight:600 }
.bc-breadcrumb__link-2:hover { color: var(--bc-muted-2) }
.bc-breadcrumb__label-3 { color:var(--bc-ink); font-weight:700 }
.bc-pagination__label { font-size: var(--bc-fs-13); font-weight:700; color:var(--bc-line-strong); border:1.5px solid var(--bc-line-soft); padding:9px 14px }
.bc-pagination__label-2 { font-size: var(--bc-fs-13); font-weight:800; background:var(--bc-ink); color:var(--bc-white); padding:9px 14px }
.bc-pagination__link { font-size: var(--bc-fs-13); font-weight:700; border:1.5px solid var(--bc-line); padding:9px 14px }
.bc-pagination__link:hover { border-color:var(--bc-red) }
.bc-pagination__label-3 { font-size: var(--bc-fs-13); color:var(--bc-muted-2) }
.bc-pagination__link-2 { font-size: var(--bc-fs-13); font-weight:700; border:1.5px solid var(--bc-ink); padding:9px 14px }
.bc-pagination__link-2:hover { border-color:var(--bc-red); color:var(--bc-red) }
.bc-pagination-2 { display:flex; align-items:center; gap:8px; padding:26px 0 44px; flex-wrap:wrap }

/* ---- 3. Animasi & responsif ---- */
@keyframes ticker-scroll { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }
@keyframes menu-in { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
.bc-burger { display: none !important; }
@media (max-width: 1080px) { .bc-mast { flex-wrap: wrap !important; gap: 14px !important; } .bc-search { order: 3; width: 100%; } .bc-search input { flex: 1; width: auto !important; } .bc-foot { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 640px) { .bc-topbar-links { display: none !important; } .bc-nav { display: none !important; } .bc-search { display: none !important; } .bc-burger { display: flex !important; } .bc-foot { grid-template-columns: 1fr !important; gap: 24px !important; } .bc-footbottom { flex-direction: column; gap: 6px; align-items: flex-start !important; } .bc-h1 { font-size: var(--bc-fs-40) !important; } .bc-lede { font-size: var(--bc-fs-17) !important; } .bc-teamrow { grid-template-columns: 1fr !important; } .bc-404 { font-size: var(--bc-fs-120) !important; } }

/* Elemen berstatus tersembunyi (menu mobile, dropdown TOC, sheet detail) — harus paling akhir agar menang atas !important responsif */
[data-bc-if][hidden] { display: none !important; }
