/* =================================
   Customer Page Styling
   ================================= */

/* Hero Section Kustom untuk Halaman Ini */
.page-hero {
    position: relative;
    padding: 80px 0;
    color: #ffffff;
    text-align: center;
    background-size: cover;
    background-position: center;
}
.hero-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(10, 25, 47, 0.6);
}
.page-hero .container {
    position: relative;
    z-index: 2;
}





/* =================================
   Cool Facts Section (Redesigned)
   ================================= */

#cool-facts {
    /* Section hanya bertugas memberi jarak vertikal */
    background-color: #f8f9fa;
    padding: 2rem 0;
}

/* DIUBAH: Styling sekarang diterapkan pada .container, bukan #cool-facts */
#cool-facts .container {
    position: relative; /* Diperlukan untuk elemen dekoratif */
    padding: 3rem;
    border-radius: 20px;
    overflow: hidden; /* Mencegah elemen dekoratif keluar */
    box-shadow: 0 20px 50px rgba(17, 172, 218, 0.15);

    /* DIUBAH: Background gradasi baru yang lebih modern */
    background: linear-gradient(135deg, #f0f9ff 0%, #d1eefc 100%);
}

/* DITAMBAHKAN: Ikon dekoratif di background untuk menambah kedalaman */
#cool-facts .container::before {
    content: '\f0c0'; /* Font Awesome icon code for 'users' or similar */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    bottom: -80px;
    right: -30px;
    font-size: 250px;
    color: #11ACDA;
    opacity: 0.05;
    transform: rotate(-15deg);
    z-index: 0;
}

.facts-text,
.stat-box {
    position: relative; /* Memastikan konten berada di atas ikon dekoratif */
    z-index: 1;
}

.facts-subtitle {
    font-family: serif;
    font-style: italic;
    font-size: 1.2rem;
    color: #0A5A7D;
}

.facts-title {
    font-size: 2rem;
    font-weight: 600;
    color: #0A192F;
}

.stat-box {
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(5px); /* Efek glassmorphism */
    padding: 1.5rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.stat-box .counter {
    font-size: 2.5rem;
    font-weight: 700;
    /* DIUBAH: Warna angka disesuaikan dengan warna utama Anda */
    color: #0A192F; 
}

.stat-box p {
    margin-bottom: 0;
}






/* =================================
   Modern Testimonials Section (Compact & Refined)
   ================================= */
#testimonials-modern {
    background-color: #f8f9fa;
    position: relative;
    padding: 1rem 0; /* DIUBAH: Padding seksi diperkecil */
    overflow: hidden;
}

/* Bentuk Dekoratif di Latar Belakang (dibuat lebih subtil) */
.deco-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px); /* Blur lebih kuat */
    z-index: 0;
    opacity: 0.7;
}
.deco-shape.shape-1 { width: 300px; height: 300px; background-color: rgba(17, 172, 218, 0.1); top: 0; right: 0; }
.deco-shape.shape-2 { width: 300px; height: 300px; background-color: rgba(245, 166, 35, 0.1); top: 40%; left: 45%; }
.deco-shape.shape-3 { width: 250px; height: 250px; background-color: rgba(13, 110, 253, 0.1); bottom: 0; left: 0; }
.deco-shape.shape-4 { width: 60px; height: 60px; background-color: rgba(17, 172, 218, 0.15); bottom: 25%; right: 20%; filter: blur(40px); }

#testimonials-modern .container {
    position: relative;
    z-index: 2;
}

.testimonials-swiper {
    padding-top: 20px;
    padding-bottom: 50px;
}

/* DIUBAH: Lebar slide diperkecil */
.testimonials-swiper .swiper-slide {
    transition: transform 0.4s ease, opacity 0.4s ease;
    transform: scale(0.9);
    opacity: 0.6;
    width: 300px; /* Lebar setiap kartu diperkecil */
}
.testimonials-swiper .swiper-slide-active {
    transform: scale(1);
    opacity: 1;
}

/* DIUBAH: Desain kartu menjadi solid white dengan shadow baru */
.testimonial-card {
    background-color: #ffffff; /* Latar belakang putih solid */
    border: 1px solid #eef0f3;
    border-radius: 20px;
    padding: 0.9rem; /* Padding internal diperkecil */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
    height: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
}

.testimonial-card .quote-icon-start,
.testimonial-card .quote-icon-end {
    font-size: 1.5rem;
    font-family: serif;
    color: #ced4da;
    line-height: 1;
}
.testimonial-card .quote-icon-start { margin-bottom: 0.75rem; }
.testimonial-card .quote-icon-end { margin-top: 0.75rem; align-self: flex-end; }
.testimonial-text {
    font-size: 0.9rem; /* Ukuran font diperkecil */
    color: #6c757d;
    line-height: 1.7;
    flex-grow: 1;
}
.author-info { margin-top: 1.5rem; display: flex; align-items: center; text-align: left; }
.author-avatar {
    width: 40px; /* Ukuran avatar diperkecil */
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: #0A192F;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    margin-right: 12px;
    font-size: 0.9rem;
}
.author-avatar::before { content: attr(data-initials); }
.author-name { font-weight: 600; font-size: 0.95rem; margin-bottom: 0; }
.author-company { font-size: 0.8rem; color: #6c757d; }
.testimonials-swiper .swiper-pagination-bullet-active { background-color: #11ACDA; }

/* Styling untuk Bintang Rating di Testimoni */
.testimonial-card .star-rating {
    color: #ffc107; /* Warna emas */
    margin-top: 1rem;
    font-size: 1rem;
    text-align: center; /* Posisi bintang di tengah */
}

/* Styling untuk teks 'Ulasan Google' */
.author-company i {
    opacity: 0.8;
}





 /* Styles for your customer section */
        #customer-page {
            position: relative; /* Crucial for positioning the canvas inside */
            overflow: hidden; /* Hide fireworks that go outside the container */
            background-color: #f8f9fa; /* Assuming white background for the section */
        }
        
        /* Your h2 and p tags might have different classes, but this is a base style */
        #customer-page h2 {
            font-size: 2.5rem;
            font-weight: 600;
            margin-bottom: 1rem;
        }
        
        #customer-page p {
            font-size: 1.1rem;
            color: #6c757d;
        }
        
        /* --- KODE CSS ANDA --- */
        /* Grid Customer */
        .customer-grid {
            display: grid;
            /* Membuat grid responsif secara otomatis */
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 1.5rem;
        }

        .customer-logo-card {
            background-color: #ffffff;
            border: 1px solid #eef0f3;
            border-radius: 12px;
            /* DIUBAH: Padding sedikit dikurangi agar logo lebih leluasa */
            padding: 1.5rem; 
            display: flex;
            align-items: center;
            justify-content: center;
            height: 120px;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0,0,0,0.03);
            opacity: 0;
            transform: translateY(20px);
        }

        .customer-logo-card.visible {
            animation: fadeInUp 0.5s ease forwards;
        }

        .customer-logo-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 30px rgba(17, 172, 218, 0.1);
            border-color: rgba(17, 172, 218, 0.3);
        }

        .customer-logo-card img {
            /* DIUBAH: Menggunakan max-height dan max-width agar fleksibel */
            max-height: 100%;
            max-width: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
            opacity: 1;
            transition: all 0.3s ease;
        }

        .customer-logo-card:hover img {
            opacity: 0.8;
        }

        /* Animasi Keyframes */
        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        /* --- AKHIR KODE CSS ANDA --- */

        /* Canvas for fireworks effect */
        #confettiCanvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1; 
            pointer-events: none; 
        }
        
        /* Make sure content is above the canvas */
        .container {
            position: relative;
            z-index: 2;
            max-width: 1300px; /* DIUBAH: max-width disesuaikan */
            margin: 0 auto;
            padding: 0 15px;
        }

/* CTA Banner Kecil */
.cta-banner-small {
    padding: 3rem 0;
    background-color: #0A192F;
}
.cta-banner-small .btn-light {
    border-radius: 50px;
    padding: 10px 30px;
    font-weight: 500;
}