/* ==========================================================================
   1. VARIABLES, FONTS & RESET (GLOBAL)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --primary: #1C2B4E;      
    --secondary: #F7941D;    
    --dark: #0F172A;         
    --light: #F8FAFC;        
    --white: #FFFFFF;
    --gray: #64748B;         
    --success: #25D366;      
    --success-hover: #1ebc57;
    --accent-yellow: #eab308;
}

* {
    margin: 0; 
    padding: 0; 
    box-sizing: border-box;
}

html {
    touch-action: manipulation; 
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--white);
    color: var(--primary);
    line-height: 1.6;
}

/* Container Global */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section-padding { padding: 80px 0; }

.section-title {
    text-align: center;
    width: 100%;
    margin-bottom: 50px;
    display: flex; 
    flex-direction: column;
    align-items: center; 
}
.section-title h2 { color: var(--primary); font-size: 2.2rem; font-weight: 700; margin-bottom: 10px; }
.section-title .divider { width: 60px; height: 3px; background: var(--secondary); margin: 15px auto; }
.section-title p { color: var(--gray); max-width: 600px; margin: 0 auto; }

/* ==========================================================================
   2. NAVIGATION BAR
   ========================================================================== */
.navbar {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    height: 80px;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border-bottom: 1px solid #edf2f7;
}

/* Perbaikan Bug Gabungan Class */
.container.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
}

.logo-wrapper {
    display: flex;
    align-items: center;
    height: 100%;
    text-decoration: none;
}

.nav-logo {
    height: 70px; 
    width: auto;           
    object-fit: contain;
    transition: transform 0.3s ease;
}
.logo-wrapper:hover .nav-logo { transform: scale(1.02); }

.nav-links {
    display: flex;
    list-style: none;
    align-items: center;
    margin: 0;
    padding: 0;
    gap: 25px;
}

.nav-links li { display: flex; align-items: center; }

.nav-links a {
    text-decoration: none;
    color: var(--primary);
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--secondary); }

/* Penyelarasan Bug Class Tombol WA Navigasi (.btn-wa sesuai HTML) */
.nav-links .btn-wa {
    background: var(--success);
    color: white !important;
    padding: 10px 20px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.2);
    transition: all 0.3s ease;
}
.nav-links .btn-wa:hover {
    background: var(--success-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.3);
}

.menu-toggle { 
    display: none; 
    cursor: pointer; 
    flex-direction: column;
    justify-content: space-between;
    width: 25px;
    height: 18px;
}

.menu-toggle .bar {
    display: block;
    width: 100%;
    height: 3px;
    background: var(--primary);
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}

/* ==========================================================================
   3. FOOTER & FLOATING WA BUTTON (GLOBAL)
   ========================================================================== */
.main-footer { background: var(--dark); color: #ecf0f1; padding: 60px 0 30px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-col h4 { color: #fff; font-size: 1.2rem; margin-bottom: 25px; }
.footer-logo { font-size: 1.6rem; font-weight: 700; color: #fff; }
.footer-logo span { color: var(--secondary); }
.footer-desc { color: #bdc3c7; font-size: 0.95rem; line-height: 1.7; margin-bottom: 20px; }

.ojk-wrapper { background: rgba(255, 255, 255, 0.05); padding: 10px 15px; border-radius: 8px; display: inline-flex; align-items: center; gap: 12px; }
.ojk-logo { height: 35px; filter: brightness(0) invert(1); }
.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 12px; }
.footer-links a { color: #bdc3c7; transition: 0.3s; text-decoration: none;}
.footer-links a:hover { color: #fff; padding-left: 5px; }

.highlight-link { color: var(--success); font-weight: 600; }
.footer-wa { display: block; margin-top: 10px; color: var(--success); font-weight: 600; font-size: 1.1rem; text-decoration: none; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 30px; text-align: center; }
.footer-legal p { font-size: 0.85rem; color: #7f8c8d; margin-bottom: 5px; }
.ojk-text a { color: #bdc3c7; text-decoration: underline; }

/* Floating WA */
.wa-float {
    position: fixed; bottom: 30px; right: 30px; background-color: var(--success); color: #fff;
    border-radius: 50px; text-align: center; font-size: 30px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 9999; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;
    text-decoration: none; transition: all 0.3s ease; animation: pulse-wa 2s infinite;
}
.wa-float:hover { transform: scale(1.1); background-color: var(--success-hover); color: white; }
.wa-badge { position: absolute; right: 75px; background: white; color: #333; font-size: 14px; padding: 8px 15px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); white-space: nowrap; font-weight: 500; pointer-events: none; transition: 0.3s; }

@keyframes pulse-wa {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
    70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* ==========================================================================
  /* ==========================================================================
   4. RESPONSIVE GLOBAL (MEDIA QUERIES) - PERFECTED & COMPACT
   ========================================================================== */
@media (max-width: 768px) {
    body { font-size: 14px; }
    .container { padding: 0 15px; }
    
    .nav-logo { height: 35px; }
    .menu-toggle { display: flex; position: relative; z-index: 10002; }
    
    .nav-links {
        position: fixed; 
        top: 80px; 
        left: -100%; 
        width: 100%; 
        height: calc(100vh - 80px);
        background: #ffffff; 
        flex-direction: column; 
        justify-content: flex-start; 
        padding-top: 40px;   
        transition: all 0.4s ease-in-out; 
        box-shadow: 0 15px 20px rgba(0,0,0,0.1); 
        z-index: 10001; 
        opacity: 0; 
        display: flex; 
        gap: 0;
    }

    /* ANTISIPASI JIKA CLASS ACTIVE ATAU IS-ACTIVE YANG TERPICU JAVASCRIPT */
    .nav-links.active, .nav-links.is-active { 
        left: 0 !important; 
        opacity: 1 !important; 
    }
    
    .nav-links li { margin: 20px 0; width: 100%; text-align: center; justify-content: center; }
    .nav-links a { font-size: 1.2rem; display: block; width: 100%; }

    /* Perbaikan Sinkronisasi Tombol Mobile WA */
    .nav-links .btn-wa { display: inline-flex !important; justify-content: center; width: auto !important; margin: 0 auto; padding: 12px 30px; }
    
    /* ANIMASI HAMBURGER JADI SILANG (Mendukung fleksibilitas class .active atau .is-active) */
    .menu-toggle.is-active .bar:nth-child(2), .menu-toggle.active .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.is-active .bar:nth-child(1), .menu-toggle.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .menu-toggle.is-active .bar:nth-child(3), .menu-toggle.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .ojk-wrapper { justify-content: center; }
    .wa-float { bottom: 20px; right: 20px; width: 55px; height: 55px; font-size: 25px; }
    .wa-badge { display: none; }
}

/* ==========================================================================
   5. STYLING MODUL GRID MITRA (LEASING)
   ========================================================================== */
.mitra-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.mitra-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mitra-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
    border-color: #cbd5e0;
}

.mitra-logo-wrapper {
    height: 85px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    width: 100%;
}

.mitra-logo-img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.mitra-name {
    color: #2d3748;
    font-weight: 600;
    font-size: 0.95rem;
}

/* Responsif Grid Mitra di Layaran HP Kecil */
@media (max-width: 576px) {
    .mitra-grid {
        grid-template-columns: repeat(2, 1fr); /* Tampilan 2 kolom rapi di HP */
        gap: 12px;
    }
    .mitra-card {
        padding: 15px 10px;
    }
    .mitra-logo-wrapper {
        height: 65px;
    }
}