/* Gaya utama portal berita (viewport desain 1304px)
   container 1080 | padding 13 | kolom utama 720 | sidebar 360 | nav 42px | topbar 46px */
:root{
  --blue:#21409a; --blue2:#5699f3; --orange:#ef672f; --red:#ff0000;
  --text:#000; --grey:#666; --line:#e6e6e6; --bg-soft:#f0f0f0;
  --pop-peach:#fde5cf; --pop-pink:#e5399a; --pop-purple:#7a4fa3;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Helvetica,Arial,Tahoma,sans-serif;color:var(--text);background:#fff;font-size:16px;line-height:1.4;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}
button{font-family:inherit;cursor:pointer}
.mont{font-family:'Montserrat',Arial,sans-serif}
.pop{font-family:'Poppins',Arial,sans-serif}

.container{width:1080px;margin:0 auto;padding:0 13px}
.grid{display:flex;width:1080px;margin:0 auto}
.col-8{width:720px;padding:0 13px}
.col-4{width:360px;padding:0 13px}

/* ---------- Topbar (tinggi 46) ---------- */
.topbar{position:fixed;top:0;left:0;right:0;height:46px;background:#fff;z-index:50;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.topbar-in{width:1080px;height:46px;margin:0 auto;display:flex;align-items:center}
.menu-cell{width:95px;height:46px;display:flex;align-items:center;justify-content:center;gap:10px;border-right:1px solid var(--line);flex:none;background:none;border-top:0;border-left:0;border-bottom:0}
.hamb{width:26px;height:26px;border-radius:50%;background:var(--blue);display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.hamb i{display:block;width:12px;height:2px;background:#fff;border-radius:1px}
.menu-cell b{font:600 14px/1 'Montserrat',Arial;color:#444;letter-spacing:.3px}
.search-cell{flex:1;min-width:0;display:flex;justify-content:center}
.search{width:380px;height:34px;border:1px solid var(--line);border-radius:17px;display:flex;overflow:hidden;background:#fff}
.search input{flex:1;border:0;outline:0;padding:0 14px;font:14px 'Montserrat',Arial;color:#333;min-width:0}
.search button{width:58px;border:0;background:var(--blue);color:#fff;border-radius:17px;display:flex;align-items:center;justify-content:center}
.search svg{width:18px;height:18px}
.auth-cell{width:202px;height:46px;border-left:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:5px;flex:none}
.btn-pill{height:30px;padding:0 14px;border-radius:15px;font:600 13px 'Montserrat',Arial;display:inline-flex;align-items:center}
.btn-fill{background:var(--blue);color:#fff;border:1px solid var(--blue)}
.btn-line{background:#fff;color:var(--blue);border:2px solid var(--blue)}

/* ---------- Header + nav utama ---------- */
.site-head{padding-top:62px}
.logo-row{height:130px;display:flex;align-items:center;padding:0 13px}
.logo{font-family:'Montserrat',Arial;font-size:58px;line-height:1;letter-spacing:-2px;display:inline-flex;align-items:baseline}
.logo b{font-weight:700;color:var(--blue)}
.logo span{font-weight:400;background:linear-gradient(90deg,#d6406f,#ef672f 60%,#f5a623);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-main{margin:16px 0 0;height:42px;background:linear-gradient(100deg,#21409a 50%,#5699f3 100%);display:flex;align-items:center;padding:0 8px;border-radius:2px;overflow:hidden}
.nav-main a{font:600 14px 'Montserrat',Arial;color:#fff;padding:0 9px;height:42px;display:flex;align-items:center;white-space:nowrap}
.nav-main a:hover{background:rgba(255,255,255,.14)}
.nav-main a.on{background:rgba(0,0,0,.18)}
.nav-sub{margin:0;height:42px;background:#f0f0f0;display:flex;align-items:center;padding:0 8px;overflow:hidden}
.nav-sub a{font:600 14px 'Montserrat',Arial;color:#000;padding:0 9px;white-space:nowrap;position:relative;text-transform:capitalize}
.nav-sub a.dot::after{content:'';position:absolute;top:-4px;right:1px;width:5px;height:5px;border-radius:50%;background:var(--red)}

/* bar kecil saat discroll */
.compact{position:fixed;top:46px;left:0;right:0;height:44px;background:#fff;z-index:49;border-top:2px solid var(--blue);box-shadow:0 2px 4px rgba(0,0,0,.1);transform:translateY(-130%);transition:transform .2s}
.compact.show{transform:none}
.compact-in{width:1080px;margin:0 auto;height:42px;display:flex;align-items:center;padding:0 13px;gap:22px}
.compact .logo{font-size:22px;letter-spacing:-.8px}
.compact nav{display:flex;gap:0;overflow:hidden}
.compact nav a{font:600 13px 'Montserrat',Arial;padding:0 8px;white-space:nowrap}

/* ---------- Banner utama ---------- */
.hl-banner{margin:24px 13px 0;height:150px;border-radius:14px;background:linear-gradient(135deg,#8a6a3e,#c8a46a 45%,#7f6542);position:relative;display:flex;align-items:center;padding:0 12px;color:#fff;overflow:hidden}
.hl-banner .tag{width:180px;font:700 24px 'Montserrat';line-height:1.1;flex:none}
.hl-inner{flex:1;height:118px;border:2px solid #fff;border-radius:14px;background:rgba(255,255,255,.88);display:flex;align-items:center;padding:0 12px;gap:14px;color:#000;margin-left:20px}
.hl-inner .th{width:130px;height:72px;border-radius:6px;flex:none}
.hl-inner h2{font:600 17px/1.3 'Montserrat';color:#222}
.hl-inner small{display:block;color:var(--grey);font-size:13px;margin-top:6px}
.hl-show{position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);background:#f26a2e;color:#fff;font:700 13px 'Montserrat';padding:6px 16px;border-radius:10px 10px 0 0}

/* ---------- 5 kartu berita utama ---------- */
.top5{display:flex;gap:26px;margin:20px 13px 0}
.top5 article{width:190px;flex:none}
.top5 .ph{width:190px;height:142px;border-radius:2px}
.top5 h2{font:400 14px/18.2px 'Montserrat',Arial;margin-top:8px;color:#000}
.top5 h2:hover,.feed h3:hover,.pop-list a:hover{color:var(--blue)}

/* placeholder gambar */
.ph{position:relative;background:#999;overflow:hidden;display:block}
.ph::after{content:attr(data-l);position:absolute;right:6px;bottom:4px;font:600 10px 'Montserrat';color:rgba(255,255,255,.75);letter-spacing:.4px}
.r43{aspect-ratio:4/3}
.r169{aspect-ratio:16/9}

/* ---------- Breaking news ---------- */
.breaking{margin-top:24px}
.brk-head{display:flex;height:37px}
.brk-label{background:var(--red);color:#fff;font:italic 800 17px/37px 'Montserrat';padding:0 20px 0 14px;clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%);width:193px;letter-spacing:.2px}
.brk-title{flex:1;background:linear-gradient(100deg,#21409a 50%,#5699f3);color:#fff;font:700 21px/37px 'Montserrat';padding:0 16px;text-transform:uppercase}
.brk-bar{height:50px;background:linear-gradient(100deg,#21409a 50%,#5699f3);color:#fff;font:700 21px/50px 'Montserrat';padding:0 16px;text-transform:uppercase;margin-top:-37px;display:none}
.brk-video{margin-top:0;height:390px;background:#f4f4f4;display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px solid #111}
.play{width:76px;height:76px;border-radius:50%;background:rgba(80,80,80,.75);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.play::after{content:'';position:absolute;left:30px;top:22px;border-left:26px solid #fff;border-top:16px solid transparent;border-bottom:16px solid transparent}

/* ---------- Kotak umum ---------- */
.box{margin-top:24px}
.sec-title{display:flex;align-items:center;justify-content:space-between;font:600 18px/23.4px 'Montserrat';color:var(--blue);margin-bottom:14px}
.sec-title a{font:400 12px 'Montserrat';color:#000}
.sec-title.blue{}

/* ---------- News feed (gambar 215x161, jarak 24) ---------- */
.feed-h{display:flex;align-items:baseline;gap:8px;font:400 16px 'Montserrat';color:var(--grey);margin:24px 0 14px}
.feed-h b{color:#000;font-weight:700}
.feed article{display:flex;gap:24px;padding:16px 0;border-bottom:1px solid var(--line)}
.feed article:first-child{padding-top:0}
.feed .ph{width:215px;height:161px;flex:none}
.feed .tx{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.feed .cat{font:600 12px/16.8px Helvetica,Arial;color:var(--orange)}
.feed h3{font:400 20px/26px 'Montserrat',Arial;color:#000;margin:3px 0 6px}
.feed .dt{font:300 12px/18px Helvetica,Arial;color:var(--grey)}
.more{display:block;margin:24px auto;width:fit-content;background:var(--orange);color:#fff;font:700 13px 'Montserrat';padding:11px 22px;border-radius:3px}

/* ---------- Sidebar ---------- */
.adslot{background:#f4f4f4;border:1px dashed #ccc;display:flex;align-items:center;justify-content:center;color:#999;font:600 12px 'Montserrat';letter-spacing:1px;text-transform:uppercase;position:relative}
.adslot::before{content:'Iklan';position:absolute;top:4px;left:6px;font-size:9px;opacity:.7}
.side{width:334px}
.pop-list li{display:flex;gap:2px;padding:9px 0}
.pop-list .n{font:400 20px/28px 'Montserrat';color:#999;width:36px;flex:none;padding-left:12px}
.pop-list a{font:500 16px/21px 'Montserrat',Arial;color:#000;display:block}
.pop-list small{display:block;color:var(--grey);font-size:12px;margin-top:3px}
.rekom{background:#eef3fb;border-radius:8px;padding:12px}
.rekom-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rekom-grid .ph{height:84px;border-radius:3px}
.rekom-grid .c{font:600 12px Helvetica;color:var(--orange);margin-top:6px}
.rekom-grid h4{font:400 13px/1.3 Helvetica;margin-top:2px}
.tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:6px}
.tabs button{flex:1;border:0;background:none;padding:10px 0;font:700 13px 'Montserrat';color:var(--grey);border-bottom:3px solid transparent}
.tabs button.on{color:var(--blue);border-color:var(--blue)}

/* ---------- Footer (latar #f0f0f0, garis atas 4px, kolom 270|270|180|180|180) ---------- */
.footer{margin-top:40px;background:#f0f0f0;padding-bottom:52px;position:relative}
.footer::before{content:'';display:block;height:4px;background:linear-gradient(100deg,#21409a 50%,#5699f3 100%)}
.footer.ch::before{background:linear-gradient(90deg,#6d51a1 .21%,#ED2C92 36.59%,#f36b32 69.33%,rgba(0,0,0,0))}
.foot-in{width:1080px;margin:0 auto;display:flex;padding-top:32px}
.foot-brand{width:270px;flex:none;text-align:center;padding:12px 13px 0}
.foot-brand .logo{font-size:28px;line-height:39px;letter-spacing:-1px;justify-content:center;white-space:nowrap}
.foot-brand .cw{font:400 12px/16.8px 'Montserrat',Arial;color:#333;margin-top:41px}
.foot-brand .soc{display:flex;flex-wrap:wrap;justify-content:center;gap:9px 10px;margin-top:8px}
.foot-brand .soc i{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 13px/1 'Montserrat',Arial;font-style:normal;color:#fff}
.foot-brand .cp{font:400 12px/16.8px 'Montserrat',Arial;color:var(--grey);margin-top:46px}
.foot-nav{padding:24px 0 0 24px;min-height:386px}
.foot-nav.w2{width:270px;flex:none}
.foot-nav.w1{width:180px;flex:none}
.foot-nav h5{font:600 14px/19.6px 'Montserrat',Arial;color:#000;margin-bottom:8.4px}
.foot-nav li{height:24.64px}
.foot-nav a{font:400 12px/24.64px 'Montserrat',Arial;color:var(--grey);display:block;white-space:nowrap}
.foot-nav a:hover{color:var(--blue)}
.foot-kat{display:grid;grid-template-rows:repeat(9,auto);grid-auto-flow:column;grid-template-columns:123px 110px}
/* varian kanal: item 32px, tinggi total 572 */
.footer.ch .foot-nav{min-height:484px}
.footer.ch .foot-nav h5{line-height:24px;margin-bottom:8px}
.footer.ch .foot-nav li{height:32px}
.footer.ch .foot-nav a{line-height:32px}
.footer.ch .foot-brand{padding-left:0;padding-right:0}
.footer.ch .foot-brand .soc{gap:6px;margin-top:4px}
.footer.ch .foot-brand .soc i{width:32px;height:32px}
.footer.ch .foot-brand .cw{line-height:24px;margin-top:33px}
.footer.ch .foot-brand .cp{line-height:24px;margin-top:40px}

/* ---------- Iklan melayang ---------- */
.skin{position:fixed;top:46px;width:105px;height:calc(100vh - 46px);z-index:5;overflow:hidden}
.skin.l{left:0}.skin.r{right:0}
.skin .adslot{height:100%;writing-mode:vertical-rl;border-style:dashed}
@media(max-width:1300px){.skin{display:none}}
.float-ad{position:fixed;left:0;bottom:0;width:400px;height:172px;z-index:60}
.float-ad .adslot{height:100%;background:#1f4fa8;color:#fff;border:0}
.float-ad .adslot::before{display:none}
.close-ad{position:absolute;top:-22px;right:0;background:#000;color:#fff;font:700 10px 'Montserrat';padding:6px 8px;border:0;z-index:2}
.float-vid{position:fixed;left:10px;bottom:178px;width:188px;height:140px;z-index:61;background:#222;border-radius:4px;color:#fff;font:700 11px 'Montserrat';display:flex;align-items:flex-end;justify-content:center;padding-bottom:10px;border:0}
.float-vid .live{position:absolute;top:6px;left:6px;background:#ffd400;color:#000;padding:2px 8px;border-radius:10px}
.float-vid .x{position:absolute;top:-12px;right:-12px;width:24px;height:24px;border-radius:50%;background:#555;color:#fff;border:0;font-size:14px}
.brk-float{position:fixed;right:15px;top:85px;width:400px;z-index:62;background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.3)}
.brk-float .h{background:var(--blue);color:#fff;display:flex;justify-content:space-between;align-items:center;font:italic 800 13px 'Montserrat';padding:0 10px 0 0;height:36px}
.brk-float .h span{background:var(--red);height:36px;line-height:36px;padding:0 20px 0 12px;clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.brk-float .h button{background:none;border:0;color:#fff;font-size:18px}
.brk-float .v{height:225px;background:#f4f4f4;display:flex;align-items:center;justify-content:center;font:800 40px 'Montserrat';color:#c2262e;position:relative}
.brk-float .live{background:#222;color:#fff;font:12px 'Montserrat';padding:10px 10px}
.brk-float .t{background:var(--blue);color:#fff;font:700 14px 'Montserrat';padding:14px 16px}
.toast{position:fixed;left:50%;top:70px;transform:translateX(-50%);z-index:55;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.25);border-radius:4px;padding:10px 14px;font:700 14px 'Montserrat';color:var(--blue);display:flex;gap:16px;align-items:center}
.toast b{background:var(--orange);color:#fff;font-size:11px;padding:6px 12px;border-radius:3px}

/* ---------- Tema kanal (artikel & kategori) ---------- */
.ch-head{padding-top:46px}
.ch-logo{text-align:center;padding:26px 0 18px}
.ch-logo .logo{font-size:44px}
.ch-nav{width:1054px;margin:0 auto;border-top:1px solid #ccc;border-bottom:1px solid #ccc;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 14px 0 0}
.ch-nav .d{width:42px;height:42px;display:flex;align-items:center;justify-content:center}
.ch-nav .d i{width:16px;height:16px;border-radius:50%;background:var(--blue);display:block}
.ch-nav a{font:500 16px 'Poppins',Arial;text-transform:uppercase;color:#000;padding:6px 0;border-bottom:3px solid transparent}
.ch-nav a.on{font-weight:600;border-color:var(--orange)}
.ch-trend{width:1054px;margin:0 auto;height:48px;background:#eee;text-align:center;font:500 14px/48px 'Poppins',Arial;color:#444}
.ch-sticky{position:fixed;top:46px;left:0;right:0;height:46px;background:#fff;z-index:49;border-top:2px solid var(--blue);box-shadow:0 1px 3px rgba(0,0,0,.1);transform:translateY(-130%);transition:transform .2s}
.ch-sticky.show{transform:none}
.ch-sticky .in{width:1080px;margin:0 auto;display:flex;align-items:center;gap:26px;padding:0 13px;height:44px;overflow-x:auto}
.ch-sticky .logo{font-size:20px}
.ch-sticky a{font:500 14px 'Poppins',Arial;text-transform:uppercase;padding:4px 0;border-bottom:3px solid transparent;white-space:nowrap}
.ch-sticky a.on{border-color:var(--orange)}

.crumb{font:400 11px 'Poppins';text-transform:uppercase;color:#444;margin:24px 0 16px;display:flex;gap:8px;align-items:center}
.crumb i{font-style:normal;color:#999}
.art h1{font:400 32px/40px 'Poppins',Arial;text-align:center;margin:0 0 14px}
.art .by{text-align:center;font:italic 400 12px 'Poppins';color:#666}
.art .by b{font-style:normal;color:var(--orange);font-weight:500;border-left:1px solid #999;padding-left:10px;margin-left:8px}
.art .tm{text-align:center;font:400 12px 'Poppins';color:#888;margin:8px 0 18px}
.actions{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ddd;border-bottom:1px solid #ddd;padding:12px 4px;margin-bottom:12px;color:#333}
.actions span{display:flex;align-items:center;gap:6px;font:12px 'Poppins'}
.actions svg{width:22px;height:22px;stroke:#333;fill:none;stroke-width:1.6}
.hero{width:100%;height:auto;aspect-ratio:3/4;max-height:520px}
.cap{font:400 12px/18px 'Poppins';color:#777;margin:8px 0 18px}
.detail__body{font:400 18px/28px Helvetica,Arial;color:#000}
.detail__body p{margin-bottom:22px}
.detail__body .rel{font-weight:700;color:var(--blue);border-left:4px solid var(--blue);padding-left:12px;margin:0 0 22px;display:block}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0}
.tags a{border:1px solid #ccc;border-radius:16px;padding:5px 14px;font:500 12px 'Poppins';color:#444}
.trend-box{background:var(--pop-peach);padding:12px 12px 6px;margin-top:40px}
.trend-box h4{font:500 24px 'Poppins';display:inline-block;border-bottom:3px solid var(--orange);padding-bottom:2px;margin-bottom:16px}
.trend-box li{display:flex;gap:10px;margin-bottom:14px;align-items:flex-start}
.trend-box .th{width:80px;height:80px;flex:none;position:relative}
.trend-box .th em{position:absolute;left:-14px;top:-4px;background:var(--orange);color:#fff;font:700 15px 'Poppins';font-style:normal;padding:2px 6px;z-index:2}
.trend-box a{font:500 15px/24px 'Poppins';color:#222}

.cat-hero{position:relative;border:4px solid #ED2C92;margin:13px 13px 56px;padding:28px;display:grid;grid-template-columns:repeat(3,311px);gap:28px;align-items:start;background:repeating-linear-gradient(135deg,#fff 0 12px,#f6f6f6 12px 24px)}
.cat-hero::before{content:'';position:absolute;z-index:-1;top:16px;left:24px;right:-16px;bottom:-16px;background:linear-gradient(#6d51a1,#ED2C92,#ffd400)}
.cat-hero article{position:relative;width:311px;height:415px}
.cat-hero .ph{width:311px;height:415px}
.cat-hero h2{font:500 24px/32px 'Poppins',Arial;background:#fff;position:absolute;left:0;bottom:20px;width:291px;padding:8px 12px 4px 0;border-top:10px solid #ED2C92;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cat-list article{display:flex;gap:16px;padding:0 0 24px;margin-bottom:24px}
.cat-list .ph{width:208px;height:156px;flex:none}
.cat-list .tx{display:flex;flex-direction:column;justify-content:center}
.cat-list .c{font:400 14px 'Poppins';color:var(--pop-purple)}
.cat-list h3{font:500 24px/32px 'Poppins';color:#333}
.cat-list h3:hover{color:var(--blue)}
.page-nums{display:flex;gap:6px;justify-content:center;margin:20px 0}
.page-nums a{width:36px;height:36px;border:1px solid #ccc;display:flex;align-items:center;justify-content:center;font:500 14px 'Poppins'}
.page-nums a.on{background:var(--orange);border-color:var(--orange);color:#fff}

/* ---------- Drawer menu ---------- */
.drawer{position:fixed;inset:0;z-index:100;display:none}
.drawer.open{display:block}
.drawer .bg{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.drawer .pn{position:absolute;left:0;top:0;bottom:0;width:300px;background:#fff;padding:20px;overflow:auto}
.drawer .pn h6{font:700 12px 'Montserrat';color:var(--grey);margin:16px 0 8px;text-transform:uppercase}
.drawer .pn a{display:block;font:600 14px 'Montserrat';padding:8px 0;border-bottom:1px solid var(--line)}

/* ====== Responsif (HP) ====== */
@media(max-width:1100px){
  .container,.grid,.topbar-in,.foot-in,.compact-in,.ch-sticky .in{width:100%}
  .ch-nav,.ch-trend{width:auto;margin-left:13px;margin-right:13px}
  .grid{flex-direction:column}
  .col-8,.col-4{width:100%}
  .side{width:100%}
  .top5{overflow-x:auto;margin-right:0;padding-bottom:6px}
  .skin,.float-vid,.brk-float{display:none}
  .foot-in{flex-wrap:wrap}.foot-brand{width:100%;padding-bottom:12px}.foot-nav.w2{width:100%}.foot-nav.w1{width:50%;min-height:0!important}
  .compact{display:none}
}
@media(max-width:700px){
  .menu-cell{width:84px}.auth-cell{width:auto;padding:0 8px}
  .auth-cell .btn-fill{display:none}
  .search{width:100%;margin:0 8px;min-width:0}
  .menu-cell b{display:none}.menu-cell{width:52px}.search button{width:44px}
  .logo-row{height:84px}.logo{font-size:40px}
  .nav-main,.nav-sub{overflow-x:auto}
  .hl-banner{height:auto;padding:12px;flex-direction:column;align-items:stretch}
  .hl-banner .tag{width:auto;margin-bottom:8px;font-size:18px}
  .hl-inner{margin-left:0;height:auto;padding:10px}
  .hl-inner .th{width:90px;height:60px}
  .brk-video{height:210px}
  .brk-label{width:150px;font-size:14px}.brk-title{font-size:14px}
  .feed .ph{width:120px;height:90px}
  .feed article{gap:12px}.feed h3{font-size:16px;line-height:21px}
  .float-ad{width:100%;height:60px}
  .art h1{font-size:24px;line-height:32px}
  .detail__body{font-size:16px;line-height:26px}
  .cat-hero{grid-template-columns:1fr;margin:16px 13px 40px;padding:16px}
  .cat-hero article{width:100%;height:auto;aspect-ratio:311/415}
  .cat-hero .ph{width:100%;height:100%}
  .cat-hero h2{width:calc(100% - 20px)}
  .cat-list .ph{width:120px;height:90px}
  .cat-list h3{font-size:16px;line-height:22px}
  .ch-nav{overflow-x:auto;gap:18px;height:52px}.ch-nav a{font-size:13px;white-space:nowrap}
}

/* ---------- Tambahan hasil pengukuran lanjutan ---------- */
.vcar{position:relative;margin:24px 0 0;display:flex;gap:16px;overflow:hidden;padding-bottom:24px;border-bottom:1px solid var(--line)}
.vcar .v{width:115px;height:205px;flex:none;border-radius:4px;background:#ececec;position:relative;overflow:hidden}
.vcar .v::after{content:'d';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 54px 'Montserrat';color:#cfcfcf}
.arrow{position:absolute;top:50%;width:32px;height:32px;margin-top:-28px;border-radius:50%;background:rgba(120,120,120,.7);color:#fff;border:0;font-size:18px;display:flex;align-items:center;justify-content:center}
.arrow.l{left:-16px}.arrow.r{right:-16px}
.brk-blue{background:linear-gradient(100deg,#21409a 50%,#5699f3);padding:14px 16px 16px;color:#fff;border-radius:0 0 4px 4px}
.brk-blue h6{font:600 14px 'Montserrat';color:#f4b53f;margin-bottom:8px;border-bottom:1px dashed rgba(255,255,255,.35);padding-bottom:8px}
.brk-blue .two{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.brk-blue a{font:600 14px/18px 'Montserrat';color:#fff}
.rec-head{display:flex;justify-content:space-between;align-items:center;margin:30px 0 16px;padding-top:24px;border-top:1px solid var(--line)}
.rec-head b{font:600 18px 'Montserrat';color:var(--blue)}
.rec-head a{font:400 12px 'Montserrat'}
.rec3{display:grid;grid-template-columns:repeat(3,214px);gap:0 26px}
.rec3 .ph{width:214px;height:120px;border-radius:4px}
.rec3 .c{font:400 12px 'Helvetica',Arial;color:var(--orange);margin:12px 0 6px}
.rec3 h4{font:400 14px/19.5px 'Montserrat',Arial;margin-bottom:12px}
.rec3 .d{font:300 12px Helvetica;color:var(--grey);margin-bottom:24px}
.feed article.rev{flex-direction:row-reverse;gap:0;justify-content:space-between;border-bottom:0}
.feed article.rev .ph{width:400px;height:225px;border-radius:4px}
.feed article.rev .tx{width:280px}
.feed article{align-items:center}
.tagbox .t{display:block;font:600 16px/20.8px 'Montserrat';padding:9px 0 9px 18px;position:relative}
.tagbox .t::before{content:'#';position:absolute;left:0;color:#999;font-weight:400}
.tagbox{border-top:1px solid var(--line);padding-top:24px}
.btn-grey{display:block;width:182px;height:34px;line-height:34px;text-align:center;margin:12px auto 0;background:#f2f2f2;color:var(--orange);font:400 14px/34px 'Montserrat';border-radius:3px}
.promo{background:linear-gradient(160deg,#18367f,#2f6bd0);border-radius:10px;padding:16px;color:#fff}
.promo h3{font:italic 800 26px/1 'Montserrat';margin:6px 0 4px}
.promo p{font:italic 12px 'Montserrat';opacity:.9;margin-bottom:12px}
.promo .note{background:rgba(255,255,255,.88);color:#333;border-radius:8px;padding:10px;font:12px/17px 'Montserrat';margin-bottom:12px}
.promo .cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.promo .ph{height:84px}
.promo h5{font:700 13px/18px 'Montserrat';margin-top:6px}
.prod{background:#f3f3f3;border-radius:8px;padding:12px}
.prod .top{background:#fff;border-radius:4px;padding:10px;display:flex;justify-content:space-between;align-items:center;font:12px/17px 'Montserrat';margin-bottom:12px}
.prod .top b{background:#000;color:#fff;font-size:12px;padding:6px 12px;border-radius:3px}
.prod .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.prod .ph{height:84px;border-radius:3px}
.prod .c{font:600 12px Montserrat;color:#f0a02d;margin-top:6px}
.prod h4{font:400 14px/20px Montserrat;margin-top:3px}
.comm li{display:flex;gap:12px;padding:10px 0;align-items:flex-start}
.comm .n{width:44px;text-align:center;flex:none;font:700 22px/1 'Montserrat';color:#000}
.comm .n small{display:block;font:400 10px 'Montserrat';color:#666;margin-top:3px}
.comm a{font:500 15px/20px 'Montserrat';color:#000}
@media(max-width:1100px){.rec3{grid-template-columns:repeat(2,1fr)}.rec3 .ph{width:100%}.feed article.rev .ph{width:100%}.feed article.rev{flex-direction:column}.feed article.rev .tx{width:100%}.vcar{overflow-x:auto}}

/* ---------- Sidebar kategori, isi artikel, slider, kotak Pilihan Redaksi, video ---------- */
.trend-box{background:#fce7cc;padding:16px 12px 24px}
.trend-box h4{font:500 24px/32px 'Poppins',Arial;color:#1e1e1e;margin-bottom:36px}
.trend-box li{gap:10px;margin-bottom:24px}
.trend-box li:last-child{margin-bottom:0}
.trend-box .th em{left:-14px;top:-14px;width:28px;height:28px;line-height:28px;text-align:center;padding:0;background:#f36b32;font:700 16px/28px 'Poppins'}
.trend-box a{font:400 16px/24px 'Poppins',Arial;color:#000}
.btn-more{display:block;width:144px;height:46px;margin:48px auto 0;border:1px solid #000;background:none;font:500 14px/44px 'Poppins',Arial;text-transform:uppercase;text-align:center;color:#000}
.rek-list h4{font:500 24px/36px 'Poppins',Arial;text-transform:uppercase;color:#1e1e1e;display:inline-block;border-bottom:3px solid var(--orange);margin-bottom:20px}
.rek-list li{display:flex;gap:9px;height:84px;margin-bottom:24px;padding-top:2px}
.rek-list .ph{width:80px;height:80px;flex:none}
.rek-list a{font:400 18px/28px 'Poppins',Arial;color:#000;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ad-c{margin-left:auto;margin-right:auto}

/* isi artikel */
.detail__body p{margin-bottom:20px}
.detail__body a{color:#ed2c92}
.detail__body .bj{background:#fce9ff;padding:10px 20px;margin:0 0 20px;font:600 18px/24px 'Poppins',Arial}
.detail__body .bj b{display:block;color:#ed2c92;font-weight:700}
.detail__body .bj a{color:#6d51a1;font-weight:600}
.detail__body .au{font:700 18px/28px Helvetica,Arial;margin:0 0 14px}
.hero{max-height:none;aspect-ratio:694/925}
.cap{font:400 12px/16px 'Poppins',Arial;color:#000;margin:8px 0 20px}
.act2{margin:0 0 12px;border-top:1px solid #ddd;border-bottom:1px solid #ddd}
.tags-t{font:500 18px/28px 'Poppins',Arial;color:#1e1e1e;margin:28px 0 8px;padding-top:24px;border-top:1px solid #ddd}
.tags{margin:0 0 20px;gap:10px}
.tags a{background:#a02094;color:#e8e8e8;border:0;border-radius:0;padding:4px 10px;font:400 14px/24px 'Poppins',Arial}
.rel-head{display:flex;justify-content:space-between;align-items:center;margin:40px 0 20px}
.rel-head b{font:500 18px/28px 'Poppins',Arial;color:#1e1e1e}
.btn-or{background:#f36b32;color:#fff;font:500 14px/20px 'Poppins',Arial;text-transform:uppercase;padding:6px 16px}
.rel3{display:grid;grid-template-columns:repeat(3,215px);gap:24px}
.rel3 .ph{width:215px;height:120px}
.rel3 .ch{font:400 12px/16px 'Poppins',Arial;color:#6d51a1;margin:8px 0 2px}
.rel3 h4{font:400 14px/20px 'Poppins',Arial;color:#222}
.mini2{display:grid;grid-template-columns:333px 333px;gap:10px 28px;margin-top:24px;padding-bottom:24px;border-bottom:1px solid #ddd}
.mini2 article{display:flex;gap:14px;height:100px}
.mini2 .ph{width:100px;height:100px;flex:none}
.mini2 .c{font:400 12px/16px 'Poppins',Arial;color:#c0399a;margin-bottom:4px}
.mini2 h4{font:400 14px/20px 'Poppins',Arial;color:#222}
.bosan{margin:32px 0 0;border:3px solid #ed2c92;background:#f3eefc;text-align:center;padding:16px 16px 20px}
.bosan b{display:block;font:500 20px/24px 'Poppins',Arial;color:#ff8856}
.bosan small{font:400 12px/20px 'Poppins',Arial;color:#21409a}
.cards2{display:grid;grid-template-columns:335px 335px;gap:24px;margin-top:20px;padding-bottom:20px;border-bottom:1px solid #ddd}
.cards2 .ph{width:335px;height:188px}
.cards2 h4{font:400 16px/24px 'Poppins',Arial;color:#222;margin-top:12px}
.komen{margin-top:48px}
.komen b{font:700 14px/20px 'Poppins',Arial;display:block;margin-bottom:14px}
.komen .box-in{border:1px solid #ddd;border-radius:6px;height:56px;display:flex;align-items:center;gap:12px;padding:0 12px;font:400 14px 'Poppins',Arial;color:#888}
.komen .av{width:24px;height:24px;border-radius:50%;background:#c8c8c8}
.relcard{background:linear-gradient(#f6e8fb,#e9d6f2);padding:12px 12px 24px;margin-top:24px;text-align:left}
.relcard .ph{width:100%;height:250px}
.relcard h5{font:400 18px/28px 'Poppins',Arial;color:#222;margin:14px 0 12px}
.dots{display:flex;gap:8px;justify-content:center;margin-bottom:16px}
.dots i{width:12px;height:12px;border-radius:50%;background:#d9c2e3}
.dots i:first-child{background:#9c2a9a}

/* Kotak Pilihan Redaksi 334x330: deskripsi 310x78, kartu 149x150 */
.promo{padding:0;height:330px;position:relative;overflow:hidden}
.promo .hd{padding:12px 12px 0;height:40px}
.promo h3{font:italic 800 18px/1 'Montserrat';margin:0;display:inline}
.promo .note{margin:0 12px;height:78px;padding:8px 12px;font:400 11px/15.4px 'Montserrat',Arial;display:flex;align-items:center;gap:8px}
.promo .note a{flex:none;width:34px;height:30px;background:#2f6bd0;color:#fff;border-radius:4px;display:flex;align-items:center;justify-content:center;font-weight:600}
.slider{display:flex;gap:12px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}
.slider::-webkit-scrollbar{display:none}
.promo .slider{margin:16px 12px 0;height:150px}
.promo .slider>div{flex:none;width:149px;height:150px}
.promo .ph{height:84px}
.promo h5{font:600 12px/18px 'Montserrat',Arial;margin-top:6px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sl-wrap{position:relative}
.sl-btn{position:absolute;top:36%;width:28px;height:28px;border-radius:50%;border:0;background:rgba(80,80,80,.7);color:#fff;font-size:16px;line-height:1;z-index:3}
.sl-btn.l{left:-6px}.sl-btn.r{right:-6px}
.prod .slider{gap:10px}
.prod .slider>div{flex:none;width:150px}
.prod .ph{height:84px}
/* Video Terpopuler */
.vid3 .ph::before{content:'▶ 05:13';position:absolute;top:6px;right:6px;z-index:2;background:rgba(0,0,0,.6);color:#fff;font:600 11px 'Montserrat';padding:3px 7px;border-radius:3px}
@media(max-width:1100px){.rel3{grid-template-columns:repeat(2,minmax(0,1fr))}.rel3 .ph{width:100%!important}.mini2,.cards2{grid-template-columns:minmax(0,1fr)}.cards2 .ph{width:100%!important}.relcard .ph{width:100%!important}}

/* koreksi hasil ukur: kotak Trending 334x710, thumbnail di x864 (padding 14), judul tanpa border (garis lewat box-shadow) */
.trend-box{padding:16px 12px 36px}
.trend-box h4{border-bottom:0;padding-bottom:0;box-shadow:0 3px 0 var(--orange)}
.trend-box ul{padding:0 14px}
.rek-list h4{border-bottom:0;box-shadow:0 3px 0 var(--orange);margin-bottom:20px;line-height:36px}
.cards2 h4{margin-top:10px}