/* =========================================
   CTA SECTION - GLOBAL (DESKTOP)
   ========================================= */
.cta-section {
    position: relative;
    padding: 100px 0; /* Padding lega di Desktop */
    background: url('../img/hero-aksiva.webp') no-repeat center center/cover;
    background-attachment: fixed; /* Efek Parallax aktif di Desktop */
    text-align: center;
    color: white;
}

.overlay-cta {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.85); /* Dibuat sedikit lebih gelap (85%) agar teks putih lebih kontras */
    z-index: 1;
}

/* Helper Classes (Penting agar konten muncul di atas overlay) */
.relative { position: relative; }
.z-10 { z-index: 10; }

.cta-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.cta-content p {
    font-size: 1.15rem;
    color: #ddd;
    max-width: 700px;
    margin: 0 auto 40px;
    line-height: 1.6;
}

/* Tombol Besar */
.btn-cta-big {
    display: inline-flex;
    align-items: center;
    justify-content: center; /* Pastikan konten tombol di tengah */
    gap: 10px;
    background-color: var(--primary-color);
    color: white;
    padding: 18px 45px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(255, 140, 0, 0.3);
}

.btn-cta-big:hover {
    background-color: white;
    color: var(--primary-color);
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(255, 140, 0, 0.5); /* Shadow lebih besar pas hover */
}

/* =========================================
   TABLET VIEW (Max-width: 768px)
   ========================================= */
@media screen and (max-width: 768px) {
    .cta-section {
        padding: 70px 0;
    }

    .cta-content h2 {
        font-size: 2rem;
    }

    .cta-content p {
        font-size: 1rem;
        max-width: 80%; /* Batasi lebar teks */
        margin-bottom: 30px;
    }

    .btn-cta-big {
        padding: 15px 35px;
        font-size: 1rem;
    }
}

/* =========================================
   MOBILE VIEW (Max-width: 480px)
   ========================================= */
@media screen and (max-width: 480px) {
    .cta-section {
        padding: 40px 0; /* Saya kurangi dari 60px jadi 40px biar lebih rapat */
        background-attachment: scroll; 
    }

    .cta-content h2 {
        font-size: 1.5rem; /* Saya kecilkan dari 1.8rem jadi 1.5rem */
        margin-bottom: 10px; /* Jarak ke paragraf diperdekat */
        line-height: 1.3;
    }

    .cta-content p {
        font-size: 0.85rem; /* Font lebih kecil (sekitar 13-14px) */
        margin-bottom: 20px; /* Jarak ke tombol diperdekat */
        color: #ccc;
        line-height: 1.5;
        padding: 0 10px; /* Tambah padding samping biar teks gak mepet layar */
    }

    /* Tombol Full Width tapi lebih ramping */
    .btn-cta-big {
        /* 1. RESET LEBAR: Hapus width 100% biar tombolnya gak panjang ke samping */
        width: auto !important; 
        display: inline-flex !important; 
        
        /* 2. RESET TINGGI: Kita kurangi padding vertikal jadi 10px */
        padding: 12px 30px !important; 
        
        /* 3. RESET UKURAN: Font & Line Height kita kunci */
        font-size: 0.9rem !important;
        line-height: 1 !important; 
        
        /* 4. JAGA-JAGA: Reset min-height kalau ada style bawaan */
        min-height: 0 !important; 
        height: auto !important;
        
        /* Styling tambahan biar rapi */
        justify-content: center;
        align-items: center;
        margin: 0 auto; /* Biar posisi tombol di tengah */
    }
}