/* ============================================
   FOOTER MOBILE RESPONSIVE (MAX 767px)
   Layout: 1 Kolom Berderet ke Bawah (Stacked)
   ============================================ */
@media (max-width: 767px) {

    /* 1. Sesuaikan Padding Utama Footer agar lebih compact */
    .site-footer {
        padding: 40px 0 20px;
    }

    /* 2. Ubah Layout Utama dari Horizontal ke Vertikal (Stack) */
    .footer-main {
        flex-direction: column;
        gap: 40px; /* Jarak antara Branding (atas) dan Widget (bawah) */
    }

    /* 3. Kolom Kiri (Branding, Deskripsi, Sosmed) */
    .footer-left {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        text-align: center; /* Rata tengah agar simetris di HP */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-branding {
        margin-bottom: 15px;
    }

    .footer-branding .custom-logo-link img {
        max-height: 35px; /* Logo sedikit lebih kecil di mobile */
    }

    .footer-description {
        max-width: 100%; /* Full width di mobile */
        margin-bottom: 20px;
        font-size: 0.85rem;
        line-height: 1.5;
    }

    .footer-social {
        justify-content: center; /* Ikon sosmed di tengah */
        gap: 10px;
        margin-bottom: 0;
    }

    .footer-social a {
        width: 36px;
        height: 36px;
    }

    /* 4. Kolom Kanan (Widget Menu) */
    .footer-right {
        width: 100%;
    }

    /* Ubah Grid 3 Kolom menjadi 1 Kolom (Berderet ke Bawah) */
    .footer-widgets-grid {
        grid-template-columns: 1fr; /* PAKSA 1 kolom */
        gap: 30px; /* Jarak antar blok widget */
    }

    .footer-widget-column {
        text-align: center; /* Teks widget rata tengah */
        border-top: 1px solid #1a1a1a; /* Garis pemisah halus antar widget */
        padding-top: 25px;
    }

    .footer-widget-column:first-child {
        border-top: none;
        padding-top: 0;
    }

    .footer-widget-title {
        font-size: 0.95rem;
        margin-bottom: 15px;
        display: inline-block; /* Agar garis bawah merah tidak full width */
    }

    .footer-menu-list li {
        margin-bottom: 8px;
    }
    
    /* Hilangkan efek geser (padding-left) saat hover di mobile agar tidak bergeser */
    .footer-menu-list a:hover {
        padding-left: 0; 
    }

    /* 5. Footer Bottom (Copyright) */
    .footer-bottom {
        margin-top: 30px;
        padding-top: 20px;
        border-top: 1px solid #1a1a1a;
    }

    .footer-copyright {
        text-align: center;
        font-size: 0.75rem;
        color: #666666;
        line-height: 1.4;
    }
}

/* ============================================
   PENYESUAIAN HP LAYAR SANGAT KECIL (MAX 480px)
   ============================================ */
@media (max-width: 480px) {
    .site-footer {
        padding: 30px 0 15px;
    }
    
    .footer-branding .site-title-fallback {
        font-size: 1.3rem;
    }
    
    .footer-description {
        font-size: 0.8rem;
    }

    .footer-widgets-grid {
        gap: 25px;
    }
}