/*
Theme Name: Harie News
Theme URI: https://harie.id
Author: Harie.id
Description: Theme berita portal ala Harie.id — header hitam/merah, slider berita otomatis, list Berita Terkini, sidebar Berita Terpopuler, dan halaman single post lengkap dengan berita terkait. Warna & slider berjalan otomatis tanpa perlu diatur manual. Responsif penuh untuk mobile.
Version: 1.3.8
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: harie-news
*/

/* =========================================================
   0. VARIABEL WARNA (OTOMATIS DIPAKAI DI SELURUH THEME)
   ========================================================= */
:root{
  --c-red: #e01b24;
  --c-red-dark: #b3131b;
  --c-black: #0e0e0e;
  --c-black-2: #1a1a1a;
  --c-text: #222222;
  --c-muted: #6b6b6b;
  --c-border: #e7e7e7;
  --c-bg: #f6f6f6;
  --c-white: #ffffff;
  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wrap: 1200px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--font-base); color:var(--c-text);
  background:var(--c-bg); font-size:15px; line-height:1.6;
}
img{max-width:100%; height:auto; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none; margin:0; padding:0;}
.container{max-width:var(--wrap); margin:0 auto; padding:0 16px;}
.screen-reader-text{position:absolute; left:-9999px;}

/* =========================================================
   1. TOP AD STRIP
   ========================================================= */
.hn-adstrip{background:#efefef; text-align:center; font-size:11px; letter-spacing:2px; color:#999; padding:6px 0;}

/* =========================================================
   2. HEADER (STICKY)
   ========================================================= */
.hn-site-header{position:sticky; top:0; z-index:300; box-shadow:0 2px 10px rgba(0,0,0,.12);}
.hn-site-header.hn-no-sticky{position:static; box-shadow:none;}
.hn-header-main{background:var(--c-header-bg, var(--c-black)); padding:14px 0;}
.hn-header-main .container{display:flex; align-items:center; justify-content:space-between;}
.hn-burger{background:none; border:0; color:#fff; font-size:22px; cursor:pointer; display:flex; align-items:center; gap:8px;}
.hn-logo{display:flex; flex-direction:column; align-items:center; text-align:center;}
.hn-logo .hn-logo-text{font-size:28px; font-weight:800; color:#fff; letter-spacing:.5px;}
.hn-logo .hn-logo-text span{color:var(--c-red);}
.hn-logo .hn-tagline{font-size:10px; letter-spacing:3px; color:#bdbdbd; text-transform:uppercase; margin-top:2px;}
.hn-search-toggle{background:none; border:0; color:#fff; font-size:20px; cursor:pointer;}

.hn-navbar{background:var(--c-navbar-bg, var(--c-red)); position:sticky; top:var(--header-h, 68px); z-index:290;}
.hn-navbar.hn-no-sticky{position:static;}
.hn-navbar .container{display:flex;}
.hn-navmenu{display:flex; flex-wrap:wrap;}
.hn-navmenu li a{display:block; padding:12px 16px; color:#fff; font-size:12.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;}
.hn-navmenu li a:hover, .hn-navmenu li.current-menu-item a{background:rgba(0,0,0,.18);}

.hn-search-box{display:none; background:#fff; border-bottom:1px solid var(--c-border);}
.hn-search-box.active{display:block;}
.hn-search-box form{display:flex; padding:10px 0;}
.hn-search-box input[type=search]{flex:1; border:1px solid var(--c-border); padding:10px 12px; font-size:14px;}
.hn-search-box button{background:var(--c-red); color:#fff; border:0; padding:0 18px; font-weight:700; cursor:pointer;}

/* Mobile off-canvas menu */
.hn-mobilenav{position:fixed; top:0; left:-300px; width:280px; height:100%; background:var(--c-black); z-index:999; transition:left .25s ease; overflow-y:auto; padding-top:16px;}
.hn-mobilenav.active{left:0;}
.hn-mobilenav .hn-close{color:#fff; background:none; border:0; font-size:22px; padding:8px 18px; cursor:pointer;}
.hn-mobilenav ul li a{display:block; padding:13px 20px; color:#eee; font-size:14px; font-weight:700; text-transform:uppercase; border-bottom:1px solid rgba(255,255,255,.08);}
.hn-mobilenav ul li a:hover{color:var(--c-red);}
.hn-overlay{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:998; display:none;}
.hn-overlay.active{display:block;}

/* =========================================================
   3. LAYOUT
   ========================================================= */
.hn-main{padding:24px 0 40px;}
.hn-layout{display:flex; gap:28px; align-items:flex-start;}
.hn-content{flex:1; min-width:0;}
.hn-sidebar{width:320px; flex-shrink:0;}
.hn-content-full{max-width:100%;}

/* =========================================================
   4B. GRID CARD (Rubrik grid & Halaman Kategori grid)
   ========================================================= */
.hn-grid-wrap{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-bottom:10px;}
.hn-grid-wrap.cols-3{grid-template-columns:repeat(3,1fr);}
.hn-grid-item{background:#fff; border:1px solid var(--c-border); border-radius:3px; overflow:hidden;}
.hn-grid-thumb{display:block; background:#ddd;}
.hn-grid-thumb img{width:100%; height:150px; object-fit:cover;}
.hn-grid-body{padding:12px 14px;}
.hn-grid-body h3{font-size:15px; line-height:1.35; margin:0 0 6px;}
.hn-grid-body h3 a:hover{color:var(--c-red);}

/* =========================================================
   4C. SLOT IKLAN
   ========================================================= */
.hn-ad-slot{margin:22px 0; text-align:center; position:relative;}
.hn-ad-slot img{width:100%; border-radius:2px; margin:0 auto;}
.hn-ad-label{display:block; font-size:9.5px; letter-spacing:2px; color:#aaa; text-transform:uppercase; margin-bottom:6px;}
.hn-ad-slot.hn-ad-inline{background:#fafafa; padding:14px; border:1px dashed var(--c-border);}

.hn-section-title{display:flex; align-items:center; background:var(--c-red); color:#fff; font-weight:800; font-size:13px; letter-spacing:1px; text-transform:uppercase; padding:9px 14px; margin:0 0 16px;}
.hn-section-title span{background:var(--c-black); padding:0 6px; margin-right:6px;}

/* =========================================================
   4. SLIDER (AUTOMATIC)
   ========================================================= */
.hn-slider{position:relative; overflow:hidden; border-radius:2px; margin-bottom:26px; background:#000;}
.hn-slider-track{display:flex; transition:transform .6s ease;}
.hn-slide{position:relative; min-width:100%;}
.hn-slide img{width:100%; height:420px; object-fit:cover; opacity:.92;}
.hn-slide .hn-slide-cap{position:absolute; left:0; right:0; bottom:0; background:linear-gradient(transparent, rgba(0,0,0,.85)); padding:60px 22px 18px;}
.hn-slide .hn-slide-cap h2{color:#fff; font-size:22px; line-height:1.3; margin:0;}
.hn-slide .hn-slide-cap h2 a{color:#fff;}
.hn-slider-dots{position:absolute; bottom:14px; right:18px; display:flex; gap:6px;}
.hn-slider-dots button{width:9px; height:9px; border-radius:50%; border:0; background:rgba(255,255,255,.5); cursor:pointer; padding:0;}
.hn-slider-dots button.active{background:var(--c-red);}

/* =========================================================
   5. BERITA TERKINI LIST
   ========================================================= */
.hn-list-item{display:flex; align-items:stretch; gap:14px; padding:16px 0; border-bottom:1px solid var(--c-border);}
.hn-list-item:first-child{padding-top:0;}
.hn-list-thumb{width:150px; flex-shrink:0; border-radius:10px; overflow:hidden; background:#ddd; align-self:stretch;}
.hn-list-thumb img{width:100%; height:100%; min-height:112px; object-fit:cover;}
.hn-mini-thumb{width:56px; height:56px; object-fit:cover; border-radius:2px; flex-shrink:0;}
.hn-list-body h3{font-size:16.5px; line-height:1.35; margin:0 0 6px;}
.hn-list-body h3 a:hover{color:var(--c-red);}
.hn-meta{font-size:11.5px; color:var(--c-muted); text-transform:uppercase; letter-spacing:.4px; margin-bottom:6px;}
.hn-meta .hn-author{color:var(--c-red); font-weight:700;}
.hn-excerpt{font-size:13.5px; color:#555; margin:0;}

/* =========================================================
   6. YOUTUBE / VIDEO BLOCK
   ========================================================= */
.hn-video-block{background:var(--c-black); color:#fff; border-radius:3px; padding:26px 24px; margin:30px 0;}
.hn-video-block .hn-video-inner{display:flex; align-items:center; gap:8px; color:#ff3b3b; font-weight:800; font-size:14px; margin-bottom:14px;}
.hn-video-block h3{margin:0 0 8px; font-size:20px;}
.hn-video-block p{color:#b9b9b9; font-size:13px; margin:0;}
.hn-video-block .hn-video-embed{position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:3px;}
.hn-video-block .hn-video-embed iframe{position:absolute; top:0; left:0; width:100%; height:100%; border:0;}

/* ---- Carousel video YouTube (geser-geser, auto-update dari channel) ---- */
.hn-yt-carousel-wrap{position:relative; margin-top:6px;}
.hn-yt-carousel{display:flex; gap:14px; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x mandatory; padding-bottom:6px; -webkit-overflow-scrolling:touch;}
.hn-yt-carousel::-webkit-scrollbar{height:5px;}
.hn-yt-carousel::-webkit-scrollbar-thumb{background:#444; border-radius:4px;}
.hn-yt-card{flex:0 0 220px; scroll-snap-align:start; color:#fff;}
.hn-yt-thumb{position:relative; border-radius:3px; overflow:hidden; background:#000;}
.hn-yt-thumb img{width:100%; height:124px; object-fit:cover; opacity:.9;}
.hn-yt-play{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:38px; height:38px; background:rgba(224,27,36,.9); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; color:#fff;}
.hn-yt-title{font-size:12.5px; margin-top:8px; line-height:1.35;}
.hn-yt-nav{position:absolute; top:56px; width:32px; height:32px; border-radius:50%; border:0; background:rgba(255,255,255,.15); color:#fff; cursor:pointer; z-index:2; font-size:13px;}
.hn-yt-nav.prev{left:-6px;}
.hn-yt-nav.next{right:-6px;}
.hn-yt-nav:hover{background:var(--c-red);}

/* =========================================================
   7. SIDEBAR: TERPOPULER
   ========================================================= */
.hn-widget{background:#fff; border:1px solid var(--c-border); margin-bottom:24px;}
.hn-widget .hn-section-title{margin:0;}
.hn-popular{padding:6px 14px 4px;}
.hn-popular-item{display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--c-border); align-items:flex-start;}
.hn-popular-item:last-child{border-bottom:0;}
.hn-popular-item.rank-1{flex-direction:column;}
.hn-popular-item.rank-1 img{width:100%; height:170px; object-fit:cover; border-radius:8px; margin-bottom:10px;}
.hn-popular-item h4{font-size:13.5px; margin:0; line-height:1.4;}
.hn-popular-item h4 a:hover{color:var(--c-red);}
.hn-shares{font-size:11px; color:var(--c-muted);}

/* =========================================================
   8. SINGLE POST
   ========================================================= */
.hn-breadcrumb{font-size:12px; color:var(--c-muted); margin-bottom:14px;}
.hn-breadcrumb a:hover{color:var(--c-red);}
.hn-single-title{font-size:28px; line-height:1.4; font-weight:800; letter-spacing:-0.2px; color:#161616; margin:0 0 14px;}
.hn-single-thumb{margin-bottom:0; border-radius:3px; overflow:hidden;}
.hn-single-thumb img{width:100%; height:auto;}
.hn-caption{background:#000; color:#fff; font-size:12px; font-style:normal; margin:0; padding:8px 14px;}

.hn-single-meta{display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--c-border); padding:16px 0 18px; margin-bottom:20px;}
.hn-author-avatar{border-radius:50%; width:44px; height:44px; flex-shrink:0;}
.hn-single-meta .hn-author{color:var(--c-red); font-weight:800; font-size:13.5px; text-transform:uppercase;}
.hn-single-meta .hn-post-date{font-size:12px; color:var(--c-muted); margin-top:2px;}

.hn-share{display:flex; gap:8px; margin:20px 0;}
.hn-share a{flex:1; text-align:center; padding:11px 10px; border-radius:2px; font-size:13px; font-weight:700; color:#fff;}
.hn-share .sh-wa{background:#25D366;}
.hn-share .sh-fb{background:#1877F2;}
.hn-share .sh-tw{background:#111;}
.hn-share .sh-copy{background:#888; flex:0 0 44px;}

.hn-baca-juga{background:#fafafa; border-left:4px solid var(--c-red); padding:14px 18px; margin:22px 0;}
.hn-baca-juga .lbl{color:var(--c-red); font-weight:800; font-size:12px; letter-spacing:1px; margin-bottom:8px; text-transform:uppercase;}
.hn-baca-juga ul li{padding:4px 0; font-size:13.5px; font-weight:700;}
.hn-baca-juga ul li a:hover{color:var(--c-red);}

.hn-article-content{font-size:16px; line-height:1.85; color:#222;}
.hn-article-content p{margin:0 0 18px;}
.hn-article-content h2, .hn-article-content h3{margin:26px 0 12px;}
.hn-article-content blockquote{border-left:3px solid var(--c-red); margin:20px 0; padding:6px 18px; color:#555; font-style:italic;}
.hn-article-content img{border-radius:3px; margin:10px 0;}

.hn-tags{margin:22px 0; display:flex; gap:8px; flex-wrap:wrap;}
.hn-tags a{background:#eee; padding:6px 12px; font-size:12px; border-radius:2px;}
.hn-tags a:hover{background:var(--c-red); color:#fff;}

.hn-related-title{border-bottom:2px solid var(--c-black); padding-bottom:10px; margin:30px 0 16px; font-weight:800; font-size:16px; text-transform:uppercase; letter-spacing:.5px;}
.hn-related-title span{color:var(--c-red);}
.hn-related-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.hn-related-item{background:#fff; border:1px solid var(--c-border); border-radius:10px; overflow:hidden;}
.hn-related-thumb{display:block; background:#ddd;}
.hn-related-thumb img{width:100%; height:120px; object-fit:cover;}
.hn-related-body{padding:10px 12px;}
.hn-related-item h4{font-size:13.5px; line-height:1.35; margin:0 0 5px;}
.hn-related-item h4 a:hover{color:var(--c-red);}

/* =========================================================
   8B. KOMENTAR PEMBACA
   ========================================================= */
.hn-comments{margin-top:34px; border-top:2px solid var(--c-black); padding-top:20px;}
.hn-comments .hn-related-title{border-bottom:0; margin:0 0 16px; padding-bottom:0;}
.hn-comments .hn-related-title span{color:var(--c-red);}
.hn-comment-empty, .hn-comment-closed{color:var(--c-muted); font-size:13.5px; margin-bottom:16px;}
.hn-comment-list{list-style:none; margin:0 0 10px; padding:0;}
.hn-comment-list .comment{display:flex; gap:12px; padding:16px 0; border-bottom:1px solid var(--c-border);}
.hn-comment-list .comment .avatar{border-radius:50%; flex-shrink:0;}
.hn-comment-list .comment-author .fn{font-weight:800; font-size:13.5px; font-style:normal;}
.hn-comment-list .comment-metadata{font-size:11.5px; color:var(--c-muted); margin-bottom:6px;}
.hn-comment-list .comment-content p{font-size:13.5px; line-height:1.65; margin:0 0 8px;}
.hn-comment-list .reply a{font-size:11.5px; font-weight:700; color:var(--c-red);}
.hn-comment-list ol.children{list-style:none; margin:0 0 0 30px; padding:0; border-left:2px solid var(--c-border); padding-left:14px;}
.comment-respond{background:#fafafa; border:1px solid var(--c-border); padding:20px; margin-top:14px; border-radius:10px;}
.comment-respond .comment-reply-title{font-size:15px; font-weight:800; margin:0 0 6px;}
.comment-notes{font-size:12px; color:var(--c-muted); margin:0 0 14px;}
.comment-form p{margin:0 0 12px;}
.comment-form label{display:block; font-size:12.5px; font-weight:700; margin-bottom:5px;}
.comment-form input[type=text], .comment-form input[type=email], .comment-form input[type=url], .comment-form textarea{width:100%; border:1px solid var(--c-border); padding:10px 12px; font-size:13.5px; font-family:inherit; border-radius:2px;}
.comment-form textarea{resize:vertical;}
.hn-comment-submit{background:var(--c-red); color:#fff; border:0; padding:11px 26px; font-weight:700; font-size:13.5px; border-radius:2px; cursor:pointer;}
.hn-comment-submit:hover{background:var(--c-red-dark);}
.comment-form-cookies-consent{display:flex; align-items:center; gap:8px; font-size:12px;}
.comment-form-cookies-consent input{width:auto;}

/* =========================================================
   9. FOOTER
   ========================================================= */
.hn-footer{background:var(--c-black-2); color:#d8d8d8; margin-top:44px; font-size:13px; border-top:3px solid var(--c-red);}
.hn-footer-links{border-bottom:1px solid #2f2f2f; padding:20px 0;}
.hn-footer-links .container{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
.hn-footer-links ul{display:flex; gap:22px; flex-wrap:wrap;}
.hn-footer-links a{font-weight:700; letter-spacing:.3px; color:#e9e9e9;}
.hn-footer-links a:hover{color:var(--c-red);}
.hn-footer-links .container > div{font-weight:800; letter-spacing:.4px; color:#fff; font-size:12.5px; text-transform:uppercase;}
.hn-footer-bottom{padding:22px 0; text-align:center;}
.hn-footer-bottom .container > div:first-child{font-weight:700; font-size:13px; color:#fff; letter-spacing:.3px;}
.hn-footer-bottom .hn-social{display:flex; justify-content:center; gap:14px; margin-top:14px;}
.hn-footer-bottom .hn-social a{width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#fff;}
.hn-footer-bottom .hn-social a:hover{background:var(--c-red);}

.hn-backtotop{position:fixed; right:18px; bottom:18px; width:42px; height:42px; background:var(--c-red); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; text-decoration:none; box-shadow:0 3px 10px rgba(0,0,0,.3); opacity:0; pointer-events:none; transition:opacity .25s;}
.hn-backtotop.show{opacity:1; pointer-events:auto;}

/* =========================================================
   10. RESPONSIVE / MOBILE
   ========================================================= */
@media (max-width: 960px){
  .hn-layout{flex-direction:column;}
  .hn-sidebar{width:100%;}
}

@media (max-width: 700px){
  /* Header lengket, tapi menu navbar TIDAK ikut lengket dan tampil horizontal geser */
  .hn-navbar{position:static !important; top:auto !important;}
  .hn-navbar .container{padding:0;}
  .hn-navmenu{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:0 12px;}
  .hn-navmenu::-webkit-scrollbar{display:none;}
  .hn-navmenu li{flex-shrink:0;}
  .hn-navmenu li a{padding:9px 11px; font-size:10.5px !important;}

  /* Logo diperkecil agar terlihat profesional */
  .hn-header-main{padding:9px 0;}
  .hn-logo .hn-logo-text{font-size:17px;}
  .hn-logo .hn-tagline{font-size:7.5px; letter-spacing:1.5px;}

  .hn-slide img{height:230px;}
  .hn-slide .hn-slide-cap h2{font-size:16px; padding:0;}
  .hn-slide .hn-slide-cap{padding:40px 14px 14px;}

  /* Judul lebih kecil, jarak baris dilonggarkan */
  .hn-single-title{font-size:19px !important; line-height:1.5 !important; letter-spacing:0 !important;}

  .hn-list-thumb{width:110px;}
  .hn-list-thumb img{min-height:96px;}
  .hn-list-body h3{font-size:14.5px;}
  .hn-excerpt{display:none;}

  .hn-related-thumb img{height:92px;}
  .hn-related-body{padding:8px 10px;}
  .hn-related-item h4{font-size:12.5px;}

  .hn-mini-thumb{width:64px; height:64px;}
  .hn-popular-item.rank-1 img{height:150px;}
  .hn-footer-links .container{flex-direction:column; align-items:flex-start;}
  .hn-video-block{padding:18px 16px;}
  .hn-share a{font-size:11.5px; padding:10px 4px;}
  .hn-grid-wrap, .hn-grid-wrap.cols-3{grid-template-columns:1fr 1fr; gap:12px;}
  .hn-grid-thumb img{height:100px;}
  .hn-grid-body{padding:8px 10px;}
  .hn-grid-body h3{font-size:12.5px;}
  .hn-yt-card{flex:0 0 160px;}
  .hn-yt-thumb img{height:92px;}
  .hn-yt-nav{display:none;}
}

/* =====================================================================
   HARIE NEWS 1.3 — perbaikan tampilan (menimpa aturan lama di atas)
   ===================================================================== */
:root{--radius:8px;--logo-h:46px;--logo-h-m:30px;--title-lh:1.15;--title-size-m:26px;--title-lh-m:1.2;--hn-adminbar:0px;}
body.admin-bar{--hn-adminbar:32px;}
@media screen and (max-width:782px){body.admin-bar{--hn-adminbar:46px;}}
@media screen and (max-width:600px){body.admin-bar{--hn-adminbar:0px;}}

/* Header: logo di tengah, ikon SVG */
.hn-site-header{top:var(--hn-adminbar);}
.hn-header-inner{display:grid!important;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;}
.hn-burger,.hn-search-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;background:transparent;color:#fff;cursor:pointer;border-radius:50%;font-size:0;}
.hn-burger:hover,.hn-search-toggle:hover{background:rgba(255,255,255,.08);}
.hn-burger svg,.hn-search-toggle svg{width:22px;height:22px;}
.hn-search-toggle{justify-self:end;}
.hn-logo{justify-self:center;display:inline-flex;flex-direction:column;align-items:center;line-height:1;}
.hn-logo-left .hn-logo{justify-self:start;align-items:flex-start;}
.hn-logo-img{display:block;height:var(--logo-h)!important;width:auto!important;max-width:320px;object-fit:contain;}
.hn-logo-text span{color:var(--c-red,#e01b24);}
.hn-mobilenav-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.1);}
.hn-mobilenav-title{color:#fff;font-weight:800;letter-spacing:1px;text-transform:uppercase;font-size:13px;}
.hn-close{position:static!important;width:36px;height:36px;border:0;background:transparent;color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.hn-close svg{width:22px;height:22px;}
.hn-navmenu .sub-menu{display:none;position:absolute;top:100%;left:0;min-width:210px;background:#fff;box-shadow:0 10px 24px rgba(0,0,0,.14);padding:6px 0;z-index:20;list-style:none;margin:0;}
.hn-navmenu li{position:relative;}
.hn-navmenu li:hover>.sub-menu{display:block;}
.hn-navmenu .sub-menu a{display:block;padding:9px 16px;color:#222!important;font-size:13px;text-transform:none;background:none!important;}

/* Judul berita rapi */
.hn-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 12px;font-size:11.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#777;}
.hn-breadcrumb a{color:#777;} .hn-breadcrumb .hn-bc-cat{color:var(--c-red,#e01b24);} .hn-bc-sep{color:#bbb;}
.hn-single-title{font-weight:800!important;line-height:var(--title-lh)!important;letter-spacing:-.02em;color:#111;margin:0 0 16px!important;text-wrap:balance;overflow-wrap:break-word;}

/* Penulis + foto di bawah judul */
.hn-single-meta{display:flex!important;align-items:center;gap:12px;padding:0 0 16px!important;margin:0 0 18px!important;border-bottom:1px solid #e9e9e9;border-top:0!important;}
.hn-author-photo-link{display:inline-flex;flex:0 0 auto;}
.hn-author-photo{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;overflow:hidden;background:var(--c-red,#e01b24);box-shadow:0 0 0 2px #fff,0 0 0 3px #e3e3e3;}
.hn-author-photo img{width:100%!important;height:100%!important;object-fit:cover;border-radius:50%;margin:0;}
.hn-initials{color:#fff;font-weight:800;font-size:15px;letter-spacing:.5px;}
.hn-author-info{display:flex;flex-direction:column;gap:3px;min-width:0;}
.hn-author-name{font-size:14px;font-weight:800;color:var(--c-author-color,#e01b24);text-transform:uppercase;letter-spacing:.4px;line-height:1.2;}
.hn-post-date{font-size:12.5px;color:#777;line-height:1.3;}

/* Foto utama + caption tegak */
.hn-single-figure{margin:0 0 22px;border-radius:var(--radius);overflow:hidden;background:#000;}
.hn-single-figure img{width:100%;height:auto;display:block;}
.hn-caption,.hn-caption *,.hn-article-content figcaption,.hn-article-content .wp-caption-text,.hn-article-content .wp-element-caption{font-style:normal!important;}
.hn-caption{margin:0;padding:9px 14px;font-size:12.5px;line-height:1.5;}
.hn-article-content ul{list-style:disc;padding-left:1.4em;} .hn-article-content ol{list-style:decimal;padding-left:1.4em;}

/* Baca Juga di tengah berita */
.hn-baca-juga{clear:both;margin:26px 0;padding:14px 18px;background:#f8f8f8;border-left:4px solid var(--c-red,#e01b24);border-radius:0 var(--radius) var(--radius) 0;}
.hn-baca-lbl{font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--c-red,#e01b24);margin:0 0 4px;line-height:1.3;}
.hn-article-content .hn-baca-juga ul{list-style:none;padding:0;margin:0;}
.hn-article-content .hn-baca-juga li{position:relative;margin:0;padding:8px 0 8px 16px;border-top:1px solid #e6e6e6;font-size:15px;line-height:1.45;font-weight:700;}
.hn-article-content .hn-baca-juga li:first-child{border-top:0;}
.hn-article-content .hn-baca-juga li::before{content:"";position:absolute;left:0;top:15px;width:7px;height:7px;border-radius:50%;background:var(--c-red,#e01b24);}
.hn-article-content .hn-baca-juga a{color:#111;text-decoration:none;}

/* Tag & tombol bagikan */
.hn-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:26px 0 18px;}
.hn-tags-label{font-size:12px;font-weight:800;text-transform:uppercase;}
.hn-tags a{padding:6px 12px;background:#f1f1f1;border-radius:999px;font-size:12.5px;font-weight:600;color:#333;}
.hn-share{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 8px;}
.hn-share a{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 8px;border-radius:6px;color:#fff!important;font-size:13px;font-weight:700;}
.hn-share svg{width:17px;height:17px;flex:0 0 auto;}
.hn-share .sh-wa{background:#25D366;} .hn-share .sh-fb{background:#1877F2;} .hn-share .sh-tw{background:#111;}

/* Judul blok (Komentar, Berita Terkait) */
.hn-block-title{display:flex;align-items:center;margin:0 0 14px;padding:0 0 10px;border-bottom:2px solid #111;font-size:16px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:#111;}
.hn-block-title span{color:var(--c-red,#e01b24);}

/* Komentar rapi */
.hn-comments{margin:34px 0 10px;}
.hn-comment-list,.hn-comment-list .children{list-style:none;margin:0;padding:0;}
.hn-comment-list .children{margin-left:56px;}
.hn-comment-card{display:flex;gap:12px;padding:16px 0;border-bottom:1px solid #eee;}
.hn-comment-avatar{flex:0 0 44px;width:44px;height:44px;border-radius:50%;overflow:hidden;background:#9a9a9a;display:flex;align-items:center;justify-content:center;}
.hn-comment-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.hn-comment-main{flex:1;min-width:0;}
.hn-comment-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-bottom:6px;}
.hn-comment-author{font-weight:800;font-size:14px;color:#111;}
.hn-comment-badge{background:var(--c-red,#e01b24);color:#fff;font-size:10px;font-weight:800;padding:2px 8px;border-radius:999px;text-transform:uppercase;}
.hn-comment-time{font-size:12px;color:#888;}
.hn-comment-text{font-size:14.5px;line-height:1.65;color:#2a2a2a;overflow-wrap:anywhere;}
.hn-comment-text p{margin:0 0 8px;}
.hn-comment-actions{display:flex;gap:14px;}
.hn-comment-actions a{font-size:12.5px;font-weight:700;color:var(--c-red,#e01b24);}
.hn-comment-moderation{font-size:12px;color:#8a5a00;background:#fff6dc;padding:6px 10px;border-radius:6px;margin:0 0 8px;}
.hn-comment-empty{font-size:14px;color:#777;margin:10px 0 0;}
.hn-comment-respond,.comment-respond{margin-top:18px;padding:20px;background:#fafafa;border:1px solid #e9e9e9;border-radius:var(--radius);}
.comment-reply-title{display:flex;justify-content:space-between;align-items:center;font-size:16px;font-weight:800;margin:0 0 6px;}
.comment-reply-title small a{font-size:12px;color:var(--c-red,#e01b24);}
.comment-notes,.logged-in-as{font-size:12.5px;color:#777;margin:0 0 14px;}
.comment-form p{margin:0 0 14px;}
.comment-form label{display:block;font-size:12.5px;font-weight:700;margin:0 0 6px;color:#222;}
.comment-form input[type=text],.comment-form input[type=email],.comment-form textarea{width:100%;border:1px solid #d9d9d9;background:#fff;border-radius:6px;padding:11px 12px;font-size:14px;font-family:inherit;}
.comment-form input:focus,.comment-form textarea:focus{outline:none;border-color:var(--c-red,#e01b24);box-shadow:0 0 0 3px rgba(224,27,36,.12);}
.hn-comment-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;}
.comment-form-cookies-consent{display:flex;gap:8px;align-items:flex-start;}
.comment-form-cookies-consent label{font-weight:500;margin:0;}
.hn-comment-submit{background:var(--c-red,#e01b24);color:#fff;border:0;border-radius:6px;padding:12px 26px;font-size:14px;font-weight:700;cursor:pointer;}
.required{color:var(--c-red,#e01b24);}

/* Berita Terkait: 4 kartu, gambar 4:3 bersudut melengkung */
.hn-related{margin:34px 0 0;}
.hn-related-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:18px!important;}
.hn-related-item{min-width:0;background:none!important;border:0!important;}
.hn-related-thumb{position:relative;display:block;aspect-ratio:4/3;height:auto!important;border-radius:var(--radius);overflow:hidden;background:#e6e6e6;margin:0 0 9px;}
.hn-related-thumb img,.hn-related-thumb .hn-noimg,.hn-side-thumb img,.hn-side-thumb .hn-noimg,.hn-pop-thumb img,.hn-pop-thumb .hn-noimg,.hn-list-thumb img,.hn-list-thumb .hn-noimg{position:absolute;inset:0;width:100%!important;height:100%!important;min-height:0!important;object-fit:cover;}
.hn-noimg{display:block;background:linear-gradient(135deg,#e2e2e2,#cfcfcf);}
.hn-related-item h3{font-size:14px;line-height:1.4;font-weight:700;margin:0 0 5px;}
.hn-related-date,.hn-side-date,.hn-pop-date{display:block;font-size:11.5px;color:#888;}

/* Berita Terkini (samping berita): foto 4:3, lebih besar, sudut melengkung */
.hn-widget-body{padding:4px 16px 6px;}
.hn-side-item{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid #eee;}
.hn-side-item:last-child{border-bottom:0;}
.hn-side-thumb{position:relative;flex:0 0 104px;width:104px;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:#e6e6e6;display:block;}
.hn-side-body{flex:1;min-width:0;}
.hn-side-body h4,.hn-pop-item h4{font-size:13.5px;line-height:1.4;font-weight:700;margin:0 0 5px;}

/* Berita Terkini (beranda): foto 4:3 */
.hn-list-thumb{position:relative;flex:0 0 200px!important;width:200px!important;aspect-ratio:4/3;height:auto!important;align-self:flex-start!important;border-radius:var(--radius);overflow:hidden;}

/* Terpopuler tanpa angka & jumlah pembaca */
.hn-pop-item{padding:12px 0;border-bottom:1px solid #eee;}
.hn-pop-item:last-child{border-bottom:0;}
.hn-pop-thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#e6e6e6;margin:2px 0 10px;}
.hn-pop-first h4{font-size:15.5px;line-height:1.35;}
.hn-pop-rank,.hn-views{display:none!important;}

/* Footer profesional, huruf tebal */
.hn-footer{margin-top:48px;background:#111;color:#d6d6d6;border-top:4px solid var(--c-red,#e01b24);}
.hn-footer a{color:#fff;}
.hn-footer-top{padding:30px 0 24px;}
.hn-footer-top-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.hn-footer-brand{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.hn-footer-logo .hn-logo-img{height:40px!important;}
.hn-footer-logo .hn-logo-text{font-size:24px;font-weight:800;color:#fff;}
.hn-footer-about{margin:0;padding-left:18px;border-left:1px solid #333;font-size:13px;font-weight:700;color:#c8c8c8;letter-spacing:.3px;}
.hn-social{display:flex;gap:10px;}
.hn-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:#262626;color:#fff;}
.hn-social a:hover{background:var(--c-red,#e01b24);}
.hn-social svg{width:17px;height:17px;}
.hn-footer-nav{border-top:1px solid #262626;border-bottom:1px solid #262626;padding:16px 0;}
.hn-footer-menu{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 0;list-style:none;margin:0;padding:0;}
.hn-footer-menu li{display:flex;align-items:center;}
.hn-footer-menu li+li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--c-red,#e01b24);margin:0 16px;}
.hn-footer-menu a{font-size:12.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#f1f1f1;}
.hn-footer-bottom{padding:16px 0 20px;background:transparent;}
.hn-footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.hn-copy{margin:0;font-size:12.5px;font-weight:700;color:#bdbdbd;}
.hn-copy strong{color:#fff;font-weight:800;}
.hn-company{margin:0;font-size:12.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#fff;}
.hn-backtotop{display:flex;align-items:center;justify-content:center;}
.hn-backtotop svg{width:20px;height:20px;}

@media (max-width:1024px){.hn-related-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}}

/* ============================ MOBILE ============================ */
@media (max-width:700px){
	.hn-header-main{padding:6px 0!important;}
	.hn-header-inner{grid-template-columns:40px 1fr 40px;gap:4px;}
	.hn-burger,.hn-search-toggle{width:40px;height:40px;}
	.hn-logo-img{height:var(--logo-h-m)!important;max-width:230px!important;}
	.hn-logo-text{font-size:22px!important;}
	.hn-tagline{display:none!important;}
	/* Menu merah kecil, bisa digeser, TIDAK lengket */
	.hn-navbar,.hn-navbar.hn-no-sticky{position:relative!important;top:auto!important;display:block!important;}
	.hn-navbar .container{padding:0;}
	.hn-navmenu{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 6px;}
	.hn-navmenu::-webkit-scrollbar{display:none;}
	.hn-navmenu>li{flex:0 0 auto;}
	.hn-navmenu>li>a{padding:6px 9px!important;font-size:11px!important;line-height:1.3!important;letter-spacing:.3px!important;white-space:nowrap;}
	.hn-navmenu .sub-menu{display:none!important;}
	.hn-navbar::after{content:"";position:absolute;top:0;right:0;bottom:0;width:26px;pointer-events:none;background:linear-gradient(to right,transparent,var(--c-navbar-bg,#0e0e0e));}
	/* Judul lebih kecil, baris lebih longgar */
	.hn-single-title{font-size:var(--title-size-m)!important;line-height:var(--title-lh-m)!important;letter-spacing:-.01em;margin-bottom:14px!important;}
	.hn-breadcrumb{font-size:10.5px;}
	.hn-author-photo{width:42px;height:42px;}
	.hn-author-name{font-size:13px;}
	.hn-post-date{font-size:11.5px;}
	.hn-single-figure{border-radius:6px;margin-bottom:18px;}
	.hn-caption{font-size:12px;padding:8px 12px;}
	.hn-article-content .hn-baca-juga li{font-size:14px;}
	.hn-share a{font-size:12px;padding:10px 4px;gap:6px;}
	.hn-share svg{width:15px;height:15px;}
	/* Terkait: 2 x 2 berdampingan */
	.hn-related-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px 12px!important;}
	.hn-related-item h3{font-size:13.5px;}
	/* Berita Terkini */
	.hn-side-thumb{flex-basis:112px;width:112px;}
	.hn-side-body h4,.hn-pop-item h4{font-size:14px;}
	.hn-list-thumb{flex-basis:120px!important;width:120px!important;}
	/* Komentar */
	.hn-comment-list .children{margin-left:18px;padding-left:12px;border-left:2px solid #eee;}
	.hn-comment-fields{grid-template-columns:1fr;}
	.hn-comment-respond,.comment-respond{padding:16px;}
	/* Footer */
	.hn-footer-top-inner,.hn-footer-brand{flex-direction:column;justify-content:center;text-align:center;gap:12px;}
	.hn-footer-about{padding-left:0;border-left:0;}
	.hn-social{justify-content:center;}
	.hn-footer-nav{padding:0;border-bottom:0;}
	.hn-footer-menu{display:grid;grid-template-columns:1fr 1fr;gap:0;}
	.hn-footer-menu li{justify-content:center;border-bottom:1px solid #262626;}
	.hn-footer-menu li+li::before{display:none;}
	.hn-footer-menu li:nth-child(odd){border-right:1px solid #262626;}
	.hn-footer-menu li:last-child:nth-child(odd){grid-column:1/-1;border-right:0;}
	.hn-footer-menu a{display:block;width:100%;text-align:center;padding:13px 6px;font-size:11.5px;}
	.hn-footer-bottom-inner{flex-direction:column;text-align:center;gap:6px;}
}

/* 1.3.1: isi berita lebih tebal & rapat; bagian tebal tetap menonjol */
.hn-article-content strong,.hn-article-content b{font-weight:700;}

/* 1.3.3: baris promo YouTube di bawah header */
.hn-ytstrip{background:linear-gradient(90deg,#0d0d0d 0%,#1f0b0d 50%,#0d0d0d 100%);border-bottom:1px solid #2a2a2a;}
.hn-ytstrip-link{display:flex;align-items:center;justify-content:center;gap:12px;padding:9px 14px;color:#fff!important;text-decoration:none;}
.hn-ytstrip-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:30px;height:21px;border-radius:6px;background:#ff0000;color:#fff;flex:0 0 auto;}
.hn-ytstrip-icon svg{width:22px;height:22px;margin:-1px;}
.hn-ytstrip-icon::after{content:"";position:absolute;inset:0;border-radius:6px;box-shadow:0 0 0 0 rgba(255,0,0,.55);animation:hn-ytpulse 2.2s infinite;}
@keyframes hn-ytpulse{0%{box-shadow:0 0 0 0 rgba(255,0,0,.5)}70%{box-shadow:0 0 0 9px rgba(255,0,0,0)}100%{box-shadow:0 0 0 0 rgba(255,0,0,0)}}
.hn-ytstrip-text{font-size:13.5px;font-weight:700;letter-spacing:.2px;line-height:1.3;}
.hn-ytstrip-btn{display:inline-flex;align-items:center;gap:2px;padding:4px 8px 4px 12px;border-radius:999px;background:#ff0000;font-size:11.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;flex:0 0 auto;transition:transform .2s,background .2s;}
.hn-ytstrip-btn svg{width:13px;height:13px;transition:transform .2s;}
.hn-ytstrip-link:hover .hn-ytstrip-btn{background:#e00000;transform:translateY(-1px);}
.hn-ytstrip-link:hover .hn-ytstrip-btn svg{transform:translateX(2px);}
@media (prefers-reduced-motion:reduce){.hn-ytstrip-icon::after{animation:none;}}
@media (max-width:700px){
	.hn-ytstrip-link{gap:8px;padding:8px 10px;}
	.hn-ytstrip-text{font-size:12px;}
	.hn-ytstrip-btn{padding:3px 6px 3px 9px;font-size:10.5px;}
}

/* 1.3.6: baris YouTube lengket di bawah header (dan di bawah menu merah pada desktop) */
.hn-navbar{top:calc(var(--hn-adminbar,0px) + var(--header-h,68px));}
.hn-ytstrip{position:sticky;top:calc(var(--hn-adminbar,0px) + var(--header-h,68px) + var(--nav-h,0px));z-index:280;box-shadow:0 3px 10px rgba(0,0,0,.28);}
.hn-ytstrip.hn-no-sticky{position:static;box-shadow:none;}
@media (max-width:700px){.hn-navbar{top:auto;}}

/* 1.3.7: strip iklan teks di atas header dihapus */
.hn-adstrip{display:none!important;}

/* 1.3.8: menu di bawah header memakai latar yang sama dengan header */
.hn-navbar{background:var(--c-navbar-bg,var(--c-header-bg,#0e0e0e));border-top:1px solid rgba(255,255,255,.09);}