/* =========================================
   PTA PALU - ULTIMATE JOOMLA 5.4.5 STYLE
   ========================================= */

body.site-ptapalu {
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: #f8f9fa;
    color: #333;
    
    /* SAKTI: Ubah body menjadi Flexbox untuk Sticky Footer */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Setinggi minimal 1 layar penuh */
}

/* SAKTI: Paksa area konten mengisi seluruh sisa ruang kosong di layar */
.main-body {
    flex: 1 0 auto;
}

/* ==========================================================
   SAKTI: MAMPETIN GAP ANTARA TAB/SIDEBAR DAN CONTENT-BOTTOM (MAPS)
   ========================================================== */
/* 1. Target baris utama (komponen/sidebar) yang ada di atas maps (menimpa default mb-4 di index.php) */
.main-body > .container > div.row.mb-4 {
    margin-bottom: 0.25rem !important; /* Di-mampetin total (menjadi setara mb-1) */
}

/* 2. Target baris content-bottom (maps) yang ada di bawahnya (menimpa default mt-4/mt-2 di index.php) */
.main-body > .container > div.row.mt-4,
.main-body > .container > div.row.mt-2 {
    margin-top: 0.25rem !important; /* Di-mampetin total (menjadi setara mt-1) */
}
/* ========================================================== */

/* Utilities Dinamis dari Parameter PHP */
.pta-bg-primary { background-color: var(--pta-primary) !important; }
.pta-text-primary { color: var(--pta-primary) !important; }

/* HEADER & LOGO */
.header-main { border-bottom: 2px solid #eaeaea; }
.img-logo { max-height: 75px; width: auto; object-fit: contain; }
.brand-text { border-left: 2px solid var(--pta-secondary); padding-left: 15px; }

/* =========================================
   KUSTOMISASI TOPBAR ALA PA BUOL (HIJAU ADEM)
   ========================================= */
body .topbar, 
body .topbar-area {
    background-color: #065b4c !important; /* Hijau Teal */
    border-bottom: none !important;
    padding: 10px 0 !important;
}

body .social-circle {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    text-decoration: none;
    transition: all 0.3s ease;
}

body .social-circle:hover {
    background-color: var(--pta-secondary) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
}

/* =========================================
   KUSTOMISASI HEADER ALA PA BUOL (3 BARIS)
   ========================================= */
body .brand-text {
    border-left: none !important; 
    padding-left: 0 !important;
    margin-left: 10px; 
}
body .img-logo {
    max-height: 85px !important; 
}

/* =========================================
   KUSTOMISASI HALAMAN ARTIKEL (PERFECT BADILAG)
   ========================================= */
body .item-page {
    background-color: transparent !important; 
    padding: 10px 20px !important; 
    border-radius: 0; 
    box-shadow: none; 
    border: none; 
}

body .item-page h1, body .page-header h1 {
    text-align: center !important;
    color: var(--pta-primary) !important;
    font-weight: 700;
    font-size: 2.2rem;
    margin-top: 10px;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

body .article-info-term, body .category-name { display: none !important; }

body .article-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 25px; 
    margin-top: 5px;
    margin-bottom: 35px; 
    padding-bottom: 20px; 
    border-bottom: 1px solid #cfa861; 
}

body .article-info dd {
    margin: 0; padding: 0;
    font-size: 0.95rem;
    color: #555555; 
}

body div[itemprop="articleBody"] {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #333333;
}

/* =========================================
   BANNER, MODULES & FOOTER
   ========================================= */
.banner-section img { 
    width: 100% !important; 
    height: auto !important; 
    display: block; 
    border-radius: 8px; /* Memotong sudut gambar agar melengkung rapi */
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* Memberi efek bayangan halus */
}

.moduletable {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
}
.moduletable h3 {
    font-size: 1.1rem;
    color: var(--pta-primary);
    border-bottom: 2px solid var(--pta-secondary);
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-weight: 700;
    text-transform: uppercase;
}

.top-a-section .moduletable {
    text-align: center;
    border-top: 4px solid var(--pta-secondary);
    transition: transform 0.3s ease;
}
.top-a-section .moduletable:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* =========================================
   KUSTOMISASI INDEKS SURVEI DARK STYLE (TERBARU)
   ========================================= */

/* 1. Paksa background bottom-section baru menjadi hijau gelap agar menyatu dengan footer */
.bottom-section {
    background-color: var(--pta-footer) !important;
    padding-top: 60px !important;
    padding-bottom: 40px !important;
}

/* 2. Hapus kotak putih bawaan modul pada area bottom */
.bottom-section .moduletable {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.pta-survey-dark {
    text-align: center;
    color: #ffffff;
}

/* 3. Desain Header Judul */
.survey-header-dark h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
}
.survey-header-dark p {
    color: #a9cbb8; /* Hijau pudar khas Badilag */
    font-size: 0.95rem;
    margin-bottom: 40px;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

/* 4. Grid 3 Kolom */
.survey-cards-dark {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

/* 5. Desain Kotak Kaca Transparan (Glassmorphism ringan) */
.scard-dark {
    background-color: rgba(255, 255, 255, 0.06); /* Latar transparan putih tipis */
    border-top: 2px solid rgba(255, 255, 255, 0.7); /* Garis tepi atas putih cerah */
    border-radius: 8px;
    padding: 35px 20px;
    text-align: center;
    transition: all 0.3s ease;
}
.scard-dark:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
}

/* 6. Ikon Emas Outline */
.scard-icon {
    font-size: 2.5rem;
    color: var(--pta-secondary); /* Emas */
    margin-bottom: 20px;
}

/* 7. Tipografi Angka & Judul */
.scard-dark h4 {
    font-size: 1.05rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.4;
    margin-bottom: 20px;
    min-height: 45px;
}
.scard-score {
    font-size: 3.2rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 15px;
}

/* 8. Lencana Predikat Hijau */
.scard-badge {
    display: inline-block;
    background-color: #128c4b; /* Hijau terang */
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 18px;
    border-radius: 20px; /* Bentuk pil melengkung */
    letter-spacing: 0.5px;
}

/* =========================================
   FOOTER 3 KOLOM PERFECT BADILAG STYLE
   ========================================= */
.pta-footer {
    background-color: var(--pta-footer);
    color: #e0e0e0;
    border-top: none; 
}

/* SAKTI: Kunci ukuran semua jenis judul di footer agar seragam 100% */
.pta-footer h3,
.pta-footer .moduletable h3 {
    color: var(--pta-secondary) !important; 
    font-size: 1.15rem !important; /* Ukuran dipaskan agar rapi dan tidak kebesaran */
    font-weight: 700 !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 20px !important;
    margin-top: 0 !important;
    line-height: 1.4 !important;
    text-transform: none !important; /* Mencegah Joomla memaksa uppercase */
}

/* SAKTI: Hilangkan kotak putih bawaan modul khusus di area Footer */
.pta-footer .moduletable {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Memastikan tulisan di dalam modul footer tetap ikut warna yang benar */
.pta-footer .moduletable,
.pta-footer .moduletable p,
.pta-footer .moduletable span {
    color: #a9cbb8 !important;
}

.pta-footer a { 
    color: #a9cbb8; 
    text-decoration: none; 
    transition: color 0.3s ease; 
    display: inline-block; 
    margin-bottom: 8px;
    font-size: 0.95rem;
}
.pta-footer a:hover { color: #ffffff; }

.pta-footer .visitor-stats .stat-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.95rem;
    color: #a9cbb8;
}
.pta-footer .visitor-stats .stat-row strong {
    color: #ffffff;
    font-weight: 600;
}

.pta-footer .footer-bottom {
    justify-content: center !important;
    text-align: center;
}
.pta-footer .footer-bottom .copyright {
    width: 100%;
    color: #a9cbb8;
    font-size: 0.9rem;
}


/* =========================================
   DARK MODE STYLES
   ========================================= */
[data-bs-theme="dark"] body.site-ptapalu { background-color: #121212 !important; color: #e0e0e0 !important; }
[data-bs-theme="dark"] .bg-white, [data-bs-theme="dark"] .header-main,
[data-bs-theme="dark"] .main-content, [data-bs-theme="dark"] .moduletable {
    background-color: #1e1e1e !important;
    border-color: #333333 !important;
    color: #e0e0e0 !important;
}
[data-bs-theme="dark"] .brand-text h1, [data-bs-theme="dark"] .main-content h2,
[data-bs-theme="dark"] .page-header h1 { color: var(--pta-secondary) !important; }

/* =========================================
   MENU UTAMA (DASAR UNTUK SEMUA LAYAR)
   ========================================= */
body .navbar {
    border-top: 1px solid #eaeaea !important;
    border-bottom: 1px solid #eaeaea !important;
}

body .navbar-nav li {
    position: relative;
}

body .navbar-nav > li > a, body .navbar-nav > li > span, body .navbar-nav > li > button {
    display: block;
    background-color: transparent; 
    border: none; 
    color: #333333 !important; 
    font-weight: 600; 
    padding: 15px 20px !important; 
    text-transform: capitalize !important; 
    font-size: 1rem;
    border-bottom: 3px solid transparent; 
    transition: all 0.3s ease;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit; 
    line-height: inherit; 
}
body .navbar-nav > li > button::after, body .navbar-nav > li > a.dropdown-toggle::after { display: none !important; }

body .navbar-nav > li:hover > a, body .navbar-nav > li:hover > span, body .navbar-nav > li:hover > button,
body .navbar-nav > li.active > a, body .navbar-nav > li.active > span, body .navbar-nav > li.active > button {
    color: var(--pta-primary) !important;
    border-bottom: 3px solid var(--pta-primary) !important; 
    background-color: #f8fcf9; 
}

/* =========================================
   KUSTOMISASI TOMBOL PREV / NEXT ARTIKEL
   ========================================= */
body .pagenavigation, 
body ul.pagenav {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center;
    list-style: none !important;
    margin: 40px -1.5rem -1.5rem -1.5rem !important; 
    padding: 20px 1.5rem !important;
    background-color: #f8f9fa !important; 
    border-top: 1px solid #eaeaea !important;
    border-radius: 0 0 0.375rem 0.375rem; 
}

body .pagenavigation .pagination {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    gap: 15px; 
}

body .pagenavigation .pagination .next { margin-left: auto; }

body .pagenav li a,
body .pagenav li span,
body .pagenavigation .page-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 10px 20px !important;
    background-color: #ffffff !important;
    color: var(--pta-primary) !important;
    border: 2px solid var(--pta-primary) !important; 
    border-radius: 6px !important;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    text-decoration: none !important;
}

body .pagenav li a:hover,
body .pagenavigation .page-link:hover {
    background-color: var(--pta-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
    transform: translateY(-2px); 
}

/* =========================================
   KUSTOMISASI CARD LAYANAN (POSISI CONTENT-TOP) - 5 KOLOM
   ========================================= */

/* 1. Tambahan Grid Pembungkus 5 Kolom */
.pta-layanan-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
}

/* 2. Modifikasi Card Utama (Ubah jadi menyusun ke bawah / column) */
.pta-card-layanan {
    display: flex;
    flex-direction: column; /* SAKTI: Ikon kini berada di atas teks */
    align-items: center; /* Rata tengah vertikal */
    text-align: center; /* Teks rata tengah */
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 20px 15px; /* Padding dikecilkan sedikit agar muat di 5 kolom */
    text-decoration: none !important;
    color: #333333;
    transition: all 0.3s ease;
    height: 100%;
}
.pta-card-layanan:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transform: translateY(-5px);
    border-color: var(--pta-primary);
}

/* 3. Modifikasi Ikon (Diperkecil & Margin digeser ke bawah) */
.pta-card-layanan .icon-wrap {
    flex-shrink: 0;
    width: 55px; /* Diperkecil dari 65px */
    height: 55px; /* Diperkecil dari 65px */
    border: 2px solid var(--pta-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem; /* Font diperkecil */
    color: var(--pta-primary);
    margin-right: 0; /* Margin kanan dibuang */
    margin-bottom: 15px; /* Diganti jadi margin bawah */
    background-color: #f8fcf9;
}

/* 4. Modifikasi Teks & Garis Bawah (Garis ditarik ke tengah) */
.pta-card-layanan .text-wrap h4 {
    font-size: 0.95rem; /* Diperkecil dari 1.05rem */
    font-weight: 700;
    margin: 0 0 10px 0;
    color: #222222;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 10px;
}
.pta-card-layanan .text-wrap h4::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 50px; /* Garis dipendekkan */
    height: 2px;
    background-color: var(--pta-secondary);
    transform: translateX(-50%); /* Menarik garis tepat ke tengah (center) */
}
.pta-card-layanan .text-wrap p {
    font-size: 0.85rem; /* Diperkecil dari 0.9rem */
    color: #666666;
    margin: 0;
    line-height: 1.5;
}

/* =========================================
   RESPONSIF UNTUK LAYANAN 5 KOLOM
   ========================================= */
@media (max-width: 1200px) {
    .pta-layanan-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .pta-layanan-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .pta-layanan-grid { grid-template-columns: 1fr; }
    /* Mengembalikan tampilan ke mode memanjang ke samping khusus di HP */
    .pta-card-layanan { flex-direction: row; text-align: left; align-items: flex-start; }
    .pta-card-layanan .icon-wrap { margin-right: 15px; margin-bottom: 0; }
    .pta-card-layanan .text-wrap h4::after { left: 0; transform: none; }
}

/* ========================================================================
   1. DESKTOP MASTER (MIN-WIDTH: 992px) - EFEK HOVER & ACCORDION LEVEL 3
   ======================================================================== */
@media (min-width: 992px) {
    body .navbar-nav { gap: 5px; }
    
    /* Level 2: Kotak Dropdown Utama dengan Scroll Anti-Potong */
    body .navbar-nav > li > ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        min-width: 260px;
        background-color: #ffffff;
        border: 1px solid #eaeaea;
        border-top: 3px solid var(--pta-primary) !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        list-style: none !important;
        padding: 10px 0 !important;
        margin: 0 !important;
        border-radius: 0 0 8px 8px;
        max-height: calc(100vh - 130px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* Tampilkan Level 2 HANYA saat Level 1 di-hover */
    body .navbar-nav > li:hover > ul {
        display: block !important;
        animation: fadeIn 0.2s ease;
    }

    /* Level 3: Turun ke Bawah (Accordion Style di Desktop) */
    body .navbar-nav > li > ul > li > ul {
        position: static !important; /* Hancurkan sifat melayang ke kanan */
        box-shadow: none !important; 
        border: none !important;
        border-top: 1px solid #eaeaea !important;
        padding-left: 0 !important; 
        margin: 0 !important;
        background-color: #fcfcfc !important; /* Warna abu sangat muda membedakan tingkatan */
        display: none; /* Sembunyikan default, menunggu interaksi klik */
    }

    /* BUKA LEVEL 3 SAAT DI-KLIK (Membutuhkan class is-open dari JS) */
    body .navbar-nav > li > ul > li.is-open > ul {
        display: block !important;
        animation: slideDown 0.2s ease;
    }

    /* Styling Teks Submenu Utama */
    body .navbar-nav li > ul > li { margin: 0; padding: 0; position: relative; }
    body .navbar-nav li > ul > li > a, body .navbar-nav li > ul > li > span {
        display: block; padding: 10px 20px !important; font-size: 0.95rem;
        color: #444444 !important; font-weight: 500; transition: all 0.2s ease;
        border-bottom: 1px solid #f5f5f5; text-decoration: none; cursor: pointer;
    }
    body .navbar-nav li > ul > li:last-child > a, body .navbar-nav li > ul > li:last-child > span { border-bottom: none; }

    /* Hover Teks Submenu Level 2 */
    body .navbar-nav li > ul > li > a:hover, body .navbar-nav li > ul > li > span:hover {
        background-color: #f4f8f6; color: var(--pta-primary) !important; padding-left: 25px !important;
    }

    /* Indentasi khusus untuk teks Level 3 agar menjorok ke dalam seperti HP */
    body .navbar-nav li > ul > li > ul > li > a, 
    body .navbar-nav li > ul > li > ul > li > span {
        padding-left: 40px !important;
        font-size: 0.9rem;
        border-bottom: 1px solid #eaeaea;
    }
    body .navbar-nav li > ul > li > ul > li > a:hover, 
    body .navbar-nav li > ul > li > ul > li > span:hover {
        padding-left: 45px !important; /* Efek hover level 3 */
    }

    /* Ikon Panah ke Bawah untuk menu yang punya anak */
    body .navbar-nav li > ul > li.parent > a::after, body .navbar-nav li > ul > li.parent > span::after {
        content: "\f107"; /* Mengubah panah kanan menjadi panah bawah */
        font-family: "Font Awesome 6 Free"; font-weight: 900; float: right;
        transition: transform 0.3s ease;
    }
    
    /* Putar panah 180 derajat saat diklik/terbuka */
    body .navbar-nav li > ul > li.parent.is-open > a::after, 
    body .navbar-nav li > ul > li.parent.is-open > span::after {
        transform: rotate(180deg);
        color: var(--pta-secondary);
    }

    /* Desain Scrollbar Custom */
    body .navbar-nav > li > ul::-webkit-scrollbar { width: 5px; }
    body .navbar-nav > li > ul::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 10px; }
    
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes slideDown { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
}

/* ========================================================================
   2. MOBILE MASTER (MAX-WIDTH: 991px) - PERFECT ACCORDION & X-TOGGLE
   ======================================================================== */
@media (max-width: 991.98px) {
    /* 1. Kustomisasi Topbar (Bar Hijau) agar lega dan napas di HP */
    body .topbar { padding: 15px 10px !important; } 
    body .topbar .container { flex-direction: column !important; gap: 16px !important; text-align: center; }
    body .topbar .gap-4 { justify-content: center !important; gap: 15px !important; flex-wrap: wrap; }
    
    /* 2. Kustomisasi Header & Teks Judul Instansi di HP */
    body .brand-area { flex-direction: row !important; align-items: center; text-align: left !important; width: 100%; padding-right: 60px; box-sizing: border-box; }
    body .img-logo { max-height: 46px !important; } /* Logo sedikit dikecilkan agar proporsional dengan teks */
    body .brand-text { margin-top: 0 !important; border-left: none !important; padding-left: 0 !important; margin-left: 10px; }
    
    /* Mengecilkan tulisan MAHKAMAH AGUNG & BADILAG */
    body .brand-text .text-secondary { 
        font-size: 0.55rem !important; /* Diperkecil jadi sekitar 9px */
        line-height: 1.3 !important; 
        margin-bottom: 2px !important; 
        letter-spacing: 0 !important; 
    }
    
    /* Mengecilkan tulisan PENGADILAN TINGGI AGAMA PALU */
    body .brand-text h1 { 
        font-size: 0.85rem !important; /* Diperkecil jadi sekitar 14px */
        margin-bottom: 0 !important; 
        letter-spacing: 0 !important; 
        line-height: 1.2 !important; 
    }
    body .header-search { display: none; }
    body .navbar { border: none !important; background: transparent !important; position: relative !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; }
    body .navbar .container { position: relative; }
    /* 1. Hilangkan kotak, jadikan transparan, dan paskan posisi */
    body .navbar-toggler { 
        position: absolute; 
        top: -42px; /* Disesuaikan agar sejajar dengan teks setelah kotaknya hilang */
        right: 15px; 
        background-color: transparent !important; 
        border: none !important; 
        padding: 5px !important; 
        z-index: 1050; 
        box-shadow: none !important; 
    }
    
    /* Hilangkan efek kotak biru/hitam saat tombol disentuh di layar HP */
    body .navbar-toggler:focus, body .navbar-toggler:active {
        outline: none !important;
        box-shadow: none !important;
    }

    /* 2. Ukuran ikon dinamis dan SVG Garis 3 warna Hijau PTA (#115c45) */
    body .navbar-toggler-icon { 
        width: 26px !important; 
        height: 26px !important; 
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-image 0.2s ease;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23115c45' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    /* 3. Animasi berubah menjadi silang (X) warna Hijau PTA saat diklik */
    body .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon { 
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23115c45'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") !important; 
        transform: rotate(90deg) scale(1.1); 
    }
    body .navbar-collapse { background: #ffffff; padding: 0 !important; border-top: 3px solid var(--pta-primary); box-shadow: 0 15px 30px rgba(0,0,0,0.15); max-height: 85vh; overflow-y: auto; overflow-x: hidden; position: absolute !important; top: 15px; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 9999; }
    body .navbar-nav { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
    body .navbar-nav li { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
    body .navbar-nav > li { border-bottom: 1px solid #eaeaea; background: #ffffff; }
    body .navbar-nav > li > a, body .navbar-nav > li > span, body .navbar-nav > li > button { display: block !important; width: 100% !important; box-sizing: border-box !important; padding: 15px 20px !important; font-size: 1.05rem; color: #222222 !important; border: none !important; background: transparent !important; text-align: left !important; white-space: normal !important; position: relative; }
    body .navbar-nav li > ul { display: none !important; position: static !important; width: 100% !important; list-style: none !important; padding: 0 !important; margin: 0 !important; border: none !important; box-shadow: none !important; background: #fafafa !important; }
    body .navbar-nav li.is-open > ul { display: block !important; animation: slideDown 0.3s ease; }
    body .navbar-nav li.parent > a::after, body .navbar-nav li.parent > span::after, body .navbar-nav li.parent > button::after { content: "\f107"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); transition: transform 0.3s ease, color 0.3s ease; color: var(--pta-primary); display: block !important; }
    body .navbar-nav li.is-open > a::after, body .navbar-nav li.is-open > span::after, body .navbar-nav li.is-open > button::after { transform: translateY(-50%) rotate(180deg); color: var(--pta-secondary); }
    body .navbar-nav li > ul > li { border-bottom: 1px solid #f0f0f0 !important; background: transparent !important; }
    body .navbar-nav li > ul > li > a, body .navbar-nav li > ul > li > span { display: block !important; width: 100% !important; box-sizing: border-box !important; padding: 12px 20px 12px 40px !important; font-size: 0.95rem; color: #555555 !important; text-decoration: none; background: transparent !important; text-align: left !important; white-space: normal !important; }
    body .navbar-nav li > ul > li > ul > li { background: #f5f5f5 !important; }
    body .navbar-nav li > ul > li > ul > li > a, body .navbar-nav li > ul > li > ul > li > span { padding-left: 60px !important; font-size: 0.9rem; border-bottom: 1px solid #ebebeb !important; }
}

/* =========================================
   KUSTOMISASI 4 KOLOM BERITA (CONTENT-BERITA)
   ========================================= */
.content-berita-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 25px; 
    align-items: start;
    margin-top: 25px !important;
    margin-bottom: 10px !important;
}

@media (max-width: 1199px) and (min-width: 768px) {
    .content-berita-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 30px; 
    }
}

@media (max-width: 767px) {
    .content-berita-grid { 
        grid-template-columns: 1fr; 
        gap: 20px; 
    }
}

.content-berita-grid .moduletable { 
    background: transparent !important; 
    border: none !important; 
    box-shadow: none !important; 
    padding: 0 !important; 
    margin: 0 !important; 
}

/* Desain Header (Ikon, Teks, & Garis Bawah Biru) */
.content-berita-grid .moduletable h3 { 
    font-size: 1.15rem; 
    color: #4a5568 !important; 
    border-bottom: 1px solid #e2e8f0; 
    padding-bottom: 12px; 
    margin-bottom: 20px; 
    font-weight: 700; 
    text-transform: uppercase; 
    position: relative;
    display: flex;
    align-items: center;
}
.content-berita-grid .moduletable h3::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 60px;
    height: 2px;
    background-color: #3182ce; 
}
.content-berita-grid .moduletable h3::before {
    content: "\f0ca"; 
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #4a5568;
    font-size: 1.3rem;
    margin-right: 10px; 
}

/* Desain List Berita & Garis Putus-putus */
.content-berita-grid .moduletable ul { 
    list-style: none !important; 
    padding: 0 !important; 
    margin: 0 !important; 
}
.content-berita-grid .moduletable ul li { 
    border-bottom: 1px dashed #cbd5e0 !important; 
    padding: 16px 0 !important; 
    margin: 0 !important; 
    position: relative; 
    background: transparent !important; 
}
.content-berita-grid .moduletable ul li:first-child {
    padding-top: 0 !important; 
}
.content-berita-grid .moduletable ul li:last-child { 
    border-bottom: 1px solid #e2e8f0 !important; 
}

/* Desain Judul Artikel (Hijau Teal) */
.content-berita-grid .moduletable ul li a { 
    color: #0b7564 !important; 
    font-weight: 600 !important; 
    text-decoration: none !important; 
    font-size: 1rem; 
    line-height: 1.4 !important; 
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 8px !important; 
    transition: color 0.2s ease; 
}
.content-berita-grid .moduletable ul li a:hover { 
    color: var(--pta-secondary) !important; 
}

/* Desain Tanggal */
.content-berita-grid .moduletable ul li .date { 
    font-size: 0.85rem !important; 
    color: #a0aec0 !important; 
    display: block; 
    font-weight: normal !important; 
}

/* Desain Tombol "Lainnya" */
.content-berita-grid .moduletable .readmore { 
    text-align: right !important; 
    margin-top: 20px !important; 
    display: block !important; 
}
.content-berita-grid .moduletable .readmore a { 
    display: inline-block;
    background-color: #128c4b !important; 
    color: #ffffff !important; 
    font-weight: 600 !important; 
    text-decoration: none !important; 
    font-size: 0.85rem !important; 
    padding: 8px 16px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}
.content-berita-grid .moduletable .readmore a:hover { 
    background-color: #0a5c36 !important; 
}

/* =========================================
   FIX SPASI BANNER & MENU LAYANAN (CONTENT-TOP)
   ========================================= */
.main-body .row.g-4 {
    margin-top: 0.5rem !important; /* Diperkecil dari 1.5rem agar rapat dengan banner */
}

/* Memberi sedikit lengkungan/border-radius kalau bannernya berupa gambar langsung */
.main-body img {
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* PENGAMAN SPASI LAYOUT BARU */
.running-text-section {
    padding: 0 !important; /* Hapus padding agar murni menggunakan margin Bootstrap */
    overflow: hidden;
}

/* =========================================
   PANGKAS SPASI ANTAR MODUL DI CONTENT-TOP
   ========================================= */
.content-top-area .moduletable {
    margin-bottom: 8px !important; /* Mengecilkan jarak antar modul (awalnya 25px) */
}

.content-top-area .moduletable:last-child {
    margin-bottom: 0 !important; /* Menghilangkan jarak di modul paling akhir agar tidak dobel */
}

/* Jika banner memakai background kotak putih, kita bisa hilangkan juga khusus di content-top */
.content-top-area .moduletable {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* =========================================
   GAMBAR RESPONSIF & FULL WIDTH (100%)
   ========================================= */

/* 1. Paksa gambar di dalam SELURUH modul (termasuk sidebar) menjadi 100% */
.moduletable img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 6px; /* Otomatis memberi sedikit lengkungan estetik */
}

/* 2. Pengaman untuk gambar di dalam isi Artikel Utama agar tidak meluber & Tanpa Kotak */
.item-page img {
    max-width: 100% !important;
    height: auto !important;
    box-shadow: none !important; /* SAKTI: Membunuh efek bayangan kotak dari parent */
    background-color: transparent !important; /* Memastikan logo PNG tetap tembus pandang */
    border-radius: 0 !important; /* Opsional: Menghilangkan lengkungan sudut bawaan */
}

/* =========================================
   KUSTOMISASI SIDEBAR: LIST AGENDA & MENU CEPAT
   ========================================= */
/* 1. Hilangkan bullet point asli dan margin bawaan (Target semua tipe list) */
.moduletable ul.latestnews,
.moduletable ul.menu,
.moduletable ul.mod-menu,
.moduletable ul.nav {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. Desain setiap baris */
.moduletable ul.latestnews > li,
.moduletable ul.menu > li,
.moduletable ul.mod-menu > li,
.moduletable ul.nav > li {
    padding: 12px 0 12px 25px !important; /* Ruang untuk ikon panah */
    border-bottom: 1px dashed #cbd5e0 !important; /* Garis putus-putus */
    position: relative;
    line-height: 1.5;
    background: transparent !important;
}

/* Hilangkan garis di item paling bawah */
.moduletable ul.latestnews > li:last-child,
.moduletable ul.menu > li:last-child,
.moduletable ul.mod-menu > li:last-child,
.moduletable ul.nav > li:last-child {
    border-bottom: none !important; 
}

/* 3. Suntikkan Ikon Panah Emas FontAwesome */
.moduletable ul.latestnews > li::before,
.moduletable ul.menu > li::before,
.moduletable ul.mod-menu > li::before,
.moduletable ul.nav > li::before {
    content: "\f105"; /* Ikon chevron-right */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 14px;
    color: var(--pta-secondary); /* Emas */
    font-size: 1rem;
    transition: transform 0.3s ease;
}

/* Animasi: Ikon panah maju saat disentuh */
.moduletable ul.latestnews > li:hover::before,
.moduletable ul.menu > li:hover::before,
.moduletable ul.mod-menu > li:hover::before,
.moduletable ul.nav > li:hover::before {
    transform: translateX(4px);
}

/* 4. Sulap Teks Link (Hijau Elegan & Potong Otomatis) */
.moduletable ul.latestnews > li > a,
.moduletable ul.menu > li > a,
.moduletable ul.mod-menu > li > a,
.moduletable ul.nav > li > a {
    color: #065b4c !important; /* Hijau PTA Palu */
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
    padding: 0 !important; /* Membunuh padding bawaan Bootstrap dari Joomla 5 */
    background: transparent !important;
    
    /* Jurus Memotong Teks Maksimal 2 Baris */
    display: -webkit-box !important;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Efek Teks berubah jadi Emas saat disorot */
.moduletable ul.latestnews > li > a:hover,
.moduletable ul.menu > li > a:hover,
.moduletable ul.mod-menu > li > a:hover,
.moduletable ul.nav > li > a:hover {
    color: var(--pta-secondary) !important; 
}

/* =========================================
   HILANGKAN KOTAK PUTIH (CARD) DI POSISI TAB
   ========================================= */
.tab-area .moduletable {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 20px !important; /* Memberi sedikit jarak bawah agar tidak menabrak artikel */
}

/* =========================================
   KUSTOMISASI ARSIP BERITA (ULTIMATE + ANTI BOOTSTRAP)
   ========================================= */

/* 1. Hancurkan seluruh struktur kotak & latar tabel bawaan */
.category-list table, 
.category-list .table {
    border: none !important;
    box-shadow: none !important;
    --bs-table-bg: transparent !important;
    --bs-table-accent-bg: transparent !important;
    --bs-table-striped-bg: transparent !important;
    --bs-table-hover-bg: transparent !important;
    margin-top: 15px;
}

/* Bunuh semua garis vertikal dan horizontal bawaan di setiap sel secara paksa */
.category-list table th,
.category-list table td,
.category-list .table th,
.category-list .table td {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    background-color: transparent !important;
}

/* 2. Desain Header Kolom (Hilangkan tulisan biru & garis bawah link) */
.category-list table > thead > tr > th,
.category-list .table > thead > tr > th {
    border-bottom: 2px solid var(--pta-secondary) !important; 
    padding: 15px 10px !important;
}

.category-list table > thead > tr > th a,
.category-list .table > thead > tr > th a {
    color: #4a5568 !important; 
    text-transform: uppercase;
    font-size: 0.85rem;
    font-weight: 700 !important;
    text-decoration: none !important;
    letter-spacing: 0.5px;
}

/* 3. Desain Baris Berita (Dinamis & Modern) */
.category-list table > tbody > tr,
.category-list .table > tbody > tr {
    border-bottom: 1px dashed #cbd5e0 !important; 
    transition: all 0.3s ease; 
}

/* Hilangkan garis putus-putus di item paling bawah */
.category-list table > tbody > tr:last-child,
.category-list .table > tbody > tr:last-child {
    border-bottom: none !important;
}

/* EFEK DINAMIS: Baris sedikit terangkat dan berubah warna saat disorot */
.category-list table > tbody > tr:hover,
.category-list .table > tbody > tr:hover {
    background-color: #f8fcf9 !important; 
    transform: translateY(-2px); 
    box-shadow: 0 4px 10px rgba(0,0,0,0.03) !important; 
}

/* Beri jarak padding yang lega di dalam isi sel */
.category-list table > tbody > tr > td,
.category-list .table > tbody > tr > td {
    padding: 18px 10px !important;
    vertical-align: middle;
}

/* 4. TAKTIK NUKLIR: Paksa Warna Link Judul Jadi Hijau */
body.site-ptapalu table.category a,
body.site-ptapalu .category-list a,
body.site-ptapalu td.list-title a {
    --bs-link-color: #065b4c !important; 
    --bs-link-hover-color: #cfa861 !important;
    
    color: #065b4c !important; /* Hijau PTA Palu */
    text-decoration: none !important; 
    font-weight: 600 !important;
    font-size: 1.05rem !important;
}

/* Efek Teks berubah Emas saat disorot */
body.site-ptapalu table.category a:hover,
body.site-ptapalu .category-list a:hover,
body.site-ptapalu td.list-title a:hover {
    color: #cfa861 !important; /* Warna Emas */
    text-decoration: none !important;
}

/* 5. Rapikan Teks Tanggal & Penulis */
.category-list table > tbody > tr td:nth-child(n+2),
.category-list .table > tbody > tr td:nth-child(n+2) {
    color: #718096 !important; 
    font-size: 0.9rem;
}

/* 6. Lencana Hits (Kotak angka) */
.category-list .badge {
    background-color: var(--pta-secondary) !important;
    color: #ffffff !important;
    border-radius: 20px !important; 
    padding: 6px 12px !important;
    font-weight: 600;
    font-size: 0.8rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}



/* =========================================
   HILANGKAN KOTAK PUTIH DI CONTENT-BOTTOM
   ========================================= */
.content-bottom-area .moduletable {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 12px !important; /* Jaga jarak aman dengan footer di bawahnya */
}

/* Hilangkan garis biru bawaan h3 jika modul di content-bottom memakai judul */
.content-bottom-area .moduletable h3 {
    border-bottom: none !important;
    margin-bottom: 15px !important;
}

/* =========================================
   SAKTI: FIX PAGINATION RESPONSIF & STYLE MINIMAL
   (Menghilangkan list bullet Image 1&2, Menjadikan horizontal bar rapi)
   ========================================= */

/* 1. Target container utama pagination di halaman artikel */
.item-page .pagination {
    display: flex !important; /* Paksa jadi baris horizontal */
    flex-wrap: wrap !important; /* MAHA SAKTI: Paksa turun jika layar HP sempit (Anti Luber) */
    justify-content: center !important; /* Rata tengah */
    list-style: none !important; /* HAPUS BULLET (Hilangkan tampilan Image 1&2) */
    padding: 0 !important;
    margin: 30px auto !important;
    gap: 6px; /* Jarak aman antar tombol di mobile agar tidak rapat */
}

/* 2. Style dasar untuk tombol (angka, prev, next) */
.item-page .pagination li a,
.item-page .pagination li span {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 38px; /* Sedikit kotak agar mudah ditekan jari */
    height: 38px;
    padding: 0 10px;
    border: 1px solid #e2e8f0; /* Garis halus abu-abu */
    background-color: #ffffff;
    color: var(--pta-primary); /* Warna hijau PTA */
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

/* 3. Hover effect universal */
.item-page .pagination li a:hover {
    background-color: var(--pta-primary);
    color: #ffffff !important;
    border-color: var(--pta-primary);
    transform: translateY(-1px);
}

/* 4. Style Tombol Aktif (Warna Hijau PTA) */
.item-page .pagination li.active span {
    background-color: var(--pta-primary) !important; 
    color: #ffffff !important;
    border-color: var(--pta-primary) !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 5. Penjinak Khusus untuk Layar HP Sangat Sempit (< 360px) */
@media (max-width: 360px) {
    .item-page .pagination li a,
    .item-page .pagination li span {
        min-width: 32px;
        height: 32px;
        font-size: 0.85rem;
        padding: 0 6px;
    }
}

/* =========================================
   SAKTI: TABEL BISA DIGESER (SWIPE) DI HP
   ========================================= */
@media (max-width: 767px) {
    /* 1. Paksa tabel menjadi elemen blok yang bisa di-scroll ke samping */
    .main-body table,
    div[itemprop="articleBody"] table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important; /* Bikin geseran smooth di HP/iPhone */
        border-collapse: collapse !important;
        margin-bottom: 20px !important;
        border: 1px solid #e2e8f0 !important; /* Beri bingkai luar agar terlihat rapi */
    }

    /* 2. Bunuh semua inline style lebar mati bawaan editor JCE */
    .main-body table th,
    .main-body table td,
    div[itemprop="articleBody"] table th,
    div[itemprop="articleBody"] table td {
        min-width: 0 !important;
        box-sizing: border-box !important;
        white-space: normal !important; /* Jangan biarkan teks memanjang tanpa henti */
        padding: 12px 10px !important;
    }
}

/* ========================================================================
   3. PENYEMPURNAAN RESPONSIF (ALL DEVICES - BOOTSTRAP 5 STANDARD)
   ======================================================================== */

/* A. EXTRA SMALL MOBILE (Layar HP Sangat Sempi < 576px) 
   Fokus: Mencegah teks header tabrakan dan merapatkan layout */
@media (max-width: 575.98px) {
    body .brand-area { padding-right: 45px; } /* Jaga jarak dari tombol menu */
    body .img-logo { max-height: 40px !important; }
    
    /* Pengecilan tipografi ekstra untuk HP sempit */
    body .brand-text h1 { font-size: 0.75rem !important; }
    body .brand-text .text-secondary { font-size: 0.5rem !important; }
    
    /* Kurangi jarak spasi antar card/modul agar layar HP tidak terlalu panjang di-scroll */
    .scard-dark { padding: 25px 15px; }
    .survey-cards-dark { gap: 15px; }
    
    /* Perkecil judul di dalam modul agar rapi */
    .moduletable h3, .content-berita-grid .moduletable h3 { font-size: 1.05rem !important; }
}

/* B. TABLET PORTRAIT (Layar Menengah < 768px)
   Fokus: Penyesuaian tipografi artikel dan perataan footer */
@media (max-width: 767.98px) {
    /* Judul artikel diperkecil sedikit agar tidak memakan layar tablet */
    body .item-page h1, 
    body .page-header h1 { font-size: 1.7rem !important; } 
    body div[itemprop="articleBody"] { font-size: 1rem !important; line-height: 1.6; }
    
    /* Footer dipaksa rata tengah di layar tablet dan HP */
    .pta-footer { text-align: center; }
    .pta-footer .visitor-stats .stat-row { justify-content: center; gap: 15px; }
}

/* C. EXTRA LARGE SCREEN / 4K DESKTOP (Layar Monitor Besar > 1400px)
   Fokus: Menjaga proporsi bacaan di monitor raksasa */
@media (min-width: 1399.98px) {
    /* Lebar maksimal kontainer agar tidak melar tanpa batas */
    .container { max-width: 1320px !important; }
    
    /* Teks artikel sedikit dibesarkan agar nyaman dibaca dari jarak jauh */
    body div[itemprop="articleBody"] { font-size: 1.15rem !important; line-height: 1.9; } 
    body .item-page h1 { font-size: 2.5rem !important; }
}