:root{
  --ink:#14142B; --ink-soft:#4A4A63; --paper:#FFFFFF; --mist:#F4F5FA;
  --coral:#FF3B5C; --coral-deep:#E11D48; --ocean:#1D4ED8; --sun:#FFB020;
  --line:#E6E8F0; --card:#FFFFFF; --shadow:18px 28px 60px -28px rgba(20,20,43,.28);
  --radius:18px;
  --cat-nasional:#FF3B5C; --cat-internasional:#1D4ED8; --cat-ekonomi:#0EA5A4;
  --cat-olahraga:#7C3AED; --cat-teknologi:#0891B2; --cat-hiburan:#DB2777;
  --font-display:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
}
[data-theme="dark"]{
  --ink:#F2F3FA; --ink-soft:#A6A8C0; --paper:#0E0E1C; --mist:#16162A;
  --line:#262640; --card:#181830; --shadow:18px 28px 60px -28px rgba(0,0,0,.6);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);line-height:1.55;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1240px;margin:0 auto;padding:0 22px}

/* TICKER */
.ticker{background:var(--ink);color:#fff;overflow:hidden;border-bottom:3px solid var(--coral)}
[data-theme="dark"] .ticker{background:#05050F}
.ticker-inner{display:flex;align-items:center;gap:0;height:42px}
.ticker-tag{background:var(--coral);color:#fff;font-family:var(--font-display);font-weight:800;font-size:12.5px;letter-spacing:.06em;padding:0 16px;height:100%;display:flex;align-items:center;flex-shrink:0;text-transform:uppercase;gap:8px;white-space:nowrap}
.live-dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
.ticker-track{display:flex;gap:42px;white-space:nowrap;animation:scroll 48s linear infinite;padding-left:42px}
.ticker-track:hover{animation-play-state:paused}
.ticker-track span{font-size:13.5px;font-weight:500;opacity:.92}
.ticker-track span::before{content:"•";color:var(--coral);margin-right:42px;font-size:16px}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* HEADER */
header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:22px;height:72px}
.logo{font-family:var(--font-display);font-weight:800;font-size:25px;letter-spacing:-.02em;display:flex;align-items:center;gap:9px}
.logo b{color:var(--coral)}
.logo .mark{width:38px;height:38px;border-radius:11px;flex-shrink:0;display:block;box-shadow:0 6px 16px -7px var(--coral)}
nav{display:flex;gap:4px;margin-left:6px;flex:1;overflow-x:auto;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
.navlink{font-family:var(--font-display);font-weight:600;font-size:14.5px;color:var(--ink-soft);padding:8px 13px;border-radius:10px;white-space:nowrap;cursor:pointer;transition:.18s}
.navlink:hover{color:var(--ink);background:var(--mist)}
.navlink.active{color:var(--coral);background:color-mix(in srgb,var(--coral) 12%,transparent)}
.tools{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
.icon-btn{width:40px;height:40px;border:1px solid var(--line);background:var(--card);border-radius:11px;display:grid;place-items:center;cursor:pointer;color:var(--ink);font-size:17px;transition:.18s}
.icon-btn:hover{border-color:var(--coral);color:var(--coral);transform:translateY(-1px)}
.clock{font-family:var(--font-display);font-weight:600;font-size:12.5px;color:var(--ink-soft);display:flex;align-items:center;gap:7px;padding:0 4px}
.clock .live-dot{background:var(--coral)}
@media(max-width:820px){.clock{display:none}}

/* AD SLOTS */
.ad-slot{position:relative;background:repeating-linear-gradient(45deg,var(--mist),var(--mist) 12px,transparent 12px,transparent 24px);border:1px dashed var(--line);border-radius:14px;display:grid;place-items:center;text-align:center;color:var(--ink-soft);font-size:12.5px;font-weight:600;letter-spacing:.04em;overflow:hidden}
.ad-slot::before{content:"IKLAN";position:absolute;top:8px;left:10px;font-size:9.5px;letter-spacing:.12em;color:var(--ink-soft);opacity:.7;font-family:var(--font-display)}
.ad-leaderboard{min-height:108px}
.ad-leaderboard-wrap{margin:26px 0}
.ad-rect{min-height:266px}
.ad-inline{min-height:118px}
.ad-inline-wrap{margin:6px 0}

/* SECTIONS */
.eyebrow{font-family:var(--font-display);font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--coral);display:flex;align-items:center;gap:11px;margin:0 0 18px}
.eyebrow::after{content:"";flex:1;height:2px;background:linear-gradient(90deg,var(--line),transparent)}
section{padding:14px 0}

/* HERO */
.hero{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;margin-top:26px}
.hero-main,.hero-side .h-card{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--card);box-shadow:var(--shadow);cursor:pointer;display:block}
.hero-main{min-height:430px}
.hero-main .ph,.h-card .ph{position:absolute;inset:0;background-size:cover;background-position:center;transition:.5s}
.hero-main:hover .ph,.h-card:hover .ph{transform:scale(1.05)}
.scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,8,20,.92) 5%,rgba(8,8,20,.35) 50%,transparent 100%)}
.hero-main .body{position:absolute;bottom:0;padding:30px;color:#fff;z-index:2}
.hero-main h2{font-family:var(--font-display);font-weight:800;font-size:30px;line-height:1.15;letter-spacing:-.02em;margin:13px 0 9px}
.hero-main p{font-size:14.5px;opacity:.88;max-width:90%}
.hero-side{display:grid;grid-template-rows:1fr 1fr;gap:18px}
.h-card{min-height:206px}
.h-card .body{position:absolute;bottom:0;padding:20px;color:#fff;z-index:2}
.h-card h3{font-family:var(--font-display);font-weight:700;font-size:17px;line-height:1.25;margin-top:9px}
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:#fff;padding:5px 11px;border-radius:999px;background:var(--coral)}
.meta{font-size:12px;opacity:.8;margin-top:11px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.src-chip{font-weight:600}

/* LAYOUT GRID */
.layout{display:grid;grid-template-columns:1fr 320px;gap:34px;margin-top:8px;align-items:start}
.tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:20px}
.tab{font-family:var(--font-display);font-weight:600;font-size:13.5px;padding:8px 15px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink-soft);cursor:pointer;transition:.18s}
.tab:hover{border-color:var(--coral);color:var(--ink)}
.tab.active{background:var(--ink);color:#fff;border-color:var(--ink)}
[data-theme="dark"] .tab.active{background:var(--coral);border-color:var(--coral)}
.news-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:.22s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.card .thumb{aspect-ratio:16/9;background-size:cover;background-position:center;background-color:var(--mist);position:relative}
.card .thumb .pill{position:absolute;top:11px;left:11px}
.card .c-body{padding:16px 17px 18px}
.card h4{font-family:var(--font-display);font-weight:700;font-size:16.5px;line-height:1.3;letter-spacing:-.01em}
.card p{font-size:13.5px;color:var(--ink-soft);margin-top:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{color:var(--ink-soft);opacity:1;margin-top:13px}
.card .meta .src-chip{color:var(--coral)}

/* SIDEBAR */
aside{position:sticky;top:90px;display:flex;flex-direction:column;gap:26px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.panel h5{font-family:var(--font-display);font-weight:800;font-size:16px;margin-bottom:16px;display:flex;align-items:center;gap:9px}
.panel h5 .num{color:var(--coral)}
.trend-item{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}
.trend-item:last-child{border:0;padding-bottom:0}
.trend-item:first-child{padding-top:0}
.trend-rank{font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--line);flex-shrink:0;width:26px;line-height:1.1}
.trend-item:hover .trend-rank{color:var(--coral)}
.trend-item h6{font-family:var(--font-display);font-weight:600;font-size:14px;line-height:1.35}
.trend-item small{color:var(--ink-soft);font-size:12px}

/* STATES */
.skeleton{background:linear-gradient(90deg,var(--mist) 25%,var(--line) 37%,var(--mist) 63%);background-size:400% 100%;animation:sk 1.3s infinite}
@keyframes sk{from{background-position:100% 0}to{background-position:-100% 0}}
.more-btn{display:block;margin:30px auto 0;font-family:var(--font-display);font-weight:700;font-size:14px;background:var(--ink);color:#fff;border:0;padding:13px 30px;border-radius:999px;cursor:pointer;transition:.18s}
[data-theme="dark"] .more-btn{background:var(--coral)}
.more-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}

/* FOOTER */
footer{background:var(--ink);color:#fff;margin-top:60px;padding:50px 0 30px}
[data-theme="dark"] footer{background:#05050F;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;margin-bottom:36px}
.foot-grid h6{font-family:var(--font-display);font-weight:700;font-size:14px;margin-bottom:14px;color:var(--sun)}
.foot-grid a{display:block;color:rgba(255,255,255,.7);font-size:13.5px;padding:5px 0;transition:.15s}
.foot-grid a:hover{color:#fff}
.foot-grid p{color:rgba(255,255,255,.6);font-size:13.5px;margin-top:10px;max-width:90%}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:rgba(255,255,255,.55);font-size:12.5px}
.disclaimer{color:rgba(255,255,255,.45);font-size:11.5px;margin-top:14px;line-height:1.6}

/* RESPONSIVE */
@media(max-width:980px){
  .hero{grid-template-columns:1fr}.hero-side{grid-template-rows:none;grid-template-columns:1fr 1fr}
  .layout{grid-template-columns:1fr}aside{position:static}.foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .news-grid{grid-template-columns:1fr}.hero-side{grid-template-columns:1fr}
  .hero-main h2{font-size:24px}.bar{height:64px;gap:14px}.logo{font-size:21px}
  nav{display:none}.foot-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
:focus-visible{outline:3px solid var(--ocean);outline-offset:2px;border-radius:6px}
@keyframes spin{to{transform:rotate(360deg)}}

/* STATIC PAGES */
main{display:block}
.page{max-width:760px;margin:34px auto 10px;padding:0 2px}
.page .crumb{font-size:12.5px;color:var(--ink-soft);margin-bottom:14px}
.page .crumb a{color:var(--coral)}
.page h1{font-family:var(--font-display);font-weight:800;font-size:34px;letter-spacing:-.02em;line-height:1.15;margin-bottom:8px}
.page .updated{color:var(--ink-soft);font-size:13px;margin-bottom:26px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.page h2{font-family:var(--font-display);font-weight:700;font-size:20px;margin:30px 0 12px;letter-spacing:-.01em}
.page p{font-size:15.5px;margin-bottom:14px;line-height:1.7}
.page ul{margin:0 0 16px 22px}
.page li{font-size:15.5px;margin-bottom:9px;line-height:1.65}
.page a{color:var(--coral);text-decoration:underline;text-underline-offset:2px}
.page strong{font-weight:600}
.navlink{cursor:pointer}
a.navlink{text-decoration:none}