/* ==========================
ARTICLE LAYOUT
========================== */

.news-wrapper{

    display:grid;
    grid-template-columns:2fr 1fr;
    gap:22px;

    overflow:visible;

    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:15px 12px 25px;

}

.article-wrapper{

    width:100%;

    min-width:0;

    overflow:visible;

}


/* ==========================
BREADCRUMB
========================== */

.breadcrumb{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:20px;
    font-size:13px;
}

.breadcrumb a{
    color:#64748b;
    text-decoration:none;
    transition:.3s;
}

.breadcrumb a:hover{
    color:#2563eb;
}

.breadcrumb i{
    color:#94a3b8;
    font-size:11px;
}

.breadcrumb span{
    color:#2563eb;
    font-weight:600;
}

/* ==========================
ARTICLE TITLE
========================== */

.article-title{

    font-size:30px;

    line-height:1.45;

    font-weight:700;

    color:#111827;

    margin-bottom:18px;

    word-break:break-word;

}

/* ==========================
META
========================== */

.article-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;   /* penting */
    gap:20px;

    padding-bottom:20px;
    margin-bottom:25px;
    border-bottom:1px solid #e5e7eb;
}

.meta-left{

    display:flex;
    align-items:center;
    gap:15px;

    flex:1;

}

.author-logo{

    width:52px;
    height:52px;

    border-radius:50%;
    object-fit:cover;

    border:2px solid #2563eb;

}

.meta-left div{

    display:flex;
    flex-direction:column;
    justify-content:center;

    gap:1px;   /* atau 0 */

}

.author{

     font-size:14px;
    font-weight:700;
    color:#2563eb;

    margin:0;

}

.meta-left span{

    font-size:12px;

    color:#64748b;

    margin:0;
    line-height:1.2;

}

.meta-right{
    display:flex;
    align-items:center;
    justify-content:center;

    min-height:52px;      /* sama tinggi foto profil */

    margin-left:20px;
}

.meta-right .comments{
    display:flex;
    align-items:center;
    gap:6px;

    line-height:1;

    font-size:14px;
}
.meta-right .comments i{
    font-size:18px;
}


.meta-right i{

    color:#2563eb;

}

/* ==========================
FEATURED IMAGE
========================== */

.featured-image{

    position:relative;

    margin-bottom:30px;

    border-radius:16px;

    overflow:hidden;

    background:#f1f5f9;

    box-shadow:
        0 10px 30px rgba(15,23,42,.08);

}

.featured-image img{

    display:block;

    width:100%;
    height:auto;

    transition:transform .45s ease;

}

.featured-image:hover img{

    transform:scale(1.03);

}

.caption{

    position:absolute;

    left:15px;
    bottom:15px;

    padding:8px 14px;

    background:rgba(15,23,42,.75);

    color:#fff;

    font-size:13px;

    border-radius:8px;

    backdrop-filter:blur(8px);

}

/* ==========================
IMAGE INSIDE ARTICLE
========================== */

.article-content img{

    width:100%;
    display:block;

    margin:30px 0;

    border-radius:14px;

}

/* ==========================
SECTION TITLE
========================== */

.article-content h2{

    font-size:24px;
    color:#0f172a;

    margin-top:45px;
    margin-bottom:20px;

    line-height:1.35;

}

/* ==========================
DIVIDER
========================== */

.article-divider{

    width:100%;
    height:1px;

    background:#e5e7eb;

    margin:35px 0;

}

/* ==========================
ANIMATION
========================== */

.article-wrapper{

    animation:fadeArticle .5s ease;

}

@keyframes fadeArticle{

    from{

        opacity:0;
        transform:translateY(15px);

    }

    to{

        opacity:1;
        transform:none;

    }

}

/* =========================================================
   DETAIL BERITA
   PART 2B
   Share Button • Isi Artikel • Typography
========================================================= */

/* ==========================
SHARE BOX
========================== */

.share-box{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    align-items:center;

    gap:12px;

    width:100%;

    margin:0 auto 35px;

}

/* ==========================
VIEWS
========================== */

.share-views{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    width:72px;

    min-width:72px;

    height:46px;

    line-height:1;

    flex-shrink:0;

}

.share-views strong{

    display:block;

    font-size:26px;

    font-weight:800;

    color:#0f172a;

    line-height:1;

}

.share-views span{

    display:block;

    margin-top:4px;

    font-size:11px;

    font-weight:700;

    letter-spacing:2px;

    color:#64748b;

    text-transform:uppercase;

    line-height:1;

}

.share{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    height:46px;

    padding:0 22px;

    border:none;
    border-radius:10px;

    font-size:14px;
    font-weight:600;
    font-family:inherit;

    cursor:pointer;

    color:#fff;

    transition:.3s ease;

}

.share i{

    font-size:15px;

}

.share:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(0,0,0,.12);

}

.facebook{

    background:#1877F2;

}

.whatsapp{

    background:#25D366;

}

.telegram{

    background:#229ED9;

}

.copy{

    background:#475569;

}

/* ==========================
ARTICLE CONTENT
========================== */

.article-content{

    color:#475569;

    font-size:16px;

    line-height:1.9;

}

.article-content p{
    margin:0 0 18px;
    text-align:justify;
}

/* ==========================
LINK
========================== */

.article-content a{

    color:#2563eb;

    text-decoration:none;

    font-weight:600;

    transition:.25s;

}

.article-content a:hover{

    text-decoration:underline;

}

/* ==========================
BOLD
========================== */

.article-content strong{

    color:#0f172a;

    font-weight:700;

}

/* ==========================
ITALIC
========================== */

.article-content em{

    font-style:italic;

}

/* ==========================
HEADING
========================== */

.article-content h3{

    font-size:20px;

    margin:40px 0 18px;

    color:#0f172a;

}

.article-content h4{

    font-size:18px;

    margin:35px 0 15px;

    color:#0f172a;

}

/* ==========================
LIST
========================== */

.article-content ul,
.article-content ol{

    margin:20px 0 25px 28px;

}

.article-content li{

    margin-bottom:12px;

    padding-left:6px;

}

/* ==========================
BLOCKQUOTE
========================== */

.article-content blockquote{

    position:relative;

    margin:35px 0;

    padding:25px 30px;

    border-left:5px solid #2563eb;

    background:#f8fafc;

    border-radius:12px;

    font-size:17px;

    line-height:1.8;

    font-style:italic;

    color:#334155;

}

.article-content blockquote::before{

    content:"\201C";

    position:absolute;

    top:-10px;
    left:18px;

    font-size:65px;

    color:#2563eb20;

    font-family:Georgia,serif;

}

/* ==========================
TABLE
========================== */

.article-content table{

    width:100%;

    border-collapse:collapse;

    margin:30px 0;

    overflow:hidden;

    border-radius:10px;

}

.article-content table th{

    background:#2563eb;

    color:#fff;

    padding:14px;

    text-align:left;

}

.article-content table td{

    padding:14px;

    border:1px solid #e2e8f0;

}

.article-content table tr:nth-child(even){

    background:#f8fafc;

}

/* ==========================
CODE
========================== */

.article-content pre{

    overflow:auto;

    padding:20px;

    margin:30px 0;

    border-radius:12px;

    background:#0f172a;

}

.article-content code{

    font-family:Consolas,monospace;

    color:#f8fafc;

    font-size:14px;

}

/* ==========================
INLINE CODE
========================== */

.article-content p code,
.article-content li code{

    background:#eff6ff;

    color:#2563eb;

    padding:3px 7px;

    border-radius:5px;

}

/* ==========================
HORIZONTAL LINE
========================== */

.article-content hr{

    border:none;

    height:1px;

    background:#e2e8f0;

    margin:40px 0;

}

/* ==========================
HIGHLIGHT
========================== */

.article-content mark{

    background:#fff3b0;

    padding:2px 5px;

}

/* ==========================
FIRST LETTER
========================== */

.article-content > p:first-of-type::first-letter{

    float:left;

    font-size:60px;

    line-height:50px;

    font-weight:700;

    color:#2563eb;

    margin-right:10px;

}

/* ==========================
SELECTION
========================== */

.article-content ::selection{

    background:#2563eb;

    color:#fff;

}

/* ==========================
IMAGE HOVER
========================== */

.article-content img{

    transition:.35s;

    cursor:pointer;

}

.article-content img:hover{

    transform:scale(1.015);

}

/* ==========================
RESPONSIVE
========================== */

@media(max-width:992px){

    .article-content{

        font-size:17px;

    }

    .article-content h2{

        font-size:26px;

    }

}

@media(max-width:768px){

    /* ==========================
       SHARE BUTTON MOBILE
    ========================== */

    .share-box{
    display:grid;
    grid-template-columns:
        72px
        repeat(4,max-content);

    justify-content:center;
    align-items:center;

    gap:14px;

    width:100%;
    margin:30px auto;
}

    .share{
    min-width:150px;

    height:52px;

    display:flex;
    justify-content:center;
    align-items:center;

    gap:10px;
}

    .share i{

        font-size:22px;

        margin:0;

    }

    /* sembunyikan tulisan */

    .share span{

        display:none;

    }

    .article-content{

        font-size:16px;

        line-height:1.9;

    }

    .article-content blockquote{

        font-size:18px;

        padding:20px;

    }

    .article-content h2{

        font-size:24px;

    }

}

@media(max-width:480px){

    .share-box{

        display:flex !important;

        justify-content:center;

        gap:10px;

    }

    .share{

        width:54px;

        height:54px;

        min-width:54px;

    }

    .share i{

        font-size:20px;

    }

    .article-content{

        font-size:15.5px;

    }

    .article-content h2{

        font-size:22px;

    }

    .article-content h3{

        font-size:20px;

    }

    .article-content blockquote{

        font-size:16px;

    }

    .share-views strong{

    font-size:24px;

    }

    .share-views span{

        font-size:10px;

        letter-spacing:1.5px;

    }

}

/* =========================================================
   DETAIL BERITA
   PART 2C
   Tag • Author Box • Previous & Next Post
========================================================= */


/* ==========================
ARTICLE TAGS
========================== */

.article-tags{

    display:flex;
    flex-wrap:wrap;
    gap:10px;

    margin:50px 0 40px;

    padding-top:25px;

    border-top:1px solid #e5e7eb;

}

.article-tags a{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:38px;

    padding:0 18px;

    border-radius:30px;

    background:#eff6ff;

    color:#2563eb;

    text-decoration:none;

    font-size:13px;
    font-weight:600;

    transition:.3s ease;

}

.article-tags a:hover{

    background:#2563eb;

    color:#fff;

    transform:translateY(-2px);

}



/* ==========================
AUTHOR BOX
========================== */

.author-box{

    display:flex;
    align-items:flex-start;
    gap:20px;

    margin:45px 0;

    padding:25px;

    background:#f8fafc;

    border:1px solid #e2e8f0;

    border-radius:18px;

    transition:.3s;

}

.author-box:hover{

    box-shadow:0 12px 28px rgba(15,23,42,.08);

}

.author-box img{

    width:90px;
    height:90px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid #2563eb;

    flex-shrink:0;

}

.author-box h4{

    font-size:22px;

    color:#0f172a;

    margin-bottom:8px;

}

.author-box p{

    color:#64748b;

    line-height:1.8;

    font-size:15px;

    margin:0;

}



/* Optional */

.author-social{

    display:flex;

    gap:12px;

    margin-top:18px;

}

.author-social a{

    width:36px;
    height:36px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#2563eb;

    color:#fff;

    text-decoration:none;

    transition:.3s;

}

.author-social a:hover{

    transform:translateY(-3px);

    background:#1d4ed8;

}



/* ==========================
POST NAVIGATION
========================== */

.post-navigation{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;

    margin:45px 0;

}

.post-navigation a{

    position:relative;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:18px 22px;

    min-height:88px;

    background:#fff;

    border:1px solid #e5e7eb;
    border-radius:14px;

    text-decoration:none;

    transition:.3s ease;

    overflow:hidden;

}

.post-navigation a:hover{

    border-color:#2563eb;

    box-shadow:0 10px 25px rgba(37,99,235,.10);

    transform:translateY(-3px);

}

/* garis biru */

.post-navigation a::before{

    content:"";

    position:absolute;

    left:0;
    top:0;
    bottom:0;

    width:4px;

    background:#2563eb;

    opacity:0;

    transition:.3s;

}

.post-navigation a:hover::before{

    opacity:1;

}

.post-navigation small{

    display:block;

    font-size:11px;

    font-weight:700;

    color:#2563eb;

    text-transform:uppercase;

    letter-spacing:.8px;

    margin-bottom:8px;

}

.post-navigation h4{

    font-size:16px;

    font-weight:600;

    line-height:1.5;

    color:#0f172a;

    margin:0;

    transition:.3s;

}

/* ==========================
PREVIOUS
========================== */

.prev-post{

    padding-left:22px;

    text-align:left;

}

.prev-post::after{

    display:none;

}

/* ==========================
NEXT
========================== */

.next-post{

    padding-right:22px;

    text-align:right;

}

.next-post::after{

    display:none;

}

/* ==========================
RESPONSIVE
========================== */

@media(max-width:992px){

    .author-box{

        padding:22px;

    }

    .author-box img{

        width:80px;
        height:80px;

    }

}



@media(max-width:768px){

    .author-box{

        flex-direction:column;

        align-items:center;

        text-align:center;

    }

    .author-box img{

        width:85px;
        height:85px;

    }

    .author-social{

        justify-content:center;

    }

    .post-navigation{

        grid-template-columns:1fr;

    }

    .next-post{

        text-align:left;

    }

    .next-post::after{

        display:none;

    }

    .next-post::before{

        display:none;

    }

}

@media(max-width:480px){

    .article-tags{

        display:flex;

        justify-content:center;

        align-items:center;

        flex-wrap:wrap;

        gap:10px;

        margin:40px 0;

    }

    .article-tags a{

        width:auto;

        min-height:36px;

        padding:0 16px;

        justify-content:center;

        border-radius:30px;

        font-size:13px;

    }

    .author-box{

        padding:20px;

    }

    .author-box h4{

        font-size:20px;

    }

    .post-navigation a{

        padding:18px;

    }

    .post-navigation h4{

        font-size:16px;

    }

}

/* =========================================================
   DETAIL BERITA
   PART 2D
   Sidebar • Berita Populer • Banner
========================================================= */
/* ==========================
SIDEBAR DETAIL NEWS (NEW NAME)
========================== */

.news-detail-sidebar{

    display:flex;
    flex-direction:column;

    align-self:start;

}

/* penting untuk sticky bekerja */
.news-sidebar-inner{

    position:sticky;

    top:90px;

    display:flex;

    flex-direction:column;

    gap:25px;

}

/* ==========================
BANNER
========================== */

.news-sidebar-banner{

    background:#fff;

    border:1px solid #e2e8f0;

    border-radius:10px;

    overflow:hidden;

}

.news-banner-img{
    width:100%;
    display:block;
}

/* ==========================================
WARTA TERBARU TANPA BOX
========================================== */

.news-latest-box{

    display:flex;
    flex-direction:column;
    gap:22px;

    background:transparent;
    border:none;
    border-radius:0;
    padding:0;
    box-shadow:none;

}

/* ==========================
HEADER
========================== */

.news-latest-header{
    display:flex;
    align-items:center;
    gap:8px;
    padding-bottom:12px;
    border-bottom:1px solid #e5e7eb;
}

.news-latest-header h3{
    margin:0;
    font-size:18px;
    font-weight:700;
}

.news-latest-header span{
    color:#2563eb;
}

/* ==========================
FEATURED
========================== */

.news-latest-featured{
    position:relative;
    border-radius:14px;
    overflow:hidden;
}

.news-latest-featured img{
    width:100%;
    height:220px;
    object-fit:cover;
    transition:.3s;
}

.news-latest-featured:hover img{
    transform:scale(1.05);
}

.news-latest-overlay{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:15px;
    background:linear-gradient(transparent,rgba(0,0,0,.85));
}

.news-latest-overlay h4{
    color:#fff;
    margin:0;
    font-size:16px;
}

/* ==========================
LIST
========================== */

.news-latest-list{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.news-latest-item{
    display:flex;
    gap:12px;
    text-decoration:none;
    align-items:flex-start;
}

.news-latest-thumb img{
    width:85px;
    height:65px;
    object-fit:cover;
    border-radius:10px;
}

.news-latest-item h5{
    margin:0;
    font-size:14px;
    color:#222;
    line-height:1.4;
    transition:.3s;
}

.news-latest-item:hover h5{
    color:#2563eb;
}


/* =========================================================
   DETAIL BERITA
   PART 2I
   Dark Mode • Animation • Utility • Back To Top
   Reading Progress • Print
=========================================================*/


/* ==========================
READING PROGRESS
========================== */

.reading-progress{

    position:fixed;

    top:0;
    left:0;

    width:0;

    height:4px;

    background:linear-gradient(
        90deg,
        #2563eb,
        #3b82f6
    );

    z-index:99999;

    transition:width .15s linear;

}


/* ==========================
BACK TO TOP
========================== */

.back-top{

    position:fixed;

    right:25px;
    bottom:25px;

    width:52px;
    height:52px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:none;

    border-radius:50%;

    background:#2563eb;

    color:#fff;

    font-size:18px;

    cursor:pointer;

    opacity:0;
    visibility:hidden;

    transform:translateY(20px);

    transition:.35s;

    z-index:9999;

    box-shadow:
        0 12px 30px rgba(37,99,235,.35);

}

.back-top.show{

    opacity:1;

    visibility:visible;

    transform:none;

}

.back-top:hover{

    background:#1d4ed8;

    transform:translateY(-4px);

}


/* ==========================
FADE ANIMATION
========================== */

.fade-up{

    opacity:0;

    transform:translateY(35px);

    transition:
        opacity .6s ease,
        transform .6s ease;

}

.fade-up.show{

    opacity:1;

    transform:none;

}


/* ==========================
IMAGE ZOOM
========================== */

.zoom-effect{

    overflow:hidden;

}

.zoom-effect img{

    transition:.45s;

}

.zoom-effect:hover img{

    transform:scale(1.08);

}


/* ==========================
LOADING
========================== */

.loading{

    position:relative;

    overflow:hidden;

}

.loading::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transform:translateX(-100%);

    animation:skeleton 1.3s infinite;

}

@keyframes skeleton{

    to{

        transform:translateX(100%);

    }

}


/* ==========================
UTILITY
========================== */

.shadow-sm{

    box-shadow:
        0 4px 15px rgba(15,23,42,.06);

}

.shadow{

    box-shadow:
        0 12px 30px rgba(15,23,42,.08);

}

.rounded{

    border-radius:16px;

}

.rounded-sm{

    border-radius:10px;

}

.text-center{

    text-align:center;

}

.text-right{

    text-align:right;

}

.mt-20{

    margin-top:20px;

}

.mt-30{

    margin-top:30px;

}

.mb-20{

    margin-bottom:20px;

}

.mb-40{

    margin-bottom:40px;

}

.hidden{

    display:none !important;

}


/* ==========================
SMOOTH SCROLL
========================== */

html{

    scroll-behavior:smooth;

}


/* ==========================
CUSTOM SCROLLBAR
========================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#f1f5f9;

}

::-webkit-scrollbar-thumb{

    background:#cbd5e1;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#2563eb;

}


/* ==========================
FOCUS
========================== */

button:focus,
a:focus,
input:focus{

    outline:none;

}


/* ==========================
SELECTION
========================== */

::selection{

    background:#2563eb;

    color:#fff;

}


/* ==========================
PRINT
========================== */

@media print{

    header,
    footer,
    .share-box,
    .back-top,
    .reading-progress,
    .post-navigation{

        display:none !important;

    }

    body{

        background:#fff;

        color:#000;

    }

    .news-wrapper{

        display:block;

    }

    .article-title{

        color:#000;

    }

}


/* =========================================================
DARK MODE
========================================================= */

body.dark-mode{

    background:#0f172a;

    color:#e2e8f0;

}


/* Card */

body.dark-mode .article-wrapper,
body.dark-mode .author-box,
body.dark-mode .post-navigation a{

    background:#1e293b;

    border-color:#334155;

}

/* Title */

body.dark-mode .article-title,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4{

    color:#f8fafc;

}

/* Paragraph */

body.dark-mode .article-content,
body.dark-mode .article-content p,
body.dark-mode .meta-left span{

    color:#cbd5e1;

}

/* Breadcrumb */

body.dark-mode .breadcrumb a{

    color:#94a3b8;

}

body.dark-mode .breadcrumb span{

    color:#60a5fa;

}

/* Blockquote */

body.dark-mode .article-content blockquote{

    background:#172554;

    color:#e2e8f0;

    border-left-color:#3b82f6;

}

/* Table */

body.dark-mode table td{

    border-color:#334155;

}

body.dark-mode table tr:nth-child(even){

    background:#172554;

}

/* Tags */

body.dark-mode .article-tags a{

    background:#172554;

    color:#93c5fd;

}

body.dark-mode .article-tags a:hover{

    background:#2563eb;

    color:#fff;

}

/* Form */

body.dark-mode input{

    background:#0f172a;

    border-color:#334155;

    color:#fff;

}

body.dark-mode input::placeholder{

    color:#94a3b8;

}



/* Scrollbar */

body.dark-mode ::-webkit-scrollbar-track{

    background:#0f172a;

}

body.dark-mode ::-webkit-scrollbar-thumb{

    background:#475569;

}

body.dark-mode ::-webkit-scrollbar-thumb:hover{

    background:#3b82f6;

}

/* Back To Top */

body.dark-mode .back-top{

    background:#3b82f6;

}

body.dark-mode .back-top:hover{

    background:#2563eb;

}

/* Reading Progress */

body.dark-mode .reading-progress{

    background:linear-gradient(
        90deg,
        #3b82f6,
        #60a5fa
    );

}

/* ==========================
TOAST
========================== */

.toast{

    position:fixed;

    left:50%;
    bottom:30px;

    transform:translateX(-50%) translateY(20px);

    background:#2563eb;

    color:#fff;

    padding:14px 22px;

    border-radius:12px;

    font-size:14px;

    font-weight:600;

    display:flex;

    align-items:center;

    gap:10px;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:999999;

    box-shadow:0 15px 35px rgba(37,99,235,.35);

}

.toast.show{

    opacity:1;

    visibility:visible;

    transform:translateX(-50%);

}

.toast i{

    font-size:18px;

}

/* ==========================================================
LIGHTBOX
========================================================== */

.image-lightbox{

    position:fixed;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,0,0,.88);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:999999;

}

.image-lightbox.show{

    opacity:1;

    visibility:visible;

}

.lightbox-image{

    max-width:92vw;

    max-height:88vh;

    border-radius:12px;

    box-shadow:0 25px 60px rgba(0,0,0,.45);

    transform:scale(.9);

    transition:.3s;

}

.image-lightbox.show .lightbox-image{

    transform:scale(1);

}

.lightbox-close{

    position:absolute;

    top:20px;

    right:25px;

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:#ffffff;

    color:#111827;

    font-size:28px;

    cursor:pointer;

    transition:.3s;

}

.lightbox-close:hover{

    background:#2563eb;

    color:#fff;

}

.lightbox-overlay{

    position:absolute;

    inset:0;

}

@media(max-width:768px){

    .lightbox-image{

        max-width:95vw;

        max-height:80vh;

    }

    .lightbox-close{

        top:15px;

        right:15px;

        width:42px;

        height:42px;

        font-size:24px;

    }

}

.featured-overlay h4{

    font-size:20px;

}


/* ==========================================================
SCROLL REVEAL
========================================================== */

.fade-up{

    opacity:0;

    transform:translateY(35px);

    transition:

        opacity .7s ease,

        transform .7s ease;

}

.fade-up.show{

    opacity:1;

    transform:none;

}


/* ==========================================================
IMAGE REVEAL
========================================================== */

.image-hidden{

    opacity:0;

    transform:scale(.96);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.show-image{

    opacity:1;

    transform:scale(1);

}

/* ==========================================================
COPY BUTTON
========================================================== */

pre{

    position:relative;

}

.copy-code{

    position:absolute;

    top:12px;

    right:12px;

    border:none;

    background:#2563eb;

    color:#fff;

    padding:7px 14px;

    border-radius:8px;

    cursor:pointer;

    font-size:12px;

    transition:.3s;

}

.copy-code:hover{

    background:#1d4ed8;

}


/* ==========================================================
LAZY IMAGE
========================================================== */

img{

    transition:.4s;

}

img.loaded{

    opacity:1;

}

img[data-src]{

    opacity:.5;

}


/* ==========================================================
PAGE VISIBILITY
========================================================== */

.page-hidden{

    filter:grayscale(.15);

}

/* ==========================================
FORCE UKURAN JUDUL BERITA
Letakkan PALING BAWAH berita.css
========================================== */

.article-title,
h1.article-title{

    font-size:31px !important;
    line-height:1.4 !important;
    font-weight:700 !important;

}

@media (max-width:768px){

    .article-title,
    h1.article-title{

        font-size:20px !important;

    }

}

@media (max-width:480px){

    .article-title,
    h1.article-title{

        font-size:22px !important;

    }

}

/* ==========================================
LEBAR KHUSUS HALAMAN BERITA
========================================== */

.news-container{

    max-width:1300px;
    width:100%;
    margin:0 auto;
    overflow:visible;

}


/* ==========================================
FORCE SHARE BUTTON CENTER
========================================== */

.share-box{

    width:100% !important;

    display:flex !important;

    justify-content:center !important;

    align-items:center !important;

    flex-wrap:wrap !important;

    gap:12px !important;

    text-align:center !important;

}

/*============================
RESPONSIVE
============================*/

@media(max-width:768px){

    .news-wrapper{

        display:block;

    }

    .article-wrapper{

        margin-bottom:35px;

    }

}

/* ==========================================
FORCE WARNA VIEWS
========================================== */

.share-views strong{
    color:#0f172a !important;
}

.share-views span{
    color:#64748b !important;
}

/* Dark Mode */
body.dark-mode .share-views strong{
    color:#ffffff !important;
}

body.dark-mode .share-views span{
    color:#cbd5e1 !important;
}

/* ==========================================
HILANGKAN BOX HALAMAN BERITA
========================================== */

.article-wrapper{
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

body.dark-mode .article-wrapper{
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* =====================================================
REKOMENDASI
=====================================================*/

.recommend-section{

    margin:60px 0;

}

/* ==========================
HEADER
========================== */

.recommend-header{

    margin-bottom:25px;

    padding-bottom:12px;

    border-bottom:1px solid #e5e7eb;

    position:relative;

}

.recommend-header::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-1px;

    width:55px;
    height:3px;

    background:#2563eb;

}

.recommend-header h2{

    margin:0;

    font-size:28px;

    font-weight:700;

    color:#111827;

}

/* ==========================
GRID
========================== */

.recommend-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:22px;

}

/* ==========================
CARD
========================== */

.recommend-card{

    display:block;

    text-decoration:none;

    transition:.3s;

}

.recommend-card:hover{

    transform:translateY(-4px);

}

/* ==========================
IMAGE
========================== */

.recommend-image{

    position:relative;

    overflow:hidden;

    border-radius:8px;

}

.recommend-image img{

    width:100%;

    height:210px;

    object-fit:cover;

    display:block;

    transition:.4s;

}

.recommend-card:hover img{

    transform:scale(1.06);

}

/* gradient */

.recommend-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        transparent 45%,
        rgba(0,0,0,.65)
    );

}

/* ==========================
CATEGORY
========================== */

.recommend-category{

    position:absolute;

    top:12px;

    left:12px;

    z-index:5;

    padding:5px 10px;

    background:#2563eb;

    color:#fff;

    font-size:10px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

    border-radius:4px;

}

/* ==========================
CONTENT
========================== */

.recommend-content{

    padding-top:10px;

}

.recommend-content h3{

    margin:0;

    font-size:17px;

    font-weight:700;

    line-height:1.45;

    color:#111827;

    transition:.3s;

}

.recommend-card:hover h3{

    color:#2563eb;

}

/* ==========================
TABLET
========================== */

@media(max-width:992px){

    .recommend-grid{

        grid-template-columns:repeat(3,1fr);

        gap:18px;

    }

    .recommend-image img{

        height:180px;

    }

    .recommend-content{

        padding-top:9px;

    }

    .recommend-content h3{

        font-size:15px;

    }

}

/* ==========================
MOBILE
========================== */

@media(max-width:768px){

    .recommend-grid{

        grid-template-columns:repeat(2,1fr);

        gap:16px;

    }

    .recommend-header h2{

        font-size:24px;

    }

    .recommend-image img{

        height:155px;

    }

    .recommend-content{

        padding-top:8px;

    }

    .recommend-content h3{

        font-size:15px;

    }

}

@media(max-width:480px){

    .recommend-grid{

        gap:14px;

    }

    .recommend-image{

        border-radius:6px;

    }

    .recommend-image img{

        height:120px;

    }

    .recommend-category{

        top:8px;

        left:8px;

        padding:4px 8px;

        font-size:9px;

    }

    .recommend-content{

        padding-top:7px;

    }

    .recommend-content h3{

        font-size:14px;

        line-height:1.4;

    }

}

/* =====================================================
DARK MODE
=====================================================*/

body.dark-mode .recommend-header{

    border-color:#334155;

}

body.dark-mode .recommend-header h2{

    color:#fff;

}

body.dark-mode .recommend-content h3{

    color:#fff;

}

body.dark-mode .recommend-card:hover h3{

    color:#60a5fa;

}

.news-detail-sidebar{

    width:100%;

    min-width:0;

    align-self:start;

}

/* ==========================================
DARK MODE - WARTA TERBARU
========================================== */

body.dark-mode .news-latest-header h3,
body.dark-mode .news-latest-item h5{
    color:#ffffff !important;
}

body.dark-mode .news-latest-item:hover h5{
    color:#60a5fa !important;
}

/* =====================================================
   BACA JUGA
=====================================================*/

.read-more-box{

    margin:15px 0 25px;

}

.article-content p:last-of-type{
    margin-bottom:0;
}

.article-content .read-more-box{
    margin:5px 0 8px;
}

/* Header */

.read-more-title{

    position:relative;

    margin-bottom:22px;

    padding-bottom:12px;

    border-bottom:1px solid #e5e7eb;

    font-size:18px;

    font-weight:700;

    color:#111827;

    text-transform:uppercase;

}

.read-more-title::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-1px;

    width:88px;
    height:3px;

    background:#2563eb;

}

/* Grid */

.read-more-list{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:22px;

}

/* Card */

.read-more-item{

    display:flex;

    align-items:flex-start;

    gap:16px;

    text-decoration:none;

    transition:.3s;

}

/* Agar text bisa di-clamp */

.read-more-content{

    flex:1;

    min-width:0;

}

/* Hilangkan underline */

.read-more-item,
.read-more-item:hover,
.read-more-item:focus,
.read-more-item:active{

    text-decoration:none !important;

    outline:none;

}

.read-more-item:hover{

    transform:translateY(-3px);

}

/* Thumbnail */

.read-more-item img{

    width:105px;

    height:78px;

    border-radius:10px;

    object-fit:cover;

    flex-shrink:0;

    transition:.35s;

}

.read-more-item:hover img{

    transform:scale(1.05);

}

/* Judul */

.read-more-item span{

    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:3;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:normal;

    line-height:1.45;

    max-height:calc(1.45em * 3);

    font-size:18px;

    font-weight:700;

    color:#111827;

    text-decoration:none !important;

    transition:.3s;

    word-break:break-word;

}

.read-more-item:hover span,
.read-more-item:focus span,
.read-more-item:active span{

    color:#2563eb;

    text-decoration:none !important;

}

/* ==========================
Tablet
========================== */

@media(max-width:992px){

    .read-more-item img{

        width:95px;
        height:70px;

    }

    .read-more-item span{

        font-size:16px;

    }

}

/* ==========================
Mobile
========================== */

@media(max-width:768px){

    .read-more-list{

        grid-template-columns:1fr;

        gap:18px;

    }

    .read-more-item{

        gap:14px;

    }

    .read-more-item img{

        width:90px;

        height:68px;

    }

    .read-more-item span{

        font-size:15px;

    }

}

/* ==========================
Dark Mode
========================== */

body.dark-mode .read-more-title{

    color:#ffffff;

    border-color:#334155;

}

body.dark-mode .read-more-item span{

    color:#ffffff;

}

body.dark-mode .read-more-item:hover span,
body.dark-mode .read-more-item:focus span,
body.dark-mode .read-more-item:active span{

    color:#60a5fa;

    text-decoration:none !important;

}

/* =====================================================
   KOMENTAR
=====================================================*/

.comment-section{

    margin:60px 0;

    background:#fff;

    border:1px solid #e8e8e8;

    border-radius:12px;

    overflow:hidden;

    box-shadow:0 2px 10px rgba(0,0,0,.04);

}

/* ==========================================
   HEADER
========================================== */

.comment-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 25px;

    border-bottom:1px solid #ececec;

}

.comment-header h2{

    margin:0;

    font-size:26px;

    font-weight:700;

    color:#222;

}

.comment-header span{

    font-size:14px;

    color:#888;

    font-weight:500;

}

/* ==========================================
   FORM
========================================== */

.comment-form{

    padding:25px;

}

.comment-user{

    display:flex;

    align-items:flex-start;

    gap:18px;

}

.comment-user img{

    width:56px;

    height:56px;

    border-radius:50%;

    object-fit:cover;

    flex-shrink:0;

    border:2px solid #f2f2f2;

}

.comment-user textarea{

    flex:1;

    width:100%;

    min-height:150px;

    resize:vertical;

    border:1px solid #ddd;

    border-radius:10px;

    padding:16px;

    font-size:15px;

    line-height:1.6;

    font-family:inherit;

    outline:none;

    transition:.25s;

    background:#fff;

}

.comment-user textarea:focus{

    border-color:#0066cc;

    box-shadow:0 0 0 3px rgba(0,102,204,.08);

}

/* ==========================================
   FOOTER
========================================== */

.comment-form-footer{

    margin-top:18px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}

.comment-form-footer small{

    color:#777;

    font-size:13px;

    line-height:1.5;

}

.comment-form-footer button{

    display:flex;

    align-items:center;

    gap:8px;

    padding:12px 28px;

    border:none;

    border-radius:8px;

    background:#0066cc;

    color:#fff;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.comment-form-footer button:hover{

    background:#0050a6;

}

/* ==========================================
   LIST KOMENTAR
========================================== */

.comment-list{

    padding:30px;

    background:#fff;

}

.comment-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:22px;

    margin-bottom:18px;

    border:1px solid #ececec;

    border-radius:12px;

    background:#fff;

    transition:.25s;

}

.comment-item:hover{

    box-shadow:0 8px 25px rgba(0,0,0,.05);

}

.comment-item:last-child{

    border-bottom:none;

}

.comment-avatar{

    width:56px;

    height:56px;

    min-width:56px;

    border-radius:50%;

    object-fit:cover;

    border:2px solid #eee;

}

.comment-body{

    flex:1;

    min-width:0;

}

.comment-body h4{

    margin:0;

    font-size:16px;

    font-weight:700;

    color:#222;

}

.comment-body small{

    display:block;

    margin:4px 0 12px;

    font-size:13px;

    color:#888;

}

.comment-body p{

    margin:0;

    color:#444;

    line-height:1.8;

    font-size:15px;

    white-space:pre-line;

    word-break:break-word;

}

.comment-empty{

    text-align:center;

    padding:30px 10px;

}

.comment-empty i{

    font-size:60px;

    color:#d5d5d5;

    margin-bottom:15px;

}

.comment-empty h3{

    margin:0 0 10px;

    font-size:22px;

    color:#333;

}

.comment-empty p{

    margin:0;

    color:#777;

    line-height:1.7;

}

/* =====================================================
   DESKTOP BESAR
=====================================================*/

@media (min-width:1200px){

    .comment-section{

        margin:70px 0;

    }

    .comment-list{

        padding:35px;

    }

    .comment-item{

        gap:18px;

        padding:22px 0;

    }

    .comment-avatar{

        width:54px !important;

        height:54px !important;

        min-width:54px !important;

        max-width:54px !important;

    }

}

/* =====================================================
   TABLET
=====================================================*/

@media (max-width:992px){

    .comment-section{

        margin:50px 0;

    }

    .comment-header{

        padding:18px 20px;

    }

    .comment-header h2{

        font-size:24px;

    }

    .comment-form{

        padding:20px;

    }

    .comment-user{

        gap:15px;

    }

    .comment-user img{

        width:52px;

        height:52px;

    }

    .comment-user textarea{

        min-height:140px;

    }

    .comment-list{

        padding:25px;

    }

    .comment-item{

        gap:14px;

        padding:18px 0;

    }

    .comment-avatar{

        width:48px !important;

        height:48px !important;

        min-width:48px !important;

        max-width:48px !important;

    }

    .comment-body h4{

        font-size:15px;

    }

    .comment-body p{

        font-size:14px;

    }

}

/* =====================================================
   MOBILE
=====================================================*/

@media (max-width:768px){

    .comment-header{

        flex-direction:column;

        align-items:flex-start;

        gap:6px;

    }

    .comment-header h2{

        font-size:22px;

    }

    .comment-form{

        padding:18px;

    }

    .comment-user{

        flex-direction:column;

        gap:15px;

    }

    .comment-user img{

        width:50px;

        height:50px;

    }

    .comment-user textarea{

        min-height:130px;

    }

    .comment-form-footer{

        flex-direction:column;

        align-items:stretch;

    }

    .comment-form-footer button{

        width:100%;

        justify-content:center;

    }

    .comment-list{

        padding:20px;

    }

    .comment-item{

        gap:12px;

        padding:16px 0;

    }

    .comment-avatar{

        width:44px !important;

        height:44px !important;

        min-width:44px !important;

        max-width:44px !important;

    }

    .comment-body h4{

        font-size:15px;

    }

    .comment-body small{

        font-size:12px;

    }

    .comment-body p{

        font-size:14px;

        line-height:1.7;

    }

    .comment-empty i{

        font-size:52px;

    }

    .comment-empty h3{

        font-size:20px;

    }

}

/* =====================================================
   MOBILE KECIL
=====================================================*/

@media (max-width:480px){

    .comment-section{

        border-radius:10px;

    }

    .comment-header{

        padding:15px;

    }

    .comment-header h2{

        font-size:20px;

    }

    .comment-form{

        padding:15px;

    }

    .comment-user textarea{

        padding:14px;

        font-size:14px;

    }

    .comment-form-footer{

        gap:12px;

    }

    .comment-form-footer small{

        font-size:12px;

    }

    .comment-form-footer button{

        padding:11px 18px;

        font-size:14px;

    }

    .comment-list{

        padding:15px;

    }

    .comment-item{

        gap:10px;

        padding:15px 0;

    }

    .comment-avatar{

        width:40px !important;

        height:40px !important;

        min-width:40px !important;

        max-width:40px !important;

    }

    .comment-body h4{

        font-size:14px;

    }

    .comment-body small{

        font-size:11px;

    }

    .comment-body p{

        font-size:13px;

        line-height:1.6;

    }

    .comment-empty i{

        font-size:46px;

    }

    .comment-empty h3{

        font-size:18px;

    }

    .comment-empty p{

        font-size:14px;

    }

}

.comment-login-box{

    padding:35px;

    text-align:center;

    border-bottom:1px solid #ececec;

    background:#fafafa;

}

.comment-login-box i{

    font-size:45px;

    color:#0d6efd;

    margin-bottom:18px;

}

.comment-login-box h3{

    margin:0 0 10px;

    font-size:24px;

    font-weight:700;

}

.comment-login-box p{

    max-width:520px;

    margin:0 auto 25px;

    color:#666;

    line-height:1.7;

}

.comment-login-actions{

    display:flex;

    justify-content:center;

    gap:15px;

}

.comment-login-actions a{

    text-decoration:none;

    padding:12px 25px;

    border-radius:8px;

    font-weight:600;

    transition:.25s;

}

.btn-login{

    background:#0d6efd;

    color:#fff;

}

.btn-login:hover{

    background:#0a58ca;

}

.btn-register{

    border:1px solid #0d6efd;

    color:#0d6efd;

}

.btn-register:hover{

    background:#0d6efd;

    color:#fff;

}

.comment-meta{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:10px;

    flex-wrap:wrap;

}

.comment-meta h4{

    margin:0;

    font-size:17px;

    font-weight:700;

    color:#222;

}

.comment-meta small{

    color:#888;

    font-size:13px;

}

@media(max-width:768px){

    .comment-login-actions{

        flex-direction:column;

    }

    .comment-login-actions a{

        width:100%;

        text-align:center;

    }

    .comment-item{

        padding:18px;

    }

    .comment-meta{

        flex-direction:column;

        align-items:flex-start;

        gap:3px;

    }

}

/* paragraf sebelum baca juga */
.article-content p:has(+ .read-more-box){
    margin-bottom:8px;
}

/* baca juga */
.article-content .read-more-box{
    margin:8px 0;
}

/* paragraf setelah baca juga */
.article-content .read-more-box + p{
    margin-top:8px;
}

/* ==========================================
PAKSA BACA JUGA RAPAT
========================================== */

/* Box utama */
.article-content .read-more-box{
    margin:8px 0 !important;
    padding:0 !important;
}

/* Judul BACA JUGA */
.article-content .read-more-title{
    margin:0 0 10px !important;
    padding-bottom:8px !important;
}

/* List berita tepat di bawah garis */
.article-content .read-more-list{
    margin-top:0 !important;
    padding-top:0 !important;
    gap:14px !important;
}

/* Hilangkan jarak dari gambar */
.article-content .read-more-item img{
    margin:0 !important;
}

/* Hilangkan jarak dari judul */
.article-content .read-more-item span{
    margin:0 !important;
}

/* Paragraf sebelum BACA JUGA */
.article-content p:has(+ .read-more-box){
    margin-bottom:8px !important;
}

/* Paragraf setelah BACA JUGA */
.article-content .read-more-box + p{
    margin-top:8px !important;
}

.article-content .read-more-box + p{
    margin-top:0 !important;
    padding-top:0 !important;
}

.article-content .read-more-box + *{
    margin-top:0 !important;
}

/* ==========================================
Gambar Tengah Berita
========================================== */

.article-inline-image{

    margin:30px 0;

}

.article-inline-image img{

    width:100%;

    display:block;

    border-radius:12px;

    object-fit:cover;

}

/* Rapikan paragraf hasil CKEditor */

.article-content p{
    margin:0 0 18px !important;
    line-height:1.9;
}

.article-content p:empty{
    display:none !important;
}

.article-content p:has(br:only-child){
    display:none !important;
}

.article-content p:has(> br:only-child){
    display:none !important;
}

/* ==========================================
RAPIKAN PARAGRAF HASIL CKEDITOR
========================================== */

.article-content p{
    margin:0 0 18px !important;
    line-height:1.9 !important;
    text-align:justify;
}

/* Paragraf benar-benar kosong */
.article-content p:empty{
    display:none !important;
}

/* Paragraf hanya berisi <br> */
.article-content p:has(> br:only-child),
.article-content p:has(br:only-child){
    display:none !important;
}

/* Hilangkan margin paragraf terakhir */
.article-content p:last-child{
    margin-bottom:0 !important;
}

/*=====================================
TAG BERITA
=====================================*/

.article-tags{
    margin:45px 0 35px;
    padding-top:20px;
    border-top:1px solid #ececec;
}

.article-tags-title{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:15px;
    font-size:18px;
    font-weight:700;
}

.article-tags-title i{
    color:#ff6b00;
}

.article-tags-list{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.article-tag{
    display:inline-flex;
    align-items:center;
    padding:8px 15px;
    border-radius:30px;
    background:#f3f5f7;
    color:#333;
    text-decoration:none;
    font-size:14px;
    transition:.25s;
}

.article-tag:hover{
    background:#0d6efd;
    color:#fff;
}

.dark .article-tags{
    border-color:#333;
}

.dark .article-tag{
    background:#232323;
    color:#f5f5f5;
}

.dark .article-tag:hover{
    background:#0d6efd;
    color:#fff;
}


/* ==========================================
HILANGKAN STYLE BLOCKQUOTE
========================================== */

.article-content blockquote{

    margin:18px 0 !important;
    padding:0 !important;

    background:transparent !important;

    border:none !important;
    border-left:none !important;

    border-radius:0 !important;

    box-shadow:none !important;

    font-size:16px !important;
    line-height:1.9 !important;

    font-style:normal !important;

    color:inherit !important;

    position:static !important;
}

.article-content blockquote::before{

    display:none !important;
    content:none !important;

}

.article-content blockquote p{

    margin:0 0 18px !important;

}