/* =========================
   GLOBAL
========================= */
body{
    margin:0;
    font-family:Inter, system-ui, sans-serif;
    background:#0b1220;
    color:#e5e7eb;
    line-height:1.7;
}

/* =========================
   NAVBAR
========================= */
.navbar{
    position:sticky;
    top:0;
    background:#0a0f1c;
    z-index:999;
    border-bottom:1px solid #1f2937;
}

.nav-inner{
    max-width:1200px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 20px;
}

.logo{
    color:#fff;
    font-weight:800;
    text-decoration:none;
    font-size:18px;
}

.menu a{
    color:#9ca3af;
    margin:0 10px;
    text-decoration:none;
    font-size:14px;
    transition:.2s;
}

.menu a:hover{
    color:#fff;
}

/* =========================
   PROGRESS BAR
========================= */
.progress{
    height:3px;
    background:#ff2d55;
    width:0%;
    position:fixed;
    top:0;
    left:0;
    z-index:9999;
}

/* =========================
   LAYOUT
========================= */
.container{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:2.5fr 1fr;
    gap:25px;
    padding:25px;
}

/* =========================
   ARTICLE BOX
========================= */
.main{
    background:#0f172a;
    padding:28px;
    border-radius:16px;
    border:1px solid #1f2937;
}

/* TITLE */
.title{
    font-size:32px;
    font-weight:800;
    line-height:1.3;
    margin-bottom:10px;
}

/* META */
.meta{
    color:#94a3b8;
    font-size:13px;
    margin-bottom:15px;
}

/* =========================
   BREADCRUMB
========================= */
.breadcrumb{
    font-size:13px;
    margin-bottom:15px;
    color:#94a3b8;
}

.breadcrumb a{
    color:#9ca3af;
    text-decoration:none;
}

.breadcrumb a:hover{
    color:#fff;
}

/* =========================
   IMAGE + CAPTION
========================= */
.image-wrapper{
    margin:15px 0 20px;
}

.img{
    width:100%;
    border-radius:12px;
    max-height:450px;
    object-fit:cover;
    border:1px solid #1f2937;
}

/* caption */
.img-caption{
    font-size:13px;
    color:#cbd5e1;
    margin-top:8px;
    padding-left:2px;
}

/* credit */
.img-credit{
    font-size:12px;
    color:#64748b;
    margin-top:3px;
}

/* =========================
   CONTENT
========================= */
.main p{
    font-size:16px;
    color:#e5e7eb;
}

/* =========================
   SHARE FLOAT
========================= */
.share-float{
    position:fixed;
    top:40%;
    left:10px;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.share-float a{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#fff;
    font-size:14px;
    transition:.2s;
}

.share-float a:hover{
    transform:scale(1.1);
}

.fb{background:#1877f2}
.wa{background:#25d366}
.tw{background:#111}

/* =========================
   SIDEBAR
========================= */
.sidebar{
    position:sticky;
    top:80px;
}

.card{
    background:#0f172a;
    padding:16px;
    border-radius:12px;
    border:1px solid #1f2937;
    margin-bottom:15px;
}

.card h4{
    margin:0 0 10px;
    color:#fff;
    font-size:15px;
}

.card a{
    display:block;
    color:#9ca3af;
    padding:6px 0;
    text-decoration:none;
    font-size:14px;
}

.card a:hover{
    color:#fff;
}

/* =========================
   KOMENTAR
========================= */
.comment-box{
    background:#0f172a;
    padding:12px;
    border-radius:10px;
    border:1px solid #1f2937;
    margin-bottom:10px;
}

.comment-box strong{
    color:#fff;
    font-size:14px;
}

.comment-box span{
    color:#64748b;
    font-size:12px;
    margin-left:8px;
}

.comment-box p{
    font-size:14px;
    margin:6px 0;
    color:#e5e7eb;
}

/* =========================
   FORM
========================= */
input,textarea{
    width:100%;
    padding:10px;
    margin:6px 0;
    border-radius:8px;
    border:1px solid #1f2937;
    background:#0f172a;
    color:#fff;
    outline:none;
}

input:focus,textarea:focus{
    border-color:#ff2d55;
}

button{
    background:#ff2d55;
    color:#fff;
    padding:10px 16px;
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-weight:600;
}

button:hover{
    background:#e11d48;
}

/* =========================
   FOOTER
========================= */
.footer{
    background:#0a0f1c;
    color:#cbd5e1;
    margin-top:50px;
    padding-top:40px;
    border-top:1px solid #1f2937;
}

.footer-container{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    padding:0 20px;
}

.footer-col h3{
    color:#fff;
    font-size:22px;
}

.footer-col h3 span{
    color:#ff2d55;
}

.footer-col h4{
    color:#fff;
    margin-bottom:10px;
}

.footer-col p{
    font-size:14px;
    color:#9ca3af;
}

.footer-col a{
    display:block;
    color:#9ca3af;
    text-decoration:none;
    margin:6px 0;
    transition:.2s;
}

.footer-col a:hover{
    color:#fff;
}

/* SOCIAL */
.socials{
    display:flex;
    gap:10px;
    margin-top:10px;
}

.socials a{
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    transition:.2s;
    color:#fff;
}

.socials a:hover{
    transform:translateY(-3px);
}

/* FOOTER BOTTOM */
.footer-bottom{
    text-align:center;
    padding:15px;
    border-top:1px solid #1f2937;
    margin-top:30px;
    font-size:13px;
    color:#64748b;
}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:900px){
    .container{
        grid-template-columns:1fr;
    }

    .share-float{
        display:none;
    }

    .footer-container{
        grid-template-columns:1fr;
        text-align:center;
    }

    .socials{
        justify-content:center;
    }
}


@media print {

    /* sembunyikan semua kecuali artikel */
    body * {
        visibility: hidden;
    }

@media print {

    body::after {
        content: "SENTER SUMBAR   SENTER SUMBAR   SENTER SUMBAR   SENTER SUMBAR   SENTER SUMBAR";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        font-size: 40px;
        color: rgba(0,0,0,0.04);
        transform: rotate(-25deg);
        white-space: pre-wrap;
        line-height: 120px;
        pointer-events: none;
        z-index: 0;
    }

}

    .print-area, .print-area * {
        visibility: visible;
    }

    .print-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding: 20mm;
    }

    /* A4 setup */
    @page {
        size: A4;
        margin: 15mm;
    }

    body {
        background: white;
        color: black;
    }

    /* styling artikel print */
    .meta {
        font-size: 12px;
        color: #333;
        margin-bottom: 10px;
    }

    .img {
        width: 100%;
        max-height: 400px;
        object-fit: cover;
        margin-bottom: 10px;
    }

    .img-caption {
        font-size: 11px;
        color: #444;
        margin-bottom: 10px;
    }

    .content {
        font-size: 14px;
        line-height: 1.7;
    }

    /* hilangkan elemen lain */
    .navbar,
    .sidebar,
    .footer,
    .share-float,
    button,
    form,
    .breadcrumb {
        display: none !important;
    }
}

.article-topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
    flex-wrap:wrap;
    gap:10px;
}

/* =========================
   MOBILE FIX TOTAL
========================= */

*{
    box-sizing:border-box;
}

img{
    max-width:100%;
    height:auto;
}

/* cegah geser kanan */
body{
    overflow-x:hidden;
}

/* =========================
   TABLET & MOBILE
========================= */
@media(max-width:768px){

    /* CONTAINER */
    .container{
        grid-template-columns:1fr !important;
        padding:15px;
        gap:15px;
    }

    /* MAIN CONTENT */
    .main{
        padding:18px;
    }

    /* TITLE */
    .title{
        font-size:24px;
        line-height:1.4;
    }

    /* TEXT */
    .main p{
        font-size:15px;
    }

    /* IMAGE */
    .img{
        max-height:280px;
        border-radius:10px;
    }

    /* NAVBAR */
    .nav-inner{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

    .menu{
        display:flex;
        flex-wrap:wrap;
        gap:8px;
        width:100%;
    }

    .menu a{
        font-size:13px;
        margin:0;
        padding:6px 10px;
        background:#111827;
        border-radius:6px;
    }

    /* SIDEBAR JADI BAWAH */
    .sidebar{
        position:relative;
        top:0;
    }

    /* SHARE HIDE */
    .share-float{
        display:none !important;
    }

    /* FOOTER */
    .footer-container{
        grid-template-columns:1fr;
        text-align:center;
        gap:20px;
    }

    .socials{
        justify-content:center;
    }

    /* KOMENTAR */
    .comment{
        margin-left:0 !important;
    }

    /* FORM */
    input, textarea{
        font-size:14px;
    }

    button{
        width:100%;
    }

}

/* =========================
   SMALL PHONE
========================= */
@media(max-width:480px){

    .title{
        font-size:20px;
    }

    .meta{
        font-size:12px;
    }

    .main{
        padding:15px;
    }

}


.share-float a{
    width:45px;
    height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    transition:all .3s ease;
    box-shadow:0 4px 10px rgba(0,0,0,0.3);
}

/* SVG size */
.share-float svg{
    width:20px;
    height:20px;
}

/* hover effect */
.share-float a:hover{
    transform:scale(1.2) rotate(8deg);
}

/* warna tombol */
.fb{background:#1877f2}
.wa{background:#25d366}
.tw{background:#000}


/* =========================
   SHARE DI BAWAH FOTO
========================= */

.share-inline{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
    margin:15px 0 25px;
    padding:15px;
    background:#111827;
    border-radius:12px;
    border:1px solid #1f2937;
}

.share-label{
    font-size:14px;
    font-weight:700;
    color:#fff;
    margin-right:5px;
}

.share-btn{
    display:flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
    color:#fff;
    padding:10px 14px;
    border-radius:8px;
    font-size:14px;
    font-weight:600;
    transition:.3s;
}

.share-btn:hover{
    transform:translateY(-2px);
}

.share-btn.fb{
    background:#1877f2;
}

.share-btn.wa{
    background:#25d366;
}

.share-btn.tw{
    background:#000;
}

.share-btn.tg{
    background:#229ED9;
}

/* MOBILE */
@media(max-width:768px){

    .share-inline{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .share-label{
        grid-column:1/-1;
        margin-bottom:5px;
    }

    .share-btn{
        justify-content:center;
        width:100%;
        padding:12px;
    }
}


/* =========================
   BREADCRUMB
========================= */
.breadcrumb{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    font-size:13px;
    margin-bottom:15px;
    color:#94a3b8;
}

.breadcrumb a{
    color:#9ca3af;
    text-decoration:none;
    transition:.2s;
}

.breadcrumb a:hover{
    color:#fff;
}

.breadcrumb .sep{
    color:#475569;
}

.breadcrumb .current{
    color:#fff;
    font-weight:600;
}

/* MOBILE */
@media(max-width:768px){

    .breadcrumb{
        font-size:12px;
        line-height:1.5;
    }

}

/* tambahan */
.article-pagination{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:center;
    margin:30px 0;
}

.page-number,
.page-btn{
    padding:8px 14px;
    border-radius:6px;
    background:#f3f4f6;
    text-decoration:none;
    color:#111;
    font-weight:600;
}

.page-number.active{
    background:#dc2626;
    color:#fff;
}