/* ============================================================
 * REDNEWS THEME v2 — CNN Indonesia-faithful
 * ============================================================ */
:root {
  --rn-red:      #cc0000;
  --rn-red-dark: #a30000;
  --rn-black:    #1a1a1a;
  --rn-white:    #ffffff;
  --rn-gray:     #757575;
  --rn-gray-bg:  #f5f5f5;
  --rn-border:   #e0e0e0;
  --rn-font:     -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --rn-serif:    Georgia,"Times New Roman",serif;
  --rn-max:      1140px;
}
body.theme-rednews { --rn-red: var(--site-primary,#cc0000); --rn-red-dark: var(--site-secondary,#a30000); }

/* ---- Reset ---- */
body.theme-rednews { background:#f5f5f5; font-family:var(--rn-font); color:var(--rn-black); margin:0; }
body.theme-rednews *,.theme-rednews *::before,.theme-rednews *::after { box-sizing:border-box; }
body.theme-rednews img { max-width:100%; height:auto; }
body.theme-rednews a { color:inherit; text-decoration:none; }
body.theme-rednews a:hover { opacity:.85; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.rn-nav { background:var(--rn-red); position:sticky; top:0; z-index:200; }
.rn-nav-inner { max-width:var(--rn-max); margin:0 auto; display:flex; align-items:center; height:52px; padding:0 16px; }
/* Logo */
.rn-nav-logo { flex-shrink:0; margin-right:16px; text-decoration:none; }
.rn-nav-logo img { height:32px; max-width:120px; object-fit:contain; filter:brightness(0) invert(1); vertical-align:middle; display:block; }
.rn-nav-logo-text { color:#fff; font-size:18px; font-weight:900; letter-spacing:-.02em; white-space:nowrap; }
/* Nav links */
.rn-nav-links { display:flex; align-items:stretch; flex:1; overflow:hidden; }
.rn-nav-links a { color:rgba(255,255,255,.88); font-size:13px; font-weight:600; padding:0 10px; height:52px; display:flex; align-items:center; white-space:nowrap; border-bottom:3px solid transparent; transition:color .12s,border-color .12s; }
.rn-nav-links a:hover,.rn-nav-links a.active { color:#fff; border-bottom-color:#fff; opacity:1; }
/* Actions */
.rn-nav-actions { display:flex; align-items:center; gap:4px; margin-left:auto; flex-shrink:0; padding-left:8px; }
.rn-nav-search-btn { background:none; border:none; color:rgba(255,255,255,.88); cursor:pointer; padding:6px 8px; display:flex; align-items:center; }
.rn-nav-search-btn:hover { color:#fff; }
.rn-mobile-menu-btn { display:none; background:none; border:none; color:#fff; cursor:pointer; padding:6px 8px; font-size:22px; line-height:1; }

/* Search box */
.rn-search-box { display:none; background:#b30000; }
.rn-search-box.rn-open { display:block; }
.rn-search-inner { max-width:var(--rn-max); margin:0 auto; padding:8px 16px; }
.rn-search-form { display:flex; }
.rn-search-input { flex:1; border:none; border-radius:2px 0 0 2px; padding:8px 12px; font-size:14px; outline:none; }
.rn-search-submit { background:#fff; color:var(--rn-red); border:none; border-radius:0 2px 2px 0; padding:8px 18px; font-size:13px; font-weight:700; cursor:pointer; }

/* Mobile menu */
@media(max-width:768px){
  .rn-nav-links { display:none; position:fixed; top:52px; left:0; right:0; background:var(--rn-red); flex-direction:column; z-index:199; max-height:calc(100vh - 52px); overflow-y:auto; }
  .rn-nav-links.rn-open { display:flex; }
  .rn-nav-links a { height:44px; border-bottom:1px solid rgba(255,255,255,.15); border-left:none; padding:0 20px; }
  .rn-mobile-menu-btn { display:block; }
}

/* ============================================================
   TRENDING BAR
   ============================================================ */
.rn-trending { background:#fff; border-bottom:1px solid var(--rn-border); }
.rn-trending-inner { max-width:var(--rn-max); margin:0 auto; display:flex; align-items:center; height:38px; padding:0 16px; gap:10px; overflow:hidden; }
.rn-trending-label { color:var(--rn-red); font-size:11px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; flex-shrink:0; }
.rn-trending-sep { color:#bbb; font-size:14px; flex-shrink:0; }
.rn-trending-list { display:flex; align-items:center; gap:0; overflow:hidden; flex:1; }
.rn-trending-list a { font-size:13px; color:#333; white-space:nowrap; padding:0 8px; transition:color .12s; }
.rn-trending-list a:hover { color:var(--rn-red); }
.rn-trending-dot { color:#bbb; font-size:8px; flex-shrink:0; margin:0 2px; }

/* ============================================================
   LAYOUT
   ============================================================ */
.rn-container { max-width:var(--rn-max); margin:0 auto; padding:0 16px; }
.rn-layout { display:grid; grid-template-columns:1fr 300px; gap:24px; padding:20px 0 40px; align-items:start; }
.rn-main { min-width:0; }
.rn-sidebar { min-width:0; }

/* Section heading */
.rn-section { margin-bottom:24px; }
.rn-section-head { display:flex; align-items:center; gap:10px; margin-bottom:12px; padding-bottom:10px; border-bottom:2px solid var(--rn-border); }
.rn-section-bar { width:4px; height:20px; background:var(--rn-red); border-radius:1px; flex-shrink:0; }
.rn-section-label { font-size:14px; font-weight:800; color:var(--rn-black); text-transform:uppercase; letter-spacing:.04em; }
.rn-section-more { margin-left:auto; font-size:12px; color:var(--rn-red); font-weight:700; }
.rn-section-more:hover { text-decoration:underline; }

/* ============================================================
   HERO
   ============================================================ */
.rn-hero { display:grid; grid-template-columns:1fr 280px; margin-bottom:24px; background:#111; overflow:hidden; }
.rn-hero-main { position:relative; }
.rn-hero-main > a { display:block; aspect-ratio:16/9; overflow:hidden; }
.rn-hero-main img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
.rn-hero-main > a:hover img { transform:scale(1.03); }
.rn-hero-shade { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.1) 60%,transparent 100%); pointer-events:none; }
.rn-hero-content { position:absolute; bottom:0; left:0; right:0; padding:20px 18px; }
.rn-hero-cat { display:inline-block; background:var(--rn-red); color:#fff; font-size:10px; font-weight:700; padding:3px 8px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; }
.rn-hero-title { font-size:22px; font-weight:800; color:#fff; line-height:1.25; font-family:var(--rn-serif); margin:0 0 6px; }
.rn-hero-time { font-size:11px; color:rgba(255,255,255,.65); }
.rn-hero-side { display:flex; flex-direction:column; background:#111; }
.rn-hero-mini { flex:1; position:relative; border-bottom:1px solid #222; overflow:hidden; min-height:100px; }
.rn-hero-mini:last-child { border-bottom:none; }
.rn-hero-mini > a { display:block; height:100%; }
.rn-hero-mini img { width:100%; height:100%; object-fit:cover; opacity:.6; transition:opacity .3s; display:block; position:absolute; inset:0; }
.rn-hero-mini > a:hover img { opacity:.8; }
.rn-hero-mini-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.85) 40%,transparent 100%); display:flex; flex-direction:column; justify-content:flex-end; padding:12px; }
.rn-hero-mini-cat { font-size:9px; font-weight:700; color:var(--rn-red); text-transform:uppercase; letter-spacing:.05em; margin-bottom:3px; display:block; }
.rn-hero-mini-title { font-size:12px; font-weight:700; color:#fff; line-height:1.35; }

/* ============================================================
   ARTICLE LIST — CNN style: no card, only divider
   ============================================================ */
.rn-list { background:#fff; }
.rn-card-h { display:grid; grid-template-columns:200px 1fr; border-bottom:1px solid var(--rn-border); transition:background .12s; }
.rn-card-h:last-child { border-bottom:none; }
.rn-card-h:hover { background:#fafafa; }

/* Thumbnail */
.rn-card-h-thumb { overflow:hidden; }
.rn-card-h-thumb a { display:block; aspect-ratio:16/9; overflow:hidden; height:100%; }
.rn-card-h-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
.rn-card-h:hover .rn-card-h-thumb img { transform:scale(1.04); }

/* Text */
.rn-card-h-body { padding:14px 16px; display:flex; flex-direction:column; gap:5px; justify-content:center; }

/* Category: plain red text — CNN style */
.rn-card-cat { font-size:11px; font-weight:700; color:var(--rn-red); text-transform:uppercase; letter-spacing:.04em; display:block; }
.rn-card-cat:hover { text-decoration:underline; }

/* Keep .rn-card-badge as alias for rn-card-cat (backward compat) */
.rn-card-badge { font-size:11px; font-weight:700; color:var(--rn-red); text-transform:uppercase; letter-spacing:.04em; display:block; background:none; padding:0; border-radius:0; width:auto; }
.rn-card-badge:hover { background:none; text-decoration:underline; opacity:.8; }

.rn-card-title { font-size:16px; font-weight:700; line-height:1.32; color:var(--rn-black); font-family:var(--rn-serif); margin:0; }
.rn-card-title a { color:inherit; }
.rn-card-title a:hover { color:var(--rn-red); opacity:1; }
.rn-card-meta { font-size:12px; color:var(--rn-gray); }

/* ============================================================
   GRID CARDS (home category sections)
   ============================================================ */
.rn-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rn-border); }
.rn-grid-card { background:#fff; display:flex; flex-direction:column; transition:background .12s; }
.rn-grid-card:hover { background:#fafafa; }
.rn-grid-card-thumb { aspect-ratio:16/9; overflow:hidden; flex-shrink:0; }
.rn-grid-card-thumb a { display:block; height:100%; }
.rn-grid-card-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
.rn-grid-card:hover .rn-grid-card-thumb img { transform:scale(1.03); }
.rn-grid-card-body { padding:12px; flex:1; display:flex; flex-direction:column; gap:5px; }
.rn-grid-card-cat { font-size:10px; font-weight:700; color:var(--rn-red); text-transform:uppercase; letter-spacing:.04em; display:block; }
.rn-grid-card-cat:hover { text-decoration:underline; }
.rn-grid-card-title { font-size:13px; font-weight:700; line-height:1.38; color:var(--rn-black); font-family:var(--rn-serif); flex:1; }
.rn-grid-card-title a { color:inherit; }
.rn-grid-card-title a:hover { color:var(--rn-red); opacity:1; }
.rn-grid-card-meta { font-size:11px; color:var(--rn-gray); }

/* ============================================================
   SIDEBAR
   ============================================================ */
.rn-sbox { background:#fff; margin-bottom:16px; }
.rn-sbox-head { font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--rn-black); padding:12px 14px; border-bottom:1px solid var(--rn-border); border-left:4px solid var(--rn-red); background:#fff; }

/* Popular item: number + thumbnail + text (CNN style) */
.rn-pop-item { display:flex; gap:10px; padding:10px 12px; border-bottom:1px solid var(--rn-border); align-items:flex-start; }
.rn-pop-item:last-child { border-bottom:none; }
.rn-pop-num { font-size:22px; font-weight:900; color:var(--rn-red); line-height:1; flex-shrink:0; width:26px; text-align:right; padding-top:2px; font-family:var(--rn-serif); }
.rn-pop-thumb { flex-shrink:0; width:72px; height:50px; overflow:hidden; }
.rn-pop-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.rn-pop-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.rn-pop-cat { font-size:9px; font-weight:700; color:var(--rn-red); text-transform:uppercase; letter-spacing:.04em; display:block; }
.rn-pop-title { font-size:12px; font-weight:700; line-height:1.38; color:var(--rn-black); }
.rn-pop-title a { color:inherit; }
.rn-pop-title a:hover { color:var(--rn-red); opacity:1; }

/* Sidebar ad */
.rn-sbox-ad { background:#fff; margin-bottom:16px; display:flex; align-items:flex-start; justify-content:center; min-height:250px; overflow:hidden; }

/* ============================================================
   ARTICLE PAGE
   ============================================================ */
.rn-article-wrap { background:#fff; }
.rn-article { padding:20px 24px; }
.rn-article-cat-link { font-size:11px; font-weight:700; color:var(--rn-red); text-transform:uppercase; letter-spacing:.06em; display:inline-block; margin-bottom:10px; }
.rn-article-cat-link:hover { text-decoration:underline; opacity:1; }
.rn-article-title { font-size:28px; font-weight:800; line-height:1.2; color:var(--rn-black); font-family:var(--rn-serif); margin:0 0 10px; }
.rn-article-sub { font-size:17px; color:#555; line-height:1.55; margin-bottom:14px; }
.rn-article-meta { display:flex; align-items:center; gap:12px; font-size:12px; color:var(--rn-gray); margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--rn-border); flex-wrap:wrap; }
.rn-article-reporter { font-weight:700; color:var(--rn-black); }
/* Share buttons */
.rn-article-share { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.rn-share-btn { display:inline-flex; align-items:center; gap:5px; padding:5px 12px; font-size:12px; font-weight:700; border-radius:2px; text-decoration:none; }
.rn-share-fb { background:#1877f2; color:#fff; } .rn-share-fb:hover{opacity:.9;color:#fff}
.rn-share-tw { background:#000; color:#fff; } .rn-share-tw:hover{opacity:.9;color:#fff}
.rn-share-wa { background:#25d366; color:#fff; } .rn-share-wa:hover{opacity:.9;color:#fff}
.rn-share-tg { background:#0088cc; color:#fff; } .rn-share-tg:hover{opacity:.9;color:#fff}
.rn-share-cp { background:#757575; color:#fff; } .rn-share-cp:hover{opacity:.9;color:#fff}
/* Lead image */
.rn-lead-img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; margin-bottom:8px; }
.rn-lead-caption { font-size:12px; color:var(--rn-gray); margin-bottom:18px; line-height:1.5; font-style:italic; }
/* Body */
.rn-article-body { font-size:16px; line-height:1.8; color:#1a1a1a; }
.rn-article-body p { margin:0 0 16px; }
.rn-article-body h2 { font-size:20px; font-weight:800; margin:24px 0 10px; font-family:var(--rn-serif); }
.rn-article-body h3 { font-size:17px; font-weight:700; margin:18px 0 8px; }
.rn-article-body img { max-width:100%; height:auto; display:block; margin:12px 0; }
.rn-article-body blockquote { border-left:4px solid var(--rn-red); margin:20px 0; padding:10px 16px; background:var(--rn-gray-bg); color:#555; font-style:italic; }
/* In-article ad */
.rn-ad-inarticle { display:flex; justify-content:center; margin:20px 0; min-height:90px; }
/* Tags */
.rn-article-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; padding-top:14px; border-top:1px solid var(--rn-border); }
.rn-tag-pill { background:var(--rn-gray-bg); color:#444; font-size:12px; font-weight:600; padding:5px 14px; border-radius:20px; transition:background .12s,color .12s; }
.rn-tag-pill:hover { background:var(--rn-red); color:#fff; opacity:1; }
/* Article pagination */
.rn-article-pagination { display:flex; align-items:center; gap:6px; margin:16px 0; flex-wrap:wrap; font-size:13px; }
.rn-art-page-btn { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 8px; font-size:13px; font-weight:600; border:1px solid var(--rn-border); color:var(--rn-black); background:#fff; transition:all .12s; }
.rn-art-page-btn:hover { border-color:var(--rn-red); color:var(--rn-red); opacity:1; }
.rn-art-page-btn.active { background:var(--rn-red); color:#fff; border-color:var(--rn-red); }
/* Related articles */
.rn-related { padding:16px 24px; border-top:1px solid var(--rn-border); }
.rn-related-head { font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; margin-bottom:14px; padding-bottom:8px; border-bottom:2px solid var(--rn-red); }
.rn-related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.rn-related-card { }
.rn-related-thumb { aspect-ratio:16/9; overflow:hidden; margin-bottom:7px; }
.rn-related-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
.rn-related-card:hover .rn-related-thumb img { transform:scale(1.04); }
.rn-related-cat { font-size:9px; font-weight:700; color:var(--rn-red); text-transform:uppercase; letter-spacing:.04em; display:block; margin-bottom:4px; }
.rn-related-title { font-size:12px; font-weight:700; line-height:1.38; color:var(--rn-black); }
.rn-related-title a { color:inherit; }
.rn-related-title a:hover { color:var(--rn-red); opacity:1; }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.rn-breadcrumb { font-size:12px; color:var(--rn-gray); padding:10px 0 0; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.rn-breadcrumb a { color:var(--rn-gray); }
.rn-breadcrumb a:hover { color:var(--rn-red); }
.rn-breadcrumb-sep { color:#ccc; }

/* Page title */
.rn-page-title { font-size:22px; font-weight:800; color:var(--rn-black); margin:14px 0 16px; padding-bottom:10px; border-bottom:3px solid var(--rn-red); }
.rn-page-subtitle { font-size:13px; color:var(--rn-gray); margin-bottom:14px; }

/* ============================================================
   FILTER TABS (Category/Tag pages)
   ============================================================ */
.rn-filter-bar { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--rn-border); margin-bottom:0; overflow-x:auto; background:#fff; padding:0 4px; }
.rn-filter-tabs { display:flex; gap:0; }
.rn-filter-tab { padding:10px 14px; font-size:13px; font-weight:700; color:var(--rn-gray); border-bottom:3px solid transparent; margin-bottom:-1px; white-space:nowrap; transition:color .12s,border-color .12s; }
.rn-filter-tab.active,.rn-filter-tab:hover { color:var(--rn-red); border-bottom-color:var(--rn-red); opacity:1; }

/* ============================================================
   AD SLOTS
   ============================================================ */
.rn-ad { display:flex; justify-content:center; overflow:hidden; margin:14px 0; }
.rn-ad-leaderboard { min-height:90px; align-items:flex-start; }
.rn-ad-rect { min-height:250px; align-items:flex-start; }

/* ============================================================
   PAGINATION
   ============================================================ */
.rn-pagination { display:flex; justify-content:center; align-items:center; gap:4px; padding:24px 0; flex-wrap:wrap; }
.rn-pagination a,.rn-pagination span { display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 8px; font-size:13px; font-weight:600; color:var(--rn-black); background:#fff; border:1px solid var(--rn-border); transition:all .12s; }
.rn-pagination a:hover { border-color:var(--rn-red); color:var(--rn-red); opacity:1; }
.rn-pagination .active,.rn-pagination .current { background:var(--rn-red); color:#fff; border-color:var(--rn-red); }
/* CI3 pagination override */
.rn-pagination ul { display:flex; gap:4px; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.rn-pagination li a,.rn-pagination li span { display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 8px; font-size:13px; font-weight:600; color:var(--rn-black); background:#fff; border:1px solid var(--rn-border); transition:all .12s; }
.rn-pagination li a:hover { border-color:var(--rn-red); color:var(--rn-red); }
.rn-pagination li.active a,.rn-pagination li.active span,.rn-pagination .active { background:var(--rn-red); color:#fff; border-color:var(--rn-red); }

/* ============================================================
   FOOTER
   ============================================================ */
.rn-footer { background:#1a1a1a; color:#9e9e9e; padding:36px 0 20px; margin-top:32px; }
.rn-footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:32px; padding-bottom:24px; border-bottom:1px solid #2d2d2d; margin-bottom:20px; }
.rn-footer-logo { display:block; margin-bottom:10px; }
.rn-footer-logo img { height:32px; filter:brightness(0) invert(1); display:block; }
.rn-footer-logo-text { font-size:20px; font-weight:900; color:#fff; display:block; }
.rn-footer-tagline { font-size:13px; line-height:1.55; margin-bottom:14px; }
.rn-footer-social { display:flex; gap:8px; }
.rn-footer-social a { width:32px; height:32px; border-radius:50%; background:#2d2d2d; color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; transition:background .15s; }
.rn-footer-social a:hover { background:var(--rn-red); opacity:1; }
.rn-footer-col-title { font-size:11px; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:.1em; margin-bottom:12px; }
.rn-footer-links { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.rn-footer-links a { color:#9e9e9e; font-size:13px; transition:color .12s; }
.rn-footer-links a:hover { color:var(--rn-red); opacity:1; }
.rn-footer-bottom { text-align:center; font-size:12px; color:#616161; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1024px){
  .rn-layout { grid-template-columns:1fr 260px; }
  .rn-hero { grid-template-columns:1fr 240px; }
  .rn-related-grid { grid-template-columns:1fr 1fr; }
  .rn-footer-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:768px){
  .rn-layout { grid-template-columns:1fr; }
  .rn-sidebar { display:none; }
  .rn-hero { grid-template-columns:1fr; }
  .rn-hero-side { display:none; }
  .rn-grid { grid-template-columns:1fr 1fr; gap:1px; }
  .rn-card-h { grid-template-columns:130px 1fr; }
  .rn-article-title { font-size:22px; }
  .rn-article { padding:14px 16px; }
  .rn-related { padding:12px 16px; }
  .rn-related-grid { grid-template-columns:1fr; }
  .rn-footer-grid { grid-template-columns:1fr; }
}
@media(max-width:480px){
  .rn-grid { grid-template-columns:1fr; }
  .rn-card-h { grid-template-columns:110px 1fr; }
  .rn-card-title { font-size:14px; }
  .rn-related-grid { grid-template-columns:1fr 1fr; }
}