.breadcrumb{display:flex;gap:8px;align-items:center;font-size:14px;color:#6b7280;margin-bottom:12px}
.breadcrumb a{color:#b40000;font-weight:900}

.article-meta{display:flex;flex-wrap:wrap;gap:8px;color:#6b7280;font-size:14px;margin-bottom:18px}

.share-wa{background:#16a34a}
.share-fb{background:#2563eb}

@media(max-width:960px){

    body{padding-bottom:48px}
}

.det-style-top{
    border-bottom:1px solid #eee;
    padding-bottom:16px;
    margin-bottom:18px;
}
.det-channel{
    display:inline-block;
    background:#eff6ff;
    color:#1146b8;
    font-weight:900;
    padding:7px 11px;
    font-size:13px;
    margin-bottom:10px;
}

.ad-label{
    text-align:center;
    font-size:11px;
    color:#9ca3af;
    letter-spacing:1px;
    margin:18px 0 6px;
}
.read-also-inline{
    border-left:5px solid #1146b8;
    padding:14px;
    border-radius:12px;
    margin:22px 0;
}
.read-also-inline strong{
    display:block;
    color:#1146b8;
    margin-bottom:8px;
}
.read-also-inline a{
    display:block;
    font-weight:900;
    margin:7px 0;
}

.reading-progress{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:4px;
    background:transparent;
    z-index:9999;
}
#reading-progress-bar{
    width:0%;
    height:100%;
    background:linear-gradient(90deg,#f59e0b,#1146b8);
    transition:width .1s linear;
}



@keyframes fadePage{
    from{opacity:0;transform:translateY(8px)}
    to{opacity:1;transform:none}
}

/* Mobile detail */

.post-share,
.article-share,
.share-bottom,
.bottom-share,
.single-share,
.share-icons,
.share-buttons,
.font-size-controls,
.text-size-controls,
.reader-font-tools,
.article-font-size,
.font-resizer,
.text-resizer{
    display:none !important;
}

.info-row,
.report-link{
    display:none !important;
}

.centered-tags{
    display:block !important;
    text-align:left !important;
    margin:32px 0 !important;
    padding-top:22px !important;
    border-top:1px solid #eee !important;
}

.centered-tags .tag-items{
    display:flex !important;
    justify-content:center !important;
    gap:12px !important;
    flex-wrap:wrap !important;
}

.back-kanal{
    display:none !important;
}



/* ===== ARTICLE DESKTOP LAYOUT MATCH HOME SIDEBAR FINAL ===== */

/* ===== DETAIL ARTICLE BALANCED WIDTH FINAL ===== */

/* ===== DETAIL ARTICLE BALANCED POLISH FINAL ===== */

/* FIX MOBILE ARTICLE META OVERFLOW ONLY */

/* === DAILYPOS DETAIL LAYOUT SINGLE SOURCE FINAL === */
body .detail-page,
body .detail-page.container{
    max-width:980px;
    width:100%;
    margin:20px auto 0;
    padding:0 16px;
    box-sizing:border-box;
}

body .detail-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 280px;
    gap:24px;
    align-items:start;
    width:100%;
}

body .detail-grid > .detail-article,
body .detail-page .detail-article{
    min-width:0;
    width:100%;
    max-width:100%;
    padding:0;
    margin:0;
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
    color:#111827;
}

body .detail-sidebar{
    width:280px;
    max-width:280px;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:18px;
    position:sticky;
    top:126px;
}

body .detail-sidebar .side-box,
body .detail-sidebar .box{
    background:transparent;
    border:0;
    border-radius:0;
    padding:0;
    box-shadow:none;
}

body .detail-sidebar .side-news{
    display:block;
    padding:12px 0;
    border-bottom:1px solid #eee;
    color:#111827;
    text-decoration:none;
}

body .detail-sidebar .side-news:last-child{
    border-bottom:0;
}

body .detail-sidebar .side-news strong{
    display:block;
    font-size:14px;
    line-height:1.35;
    font-weight:650;
}

body .detail-sidebar .side-news small,
body .detail-sidebar .popular-row small{
    display:block;
    margin-top:5px;
    color:#6b7280;
    font-size:12px;
}

body .detail-sidebar .popular-row{
    display:grid;
    grid-template-columns:32px minmax(0,1fr);
    gap:10px;
    padding:12px 0;
    border-bottom:1px solid #eee;
}

body .detail-sidebar .popular-row:last-child{
    border-bottom:0;
}

body .detail-sidebar .popular-row span{
    width:28px;
    height:28px;
    border-radius:999px;
    background:#111827;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:700;
}

@media(max-width:1024px){
    body .detail-page,
    body .detail-page.container{
        padding:18px 16px 0;
        max-width:100%;
    }

    body .detail-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    body .detail-sidebar{
        position:static;
        width:100%;
        max-width:none;
    }
}


/* === DAILYPOS INLINE RELATED SINGLE SOURCE FINAL === */
body .detail-article .article-content .inline-related,
body .detail-article .premium-content .inline-related{
    margin:26px 0;
    padding:2px 0 2px 16px;
    border:0;
    border-left:3px solid #b3261e;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    transform:none;
}

body .detail-article .article-content .inline-related strong,
body .detail-article .premium-content .inline-related strong{
    display:block;
    margin:0 0 7px;
    padding:0;
    color:#111827;
    font-size:15px;
    line-height:1.4;
    font-weight:600;
    letter-spacing:0;
}

body .detail-article .article-content .inline-related a,
body .detail-article .premium-content .inline-related a{
    display:block;
    margin:0;
    padding:0;
    border:0;
    color:#8a2f28;
    font-size:17px;
    line-height:1.6;
    font-weight:560;
    letter-spacing:-0.01em;
    text-decoration:none;
}

body .detail-article .article-content p:first-of-type::first-letter,
body .detail-article .premium-content p:first-of-type::first-letter,
body .detail-article .article-content p:first-child::first-letter,
body .detail-article .premium-content p:first-child::first-letter{
    float:none;
    font-size:inherit;
    line-height:inherit;
    font-weight:inherit;
    color:inherit;
    margin:0;
    padding:0;
    text-transform:none;
}

@media(max-width:700px){
    body .detail-article .article-content .inline-related,
    body .detail-article .premium-content .inline-related{
        margin:22px 0;
        padding-left:16px;
    }

    body .detail-article .article-content .inline-related strong,
    body .detail-article .premium-content .inline-related strong{
        font-size:14px;
    }

    body .detail-article .article-content .inline-related a,
    body .detail-article .premium-content .inline-related a{
        font-size:16px;
        line-height:1.5;
    }
}

/* === DAILYPOS READER MODE SINGLE SOURCE FINAL === */
body.reader-mode{
    background:#ffffff;
}

body.reader-mode .site-header,
body.reader-mode .top-strip,
body.reader-mode .navbar,
body.reader-mode .quick-menu,
body.reader-mode .channel-strip,
body.reader-mode .detail-sidebar,
body.reader-mode .footer,
body.reader-mode .floating-actions,
body.reader-mode .ad-slot{
    display:none;
}

body.reader-mode .detail-page{
    max-width:820px;
    margin-left:auto;
    margin-right:auto;
}

body.reader-mode .detail-grid{
    display:block;
}

body.reader-mode .detail-article{
    width:100%;
    max-width:100%;
}

/* === DAILYPOS EDITOR META SINGLE SOURCE FINAL === */
body .detail-article .det-submeta,
body .detail-article .editor-centered-meta{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:8px 10px !important;
    max-width:100% !important;
    margin:0 auto 14px !important;
    padding:10px 0 !important;
    border-top:1px solid #e5e7eb;
    border-bottom:1px solid #e5e7eb;
    color:#6b7280 !important;
    font-size:13px !important;
    line-height:1.45 !important;
    font-weight:400 !important;
    text-align:left !important;
    white-space:normal !important;
}

body .detail-article .editor-meta-with-avatar{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
    min-width:0 !important;
    max-width:100% !important;
    white-space:normal !important;
}

body .detail-article .editor-avatar-img,
body .detail-article .editor-avatar-initial{
    width:24px !important;
    height:24px !important;
    min-width:24px !important;
    border-radius:999px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    object-fit:cover !important;
    font-size:11px !important;
    font-weight:700 !important;
}

body .detail-article .editor-avatar-initial{
    background:#b91c1c !important;
    color:#fff !important;
}

body .detail-article .editor-centered-meta strong{
    font-weight:650 !important;
    color:#374151 !important;
}

body .detail-article .editor-centered-meta a{
    color:inherit !important;
    text-decoration:none !important;
}

body .detail-article .editor-centered-meta .meta-separator{
    opacity:.45 !important;
}

@media(max-width:768px){
    body .detail-article .det-submeta,
    body .detail-article .editor-centered-meta{
        gap:6px 8px !important;
        margin-bottom:12px !important;
        padding:8px 0 !important;
        font-size:12.5px !important;
        line-height:1.45 !important;
    }

    body .detail-article .editor-avatar-img,
    body .detail-article .editor-avatar-initial{
        width:22px !important;
        height:22px !important;
        min-width:22px !important;
        font-size:10px !important;
    }
}

/* === DAILYPOS ARTICLE FIGURE SINGLE SOURCE FINAL === */
body .detail-article > figure,
body .detail-article figure{
    width:100% !important;
    max-width:100% !important;
    margin:22px 0 20px !important;
    padding:0 !important;
}

body .detail-article > figure img,
body .detail-article figure img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    aspect-ratio:16/9 !important;
    object-fit:cover !important;
    border-radius:16px !important;
    background:#e5e7eb !important;
}

body .detail-article > figure figcaption,
body .detail-article figure figcaption,
body .detail-article figcaption{
    display:block !important;
    margin:8px auto 0 !important;
    max-width:94% !important;
    color:#6b7280 !important;
    font-size:13px !important;
    line-height:1.45 !important;
    font-style:italic !important;
    text-align:left !important;
}

@media(max-width:700px){
    body .detail-article > figure,
    body .detail-article figure{
        margin:18px 0 18px !important;
    }

    body .detail-article > figure img,
    body .detail-article figure img{
        border-radius:12px !important;
    }

    body .detail-article > figure figcaption,
    body .detail-article figure figcaption,
    body .detail-article figcaption{
        font-size:12px !important;
        line-height:1.4 !important;
        max-width:96% !important;
    }
}

body .detail-article .comment-section{
    margin-top:34px !important;
    padding-top:24px !important;
    border-top:1px solid #eee !important;
}

body .detail-article .comment-title{
    margin:0 0 20px !important;
    color:#111827 !important;
    font-size:21px !important;
    line-height:1.25 !important;
    font-weight:700 !important;
    letter-spacing:-0.02em !important;
}

body .detail-article .comment-form textarea,
body .detail-article .comment-form input[type="text"],
body .detail-article .comment-form input[type="email"]{
    width:100% !important;
    box-sizing:border-box !important;
    border:1px solid #ddd !important;
    border-radius:10px !important;
    padding:13px 15px !important;
    background:#fafafa !important;
    color:#111827 !important;
    font-size:15px !important;
    line-height:1.45 !important;
}

body .detail-article .comment-form textarea{
    min-height:110px !important;
    resize:vertical !important;
}

body .detail-article .comment-form input[type="email"]{
    margin-top:12px !important;
}

body .detail-article .comment-row{
    display:grid !important;
    grid-template-columns:1fr auto !important;
    gap:12px !important;
    align-items:center !important;
}

body .detail-article .comment-row button{
    border:0 !important;
    background:#c5161d !important;
    color:#fff !important;
    font-size:14px !important;
    font-weight:700 !important;
    padding:12px 22px !important;
    border-radius:999px !important;
    cursor:pointer !important;
}

body .detail-article .comment-save,
body .detail-article .comment-count,
body .detail-article .comment-note{
    color:#6b7280 !important;
    font-size:13px !important;
    line-height:1.55 !important;
}

body .detail-article .comment-tabs{
    display:flex !important;
    gap:10px !important;
    flex-wrap:wrap !important;
    border-top:1px solid #eee !important;
    border-bottom:1px solid #eee !important;
    padding:12px 0 !important;
    margin-top:24px !important;
}

body .detail-article .comment-tabs button{
    border:0 !important;
    background:transparent !important;
    padding:8px 14px !important;
    border-radius:999px !important;
    font-size:13px !important;
    font-weight:650 !important;
    color:#555 !important;
}

body .detail-article .comment-tabs button.active{
    background:#c5161d !important;
    color:#fff !important;
    box-shadow:none !important;
}

body .detail-article .comment-empty{
    text-align:left !important;
    color:#777 !important;
    padding:36px 0 !important;
}

@media(max-width:640px){
    body .detail-article .article-stats-row{
        grid-template-columns:1fr !important;
    }

    body .detail-article .comment-row{
        grid-template-columns:1fr !important;
    }

    body .detail-article .comment-row button{
        width:100% !important;
    }

    body .detail-article .comment-title{
        font-size:19px !important;
    }
}

/* === DAILYPOS ARTICLE TYPOGRAPHY SINGLE SOURCE FINAL === */
body .detail-article .lead{
    margin:18px 0 !important;
    padding-left:16px !important;
    border-left:4px solid #b91c1c !important;
    color:#374151 !important;
    font-size:18px !important;
    line-height:1.35 !important;
    font-weight:400 !important;
}

body .detail-article .article-content,
body .detail-article .premium-content{
    color:#111827 !important;
    font-size:18px !important;
    line-height:1.86 !important;
    font-weight:400 !important;
    letter-spacing:0 !important;
}

body .detail-article .article-content p,
body .detail-article .premium-content p{
    margin:0 0 8px !important;
    font-size:18px !important;
    line-height:1.62 !important;
    font-weight:400 !important;
    text-align:left !important;
}

body .detail-article .article-content a,
body .detail-article .premium-content a{
    color:#b91c1c !important;
    font-weight:650 !important;
    text-decoration:none !important;
}

body .detail-article .article-content h2,
body .detail-article .premium-content h2{
    margin:30px 0 14px !important;
    color:#111827 !important;
    font-size:25px !important;
    line-height:1.35 !important;
    font-weight:700 !important;
    letter-spacing:-0.02em !important;
}

body .detail-article .article-content h3,
body .detail-article .premium-content h3{
    margin:26px 0 12px !important;
    color:#111827 !important;
    font-size:21px !important;
    line-height:1.35 !important;
    font-weight:700 !important;
}

body .detail-article .article-content blockquote,
body .detail-article .premium-content blockquote{
    margin:24px 0 !important;
    padding:16px 18px !important;
    border-left:4px solid #b91c1c !important;
    background:#fff7f7 !important;
    border-radius:12px !important;
    color:#7f1d1d !important;
    font-size:18px !important;
    line-height:1.75 !important;
    font-weight:500 !important;
}

body .detail-article .article-content ul,
body .detail-article .article-content ol,
body .detail-article .premium-content ul,
body .detail-article .premium-content ol{
    margin:18px 0 22px 24px !important;
    line-height:1.8 !important;
}

body .detail-article .article-content li,
body .detail-article .premium-content li{
    margin-bottom:8px !important;
}

body .detail-article .author-box{
    display:flex !important;
    gap:14px !important;
    align-items:center !important;
    margin-top:26px !important;
    padding:15px !important;
    border:1px solid #eee !important;
    border-radius:16px !important;
    background:#ffffff;
}

body .detail-article .author-avatar{
    width:48px !important;
    height:48px !important;
    min-width:48px !important;
    border-radius:999px !important;
    background:#b91c1c !important;
    color:#fff !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:20px !important;
    font-weight:700 !important;
}

body .detail-article .author-box p{
    margin:4px 0 0 !important;
    color:#6b7280 !important;
    font-size:13px !important;
    line-height:1.5 !important;
}


@media(max-width:700px){
    body .detail-article .lead{
        font-size:16px !important;
        line-height:1.6 !important;
    }

    body .detail-article .article-content,
    body .detail-article .premium-content,
    body .detail-article .article-content p,
    body .detail-article .premium-content p{
        font-size:16px !important;
        line-height:1.65 !important;
    }

    body .detail-article .article-content h2,
    body .detail-article .premium-content h2{
        font-size:21px !important;
    }

    body .detail-article .article-content h3,
    body .detail-article .premium-content h3{
        font-size:18px !important;
    }

    body .detail-article .article-content blockquote,
    body .detail-article .premium-content blockquote{
        font-size:16px !important;
        padding:14px !important;
    }
}


/* Auto red lead city DailyPos */
.article-content .singkap-lead-red,
.premium-content .singkap-lead-red{
    color:#000000;
    font-weight:800;
}

/* Nama editor artikel merah */
body .detail-article .editor-centered-meta .singkap-editor-name-red{
    color:#b91c1c !important;
    font-weight:600;
    text-decoration:none !important;
}



/* Final judul detail artikel - satu sumber */
body .detail-article .det-title,
body .detail-article h1.det-title,
body .detail-article .article-title-center{
    display:block !important;
    width:100% !important;
    max-width:860px !important;
    margin:18px auto 16px !important;
    padding:0 !important;
    text-align:center !important;
    color:#111827 !important;
    font-size:30px !important;
    line-height:1.32 !important;
    font-weight:700 !important;
    letter-spacing:-0.3px !important;
}

/* Tablet */
@media (max-width:1024px){
    body .detail-article .det-title,
    body .detail-article h1.det-title,
    body .detail-article .article-title-center{
        font-size:28px !important;
        line-height:1.30 !important;
    }
}

/* Mobile */
@media (max-width:768px){
    body .detail-article .det-title,
    body .detail-article h1.det-title,
    body .detail-article .article-title-center{
        max-width:100% !important;
        margin:16px auto 14px !important;
        font-size:22px !important;
        line-height:1.32 !important;
        letter-spacing:-0.2px !important;
    }
}

/* Meta artikel: editor di atas, tanggal waktu di bawah */
.det-meta{
    flex-direction:column!important;
    gap:8px!important;
    align-items:center!important;
}

.det-meta .meta-separator{
    display:none!important;
}

.det-meta .article-publish-time{
    display:block!important;
    color:#6b7280!important;
    font-size:14px!important;
}

/* FORCE META ARTIKEL STACK FINAL */
body .detail-article .det-meta{
    display:flex!important;
    flex-wrap:nowrap!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    text-align:center!important;
}

body .detail-article .det-meta .editor-meta-with-avatar{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    width:100%!important;
}

body .detail-article .det-meta .article-publish-time{
    display:block!important;
    width:100%!important;
    margin-top:2px!important;
    color:#6b7280!important;
    font-size:14px!important;
    line-height:1.4!important;
    text-align:center!important;
}

body .detail-article .det-meta .meta-separator{
    display:none!important;
}

/* FORCE META EDITOR + TANGGAL STACK */
body .detail-article .det-submeta.editor-centered-meta{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    text-align:center!important;
}

body .detail-article .det-submeta.editor-centered-meta .editor-meta-with-avatar{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    width:100%!important;
}

body .detail-article .det-submeta.editor-centered-meta .article-publish-time{
    display:block!important;
    width:100%!important;
    margin-top:2px!important;
    color:#6b7280!important;
    font-size:14px!important;
    line-height:1.4!important;
    text-align:center!important;
}

/* FINAL AVATAR EDITOR 40PX */
body .detail-article .editor-centered-meta .editor-avatar-img,
body .detail-article .editor-centered-meta .editor-avatar-initial{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    max-width:36px !important;
    max-height:36px !important;
    border-radius:50% !important;
    object-fit:cover !important;
    font-size:18px !important;
}

body .detail-article .editor-centered-meta .editor-meta-with-avatar{
    gap:10px !important;
}

/* JUDUL TAG TENGAH DAN TEBAL */
.article-tags > strong,
.post-tags > strong,
.tags-title,
.tag-title{
    display:block !important;
    width:100% !important;
    text-align:left !important;
    font-weight:700 !important;
    font-size:18px !important;
    margin-bottom:14px !important;
    color:#111827 !important;
}

/* TAG CHIP TETAP DI TENGAH */
.article-tags,
.post-tags,
.tags-wrapper{
    text-align:left !important;
}

.article-tags a,
.post-tags a,
.tags-wrapper a{
    display:inline-flex !important;
}



/* === DAILYPOS FIX GAMBAR DALAM ARTIKEL: IKUTI UKURAN ASLI === */
body .detail-article figure img{
    width:auto !important;
    max-width:100% !important;
    height:auto !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
    object-position:center !important;
    display:block !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

/* caption tetap rapi */
body .detail-article figure figcaption,
body .detail-article figcaption{
    max-width:100% !important;
}

/* === FEATURED IMAGE ARTIKEL SINGLE SOURCE 2026 === */
body .detail-article .article-featured-image{
    width:100% !important;
    max-width:100% !important;
    margin:24px 0 18px !important;
    border-radius:0 !important;
    overflow:visible !important;
}

body .detail-article .article-featured-image img{
    width:100% !important;
    height:auto !important;
    aspect-ratio:16/9 !important;
    object-fit:cover !important;
    display:block !important;
    border-radius:0 !important;
}

body .detail-article .article-featured-image figcaption{
    display:block !important;
    padding:12px 16px !important;
    margin:0 !important;
    color:#64748b !important;
    font-size:12.5px !important;
    line-height:1.30 !important;
    font-weight:400 !important;
    font-style:normal !important;
    letter-spacing:.01em !important;
    text-align:left !important;
}

/* FINAL BREADCRUMB ARTIKEL - WARNA MERAH DAILYPOS */
body .detail-article .breadcrumb-pro,
body .detail-article .breadcrumb-pro span{
    color:#b40000!important;
}

body .detail-article .breadcrumb-pro a{
    color:#b40000!important;
    font-weight:900!important;
    text-decoration:none!important;
}

body .detail-article .breadcrumb-pro a:hover{
    color:#991b1b!important;
}



/* === FINAL CLEAN: ARTICLE MOBILE SINGLE SOURCE === */
@media(max-width:767px){
  html, body{
    overflow-x:hidden !important;
  }

  .detail-page,
  .detail-page.container{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:16px !important;
    padding-right:16px !important;
    box-sizing:border-box !important;
  }
  .detail-grid{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    box-sizing:border-box !important;
  }

  article.detail-article{
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    box-sizing:border-box !important;
    overflow:visible !important;
  }

  article.detail-article > .det-style-top{
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    padding-bottom:8px !important;
    margin-bottom:14px !important;
    box-sizing:border-box !important;
  }

  article.detail-article > .article-content,
  article.detail-article > .premium-content{
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    box-sizing:border-box !important;
  }

  article.detail-article > .ad-slot,
  article.detail-article > .ad-row,
  article.detail-article > .baca-juga,
  article.detail-article > .tag-box,
  article.detail-article > .author-box,
  article.detail-article > .comment-section{
    padding-left:16px !important;
    padding-right:16px !important;
    box-sizing:border-box !important;
  }

  article.detail-article .breadcrumb-pro{
    margin:4px 0 10px !important;
    font-size:12px !important;
    line-height:1.35 !important;
  }

  article.detail-article .det-title,
  article.detail-article h1.det-title,
  article.detail-article .article-title-center{
    font-size:25px !important;
    line-height:1.22 !important;
    letter-spacing:-.02em !important;
    margin:8px 0 10px !important;
    text-align:center !important;
  }

  article.detail-article .det-subtitle,
  article.detail-article .article-subtitle-center{
    font-size:15px !important;
    line-height:1.45 !important;
    margin:0 0 8px !important;
    text-align:left !important;
  }

  article.detail-article .det-submeta,
  article.detail-article .editor-centered-meta{
    justify-content:center !important;
    text-align:left !important;
    font-size:12.5px !important;
    line-height:1.4 !important;
    margin:8px 0 12px !important;
  }

  article.detail-article .article-content,
  article.detail-article .premium-content{
    font-size:17px !important;
    line-height:1.58 !important;
    margin-top:10px !important;
  }

  article.detail-article .article-content p,
  article.detail-article .premium-content p{
    font-size:17px !important;
    line-height:1.56 !important;
    margin:0 0 12px !important;
  }

  article.detail-article .article-content h2,
  article.detail-article .premium-content h2{
    font-size:21px !important;
    line-height:1.32 !important;
    margin:26px 0 12px !important;
  }

  article.detail-article .article-content h3,
  article.detail-article .premium-content h3{
    font-size:19px !important;
    line-height:1.35 !important;
    margin:22px 0 10px !important;
  }

  article.detail-article .ad-slot,
  article.detail-article .ad-row,
  article.detail-article .ad-before-footer{
    margin-top:18px !important;
    margin-bottom:18px !important;
  }

  article.detail-article .article-featured-image{
    width:100vw !important;
    max-width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    border-radius:0 !important;
    overflow:hidden !important;
  }

  article.detail-article .article-featured-image img{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    aspect-ratio:16/9 !important;
    object-fit:cover !important;
    border-radius:0 !important;
    display:block !important;
  }

  article.detail-article .article-featured-image figcaption{
    padding:10px 16px !important;
  }
}

/* ===== ARTICLE PAGINATION CLEAN MODERN ===== */
.article-page-nav{
    display:none!important;
}

.article-page-nav-modern{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr auto 1fr!important;
    align-items:center!important;
    gap:8px!important;
    margin:20px 0 18px!important;
    padding:0!important;
}

.article-page-nav-modern .page-indicator{
    grid-column:2!important;
    min-width:52px!important;
    height:34px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:999px!important;
    background:#ffffff;
    border:1px solid #e5e7eb!important;
    color:#64748b!important;
    font-size:12px!important;
    font-weight:900!important;
    line-height:1!important;
    white-space:nowrap!important;
}

.article-page-nav-modern .page-btn,
.article-page-nav-modern .page-btn-disabled{
    min-width:0!important;
    height:38px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0 12px!important;
    border-radius:999px!important;
    font-size:12px!important;
    font-weight:900!important;
    line-height:1!important;
    white-space:nowrap!important;
    text-decoration:none!important;
    box-sizing:border-box!important;
}

.article-page-nav-modern .prev,
.article-page-nav-modern .page-btn-disabled:first-child{
    grid-column:1!important;
    justify-self:start!important;
}

.article-page-nav-modern .next,
.article-page-nav-modern .page-btn-disabled:last-child{
    grid-column:3!important;
    justify-self:end!important;
}

.article-page-nav-modern .page-btn{
    background:#b91c1c!important;
    color:#fff!important;
}

.article-page-nav-modern .page-btn-disabled{
    background:#f1f5f9!important;
    color:#94a3b8!important;
}

@media(max-width:767px){
    article.detail-article .article-page-nav-modern{
        width:calc(100% - 32px)!important;
        margin:18px 16px!important;
        gap:6px!important;
    }

    article.detail-article .article-page-nav-modern .page-btn,
    article.detail-article .article-page-nav-modern .page-btn-disabled{
        height:36px!important;
        padding:0 10px!important;
        font-size:11.5px!important;
    }

    article.detail-article .article-page-nav-modern .page-indicator{
        height:32px!important;
        min-width:46px!important;
        font-size:11.5px!important;
    }
}

/* ===== ARTICLE TAG CLEAN TEXT ONLY ===== */
body .detail-article .tag-box,
body .detail-article .centered-tags{
    display:block!important;
    width:100%!important;
    margin:28px 0 24px!important;
    padding:18px 16px 0!important;
    border-top:1px solid #eef0f3!important;
    text-align:center!important;
    box-sizing:border-box!important;
}

body .detail-article .tag-title{
    display:block!important;
    width:100%!important;
    margin:0 0 12px!important;
    padding:0!important;
    text-align:center!important;
    color:#374151!important;
    font-size:15px!important;
    font-weight:800!important;
    line-height:1.4!important;
}

body .detail-article .tag-items{
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    flex-wrap:wrap!important;
    gap:8px 14px!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
}

body .detail-article .tag-items a{
    display:inline!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    color:#991b1b!important;
    font-size:14px!important;
    font-weight:700!important;
    line-height:1.5!important;
    text-decoration:none!important;
}


@media(max-width:767px){
    article.detail-article .tag-box,
    article.detail-article .centered-tags{
        padding-left:16px!important;
        padding-right:16px!important;
        margin:24px 0 22px!important;
    }

    article.detail-article .tag-title{
        font-size:14px!important;
        margin-bottom:10px!important;
    }

    article.detail-article .tag-items{
        gap:7px 12px!important;
    }

    article.detail-article .tag-items a{
        font-size:13.5px!important;
    }
}

/* ===== TAG SEPARATOR PIPE ===== */
body .detail-article .tag-items a::after{
    content:" |";
    color:#9ca3af!important;
    margin-left:10px!important;
    font-weight:400!important;
}

body .detail-article .tag-items a:last-child::after{
    display:none!important;
}

/* ===== RELATED ARTICLE MODERN CLEAN ===== */

body .detail-article .related-section{
    margin-top:28px!important;
}

body .detail-article .related-section .section-title{
    text-align:center!important;
    margin-bottom:18px!important;
}

body .detail-article .related-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:18px!important;
}

body .detail-article .related-card{
    border:none!important;
    background:transparent!important;
    border-radius:0!important;
    box-shadow:none!important;
    overflow:visible!important;
}

body .detail-article .related-card a{
    display:block!important;
    text-decoration:none!important;
}

body .detail-article .related-card img{
    width:100%!important;
    aspect-ratio:16/9!important;
    object-fit:cover!important;
    border-radius:10px!important;
    display:block!important;
}

body .detail-article .related-card div{
    padding:10px 0 0!important;
}

body .detail-article .related-card h4{
    margin:0!important;
    font-size:15px!important;
    line-height:1.45!important;
    font-weight:700!important;
    min-height:auto!important;

    display:-webkit-box!important;
    -webkit-line-clamp:3!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
}

body .detail-article .related-card small{
    display:block!important;
    margin-top:6px!important;
    font-size:12px!important;
    color:#6b7280!important;
}

@media(max-width:767px){

    body .detail-article .related-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:14px!important;
    }

    body .detail-article .related-card h4{
        font-size:13px!important;
        line-height:1.4!important;
    }

    body .detail-article .related-card small{
        font-size:11px!important;
    }
}



/* ===== RELATED SECTION ALIGN MOBILE ===== */
@media(max-width:767px){
  article.detail-article > .related-section{
    width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }

  article.detail-article .related-section .section-title{
    padding-left:0!important;
    padding-right:0!important;
    text-align:center!important;
  }

  article.detail-article .related-grid{
    width:100%!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }
}

/* ===== COMMENT SECTION ALIGN MOBILE ===== */
@media(max-width:767px){

  article.detail-article > .comment-section{
      width:100%!important;
      margin-left:0!important;
      margin-right:0!important;
      padding-left:0!important;
      padding-right:0!important;
      box-sizing:border-box!important;
  }

  article.detail-article .comment-title,
  article.detail-article .comment-form,
  article.detail-article .comment-tabs,
  article.detail-article .comment-empty,
  article.detail-article .comment-note,
  article.detail-article #realtime-comment-list{
      padding-left:0!important;
      padding-right:0!important;
  }

  article.detail-article .comment-form textarea,
  article.detail-article .comment-form input{
      width:100%!important;
      box-sizing:border-box!important;
  }
}

/* ===== COMMENT TABS SINGLE ROW SCROLL FINAL ===== */
body .detail-article .comment-tabs{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    white-space:nowrap!important;
    border-top:1px solid #eee!important;
    border-bottom:1px solid #eee!important;
    padding:10px 0!important;
    margin:20px 0 16px!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
}

body .detail-article .comment-tabs::-webkit-scrollbar{
    display:none!important;
}

body .detail-article .comment-tabs button{
    flex:0 0 auto!important;
    white-space:nowrap!important;
    min-width:max-content!important;
    height:34px!important;
    padding:0 14px!important;
    border-radius:999px!important;
    font-size:12.5px!important;
    font-weight:800!important;
    line-height:1!important;
}

@media(max-width:767px){
    article.detail-article .comment-tabs{
        width:100%!important;
        max-width:100%!important;
        gap:7px!important;
        padding:9px 0!important;
        margin:18px 0 14px!important;
    }

    article.detail-article .comment-tabs button{
        height:32px!important;
        padding:0 12px!important;
        font-size:12px!important;
    }
}

/* Samakan area atas artikel dengan homepage mobile */
@media(max-width:767px){
  body .detail-page,
  body .detail-page.container{
    padding-left:16px !important;
    padding-right:16px !important;
  }
}

/* FINAL MOBILE ARTICLE TYPOGRAPHY */
@media(max-width:767px){
  article.detail-article .article-content,
  article.detail-article .premium-content{
      font-size:16px !important;
      line-height:1.45 !important;
  }

  article.detail-article .article-content p,
  article.detail-article .premium-content p{
      font-size:16px !important;
      line-height:1.45 !important;
      margin:0 0 12px !important;
  }
}

/* FINAL MOBILE ARTICLE TITLE */
@media(max-width:767px){
  article.detail-article .det-title,
  article.detail-article h1.det-title,
  article.detail-article .article-title-center{
      font-size:23px !important;
      line-height:1.25 !important;
  }
}

/* FINAL MOBILE INLINE RELATED */
@media(max-width:767px){
  body .detail-article .article-content .inline-related,
  body .detail-article .premium-content .inline-related{
      margin:16px 0 !important;
      padding:0 0 0 10px !important;
      border-left:3px solid #b3261e !important;
      background:transparent !important;
      box-shadow:none !important;
  }

  body .detail-article .article-content .inline-related strong,
  body .detail-article .premium-content .inline-related strong{
      display:block !important;
      font-size:16px !important;
      line-height:1.20 !important;
      margin:0 0 4px !important;
      padding:0 !important;
      font-weight:700 !important;
      color:#111827 !important;
  }

  body .detail-article .article-content .inline-related a,
  body .detail-article .premium-content .inline-related a{
      display:block !important;
      font-size:16px !important;
      line-height:1.28 !important;
      margin:0 !important;
      padding:0 !important;
      color:#8a2f28 !important;
      font-weight:560 !important;
      text-decoration:none !important;
  }
}

/* FINAL MOBILE ARTICLE ADS */
@media(max-width:767px){
  article.detail-article .ad-label-global,
  .detail-page .ad-label-global{
      display:block !important;
      width:100% !important;
      margin:14px 0 4px !important;
      padding:0 !important;
      text-align:center !important;
      color:#9ca3af !important;
      font-size:10px !important;
      line-height:1 !important;
      font-weight:700 !important;
      letter-spacing:.08em !important;
  }

  article.detail-article .ad-slot,
  article.detail-article .ad-slot.ad-code,
  article.detail-article .ad-row{
      width:100% !important;
      margin:0 0 16px !important;
      padding:0 !important;
      text-align:center !important;
      box-sizing:border-box !important;
  }

  article.detail-article .ad-slot.ad-code{
      min-height:90px !important;
  }

  article.detail-article .ad-slot.ad-code ins.adsbygoogle{
      display:block !important;
      width:100% !important;
      min-height:90px !important;
  }
}

/* ===== QUOTE STYLE MODERN FINAL ===== */
.article-content blockquote.article-quote,
.premium-content blockquote.article-quote,
.detail-article blockquote.article-quote{
    position:relative!important;
    margin:30px 0 28px!important;
    padding:34px 0 0 0!important;
    background:transparent!important;
    border:0!important;
    border-left:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    color:#374151!important;
    font-family:inherit!important;
    overflow:visible!important;
}

.article-content blockquote.article-quote::before,
.premium-content blockquote.article-quote::before,
.detail-article blockquote.article-quote::before{
    content:"“"!important;
    display:block!important;
    position:absolute!important;
    left:0!important;
    top:-14px!important;
    font-family:Georgia,serif!important;
    font-size:76px!important;
    line-height:1!important;
    color:#9ca3af!important;
    font-weight:700!important;
}

.article-content blockquote.article-quote::after,
.premium-content blockquote.article-quote::after,
.detail-article blockquote.article-quote::after{
    content:none!important;
    display:none!important;
}

.article-content blockquote.article-quote p,
.premium-content blockquote.article-quote p,
.detail-article blockquote.article-quote p{
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    color:#374151!important;
    font-family:Georgia,serif!important;
    font-size:20px!important;
    line-height:1.8!important;
    font-style:italic!important;
    font-weight:500!important;
}

@media(max-width:768px){
    .article-content blockquote.article-quote,
    .premium-content blockquote.article-quote,
    .detail-article blockquote.article-quote{
        margin:26px 0 24px!important;
        padding-top:30px!important;
    }

    .article-content blockquote.article-quote::before,
    .premium-content blockquote.article-quote::before,
    .detail-article blockquote.article-quote::before{
        font-size:60px!important;
        top:-10px!important;
    }

    .article-content blockquote.article-quote p,
    .premium-content blockquote.article-quote p,
    .detail-article blockquote.article-quote p{
        font-size:18px!important;
        line-height:1.75!important;
    }
}

/* === QUOTE TANPA LATAR DAN TANPA GARIS MERAH === */
.article-content blockquote,
.premium-content blockquote,
.detail-article blockquote{
    position:relative!important;
    margin:28px 0!important;
    padding:34px 0 0 0!important;
    background:transparent!important;
    border:none!important;
    border-left:none!important;
    box-shadow:none!important;
}

.article-content blockquote::before,
.premium-content blockquote::before,
.detail-article blockquote::before{
    content:"“"!important;
    display:block!important;
    position:absolute!important;
    left:0!important;
    top:-12px!important;
    font-family:Georgia,serif!important;
    font-size:70px!important;
    line-height:1!important;
    color:#9ca3af!important;
    font-weight:700!important;
}

.article-content blockquote::after,
.premium-content blockquote::after,
.detail-article blockquote::after{
    content:none!important;
    display:none!important;
}

.article-content blockquote p,
.premium-content blockquote p,
.detail-article blockquote p{
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    color:#374151!important;
    font-family:Georgia,serif!important;
    font-size:20px!important;
    line-height:1.8!important;
    font-style:italic!important;
    font-weight:500!important;
}

@media(max-width:768px){
    .article-content blockquote,
    .premium-content blockquote,
    .detail-article blockquote{
        padding-top:30px!important;
    }

    .article-content blockquote::before,
    .premium-content blockquote::before,
    .detail-article blockquote::before{
        font-size:58px!important;
        top:-8px!important;
    }

    .article-content blockquote p,
    .premium-content blockquote p,
    .detail-article blockquote p{
        font-size:18px!important;
        line-height:1.75!important;
    }
}



/* === FIX CLS MEDIA ARTIKEL 2026-06-30 === */
body .detail-article .article-featured-image img{
  aspect-ratio:16/9 !important;
}

body .detail-article .article-video-main{
  width:100% !important;
  aspect-ratio:16/9 !important;
  overflow:hidden !important;
  margin:20px 0 !important;
  background:#000 !important;
}

body .detail-article .article-video-main iframe{
  width:100% !important;
  height:100% !important;
  display:block !important;
}

/* === X / TWITTER VIDEO MODE REELS 9:16 === */
body .detail-article .article-x-video-main{
  width:100% !important;
  max-width:520px !important;
  aspect-ratio:9/16 !important;
  height:auto !important;
  margin:22px auto !important;
  background:#000 !important;
  overflow:hidden !important;
  border-radius:0 !important;
  display:flex !important;
  align-items:flex-start !important;
  justify-content:center !important;
}

body .detail-article .article-x-video-main blockquote.twitter-tweet{
  width:100% !important;
  max-width:420px !important;
  margin:0 auto !important;
}

body .detail-article .article-x-video-main iframe{
  width:100% !important;
  max-width:420px !important;
  min-height:760px !important;
  border:0 !important;
  margin:0 auto !important;
  display:block !important;
}

@media(max-width:767px){
  body .detail-article .article-x-video-main{
    max-width:100% !important;
    aspect-ratio:9/16 !important;
  }

  body .detail-article .article-x-video-main iframe{
    min-height:680px !important;
  }
}

/* === OVERRIDE X / TWITTER VIDEO FRAME 16:9 FIT CENTER === */
body .detail-article .article-x-video-main{
  width:100% !important;
  max-width:100% !important;
  aspect-ratio:16/9 !important;
  height:auto !important;
  margin:22px auto !important;
  background:#000 !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:0 !important;
}

body .detail-article .article-x-video-main blockquote.twitter-tweet{
  width:360px !important;
  max-width:360px !important;
  margin:0 auto !important;
  transform:scale(.68) !important;
  transform-origin:center center !important;
}

body .detail-article .article-x-video-main iframe{
  width:360px !important;
  max-width:360px !important;
  min-height:680px !important;
  height:680px !important;
  border:0 !important;
  margin:0 auto !important;
  transform:scale(.68) !important;
  transform-origin:center center !important;
}

@media(max-width:767px){
  body .detail-article .article-x-video-main blockquote.twitter-tweet,
  body .detail-article .article-x-video-main iframe{
    transform:scale(.58) !important;
  }
}

/* === TIKTOK VIDEO EMBED === */
body .detail-article .article-tiktok-video-main{
  width:100% !important;
  max-width:100% !important;
  aspect-ratio:16/9 !important;
  height:auto !important;
  margin:22px auto !important;
  background:#000 !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

body .detail-article .article-tiktok-video-main blockquote.tiktok-embed,
body .detail-article .article-tiktok-video-main iframe{
  max-width:360px !important;
  width:360px !important;
  min-width:280px !important;
  margin:0 auto !important;
}

body .detail-article .article-tiktok-video-main iframe{
  min-height:650px !important;
  height:650px !important;
  transform:scale(.68) !important;
  transform-origin:center center !important;
}

@media(max-width:767px){
  body .detail-article .article-tiktok-video-main iframe{
    transform:scale(.58) !important;
  }
}

/* === FIX SUBJUDUL ARTIKEL RATA TENGAH === */
body .detail-article .det-subtitle,
body .detail-article .article-subtitle-center,
article.detail-article .det-subtitle,
article.detail-article .article-subtitle-center{
    text-align:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
}

/* ==================================================
   FINAL MOBILE OVERRIDE DAILYPOST DETAIL ARTICLE
   10 JULI 2026
================================================== */

@media(max-width:767px){

    body .detail-page,
    body .detail-page.container{
        width:100%;
        max-width:100%;
        padding:0 16px;
        margin-top:15px;
    }

    body .detail-sidebar{
        display:none !important;
    }

    body .detail-article .det-title,
    body .detail-article h1.det-title,
    body .detail-article .article-title-center{
        font-size:28px !important;
        line-height:1.25 !important;
        text-align:left !important;
    }

    body .detail-article .article-content,
    body .detail-article .premium-content{
        font-size:17px !important;
        line-height:1.75 !important;
    }

    body .detail-article .article-content p,
    body .detail-article .premium-content p{
        margin-bottom:18px !important;
    }


    /* tampilkan kembali kontrol ukuran font */
    body .font-size-controls,
    body .text-size-controls,
    body .reader-font-tools,
    body .article-font-size,
    body .font-resizer,
    body .text-resizer{
        display:flex !important;
    }

}