/* ======================================================================
            FILE: assets/css/style.css (VERSI PROFESIONAL)
   ======================================================================
   Deskripsi: File ini berisi styling kustom dengan palet warna baru
              dan animasi yang disempurnakan untuk tampilan yang lebih
              elegan dan modern.
   ====================================================================== */

/* ======================================================
   1. PALET WARNA PROFESIONAL & VARIABEL TEMA
   ====================================================== */
:root {
    /* Variabel untuk Warna (Mode Terang) - Tema Natural & Elegan */
    --bg-primary: #FDFCF9;      /* Krem sangat muda, memberikan kesan hangat */
    --bg-secondary: #FFFFFF;    /* Putih bersih untuk kartu dan elemen utama */
    --text-primary: #2D2C2A;    /* Abu-abu hangat, lebih lembut dari hitam pekat */
    --text-secondary: #6B6A68;  /* Abu-abu medium untuk teks pendukung */
    --accent-primary: #4A7C59;  /* Hijau daun yang tenang dan mewah */
    --accent-hover: #3A6347;   /* Hijau lebih gelap untuk efek hover */
    --border-color: #F0EFEA;    /* Warna border yang sangat halus */

    /* Variabel untuk transisi & bayangan yang lebih lembut */
    --transition-fast: 200ms;
    --transition-medium: 300ms;
    --shadow-sm: 0 1px 2px 0 rgb(45 44 42 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(45 44 42 / 0.07), 0 2px 4px -2px rgb(45 44 42 / 0.07);
    --shadow-lg: 0 10px 15px -3px rgb(45 44 42 / 0.1), 0 4px 6px -4px rgb(45 44 42 / 0.1);
}

html.dark {
    /* Variabel untuk Warna (Mode Gelap) - Tema Hangat & Nyaman */
    --bg-primary: #1C1B1A;      /* Abu-abu sangat gelap dengan sentuhan hangat */
    --bg-secondary: #2A2927;    /* Abu-abu gelap untuk kartu */
    --text-primary: #EAE8E3;    /* Krem muda untuk teks utama */
    --text-secondary: #A09E9B;  /* Abu-abu terang untuk teks sekunder */
    --accent-primary: #86B996;  /* Hijau sage yang cerah di mode gelap */
    --accent-hover: #A3CBAF;   /* Hijau lebih cerah untuk hover */
    --border-color: #3A3937;    /* Warna border gelap yang halus */
}

/* ======================================================
   2. DEFINISI ANIMASI (KEYFRAMES)
   ====================================================== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-effect {
    0%, 100% { box-shadow: 0 0 0 0 rgba(74, 124, 89, 0.7); }
    70% { box-shadow: 0 0 0 12px rgba(74, 124, 89, 0); }
}

html.dark @keyframes pulse-effect {
    0%, 100% { box-shadow: 0 0 0 0 rgba(134, 185, 150, 0.7); }
    70% { box-shadow: 0 0 0 12px rgba(134, 185, 150, 0); }
}

@keyframes gradient-text-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ======================================================
   3. GAYA UNTUK KOMPONEN SPESIFIK
   ====================================================== */

/* --- Tombol (Buttons) --- */
.btn-animated {
    display: inline-block;
    padding: 0.75rem 1.75rem;
    border-radius: 9999px;
    font-weight: bold;
    color: white;
    background-color: var(--accent-primary);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-medium) ease;
    border: 2px solid transparent;
}

.btn-animated:hover {
    background-color: var(--accent-hover);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.btn-animated.btn-cta {
    animation: pulse-effect 2.5s infinite;
}


/* --- Kartu Produk (Product Cards) --- */
.product-card-enhanced {
    background-color: var(--bg-secondary);
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all var(--transition-medium) ease-in-out;
}

.product-card-enhanced:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent-primary);
}

.product-card-enhanced .product-image {
    transition: transform var(--transition-medium) ease;
}

.product-card-enhanced:hover .product-image {
    transform: scale(1.05);
}


/* --- Accordion FAQ --- */
.faq-item-enhanced {
    border: 1px solid var(--border-color);
    transition: all var(--transition-medium) ease;
}

.faq-item-enhanced:hover {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-md);
}

.faq-item-enhanced .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding 0.5s ease;
    padding: 0 1.5rem;
}

.faq-item-enhanced.open {
    border-color: var(--accent-primary);
}

.faq-item-enhanced.open .faq-answer {
    max-height: 500px;
    padding: 0.5rem 1.5rem 1.5rem 1.5rem;
}

.faq-item-enhanced .faq-icon {
    transition: transform var(--transition-medium) ease;
    color: var(--text-secondary);
}

.faq-item-enhanced.open .faq-icon {
    transform: rotate(180deg);
    color: var(--accent-primary);
}


/* --- Judul dengan Gradien Animasi --- */
.gradient-text-animated {
    background: linear-gradient(90deg, var(--accent-primary), #a88a6a, #6e8a8e, var(--accent-primary));
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-text-animation 15s ease infinite;
    font-weight: 900;
}

/* ======================================================
   4. KELAS BANTUAN (UTILITY) UNTUK ANIMASI
   ====================================================== */
.animate-on-load {
    opacity: 0;
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.delay-1 { animation-delay: 0.15s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.45s; }