/* ============================================
   MOBILE.CSS - UNTUK SEMUA UKURAN SMARTPHONE
   ============================================ */

/* ---------- 1. EXTRA SMALL: Ponsel 5 inch ke bawah (≤ 374px) ---------- */
@media (max-width: 374px) {
    /* Layout dasar */
    body {
        font-size: 14px;
        padding: 0;
        background: #f5f7fa;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }
    
    .container {
        padding: 10px !important;
        width: 100%;
        max-width: 100%;
        margin: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    
    .form-box {
        padding: 18px 14px !important;
        margin: 0;
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        flex: 1;
    }
    
    /* Logo & branding */
    .logo-container {
        margin-bottom: 20px;
    }
    
    .site-logo {
        height: 30px !important;
        margin-bottom: 15px !important;
    }
    
    .brand-title {
        font-size: 20px !important;
        line-height: 1.1;
        margin-bottom: 5px;
    }
    
    .brand-subtitle {
        font-size: 14px !important;
        margin-top: 3px;
        margin-bottom: 15px !important;
    }
    
    .user-email {
        font-size: 13px;
        padding: 6px;
        margin: 10px 0 15px 0;
    }
    
    .page-title {
        font-size: 18px !important;
        margin-bottom: 3px;
    }
    
    /* Form elements */
    .input-group {
        margin-bottom: 15px;
    }
    
    .form-group {
        margin-bottom: 18px;
    }
    
    .input-label {
        font-size: 13px;
        margin-bottom: 6px;
    }
    
    .input-field, .personal-input, .grid-input, .form-input {
        padding: 10px 12px !important;
        font-size: 15px !important;
        border-radius: 6px;
        min-height: 44px;
    }
    
    /* Buttons */
    .btn-continue, .btn-signin, .btn-submit {
        padding: 14px !important;
        font-size: 15px;
        min-height: 48px;
        margin-top: 15px;
    }
    
    /* Checkbox & links */
    .checkbox-group {
        margin: 12px 0;
        font-size: 13px;
    }
    
    .links {
        margin-top: 20px;
    }
    
    .link-item {
        margin: 8px 0;
        font-size: 14px;
    }
    
    /* Error messages */
    .error-message, .error-box {
        padding: 12px;
        margin-bottom: 15px;
        font-size: 13px;
    }
    
    /* Personal page */
    .personal-container {
        max-width: 100% !important;
        padding: 15px !important;
    }
    
    .form-grid {
        grid-template-columns: 1fr !important;
        gap: 15px;
    }
    
    .page-subtitle {
        font-size: 14px !important;
    }
    
    .form-label {
        font-size: 13px;
    }
    
    /* FOOTER - DI KIRI BAWAH VERTIKAL */
    .footer-links {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        font-size: 11px;
        margin-top: 15px !important;
        padding: 0 !important;
        text-align: left !important;
        justify-content: flex-start !important;
    }
    
    .footer-link {
        display: block !important;
        color: #666;
        text-decoration: none;
        padding: 4px 0 !important;
        text-align: left !important;
        width: 100%;
        font-size: 11px;
    }
}

/* ---------- 2. SMALL: Ponsel standar (375px - 424px) ---------- */
@media (min-width: 375px) and (max-width: 424px) {
    .container {
        padding: 12px !important;
    }
    
    .form-box {
        padding: 22px 18px !important;
    }
    
    .site-logo {
        height: 32px !important;
    }
    
    .brand-title {
        font-size: 22px !important;
    }
    
    .brand-subtitle {
        font-size: 16px !important;
        margin-bottom: 20px !important;
    }
    
    .input-field, .personal-input, .grid-input, .form-input {
        padding: 11px 13px !important;
        font-size: 16px !important;
    }
    
    /* Personal page */
    .form-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* FOOTER */
    .footer-links {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
        font-size: 12px;
        margin-top: 15px !important;
        text-align: left !important;
    }
    
    .footer-link {
        display: block !important;
        padding: 5px 0 !important;
        text-align: left !important;
        font-size: 12px;
    }
}

/* ---------- 3. MEDIUM: Ponsel besar (425px - 767px) ---------- */
@media (min-width: 425px) and (max-width: 767px) {
    .container {
        padding: 15px !important;
    }
    
    .form-box {
        padding: 25px 20px !important;
    }
    
    .site-logo {
        height: 35px !important;
    }
    
    .brand-title {
        font-size: 24px !important;
    }
    
    .brand-subtitle {
        font-size: 18px !important;
        margin-bottom: 25px !important;
    }
    
    .page-title {
        font-size: 20px !important;
    }
    
    /* Personal page */
    .form-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* FOOTER - Tetap kiri bawah vertikal */
    .footer-links {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
        font-size: 12px;
        margin-top: 20px !important;
        text-align: left !important;
        max-width: 100%;
    }
    
    .footer-link {
        display: block !important;
        padding: 6px 0 !important;
        text-align: left !important;
        font-size: 12px;
    }
}

/* ---------- 4. FIXES KHUSUS UNTUK FOOTER DI KIRI BAWAH ---------- */
@media (max-width: 767px) {
    /* Pastikan body menggunakan flexbox untuk footer di bawah */
    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }
    
    /* Container utama mengambil sisa space */
    .container {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    
    /* Form box juga flex agar konten di atas, footer di bawah */
    .form-box {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    
    /* Footer selalu di paling bawah */
    .footer-links-container {
        margin-top: auto !important;
        width: 100%;
        order: 999; /* Pastikan di paling bawah */
        background: #f8f9fa;
        border-top: 1px solid #e0e0e0;
        padding: 15px 0;
    }
    
    /* Override footer styling yang mungkin ada */
    .footer-links {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        text-align: left !important;
        margin: 0 !important;
        padding: 0 15px !important;
    }
    
    /* Hapus styling center yang mungkin ada di global CSS */
    .footer-link {
        text-align: left !important;
        display: block !important;
        margin: 0 !important;
    }
    
    /* Hapus margin/padding yang mengganggu */
    .links {
        margin-bottom: 20px;
    }
    
    /* Responsive untuk personal page */
    .personal-container {
        max-width: 100% !important;
        padding: 15px !important;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .form-input {
        padding: 12px;
        font-size: 16px;
    }
}