/* --- Animasi Transisi Testimoni --- */

/* Definisi keyframe untuk efek muncul yang halus (fade-in & slide-up) */
@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Kelas ini bisa dipicu melalui JavaScript jika ingin efek per kartu */
.testimonial-card {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Transisi container saat pergantian konten di script.js */
#testimonial-container {
    transition: opacity 0.4s ease-in-out;
}

/* --- Kustomisasi Native Date Picker --- */

/* Menyelaraskan tampilan input tanggal dengan tema brand-blue (#3B71FE) */
input[type="date"] {
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    color: #181E4B;
    /* brand-dark */
    font-family: inherit;
}

/* Mengganti ikon kalender bawaan browser agar serasi dengan UI */
input[type="date"]::-webkit-calendar-picker-indicator {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%233B71FE" viewBox="0 0 16 16"><path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/></svg>');
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background 0.2s;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
    background-color: rgba(59, 113, 254, 0.1);
    /* brand-blue with opacity */
}

/* --- Gaya Indikator Dots Testimoni --- */

#testimonial-dots button {
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border: none;
    outline: none;
}

/* Efek saat dot aktif (sudah ditangani class w-6 di script.js, di sini kita poles transisinya) */
#testimonial-dots button.bg-brand-blue {
    box-shadow: 0 4px 10px rgba(59, 113, 254, 0.3);
}

#testimonial-dots button:hover:not(.bg-brand-blue) {
    background-color: #cbd5e1;
    /* gray-300 darker */
}

/* --- Perbaikan Global & Aksesibilitas --- */

/* Smooth scroll untuk navigasi anchor yang lebih elegan */
html {
    scroll-behavior: smooth;
}

/* Utilitas untuk menyembunyikan elemen secara visual tapi tetap terbaca Screen Reader */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Custom Scrollbar agar sesuai dengan identitas brand */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f8fafc;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
    border: 2px solid #f8fafc;
}

::-webkit-scrollbar-thumb:hover {
    background: #3B71FE;
    /* brand-blue */
}