/* =========================================================
   REVISI FOOTER: PENYELARASAN LAYOUT DESKTOP
   ========================================================= */

.site-footer {
    background: #ffffff;
    padding: 30px 0; /* Padding atas bawah saja */
    margin-top: 50px;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.03); 
    border-top: 1px solid #f2f2f2;
    width: 100%;
}

/* Kunci utama penyelarasan: */
.footer-flex-wrapper {
    display: flex;
    flex-direction: column; /* Mobile: Tumpuk */
    align-items: center;
    gap: 15px;
    /* Pastikan tidak ada padding tambahan yang mendorong ke samping */
    padding-left: 0; 
    padding-right: 0;
}

/* CSS untuk Desktop */
@media screen and (min-width: 1024px) {
    .footer-flex-wrapper {
        flex-direction: row;            /* Desktop: Sejajar */
        justify-content: space-between; /* Kiri & Kanan */
        align-items: center;
        /* Container ini akan otomatis mengikuti max-width 1140px (atau sesuai container atasmu) */
    }

    /* Pastikan container di atasmu punya lebar yang sama */
    .container {
        max-width: 1140px; /* Samakan angka ini dengan container di header/index */
        margin: 0 auto;
        padding: 0 15px; /* Jarak aman di pinggir */
    }
}

/* Gaya teks (opsional, sesuaikan selera) */
.footer-links {
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
}

.footer-links li a {
    text-decoration: none;
    color: #333;
    font-size: 13px;
    font-weight: 600;
}
/* =========================================================
   RESPONSIVE DESKTOP (Layar Lebar)
   ========================================================= */
@media screen and (min-width: 768px) {
    .footer-container {
        flex-direction: row;        /* Susun menyamping di Desktop */
        justify-content: space-between; /* Copyright di kiri, Menu di kanan */
        text-align: left;
    }

    .footer-links {
        justify-content: flex-end;
    }
}

@media screen and (max-width: 767px) {
    /* 1. Kurangi jarak bawah pagination di mobile */
    .enews-pagination {
        margin-top: 30px !important;    /* Jarak dari berita terakhir ke pagination */
        margin-bottom: 10px !important; /* Jarak dari pagination ke footer (kita rapatkan) */
    }

    /* 2. Kurangi jarak atas footer di mobile */
    .site-footer {
        margin-top: 20px !important;    /* Menarik footer agar naik ke atas mendekati pagination */
        padding: 20px 0 !important;     /* Memperkecil padding dalam footer agar lebih slim */
    }

    /* 3. Rapikan jarak antar elemen dalam footer mobile */
    .footer-container {
        gap: 10px !important;           /* Merapatkan jarak antara copyright dan menu footer */
    }
}

/* =========================================================
   STYLE TYPOGRAPHY COPYRIGHT (DIPERBAIKI UNTUK RESPONSIF)
   ========================================================= */

/* Menargetkan teks copyright di dalam footer - Gaya Dasar */
.site-footer p, 
.footer-flex-wrapper p {
    /* 1. Ganti Jenis Font: Gunakan font sans-serif modern & bersih */
    /* Contoh Montserrat (harus dimuat di header), Lato, Open Sans, atau font sistem. */
    font-family: 'Montserrat', 'Lato', 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    
    /* 2. Ukuran font: Tetap kecil agar elegan, tapi pastikan terbaca. */
    font-size: 12px;
    color: #8a8a8a; /* Warna sedikit lebih gelap agar lebih terbaca */
    
    /* 3. Teks Campuran: Jauhkan dari uppercase total agar lebih ringkas. */
    text-transform: none; /* Atau pakai text-transform: capitalize; untuk kapital di awal kata */
    
    /* 4. Jarak Huruf Proporsional (Pengecilkan dari 2px) */
    letter-spacing: normal; /* Kembali ke normal untuk keterbacaan yang lebih baik */
    
    font-weight: 500;
    margin: 0;
    line-height: 1.6;
}

/* Memberikan aksen tebal pada nama brand (Musoffa) */
.site-footer p strong, 
.site-footer p b {
    color: #111; /* Nama brand dibuat lebih hitam */
    font-weight: 700; /* Sedikit kurang tebal dari 900 agar lebih bersih */
}

/* --- Pengaturan Khusus untuk Mobile --- */
@media screen and (max-width: 767px) {
    .site-footer p, 
    .footer-flex-wrapper p {
        /* Pastikan tidak ada letter-spacing yang membuat teks melebar di layar sempit */
        letter-spacing: 0 !important;
        
        /* Jika perlu, kurangi sedikit ukuran font untuk nama web yang super panjang */
        /* font-size: 10px; */
    }
}