:root {
     --pkk-primary: #068ED3;
     --pkk-secondary: #045A8D;
     --pkk-soft: #E6F4FB;
     --pkk-accent: #F2C94C;
     --pkk-dark: #212529;
 }

 body {
     background: var(--pkk-soft);
     font-family: 'Segoe UI', system-ui, sans-serif;
     color: var(--pkk-dark);
     padding-top: 10px;
 }

 /* Navbar */
 .navbar {
     /**background: linear-gradient(90deg, var(--pkk-secondary), var(--pkk-primary));**/
     /* GANTI URL GAMBAR NANTI */
    background-image: url("https://tppkk.muratarakab.go.id/assets/img/batik-pkk.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
 }

 .navbar-brand,
 .navbar-nav .nav-link {
     color: #fff !important;
     font-weight: 500;
 }

 .navbar-pkk.scrolled {
    padding: .4rem 0;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* ===============================
   BRAND NAVBAR RESPONSIVE
================================ */

.brand-pkk {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    white-space: nowrap;

    /* BACKGROUND PUTIH */
    background: rgba(255, 255, 255, 0.95);
    padding: 6px 14px;
    border-radius: 14px;

    box-shadow: 0 6px 18px rgba(0,0,0,.15);
}

/* Logo */
.brand-logo {
    width: 42px;
    height: auto;
    transition: width 0.3s ease;

    /* Logo tetap tegas */
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.35));
}

/* Text Wrapper */
.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

/* Title : TP PKK → HITAM */
.brand-title {
    font-size: 1.40rem;
    font-weight: 700;
    color: #000000;
}

/* Subtitle : Kabupaten Musi Rawas Utara → TOSKA */
.brand-subtitle {
    font-size: 1.20rem;
    font-weight: 500;
    color: #1FB6A6;
}


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

@media (max-width: 991.98px) {

    .brand-logo {
        width: 34px;
    }

    .brand-title {
        font-size: 0.95rem;
    }

    .brand-subtitle {
        font-size: 0.75rem;
    }
}


/* ===============================
   NAV ITEM STYLE (WHITE CHIP)
================================ */

.navbar-nav .nav-link {
    background: #ffffff;
    color: #1FB6A6 !important;
    padding: 8px 16px;
    border-radius: 10px;
    margin-left: 8px;
    margin-bottom:2px;
    margin-top:2px;
    font-weight: 600;
    transition: all 0.25s ease;
    box-shadow: 0 6px 14px rgba(0,0,0,.08);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Hover */
.navbar-nav .nav-link:hover {
    background: #1FB6A6;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(6,142,211,.35);
}

/* Active (halaman aktif) */
.navbar-nav .nav-link.active {
    background: linear-gradient(
        135deg,
        var(--pkk-secondary),
        var(--pkk-primary)
    );
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(6,142,211,.45);
}

/* Icon mengikuti warna teks */
.navbar-nav .nav-link i {
    font-size: 1rem;
}

/* ===============================
   EXTRA SMALL DEVICE
================================ */
@media (max-width: 420px) {

    .brand-logo {
        width: 30px;
    }
    
    .navbar-nav .nav-item{
        margin-bottom:5px;
    }

}


 /* --- Container Parent --- */

/* ===============================
   TOGGLER MENU PREMIUM (PUTIH)
================================ */

.custom-toggler {
    border: none;
    padding: 0.4rem 0.6rem;
    border-radius: 0.75rem;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

/* Icon hamburger */
.custom-toggler .navbar-toggler-icon {
    background-image: none;
    position: relative;
    width: 26px;
    height: 18px;
}

/* 3 garis */
.custom-toggler .navbar-toggler-icon::before,
.custom-toggler .navbar-toggler-icon::after,
.custom-toggler .navbar-toggler-icon span {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2.5px;
    background-color: #ffffff; /* PUTIH */
    border-radius: 10px;
    transition: all 0.3s ease;
}

/* posisi garis */
.custom-toggler .navbar-toggler-icon::before {
    top: 0;
}

.custom-toggler .navbar-toggler-icon span {
    top: 7.5px;
}

.custom-toggler .navbar-toggler-icon::after {
    bottom: 0;
}

/* Hover effect */
.custom-toggler:hover {
    background: rgba(255,255,255,0.12);
}

/* Focus */
.custom-toggler:focus {
    box-shadow: 0 0 0 0.15rem rgba(255,255,255,0.25);
}

/* ===============================
   MOBILE ADJUSTMENT
================================ */
@media (max-width: 575px) {
    .custom-toggler .navbar-toggler-icon {
        width: 22px;
        height: 16px;
    }
}

/* ===============================
   ANIMASI JADI X SAAT AKTIF
================================ */

/* garis atas → miring */
.custom-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
    transform: rotate(45deg);
    top: 7.5px;
}

/* garis bawah → miring */
.custom-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
    transform: rotate(-45deg);
    bottom: 7.5px;
}

/* garis tengah → hilang */
.custom-toggler[aria-expanded="true"] .navbar-toggler-icon span {
    opacity: 0;
    transform: scale(0);
}

/* ===============================
   SPRING ANIMATION (ELASTIC)
================================ */

/* Default state */
.custom-toggler .navbar-toggler-icon::before,
.custom-toggler .navbar-toggler-icon::after,
.custom-toggler .navbar-toggler-icon span {
    transition:
        transform 0.55s cubic-bezier(.34,1.56,.64,1),
        opacity 0.25s ease,
        top 0.45s cubic-bezier(.34,1.56,.64,1),
        bottom 0.45s cubic-bezier(.34,1.56,.64,1);
}

/* === AKTIF → JADI X === */
.custom-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
    transform: rotate(45deg);
    top: 7.5px;
}

.custom-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
    transform: rotate(-45deg);
    bottom: 7.5px;
}

.custom-toggler[aria-expanded="true"] .navbar-toggler-icon span {
    opacity: 0;
    transform: scale(0.2);
}

/* === KEMBALI KE HAMBURGER (spring balik) === */
.custom-toggler[aria-expanded="false"] .navbar-toggler-icon::before {
    transform: rotate(0);
    top: 0;
}

.custom-toggler[aria-expanded="false"] .navbar-toggler-icon::after {
    transform: rotate(0);
    bottom: 0;
}

.custom-toggler[aria-expanded="false"] .navbar-toggler-icon span {
    opacity: 1;
    transform: scale(1);
}


/* Animasi muncul dari atas */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ==============================
   MEGA MENU GRID PREMIUM
============================== */


/* --- Mega Menu Container --- */
.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;

    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, auto);

    width: fit-content;
    max-width: 95vw;

    padding: 1.25rem;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 1.25rem;
    box-shadow: 0 25px 50px rgba(0,0,0,.12);
    z-index: 1050;

    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all .35s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
    scrollbar-width: thin;
    margin-bottom:3px;
}

.mega-menu::-webkit-scrollbar {
    width: 6px;
}

.mega-menu::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.15);
    border-radius: 10px;
}


/* Smart align ke kiri */
.mega-menu.align-right {
    left: auto;
    right: 0;
}

/* --- Kolom --- */
.mega-col {
    min-width: 220px;
    padding: 0 1.25rem;
}

.mega-col:not(:last-child) {
    border-right: 1px solid #f1f5f9;
}

.mega-col h6 {
    font-size: .95rem;
    font-weight: 600;
    margin-bottom: .75rem;
    color: #1e293b;
}

/* --- Item --- */
.mega-menu-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .9rem;
    border-radius: .75rem;
    color: #475569 !important;
    font-weight: 500;
    text-decoration: none !important;
    transition: all .25s ease;
}

.mega-menu-item:hover {
    background: linear-gradient(90deg,#f0f7ff,#fff);
    color: #1FB6A6 !important;
    transform: translateX(6px);
}

.mega-menu-item i {
    width: 20px;
    text-align: center;
    font-size: 1.1rem;
    color: #94a3b8;
}

.mega-menu-item i:hover {
    color: #1FB6A6 !important;
}

/* --- Hover Desktop --- */
@media (min-width: 992px) {
    .dropdown-mega::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 16px;
        bottom: -16px;
        left: 0;
    }

    .dropdown-mega:hover > .mega-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(6px);
        pointer-events: auto;
    }
}

@media (max-width: 991.98px) {

    .dropdown-mega {
        position: relative;
    }

    .dropdown-mega.active > .mega-menu {
        max-height: 75vh;
        overflow-y: auto;
        padding: 1rem;
        pointer-events: auto;
    }

}


@media (max-width: 991.98px) {

    /* NAVBAR SCROLL */
    .navbar-collapse {
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* RESET TOTAL MEGA MENU */
    .mega-menu {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;

        display: block !important;

        /* KUNCI: jangan pakai opacity/visibility */
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;

        height: auto;
        max-height: 0;              /* tertutup */
        overflow: hidden;           /* bukan auto dulu */

        padding: 0 1rem;
        margin: 0;

        border: none;
        box-shadow: none;

        transition: max-height 0.4s ease, padding 0.3s ease;
    }

    /* SAAT AKTIF */
    .dropdown-mega.active > .mega-menu {
        max-height: 75vh;           /* tinggi realistis */
        overflow-y: auto;           /* BARU BISA SCROLL */
        padding: 1rem;
    }

    /* STRUKTUR */
    .mega-col {
        border-right: none !important;
        padding: .75rem 0;
    }
}



 /* Hero */
 .hero {
     background: linear-gradient(135deg, var(--pkk-primary), #2fb3ff);
     color: #fff;
     border-radius: 1.75rem;
     padding: 4rem 3rem;
     box-shadow: 0 25px 50px rgba(6, 142, 211, .35);
 }

 /* Card */
 .card {
     border: none;
     border-radius: 1.25rem;
     box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
     transition: all .35s ease;
 }

 .card:hover {
     transform: translateY(-8px);
     box-shadow: 0 25px 50px rgba(6, 142, 211, .25);
 }

 .icon-circle {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     background: var(--pkk-soft);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.6rem;
     color: var(--pkk-primary);
     margin-bottom: 1rem;
 }

 .badge-pkk {
     background: rgba(255, 255, 255, .2);
     color: #fff;
     padding: .5rem 1rem;
     border-radius: 50px;
 }

 /* Tombol PKK */
 .btn-pkk {
     background: linear-gradient(135deg, #ffffff, #e6f4fb);
     color: var(--pkk-primary);
     font-weight: 600;
     border: none;
     box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
     transition: all .35s ease;
     position: relative;
     overflow: hidden;
 }

 .btn-pkk i {
     transition: transform .35s ease;
     font-size: 1.2rem;
 }

 .btn-pkk::after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .6), transparent);
     transform: translateX(-100%);
 }

 .btn-pkk:hover::after {
     animation: shine 1s ease;
 }

 .btn-pkk:hover {
     transform: translateY(-3px);
     box-shadow: 0 20px 40px rgba(6, 142, 211, .35);
     color: var(--pkk-secondary);
 }

 .btn-pkk:hover i {
     transform: translateX(6px);
 }

 @keyframes shine {
     100% {
         transform: translateX(100%);
     }
 }

 footer {
     background: var(--pkk-secondary);
     color: #fff;
 }

 /* ===== Berita PKK ===== */
 .berita-section {
     background: linear-gradient(180deg, #ffffff, var(--pkk-soft));
     padding: 4rem 0;
 }

 .berita-card {
     overflow: hidden;
     height: 100%;
 }

 .berita-img-wrapper {
     position: relative;
     width: 100%;
     height: 220px;
     /* SEMUA GAMBAR SAMA */
     overflow: hidden;
 }

 .berita-img-wrapper img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform .5s ease;
 }

 .berita-card:hover img {
     transform: scale(1.08);
 }

 .berita-date {
     position: absolute;
     top: 15px;
     left: 15px;
     background: var(--pkk-primary);
     color: #fff;
     padding: .35rem .75rem;
     font-size: .75rem;
     border-radius: 50px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, .2);
 }

 .berita-card .card-body {
     padding: 1.5rem;
 }

 .berita-card h5 {
     font-weight: 700;
     line-height: 1.4;
 }

 .berita-card p {
     font-size: .9rem;
 }

 .berita-card a {
     font-weight: 600;
     text-decoration: none;
 }



 /* CARD */
.berita-card {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    transition: all .35s ease;
    background: #fff;
}

/* HOVER BACKGROUND LEMBUT */
.berita-card:hover {
    background: #f8fbff;
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0,0,0,.08);
}

/* IMAGE */
.berita-img-wrapper {
    position: relative;
    overflow: hidden;
}

.berita-img-wrapper img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform .5s ease;
}

.berita-card:hover img {
    transform: scale(1.08);
}


/* BADGE */
.badge-tag {
    background: #e7f1ff;
    color: #0d6efd;
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 20px;
}

/* TITLE */
.berita-title {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.4;
}

/* DESC */
.berita-desc {
    font-size: 14px;
}

/* BUTTON HOVER EFFECT */
.btn-read {
    opacity: 0;
    transform: translateY(10px);
    transition: all .3s ease;
}

.berita-card:hover .btn-read:hover {
    opacity: 1;
    transform: translateY(0);
    color:white !important;
}



 /* ===== Footer PKK ===== */
 .footer-pkk {
     background: linear-gradient(90deg, var(--pkk-secondary), var(--pkk-primary));
     color: #fff;
     position: relative;
 }

 .footer-pkk .footer-card {
     background: rgba(255, 255, 255, .08);
     border-radius: 1.25rem;
     padding: 1.5rem;
     height: 100%;
     box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
     transition: all .35s ease;
 }

 .footer-pkk .footer-card:hover {
     transform: translateY(-6px);
     background: rgba(255, 255, 255, .12);
 }

 .footer-pkk h6 {
     font-weight: 700;
     margin-bottom: 1rem;
 }

 .footer-pkk ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .footer-pkk ul li {
     margin-bottom: .5rem;
 }

 .footer-pkk ul li a {
     color: #e6f4fb;
     text-decoration: none;
     font-size: .9rem;
 }

 .footer-pkk ul li a:hover {
     color: var(--pkk-accent);
 }

 .footer-icon {
     width: 38px;
     height: 38px;
     background: rgba(255, 255, 255, .15);
     border-radius: 50%;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     margin-right: .6rem;
     font-size: 1.1rem;
 }

 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, .15);
     margin-top: 3rem;
     padding-top: 1.5rem;
 }

 .footer-list li {
     display: flex;
     align-items: flex-start;
     gap: .6rem;
     margin-bottom: .6rem;
 }

 .footer-list i {
     color: var(--pkk-accent);
     font-size: 1rem;
     margin-top: .15rem;
     flex-shrink: 0;
 }

 /* ================= ANIMATION ================= */
 .fade-up,
 .fade-left,
 .fade-right,
 .fade-zoom {
     opacity: 0;
     transition: opacity .8s ease, transform .8s ease;
 }

 .fade-up {
     transform: translateY(40px);
 }

 .fade-left {
     transform: translateX(-60px);
 }

 .fade-right {
     transform: translateX(60px);
 }

 .fade-zoom {
     transform: scale(.92);
 }

 .fade-up.show,
 .fade-left.show,
 .fade-right.show,
 .fade-zoom.show {
     opacity: 1;
     transform: none;
 }
 
 @media (max-width: 767px) {
    .fade-up,
    .fade-left,
    .fade-right,
    .fade-zoom {
        opacity: 1 !important;
        transform: none !important;
    }
}

 /* ================= BACK TO TOP ================= */
 #toTop {
     position: fixed;
     bottom: 30px;
     right: 30px;
     width: 52px;
     height: 52px;
     border-radius: 50%;
     border: none;
     background: linear-gradient(135deg, var(--pkk-primary), #2fb3ff);
     color: #fff;
     font-size: 1.8rem;
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     visibility: hidden;
     transition: .35s;
 }

 #toTop.show {
     opacity: 1;
     visibility: visible;
 }
 
 


/* BUPATI WAKIL BUPATI BANNER */
.visi-merah-putih {
     background: linear-gradient(
        to bottom,
        #d32f2f 0%,
        #d32f2f 50%,
        #ffffff 50%,
        #ffffff 100%
    );
    border-radius: 24px;
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

/* Badge */
.visi-badge{
    display: inline-block;
    background: #b71c1c;
    color: #fff;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 12px;
}

/* Judul */
.visi-title{
    display: block;
    font-weight: 700;
    line-height: 1.4;
    margin-top: 15px;
}
.visi-mobile{
    display: none;
}
.judul-dua-warna {
    font-weight: 700;
    line-height: 1.4;
}

.baris-putih {
    color: #ffffff !important;
}

.baris-merah {
    padding-top:10px !important;
    margin-top:10px !important;
    color: #d32f2f !important;
}


/* Nama & jabatan */
.visi-leader{
    margin-top: 15px;
    color: #333;
}

.visi-jabatan{
    display: inline-block;
    background: #d32f2f;
    color: #fff;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    margin-top: 5px;
}

/* Foto */
.visi-img{
    filter: drop-shadow(0 10px 20px rgba(0,0,0,.25));
}

/* 📱 RESPONSIVE MOBILE */
@media (max-width: 767px){
    .visi-title, .baris-merah, .baris-putih{
        display: none;
    }
     .visi-title{
         margin:0px !important;
     }
    .visi-mobile{
    display: block;
    font-size: 20px;
    color: #d32f2f !important;
    margin-left:10px !important;
    font-weight: 900 !important;
    line-height: 1.4 !important;
    }
    
    .visi-badge{
        font-size: 11px;
        margin-bottom: 0px !important;
    }

    .visi-jabatan{
        font-size: 10px;
         padding: 4px 4px;
    }
    .visi-img{
        width:100%;
    }
}


 /* ================= INFOGRAFIS ================= */
.info-card {
    background: #fff;
    padding: 35px 20px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,.08);
    transition: .4s;
}

.info-card:hover {
    transform: translateY(-10px);
}
 /* ================= PAGE ================= */
 .page-hero{
    background: linear-gradient(90deg, var(--pkk-secondary), var(--pkk-primary));
    color:#fff;
    padding:70px 0 40px;
}
.page-hero h1{
    font-weight:800;
}
.page-hero .badge{
    background:rgba(255,255,255,.2);
}
.breadcrumb-custom{
    background:#fff;
    padding:12px 20px;
    border-radius:12px;
    box-shadow:0 10px 25px rgba(0,0,0,.05);
}
.content-card{
    border:0;
    border-radius:20px;
    box-shadow:0 20px 40px rgba(0,0,0,.08);
}
.section-title{
    position:relative;
    padding-left:15px;
}
.section-title::before{
    content:'';
    position:absolute;
    left:0;
    top:6px;
    width:5px;
    height:70%;
    background:#0d6efd;
    border-radius:10px;
}
.quote-box{
    background:linear-gradient(135deg,#e6f4fb,#ffffff);
    border-left:5px solid #0d6efd;
    padding:25px;
    border-radius:15px;
}

/* Wrapper */
.berita-read-wrapper {
    background: #f2f6fb;
    padding: 80px 0;
}

/* Card utama */
.berita-read-card {
    padding: 24px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    border: none;
}

/* Judul */
.berita-title {
    font-weight: 700;
    color: #1f2d3d;
}

/* Meta */
.berita-meta {
    font-size: 14px;
    color: #6c757d;
}

/* Konten */
.berita-content p {
    line-height: 1.8;
    color: #333;
    margin-bottom: 1rem;
}

/* Sidebar */
.sidebar-card {
    padding: 20px;
    border-radius: 10px;
    border: none;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* Judul sidebar */
.sidebar-title {
    font-weight: 600;
    margin-bottom: 15px;
    border-left: 4px solid #1f4e79;
    padding-left: 10px;
    color: #1f4e79;
}

/* List berita */
.sidebar-berita-list li {
    margin-bottom: 15px;
}

.sidebar-berita-list a {
    display: flex;
    gap: 12px;
    text-decoration: none;
    color: #333;
}

.sidebar-berita-list img {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
}

.sidebar-berita-list h6 {
    font-size: 14px;
    margin: 0;
    font-weight: 600;
}

.sidebar-berita-list span {
    font-size: 12px;
    color: #6c757d;
}

/* Hover */
.sidebar-berita-list a:hover h6 {
    color: #1f4e79;
}



/* ===== BERITA MODERN STYLE ===== */
.baca-berita-modern {
    background: linear-gradient(180deg, #f5f7fb 0%, #ffffff 100%);
    padding: 50px 0;
    margin-top: 20px;
}

/* CARD */
.baca-berita-card {
    border: none;
    border-radius: 20px;
    padding: 20px;
    background: #ffffff;
    box-shadow: 0 25px 50px rgba(0,0,0,0.06);
}

/* TITLE */
.baca-berita-modern .baca-berita-title {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 15px;
    color: #1f2937;
}

/* META */
.baca-berita-modern .baca-berita-meta {
    display: flex;
    gap: 20px;
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 25px;
}

.baca-berita-modern .baca-berita-meta i {
    color: #2563eb;
    margin-right: 5px;
}

/*SHARE*/

/* THUMBNAIL */
.baca-berita-modern .baca-berita-thumbnail {
    width: 100%;
    border-radius: 18px;
    margin-bottom: 30px;
    object-fit: cover;
}

/* CONTENT */
.baca-berita-modern .baca-berita-content {
    font-size: 1.05rem;
    line-height: 1.9;
    color: #374151;
    text-align: justify;
}

/* TAGS */
.baca-berita-modern .baca-berita-tags {
    margin-top: 30px;
}

.baca-berita-modern .baca-berita-tags a {
    display: inline-block;
    margin: 5px 5px 0 0;
    padding: 6px 14px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 0.85rem;
    border-radius: 999px;
    text-decoration: none;
    transition: .3s;
}

.baca-berita-modern .baca-berita-tags a:hover {
    background: #4338ca;
    color: #fff;
}

/* SHARE */
.baca-berita-modern .baca-berita-share {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 35px;
}

.berita-share span {
    font-weight: 600;
    margin-right: 10px;
}

.berita-share a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: transform .3s;
}

.berita-share a:hover {
    transform: translateY(-4px);
}

.berita-share .wa { background: #25d366; }
.berita-share .fb { background: #1877f2; }
.berita-share .tw { background: #111827; }

/* SIDEBAR */
.sidebar-modern {
    background: #ffffff;
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 25px 45px rgba(0,0,0,0.06);
}

.sidebar-title {
    font-weight: 700;
    margin-bottom: 20px;
}

.sidebar-item {
    display: flex;
    gap: 12px;
    margin-bottom: 5px;
    text-decoration: none;
    color: #111827;
}

.sidebar-item img {
    width: 80px;
    height: 65px;
    object-fit: cover;
    border-radius: 12px;
}

.sidebar-item h6 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.sidebar-item span {
    font-size: 0.8rem;
    color: #6b7280;
}

.sidebar-item:hover h6 {
    color: #2563eb;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .baca-berita-card {
        padding: 25px;
    }
    .baca-berita-title {
        font-size: 1.6rem;
    }
}

.breadcrumb-item{
    text-decoration: none !important;
}

/* ==========================
   PAGINATION PKK FINAL
========================== */
.pagination {
    gap: 10px;
}

/* Default */
.pagination .page-item .page-link {
    border-radius: 999px;
    padding: 8px 18px;
    border: 1px solid var(--pkk-primary);
    background: var(--pkk-primary-soft);
    color: var(--pkk-primary);
    font-weight: 600;
    transition: all 0.25s ease;
}

/* Hover */
.pagination .page-item .page-link:hover {
    background: var(--pkk-primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(25, 135, 84, 0.35);
}

/* Active */
.pagination .page-item.active .page-link {
    background: linear-gradient(
        135deg,
        var(--pkk-primary),
        var(--pkk-primary-dark)
    );
    color: #fff;
    border-color: var(--pkk-primary-dark);
    box-shadow: 0 8px 20px rgba(25, 135, 84, 0.45);
}

/* Disabled (Prev / Next saat ujung) */
.pagination .page-item.disabled .page-link {
    background: var(--pkk-primary-soft);
    color: rgba(25, 135, 84, 0.4);
    border-color: rgba(25, 135, 84, 0.25);
    cursor: not-allowed;
}

.visitor-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    max-width: 360px;
}

.visitor-title {
    font-weight: 600;
    margin-bottom: 18px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.visitor-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border-radius: 12px;
    transition: 0.3s;
}

.visitor-item:hover {
    background: #f8f9fa;
}

.visitor-item .icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.visitor-item .info span {
    display: block;
    font-size: 13px;
    color: #6c757d;
}

.visitor-item .info strong {
    font-size: 16px;
    color: #212529;
}