@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap');

/* Lock Desktop Background */
body {
    background-color: #e7e7e7; /* Warna abu-abu luar container */
    margin: 0;
    display: flex;
    justify-content: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Mobile Wrapper - Terkunci 480px dengan Gambar Background Asli */
.mobile-wrapper {
    width: 100%;
    max-width: 480px;
    min-height: 100vh;
    /* Panggil gambar background hasil resize tadi */
    background-image: url('assets/img/main-bg.jpg');
    background-size: cover; /* Gambar menutupi seluruh container */
    background-position: top center;
    background-repeat: no-repeat;
    background-color: #0b0316; /* Base color jika gambar gagal load */
    
    box-shadow: 0 0 50px rgba(0,0,0,0.2);
    position: relative;
    overflow-x: hidden;
}

/* Efek Kaca (Glassmorphism) */
.glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- CUSTOM NEON GLOW UNTUK PNG --- */
.hero-neon-glow {
    /* Kita tumpuk 2 drop-shadow */
    filter: 
        /* Lapisan 1: Pendaran dekat, terang (Garis Tepi) */
        drop-shadow(0 0 5px rgba(168, 85, 247, 0.8))
        /* Lapisan 2: Pendaran jauh, halus (Pancaran Atmosfer) */
        drop-shadow(0 0 65px rgba(168, 85, 247, 0.4));
}

.neon-card {
    border: 1px solid rgba(168, 85, 247, 0.3);
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.1);
}

/* --- CUSTOM TESTIMONIAL SWIPER --- */
.swiperTestimonial {
    width: 100%;
    overflow: hidden;
}

.swiperTestimonial .swiper-slide {
    transition: all 0.5s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

.swiperTestimonial .swiper-slide .img-wrapper {
    transform: scale(0.75);
    transition: all 0.5s ease;
}

.swiperTestimonial .swiper-slide .testimonial-content {
    opacity: 0;
    height: 0;
    transition: opacity 0.4s ease-in-out; /* Transisi murni fokus di pudar */
    overflow: hidden;
    
    /* KUNCI UTAMA: Paksa lebar teks agar tidak terjepit foto */
    width: 380px; 
    max-width: 90vw;
}

/* State dasar (Slide Paling Ujung Kiri/Kanan) */
.swiperTestimonial .swiper-slide .img-wrapper {
    transform: scale(0.75);
    filter: grayscale(30%) brightness(0.9);
    transition: all 0.5s ease;
}

/* PENDORONG JARAK: Geser slide tepat di SEBELAH KIRI agar menjauh ke kiri */
.swiperTestimonial .swiper-slide-prev .img-wrapper {
    transform: scale(0.75) translateX(-12px);
}

/* PENDORONG JARAK: Geser slide tepat di SEBELAH KANAN agar menjauh ke kanan */
.swiperTestimonial .swiper-slide-next .img-wrapper {
    transform: scale(0.75) translateX(12px);
}

/* State untuk slide AKTIF di TENGAH (Tidak digeser, hanya membesar) */
.swiperTestimonial .swiper-slide-active .img-wrapper {
    transform: scale(1.7) translateX(0);
    filter: grayscale(0%) brightness(1);
}

/* State untuk teks saat di tengah (Fade In) */
.swiperTestimonial .swiper-slide-active .testimonial-content {
    opacity: 1;
    height: auto;
    margin-top: 1rem;
    /* Efek fade in ditaruh di sini, ditambah delay 0.2s agar muncul setelah gambar membesar */
    transition: opacity 0.6s ease-in-out 0.2s; 
}

/* --- CUSTOM LINE DIVIDER --- */
.nex-divider {
    height: 2px; /* Ketebalan garis di tengah */
    width: 100%; /* Membentang penuh container mobile */
    /* Gradient: Terang di tengah (50%), pudar ke transparan di ujung kiri (0%) dan kanan (100%) */
    background-image: radial-gradient(circle, #a855f7 0%, rgba(168, 85, 247, 0) 100%);
    /* Berikan sedikit glow visual agar lebih hidup */

    border: none;
    opacity: 1; /* Atur keburaman sesuai selera */
}