:root { --red:#0057b8; --red2:#003c80; --dark:#1c1c1c; --fg:#222; --muted:#666; --line:#e5e5e5; --bg:#f7f7f7; }
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:'Arial',Helvetica,sans-serif; background:var(--bg); color:var(--fg); font-size:16px; line-height:1.6; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; height:auto; display:block; }

/* header */
.topbar { background:var(--dark); color:#ccc; font-size:12px; padding:5px 4%; display:flex; justify-content:space-between; }
.brand-row { display:flex; align-items:center; justify-content:space-between; background:var(--red); padding:16px 4%; }
.brand-row .logo img { height:32px; width:auto; display:block; }
.brand-row .logo:hover { opacity:.92; }
.brand-row .date { color:#ffd9dd; font-size:12.5px; }
.headstrip { height:4px; background:var(--dark); }

/* nav */
.nav { background:var(--red2); position:sticky; top:0; z-index:50; box-shadow:0 2px 6px rgba(0,0,0,.15); }
.nav ul { display:flex; list-style:none; flex-wrap:wrap; padding:0 2%; }
.nav li { flex:1 1 auto; text-align:center; }
.nav a { display:block; color:#fff; font-weight:bold; font-size:13px; text-transform:uppercase; letter-spacing:.4px; padding:11px 10px; border-right:1px solid rgba(255,255,255,.14); }
.nav li:first-child a { border-left:1px solid rgba(255,255,255,.14); }
.nav a:hover, .nav a.on { background:var(--dark); }


/* ticker */
.ticker { background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:stretch; }
.ticker .label { background:var(--red); color:#fff; font-weight:bold; font-size:12px; padding:8px 14px; text-transform:uppercase; white-space:nowrap; display:flex; align-items:center; }
.ticker .items { overflow:hidden; flex:1; }
.ticker .track { display:inline-flex; white-space:nowrap; animation:tickmove 60s linear infinite; will-change:transform; }
.ticker .track a { display:inline-block; margin:0 26px; font-size:13.5px; color:var(--fg); line-height:34px; }
.ticker .track a:hover { color:var(--red); }
.ticker:hover .track { animation-play-state:paused; }
@keyframes tickmove { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* layout */
.wrap { max-width:1280px; margin:0 auto; padding:18px 4%; }
.featured { display:grid; grid-template-columns:2fr 1fr; gap:18px; margin-bottom:22px; }
@media (max-width:800px){ .featured { grid-template-columns:1fr; } }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }
.grid.side { grid-template-columns:1fr; }

/* cards */
.card { background:#fff; border:1px solid var(--line); overflow:hidden; }
.card img { aspect-ratio:16/9; object-fit:cover; }
.card .cbody { padding:12px 14px 14px; }
.card h2 { font-size:16px; line-height:1.35; margin:4px 0 6px; }
.card h2 a:hover { color:var(--red); }
.card.big h2 { font-size:22px; }
.kicker { display:inline-block; color:var(--red); font-weight:bold; font-size:11px; text-transform:uppercase; letter-spacing:.5px; }
.meta { color:var(--muted); font-size:12px; }

/* sections */
.cat-sec { margin-bottom:26px; }
.sec-title { font-size:17px; border-left:5px solid var(--red); padding-left:10px; margin-bottom:12px; }
.sec-title a:hover { color:var(--red); }

/* article page */
.crumbs { font-size:12px; color:var(--muted); margin-bottom:10px; }
.crumbs a:hover { color:var(--red); }
.art-box { background:#fff; border:1px solid var(--line); padding:24px 28px; max-width:820px; margin:0 auto; }
.art-box h1 { font-size:26px; line-height:1.3; margin:8px 0 10px; }
.art-box .meta { border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:16px; }
.art-box img.hero { margin-bottom:16px; }
.art-box p { margin-bottom:14px; text-align:justify; }
.art-box h2 { font-size:19px; margin:20px 0 8px; }
.art-box .source { color:var(--muted); font-size:12px; font-style:italic; border-top:1px solid var(--line); padding-top:10px; }

/* static */
.page-h1 { font-size:24px; margin-bottom:14px; border-left:5px solid var(--red); padding-left:10px; }
.static-p { background:#fff; border:1px solid var(--line); padding:20px; }
main.wrap h2 { font-size:20px; margin:24px 0 10px; border-left:5px solid var(--red); padding-left:10px; }
.redaksi-list { background:#fff; border:1px solid var(--line); padding:18px 18px 18px 36px; line-height:1.7; }
.redaksi-list li { margin:0 0 10px; }
.redaksi-list li:last-child { margin-bottom:0; }

/* footer */
.foot { background:var(--dark); color:#bbb; margin-top:36px; font-size:13px; }
.foot .cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; padding:24px 4%; }
.foot .cols b { color:#fff; display:block; margin-bottom:8px; text-transform:uppercase; font-size:12px; }
.foot .cols a { margin-right:12px; }
.foot .cols a:hover { color:#fff; }
.foot .copy { border-top:1px solid #333; padding:12px 4%; font-size:12px; color:#888; }

/* ===== mobile ===== */
@media (max-width:760px){
  .brand-row { padding:10px 4%; }
  .brand-row .logo img { height:24px; }
  .brand-row .date { font-size:11px; }
  /* ===== menu mobile: bar MENU + drawer slide-in ===== */
  .navwrap { position:sticky; top:0; z-index:60; background:var(--red2); box-shadow:0 2px 6px rgba(0,0,0,.2); }
  .nav { display:none; }
  .navtoggle { display:flex; align-items:center; gap:12px; width:100%;
    background:transparent; color:#fff; border:none; cursor:pointer; padding:13px 16px; font-family:inherit; }
  .navtoggle .bars { display:flex; flex-direction:column; gap:4px; width:20px; }
  .navtoggle .bars span { display:block; height:2.5px; background:#fff; border-radius:2px; }
  .navtoggle b { font-size:14px; letter-spacing:2px; text-transform:uppercase; }
  .navtoggle .chev { margin-left:auto; width:8px; height:8px; border-right:2.5px solid #fff;
    border-bottom:2.5px solid #fff; transform:rotate(45deg) translateY(-2px); }
  .scrim { position:fixed; inset:0; background:rgba(0,0,0,.55); opacity:0; pointer-events:none;
    transition:opacity .3s; z-index:90; }
  body.drawer-open .scrim { opacity:1; pointer-events:auto; }
  .drawer { position:fixed; top:0; left:0; bottom:0; width:min(82vw,330px); z-index:100;
    background:#fff; transform:translateX(-102%); transition:transform .3s ease;
    display:flex; flex-direction:column; overflow-y:auto; box-shadow:4px 0 24px rgba(0,0,0,.25); }
  body.drawer-open .drawer { transform:none; }
  .d-head { display:flex; align-items:center; justify-content:space-between;
    background:var(--red); padding:14px 16px; }
  .d-head img { height:30px; width:auto; }
  .d-close { background:rgba(255,255,255,.18); color:#fff; border:none; border-radius:50%;
    width:40px; height:40px; font-size:17px; cursor:pointer; line-height:1; flex:none; }
  .d-label { font-size:11px; font-weight:bold; letter-spacing:1.5px; color:var(--muted);
    text-transform:uppercase; padding:14px 18px 6px; }
  .d-nav { list-style:none; }
  .d-nav li { border-bottom:1px solid var(--line); }
  .d-nav a { display:flex; align-items:center; justify-content:space-between;
    padding:15px 18px; font-weight:bold; font-size:15px; }
  .d-nav a.on { color:var(--red); background:#fafafa; border-left:4px solid var(--red); padding-left:14px; }
  .d-nav .chev-r { width:8px; height:8px; border-top:2.5px solid #b5b5b5; border-right:2.5px solid #b5b5b5;
    transform:rotate(45deg); }
  .d-static { display:block; }
  .d-static a { display:flex; align-items:center; gap:10px; padding:14px 18px; font-size:14px;
    color:var(--fg); border-bottom:1px solid var(--line); }
  .d-static a::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--red); opacity:.6; }
  .d-foot { margin-top:auto; padding:16px 18px; font-size:11.5px; color:var(--muted); }
}
/* desktop */
@media (min-width:761px){
  .navtoggle, .scrim, .drawer { display:none !important; }
  .navwrap { position:sticky; top:0; z-index:50; background:var(--red2); box-shadow:0 2px 6px rgba(0,0,0,.15); }
  .nav { display:block; }
  .nav ul { display:flex; list-style:none; flex-wrap:wrap; padding:0 2%; }
  .nav li { flex:1 1 auto; text-align:center; }
  .nav a { display:block; color:#fff; font-weight:bold; font-size:13px; text-transform:uppercase; letter-spacing:.4px; padding:11px 10px; border-right:1px solid rgba(255,255,255,.14); }
  .nav li:first-child a { border-left:1px solid rgba(255,255,255,.14); }
  .nav a:hover, .nav a.on { background:var(--dark); }
}
/* ===== Layout 3 kolom portal: konten + sidebar ===== */
.layout { max-width:1280px; margin:0 auto; padding:0; display:grid;
  grid-template-columns:minmax(0,1fr) 330px; gap:26px; align-items:start; }
.layout .wrap { max-width:none; padding:18px 0 26px; }
.sidebar { position:sticky; top:70px; display:flex; flex-direction:column; gap:16px; padding:18px 0 26px; }
.sbox { background:#fff; border:1px solid var(--line); padding:14px 16px 10px; }
.sbox h3 { font-size:15px; text-transform:uppercase; letter-spacing:.4px;
  border-left:5px solid var(--red); padding-left:10px; margin:0 0 8px; }
.slist { list-style:none; margin:0; padding:0; }
.slist li { padding:8px 0; border-bottom:1px dashed var(--line); font-size:13.5px; line-height:1.45; }
.slist li:last-child { border-bottom:none; }
.slist a:hover { color:var(--red); }
.snum { counter-reset:pop; }
.snum li { display:flex; gap:10px; align-items:baseline; }
.snum li::before { counter-increment:pop; content:counter(pop);
  font-weight:800; font-size:17px; color:var(--red); min-width:16px; }
.sabout { font-size:13px; color:var(--muted); line-height:1.5; }
.sabout a { color:var(--fg); font-weight:bold; }
.sabout a:hover { color:var(--red); }
@media (max-width:1020px) {
  .layout { grid-template-columns:1fr; }
  .sidebar { position:static; order:2; }
  .layout .wrap { padding:18px 4%; }
}
@media (max-width:640px) { .sidebar { padding:0 4% 20px; } }

/* ===== Kartu dengan ringkasan (lead) + side list kompak ===== */
.card .desc { color:var(--muted); font-size:13.5px; line-height:1.45; margin:0 0 7px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card.big .desc { font-size:15px; -webkit-line-clamp:3; }
.featured { align-items:start; }
.grid.side { grid-template-columns:1fr; gap:10px; }
.grid.side .card { display:grid; grid-template-columns:116px minmax(0,1fr); }
.grid.side .card img { aspect-ratio:1/1; height:116px; }
.grid.side .cbody { padding:8px 10px 10px; }
.grid.side .card h2 { font-size:14.5px; margin:3px 0 4px; }
.grid.side .desc { font-size:12.5px; -webkit-line-clamp:2; margin-bottom:4px; }
@media (max-width:800px) { .grid.side .card { grid-template-columns:100px minmax(0,1fr); }
  .grid.side .card img { height:100px; } }

/* ===== Featured kolom kiri: hero + 2 kartu medium ===== */
.fleft { display:flex; flex-direction:column; gap:10px; min-width:0; }
.fleft .grid.half { grid-template-columns:1fr 1fr; gap:10px; }
.fleft .grid.half .card h2 { font-size:15px; }
@media (max-width:800px) { .fleft .grid.half { grid-template-columns:1fr; } }

/* ===== Menu 8 item ===== */
.navwrap .nav { max-width:1280px; margin:0 auto; }
.navwrap .nav ul { display:flex; justify-content:center; flex-wrap:wrap; }
@media (min-width:1024px) { .navwrap .nav a { font-size:12.5px; padding:11px 14px; } }