/* Tema modern & padat (dimuat paling akhir, setelah style.css dan cms.css).
   Satu keluarga huruf (Inter), tata letak lentur (tanpa lebar piksel tetap), jarak rapat, pojok membulat.
   Untuk kembali ke tampilan lama cukup hapus tautan css/tema.css di app/views.php. */
:root{
  --blue:#1d3f9e; --blue-d:#142e78; --accent:#ef5a24;
  --ink:#0f172a; --ink2:#334155; --mut:#64748b; --line:#e5e7eb; --soft:#f3f5f9;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --wrap:1200px; --gut:16px; --side:320px; --top:48px;
}
@media(max-width:700px){:root{--gut:12px}}

/* ---------- dasar & huruf ---------- */
html body,html body *,html body *::before,html body *::after{font-family:var(--font)!important}
html body{font-size:15px;line-height:1.5;color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html body a{transition:color .15s,background-color .15s,border-color .15s}
html body .top5 h2:hover,html body .feed h3:hover,html body .pop-list a:hover,html body .cat-list h3:hover,html body .rel3 h4:hover,html body .trend-box a:hover,html body .rek-list a:hover,html body .mini2 h4 a:hover,html body .cards2 h4:hover{color:var(--blue)}

/* ---------- lebar & kolom ---------- */
html body .container,html body .grid,html body .topbar-in,html body .foot-in,html body .compact-in,html body .ch-sticky .in{width:100%;max-width:var(--wrap);margin-left:auto;margin-right:auto}
html body .container{padding:0 var(--gut)!important}
html body .grid{display:grid;grid-template-columns:minmax(0,1fr) var(--side);gap:0 24px;padding:0 var(--gut);margin-top:14px!important}
html body .col-8,html body .col-4{width:auto;min-width:0;padding:0}
html body .side{width:100%}
@media(max-width:1000px){html body .grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- bilah atas ---------- */
html body .topbar{height:var(--top);background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(1.4) blur(8px);backdrop-filter:saturate(1.4) blur(8px);box-shadow:0 1px 0 var(--line)}
html body .topbar-in{height:var(--top);padding:0 var(--gut)}
html body .menu-cell{width:auto;height:var(--top);padding:0 14px 0 0;gap:8px;border:0}
html body .hamb{width:30px;height:30px;border-radius:9px}
html body .menu-cell b{display:inline;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--ink2)}
html body .search-cell{padding-right:0}
html body .search{width:min(360px,100%);height:34px;margin:0;border-radius:999px;background:var(--soft);border-color:transparent}
html body .search:focus-within{background:#fff;border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,63,158,.12)}
html body .search input{font-size:14px;padding:0 14px;background:transparent}
html body .search button{width:44px;border-radius:999px}
@media(max-width:700px){html body .menu-cell b{display:none}html body .menu-cell{padding-right:10px}}

/* ---------- header beranda ---------- */
html body .site-head{padding-top:var(--top)}
html body .logo-row{height:auto;padding:12px 0 10px}
html body .logo{font-size:34px;letter-spacing:-.045em;font-weight:800;line-height:1.05}
html body .logo b{font-weight:800}
html body .logo span{font-weight:500}
html body .logo-row .logo-imgwrap{align-self:center;margin:0}
html body .logo-img.lg-home{width:200px;height:40px}
html body .logo-img.lg-channel{width:200px;height:40px;object-position:left center}
@media(max-width:700px){html body .logo-row .logo{font-size:min(32px,8.6vw)}html body .logo-img.lg-home,html body .logo-img.lg-channel{width:170px;height:auto}}
html body .nav-main{margin:0;height:42px;padding:0 6px;border-radius:10px 10px 0 0;background:var(--blue)}
html body .nav-main a{height:42px;padding:0 12px;font-size:13.5px;font-weight:600;letter-spacing:.005em}
html body .nav-main a:hover{background:rgba(255,255,255,.14)}
html body .nav-main a.on{background:rgba(255,255,255,.2)}
html body .nav-sub{height:36px;padding:0 6px;background:var(--soft);border-radius:0 0 10px 10px}
html body .nav-sub a{padding:0 10px;font-size:13px;font-weight:500;color:var(--ink2)}
html body .nav-sub a:hover{color:var(--blue)}
html body .compact,html body .ch-sticky{top:var(--top);height:42px;border-top:0;border-bottom:1px solid var(--line);box-shadow:0 2px 6px rgba(15,23,42,.06)}
html body .compact-in{height:42px;padding:0 var(--gut);gap:16px}
html body .compact .logo{font-size:20px}
html body .compact nav a{font-size:13px;font-weight:600}
html body .skin{top:var(--top);height:calc(100vh - var(--top))}

/* ---------- Sorotan utama & 5 kartu ---------- */
html body .hl-banner{margin:12px 0 0;height:auto;padding:10px 12px;border-radius:12px;background:linear-gradient(120deg,var(--blue-d),var(--blue) 60%,#2f6fe0)}
html body .hl-banner .tag{width:auto;margin:0 4px 0 0;font-size:12px;line-height:1.2;font-weight:800;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
html body .hl-inner{height:auto;margin-left:10px;padding:8px 10px;gap:12px;border:0;border-radius:10px;background:#fff}
html body .hl-inner .th{width:96px!important;height:60px!important;border-radius:8px}
html body .hl-inner h2{font-size:16px;line-height:1.3;font-weight:700;color:var(--ink)}
html body .hl-inner small{font-size:12px;color:var(--mut);margin-top:2px}
html body .top5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:12px 0 0;padding:0;overflow:visible}
html body .top5 article{width:auto}
html body .top5 .ph{width:100%!important;height:auto!important;aspect-ratio:16/10;border-radius:8px}
html body .top5 h2{margin-top:6px;font-size:13.5px;line-height:1.35;font-weight:600;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:700px){
  html body .hl-banner{padding:10px;flex-direction:column;align-items:stretch;gap:8px}
  html body .hl-banner .tag{margin:0}html body .hl-inner{margin-left:0}
  html body .hl-inner .th{width:80px!important;height:54px!important}
  html body .hl-inner h2{font-size:15px}
  html body .top5{display:flex;overflow-x:auto;gap:10px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:none}
  html body .top5::-webkit-scrollbar{display:none}
  html body .top5 article{flex:0 0 44%;scroll-snap-align:start}
}

/* ---------- Breaking News (ringkas) ---------- */
html body .breaking{margin-top:12px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
html body .brk-head{height:36px}
html body .brk-label{width:auto;padding:0 24px 0 14px;font-size:12px;line-height:36px;letter-spacing:.08em;font-style:normal}
html body .brk-title{font-size:13.5px!important;line-height:36px;font-weight:700;text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--blue)}
html body .brk-video{height:auto;aspect-ratio:21/8;max-height:220px;border-bottom:0}
html body .brk-video .brk-mark{font-size:26px;font-weight:800;letter-spacing:-.02em}
html body .play{width:52px;height:52px}
html body .play::after{left:21px;top:15px;border-left-width:18px;border-top-width:11px;border-bottom-width:11px}
html body .brk-blue{padding:10px 14px 12px;border-radius:0;background:var(--blue-d)}
html body .brk-blue h6{font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;padding-bottom:6px}
html body .brk-blue a{font-size:13.5px;line-height:1.35;font-weight:600}
html body .brk-blue .two{gap:0 20px}
@media(max-width:700px){html body .brk-video{aspect-ratio:16/7}html body .brk-blue .two{grid-template-columns:1fr;gap:6px}html body .brk-label{width:auto}}

/* ---------- carousel berita ---------- */
html body .vc-wrap{margin:12px 0 0;padding-bottom:12px}
html body .vc-wrap .vcar{gap:10px}
html body .vcar a.v{width:128px;height:176px;border-radius:10px}
html body .vcar a.v b{font-size:12.5px;line-height:1.3;font-weight:600;padding:30px 9px 9px}
html body .arrow{width:30px;height:30px;font-size:16px;margin-top:-26px;background:rgba(15,23,42,.62)}

/* ---------- daftar berita ---------- */
html body .feed-h{margin:12px 0 4px;font-size:14px}
html body .feed-h b{font-weight:800;color:var(--ink)}
html body .feed article,html body .feed article.rev{display:flex;flex-direction:row;gap:14px;padding:12px 0;align-items:flex-start;justify-content:flex-start;border-bottom:1px solid var(--line)}
html body .feed article:first-child{padding-top:6px}
html body .feed .ph,html body .feed article.rev .ph{width:168px!important;height:112px!important;border-radius:8px;flex:none}
html body .feed .tx,html body .feed article.rev .tx{width:auto;flex:1;min-width:0;justify-content:flex-start}
html body .feed .cat{font-size:11px;line-height:1.3;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
html body .feed h3{margin:2px 0 4px;font-size:17px;line-height:1.3;font-weight:700;letter-spacing:-.005em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
html body .feed .dt{font-size:12px;font-weight:400;color:var(--mut)}
html body .more,html body .btn-grey{display:block;width:fit-content;margin:14px auto 0;padding:9px 20px;height:auto;line-height:1.2;font-size:13px;font-weight:600;border-radius:999px;text-align:center}
html body .more{background:var(--blue);color:#fff}
html body .btn-grey{background:var(--soft);color:var(--blue)}
@media(max-width:700px){
  html body .feed .ph,html body .feed article.rev .ph{width:112px!important;height:84px!important}
  html body .feed article,html body .feed article.rev{gap:10px;padding:10px 0}
  html body .feed h3{font-size:15px;line-height:1.3}
}
html body .rec-head{margin:12px 0 8px;padding-top:12px}
html body .rec-head b{font-size:16px;font-weight:800}
html body .rec-head a{font-size:12px;color:var(--blue);font-weight:600}
html body .rec3{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
html body .rec3 .ph{width:100%!important;height:auto!important;aspect-ratio:16/10;border-radius:8px}
html body .rec3 .c{margin:6px 0 2px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
html body .rec3 h4{margin-bottom:6px;font-size:14px;line-height:1.35;font-weight:600}
@media(max-width:700px){html body .rec3{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- sidebar ---------- */
html body .box{margin-top:14px}
html body .sec-title{margin-bottom:8px;padding-left:10px;border-left:4px solid var(--accent);font-size:14px;line-height:1.2;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
html body .pop-list li{gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}
html body .pop-list li:last-child{border-bottom:0}
html body .pop-list .n{width:30px;padding:0;text-align:center;font-size:18px;line-height:22px;font-weight:800;color:#cbd5e1}
html body .pop-list a{font-size:14px;line-height:1.35;font-weight:600}
html body .pop-list small{margin-top:2px;font-size:11.5px;color:var(--mut)}
html body .tagbox{border-top:0;padding-top:0}
html body .tagbox .t{display:inline-block;margin:0 5px 6px 0;padding:4px 11px;border:1px solid var(--line);border-radius:999px;background:var(--soft);font-size:13px;line-height:1.3;font-weight:500;color:var(--ink2)}
html body .tagbox .t::before{position:static;margin-right:2px;color:var(--accent)}
html body .tagbox .t:hover{border-color:var(--blue);color:var(--blue)}
html body .prod{margin-top:12px!important;padding:10px;border-radius:12px;background:var(--soft)}
html body .prod .top{padding:8px 10px;margin-bottom:10px;border-radius:8px;font-size:12px;line-height:1.35}
html body .prod .top b{border-radius:6px;font-weight:600}
html body .prod .slider>div{width:140px}
html body .prod .ph{width:100%!important;height:82px!important;border-radius:8px}
html body .prod .c{margin-top:5px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent)}
html body .prod h4{margin-top:2px;font-size:13px;line-height:1.35;font-weight:600}
html body .promo{height:auto;padding:12px;border-radius:12px;background:linear-gradient(150deg,var(--blue-d),#2f6bd0);overflow:hidden}
html body .promo .hd{height:auto;padding:0 0 8px}
html body .promo h3{display:block;font-size:13px;font-style:normal;font-weight:800;letter-spacing:.08em}
html body .promo .note{height:auto;margin:0 0 10px;padding:8px 10px;gap:8px;font-size:12px;line-height:1.4;border-radius:8px}
html body .promo .slider{margin:0;height:auto}
html body .promo .slider>div{width:140px;height:auto}
html body .promo .ph{width:100%!important;height:82px!important;border-radius:8px}
html body .promo h5{margin-top:5px;font-size:12.5px;line-height:1.35;font-weight:600}
html body .sl-btn{width:26px;height:26px;background:rgba(15,23,42,.62)}
html body .trend-box{margin-top:14px;padding:12px;border-radius:12px;background:var(--soft)}
html body .trend-box h4{display:inline-block;margin-bottom:12px;font-size:14px;line-height:1.2;font-weight:800;letter-spacing:.05em;text-transform:uppercase;box-shadow:0 3px 0 var(--accent)}
html body .trend-box ul{padding:0}
html body .trend-box li{gap:10px;margin-bottom:10px}
html body .trend-box .th{width:64px;height:64px}
html body .trend-box .th .ph{width:64px!important;height:64px!important;border-radius:8px}
html body .trend-box .th em{left:-6px;top:-6px;width:22px;height:22px;border-radius:7px;font-size:12px;line-height:22px}
html body .trend-box a{font-size:14px;line-height:1.35;font-weight:600}
html body .btn-more{display:block;width:auto;height:auto;margin:6px 0 0;padding:8px 14px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:13px;line-height:1.2;font-weight:600;text-transform:none;color:var(--blue)}
html body .rek-list h4{display:inline-block;margin-bottom:10px;font-size:14px;line-height:1.2;font-weight:800;letter-spacing:.05em;text-transform:uppercase;box-shadow:0 3px 0 var(--accent)}
html body .rek-list li{height:auto;gap:10px;margin-bottom:10px;padding:0}
html body .rek-list .ph{width:64px!important;height:64px!important;border-radius:8px}
html body .rek-list a{font-size:14px;line-height:1.35;font-weight:600;-webkit-line-clamp:3}

/* ---------- header kanal (artikel, kategori, pencarian) ---------- */
html body .ch-head{padding-top:var(--top)}
html body .ch-logo{padding:10px 0 8px;text-align:left}
html body .ch-logo .logo{font-size:30px}
html body .ch-logo .logo-imgwrap{justify-content:flex-start}
html body .ch-nav{width:auto;margin:0;height:42px;padding:0 6px;gap:2px;justify-content:flex-start;overflow-x:auto;border:0;border-radius:10px;background:var(--blue);scrollbar-width:none}
html body .ch-nav::-webkit-scrollbar{display:none}
html body .ch-nav .d{display:none}
html body .ch-nav a{display:flex;align-items:center;height:42px;padding:0 12px;border-bottom:3px solid transparent;font-size:13px;font-weight:600;text-transform:none;color:#fff;white-space:nowrap}
html body .ch-nav a:hover{background:rgba(255,255,255,.12)}
html body .ch-nav a.on{border-color:#fff;background:rgba(255,255,255,.14);font-weight:700}
html body .ch-trend{width:auto;margin:8px 0 0;height:auto;padding:5px 0;border-radius:8px;background:var(--soft);font-size:11px;line-height:1.2;font-weight:700;letter-spacing:.14em;color:var(--mut)}
html body .ch-sticky .in{height:42px;gap:16px;padding:0 var(--gut)}
html body .ch-sticky a{display:flex;align-items:center;height:42px;padding:0;font-size:13px;font-weight:600;text-transform:none;border-bottom:3px solid transparent}
html body .ch-sticky a.on{border-color:var(--accent)}
html body .ch-sticky .logo{height:auto;font-size:20px;letter-spacing:-.04em;text-transform:none}

/* ---------- halaman artikel ---------- */
html body .crumb{margin:2px 0 8px;font-size:12px;text-transform:none;color:var(--mut)}
html body .art h1{margin:0 0 8px;font-size:30px;line-height:1.22;font-weight:800;letter-spacing:-.022em;text-align:left;color:var(--ink)}
html body .art .by{text-align:left;font-size:13px;font-style:normal;color:var(--ink2)}
html body .art .by b{margin-left:6px;padding-left:0;border-left:0;font-weight:700;color:var(--accent)}
html body .art .tm{margin:2px 0 10px;text-align:left;font-size:12px;color:var(--mut)}
html body .actions{margin-bottom:10px;padding:8px 2px;border-color:var(--line)}
html body .actions span{font-size:12px}
html body .actions svg{width:20px;height:20px}
html body .hero-img{width:100%;height:auto;aspect-ratio:16/9;max-height:520px;object-fit:cover;border-radius:12px}
html body .cap{margin:6px 0 12px;font-size:12px;line-height:1.4;color:var(--mut)}
html body .detail__body{font-size:17px;line-height:1.7;color:#1e293b}
html body .detail__body p{margin-bottom:14px}
html body .detail__body h2{margin:22px 0 8px;font-size:22px;line-height:1.3;font-weight:800;letter-spacing:-.012em;color:var(--ink)}
html body .detail__body h3{margin:18px 0 6px;font-size:18px;line-height:1.35;font-weight:700;color:var(--ink)}
html body .detail__body a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
html body .detail__body ul,html body .detail__body ol{margin:0 0 14px;padding-left:24px}
html body .detail__body ul{list-style:disc}html body .detail__body ol{list-style:decimal}
html body .detail__body li{margin-bottom:4px}
html body .detail__body blockquote{margin:0 0 14px;padding:8px 14px;border-left:4px solid var(--blue);background:var(--soft);color:var(--ink2);border-radius:0 8px 8px 0}
html body .detail__body .bj{margin:0 0 14px;padding:10px 14px;border-left:4px solid var(--blue);border-radius:0 8px 8px 0;background:#eef2ff;font-size:15px;line-height:1.4;font-weight:600}
html body .detail__body .bj b{color:var(--blue);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
html body .detail__body .bj a{color:var(--ink);text-decoration:none;font-weight:700}
html body .tags-t{margin:16px 0 6px;padding-top:12px;font-size:12px;line-height:1.2;font-weight:700;letter-spacing:.12em;color:var(--mut)}
html body .tags{margin:0 0 12px;gap:6px}
html body .tags a{padding:3px 12px;border:1px solid var(--line);border-radius:999px;background:var(--soft);color:var(--ink2);font-size:13px;line-height:1.5;font-weight:500}
html body .tags a:hover{border-color:var(--blue);color:var(--blue)}
html body .rel-head{margin:20px 0 10px}
html body .rel-head b{font-size:15px;line-height:1.2;font-weight:800;letter-spacing:.04em;color:var(--ink)}
html body .btn-or{padding:6px 12px;border-radius:8px;background:var(--accent);font-size:12px;line-height:1.3;font-weight:600;text-transform:none}
html body .rel3{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
html body .rel3 .ph{width:100%!important;height:auto!important;aspect-ratio:16/10;border-radius:8px}
html body .rel3 .ch{margin:6px 0 2px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
html body .rel3 h4{font-size:14px;line-height:1.35;font-weight:600;color:var(--ink)}
html body .mini2{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px;margin-top:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
html body .mini2 article{height:auto;gap:10px}
html body .mini2 .ph{width:80px!important;height:80px!important;border-radius:8px}
html body .mini2 .c{margin-bottom:2px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
html body .mini2 h4{font-size:14px;line-height:1.35;font-weight:600;color:var(--ink)}
html body .cards2{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
html body .cards2 .ph{width:100%!important;height:auto!important;aspect-ratio:16/9;border-radius:8px}
html body .cards2 h4{margin-top:6px;font-size:15px;line-height:1.35;font-weight:700;color:var(--ink)}
html body .komen{margin-top:18px}
html body .komen b{margin-bottom:8px;font-size:13px}
html body .komen .box-in{height:42px;border-radius:10px;font-size:14px}
html body .relcard{margin-top:12px;padding:10px;border-radius:12px;background:var(--soft)}
html body .relcard .ph{width:100%!important;height:auto!important;aspect-ratio:16/10;border-radius:8px}
html body .relcard h5{margin:8px 0 6px;font-size:15px;line-height:1.35;font-weight:700;color:var(--ink)}
html body .dots{display:none}
html body .preview-bar,html body .empty{border-radius:10px}
html body .search-h{margin:0 0 4px;font-size:22px;line-height:1.3;font-weight:800}
html body .search-n{margin-bottom:12px;font-size:13px}
@media(max-width:700px){
  html body .art h1{font-size:24px}
  html body .detail__body{font-size:16px;line-height:1.65}
  html body .detail__body h2{font-size:20px}
  html body .rel3{grid-template-columns:repeat(2,minmax(0,1fr))}
  html body .mini2,html body .cards2{grid-template-columns:minmax(0,1fr)}
}

/* ---------- halaman kategori ---------- */
html body .cat-hero{position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0 0;padding:0;border:0;background:none}
html body .cat-hero::before{display:none}
html body .cat-hero article{position:relative;width:auto;height:auto;aspect-ratio:4/3;overflow:hidden;border-radius:12px}
html body .cat-hero .ph{position:absolute;inset:0;width:100%!important;height:100%!important}
html body .cat-hero h2{position:absolute;left:0;right:0;bottom:0;width:auto;padding:40px 12px 10px;border:0;background:linear-gradient(transparent,rgba(15,23,42,.88));color:#fff;font-size:16px;line-height:1.3;font-weight:700;-webkit-line-clamp:3}
html body .cat-list article{gap:14px;margin:0;padding:12px 0;border-bottom:1px solid var(--line)}
html body .cat-list .ph{width:168px!important;height:112px!important;border-radius:8px}
html body .cat-list .c{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
html body .cat-list h3{margin-top:2px;font-size:17px;line-height:1.3;font-weight:700;color:var(--ink)}
html body .page-nums{gap:6px;margin:14px 0}
html body .page-nums a{width:34px;height:34px;border-color:var(--line);border-radius:8px;font-size:13px;font-weight:600}
html body .page-nums a.on{background:var(--blue);border-color:var(--blue)}
@media(max-width:700px){
  html body .cat-hero{display:flex;overflow-x:auto;gap:10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  html body .cat-hero::-webkit-scrollbar{display:none}
  html body .cat-hero article{flex:0 0 78%;aspect-ratio:4/3;scroll-snap-align:start}
  html body .cat-hero h2{font-size:15px;padding:34px 10px 8px}
  html body .cat-list .ph{width:112px!important;height:84px!important}
  html body .cat-list article{gap:10px}
  html body .cat-list h3{font-size:15px}
}

/* ---------- footer ---------- */
html body .footer,html body .footer.ch{margin-top:20px;padding-bottom:12px;background:var(--soft)}
html body .footer::before{height:3px;background:var(--blue)}
html body .footer.ch::before{height:3px;background:var(--blue)}
html body .foot-in{display:flex;flex-wrap:wrap;gap:18px 40px;padding:22px var(--gut) 0}
html body .foot-brand,html body .footer.ch .foot-brand{width:260px;max-width:100%;padding:0;text-align:left}
html body .foot-brand .logo{justify-content:flex-start;font-size:24px;line-height:1.1}
html body .foot-brand .logo-imgwrap{justify-content:flex-start;height:auto}
html body .foot-brand .cw,html body .footer.ch .foot-brand .cw{margin-top:12px;font-size:11px;line-height:1.3;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
html body .foot-brand .soc,html body .footer.ch .foot-brand .soc{justify-content:flex-start;gap:6px;margin-top:6px}
html body .foot-brand .soc i,html body .footer.ch .foot-brand .soc i{width:30px;height:30px;font-size:12px}
html body .foot-brand .cp,html body .footer.ch .foot-brand .cp{margin-top:12px;font-size:12px;line-height:1.5;color:var(--mut)}
html body .foot-nav,html body .footer.ch .foot-nav{width:auto;min-height:0;padding:0}
html body .foot-nav.w2{min-width:220px}
html body .foot-nav h5,html body .footer.ch .foot-nav h5{margin-bottom:6px;font-size:12px;line-height:1.3;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
html body .foot-nav li,html body .footer.ch .foot-nav li{height:auto}
html body .foot-nav a,html body .footer.ch .foot-nav a{padding:3px 0;font-size:13px;line-height:1.5;white-space:normal;color:var(--ink2)}
html body .foot-kat{grid-template-rows:none;grid-auto-flow:row;grid-template-columns:repeat(2,minmax(110px,1fr));gap:0 20px}
@media(max-width:700px){
  html body .foot-in{gap:16px 24px}
  html body .foot-brand,html body .footer.ch .foot-brand{width:100%}
  html body .foot-nav.w2{width:100%}
  html body .foot-nav.w1{width:calc(50% - 12px);min-width:130px}
}

/* ---------- drawer ---------- */
html body .drawer .pn{width:min(320px,86vw);padding:14px 16px}
html body .drawer .pn h6{margin:6px 0 8px;font-size:11px;letter-spacing:.12em;color:var(--mut)}
html body .drawer .pn a{padding:11px 2px;font-size:15px;font-weight:600}
html body .toast{border-radius:10px}

/* tombol putar tidak menutupi tulisan di tengah */
html body .brk-video .play{left:14px;top:auto;bottom:14px;transform:none}

/* footer: kolom mengalir berdampingan di tablet (aturan lama memaksa satu kolom per baris) */
html body .foot-nav.w1,html body .foot-nav.w2{width:auto}
html body .foot-nav.w2{min-width:220px}
@media(max-width:700px){html body .foot-nav.w2{width:100%;min-width:0}html body .foot-nav.w1{width:calc(50% - 12px);min-width:130px}}

/* isi artikel: lebar baca nyaman (±75 karakter per baris) */
html body .detail__body{max-width:40rem}
@media(max-width:700px){html body .detail__body{max-width:none}}

/* ---------- logo: gaya domain (TapakBerita.com), rata tengah; nama kanal turun ke baris bawah bila tidak muat ---------- */
html body .logo{display:inline-flex;flex-wrap:wrap;align-items:baseline;justify-content:center;column-gap:.32em;max-width:100%;white-space:normal;text-align:center}
html body .logo .lg-b{font-style:normal;white-space:nowrap}
html body .logo .lg-cat{text-decoration:none;font-weight:500;background:linear-gradient(90deg,#d6406f,#ef672f 60%,#f5a623);-webkit-background-clip:text;background-clip:text;color:transparent}
html body .logo-row{justify-content:center}
html body .ch-logo{text-align:center}
html body .ch-logo .logo-imgwrap{justify-content:center}
html body .logo-img.lg-home,html body .logo-img.lg-channel{object-position:center}
html body .foot-brand .logo{justify-content:flex-start;text-align:left}
html body .compact .logo,html body .ch-sticky .logo{flex-wrap:nowrap;white-space:nowrap}
@media(max-width:700px){html body .ch-sticky .logo .lg-cat{display:none}}

/* ---------- blok Breaking News: gambar atau video (YouTube klik-untuk-putar) ---------- */
html body .brk-video.brk-media{display:block;position:relative;aspect-ratio:16/9;max-height:none;background:#0f172a;overflow:hidden}
html body .brk-media a{position:absolute;inset:0;display:block}
html body .brk-media img{display:block;width:100%;height:100%;object-fit:cover}
html body .brk-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
html body .brk-media .play{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%) scale(1.25);box-shadow:0 2px 10px rgba(0,0,0,.35);transition:transform .15s}
html body .brk-media .brk-yt:hover .play{transform:translate(-50%,-50%) scale(1.4)}
html body .brk-media .brk-yt::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(15,23,42,.35))}
html body .brk-media .play{z-index:1}