:root{--red:#008fc4;--red2:#00b8e6;--dark:#111;--text:#202020;--muted:#777;--bg:#f5f5f5;--line:#e6e6e6}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;line-height:1.55}.container{width:min(1180px,calc(100% - 32px));margin:auto}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto;display:block}.topbar{background:#0a0a0a;color:#bbb;font-size:12px}.topbar .container{min-height:34px;display:flex;align-items:center;justify-content:space-between}.toplinks{display:flex;gap:16px}.toplinks a:hover{color:#fff}.site-header{background:#fff}.header-inner{min-height:128px;display:flex;align-items:center;justify-content:space-between}.brand img{width:min(510px,68vw);max-height:105px;object-fit:contain}.header-actions{display:flex;gap:10px}.header-actions button{border:0;background:#111;color:#fff;width:42px;height:42px;border-radius:50%;font-size:22px;cursor:pointer}.nav-wrap{background:var(--red);position:relative;z-index:20}.nav-inner{overflow:hidden}.main-menu{display:flex;align-items:center;gap:0;margin:0;padding:0;list-style:none;overflow:auto;white-space:nowrap}.main-menu li a{display:block;color:#fff;font-size:13px;font-weight:800;padding:15px 13px}.main-menu li a:hover,.main-menu li.current-menu-item a{background:#8f0000}.mobile-search{display:none}.breaking{background:#fff;border-bottom:1px solid var(--line)}.breaking-inner{display:flex;align-items:center;min-height:42px}.breaking strong{background:var(--dark);color:#fff;font-size:12px;padding:7px 12px;margin-right:12px;white-space:nowrap}.ticker{overflow:hidden;flex:1}.ticker-track{display:flex;gap:36px;white-space:nowrap;animation:ticker 35s linear infinite}.ticker-track a{font-size:13px;font-weight:600}.ticker-track a:hover{color:var(--red)}@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}.page-content{padding:22px 0 55px}.ad-slot,.ad-code{min-height:90px;margin:0 0 22px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid #eee;color:#aaa;font-size:11px;overflow:hidden}.hero{display:grid;grid-template-columns:1.7fr 1fr;gap:18px}.hero-main,.side-card,.latest-card,.post-card,.section-card,.widget{background:#fff}.hero-main{position:relative;min-height:500px;overflow:hidden}.hero-main .thumb img{width:100%;height:500px;object-fit:cover}.hero-copy{position:absolute;left:0;right:0;bottom:0;padding:70px 28px 25px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.9))}.category-label{display:inline-block;color:var(--red);font-size:11px;font-weight:900;text-transform:uppercase;margin-bottom:5px}.hero-copy .category-label{color:#fff;background:var(--red);padding:4px 8px}.hero-copy h1{font-size:36px;line-height:1.1;margin:7px 0}.hero-copy p{margin:0 0 10px;color:#eee}.meta{font-size:11px;color:var(--muted)}.hero-copy .meta{color:#ddd}.hero-side{display:grid;grid-template-rows:repeat(3,1fr);gap:12px}.side-card{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:10px;min-height:0}.side-card img{width:150px;height:130px;object-fit:cover}.side-card h2{font-size:18px;line-height:1.2;margin:2px 0}.content-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:24px}.section-heading{display:flex;justify-content:space-between;align-items:center;border-bottom:3px solid var(--red);margin:28px 0 14px}.section-heading h1,.section-heading h2{font-size:22px;margin:0;padding-bottom:7px}.section-heading a{font-size:12px;color:var(--red);font-weight:800}.latest-list{display:grid;gap:12px}.latest-card{display:grid;grid-template-columns:210px 1fr;gap:16px;padding:12px}.latest-thumb img{width:210px;height:140px;object-fit:cover}.latest-card h3{font-size:20px;line-height:1.2;margin:3px 0}.latest-card p{margin:5px 0;color:#666;font-size:13px}.sidebar{min-width:0}.widget{padding:15px;margin-bottom:18px}.widget-title{font-size:18px;margin:0 0 10px;border-left:5px solid var(--red);padding-left:9px}.trend-item{display:grid;grid-template-columns:45px 1fr;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}.trend-item:last-child{border:0}.trend-item b{font-size:28px;color:#ccc;line-height:1}.trend-item:hover b{color:var(--red)}.news-section{margin-top:32px}.section-grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:12px}.section-card{overflow:hidden}.section-card img{width:100%;height:140px;object-fit:cover}.section-card.featured{grid-row:span 2}.section-card.featured img{height:320px}.section-card>div{padding:10px}.section-card h3{font-size:16px;line-height:1.2;margin:2px 0}.section-card.featured h3{font-size:24px}.video-section{background:#111;padding:4px 18px 20px;margin-top:35px;color:#fff}.video-section .section-heading{border-color:#333}.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.video-placeholder{aspect-ratio:16/9;background:linear-gradient(135deg,#222,#111);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:34px;color:#fff;border:1px solid #333}.video-placeholder span{font-size:13px;margin-top:8px}.exclusive{margin-top:35px}.exclusive-box{background:linear-gradient(120deg,#8f0000,#160000);color:#fff;padding:40px;border-left:8px solid var(--red2)}.exclusive-box span{font-size:11px;font-weight:900;letter-spacing:2px}.exclusive-box h2{font-size:30px;max-width:700px;line-height:1.15}.button{display:inline-block;background:#fff;color:#111;padding:10px 16px;font-size:12px;font-weight:800}.recommend-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.recommend-grid article{background:#fff;padding-bottom:10px}.recommend-grid img{width:100%;height:150px;object-fit:cover}.recommend-grid h3{font-size:16px;line-height:1.25;padding:0 10px}.follow{margin-top:35px;background:#fff;text-align:center;padding:30px}.follow h2{margin:0 0 5px}.follow div{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:15px}.follow a{background:#111;color:#fff;padding:9px 14px;font-size:12px;font-weight:800}.site-footer{background:#111;color:#aaa;padding-top:45px}.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:35px;padding-bottom:30px}.footer-logo{width:280px;max-height:70px;object-fit:contain;object-position:left}.footer-grid h3{color:#fff;font-size:14px;border-left:4px solid var(--red);padding-left:8px}.footer-grid a{display:block;font-size:13px;padding:4px 0}.footer-grid a:hover{color:#fff}.copyright{border-top:1px solid #2a2a2a;padding:16px 0;font-size:11px}.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.post-card{padding-bottom:14px}.post-card img{width:100%;height:220px;object-fit:cover}.post-card h2{font-size:19px;line-height:1.2;padding:0 12px;margin:4px 0}.post-card .category-label,.post-card .meta{margin-left:12px}.single-article{background:#fff;padding:28px;max-width:900px;margin:auto}.single-article h1{font-size:42px;line-height:1.1;margin:6px 0}.single-article>img{width:100%;margin:22px 0}.article-body{font-size:17px}.article-body img{margin:18px auto}.empty-page{text-align:center;padding:90px 0}.empty-page h1{font-size:90px;margin:0;color:var(--red)}@media(max-width:900px){.container{width:min(100% - 22px,700px)}.header-inner{min-height:90px}.brand img{width:70vw;max-height:75px}.main-menu{display:none;flex-direction:column;align-items:stretch}.main-menu li a{padding:12px 10px;border-bottom:1px solid rgba(255,255,255,.15)}.nav-wrap.open .main-menu{display:flex}.nav-wrap.open .nav-inner{padding-bottom:8px}.mobile-search{display:none;padding:8px 0}.search-open .mobile-search{display:block}.mobile-search form{display:flex}.mobile-search input{flex:1;padding:10px;border:0}.mobile-search button{background:#111;color:#fff;border:0;padding:0 15px}.hero{grid-template-columns:1fr}.hero-main,.hero-main .thumb img{min-height:390px;height:390px}.hero-side{grid-template-columns:1fr 1fr;grid-template-rows:none}.side-card{grid-template-columns:95px 1fr}.side-card img{width:95px;height:85px}.side-card h2{font-size:15px}.content-grid{grid-template-columns:1fr}.section-grid{grid-template-columns:1fr 1fr}.section-card.featured{grid-column:span 2}.section-card.featured img{height:300px}.video-grid{grid-template-columns:1fr 1fr}.recommend-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.toplinks{display:none}.breaking-inner{min-height:38px}.breaking strong{font-size:10px;padding:6px 8px}.ticker-track{gap:25px}.page-content{padding-top:12px}.ad-slot{min-height:70px}.hero-copy{padding:55px 16px 16px}.hero-copy h1{font-size:27px}.hero-copy p{font-size:12px}.hero-side{grid-template-columns:1fr}.side-card{grid-template-columns:115px 1fr}.side-card img{width:115px;height:95px}.latest-card{grid-template-columns:110px 1fr;padding:8px;gap:10px}.latest-thumb img{width:110px;height:82px}.latest-card h3{font-size:16px}.latest-card p{display:none}.section-grid{grid-template-columns:1fr 1fr}.section-card.featured{grid-column:span 2}.section-card.featured img{height:220px}.section-card h3{font-size:14px}.section-card.featured h3{font-size:19px}.video-grid{grid-template-columns:1fr}.recommend-grid{grid-template-columns:1fr 1fr}.recommend-grid img{height:115px}.footer-grid{grid-template-columns:1fr 1fr;gap:20px}.footer-grid>div:first-child{grid-column:span 2}.footer-logo{width:220px}.single-article{padding:18px}.single-article h1{font-size:30px}.post-grid{grid-template-columns:1fr 1fr}.post-card img{height:140px}.post-card h2{font-size:16px}.section-heading h1,.section-heading h2{font-size:19px}}

/* === BOSSMUDA NEWS v1.2 article, reply-rights and pagination refinements === */
.breaking{background:var(--red);border-bottom:0;color:#fff}.breaking strong{background:#fff;color:var(--red);font-weight:900}.ticker-track a{color:#fff}.ticker-track a:hover{color:#ffd8d8}

.single-article{max-width:900px;border-top:5px solid var(--red);box-shadow:0 8px 28px rgba(0,0,0,.05)}
.article-label .category-label{background:var(--red);color:#fff;padding:6px 10px;letter-spacing:.5px}
.single-article h1{font-weight:800;letter-spacing:-.7px}
.article-info{display:flex;flex-wrap:wrap;gap:8px 18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;margin:14px 0 22px;color:#555;font-size:12px}
.article-info span{display:inline-flex;align-items:center;gap:5px}.article-info b{color:var(--red);font-size:10px;letter-spacing:.7px}
.single-article>img{width:100%;height:auto;max-height:620px;object-fit:contain;background:#f3f3f3;margin:0 0 26px}
.article-body{font-size:18px;line-height:1.9;color:#242424}.article-body p{margin:0 0 1.15em}.article-body h2,.article-body h3{line-height:1.3}.article-body img{max-width:100%;height:auto;margin:20px auto}
.article-readmore{margin:22px 0 26px;border-left:5px solid var(--red);background:#fafafa;padding:14px 16px}.article-readmore strong{display:block;color:var(--red);font-size:13px;letter-spacing:.8px;margin-bottom:8px}.readmore-links{display:grid;gap:7px}.readmore-links a{font-weight:700;font-size:14px;line-height:1.4}.readmore-links a:hover{color:var(--red)}
.article-pagination{display:flex;align-items:center;gap:12px;justify-content:center;margin:30px 0 10px;padding-top:20px;border-top:1px solid var(--line)}.page-label{font-size:10px;font-weight:900;letter-spacing:1px;color:#777}.page-numbers-wrap{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.article-pagination .page-numbers-wrap>*{min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #ddd;background:#fff;color:#444;font-size:13px;font-weight:800}.article-pagination .page-numbers-wrap .current{background:var(--red);border-color:var(--red);color:#fff}.article-pagination .page-numbers-wrap a:hover{background:#8f0000;border-color:#8f0000;color:#fff}
.article-tags{border-top:1px solid var(--line);padding-top:18px;margin-top:22px;display:flex;gap:14px;align-items:flex-start}.article-tags>strong,.article-share>strong{font-size:11px;color:var(--red);letter-spacing:1px;min-width:40px}.article-tags>div{display:flex;gap:7px;flex-wrap:wrap}.article-tags a{font-size:12px;background:#f1f1f1;border-radius:3px;padding:6px 9px}.article-tags a:hover{background:var(--red);color:#fff}
.article-share{display:flex;gap:14px;align-items:flex-start;border-top:1px solid var(--line);margin-top:16px;padding-top:18px}.article-share>div{display:flex;gap:7px;flex-wrap:wrap}.article-share a{background:#111;color:#fff;padding:8px 12px;font-size:11px;font-weight:800;border-radius:3px}.article-share a:hover{background:var(--red)}

.right-of-reply{margin:28px auto 0;max-width:900px;background:linear-gradient(135deg,#160000,#520000);color:#fff;border:1px solid #6d0b0b;box-shadow:0 12px 32px rgba(0,0,0,.12);position:relative;overflow:hidden}.right-of-reply:before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--red2)}.ror-inner{padding:30px 30px 28px}.ror-kicker{font-size:10px;font-weight:900;letter-spacing:2px;color:#ffb3b3}.right-of-reply h2{font-size:25px;margin:6px 0 12px;letter-spacing:.2px}.right-of-reply p{font-size:14px;line-height:1.7;color:#f1dede;margin:7px 0}.ror-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.ror-actions a{display:flex;flex-direction:column;gap:3px;background:#fff;color:#180000;padding:11px 14px;font-size:11px;font-weight:900;border-radius:3px}.ror-actions a span{font-weight:600;font-size:12px}.ror-actions a:hover{background:#ffdede}
.related-news{max-width:900px;margin:34px auto 0}.related-grid{grid-template-columns:repeat(3,1fr);gap:14px}.related-grid .post-card{overflow:hidden}.related-grid .post-card img{width:100%;height:150px;object-fit:cover}.related-grid .post-card h2{font-size:16px;line-height:1.25}
.bossmuda-pagination{margin:28px 0 8px;text-align:center}.bossmuda-pagination ul{display:flex;justify-content:center;align-items:center;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:wrap}.bossmuda-pagination li{margin:0}.bossmuda-pagination .page-numbers{min-width:40px;height:40px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #ddd;background:#fff;color:#333;font-size:13px;font-weight:800;border-radius:2px}.bossmuda-pagination .page-numbers.current{background:var(--red);border-color:var(--red);color:#fff}.bossmuda-pagination .page-numbers:hover{background:#8f0000;border-color:#8f0000;color:#fff}.bossmuda-pagination .page-numbers.dots{background:transparent;border-color:transparent}
.footer-logo{width:330px;max-height:88px;object-fit:contain;object-position:left center;background:transparent}.site-footer .footer-grid>div:first-child p{max-width:460px}.site-footer{overflow:hidden}

/* Avoid layout shifts while responsive images arrive. */
.hero-main .thumb,.latest-thumb,.side-card>a,.section-card>a,.post-card>a,.recommend-grid article>a{display:block;background:#eee;overflow:hidden}.hero-main .thumb img{aspect-ratio:16/9}.latest-thumb img,.side-card img,.section-card img,.post-card img,.recommend-grid img{aspect-ratio:16/10}

@media(max-width:560px){.single-article{padding:18px;border-top-width:4px}.single-article h1{font-size:30px}.article-info{gap:7px 12px}.article-body{font-size:17px;line-height:1.85}.ror-inner{padding:24px 20px}.right-of-reply h2{font-size:22px}.related-grid{grid-template-columns:1fr 1fr}.related-grid .post-card img{height:120px}.related-grid .post-card h2{font-size:14px}.article-tags,.article-share{gap:9px}.article-share a{padding:8px 10px}.footer-logo{width:250px}}


/* === BOSSMUDA NEWS v1.3 UI refinements === */

/* Exact horizontal primary navigation requested by BOSSMUDA. */
.nav-wrap{background:var(--red);border-top:1px solid #a00000;border-bottom:3px solid #8d0000}
.nav-inner{overflow-x:auto;overflow-y:visible;scrollbar-width:none}
.nav-inner::-webkit-scrollbar{display:none}
.main-menu{display:flex!important;flex-wrap:nowrap;align-items:stretch;justify-content:center;overflow:visible;min-width:max-content}
.main-menu li{list-style:none;flex:0 0 auto;position:relative}
.main-menu li a{font-size:11px;letter-spacing:.05px;padding:13px 9px;font-weight:800;color:#fff;text-transform:uppercase}
.main-menu li a:hover,.main-menu li.current-menu-item a{background:#850000}
.nav-wrap .sub-menu{display:none!important}

/* Breaking News remains immediately below the red menu. */
.breaking{background:var(--red);color:#fff;border-top:1px solid rgba(255,255,255,.18)}
.breaking strong{background:#fff;color:var(--red);border:0}
.ticker-track a{color:#fff}

/* Desktop homepage: fixed grid constraints prevent cards from jumping/wrapping. */
@media(min-width:901px){
    .page-content{padding-top:20px}
    .hero{grid-template-columns:minmax(0,1.72fr) minmax(330px,1fr);align-items:stretch}
    .hero-side{min-width:0}
    .side-card{grid-template-columns:140px minmax(0,1fr)}
    .side-card img{width:140px;height:128px}
    .content-grid{grid-template-columns:minmax(0,2.05fr) minmax(300px,.95fr);align-items:start}
    .latest-card{grid-template-columns:190px minmax(0,1fr)}
    .latest-thumb img{width:190px;height:125px}
    .sidebar{position:relative}
    .section-grid{grid-template-columns:minmax(0,1.55fr) repeat(4,minmax(0,1fr))}
    .section-card{min-width:0}
}

/* Trending: full red panel, with white text and restrained numbering. */
.sidebar .trending{background:linear-gradient(145deg,#c40000,#8e0000);color:#fff;border:0;padding:18px 16px}
.sidebar .trending .widget-title{color:#fff;border-left-color:#fff;margin-bottom:6px}
.sidebar .trending .trend-item{border-bottom-color:rgba(255,255,255,.2)}
.sidebar .trending .trend-item span{color:#fff}
.sidebar .trending .trend-item b{color:rgba(255,255,255,.45)}
.sidebar .trending .trend-item:hover b{color:#fff}

/* Article info: no field labels; read naturally as requested. */
.article-info{font-size:13px;color:#555;gap:5px 16px}
.article-info span{font-weight:500}
.article-info span+span:before{content:"•";color:#bbb;margin-right:16px}
.article-info span:last-child{color:#444}
.single-article h1{max-width:100%}

/* Both rights-of-reply contact actions are red premium buttons. */
.ror-actions a{background:var(--red);color:#fff;border:1px solid #a00000;min-width:190px;align-items:flex-start}
.ror-actions a span{color:#fff;opacity:.92}
.ror-actions a:hover{background:#8f0000;color:#fff}

/* Remove common legacy/plugin Post Views blocks when they appear below the article. */
.single-post .post-views,
.single-post .post-view,
.single-post .post_views,
.single-post .post-views-count,
.single-post .entry-views,
.single-post .post-meta-views,
.single-post .post-view-count{display:none!important}

/* Related stories: six cards remain orderly on desktop. */
.related-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.related-grid .post-card{min-width:0}
.related-grid .post-card h2{min-height:40px}

/* Mobile keeps the requested menu horizontal and scrollable rather than dropping into a giant red block. */
@media(max-width:900px){
    .nav-wrap .container{width:100%}
    .main-menu{justify-content:flex-start!important;overflow-x:auto!important;padding:0 8px}
    .main-menu li a{font-size:10px;padding:12px 9px}
}
@media(max-width:560px){
    .article-info{display:block;padding:10px 0}
    .article-info span{display:inline}
    .article-info span+span:before{margin:0 8px}
    .ror-actions a{width:100%}
}


/* === BOSSMUDA NEWS v1.5 — HOMEPAGE PHOTO & TRENDING POLISH === */

/* Keep every editorial image in a predictable frame without generating hard-cropped
   WordPress thumbnails. The original file remains intact; only the display frame is normalized. */
.hero-main .thumb{
    aspect-ratio:16/9;
    overflow:hidden;
    display:block;
    background:#e9e9e9;
}
.hero-main .thumb img{
    width:100%;
    height:100%;
    max-width:none;
    object-fit:cover;
    object-position:center;
}

.hero-side .side-card{
    align-items:start;
    min-height:0;
}
.hero-side .side-card>a{
    width:150px;
    height:105px;
    aspect-ratio:10/7;
    align-self:start;
    overflow:hidden;
    display:block;
    background:#eee;
}
.hero-side .side-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}

.latest-list{gap:14px}
.latest-card{
    align-items:start;
    min-width:0;
}
.latest-thumb{
    width:210px;
    height:132px;
    aspect-ratio:16/10;
    align-self:start;
    overflow:hidden;
    display:block;
    background:#eee;
}
.latest-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    max-width:none;
}

/* A cleaner 3-column editorial mosaic on desktop. */
.section-grid{
    grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto auto;
    gap:14px;
}
.section-card{
    min-width:0;
    align-self:start;
}
.section-card>a{
    display:block;
    width:100%;
    aspect-ratio:16/10;
    overflow:hidden;
    background:#eee;
}
.section-card img,
.section-card.featured img{
    width:100%;
    height:100%;
    max-width:none;
    object-fit:cover;
    object-position:center;
}
.section-card.featured{
    grid-row:span 2;
}
.section-card.featured h3{font-size:23px}

/* Trending is a deliberate red editorial block, regardless of widget wrapper markup. */
.sidebar .trending,
.sidebar section.trending,
.sidebar .widget.trending,
.trending.widget{
    background:linear-gradient(145deg,#d40000 0%,#a50000 55%,#760000 100%) !important;
    color:#fff !important;
    border:0 !important;
    border-radius:0;
    padding:18px 16px 14px;
    box-shadow:0 10px 24px rgba(120,0,0,.16);
}
.sidebar .trending .widget-title,
.sidebar section.trending .widget-title,
.trending .widget-title{
    color:#fff !important;
    border-left:5px solid #fff !important;
    padding-left:10px;
}
.sidebar .trending .trend-item,
.trending .trend-item{
    display:grid;
    grid-template-columns:48px minmax(0,1fr);
    gap:10px;
    align-items:start;
    color:#fff !important;
    border-bottom:1px solid rgba(255,255,255,.23);
    padding:13px 0;
}
.sidebar .trending .trend-item b,
.trending .trend-item b{
    color:rgba(255,255,255,.5) !important;
    font-size:29px;
    font-weight:900;
    line-height:1;
}
.sidebar .trending .trend-item span,
.trending .trend-item span{
    color:#fff !important;
    font-size:13px;
    line-height:1.45;
    font-weight:600;
}
.sidebar .trending .trend-item:hover b,
.trending .trend-item:hover b{color:#fff !important}

/* Related cards and recommendation cards use the same visual rhythm. */
.post-card>a,
.recommend-grid article>a{
    display:block;
    aspect-ratio:16/10;
    overflow:hidden;
    background:#eee;
}
.post-card>a img,
.recommend-grid article>a img{
    width:100%;
    height:100%;
    max-width:none;
    object-fit:cover;
    object-position:center;
}
.related-grid .post-card img{height:100%}

/* Prevent stretched gray thumbnail areas inside CSS grid rows. */
.latest-card>a,
.side-card>a,
.section-card>a,
.post-card>a,
.recommend-grid article>a{flex:none}

/* Desktop header/menu remains contained and never creates a giant wrapping block. */
@media(min-width:901px){
    .main-menu{justify-content:flex-start}
    .hero-main{min-height:0}
    .hero-main .thumb{height:500px}
    .hero-side .side-card{grid-template-columns:150px minmax(0,1fr)}
    .latest-card{grid-template-columns:210px minmax(0,1fr)}
}

/* Tablet and phone: keep image/text proportions consistent. */
@media(max-width:900px){
    .hero-main .thumb{height:390px}
    .hero-side .side-card>a{width:115px;height:82px}
    .side-card img{width:100%;height:100%}
    .latest-thumb{width:120px;height:78px}
    .latest-thumb img{width:100%;height:100%}
    .section-grid{
        grid-template-columns:1fr 1fr;
        grid-template-rows:auto;
    }
    .section-card.featured{grid-column:span 2;grid-row:auto}
}

@media(max-width:560px){
    .hero-main .thumb{height:390px}
    .hero-side .side-card>a{width:115px;height:82px}
    .latest-card{
        grid-template-columns:110px minmax(0,1fr);
        align-items:start;
    }
    .latest-thumb{width:110px;height:72px}
    .latest-thumb img{width:100%;height:100%}
    .section-grid{gap:10px}
    .section-card>a{aspect-ratio:16/10}
    .section-card.featured h3{font-size:19px}
    .post-card>a,.recommend-grid article>a{aspect-ratio:16/10}
}

/* Remove legacy post-view counters rendered by plugins/themes below article content. */
.single-post [class*="post-view"],
.single-post [id*="post-view"],
.single-post [class*="post_views"],
.single-post [id*="post_views"],
.single-post .entry-footer .views,
.single-post .entry-meta .views{
    display:none !important;
}

/* ============================================================
   BOSSMUDA NEWS v1.6 — MOBILE NAV, SEARCH & PHOTO RHYTHM
   Preserve the existing visual identity; only correct layout/UX.
   ============================================================ */

/* Header controls: clean, reliable icon buttons. */
.header-actions{position:relative;z-index:30}
.header-actions button{display:inline-flex;align-items:center;justify-content:center}
.search-icon{width:16px;height:16px;border:2px solid #fff;border-radius:50%;display:block;position:relative}
.search-icon:after{content:"";position:absolute;width:7px;height:2px;background:#fff;right:-5px;bottom:-2px;transform:rotate(45deg);border-radius:2px}
.menu-icon{font-size:22px;line-height:1;color:#fff}

/* Desktop menu is always a single horizontal rail. */
.nav-wrap{overflow:visible}
.nav-inner{width:min(1180px,calc(100% - 32px));margin:auto;overflow-x:auto;overflow-y:hidden}
.main-menu{display:flex!important;flex-wrap:nowrap!important;white-space:nowrap!important;width:max-content;min-width:100%;justify-content:center!important}
.main-menu li{flex:0 0 auto!important}
.main-menu li a{white-space:nowrap!important}

/* Search panel is a real working control, not an empty button. */
.mobile-search{position:absolute;left:0;right:0;top:100%;background:#fff;padding:12px;box-shadow:0 10px 25px rgba(0,0,0,.16);z-index:50}
.mobile-search form{max-width:1180px;margin:auto;display:flex;gap:8px}
.mobile-search input{height:42px;flex:1;border:1px solid #ddd;padding:0 13px;font-size:14px;outline:none}
.mobile-search input:focus{border-color:var(--red)}
.mobile-search button{height:42px;border:0;background:var(--red);color:#fff;padding:0 18px;font-weight:800;cursor:pointer}
.nav-wrap:not(.search-open) .mobile-search{display:none}
.nav-wrap.search-open .mobile-search{display:block}

/* The mobile menu is horizontal and scrollable, never a tall red accordion. */
@media(max-width:900px){
  .nav-wrap{position:relative}
  .nav-wrap .nav-inner{width:100%;padding:0;overflow:hidden}
  .main-menu{
    display:none!important;
    min-width:max-content!important;
    width:max-content!important;
    justify-content:flex-start!important;
    flex-direction:row!important;
    align-items:stretch!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:0 6px!important;
  }
  .nav-wrap.open .main-menu{
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
  }
  .main-menu li a{
    display:block!important;
    padding:13px 12px!important;
    font-size:10px!important;
    border:0!important;
    white-space:nowrap!important;
  }
  .nav-wrap.open .nav-inner{padding-bottom:0!important}
  .nav-wrap.search-open .main-menu{display:none!important}
  .mobile-search{top:100%}
}

/* Related stories: image box must contain ONLY the photo.
   This removes the gray dead area seen in "ANDA PERLU BACA BERITA INI". */
.related-grid .post-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
}
.related-grid .post-card>a{
  display:block!important;
  width:100%!important;
  height:auto!important;
  aspect-ratio:auto!important;
  background:transparent!important;
  overflow:hidden;
  line-height:0;
}
.related-grid .post-card>a img{
  display:block!important;
  width:100%!important;
  height:180px!important;
  max-width:none!important;
  aspect-ratio:16/10!important;
  object-fit:cover!important;
  object-position:center!important;
  margin:0!important;
}
.related-grid .post-card .category-label{margin-top:0;padding-top:0}
.related-grid .post-card h2{margin-top:5px}
@media(max-width:900px){
  .related-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px}
  .related-grid .post-card>a img{
    height:auto!important;
    aspect-ratio:16/10!important;
  }
}
@media(max-width:560px){
  .related-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px}
  .related-grid .post-card>a img{height:auto!important;aspect-ratio:16/10!important}
  .related-grid .post-card h2{font-size:15px;line-height:1.22;min-height:0}
}

/* Other homepage cards: never stretch the anchor independently from its image. */
.latest-card>a,.side-card>a,.section-card>a,.recommend-grid article>a{
  line-height:0;
}
.latest-card>a img,.side-card>a img,.section-card>a img,.recommend-grid article>a img{
  display:block;
}

/* Rights-of-reply contact actions are compact buttons, as requested. */
.ror-actions a{
  display:inline-flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:150px!important;
  width:auto!important;
  padding:12px 20px!important;
  font-size:12px!important;
  line-height:1!important;
  text-decoration:none;
}
.ror-actions a span{display:none!important}
@media(max-width:560px){
  .ror-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:10px}
  .ror-actions a{width:100%!important;min-width:0!important}
}

/* Desktop homepage: make the main content columns breathe evenly. */
@media(min-width:901px){
  .hero{grid-template-columns:minmax(0,1.72fr) minmax(330px,1fr)!important}
  .hero-side .side-card{grid-template-columns:150px minmax(0,1fr)!important}
  .hero-side .side-card>a{width:150px!important;height:105px!important}
  .content-grid{grid-template-columns:minmax(0,2fr) minmax(300px,1fr)!important}
  .latest-card{grid-template-columns:210px minmax(0,1fr)!important}
  .related-grid .post-card>a img{height:180px!important}
}

/* Avoid a huge red menu occupying the viewport on small screens. */
@media(max-width:560px){
  .header-inner{min-height:82px}
  .brand img{width:min(72vw,330px);max-height:68px}
  .header-actions button{width:40px;height:40px}
}

/* ============================================================
   BOSSMUDA NEWS v1.7 — MOBILE UTILITY MENU ONLY
   Desktop homepage/layout is intentionally untouched.
   ============================================================ */
.mobile-menu-panel{display:none}

@media(max-width:900px){
  /* The red category rail stays exactly as the mobile homepage reference. */
  .nav-wrap{overflow:visible!important}
  .nav-wrap.open .main-menu{display:flex!important;}
  /* Keep the red horizontal category rail visible on mobile; hamburger opens the utility panel below it. */
  .nav-wrap .main-menu{display:flex!important;}

  /* Hamburger opens a separate, vertical utility menu. */
  .mobile-menu-panel{
    display:none;
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    z-index:999;
    background:#fff;
    border-top:3px solid #8f0000;
    box-shadow:0 14px 30px rgba(0,0,0,.24);
  }
  .mobile-menu-panel.open{display:block}
  .mobile-menu-inner{width:100%;max-height:calc(100vh - 110px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .mobile-menu-list{list-style:none;margin:0;padding:0;background:#c40000}
  .mobile-menu-list li{margin:0;border-bottom:1px solid rgba(255,255,255,.18)}
  .mobile-menu-list li a{
    display:block;
    padding:13px 20px;
    color:#fff;
    font-size:13px;
    line-height:1.25;
    font-weight:800;
    letter-spacing:.1px;
    white-space:normal;
  }
  .mobile-menu-list li a:active,
  .mobile-menu-list li a:hover{background:#8f0000;color:#fff}
  .mobile-menu-group{
    padding:13px 20px 10px;
    background:#111;
    color:#fff;
    font-size:13px;
    line-height:1.25;
    font-weight:900;
    letter-spacing:.2px;
    border-top:4px solid #c40000;
  }
  .mobile-menu-company{background:#fff}
  .mobile-menu-company li{border-bottom:1px solid #e7e7e7}
  .mobile-menu-company li a{color:#222;padding:12px 20px;font-size:12px}
  .mobile-menu-company li a:active,
  .mobile-menu-company li a:hover{background:#f5f5f5;color:#c40000}

  /* Keep the hamburger above every opened menu layer. */
  .site-header,.header-inner,.header-actions{position:relative;z-index:1000}
  .menu-toggle{position:relative;z-index:1002}

}

@media(min-width:901px){
  .mobile-menu-panel{display:none!important}
}


/* ============================================================
   BOSSMUDA NEWS v1.8 — EXACT MOBILE HAMBURGER MENU
   Desktop layout is intentionally unchanged.
   ============================================================ */
@media(max-width:900px){
  .mobile-menu-panel{
    width:100%;
    margin:0;
    background:#fff;
    border-top:3px solid #8f0000;
    box-shadow:0 10px 25px rgba(0,0,0,.20);
  }
  .mobile-menu-inner{
    width:100%;
    max-height:calc(100vh - 145px);
    overflow-y:auto;
  }
  .mobile-menu-list{
    width:100%;
    margin:0;
    padding:0;
    list-style:none;
    background:#c40000;
  }
  .mobile-menu-list li{width:100%;margin:0;padding:0;border-bottom:1px solid rgba(255,255,255,.20)}
  .mobile-menu-list li a{
    width:100%;
    min-height:44px;
    display:flex;
    align-items:center;
    padding:12px 20px;
    color:#fff;
    background:#c40000;
    font-size:13px;
    line-height:1.25;
    font-weight:800;
    text-transform:uppercase;
  }
  .mobile-menu-list li a:hover,
  .mobile-menu-list li a:focus,
  .mobile-menu-list li a:active{background:#900000;color:#fff}
  .mobile-menu-group{
    display:block;
    width:100%;
    margin:0;
    padding:14px 20px;
    background:#111;
    color:#fff;
    font-size:13px;
    line-height:1.2;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.2px;
    border-top:4px solid #c40000;
  }
  .mobile-menu-company{background:#fff}
  .mobile-menu-company li{border-bottom:1px solid #e4e4e4}
  .mobile-menu-company li a{
    color:#222;
    background:#fff;
    padding:12px 20px;
    font-size:12px;
    font-weight:800;
  }
  .mobile-menu-company li a:hover,
  .mobile-menu-company li a:focus,
  .mobile-menu-company li a:active{background:#f3f3f3;color:#c40000}
}


/* ============================================================
   BOSSMUDA NEWS v1.9 — BLUE GRADIENT + MOBILE HORIZONTAL RAIL
   IMPORTANT: Desktop layout/design remains unchanged.
   ============================================================ */

/* Blue gradient brand palette replacing the former red UI palette. */
:root{
  --red:#008fc4;
  --red2:#00b8e6;
}

/* Replace remaining hard-coded red UI colors without touching images/logos. */
.nav-wrap{
  background:linear-gradient(90deg,#0077a8 0%,#009fd0 52%,#00b9e5 100%)!important;
}
.main-menu li a:hover,
.main-menu li.current-menu-item a{
  background:rgba(0,72,105,.42)!important;
}
.breaking{
  background:linear-gradient(90deg,#0077a8 0%,#009fd0 52%,#00b9e5 100%)!important;
  color:#fff!important;
}
.breaking strong{
  background:#fff!important;
  color:#006d98!important;
}
.breaking .ticker a,
.breaking .ticker span{
  color:#fff!important;
}
.exclusive-box{
  background:linear-gradient(120deg,#0077a8,#003c59)!important;
  border-left-color:#00b8e6!important;
}
.article-pagination .page-numbers-wrap .current,
.bossmuda-pagination .page-numbers.current{
  background:#008fc4!important;
  border-color:#008fc4!important;
}
.article-pagination .page-numbers-wrap a:hover,
.bossmuda-pagination .page-numbers:hover{
  background:#006d98!important;
  border-color:#006d98!important;
}
.article-tags>strong,
.article-share>strong{
  color:#008fc4!important;
}
.ror-actions a{
  background:linear-gradient(90deg,#0077a8,#00a9d8)!important;
  border-color:#0077a8!important;
}
.ror-actions a:hover{
  background:#006d98!important;
}
.bossmuda-pagination .page-numbers.dots{
  background:transparent!important;
  border-color:transparent!important;
}

/* Trending: same structure, now using the logo-inspired blue gradient. */
.sidebar .trending{
  background:linear-gradient(145deg,#0077a8,#00a9d8)!important;
  color:#fff!important;
}
.sidebar .trending .widget-title{
  color:#fff!important;
  border-left-color:#fff!important;
}
.sidebar .trending .trend-item{
  border-bottom-color:rgba(255,255,255,.22)!important;
}

/* Hamburger/search controls use the same blue family. */
.search-toggle,
.menu-toggle{
  background:linear-gradient(145deg,#0077a8,#00a9d8)!important;
}

/* Mobile hamburger utility menu: blue gradient, company section retained. */
@media(max-width:900px){
  /* The homepage category rail is ALWAYS horizontal on mobile. */
  .nav-wrap .nav-inner{
    width:100%!important;
    max-width:none!important;
    padding:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .nav-wrap .nav-inner::-webkit-scrollbar{
    display:none;
  }
  .nav-wrap .main-menu{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    width:max-content!important;
    min-width:max-content!important;
    max-width:none!important;
    overflow:visible!important;
    white-space:nowrap!important;
    padding:0 6px!important;
  }
  .nav-wrap .main-menu li{
    flex:0 0 auto!important;
  }
  .nav-wrap .main-menu li a{
    white-space:nowrap!important;
  }

  /* Utility menu opened by the hamburger. */
  .mobile-menu-panel{
    border-top-color:#006d98!important;
  }
  .mobile-menu-list{
    background:linear-gradient(180deg,#0077a8,#009fd0)!important;
  }
  .mobile-menu-list li a{
    background:transparent!important;
    color:#fff!important;
  }
  .mobile-menu-list li a:hover,
  .mobile-menu-list li a:focus,
  .mobile-menu-list li a:active{
    background:rgba(0,55,80,.35)!important;
    color:#fff!important;
  }
  .mobile-menu-group{
    background:#111!important;
    border-top-color:#008fc4!important;
  }
  .mobile-menu-company li a:hover,
  .mobile-menu-company li a:focus,
  .mobile-menu-company li a:active{
    color:#0077a8!important;
  }

  /* Do not let opening the hamburger turn the category rail vertical. */
  .nav-wrap.open .main-menu{
    display:flex!important;
    flex-direction:row!important;
    width:max-content!important;
    min-width:max-content!important;
    overflow:visible!important;
  }
}

/* Keep the mobile utility menu completely absent on desktop. */
@media(min-width:901px){
  .mobile-menu-panel{display:none!important}
}

/* ============================================================
   BOSSMUDA NEWS v2.2 — ONLY REQUESTED POLISH
   Homepage / desktop layout remains unchanged.
   ============================================================ */

/* TRENDING — logo-inspired blue gradient, white title/numbers/text. */
.sidebar .trending,
.widget.trending{
  background:linear-gradient(135deg,#003f63 0%,#006f9f 45%,#00b8e6 100%)!important;
  color:#fff!important;
  border:0!important;
}
.sidebar .trending .widget-title,
.widget.trending .widget-title{
  color:#fff!important;
  border-left-color:#fff!important;
}
.sidebar .trending .trend-item,
.widget.trending .trend-item{
  color:#fff!important;
  border-bottom-color:rgba(255,255,255,.28)!important;
}
.sidebar .trending .trend-item b,
.widget.trending .trend-item b,
.sidebar .trending .trend-item span,
.widget.trending .trend-item span,
.sidebar .trending .trend-item:hover b,
.widget.trending .trend-item:hover b{
  color:#fff!important;
  opacity:1!important;
}

/* LOGIN — blue identity, using the supplied transparent blue logo. */
body.login{
  background:
    radial-gradient(circle at 50% -10%,rgba(0,200,245,.28),transparent 34%),
    linear-gradient(135deg,#002f4d 0%,#005c85 42%,#008fc4 72%,#00b8e6 100%)!important;
}
body.login::before{
  background:
    linear-gradient(135deg,transparent 0 72%,rgba(0,30,50,.15) 72% 73%,transparent 73%),
    linear-gradient(315deg,transparent 0 82%,rgba(0,30,50,.10) 82% 83%,transparent 83%)!important;
}
body.login #login h1 a{
  width:min(350px,92vw)!important;
  height:108px!important;
  margin:0 auto 22px!important;
  background-image:url("../images/bossmuda-login-logo.png")!important;
  background-size:contain!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  border-radius:0!important;
  box-shadow:none!important;
}
body.login #login h1 a:hover{
  transform:none!important;
  box-shadow:none!important;
}
body.login .message,
body.login .success,
body.login #login_error{
  border-left-color:#00b8e6!important;
}
body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus{
  border-color:#008fc4!important;
  box-shadow:0 0 0 3px rgba(0,159,208,.16)!important;
}
body.login input[type="checkbox"]{
  accent-color:#008fc4!important;
}
body.login #wp-submit{
  background:linear-gradient(135deg,#006b99,#00b8e6)!important;
  box-shadow:0 8px 18px rgba(0,100,145,.28)!important;
}
body.login #wp-submit:hover{
  background:linear-gradient(135deg,#00567d,#009fd0)!important;
}
body.login #nav a:hover,
body.login #backtoblog a:hover{
  color:#bcefff!important;
}
@media(max-width:480px){
  body.login #login h1 a{
    width:min(340px,94vw)!important;
    height:92px!important;
    margin-bottom:18px!important;
  }
}

/* FOOTER — use the supplied transparent blue logo; no layout redesign. */
.site-footer .footer-logo{
  width:280px!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:left center!important;
  display:block!important;
}
@media(max-width:900px){
  .site-footer .footer-logo{
    width:min(320px,100%)!important;
    height:auto!important;
  }
}

/* ============================================================
   BOSSMUDA NEWS v2.3 — CORAK BIRU LEMBUT
   Hanya mengubah warna/background TRENDING & RUANG HAK JAWAB.
   ============================================================ */

/* TRENDING — light blue abstract-wave inspired treatment */
.sidebar .trending,
.widget.trending{
  background:
    linear-gradient(180deg,rgba(255,255,255,.82),rgba(232,247,255,.88)),
    radial-gradient(ellipse at 15% 15%,rgba(255,255,255,.95) 0 22%,transparent 50%),
    linear-gradient(135deg,#eefaff 0%,#c9edff 48%,#b6e3fa 100%)!important;
  color:#083c57!important;
  border:1px solid rgba(0,139,190,.16)!important;
  box-shadow:0 12px 35px rgba(0,86,125,.10)!important;
  position:relative;
  overflow:hidden;
}
.sidebar .trending::before,
.widget.trending::before{
  content:"";
  position:absolute;
  left:-8%;
  right:-8%;
  top:0;
  height:42%;
  background:
    radial-gradient(ellipse at 30% 85%,transparent 0 43%,rgba(255,255,255,.68) 44% 46%,transparent 47%),
    radial-gradient(ellipse at 62% 65%,transparent 0 48%,rgba(255,255,255,.48) 49% 51%,transparent 52%);
  opacity:.85;
  pointer-events:none;
}
.sidebar .trending > *,
.widget.trending > *{
  position:relative;
  z-index:1;
}
.sidebar .trending .widget-title,
.widget.trending .widget-title{
  color:#075a7f!important;
  border-left-color:#079dcc!important;
}
.sidebar .trending .trend-item,
.widget.trending .trend-item{
  color:#124d68!important;
  border-bottom-color:rgba(0,120,165,.16)!important;
}
.sidebar .trending .trend-item b,
.widget.trending .trend-item b,
.sidebar .trending .trend-item span,
.widget.trending .trend-item span,
.sidebar .trending a,
.widget.trending a{
  color:#124d68!important;
  opacity:1!important;
}

/* RUANG HAK JAWAB — soft blue wave/gradient treatment */
.right-of-reply{
  background:
    linear-gradient(180deg,rgba(255,255,255,.72),rgba(222,245,255,.90)),
    radial-gradient(ellipse at 90% 0%,rgba(255,255,255,.96),transparent 43%),
    linear-gradient(135deg,#edfaff 0%,#c8edff 50%,#b6e3f8 100%)!important;
  border:1px solid rgba(0,125,175,.22)!important;
  color:#123d52!important;
  box-shadow:0 14px 38px rgba(0,86,125,.10)!important;
  position:relative;
  overflow:hidden;
}
.right-of-reply::after{
  content:"";
  position:absolute;
  left:-8%;
  right:-8%;
  bottom:-4%;
  height:34%;
  background:
    radial-gradient(ellipse at 15% 100%,transparent 0 47%,rgba(255,255,255,.70) 48% 50%,transparent 51%),
    radial-gradient(ellipse at 70% 100%,transparent 0 45%,rgba(255,255,255,.48) 46% 48%,transparent 49%);
  pointer-events:none;
}
.right-of-reply > *{
  position:relative;
  z-index:1;
}
.right-of-reply:before{
  background:linear-gradient(180deg,#00a9d8,#0082b5)!important;
}
.ror-kicker{
  color:#08799f!important;
}
.right-of-reply h2{
  color:#083b54!important;
}
.right-of-reply p{
  color:#24576c!important;
}
.ror-actions a{
  background:linear-gradient(135deg,#007ca9,#00add8)!important;
  border-color:#00759d!important;
  color:#fff!important;
  box-shadow:0 7px 18px rgba(0,115,160,.18)!important;
}
.ror-actions a:hover{
  background:linear-gradient(135deg,#00698f,#009dc7)!important;
}

/* Mobile keeps exactly the same structure, only colors/background change. */
@media(max-width:900px){
  .sidebar .trending,
  .widget.trending,
  .right-of-reply{
    background-color:#dff5ff!important;
  }
}

/* v2.7 — LOGIN: exact supplied blue BOSSMUDA logo, transparent background, no distortion. */
body.login #login h1 a{
  width:min(430px,94vw)!important;
  height:235px!important;
  background-image:url("../images/bossmuda-login-logo.png")!important;
  background-size:contain!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  transform:none!important;
}
@media(max-width:480px){
  body.login #login h1 a{
    width:min(350px,94vw)!important;
    height:190px!important;
  }
}


/* ============================================================
   BOSSMUDA NEWS v2.9 — FINAL BRAND ASSET LOCK
   Only fixes the three requested brand items. Existing layout/design preserved.
   ============================================================ */

/* 1) TRENDING — force logo-inspired blue treatment on every common wrapper. */
.trending,
.widget.trending,
.sidebar .trending,
.sidebar section.trending,
.sidebar .widget.trending,
section.trending {
  background:linear-gradient(135deg,#003f63 0%,#006f9f 48%,#00b8e6 100%) !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:0 12px 30px rgba(0,70,105,.16) !important;
}
.trending .widget-title,
.widget.trending .widget-title,
.trending h2,
.trending h3 {
  color:#fff !important;
  border-left-color:#fff !important;
}
.trending .trend-item,
.widget.trending .trend-item {
  color:#fff !important;
  border-bottom-color:rgba(255,255,255,.28) !important;
}
.trending .trend-item b,
.trending .trend-item span,
.trending .trend-item a,
.widget.trending .trend-item b,
.widget.trending .trend-item span,
.widget.trending .trend-item a {
  color:#fff !important;
  opacity:1 !important;
}
.trending .trend-item:hover b,
.widget.trending .trend-item:hover b { color:#fff !important; }

/* 2) FOOTER — the supplied blue transparent logo is the only footer logo. */
.site-footer .footer-logo {
  content:url("../images/bossmuda-footer.png") !important;
  background:transparent !important;
  width:280px !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:left center !important;
}
@media(max-width:900px){
  .site-footer .footer-logo {
    width:min(320px,100%) !important;
    height:auto !important;
  }
}

/* 3) LOGIN — the supplied blue/black/white transparent logo, no background box. */
body.login #login h1 a {
  background-image:url("../images/bossmuda-login-logo.png") !important;
  background-color:transparent !important;
  background-size:contain !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  border:0 !important;
  box-shadow:none !important;
  transform:none !important;
}

/* ============================================================
   BOSSMUDA NEWS v3.9 — LINK + PAGE + ARTICLE READABILITY FIX
   Preserve existing homepage/header/footer design.
   ============================================================ */

/* Footer: show the supplied 1536x512 logo at a readable native ratio. */
.site-footer .footer-logo{
  content:url("../images/bossmuda-footer.png") !important;
  width:min(100%,620px) !important;
  max-width:620px !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:left center !important;
  display:block !important;
  image-rendering:auto !important;
}
@media(max-width:900px){
  .site-footer .footer-logo{
    width:100% !important;
    max-width:620px !important;
    height:auto !important;
  }
}

/* Normal WordPress pages: do not fall through to the post archive. */
.standard-page{
  background:#fff;
  max-width:980px;
  margin:0 auto;
  padding:28px 30px 38px;
  border-top:5px solid var(--red);
  box-shadow:0 8px 28px rgba(0,0,0,.05);
}
.standard-page-header h1{
  font-size:40px;
  line-height:1.12;
  margin:7px 0 12px;
  font-weight:800;
}
.standard-page-rule{
  height:3px;
  width:100%;
  background:linear-gradient(90deg,var(--red),var(--red2));
  margin-bottom:24px;
}
.standard-page-featured img{
  width:100%;
  height:auto;
  max-height:620px;
  object-fit:contain;
  margin:0 auto 25px;
}
.page-body{
  font-size:17px;
  line-height:1.72;
  color:#252525;
}
.page-body p{
  margin:0 0 .72em;
}
.page-body h2,.page-body h3{
  margin:1.15em 0 .45em;
  line-height:1.25;
}
.page-body ul,.page-body ol{
  margin-top:.35em;
  margin-bottom:.8em;
}
.page-body a{
  color:var(--red);
  text-decoration:underline;
  text-underline-offset:2px;
}
.page-body img{
  max-width:100%;
  height:auto;
  margin:18px auto;
}
@media(max-width:560px){
  .standard-page{
    padding:20px 18px 28px;
  }
  .standard-page-header h1{
    font-size:30px;
  }
  .page-body{
    font-size:16px;
    line-height:1.68;
  }
}

/* Article paragraphs: tighter and more comfortable than the previous 1.9/1.15em spacing. */
.single-article .article-body{
  font-size:18px !important;
  line-height:1.72 !important;
}
.single-article .article-body p{
  margin:0 0 .72em !important;
}
.single-article .article-body h2,
.single-article .article-body h3{
  margin:1.05em 0 .45em !important;
}
@media(max-width:560px){
  .single-article .article-body{
    font-size:17px !important;
    line-height:1.68 !important;
  }
  .single-article .article-body p{
    margin-bottom:.68em !important;
  }
}

/* Make every visible card/title link clearly clickable. */
.post-card a,
.latest-card a,
.section-card a,
.side-card a,
.hero a,
.recommend-grid a,
.related-grid a{
  cursor:pointer;
}

/* ============================================================
   BOSSMUDA NEWS v4.0 — CATEGORY CARD + PAGINATION + EDITABLE FOOTER
   Preserve the existing homepage desktop/mobile appearance.
   ============================================================ */

/* Category/archive cards: eliminate the stretched gray dead area. */
.post-grid{
  align-items:start !important;
}
.post-grid .post-card{
  align-self:start !important;
  height:auto !important;
  min-height:0 !important;
  overflow:hidden;
}
.post-grid .post-card>a{
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:16/10 !important;
  overflow:hidden !important;
  background:#eee !important;
  line-height:0 !important;
}
.post-grid .post-card>a img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  aspect-ratio:auto !important;
  object-fit:cover !important;
  object-position:center !important;
  margin:0 !important;
}
.post-grid .post-card .category-label{
  display:inline-block !important;
  margin-top:0 !important;
  padding-top:0 !important;
}
.post-grid .post-card h2{
  margin-top:6px !important;
}

/* Category pagination: always visible when the archive spans more than one page. */
.bossmuda-pagination{
  clear:both !important;
  display:block !important;
  width:100% !important;
  margin:30px 0 12px !important;
  padding-top:4px !important;
}
.bossmuda-pagination ul{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  gap:7px !important;
  list-style:none !important;
  padding:0 !important;
  margin:0 !important;
}
.bossmuda-pagination .page-numbers{
  min-width:40px !important;
  height:40px !important;
  padding:0 11px !important;
  border:1px solid #d8d8d8 !important;
  background:#fff !important;
  color:#333 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:13px !important;
  font-weight:800 !important;
  border-radius:2px !important;
}
.bossmuda-pagination .page-numbers.current{
  background:#008fc4 !important;
  border-color:#008fc4 !important;
  color:#fff !important;
}
.bossmuda-pagination .page-numbers:hover{
  background:#006d98 !important;
  border-color:#006d98 !important;
  color:#fff !important;
}
.bossmuda-pagination .page-numbers.dots{
  background:transparent !important;
  border-color:transparent !important;
}

/* Footer logo: use the exact supplied logo image by default, but keep it editable in Customizer. */
.site-footer .footer-logo{
  content:url("../images/bossmuda-footer.jpg") !important;
  width:min(100%,620px) !important;
  height:auto !important;
  max-width:620px !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:left center !important;
  background:#000 !important;
}

@media(max-width:560px){
  .post-grid{grid-template-columns:1fr 1fr !important;gap:12px !important}
  .post-grid .post-card>a{aspect-ratio:16/10 !important}
  .post-grid .post-card h2{font-size:16px !important;line-height:1.22 !important}
  .site-footer .footer-logo{width:100% !important;max-width:620px !important}
}

/* Respect a custom footer logo selected from Appearance > Customize. */
.site-footer .footer-logo{content:normal !important;}

/* ============================================================
   BOSSMUDA NEWS v4.1 — FINAL PHOTO FIX
   Fix category/related cards where the thumbnail link could
   inherit a stretched grid height, leaving a large gray block.
   Keep the existing desktop/mobile design unchanged.
   ============================================================ */

.post-grid .post-card,
.related-grid .post-card{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  align-self:start !important;
  height:auto !important;
  min-height:0 !important;
  background:#fff !important;
}

.post-grid .post-card > .post-thumb-link,
.related-grid .post-card > .post-thumb-link{
  display:block !important;
  position:relative !important;
  flex:0 0 auto !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:16 / 10 !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  background:#eee !important;
  line-height:0 !important;
}

.post-grid .post-card > .post-thumb-link::before,
.related-grid .post-card > .post-thumb-link::before{
  content:none !important;
}

.post-grid .post-card > .post-thumb-link img,
.related-grid .post-card > .post-thumb-link img{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  aspect-ratio:auto !important;
  object-fit:cover !important;
  object-position:center center !important;
}

.post-grid .post-card > .category-label,
.related-grid .post-card > .category-label{
  position:static !important;
  display:block !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:6px 12px 0 !important;
  background:transparent !important;
  line-height:1.1 !important;
  overflow:visible !important;
  z-index:auto !important;
}

.post-grid .post-card > h2,
.related-grid .post-card > h2{
  flex:0 0 auto !important;
  height:auto !important;
  min-height:0 !important;
  margin:6px 0 0 !important;
  padding:0 12px !important;
  overflow:visible !important;
}

.post-grid .post-card > .meta,
.related-grid .post-card > .meta{
  flex:0 0 auto !important;
  height:auto !important;
  min-height:0 !important;
  margin:8px 12px 14px !important;
  padding:0 !important;
}

@media(max-width:560px){
  .post-grid .post-card > .post-thumb-link,
  .related-grid .post-card > .post-thumb-link{
    aspect-ratio:16 / 10 !important;
  }
  .post-grid .post-card > .category-label,
  .related-grid .post-card > .category-label{
    padding:5px 10px 0 !important;
  }
  .post-grid .post-card > h2,
  .related-grid .post-card > h2{
    padding:0 10px !important;
  }
  .post-grid .post-card > .meta,
  .related-grid .post-card > .meta{
    margin-left:10px !important;
    margin-right:10px !important;
  }
}


/* ============================================================
   BOSSMUDA NEWS v4.2 — HARD PHOTO FRAME FIX
   Category archive + "ANDA PERLU BACA BERITA INI"
   The thumbnail area is a fixed 16:10 media frame. Nothing else
   is allowed to occupy the media frame or stretch the card.
   ============================================================ */
.post-grid .post-card,
.related-grid .post-card{
  display:block !important;
  align-self:start !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  padding:0 0 14px !important;
  margin:0 !important;
  overflow:hidden !important;
  background:#fff !important;
}

.post-grid .post-card > a.post-thumb-link,
.related-grid .post-card > a.post-thumb-link{
  display:block !important;
  position:relative !important;
  width:100% !important;
  height:0 !important;
  padding:0 !important;
  margin:0 !important;
  padding-bottom:62.5% !important;
  aspect-ratio:auto !important;
  overflow:hidden !important;
  background:#fff !important;
  line-height:0 !important;
}

.post-grid .post-card > a.post-thumb-link img,
.related-grid .post-card > a.post-thumb-link img{
  display:block !important;
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  aspect-ratio:auto !important;
  object-fit:cover !important;
  object-position:center center !important;
}

/* The category label must begin immediately after the photograph. */
.post-grid .post-card > a.category-label,
.related-grid .post-card > a.category-label{
  display:block !important;
  position:static !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:7px 12px 0 !important;
  background:transparent !important;
  line-height:1.1 !important;
  overflow:visible !important;
}

.post-grid .post-card > h2,
.related-grid .post-card > h2{
  display:block !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:6px 0 0 !important;
  padding:0 12px !important;
  overflow:visible !important;
}

.post-grid .post-card > .meta,
.related-grid .post-card > .meta{
  display:block !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  margin:8px 12px 0 !important;
  padding:0 !important;
}

@media(max-width:560px){
  .post-grid .post-card,
  .related-grid .post-card{padding-bottom:12px !important;}
  .post-grid .post-card > a.post-thumb-link,
  .related-grid .post-card > a.post-thumb-link{
    height:0 !important;
    padding-bottom:62.5% !important;
  }
  .post-grid .post-card > a.category-label,
  .related-grid .post-card > a.category-label{padding:6px 10px 0 !important;}
  .post-grid .post-card > h2,
  .related-grid .post-card > h2{padding:0 10px !important;}
  .post-grid .post-card > .meta,
  .related-grid .post-card > .meta{margin-left:10px !important;margin-right:10px !important;}
}


/* ============================================================
   BOSSMUDA NEWS v4.3 — ROOT CAUSE FIX
   IMPORTANT: .post-card > a also matches the category-label anchor.
   Previous versions left aspect-ratio:16/10 on that label, creating
   the large gray block between the photo and headline. Explicitly
   reset the label anchor so ONLY the thumbnail has a media frame.
   ============================================================ */
.post-grid .post-card > a.category-label,
.related-grid .post-card > a.category-label{
  display:block !important;
  position:static !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  padding:6px 12px 0 !important;
  margin:0 !important;
  overflow:visible !important;
  background:transparent !important;
  line-height:1.1 !important;
  box-sizing:border-box !important;
}

.post-grid .post-card > a.post-thumb-link,
.related-grid .post-card > a.post-thumb-link{
  aspect-ratio:16/10 !important;
}

@media(max-width:560px){
  .post-grid .post-card > a.category-label,
  .related-grid .post-card > a.category-label{
    aspect-ratio:auto !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding:5px 10px 0 !important;
  }
}


/* ============================================================
   BOSSMUDA NEWS v4.4 — STRUCTURAL CARD PHOTO FIX
   The category link is now wrapped so legacy .post-card>a rules
   can NEVER stretch it into a second thumbnail-sized block.
   ============================================================ */
.post-grid .post-card > .post-thumb-link,
.related-grid .post-card > .post-thumb-link{
  display:block !important;
  position:relative !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:16/10 !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  background:#eee !important;
  line-height:0 !important;
}
.post-grid .post-card > .post-thumb-link img,
.related-grid .post-card > .post-thumb-link img{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  object-fit:cover !important;
  object-position:center !important;
}
.post-grid .post-card > .category-label-wrap,
.related-grid .post-card > .category-label-wrap{
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  background:#fff !important;
  line-height:1 !important;
  aspect-ratio:auto !important;
}
.post-grid .post-card > .category-label-wrap > .category-label,
.related-grid .post-card > .category-label-wrap > .category-label{
  display:inline-block !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:7px 12px 0 !important;
  background:transparent !important;
  color:#008fc4 !important;
  line-height:1.1 !important;
  aspect-ratio:auto !important;
  overflow:visible !important;
  position:static !important;
}
.post-grid .post-card > h2,
.related-grid .post-card > h2{
  clear:both !important;
  margin:6px 0 0 !important;
  padding:0 12px !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
}
.post-grid .post-card > .meta,
.related-grid .post-card > .meta{
  display:block !important;
  height:auto !important;
  min-height:0 !important;
  margin:8px 12px 14px !important;
  padding:0 !important;
}
@media(max-width:560px){
  .post-grid .post-card > .category-label-wrap,
  .related-grid .post-card > .category-label-wrap{padding:0 !important;}
  .post-grid .post-card > .category-label-wrap > .category-label,
  .related-grid .post-card > .category-label-wrap > .category-label{padding:5px 10px 0 !important;}
  .post-grid .post-card > h2,
  .related-grid .post-card > h2{padding:0 10px !important;}
  .post-grid .post-card > .meta,
  .related-grid .post-card > .meta{margin-left:10px !important;margin-right:10px !important;}
}