/* Mobile-first overrides for Classic theme (lightweight, template-friendly). */

/* Helper elements that should only appear on mobile. */
.td-mob-block-title {
    display: none;
}

/* Mobile-only homepage modules (TagDiv-like). */
.td-mob-home {
    display: none !important;
    visibility: hidden;
    opacity: 0;
    height: 0;
    overflow: hidden;
}

/* New mobile header stack (Kompas-like order) */
.td-appbanner,
.td-mob-kheader {
    display: none;
}

/* Explicitly hide desktop-only homepage content on mobile to prevent leakage */

@media (max-width: 767px) {

    /* Explicitly hide desktop-only homepage content on mobile to prevent leakage */
    .td-desk-home,
    .ep-desk-home {
        display: none !important;
    }

    /* Hide legacy header pieces on mobile (we replace them with td-mob-kheader) */
    #header .top-bar,
    #header .logo-banner,
    #header nav.main-menu,
    #header .mobile-nav-container,
    #header .desktop-sticky-sidebars {
        display: none !important;
    }

    #header {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .td-appbanner {
        display: block;
        padding: 0;
        background: #0b6b46;
        border-radius: 5px 5px 0 0;
        overflow: hidden;
    }

    .td-appbanner .bapps__wrap {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        background: #0ca22d;
        border-radius: 0;
        padding: 6px 10px;
        overflow: hidden;
    }

    .td-appbanner .bapps__left {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 0 0 auto;
    }

    .td-appbanner .bapps__close {
        width: 22px;
        height: 22px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.16);
        color: #fff;
        text-decoration: none !important;
        font-size: 18px;
        line-height: 1;
        flex: 0 0 auto;
    }

    .td-appbanner .bapps__icon img {
        width: 24px;
        height: 24px;
        border-radius: 10px;
        display: block;
        background: #fff;
        padding: 2px;
    }

    .td-appbanner .bapps__info {
        flex: 1 1 auto;
        min-width: 0;
        color: #fff;
    }

    .td-appbanner .bapps__desc {
        font-size: 11px;
        line-height: 1.1;
        font-weight: 800;
    }

    .td-appbanner .bapps__right {
        flex: 0 0 auto;
    }

    .td-appbanner .bapps__btn {
        height: 24px;
        padding: 0 10px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #db0000;
        color: #fff;
        font-weight: 900;
        font-size: 11px;
        text-transform: uppercase;
    }

    .td-appbanner .bapps__link {
        position: absolute;
        inset: 0;
        z-index: 1;
    }

    .td-appbanner .bapps__close {
        position: relative;
        z-index: 2;
    }

    .td-mob-kheader {
        display: block;
        background: #ffffff;
        padding: 0;
        border-bottom: 1px solid #ebebeb;
    }

    body.dark-mode .td-mob-kheader {
        background: #141414;
        border-bottom-color: #222;
    }

    .td-mob-kheader .header-block {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 3px 10px;
    }

    .td-mob-kheader .header-block.td-is-fixed {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 10000;
        background: #ffffff;
    }

    body.dark-mode .td-mob-kheader .header-block.td-is-fixed {
        background: #141414;
    }

    .td-mob-kheader .header-logo img {
        height: 26px;
        width: auto;
        display: block;
    }

    .td-mob-kheader .header-row {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .td-mob-kheader .menu-item .button-default {
        width: 34px;
        height: 34px;
        border-radius: 3px;
        border: 1px solid #ddd;
        background: #f5f5f5;
        color: #333;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        text-decoration: none !important;
    }

    body.dark-mode .td-mob-kheader .menu-item .button-default {
        border-color: rgba(255, 255, 255, 0.15);
        background: rgba(255, 255, 255, 0.08);
        color: #fff;
    }

    .td-mob-kheader .td-khdr-pill {
        font-weight: 900;
        font-size: 12px;
        letter-spacing: 0.2px;
    }

    .td-mob-kheader .td-khdr-plus {
        width: 20px;
        height: 20px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #db0000;
        color: #fff;
        font-weight: 900;
        line-height: 1;
    }

    .td-mob-kheader .td-khdr-form {
        margin: 0;
    }

    .td-mob-kheader .navmenu-block {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 9999;
        margin-top: 0;
        background: #0b6b46;
        border-radius: 0;
        padding: 4px 10px;
        display: flex;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .td-mob-kheader .navmenu-block.td-is-fixed {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
    }

    .td-mob-kheader .navmenu-block::-webkit-scrollbar {
        display: none;
    }

    .td-mob-kheader .navmenu-link {
        display: inline-flex;
        align-items: center;
        height: 24px;
        padding: 0 8px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.14);
        color: #fff;
        font-weight: 900;
        font-size: 11px;
        text-decoration: none !important;
        white-space: nowrap;
        border: 1px solid rgba(255, 255, 255, 0.18);
    }

    .td-mob-kheader .navmenu-link:active,
    .td-mob-kheader .navmenu-link:focus {
        color: #fff;
    }

    /* Politik block: show 10 posts, initial view ~3 (scroll inside) */
    .td-mob-politik-scroll .td-mob-politik-scrolllist {
        max-height: 250px;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Special content box (e.g. Politik): scroll list, reveal "Lihat lainnya" when reached end */
    .special-content-inner-box-list {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .special-content-inner-box-button {
        display: none !important;
    }

    .special-content-inner-box-list-item.td-sc-more {
        display: none;
    }

    .special-content-inner-box-list-item.td-sc-more.is-visible {
        display: block;
    }

    .special-content-inner-box-list-item.td-sc-more .special-content-inner-box-list-item-title {
        display: block;
        text-align: center;
        font-weight: 900;
        color: #fff;
    }

    .td-mob-politik-scroll .td-mob-politik-scrollitem {
        display: block;
    }

    .td-mob-politik-scroll .td-mob-politik-more {
        margin-top: 8px;
    }

    /* Show TagDiv-like mobile home, hide legacy home pieces */
    .td-mob-home {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
        position: relative !important;
        left: auto !important;
        margin: 0 !important;
        padding-top: 0 !important;
    }

    .td-mob-home .special-content-inner {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        height: auto !important;
        overflow: visible !important;
    }

    .section-featured {
        display: none !important;
    }

    .news-ticker-cnt,
    .news-ticker-sep {
        display: none !important;
    }

    .td-mob-big-grid {
        margin: 0 !important;
        padding: 0 10px 0 !important;
    }

    .td-mob-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0;
        background: #0b6b46;
        border-radius: 10px;
        overflow: hidden;
    }

    .td-mob-grid-hero,
    .td-mob-grid-card {
        position: relative;
        overflow: hidden;
        border-radius: 0;
        background: transparent;
    }

    .td-mob-featured-nav {
        display: flex;
        gap: 8px;
        align-items: center;
        padding: 6px 10px 6px;
        margin-bottom: 0;
        transform: none;
        position: relative;
        min-height: 34px;
        overflow: hidden;
    }

    .td-mob-featured-running {
        position: absolute;
        left: 86px;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        height: 34px;
        display: flex;
        align-items: center;
        overflow: hidden;
        border-radius: 6px;
        color: rgba(255, 255, 255, 0.95);
        white-space: nowrap;
        pointer-events: none;
        z-index: 0;
    }

    .td-mob-featured-running__track {
        display: inline-flex;
        align-items: center;
        width: max-content;
        animation: td-mob-marquee 5s linear infinite;
        will-change: transform;
    }

    .td-mob-featured-running__group {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding-right: 10px;
    }

    .td-mob-featured-running__text {
        font-size: 13px;
        line-height: 34px;
        font-weight: 900;
        letter-spacing: 0.2px;
    }

    .td-mob-featured-running__sep {
        opacity: 0.75;
    }

    @keyframes td-mob-marquee {
        0% {
            transform: translate3d(0, 0, 0);
        }

        100% {
            transform: translate3d(-50%, 0, 0);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .td-mob-featured-running__track {
            animation-duration: 10s;
        }
    }

    .td-mob-featured-nav button {
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 6px;
        background: #eeee22;
        color: #0b6b46;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        position: relative;
        z-index: 2;
    }

    .td-mob-featured-nav button:disabled {
        opacity: .55;
    }

    .td-mob-grid-hero .td-mob-img,
    .td-mob-grid-card .td-mob-img {
        display: block;
        position: relative;
        height: 100%;
    }

    /* CI4 image markup: hide bg placeholder and force cover image to fill */
    .td-mob-img .img-bg {
        display: none !important;
    }

    .td-mob-img .img-container {
        position: absolute;
        inset: 0;
    }

    .td-mob-img .img-container img,
    .td-mob-img img.img-cover,
    .td-mob-img img.img-post {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        display: block;
    }

    .td-mob-grid-hero .td-mob-img img,
    .td-mob-grid-card .td-mob-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        display: block;
    }

    .td-mob-grid-hero {
        height: 230px;
    }

    /* Slick slider inside the hero block */
    .td-mob-featured-slider,
    .td-mob-featured-slider .slick-list,
    .td-mob-featured-slider .slick-track {
        height: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }

    /*
      Fallback Slick layout (in case slick.css is missing/overridden):
      Without the base Slick CSS, slides can stack vertically AFTER JS init,
      making the top block extremely tall.
    */
    .td-mob-featured-slider.slick-initialized .slick-list {
        overflow: hidden;
    }

    .td-mob-featured-slider.slick-initialized .slick-track {
        display: flex !important;
        align-items: stretch;
    }

    .td-mob-featured-slider.slick-initialized .slick-slide {
        height: 230px;
    }

    /* If Slick fails mid-init, slides may get `.slick-slide` but the container may miss `.slick-initialized`.
       In that case, global Slick CSS hides slides. Keep hero slides visible anyway. */
    .td-mob-featured-slider .slick-slide {
        display: block !important;
    }

    /* If Slick gets stuck in loading state, its CSS hides slides via visibility. Keep hero visible. */
    .td-mob-featured-slider.slick-loading .slick-track,
    .td-mob-featured-slider.slick-loading .slick-slide {
        visibility: visible !important;
    }

    /* Anti-FOUC: before Slick initializes, prevent all slides stacking */
    .td-mob-featured-slider:not(.slick-initialized) {
        overflow: hidden;
    }

    .td-mob-featured-slider:not(.slick-initialized)>.td-mob-featured-slide {
        display: none;
    }

    .td-mob-featured-slider:not(.slick-initialized)>.td-mob-featured-slide:first-child {
        display: block;
    }

    .td-mob-featured-slide {
        height: 230px;
        position: relative;
        overflow: hidden;
        border-radius: 10px;
        background: #000;
    }

    .td-mob-featured-slide .td-mob-img {
        display: block;
        position: relative;
        height: 100%;
    }

    .td-mob-featured-slider .slick-dots {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 8px;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        gap: 6px;
        z-index: 3;
        list-style: none;
    }

    .td-mob-featured-slider .slick-dots li {
        margin: 0;
        padding: 0;
    }

    .td-mob-featured-slider .slick-dots button {
        font-size: 0;
        line-height: 0;
        width: 7px;
        height: 7px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: rgba(255, 255, 255, .45);
    }

    .td-mob-featured-slider .slick-dots .slick-active button {
        background: rgba(255, 255, 255, .95);
    }

    .td-mob-grid-card {
        height: 120px;
    }

    /* The two lower cards should be a single static block without images */
    .td-mob-grid-card-noimg {
        background: transparent;
        border: 0;
        height: auto;
        min-height: 80px;
    }

    .td-mob-grid-card-noimg .td-mob-caption {
        position: static;
        padding: 8px 10px 4px;
        color: #fff;
    }

    .td-mob-grid-card-noimg .td-mob-title a {
        color: #fff !important;
        -webkit-line-clamp: 3;
    }

    .td-mob-card-date {
        margin-top: 4px;
        font-size: 11px;
        line-height: 1.2;
        color: #9ff0b8;
        opacity: .95;
    }

    /* Home-only: reduce "banner-only" look by hiding ad blocks under the mobile-home shell */
    .td-mob-home~#wrapper .bn-header-mobile,
    .td-mob-home~#wrapper .mobile-sticky-sidebars,
    .td-mob-home~#wrapper .col-bn-ds,
    .td-mob-home~#wrapper .col-bn-mb {
        display: none !important;
    }

    /* Ad Space Fixes: Ensure banners don't overflow and cause semrawut layout */
    .ad-space-wrapper {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .ad-space-wrapper .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .ad-space-wrapper .col-xs-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .bn-inner,
    .bn-content {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .bn-inner img,
    .bn-inner iframe {
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }

    .td-mob-grid-side {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        border-top: 1px solid rgba(255, 255, 255, .14);
    }

    .td-mob-grid-side-slider {
        width: 100%;
        overflow: hidden;
        padding-bottom: 12px;
    }

    /* Slick wrappers sometimes bring margins/transforms that can visually "leak" past the green block */
    #td-mob-grid-side-slider .slick-list,
    #td-mob-grid-side-slider .slick-track {
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    /* Fallback Slick layout for the side slider to prevent vertical stacking */
    #td-mob-grid-side-slider.slick-initialized .slick-list {
        overflow: hidden;
    }

    /* Prevent collapsing heights after Slick init (would make titles "disappear") */
    #td-mob-grid-side-slider.slick-initialized,
    #td-mob-grid-side-slider.slick-initialized .slick-list,
    #td-mob-grid-side-slider.slick-initialized .slick-track,
    #td-mob-grid-side-slider.slick-initialized .slick-slide {
        height: auto !important;
        min-height: 1px;
    }

    #td-mob-grid-side-slider.slick-initialized .slick-track {
        display: flex !important;
        align-items: stretch;
    }

    /* Same mid-init safety for the 2-article Trending side slider */
    #td-mob-grid-side-slider .slick-track {
        display: flex !important;
        align-items: stretch;
    }

    #td-mob-grid-side-slider .slick-slide {
        display: block !important;
        flex: 0 0 100%;
        max-width: 100%;
    }

    #td-mob-grid-side-slider .slick-slide.td-mob-grid-side-slide {
        display: grid !important;
    }

    /* If Slick gets stuck in loading state, its CSS hides slides via visibility. Keep Trending titles visible. */
    #td-mob-grid-side-slider.slick-loading .slick-track,
    #td-mob-grid-side-slider.slick-loading .slick-slide {
        visibility: visible !important;
    }

    /* Keep the 2-article Trending side slider contained within the green block */
    #td-mob-grid-side-slider,
    #td-mob-grid-side-slider .slick-list,
    #td-mob-grid-side-slider .slick-track,
    #td-mob-grid-side-slider .td-mob-grid-side-slide {
        max-width: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }

    /* Anti-FOUC for the 2-article slider: before Slick initializes, avoid showing all pairs */
    #td-mob-grid-side-slider:not(.slick-initialized)>.td-mob-grid-side-slide {
        display: none !important;
    }

    #td-mob-grid-side-slider:not(.slick-initialized)>.td-mob-grid-side-slide:first-child {
        display: grid !important;
    }

    /* No-Slick mode (stable): show all slides and use horizontal scroll snapping */
    #td-mob-grid-side-slider.td-no-slick {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        gap: 0;
    }

    #td-mob-grid-side-slider.td-no-slick::-webkit-scrollbar {
        display: none;
    }

    #td-mob-grid-side-slider.td-no-slick>.td-mob-grid-side-slide {
        display: grid !important;
        flex: 0 0 100%;
        scroll-snap-align: start;
    }

    /* Slick can force `.slick-slide { display: block; }` with higher specificity.
       Re-assert 2-up layout for each slide wrapper. */
    #td-mob-grid-side-slider .td-mob-grid-side-slide {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        border-top: 1px solid rgba(255, 255, 255, .14);
    }

    .td-mob-grid-side-slider .slick-list,
    .td-mob-grid-side-slider .slick-track {
        width: 100%;
    }

    .td-mob-grid-side-slide {
        width: 100%;
    }

    .td-mob-grid-side .td-mob-grid-card-noimg:not(:first-child) {
        border-left: 1px solid rgba(255, 255, 255, .14);
    }

    /* Trending row inside the green block */
    .td-mob-grid-trending-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 10px;
        color: #f99500;
        border-top: 1px solid rgba(255, 255, 255, .14);
    }

    .td-mob-grid-trending-label {
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
    }

    .td-mob-grid-trending-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 6px;
        color: #f99500;
    }

    .td-mob-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.75) 100%);
        pointer-events: none;
    }

    .td-mob-cat {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 2;
    }

    .td-mob-caption {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        padding: 12px;
        color: #fff;
    }

    .td-mob-grid-card .td-mob-caption {
        padding: 10px;
    }

    .td-mob-title {
        margin: 0;
        font-weight: 700;
        letter-spacing: .2px;
    }

    .td-mob-grid-hero .td-mob-title {
        font-size: 18px;
        line-height: 24px;
    }

    /* Prevent the hero title from visually “crossing” too far over the image */
    .td-mob-grid-hero .td-mob-title a {
        -webkit-line-clamp: 2;
    }

    .td-mob-grid-card .td-mob-title {
        font-size: 13px;
        line-height: 18px;
    }

    .td-mob-title a {
        color: inherit !important;
        text-decoration: none !important;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .td-mob-grid-card .td-mob-title a {
        -webkit-line-clamp: 2;
    }

    .td-mob-meta {
        margin: 8px 0 0;
        opacity: .88;
        font-size: 12px;
        line-height: 16px;
    }

    /* Trending bar (TagDiv-like horizontal ticker) */
    .td-mob-trending {
        padding: 10px 10px 2px;
    }

    /* Hide the extra Trending/breaking block above Fresh News (keep the Trending row inside the green top block) */
    .td-mob-home .td-mob-trending,
    .td-mob-home .td-mob-trending-block {
        display: none !important;
    }

    /* TagDiv-like Trending block (template 12 / flex block) */
    .td-mob-trending-block {
        margin: 12px 0 0;
        padding: 12px 10px 10px 15px;
        position: relative;
        border-style: solid;
        border-width: 1px;
        border-color: #0b6b46;
        background-color: #0b6b46;
    }

    .td-mob-trending-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 10px;
    }

    .td-mob-trending-title {
        margin: 0;
        font-size: 15px;
        font-weight: 400;
        line-height: 1;
    }

    .td-mob-trending-title span {
        color: #f99500;
    }

    .td-mob-trending-nav {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .td-mob-trending-nav button {
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 3px;
        background: #eeee22;
        color: #000;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .td-mob-trending-nav button:disabled {
        opacity: .55;
    }

    .td-mob-trending-slider {
        margin-left: -4px;
        margin-right: -4px;
    }

    .td-mob-trending-slide {
        padding-left: 4px;
        padding-right: 4px;
    }

    .td-mob-trending-module {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, .18);
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

    /* Remove divider for last visible row (best-effort) */
    .td-mob-trending-slider .slick-slide:nth-last-child(-n+2) .td-mob-trending-module {
        border-bottom: 0;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .td-mob-trending-entry {
        margin: 0 0 4px;
        font-size: 12px;
        line-height: 1.2;
        font-weight: 500;
    }

    .td-mob-trending-entry a {
        color: #ffffff !important;
        text-decoration: none !important;
        box-shadow: inset 0 0 0 0 #000;
    }

    .td-mob-trending-date {
        font-size: 10px;
        line-height: 1.2;
        color: #eded02;
    }

    .td-mob-trending-inner {
        display: flex;
        align-items: center;
        gap: 10px;
        border-top: 1px solid rgba(0, 0, 0, .08);
        border-bottom: 1px solid rgba(0, 0, 0, .08);
        padding: 10px 0;
    }

    .td-mob-trending-label {
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .6px;
        white-space: nowrap;
    }

    .td-mob-trending-items {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        padding-bottom: 2px;
        flex: 1;
    }

    .td-mob-trending-items::-webkit-scrollbar {
        display: none;
    }

    .td-mob-trending-item {
        font-size: 13px;
        line-height: 18px;
        color: inherit;
        text-decoration: none;
    }

    .td-mob-trending-item:active,
    .td-mob-trending-item:focus,
    .td-mob-trending-item:hover {
        text-decoration: underline;
    }

    /* TagDiv-like mobile header skeleton */
    #td-header-menu {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60px;
    }

    #td-top-mobile-toggle,
    .td-search-icon {
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .td-main-menu-logo {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
    }

    .ep-stock-ticker {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        height: 24px !important;
    }

    .visible-xs-block.visible-sm-block {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Use Classic JS, but make overlays behave like WP */
    #overlay_bg {
        visibility: visible !important;
    }

    .td-search-background,
    .td-search-wrap {
        visibility: visible !important;
    }

    .td-search-background {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .6);
        z-index: 9998;
    }

    .td-search-wrap {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 9999;
        padding: 16px;
    }

    .td-search-wrap .search-form {
        width: 100%;
        max-width: 640px;
        margin: 60px auto 0;
        background: #fff;
        border-radius: 10px;
        padding: 12px;
    }

    /* Classic toggles .search-form.open; use that to show WP-like overlay */
    .td-search-wrap .search-form.open {
        display: block;
    }

    .td-search-wrap .search-form.open~* {
        display: block;
    }

    .td-search-wrap:has(.search-form.open) {
        display: block;
    }

    .td-search-background:has(+ .td-search-wrap .search-form.open) {
        display: block;
    }

    /* Mobile menu: add a WP-like top strip */
    #navMobile .td-menu-socials-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

    #navMobile .td-menu-socials-wrap .mobile-menu-social {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    #navMobile .td-menu-socials-wrap .td-mobile-close a {
        color: inherit;
        font-size: 18px;
        padding: 8px;
        display: inline-block;
    }

    /* Force the mobile header layout on small screens (WP-like mobile home). */
    #header .top-bar,
    #header .logo-banner,
    #header .main-menu {
        display: none !important;
    }

    .mobile-nav-container {
        display: block !important;
        min-height: 60px;
    }

    .nav-mobile-header {
        display: block !important;
    }

    /* Note: Classic theme already reserves space for the fixed mobile header
       via .mobile-nav-container { min-height: 60px; }.
       Avoid adding extra padding here (it creates a blank gap). */

    /* Home title: keep the homepage compact (WP-like mobile layout). */
    .title-index {
        display: none;
    }

    /* Mobile header: dark bar + white icons (WP-like). */
    .nav-mobile-header {
        background-color: #222 !important;
        border-bottom: 0 !important;
        padding: 0 !important;
    }

    .nav-mobile-header-container .menu-icon,
    .nav-mobile-header-container .mobile-search {
        width: 60px !important;
        height: 60px !important;
    }

    .nav-mobile-header-container .menu-icon a,
    .nav-mobile-header-container .mobile-search .search-icon {
        color: #fff !important;
        padding: 18px !important;
    }

    .nav-mobile-header-container .mobile-logo .logo {
        max-height: 60px;
        max-width: 250px;
    }

    body.dark-mode .td-mob-tagtrend .td-mob-tagtrend-text {
        color: rgba(255, 255, 255, 0.95);
    }

    body.dark-mode .td-mob-tagtrend .td-mob-tagtrend-buttons a.td-mob-tagtrend-text {
        color: #19bc9c;
    }

    /* Mobile: Terpopuler (2-tab) */
    .td-mob-popular {
        margin: 8px 10px 0;
        padding: 12px;
        background: #f6f6f6;
        border-radius: 12px;
        border: 1px solid rgba(0, 0, 0, 0.08);
    }

    body.dark-mode .td-mob-popular {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.10);
    }

    .td-mob-popular__header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
    }

    .td-mob-popular__icon {
        color: #0b6b46;
        flex: 0 0 auto;
    }

    .td-mob-popular__title {
        margin: 0;
        font-size: 16px;
        line-height: 20px;
        font-weight: 900;
        color: #222;
    }

    body.dark-mode .td-mob-popular__title {
        color: rgba(255, 255, 255, 0.95);
    }

    .td-mob-popular__tabs {
        display: flex;
        gap: 8px;
        margin-bottom: 10px;
    }

    .td-mob-popular__tab {
        flex: 1 1 0;
        height: 36px;
        border-radius: 10px;
        border: 1px solid rgba(0, 0, 0, 0.12);
        background: #fff;
        font-size: 13px;
        font-weight: 900;
        padding: 0 10px;
        line-height: 36px;
        text-align: center;
        color: #222;
        cursor: pointer;
    }

    .td-mob-popular__tab.is-active {
        background: #eeee22;
        border-color: rgba(0, 0, 0, 0.10);
        color: #0b6b46;
    }

    body.dark-mode .td-mob-popular__tab {
        background: #1f1f1f;
        border-color: rgba(255, 255, 255, 0.12);
        color: rgba(255, 255, 255, 0.95);
    }

    body.dark-mode .td-mob-popular__tab.is-active {
        background: #eeee22;
        color: #0b6b46;
        border-color: rgba(255, 255, 255, 0.12);
    }

    .td-mob-popular__items {
        list-style: none;
        margin: 0;
        padding: 0;
        counter-reset: td-mob-popular-rank;
    }

    .td-mob-popular__item {
        counter-increment: td-mob-popular-rank;
    }

    .td-mob-popular__item:not(:first-child) {
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }

    body.dark-mode .td-mob-popular__item:not(:first-child) {
        border-top-color: rgba(255, 255, 255, 0.10);
    }

    .td-mob-popular__link {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 0;
        text-decoration: none !important;
        color: inherit;
    }

    .td-mob-popular__link::after {
        content: counter(td-mob-popular-rank);
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        line-height: 1;
        font-weight: 900;
        color: #0b6b46;
        background: rgba(11, 107, 70, 0.10);
        border: 1px solid rgba(11, 107, 70, 0.22);
        margin-top: 2px;
    }

    body.dark-mode .td-mob-popular__link::after {
        color: #eeee22;
        background: rgba(238, 238, 34, 0.10);
        border-color: rgba(238, 238, 34, 0.22);
    }

    .td-mob-popular__figure {
        flex: 0 0 auto;
        width: 90px;
        height: 90px;
        margin: 0;
        border-radius: 12px;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.06);
        position: relative;
    }

    .td-mob-popular__figure .img-bg {
        display: none !important;
    }

    .td-mob-popular__figure .img-container {
        position: absolute;
        inset: 0;
    }

    .td-mob-popular__figure img,
    .td-mob-popular__figure .img-container img,
    .td-mob-popular__figure img.img-cover,
    .td-mob-popular__figure img.img-post {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        display: block;
    }

    .td-mob-popular__detail {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .td-mob-popular__item-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 15px;
        line-height: 20px;
        font-weight: 800;
        color: #222;
    }

    body.dark-mode .td-mob-popular__item-title {
        color: rgba(255, 255, 255, 0.95);
        font-weight: 700;
        line-height: 21px;
    }

    .td-mob-popular__item-cat {
        font-size: 12px;
        line-height: 14px;
        font-weight: 900;
        color: #0b6b46;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.dark-mode .td-mob-popular__item-cat {
        color: rgba(238, 238, 34, 0.95);
    }

    .td-mob-popular__more {
        display: inline-block;
        margin-top: 8px;
        font-size: 13px;
        font-weight: 900;
        text-decoration: none !important;
        color: inherit;
    }

    .td-mob-freshnews-more {
        position: relative;
        z-index: 3;
        padding-top: 6px;
        padding-bottom: 8px;
    }

    .td-mob-freshnews-more-btn {
        width: 100%;
        text-align: center;
        display: block;
    }

    /* Fresh News: "Artikel lainnya" swipe row (5 tiles: 4 posts + "Lihat lebih banyak") */
    .td-mob-macro {
        margin: 8px 10px 0;
        padding: 12px;
        background: #f6f6f6;
        border-radius: 12px;
        border: 1px solid rgba(0, 0, 0, 0.08);
    }

    body.dark-mode .td-mob-macro {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.10);
    }

    .td-mob-macro__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .td-mob-macro__title {
        margin: 0;
        font-size: 16px;
        line-height: 20px;
        font-weight: 900;
        color: #222;
    }

    body.dark-mode .td-mob-macro__title {
        color: rgba(255, 255, 255, 0.95);
    }

    .td-mob-freshnews-more-row {
        padding-top: 10px;
        padding-bottom: 16px;
    }

    .td-mob-macro .td-mob-freshnews-more-row {
        padding-top: 0;
        padding-bottom: 0;
    }

    .td-mob-more-slider {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-bottom: 2px;
    }

    .td-mob-more-slider::-webkit-scrollbar {
        display: none;
    }

    .td-mob-more-card {
        flex: 0 0 auto;
        width: 34vw;
        max-width: 160px;
        aspect-ratio: 3 / 4;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border-radius: 6px;
        border: 1px solid rgba(0, 0, 0, 0.08);
        background: #fff;
        text-decoration: none !important;
        color: inherit;
        scroll-snap-align: start;
    }

    body.dark-mode .td-mob-more-card {
        background: #1f1f1f;
        border-color: rgba(255, 255, 255, 0.10);
    }

    .td-mob-more-img {
        flex: 1 1 50%;
        display: block;
        overflow: hidden;
        background: #f2f2f2;
    }

    body.dark-mode .td-mob-more-img {
        background: rgba(255, 255, 255, 0.08);
    }

    .td-mob-more-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        display: block;
    }

    .td-mob-more-body {
        flex: 1 1 50%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 6px;
        padding: 8px;
        min-height: 0;
    }

    .td-mob-more-meta {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        line-height: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .td-mob-more-cat {
        font-weight: 800;
        color: #555;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.dark-mode .td-mob-more-cat {
        color: rgba(255, 255, 255, 0.80);
    }

    .td-mob-more-sep {
        color: #999;
        flex: 0 0 auto;
    }

    body.dark-mode .td-mob-more-sep {
        color: rgba(255, 255, 255, 0.35);
    }

    .td-mob-more-ago {
        font-weight: 600;
        color: #777;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.dark-mode .td-mob-more-ago {
        color: rgba(255, 255, 255, 0.60);
    }

    .td-mob-more-title {
        font-size: 13px;
        line-height: 16px;
        font-weight: 700;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    body.dark-mode .td-mob-more-title {
        color: rgba(255, 255, 255, 0.95);
        line-height: 17px;
    }

    .td-mob-more-date {
        margin-top: 6px;
        font-size: 12px;
        line-height: 14px;
        color: #777;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.dark-mode .td-mob-more-date {
        color: rgba(255, 255, 255, 0.55);
    }

    .td-mob-more-card--more {
        align-items: center;
        justify-content: center;
    }

    .td-mob-more-card--more-narrow {
        width: 26vw;
        max-width: 120px;
    }

    .td-mob-more-more {
        font-size: 14px;
        font-weight: 800;
        text-align: center;
        padding: 10px;
    }

    body.dark-mode .td-mob-more-more {
        color: rgba(255, 255, 255, 0.90);
    }

    /* Special content block (Liputan6-like: banner + category list) */
    .special-content-inner {
        margin: 8px 10px 0;
        position: relative;
        z-index: 1;
    }

    .special-content-banner {
        margin-bottom: 10px;
    }

    /* When banner is placed inside the green box, remove the external spacing */
    .special-content-inner-box .special-content-banner {
        margin-bottom: 0;
    }

    .special-content-inner-box .special-content-banner .bn-inner {
        display: block;
        border-radius: 0;
        overflow: hidden;
    }

    /* Prevent Bootstrap .row negative margins from bleeding full-width inside this inset block */
    .special-content-banner .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .special-content-banner .col-bn-mb,
    .special-content-banner .col-bn-ds {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .special-content-banner .bn-content {
        padding: 0 !important;
    }

    .special-content-banner .bn-inner {
        border-radius: 3px;
        overflow: hidden;
    }

    .special-content-inner-box {
        background: #0b6b46;
        border-radius: 12px;
        border: 0;
        overflow: hidden;
        --sc-accent: #0b6b46;
    }

    .special-content-inner-box-link {
        display: block;
        padding: 12px 14px;
        background: #084f35;
        text-decoration: none !important;
        color: inherit;
    }

    .special-content-inner-box-title {
        display: inline-block;
        position: relative;
        padding-left: 12px;
        font-size: 18px;
        line-height: 22px;
        font-weight: 900;
        letter-spacing: 0.2px;
        text-transform: uppercase;
        color: #fff;
    }

    .special-content-inner-box-title::before {
        content: "";
        position: absolute;
        left: 0;
        top: 2px;
        bottom: 2px;
        width: 4px;
        border-radius: 3px;
        background: rgba(255, 255, 255, 0.95);
    }

    .special-content-inner-box-list {
        list-style: none;
        margin: 0;
        padding: 0 14px;
    }

    /* Scrollable list (show ~3 items, scroll for the rest) */
    .special-content-inner-box-list {
        /* ~3.5 items visible, hinting it can be scrolled */
        max-height: 410px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .special-content-inner-box-list::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    .special-content-inner-box-list-item {
        padding: 0;
    }

    .special-content-inner-box-list-item:not(:first-child) {
        border-top: 1px solid rgba(255, 255, 255, 0.18);
    }

    .special-content-inner-box-list-item-link {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 0;
    }

    .special-content-inner-box-list-item-detail {
        flex: 1 1 auto;
        min-width: 0;
    }

    .special-content-inner-box-list-item-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 15px;
        line-height: 20px;
        font-weight: 800;
        text-decoration: none !important;
        color: #fff;
    }

    .special-content-inner-box-list-item:hover .special-content-inner-box-list-item-title {
        color: #fff;
    }

    .special-content-inner-box-list-item-time {
        display: block;
        margin-top: 6px;
        font-size: 12px;
        line-height: 14px;
        color: rgba(255, 255, 255, 0.70);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .special-content-inner-box-list-item-figure-link {
        flex: 0 0 auto;
        text-decoration: none !important;
        color: inherit;
    }

    .special-content-inner-box-list-item-figure {
        width: 92px;
        height: 92px;
        margin: 0;
        border-radius: 12px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.10);
        position: relative;
    }

    .special-content-inner-box-list-item-figure .img-bg {
        display: none !important;
    }

    .special-content-inner-box-list-item-figure .img-container {
        position: absolute;
        inset: 0;
    }

    .special-content-inner-box-list-item-figure img,
    .special-content-inner-box-list-item-figure .img-container img,
    .special-content-inner-box-list-item-figure img.img-cover,
    .special-content-inner-box-list-item-figure img.img-post {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        display: block;
    }

    /* Other Market (mobile): 2-column grid, card layout (image on top) */
    .special-content-inner[aria-label="Other Market"] .special-content-inner-box-link {
        display: block;
        padding: 12px 14px 8px;
    }

    .special-content-inner[aria-label="Other Market"] .special-content-inner-box-list {
        /* Show ~2 rows at a time; allow scroll for the rest */
        grid-auto-rows: 190px;
        max-height: calc((190px * 2) + 10px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 0 14px 14px;
    }

    .special-content-inner[aria-label="Other Market"] .special-content-inner-box-list-item {
        border-top: 0;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 12px;
        overflow: hidden;
    }

    .special-content-inner[aria-label="Other Market"] .special-content-inner-box-list-item:not(:first-child) {
        border-top: 0;
    }

    .special-content-inner[aria-label="Other Market"] .special-content-inner-box-list-item-link {
        flex-direction: column;
        gap: 0;
        padding: 0;
        height: 100%;
    }

    .special-content-inner[aria-label="Other Market"] .special-content-inner-box-list-item-figure-link {
        order: 0;
        width: 100%;
    }

    .special-content-inner[aria-label="Other Market"] .special-content-inner-box-list-item-detail {
        order: 1;
        padding: 10px 10px 12px;
    }

    .special-content-inner[aria-label="Other Market"] .special-content-inner-box-list-item-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .special-content-inner[aria-label="Other Market"] .special-content-inner-box-list-item-figure {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        border-radius: 0;
    }

    .special-content-inner[aria-label="Other Market"] .special-content-inner-box-list-item.td-sc-more {
        background: transparent;
        border-style: dashed;
    }

    .special-content-inner[aria-label="Other Market"] .special-content-inner-box-list-item.td-sc-more .special-content-inner-box-list-item-detail {
        padding: 14px 10px;
        text-align: center;
    }

    .special-content-inner-box-button {
        display: block;
        margin: 12px 14px 14px;
        padding: 10px 12px;
        border-radius: 10px;
        border: 2px solid var(--sc-accent);
        color: var(--sc-accent);
        font-weight: 900;
        text-align: center;
        text-decoration: none !important;
    }

    body.dark-mode .special-content-inner-box {
        background: #1f1f1f;
        border-color: rgba(255, 255, 255, 0.10);
    }

    body.dark-mode .special-content-inner-box-list-item:not(:first-child) {
        border-top-color: rgba(255, 255, 255, 0.10);
    }

    body.dark-mode .special-content-inner-box-list-item-time {
        color: rgba(255, 255, 255, 0.55);
    }

    /* Rekomendasi block (detik.com-like structure) */
    .cb-rekomendit {
        margin: 12px 10px 0;
        padding: 12px 10px;
        background: #f6f6f6;
        border-radius: 10px;
        border: 1px solid rgba(0, 0, 0, 0.08);
    }

    body.dark-mode .cb-rekomendit {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.10);
    }

    .cb-rekomendit__logo {
        display: block;
        width: auto;
        margin: -12px -10px 10px;
        border-radius: 10px 10px 0 0;
        overflow: hidden;
    }

    .cb-rekomendit__logo img {
        width: 100%;
        height: auto;
        display: block;
    }

    .cb-rekomendit__cta {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 10px;
        margin-top: 8px;
        margin-bottom: 10px;
    }

    .cb-rekomendit__cta p {
        margin: 0;
        font-size: 14px;
        line-height: 18px;
        font-weight: 700;
        color: #222;
    }

    body.dark-mode .cb-rekomendit__cta p {
        color: rgba(255, 255, 255, 0.95);
    }

    .cb-rekomendit__cta a {
        font-size: 13px;
        font-weight: 800;
        text-decoration: none !important;
        white-space: nowrap;
    }

    body.dark-mode .cb-rekomendit__cta a {
        color: #eeee22;
    }

    .cb-rekomendit__slider {
        position: relative;
    }

    .cb-rekomendit__track {
        width: 100%;
    }

    /* Before Slick initializes, keep it slider-like (no dropdown/list flash) */
    .cb-rekomendit__track:not(.slick-initialized) {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .cb-rekomendit__track:not(.slick-initialized)::-webkit-scrollbar {
        display: none;
    }

    .cb-rekomendit__track:not(.slick-initialized) .cb-rekomendit__slide {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    #td-mob-rekomendit-slider:not(.slick-initialized)~#td-mob-rekomendit-dots,
    #td-mob-rekomendit-slider:not(.slick-initialized)~#td-mob-rekomendit-prev,
    #td-mob-rekomendit-slider:not(.slick-initialized)~#td-mob-rekomendit-next {
        display: none;
    }

    .cb-rekomendit__slide {
        width: 171px;
        padding-right: 10px;
        box-sizing: border-box;
    }

    .cb-rekomendit__slide--more {
        width: 120px;
    }

    .cb-rekomendit__more {
        display: block;
        text-decoration: none !important;
        color: inherit;
    }

    .cb-rekomendit__more-thumb {
        width: 100%;
        height: 110px;
        display: block;
        border-radius: 10px;
        border: 1px dashed rgba(0, 0, 0, 0.18);
        background: rgba(255, 255, 255, 0.65);
        box-sizing: border-box;
    }

    .cb-rekomendit__more-body {
        display: block;
        padding-top: 8px;
    }

    .cb-rekomendit__more-title {
        margin: 6px 0 0;
        font-size: 13px;
        line-height: 17px;
        font-weight: 900;
        color: #222;
    }

    .cb-rekomendit__item {
        display: block;
        text-decoration: none !important;
        color: inherit;
    }

    .cb-rekomendit__item img {
        width: 100% !important;
        height: 110px !important;
        object-fit: cover;
        display: block;
        border-radius: 10px;
    }

    .cb-rekomendit__item>span {
        display: inline-block;
        margin-top: 8px;
        font-size: 12px;
        font-weight: 800;
        color: #555;
    }

    .cb-rekomendit__meta {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 8px;
        font-size: 12px;
        line-height: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #555;
    }

    body.dark-mode .cb-rekomendit__meta {
        color: rgba(255, 255, 255, 0.70);
    }

    .cb-rekomendit__cat {
        font-weight: 800;
    }

    .cb-rekomendit__sep {
        color: #999;
        flex: 0 0 auto;
    }

    body.dark-mode .cb-rekomendit__sep {
        color: rgba(255, 255, 255, 0.35);
    }

    .cb-rekomendit__ago {
        font-weight: 600;
        color: #777;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body.dark-mode .cb-rekomendit__ago {
        color: rgba(255, 255, 255, 0.60);
    }

    .cb-rekomendit__item p,
    .cb-rekomendit__title {
        margin: 6px 0 0;
        font-size: 13px;
        line-height: 17px;
        font-weight: 700;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    body.dark-mode .cb-rekomendit__item p,
    body.dark-mode .cb-rekomendit__title {
        color: rgba(255, 255, 255, 0.95);
        line-height: 18px;
    }

    .cb-rekomendit__dots {
        margin-top: 10px;
    }

    .cb-rekomendit__dots .slick-dots {
        position: static;
        margin: 0;
        padding: 0;
        display: flex !important;
        justify-content: center;
        gap: 6px;
        list-style: none;
    }

    .cb-rekomendit__dots .slick-dots li {
        margin: 0;
        padding: 0;
    }

    .cb-rekomendit__dots .slick-dots button {
        width: 8px;
        height: 8px;
        padding: 0;
        border-radius: 999px;
        border: 0;
        background: rgba(0, 0, 0, 0.18);
        font-size: 0;
        line-height: 0;
    }

    body.dark-mode .cb-rekomendit__dots .slick-dots button {
        background: rgba(255, 255, 255, 0.22);
    }

    .cb-rekomendit__dots .slick-dots li.slick-active button {
        background: rgba(0, 0, 0, 0.45);
    }

    body.dark-mode .cb-rekomendit__dots .slick-dots li.slick-active button {
        background: rgba(255, 255, 255, 0.55);
    }

    .cb-rekomendit__prev,
    .cb-rekomendit__next {
        position: absolute;
        top: 48px;
        width: 32px;
        height: 32px;
        border: 0;
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.55);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        z-index: 5;
    }

    .cb-rekomendit__prev {
        left: 6px;
    }

    .cb-rekomendit__next {
        right: 6px;
    }

    /* Featured block: WP-like stacking (big item + 2x2 small items). */
    #featured .featured-left,
    #featured .featured-right {
        width: 100% !important;
        float: none !important;
    }

    #featured .featured-right {
        display: block !important;
        margin-top: 8px;
        clear: both;
    }

    #featured .featured-right::after {
        content: "";
        display: table;
        clear: both;
    }

    #featured .featured-right .featured-box {
        width: 50% !important;
        float: left !important;
    }

    #featured .featured-right .featured-box .box-inner {
        margin: 4px;
    }

    /* Featured block: tighter spacing + readable titles */
    .section-featured {
        margin-top: 0;
    }

    #featured {
        margin-top: 0;
    }

    #featured .featured-left {
        padding-bottom: 2px;
    }

    #featured .featured-slider-item .category-label,
    #featured .featured-box .category-label {
        top: 10px;
        left: 10px;
    }

    .featured-slider .featured-slider-item .caption {
        padding: 12px;
    }

    .featured-slider .featured-slider-item .caption .title {
        font-size: 18px;
        line-height: 24px;
        margin-top: 8px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .featured-box .caption {
        padding: 10px;
    }

    .featured-box .caption .title {
        font-size: 14px;
        line-height: 20px;
        margin-top: 6px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Fresh News (Latest posts) - mobile layout like screenshot */
    .latest-posts-section {
        position: relative;
    }

    /* Mobile requirement: show 5 posts only + use a single "Lihat lainnya" button */
    .latest-posts-section #last_posts_content .td-mob-latest-item:nth-child(n+6) {
        display: none !important;
    }

    .latest-posts-section #load_posts_spinner,
    .latest-posts-section button.btn-load-more {
        display: none !important;
    }

    .latest-posts-section .td-mob-latest-more {
        padding: 0 10px 10px;
    }

    .latest-posts-section .td-mob-latest-wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .latest-posts-section .td-mob-latest-more-btn {
        width: 100%;
        text-align: center;
    }

    /* Default hide on larger screens; shown by this mobile @media block */
    .latest-posts-section .td-mob-latest-more-btn {
        display: block;
    }

    .latest-posts-section.section {
        margin-bottom: 18px;
    }

    .latest-posts-section .section-head {
        display: none;
    }

    .latest-posts-section .td-mob-block-title {
        display: inline-flex;
        align-items: stretch;
        gap: 0;
        position: absolute;
        top: -18px;
        right: 10px;
        margin: 0;
        padding: 0;
        border: 0;
        z-index: 5;
    }

    .latest-posts-section .td-mob-block-title .td-mob-freshnews-label {
        display: inline-flex;
        align-items: center;
        padding: 10px 14px;
        background: #c10b0b;
        color: #fff;
        font-size: 18px;
        font-weight: 800;
        line-height: 1;
        text-transform: none;
        letter-spacing: 0;
        border-radius: 2px 0 0 2px;
    }

    .latest-posts-section .td-mob-block-title .td-mob-freshnews-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 10px;
        background: #b30a0a;
        color: #fff;
        border-radius: 0 2px 2px 0;
    }

    .latest-posts-section .section-content {
        margin-top: 0 !important;
        /* Make room for the absolute Fresh News ribbon */
        padding-top: 58px;
    }

    /* Ensure the list takes full width even though it sits directly inside a `.row` */
    .latest-posts-section #last_posts_content {
        width: 100% !important;
    }

    .latest-posts-section #last_posts_content .td-mob-latest-item {
        margin: 0 0 8px;
    }

    /* Bootstrap rows use negative margins; reset so the list stays inside the block */
    .latest-posts-section .latest-articles {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .latest-posts-section .latest-articles>.col-sm-12.col-xs-12 {
        padding-left: 0;
        padding-right: 0;
    }

    .latest-posts-section .latest-articles>.col-sm-12.col-xs-12>.row {
        margin-left: 0;
        margin-right: 0;
    }

    .latest-posts-section .post-item-horizontal {
        position: relative;
        margin: 0 0 8px;
        padding: 12px 10px;
        border: 0 !important;
    }

    .latest-posts-section .post-item-horizontal:not(.post-item-no-image) {
        display: flex;
        flex-direction: row-reverse;
        align-items: flex-start;
        gap: 10px;
    }

    .latest-posts-section .post-item-horizontal:not(.post-item-no-image) .item-image,
    .latest-posts-section .post-item-horizontal:not(.post-item-no-image) .item-content {
        float: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .latest-posts-section .post-item-horizontal:not(.post-item-no-image) .item-image {
        width: 42% !important;
        max-width: 42% !important;
        flex: 0 0 42% !important;
    }

    .latest-posts-section .post-item-horizontal:not(.post-item-no-image) .item-content {
        width: 58% !important;
        max-width: 58% !important;
        flex: 0 0 58% !important;
    }

    .latest-posts-section .post-item-horizontal .post-item-image {
        overflow: hidden;
        border-radius: 3px;
    }

    .latest-posts-section .post-item-horizontal .post-item-image img {
        width: 100% !important;
        height: 78px;
        object-fit: cover;
        display: block;
    }

    .latest-posts-section .category-label-horizontal {
        position: absolute;
        right: 12px;
        bottom: 12px;
        border-radius: 2px;
        font-weight: 700;
        font-size: 12px;
    }

    .latest-posts-section .category-label-horizontal:empty {
        display: none !important;
    }

    .latest-posts-section .post-item-horizontal .title {
        font-size: 16px;
        line-height: 20px;
        margin: 0 0 6px;
        font-weight: 700;
    }

    .latest-posts-section .post-item-horizontal .title a {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .latest-posts-section .post-item-horizontal .small-post-meta {
        margin: 0;
        font-size: 12px;
        line-height: 16px;
        color: #777;
    }

    .latest-posts-section .post-item-horizontal .small-post-meta>a {
        display: none;
    }

    .latest-posts-section .post-item-horizontal .small-post-meta>span {
        display: none;
    }

    .latest-posts-section .post-item-horizontal .small-post-meta>span:first-of-type {
        display: inline;
    }

    .latest-posts-section .post-item-horizontal .description {
        display: none;
    }

    .post-item-horizontal .small-post-meta {
        margin-bottom: 0;
        font-size: 12px;
        line-height: 18px;
    }

    .post-item-horizontal .description {
        display: none;
    }

    .post-item-horizontal .category-label {
        left: 8px;
        top: 8px;
    }

    /* ============================================
       SINGLE POST PAGE - ULTRA AGGRESSIVE SPACING
       ============================================ */

    /* Main content container */
    #content.col-sm-8,
    #content.col-sm-12 {
        padding: 0 10px !important;
    }

    .post-content {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Category label */
    .post-content>p.m-0 {
        margin: 0 !important;
    }

    /* Title */
    .post-content .title {
        margin: 4px 0 !important;
        font-size: 20px !important;
        line-height: 1.3 !important;
    }

    /* Summary */
    .post-content .post-summary {
        margin: 0 0 4px !important;
    }

    .post-content .post-summary h2 {
        font-size: 13px !important;
        line-height: 1.35 !important;
        margin: 0 !important;
    }

    /* Meta (date, views, comments) */
    .post-content .post-meta {
        margin: 0 0 4px !important;
        font-size: 11px !important;
    }

    .post-details-meta-date {
        margin: 0 !important;
    }

    /* Share buttons */
    .post-content .post-share {
        margin: 0 0 5px !important;
        padding: 0 !important;
    }

    .post-content .share-box {
        margin: 0 !important;
        padding: 0 !important;
    }

    .post-content .share-box li {
        margin: 2px !important;
    }

    /* Featured Image */
    .post-content .post-image {
        margin: 0 0 5px !important;
    }

    .post-content .post-image-inner {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* TTS Player */
    .ep-tts-player {
        margin: 5px 0 !important;
        padding: 5px 10px !important;
    }

    .ep-tts-label {
        font-size: 11px !important;
    }

    .ep-tts-btn {
        width: 30px !important;
        height: 30px !important;
    }

    /* Ad Wrappers - ULTRA AGGRESSIVE */
    .post-content .ad-space-wrapper,
    #content .ad-space-wrapper {
        margin: 0 !important;
        padding: 0 !important;
    }

    .ad-space-wrapper .row {
        margin: 0 !important;
    }

    .ad-space-wrapper .col-sm-12,
    .ad-space-wrapper .col-xs-12,
    .col-bn-ds,
    .col-bn-mb {
        padding: 0 !important;
        margin: 0 !important;
    }

    .bn-content {
        margin: 0 !important;
        padding: 0 !important;
    }

    .bn-inner {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Post text content */
    .post-content .post-text {
        margin: 0 !important;
        padding: 0 !important;
    }

    .post-text p {
        margin: 0 0 12px !important;
    }

    .post-text p:first-child {
        margin-top: 0 !important;
    }

    .ep-emtrust {
        margin: 0 !important;
    }

    /* Tags */
    .post-tags {
        margin: 10px 0 !important;
        padding: 10px 0 !important;
        border-top: 1px solid #eee;
    }

    /* Next/Prev navigation */
    .post-next-prev {
        margin: 0 !important;
        padding: 10px 0 !important;
    }

    .post-next-prev .row {
        margin: 0 !important;
    }

    /* Reactions section */
    .reactions {
        margin: 0 !important;
        padding: 8px 0 !important;
    }

    .reactions .title-reactions {
        margin: 0 0 5px !important;
        font-size: 13px !important;
    }

    /* Bottom ad */
    .bn-p-b {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Related Posts section */
    .section {
        margin: 0 !important;
        padding: 0 !important;
    }

    .section-related-posts {
        margin: 0 !important;
        padding: 8px 0 0 !important;
    }

    .section-related-posts .section-head {
        margin: 0 0 8px !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .section-related-posts .section-head .title {
        font-size: 13px !important;
        margin: 0 !important;
        text-transform: uppercase;
        font-weight: 800 !important;
        background: #333 !important;
        color: #fff !important;
        padding: 6px 12px !important;
        display: inline-block !important;
    }

    .section-related-posts .section-content {
        margin: 0 !important;
        padding: 0 !important;
    }

    .section-related-posts .row {
        margin: 0 -5px !important;
    }

    .section-related-posts .col-xs-12 {
        padding: 0 5px !important;
        margin-bottom: 10px !important;
    }
}