/* =========================================================
   Banter6 — Portal skin
   Loaded AFTER main.css, so it can restyle without editing it.
   Delete the wp_enqueue_style('banter6-skin', ...) call in
   functions.php to revert the theme to its previous look.

   IMPORTANT STRUCTURAL RULE
   main.css keeps all of its mobile rules in @media blocks in the
   MIDDLE of the file. An unscoped rule placed after them wins at
   every width, which silently destroys the mobile layout. So in
   this file:
     - unscoped section  = colour tokens and font family ONLY
     - desktop layout    = @media (min-width:901px)
     - mobile layout     = @media (max-width:900px)
   Never add sizing, spacing or layout outside those two blocks.
   ========================================================= */

/* ---------------------------------------------------------
   1. Tokens — safe to leave unscoped (variables only)
   --------------------------------------------------------- */
:root{
  --bn-primary:#ff3300;
  --bn-secondary:#007aff;
  --bn-accent:#ff3300;
  --bn-text:#030712;
  --bn-muted:#6b7280;
  --bn-border:#e5e7eb;
  --bn-surface:#fff;
  --bn-soft:#f3f4f6;
  --bn-footer:#f3f4f6;
  --bn-radius:4px;
  --bn-container:1024px;
  --bn-body:#353535;
  --bn-warm:#fff7ed;
  --bn-warm-2:#ffedd4;
  --bn-ink-soft:#3f4653;
}

body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}

/* =========================================================
   2. DESKTOP — everything layout-related lives in here
   ========================================================= */
@media (min-width:901px){

  /* ---------- Overflow guards ----------
     The white gap down the right-hand side, and the full-width bars that
     stop short of the edge, are both symptoms of horizontal overflow: a
     long nav row makes the document wider than the viewport, and the bars
     only paint as far as the viewport, not the document. These rules stop
     anything from forcing the page wider. */
  html,body{max-width:100%;overflow-x:clip}
  @supports not (overflow-x:clip){html,body{overflow-x:hidden}}
  .bn-container{width:min(100% - 32px,var(--bn-container))}
  .bn-site-header,
  .bn-nav-wrap,
  .bn-trending-wrap,
  .bn-channel-bar,
  .bn-footer{width:100%;max-width:100%}
  img,iframe,video,table{max-width:100%}

  /* The primary menu scrolls sideways instead of stretching the page.
     This is what actually kept the layout from fitting on a phone in
     "desktop site" mode, where the viewport is only ~980px wide. */
  .bn-primary-row{overflow:visible;min-width:0}
  .bn-primary-menu{
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:visible;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    min-width:0;
  }
  .bn-primary-menu::-webkit-scrollbar{display:none}
  .bn-primary-menu>li{flex:0 0 auto}
  .bn-primary-menu>li>a{white-space:nowrap}
  .bn-channel-sub{overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
  .bn-channel-sub::-webkit-scrollbar{display:none}
  .bn-channel-sub a{white-space:nowrap}
  .bn-main-column,
  .bn-sidebar{min-width:0}

  /* ---------- Header row: brand + search + account ---------- */
  .bn-site-header{padding:0;background:var(--bn-surface)}
  .bn-header-inner{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:18px;
    min-height:64px;
    padding:14px 0;
  }
  .bn-brand{flex:0 0 auto;min-width:0}
  .bn-brand-name{font-size:30px;font-weight:800;color:var(--bn-accent);letter-spacing:-1.1px}
  .bn-brand-name::after{background:var(--bn-accent)}

  .bn-header-search{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    align-items:center;
    gap:12px;
  }
  .bn-header-search input[type=search]{
    flex:1 1 auto;
    min-width:0;
    height:48px;
    padding:0 20px;
    border:1px solid #d7dae0;
    border-radius:999px;
    background:var(--bn-surface);
    color:var(--bn-text);
    font-size:15px;
    outline:none;
  }
  .bn-header-search input[type=search]::placeholder{color:#9aa1ac}
  .bn-header-search input[type=search]:focus{
    border-color:var(--bn-accent);
    box-shadow:0 0 0 3px rgba(255,51,0,.12);
  }
  .bn-header-search button{
    flex:0 0 auto;
    height:48px;
    padding:0 32px;
    border:0;
    border-radius:999px;
    background:var(--bn-accent);
    color:#fff;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
  }
  .bn-header-search button:hover{background:#e62e00}

  .bn-header-account{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:9px;
    height:48px;
    padding:0 24px;
    border-radius:999px;
    background:#111;
    color:#fff!important;
    font-size:15px;
    font-weight:600;
  }
  .bn-header-account:hover{background:#000}
  .bn-header-account svg{width:21px;height:21px;flex:0 0 auto}

  /* ---------- Nav bar: white, thin rules, underlined active ---------- */
  .bn-nav-wrap{
    margin-bottom:0;
    background:var(--bn-surface);
    border-top:1px solid var(--bn-border);
    border-bottom:1px solid var(--bn-border);
  }
  .bn-navigation{background:transparent;border-radius:0}
  .bn-primary-row{
    height:46px;
    background:transparent;
    border-radius:0;
    padding:0;
  }
  .bn-primary-menu>li>a{
    position:relative;
    color:var(--bn-text);
    font-size:14px;
    font-weight:600;
    text-transform:uppercase;
    padding:0 16px;
    line-height:46px;
  }
  .bn-primary-menu>li>a::after{
    content:'';
    position:absolute;
    left:16px;right:16px;bottom:-1px;
    height:3px;
    border-radius:3px 3px 0 0;
    background:transparent;
  }
  .bn-primary-menu>li:hover>a,
  .bn-primary-menu>.current-menu-item>a,
  .bn-primary-menu>.current_page_item>a{color:var(--bn-accent)}
  .bn-primary-menu>.current-menu-item>a::after,
  .bn-primary-menu>.current_page_item>a::after{background:var(--bn-accent)}
  .bn-primary-menu .sub-menu a{text-transform:none;font-size:13px;color:var(--bn-text)}
  .bn-desktop-actions button{color:var(--bn-text)}
  .bn-desktop-actions button:hover{background:var(--bn-soft)}

  .bn-secondary-row{border-top:1px solid var(--bn-border)}
  .bn-secondary-menu a{font-size:13px;font-weight:500;color:var(--bn-muted);padding:9px 10px}
  .bn-secondary-menu li:nth-child(2n) a,
  .bn-secondary-menu li:nth-child(3n) a{color:var(--bn-muted)}
  .bn-secondary-menu a:hover{color:var(--bn-accent)}

  .bn-nav-wrap.is-sticky{box-shadow:0 4px 14px rgba(0,0,0,.07)}
  .bn-nav-wrap.is-sticky::before{display:none}
  .bn-nav-wrap.is-sticky .bn-primary-menu>li>a{color:var(--bn-text)}
  .bn-nav-wrap.is-sticky .bn-primary-menu>li:hover>a{color:var(--bn-accent)}
  .bn-sticky-logo{color:var(--bn-accent);border-color:var(--bn-accent)}

  /* ---------- Front page: trending strip ---------- */
  .bn-trending-wrap{margin:16px 0 20px}
  .bn-trending{
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
    padding:12px 18px;
    border:1px solid #f0e3cf;
    border-radius:8px;
    background:var(--bn-warm);
  }
  .bn-trending-label{
    display:inline-flex;
    align-items:center;
    gap:8px;
    flex:0 0 auto;
    color:var(--bn-accent);
    font-size:15px;
    font-weight:700;
  }
  .bn-trending-label svg{width:19px;height:19px}
  .bn-trending-list{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
  .bn-trending-list a{
    display:inline-block;
    padding:7px 15px;
    border-radius:8px;
    background:var(--bn-warm-2);
    color:var(--bn-text);
    font-size:14px;
    white-space:nowrap;
  }
  .bn-trending-list a:hover{background:var(--bn-accent);color:#fff}

  /* ---------- Article / category: channel strip ---------- */
  .bn-channel-bar{
    background:#fafafa;
    border-bottom:1px solid var(--bn-border);
    margin-bottom:20px;
  }
  .bn-channel-bar-inner{
    display:flex;
    align-items:center;
    gap:18px;
    min-height:52px;
    flex-wrap:wrap;
  }
  .bn-channel-name{
    flex:0 0 auto;
    color:var(--bn-accent)!important;
    font-size:17px;
    font-weight:700;
    text-transform:uppercase;
  }
  .bn-channel-divider{flex:0 0 auto;width:1px;height:26px;background:#d9dce1}
  .bn-channel-sub{display:flex;align-items:center;gap:22px;flex-wrap:wrap;min-width:0}
  .bn-channel-sub a{font-size:15px;color:var(--bn-text)}
  .bn-channel-sub a:hover{color:var(--bn-accent)}

  /* ---------- Headline row: lead + Terpopuler rail (652 + 300) ---------- */
  .bn-headline{
    display:grid;
    grid-template-columns:minmax(0,652fr) minmax(238px,300fr);
    gap:clamp(16px,2.4vw,26px);
    align-items:start;
    margin-bottom:28px;
  }
  .bn-headline-main,
  .bn-headline-popular{min-width:0}

  /* Terpopuler, desktop: outline numerals, no thumbnails, no category */
  .bn-popular-widget{background:transparent;padding:0;border-radius:0}
  .bn-popular-head{
    display:flex;
    align-items:center;
    gap:9px;
    padding-bottom:9px;
    border-bottom:1px solid var(--bn-border);
    margin-bottom:2px;
  }
  .bn-popular-icon{display:none}
  .bn-popular-head h2{
    position:relative;
    margin:0;
    padding-left:13px;
    font-size:19px;
    font-weight:700;
    color:var(--bn-text);
  }
  .bn-popular-head h2::before{
    content:'';
    position:absolute;
    left:0;top:50%;
    transform:translateY(-50%);
    width:4px;height:20px;
    border-radius:2px;
    background:var(--bn-accent);
  }
  .bn-popular-list{list-style:none;margin:0;padding:0}
  .bn-popular-item{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:start;
    gap:14px;
    padding:14px 0;
    border-bottom:1px solid var(--bn-border);
  }
  .bn-popular-item:last-child{border-bottom:0}
  .bn-popular-rank{
    font-size:42px;
    font-weight:700;
    line-height:.9;
    color:transparent;
    -webkit-text-stroke:1.5px var(--bn-accent);
    text-stroke:1.5px var(--bn-accent);
    min-width:34px;
  }
  .bn-popular-thumb,
  .bn-popular-cat{display:none}
  .bn-popular-copy h3{
    margin:0 0 5px;
    font-size:15px;
    font-weight:700;
    line-height:1.35;
    color:var(--bn-text);
  }
  .bn-popular-time{font-size:12px;color:var(--bn-muted)}
  .bn-popular-more{
    display:inline-block;
    padding-top:12px;
    font-size:13px;
    font-weight:600;
    color:var(--bn-accent);
  }

  /* ---------- Homepage headline: 652 + 300 ---------- */
  /* Lead card fills .bn-headline-main: image on top, headline below, then a
     row of three text-only links inside the same bordered card. */
  .bn-hero{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-rows:auto;
    gap:0;
    background:var(--bn-surface);
    border:1px solid var(--bn-border);
    border-radius:10px;
    overflow:hidden;
    margin-bottom:0;
  }
  .bn-hero-main{
    grid-column:1 / -1;
    grid-row:auto;
    position:relative;
    display:block;
    min-height:0;
    border-radius:0;
    background:transparent;
  }
  .bn-hero-main::after{display:none}
  .bn-hero-main .bn-hero-image{
    position:relative;
    inset:auto;
    display:block;
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    background:#eee;
  }
  .bn-hero-main .bn-hero-copy{
    position:relative;
    inset:auto;
    display:flex;
    flex-direction:column;
    padding:16px 20px 20px;
    color:var(--bn-text);
  }
  .bn-hero-main .bn-hero-copy h2{
    font-size:26px;
    font-weight:700;
    line-height:1.3;
    margin:0;
    color:var(--bn-text);
  }
  .bn-hero-main .bn-hero-copy h2 a{color:var(--bn-text)}
  .bn-hero-main .bn-hero-copy span{
    order:-1;
    margin-bottom:8px;
    font-size:12px;
    color:var(--bn-muted);
  }
  .bn-hero-main .bn-hero-category{display:none}

  /* The three secondary links sit in one row, divided by hairlines. */
  .bn-hero-small{
    grid-column:auto;
    position:relative;
    display:block;
    min-height:0;
    padding:15px 18px;
    border-top:1px solid var(--bn-border);
    border-left:1px solid var(--bn-border);
    border-radius:0;
    background:transparent;
    overflow:visible;
  }
  .bn-hero-small::after{display:none}
  .bn-hero-small:nth-of-type(2){border-left:0}
  .bn-hero-small:nth-of-type(5){display:none}
  .bn-hero-small .bn-hero-image{display:none}
  .bn-hero-small .bn-hero-copy{
    position:relative;
    inset:auto;
    display:flex;
    flex-direction:column;
    padding:0;
    color:var(--bn-text);
  }
  .bn-hero-small .bn-hero-copy h2{
    font-size:14px;
    font-weight:600;
    line-height:1.4;
    margin:0;
    color:var(--bn-text);
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .bn-hero-small .bn-hero-copy h2 a{color:var(--bn-text)}
  .bn-hero-small .bn-hero-copy span{
    order:-1;
    margin-bottom:6px;
    font-size:12px;
    color:var(--bn-muted);
  }
  .bn-hero-small .bn-hero-category{display:none}

  /* ---------- Section headings ---------- */
  .bn-section-head{
    border-top:0;
    border-bottom:2px solid var(--bn-accent);
    padding-top:0;
    padding-bottom:8px;
    margin-bottom:18px;
  }
  .bn-section-head h1,
  .bn-section-head h2{color:var(--bn-text);font-size:20px;font-weight:700}
  .bn-widget{border-top:0;padding-top:0}
  .bn-widget-title,
  .bn-side-heading h2{
    color:var(--bn-text);
    font-size:17px;
    font-weight:700;
    padding-bottom:8px;
    border-bottom:2px solid var(--bn-accent);
    margin:0 0 12px;
  }

  /* ---------- Cards & lists ---------- */
  .bn-home-card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(188px,1fr));
    gap:clamp(20px,3vw,40px);
  }
  .bn-home-card-copy h3{font-size:15px;font-weight:600;line-height:1.4}
  .bn-card-category{color:var(--bn-accent);font-weight:700;font-size:11px;text-transform:uppercase}
  .bn-article-title{font-size:17px;font-weight:700;line-height:1.35}
  .bn-category{color:var(--bn-accent);text-transform:uppercase;font-size:11px}
  .bn-article-thumb{border-radius:var(--bn-radius)}

  /* ---------- Sidebar rail at 300px ---------- */
  /* Sidebar rail shrinks with the viewport instead of forcing 300px,
     so a narrow desktop (or a phone in "desktop site" mode) can never be
     pushed wider than the screen. */
  .bn-layout{
    grid-template-columns:minmax(0,1fr) clamp(258px,25vw,300px);
    gap:clamp(20px,3.4vw,44px);
  }
  .bn-rank{color:var(--bn-accent)!important;font-size:22px!important}
  .bn-side-category-count{background:var(--bn-soft);color:var(--bn-accent)}
  .bn-tag-list a:hover{background:var(--bn-warm-2);color:var(--bn-accent)}

  /* ---------- Article page ---------- */
  .bn-single-header{text-align:left;max-width:none;margin-top:6px}
  .bn-single-header h1{font-size:30px;font-weight:700;line-height:1.3;color:#000}
  .bn-single-meta{justify-content:flex-start;color:var(--bn-muted)}
  .bn-single-meta span:first-child{color:var(--bn-accent);font-weight:600}
  .bn-article-content{max-width:640px;font-size:16px;line-height:1.75;color:var(--bn-body)}
  .bn-article-content a{color:var(--bn-secondary)}
  .bn-article-content h2{font-size:22px;font-weight:700}
  .bn-article-content h3{font-size:18px;font-weight:700}

  /* ---------- Footer ---------- */
  .bn-footer{padding:38px 0 44px}
  .bn-footer-top{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
  .bn-footer-logo{font-size:30px;font-weight:800;letter-spacing:-1px}
  .bn-footer-custom-logo{max-height:46px;width:auto;display:block}
  .bn-footer-badges{display:flex;align-items:center;gap:14px}
  .bn-footer-badges img{height:62px;width:auto;display:block}
  .bn-footer-legal{margin-top:26px}
  .bn-footer-legal-list{
    list-style:none;margin:0;padding:0;
    display:flex;flex-wrap:wrap;gap:14px 40px;
  }
  .bn-footer-legal-list li{margin:0}
  .bn-footer-legal-list a{font-size:15px;color:var(--bn-ink-soft)}
  .bn-footer-divider{border:0;border-top:1px solid #dfe2e7;margin:26px 0 24px}
  .bn-footer-bottom-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:32px;
    align-items:start;
  }
  .bn-footer-network-list{
    list-style:none;margin:0;padding:0;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,max-content));
    gap:14px 44px;
  }
  .bn-footer-network-list li{margin:0}
  .bn-footer-network-list a{font-size:15px;color:var(--bn-ink-soft)}
  .bn-footer-connect strong{display:block;font-size:16px;font-weight:700;margin-bottom:12px}
  .bn-footer-copy{margin:30px 0 0;font-size:14px;line-height:1.6}
}

/* Narrower desktops: keep the footer network row from overflowing */
/* Narrow desktop — this is the range a phone lands in when the user picks
   "Desktop site" (viewport ~980px), so it needs real attention, not just a
   squeeze. Everything here shrinks rather than overflows. */
@media (min-width:901px) and (max-width:1100px){
  .bn-container{width:min(100% - 20px,var(--bn-container))}

  /* Header: the search field yields space first, buttons stay tappable. */
  .bn-header-inner{gap:12px}
  .bn-brand-name{font-size:25px}
  .bn-header-search{gap:8px}
  .bn-header-search input[type=search]{height:44px;padding:0 16px;font-size:14px}
  .bn-header-search button{height:44px;padding:0 20px;font-size:14px}
  .bn-header-account{height:44px;padding:0 16px;font-size:14px}
  .bn-header-account svg{width:19px;height:19px}

  .bn-primary-menu>li>a{padding:0 12px;font-size:13px}
  .bn-primary-menu>li>a::after{left:12px;right:12px}

  .bn-trending{padding:10px 14px;gap:12px}
  .bn-trending-list a{font-size:13px;padding:6px 12px}

  .bn-hero-main{min-height:340px}
  .bn-hero-main .bn-hero-copy h2{font-size:21px}
  .bn-hero-small{min-height:80px}

  .bn-section-head h1,
  .bn-section-head h2{font-size:18px}
  .bn-article-title{font-size:16px}
  .bn-single-header h1{font-size:26px}
  .bn-article-content{font-size:15px}

  .bn-footer-network-list{grid-template-columns:repeat(3,minmax(0,max-content));gap:12px 30px}
  .bn-footer-legal-list{gap:12px 26px}
  .bn-footer-legal-list a{font-size:14px}
}

/* Very narrow "desktop" (small tablets / phones forced to desktop mode):
   drop the sidebar under the article instead of squeezing both columns. */
@media (min-width:901px) and (max-width:960px){
  .bn-layout{grid-template-columns:minmax(0,1fr);gap:28px}
  .bn-sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
  .bn-hero{grid-template-columns:minmax(0,1fr);gap:12px}
  .bn-hero-main{grid-column:1;grid-row:auto;min-height:300px}
  .bn-hero-small{grid-column:1;min-height:120px}
}

/* =========================================================
   3. MOBILE — main.css already hides the desktop header and
   nav here, so this only styles the bars and the footer.
   ========================================================= */
@media (max-width:900px){
  .bn-mobile-topbar{
    background:var(--bn-surface);
    color:var(--bn-text);
    border-bottom:1px solid var(--bn-border);
  }
  .bn-mobile-topbar .bn-menu-icon i{background:var(--bn-text)}
  .bn-mobile-brand{color:var(--bn-accent)!important}
  .bn-mobile-actions button,
  .bn-menu-toggle{color:var(--bn-text)}

  .bn-trending-wrap{margin:10px 0 14px}
  .bn-trending{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border:1px solid #f0e3cf;
    border-radius:6px;
    background:var(--bn-warm);
  }
  .bn-trending-label{
    display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
    color:var(--bn-accent);font-size:14px;font-weight:700;
  }
  .bn-trending-label svg{width:17px;height:17px}
  .bn-trending-list{
    display:flex;align-items:center;gap:8px;
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;min-width:0;
  }
  .bn-trending-list::-webkit-scrollbar{display:none}
  .bn-trending-list a{
    display:inline-block;padding:6px 12px;border-radius:6px;
    background:var(--bn-warm-2);color:var(--bn-text);
    font-size:13px;white-space:nowrap;
  }

  .bn-channel-bar{
    background:#fafafa;
    border-bottom:1px solid var(--bn-border);
    margin-bottom:14px;
  }
  .bn-channel-bar-inner{display:flex;align-items:center;gap:12px;min-height:46px}
  .bn-channel-name{
    flex:0 0 auto;color:var(--bn-accent)!important;
    font-size:15px;font-weight:700;text-transform:uppercase;
  }
  .bn-channel-divider{flex:0 0 auto;width:1px;height:22px;background:#d9dce1}
  .bn-channel-sub{
    display:flex;align-items:center;gap:16px;
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;min-width:0;
  }
  .bn-channel-sub::-webkit-scrollbar{display:none}
  .bn-channel-sub a{font-size:14px;white-space:nowrap;color:var(--bn-text)}

  .bn-section-head{
    border-top:0;
    border-bottom:2px solid var(--bn-accent);
    padding-top:0;
    padding-bottom:7px;
  }
  .bn-widget-title,
  .bn-side-heading h2{
    padding-bottom:7px;
    border-bottom:2px solid var(--bn-accent);
    color:var(--bn-text);
    font-weight:700;
  }


  /* ---------- Terpopuler, mobile: warm card with square thumbs ---------- */
  .bn-headline{display:block}
  .bn-headline-main,
  .bn-headline-popular{min-width:0}
  .bn-popular-widget{
    background:var(--bn-warm);
    border-radius:16px;
    padding:18px 18px 8px;
    margin:16px 0 24px;
  }
  .bn-popular-head{
    display:flex;
    align-items:center;
    gap:10px;
    padding-bottom:12px;
    border-bottom:1px solid rgba(0,0,0,.09);
  }
  .bn-popular-icon{display:block;width:22px;height:22px;color:var(--bn-accent);flex:0 0 auto}
  .bn-popular-head h2{margin:0;padding:0;font-size:22px;font-weight:700;color:var(--bn-text)}
  .bn-popular-head h2::before{display:none}

  .bn-popular-list{list-style:none;margin:0;padding:0}
  .bn-popular-rank{display:none}
  .bn-popular-item{
    display:grid;
    grid-template-columns:104px minmax(0,1fr);
    gap:16px;
    align-items:start;
    padding:16px 0;
    border-bottom:1px solid rgba(0,0,0,.09);
  }
  .bn-popular-item:last-child{border-bottom:0}
  .bn-popular-thumb{
    display:block;
    width:104px;
    aspect-ratio:1;
    border-radius:12px;
    overflow:hidden;
    background:#e8e8e8;
  }
  .bn-popular-thumb img{width:100%;height:100%;object-fit:cover;display:block}
  .bn-popular-copy h3{
    margin:0 0 9px;
    font-size:17px;
    font-weight:700;
    line-height:1.35;
    color:var(--bn-text);
  }
  .bn-popular-cat{
    display:inline-block;
    font-size:15px;
    color:var(--bn-accent);
  }
  .bn-popular-time{display:none}
  .bn-popular-more{
    display:block;
    text-align:center;
    padding:16px 0 10px;
    font-size:17px;
    font-weight:600;
    color:var(--bn-accent);
  }

  /* ---------- Mobile home: hero card + 2-up card grid ----------
     Reference layout: one full-bleed lead card with the headline burned
     over the image, then everything else as two columns of image-on-top
     cards. The markup stacks .bn-hero-image / .bn-hero-copy absolutely,
     so the small cards are flipped back to normal flow here. */
  .bn-hero{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    /* main.css pins explicit row heights here (245px/145px...); clear them
       so the lead card and the 2-up cards can size to their own content. */
    grid-template-rows:none;
    grid-auto-rows:auto;
    gap:22px 14px;
    background:transparent;
    border-radius:0;
    overflow:visible;
    margin:12px 0 24px;
  }

  /* Lead card keeps the overlay treatment */
  .bn-hero-main{
    grid-column:1 / -1;
    grid-row:auto;
    position:relative;
    min-height:0;
    aspect-ratio:16/13;
    border-radius:12px;
    overflow:hidden;
    background:#111;
  }
  .bn-hero-main .bn-hero-image{position:absolute;inset:0}
  .bn-hero-main::after{
    content:'';
    position:absolute;inset:0;
    background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,.05) 62%);
  }
  .bn-hero-main .bn-hero-copy{
    position:absolute;
    left:0;right:0;bottom:0;
    z-index:2;
    padding:18px;
    color:#fff;
  }
  .bn-hero-main .bn-hero-copy h2{
    font-size:22px;
    font-weight:700;
    line-height:1.3;
    margin:0 0 6px;
    display:block;
    overflow:visible;
  }
  .bn-hero-main .bn-hero-copy span{font-size:13px;color:#d8d8d8}

  /* Small cards: image on top, text underneath */
  .bn-hero-small{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:0;
    height:auto;
    border-radius:0;
    overflow:visible;
    background:transparent;
  }
  .bn-hero-small::after{display:none}
  .bn-hero-small .bn-hero-image{
    position:relative;
    inset:auto;
    display:block;
    width:100%;
    aspect-ratio:16/10;
    border-radius:10px;
    overflow:hidden;
    background:#eee;
  }
  .bn-hero-small .bn-hero-copy{
    position:relative;
    inset:auto;
    padding:9px 0 0;
    color:var(--bn-text);
  }
  .bn-hero-small .bn-hero-copy h2{
    font-size:16px;
    font-weight:700;
    line-height:1.35;
    color:var(--bn-text);
    margin:0 0 5px;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .bn-hero-small .bn-hero-copy h2 a{color:var(--bn-text)}
  .bn-hero-small .bn-hero-copy span{font-size:13px;color:var(--bn-muted)}
  .bn-hero-small .bn-hero-category{display:none}
  /* the desktop skin hides the 5th card; show every card on mobile */
  .bn-hero-small:nth-of-type(n){display:flex}

  /* Section card grids match the same 2-up rhythm */
  .bn-home-card-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px 14px;
  }
  .bn-home-card-image{
    display:block;
    width:100%;
    aspect-ratio:16/10;
    border-radius:10px;
    overflow:hidden;
    background:#eee;
  }
  .bn-home-card-image img{width:100%;height:100%;object-fit:cover;display:block}
  .bn-home-card-copy{padding:9px 0 0}
  .bn-home-card-copy h3{
    font-size:16px;
    font-weight:700;
    line-height:1.35;
    margin:0 0 5px;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .bn-card-meta{font-size:13px;color:var(--bn-muted)}

  /* Mobile nav reads as tabs with an accent underline */
  .bn-mobile-nav-wrap{border-bottom:1px solid var(--bn-border);background:var(--bn-surface)}
  .bn-mobile-primary-menu{
    display:flex;
    gap:0;
    list-style:none;
    margin:0;
    padding:0 4px;
    overflow-x:auto;
    scrollbar-width:none;
    flex-wrap:nowrap;
  }
  .bn-mobile-primary-menu::-webkit-scrollbar{display:none}
  .bn-mobile-primary-menu>li{flex:0 0 auto;border:0}
  .bn-mobile-primary-menu>li>a{
    position:relative;
    display:block;
    padding:14px 14px 12px;
    font-size:16px;
    font-weight:600;
    color:var(--bn-text);
    white-space:nowrap;
  }
  .bn-mobile-primary-menu>li>a::after{
    content:'';
    position:absolute;
    left:14px;right:14px;bottom:0;
    height:3px;
    border-radius:3px 3px 0 0;
    background:transparent;
  }
  .bn-mobile-primary-menu>.current-menu-item>a,
  .bn-mobile-primary-menu>.current_page_item>a{color:var(--bn-text)}
  .bn-mobile-primary-menu>.current-menu-item>a::after,
  .bn-mobile-primary-menu>.current_page_item>a::after{background:var(--bn-accent)}

  /* ---------- Mobile topbar: one combined menu+search button ---------- */
  .bn-mobile-topbar{
    display:grid;
    grid-template-columns:44px 1fr 44px;
    align-items:center;
    gap:8px;
  }
  .bn-menu-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;height:44px;
    padding:0;border:0;background:none;
    color:var(--bn-text);
    cursor:pointer;
  }
  .bn-menu-combo-icon{width:25px;height:25px;display:block}
  .bn-mobile-actions{display:flex;justify-content:flex-end;align-items:center}
  .bn-mobile-account{
    display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;color:var(--bn-text);
  }
  .bn-mobile-account svg{width:25px;height:25px;display:block}

  /* ---------- Drawer: slides in from the RIGHT ---------- */
  .bn-mobile-drawer{
    left:auto;
    right:0;
    width:min(86vw,340px);
    transform:translateX(102%);
    box-shadow:-12px 0 28px rgba(0,0,0,.2);
    background:var(--bn-surface);
  }
  .bn-mobile-drawer.is-open{transform:translateX(0)}

  .bn-drawer-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:16px 18px 14px;
  }
  .bn-drawer-head strong{
    position:relative;
    padding-left:14px;
    font-size:21px;
    font-weight:700;
    color:var(--bn-text);
  }
  .bn-drawer-head strong::before{
    content:'';
    position:absolute;
    left:0;top:50%;
    transform:translateY(-50%);
    width:4px;height:24px;
    border-radius:2px;
    background:var(--bn-accent);
  }
  .bn-drawer-close{
    width:40px;height:40px;
    padding:0;border:0;background:none;
    color:var(--bn-text);
    cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;
  }
  .bn-drawer-close svg{width:24px;height:24px;display:block}

  .bn-drawer-search{padding:0 18px 14px;border-bottom:0}
  .bn-drawer-search form{position:relative;display:block}
  .bn-drawer-search-icon{
    position:absolute;
    left:14px;top:50%;
    transform:translateY(-50%);
    width:19px;height:19px;
    color:#9aa1ac;
    pointer-events:none;
  }
  .bn-drawer-search input[type=search]{
    width:100%;
    height:46px;
    padding:0 16px 0 42px;
    border:0;
    border-radius:10px;
    background:#f2f4f7;
    color:var(--bn-text);
    font-size:15px;
    outline:none;
  }
  .bn-drawer-search input[type=search]::placeholder{color:#9aa1ac}
  .bn-drawer-search input[type=search]:focus{box-shadow:0 0 0 2px rgba(255,51,0,.25)}

  /* Menu rows: icon + label, one per line */
  .bn-drawer-quick{padding:6px 0 0}
  .bn-drawer-quick + .bn-drawer-section{
    border-top:1px solid var(--bn-border);
    margin-top:6px;
    padding-top:6px;
  }
  .bn-drawer-section{padding:0}
  .bn-drawer-section h2{
    margin:0;
    padding:14px 18px 6px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--bn-muted);
  }
  .bn-drawer-list,
  .bn-drawer-grid{
    display:block;
    list-style:none;
    margin:0;
    padding:0 0 8px;
  }
  .bn-drawer-list li,
  .bn-drawer-grid li{margin:0;border:0}
  .bn-drawer-list a,
  .bn-drawer-grid a{
    display:flex;
    align-items:center;
    gap:16px;
    padding:13px 18px;
    font-size:16px;
    font-weight:500;
    color:var(--bn-text);
    border:0;
  }
  .bn-drawer-list a:hover,
  .bn-drawer-grid a:hover{background:var(--bn-warm);color:var(--bn-accent)}
  .bn-drawer-icon{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;height:24px;
    border-radius:0;
    background:none;
    color:var(--bn-muted);
    font-size:0;
  }
  /* The theme prints a literal "b" placeholder as the icon; replace it
     with a neutral bullet mark so the rows read cleanly. */
  .bn-drawer-icon::before{
    content:'';
    width:9px;height:9px;
    border:2px solid currentColor;
    border-radius:3px;
  }
  .bn-drawer-list a:hover .bn-drawer-icon,
  .bn-drawer-grid a:hover .bn-drawer-icon{color:var(--bn-accent)}

  .bn-mobile-backdrop.is-visible{opacity:1}

  .bn-footer{padding:28px 0 34px}
  .bn-footer-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  .bn-footer-logo{font-size:25px;font-weight:800}
  .bn-footer-custom-logo{max-height:38px;width:auto;display:block}
  .bn-footer-badges{display:flex;align-items:center;gap:10px}
  .bn-footer-badges img{height:48px;width:auto;display:block}
  .bn-footer-legal{margin-top:20px}
  .bn-footer-legal-list{
    list-style:none;margin:0;padding:0;
    display:flex;flex-wrap:wrap;gap:10px 22px;
  }
  .bn-footer-legal-list li{margin:0}
  .bn-footer-legal-list a{font-size:13px;color:var(--bn-ink-soft)}
  .bn-footer-divider{border:0;border-top:1px solid #dfe2e7;margin:20px 0 18px}
  .bn-footer-bottom-grid{display:grid;grid-template-columns:1fr;gap:22px}
  .bn-footer-network-list{
    list-style:none;margin:0;padding:0;
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;
  }
  .bn-footer-network-list li{margin:0}
  .bn-footer-network-list a{font-size:13px;color:var(--bn-ink-soft)}
  .bn-footer-connect strong{display:block;font-size:15px;font-weight:700;margin-bottom:10px}
  .bn-footer-copy{margin:22px 0 0;font-size:13px;line-height:1.6}
}

/* =========================================================
   4. Shared bits that are colour-only (safe at any width)
   ========================================================= */
.bn-footer{background:var(--bn-footer);color:var(--bn-text)}
.bn-footer-logo{color:var(--bn-accent)}
.bn-footer-legal-list a:hover,
.bn-footer-network-list a:hover{color:var(--bn-accent)}
.bn-footer-copy{color:var(--bn-ink-soft)}
.bn-footer-copy-note{color:var(--bn-muted)}
.bn-footer-network-empty{margin:0;color:var(--bn-muted)}

.bn-footer-connect .bn-social-icons{display:flex;gap:10px;flex-wrap:wrap}
.bn-footer-connect .bn-social-icon{
  width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:#111;color:#fff;
}
.bn-footer-connect .bn-social-icon svg{width:19px;height:19px}
.bn-footer-connect .bn-social-facebook{background:#1877f2}
.bn-footer-connect .bn-social-youtube{background:#f00}
.bn-footer-connect .bn-social-instagram{background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7)}
.bn-footer-connect .bn-social-whatsapp{background:#25d366}
.bn-footer-connect .bn-social-tiktok,
.bn-footer-connect .bn-social-x,
.bn-footer-connect .bn-social-twitter{background:#000}

.bn-button,
.comment-form input[type=submit],
.bn-search-form button{background:var(--bn-accent)}
.bn-pagination .current{background:var(--bn-accent)!important}
.bn-search-field:focus{border-color:var(--bn-accent)}


/* =========================================================
   BANTER6 3.0.1 — navbar kedua (sticky) kembali muncul.
   overflow-x:hidden pada html/body menjadikan body wadah gulir,
   sehingga position:sticky milik .bn-nav-wrap tidak pernah
   menempel. overflow-x:clip mencegah geser samping tanpa efek
   samping itu.
   ========================================================= */
html,body{overflow-x:clip}
@supports not (overflow-x:clip){html,body{overflow-x:hidden}}
.bn-nav-wrap.is-sticky{position:sticky;top:0;z-index:120}


/* =========================================================
   BANTER6 3.0.2 — empat perbaikan tampilan
   ========================================================= */

/* 1. Banner header diletakkan di tengah, bukan menempel ke tepi kiri.
      Slot ini dicetak di luar .bn-container, jadi butuh pembungkus sendiri. */
.bn-header-ad-wrap{width:100%;display:block;padding:10px 0}
.bn-header-ad-wrap>.bn-container{display:flex;justify-content:center}
.bn-header-ad-wrap .bn-ad-slot{margin-left:auto;margin-right:auto}
.bn-header-ad-wrap:has(.bn-ad-slot[hidden]){padding:0}
@media (max-width:900px){.bn-header-ad-wrap{padding:0}}

/* 2. Kolom headline tidak lagi ikut meninggi mengejar rail Terpopuler.
      Sebelumnya baris kartu tanpa gambar tertarik memanjang ke bawah. */
@media (min-width:901px){
  /* Biang keladinya: main.css memberi .bn-hero aturan
     grid-template-rows:1fr 1fr — dua baris dipaksa sama tinggi. Baris kedua
     (kartu tanpa gambar) jadi ikut setinggi baris headline bergambar.
     grid-auto-rows saja tidak cukup karena hanya mengatur baris implisit. */
  .bn-hero{
    grid-template-rows:none!important;
    grid-auto-rows:min-content!important;
    align-content:start;
  }
  .bn-headline{align-items:start}
  .bn-headline-main{align-self:start}
  .bn-hero-main{min-height:0!important}
  .bn-hero-card{min-height:0!important}
  .bn-hero-small{align-self:start;height:auto;min-height:0!important}
  .bn-hero-small .bn-hero-copy{height:auto;justify-content:flex-start}
}

/* 4. Terpopuler: 10 berita dalam daftar yang bisa digeser, lalu Selengkapnya. */
@media (min-width:901px){
  .bn-popular-list{
    max-height:min(58vh,470px);
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    padding-right:4px;
  }
  .bn-popular-list::-webkit-scrollbar{width:5px}
  .bn-popular-list::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:99px}
  .bn-popular-list::-webkit-scrollbar-track{background:transparent}
  .bn-popular-list:focus-visible{outline:2px solid var(--bn-primary);outline-offset:3px}
  /* Petunjuk halus bahwa daftarnya masih bisa digeser. */
  .bn-popular-widget{position:relative}
  .bn-popular-widget::after{
    content:'';position:absolute;left:0;right:0;bottom:44px;height:26px;
    background:linear-gradient(to top,var(--bn-surface),transparent);
    pointer-events:none;
  }
}
@media (max-width:900px){
  .bn-popular-list{max-height:none;overflow:visible}
}


/* =========================================================
   BANTER6 3.0.4 — iklan atas header di mode mobile.
   Banner diletakkan di aliran normal paling atas halaman,
   di atas topbar yang sticky. Jadi ia ikut tergulir habis
   dulu, baru topbar menempel — sama seperti BanterNews.
   ========================================================= */
@media (max-width:900px){
  .bn-header-ad-wrap{display:block;width:100%;padding:0;background:var(--bn-surface)}
  .bn-header-ad-wrap>.bn-container{width:100%;max-width:100%;padding:0;display:block}
  .bn-header-ad-wrap .bn-ad-header{
    display:flex!important;
    flex:1 1 auto;
    width:100%;
    max-width:100%;
    height:auto;
    aspect-ratio:728/90;
    max-height:96px;
    min-height:52px;
    border-radius:0;
    margin:0;
  }
  .bn-header-ad-wrap .bn-ad-header[hidden]{display:none!important}
  .bn-header-ad-wrap .bn-ad-header img{width:100%;height:100%;object-fit:contain}
  /* Topbar tetap sticky, jadi menempel setelah banner lewat. */
  .bn-mobile-topbar{position:sticky;top:0}
}