/*
 * File CSS Kustom untuk Aplikasi InvoiceKu
 *
 * File ini berisi styling tambahan yang melengkapi Tailwind CSS
 * untuk elemen-elemen interaktif dan efek visual khusus.
 */

/* Efek header saat di-scroll */
.header-scrolled {
    background-color: rgba(13, 13, 13, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom-color: #333333; /* Sesuai dengan brand-border */
}

/* Style untuk komponen FAQ Accordion */
/* Mengatur transisi dan menyembunyikan jawaban secara default */
.faq-answer {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
}

/* Saat item FAQ memiliki class 'open', tampilkan jawabannya */
.faq-item.open .faq-answer {
    max-height: 200px; /* Atur ketinggian maksimal yang cukup */
    opacity: 1;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Mengatur ikon plus/minus pada FAQ */
.faq-item.open .faq-icon-plus {
    display: none;
}

.faq-item .faq-icon-minus {
    display: none;
}

.faq-item.open .faq-icon-minus {
    display: inline;
}

/* Latar belakang grid untuk Hero Section */
.hero-grid-bg {
    background-image:
       linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
       linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
   background-size: 40px 40px;
}