/* =========================================================
   WartaLink Tahap 5.1
   Patch khusus untuk memulihkan layout artikel Tahap 4.1
   sambil mempertahankan fitur Tahap 5
   ========================================================= */

/* Reset area artikel agar tidak ikut melebar karena aturan global */
body .article-page{
    background:#ffffff !important;
    padding:40px 20px 72px !important;
    width:100% !important;
}

body .article-page .article-shell{
    width:min(800px, 100%) !important;
    max-width:800px !important;
    margin:0 auto !important;
    padding:0 !important;
}

/* Breadcrumb */
body .article-page .breadcrumb{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:8px !important;
    margin:0 0 20px !important;
    font-size:13px !important;
    line-height:1.5 !important;
    color:#667085 !important;
}

body .article-page .breadcrumb a{
    color:#0b67f0 !important;
    text-decoration:none !important;
}

/* Header artikel */
body .article-page .article-head{
    width:100% !important;
    max-width:800px !important;
    margin:0 0 26px !important;
    padding:0 !important;
}

body .article-page .article-head .badges{
    display:flex !important;
    gap:8px !important;
    flex-wrap:wrap !important;
    margin-bottom:16px !important;
}

body .article-page .article-head h1{
    display:block !important;
    width:100% !important;
    max-width:800px !important;
    margin:0 0 18px !important;
    padding:0 !important;
    font-size:clamp(40px, 4.3vw, 54px) !important;
    line-height:1.08 !important;
    letter-spacing:-1.2px !important;
    font-weight:800 !important;
    color:#111827 !important;
}

body .article-page .article-excerpt{
    width:100% !important;
    max-width:800px !important;
    margin:0 0 16px !important;
    font-size:19px !important;
    line-height:1.70 !important;
    color:#475467 !important;
}

body .article-page .article-meta{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:8px !important;
    margin:0 !important;
    font-size:14px !important;
    line-height:1.5 !important;
    color:#667085 !important;
}

body .article-page .article-meta .dot{
    color:#98a2b3 !important;
}

/* Tombol share */
body .article-page .share-row{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:9px !important;
    margin:18px 0 0 !important;
}

body .article-page .share-row button,
body .article-page .share-row a{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:38px !important;
    padding:9px 13px !important;
    border:1px solid #d0d5dd !important;
    border-radius:8px !important;
    background:#fff !important;
    color:#344054 !important;
    font-size:13px !important;
    line-height:1 !important;
    font-weight:700 !important;
    text-decoration:none !important;
    cursor:pointer !important;
}

/* Visual artikel */
body .article-page .article-figure{
    width:100% !important;
    max-width:800px !important;
    margin:30px 0 32px !important;
}

body .article-page .article-figure img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    border-radius:16px !important;
}

body .article-page .article-figure figcaption{
    margin-top:9px !important;
    font-size:13px !important;
    line-height:1.55 !important;
    color:#667085 !important;
}

/* Body artikel */
body .article-page .article-body{
    display:block !important;
    width:100% !important;
    max-width:800px !important;
    margin:0 !important;
    padding:0 !important;
    font-size:18px !important;
    line-height:1.82 !important;
    color:#1f2937 !important;
    white-space:normal !important;
}

body .article-page .article-body p{
    display:block !important;
    margin:0 0 1.45em !important;
    padding:0 !important;
    font-size:18px !important;
    line-height:1.82 !important;
    color:#1f2937 !important;
}

body .article-page .article-body h2{
    display:block !important;
    margin:1.8em 0 .7em !important;
    padding:0 !important;
    font-size:29px !important;
    line-height:1.28 !important;
    font-weight:800 !important;
    color:#111827 !important;
}

/* Catatan Warta */
body .article-page .article-callout{
    display:block !important;
    width:100% !important;
    margin:28px 0 !important;
    padding:20px 22px !important;
    border-left:4px solid #0b67f0 !important;
    border-radius:10px !important;
    background:#f4f8ff !important;
}

body .article-page .article-callout strong{
    display:block !important;
    margin-bottom:8px !important;
    color:#0b67f0 !important;
    font-size:16px !important;
}

body .article-page .article-callout p{
    margin:0 !important;
}

/* Transparansi Warta */
body .article-page .transparency-box{
    display:block !important;
    width:100% !important;
    max-width:800px !important;
    margin:40px 0 0 !important;
    padding:24px !important;
    border:1px solid #d9e8ff !important;
    border-radius:16px !important;
    background:#f7fbff !important;
}

body .article-page .transparency-title{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    margin-bottom:18px !important;
}

body .article-page .transparency-title strong{
    display:block !important;
    font-size:20px !important;
    line-height:1.25 !important;
    color:#111827 !important;
}

body .article-page .transparency-title small{
    display:block !important;
    margin-top:2px !important;
    font-size:12px !important;
    color:#667085 !important;
}

body .article-page .transparency-icon{
    display:grid !important;
    place-items:center !important;
    flex:0 0 34px !important;
    width:34px !important;
    height:34px !important;
    border-radius:50% !important;
    background:#0b67f0 !important;
    color:#fff !important;
    font-weight:800 !important;
}

body .article-page .transparency-grid{
    display:grid !important;
    grid-template-columns:repeat(3, 1fr) !important;
    gap:12px !important;
    margin-bottom:22px !important;
}

body .article-page .transparency-grid > div{
    min-width:0 !important;
    padding:13px !important;
    border:1px solid #e5edf8 !important;
    border-radius:10px !important;
    background:#fff !important;
}

body .article-page .transparency-grid small{
    display:block !important;
    margin-bottom:5px !important;
    font-size:12px !important;
    color:#667085 !important;
}

body .article-page .transparency-grid b{
    display:block !important;
    font-size:14px !important;
    line-height:1.4 !important;
    color:#111827 !important;
}

/* Sumber */
body .article-page .source-list{
    margin:0 !important;
    padding-left:24px !important;
}

body .article-page .source-list li{
    margin:12px 0 !important;
    font-size:14px !important;
    line-height:1.55 !important;
}

body .article-page .source-list a{
    color:#0b67f0 !important;
    font-weight:700 !important;
    text-decoration:none !important;
}

body .article-page .source-tags{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    margin-top:6px !important;
}

body .article-page .source-tags span{
    display:inline-block !important;
    padding:4px 7px !important;
    border-radius:999px !important;
    background:#eaf2ff !important;
    color:#175cd3 !important;
    font-size:11px !important;
    font-weight:700 !important;
}

/* Related news */
body .article-page .related-section{
    width:100% !important;
    max-width:800px !important;
    margin-top:42px !important;
}

body .article-page .related-section > h2{
    margin:0 0 16px !important;
    font-size:25px !important;
    line-height:1.3 !important;
    color:#111827 !important;
}

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

body .article-page .related-card{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
    padding:16px !important;
    border:1px solid #e4e7ec !important;
    border-radius:12px !important;
    background:#fff !important;
    color:#101828 !important;
    text-decoration:none !important;
}

body .article-page .related-card small{
    color:#0b67f0 !important;
    font-size:11px !important;
    font-weight:800 !important;
}

body .article-page .related-card strong{
    font-size:15px !important;
    line-height:1.4 !important;
}

body .article-page .related-card span{
    font-size:12px !important;
    line-height:1.4 !important;
    color:#667085 !important;
}

/* Mobile */
@media(max-width:650px){
    body .article-page{
        padding:24px 16px 48px !important;
    }

    body .article-page .article-shell{
        width:100% !important;
        max-width:100% !important;
    }

    body .article-page .article-head h1{
        font-size:38px !important;
        line-height:1.10 !important;
        letter-spacing:-.7px !important;
    }

    body .article-page .article-excerpt{
        font-size:17px !important;
        line-height:1.68 !important;
    }

    body .article-page .article-body,
    body .article-page .article-body p{
        font-size:17px !important;
        line-height:1.78 !important;
    }

    body .article-page .transparency-grid{
        grid-template-columns:1fr !important;
    }

    body .article-page .related-grid{
        grid-template-columns:1fr !important;
    }
}