/* 1. Hilangkan lingkaran bawaan Slick agar tidak merusak tampilan */
.testimonial-slider .slick-dots li button:before {
    display: none !important;
}

/* 2. Mengatur pembungkus dot (li) agar lebarnya dinamis dan TIDAK OVERLAP */
.testimonial-slider .slick-dots li {
    margin: 0 6px;              /* Jarak aman antar kapsul kiri-kanan */
    width: auto !important;     /* Memaksa lebar mengikuti tombol di dalamnya */
    height: auto !important;    /* Memaksa tinggi mengikuti tombol di dalamnya */
    display: inline-block !important;
}

/* 3. Mengubah bentuk tombol dot utama menjadi lingkaran kecil (saat tidak aktif) */
.testimonial-slider .slick-dots li button {
    width: 20px;                /* Lebar lingkaran saat tidak aktif */
    height: 20px;               /* Tinggi lingkaran saat tidak aktif */
    background: #cccccc;        /* Warna abu-abu saat tidak aktif */
    border-radius: 50% !important; /* Memastikan bulat sempurna saat tidak aktif */
    padding: 0;
    font-size: 0;               /* Menghilangkan teks angka bawaan Slick */
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Animasi melar lebih halus */
}

/* 4. Membuat dot yang sedang aktif otomatis memanjang menjadi kapsul */
.testimonial-slider .slick-dots li.slick-active button {
    width: 50px;                /* Lebar memanjang saat aktif */
    border-radius: 24px !important; /* Mengubah bulat menjadi bentuk kapsul modern */
    background: #0056b3;        /* Warna biru tombol Lanjut Anda */
}