/* ============================================
   CSS VARIABLES
============================================ */

:root {
    /* PRIMARY BRAND */
    --primary:      #2563EB;
    --primary-soft: #DBEAFE;
    --primary-dark: #1E40AF;

    /* ECO SECONDARY */
    --eco:          #10B981;
    --eco-soft:     #D1FAE5;

    /* BACKGROUND */
    --bg-main:      #F8FAFC;
    --bg-section:   #EEF2F7;

    /* TEXT */
    --text-main:    #1E293B;
    --text-muted:   #64748B;

    /* BORDER */
    --border-soft:  #CBD5E1;

    /* SEMANTIC */
    --success:      #16A34A;
    --warning:      #F59E0B;
    --danger:       #DC2626;
    --info:         #0284C7;
}


/* ============================================
   BOOTSTRAP OVERRIDES
============================================ */

/* Body */
body {
    background-color: var(--bg-main);
    color: var(--text-main);
}

/* Update class .btn-primary kamu menjadi seperti ini */
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);

    /* Kunci kehalusan animasi */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

/* Efek saat Hover (Kursor di atas tombol) & Focus */
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);

    /* Tombol sedikit naik ke atas (2px) dan membesar tipis */
    transform: translateY(-2px) scale(1.02);

    /* Memberikan efek bayangan lembut di bawah tombol */
    box-shadow: 0 7px 14px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
}

/* Efek saat Tombol Diklik (Active) */
.btn-primary:active {
    /* Tombol kembali turun kebawah memberikan efek "membal" */
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

/* Eco / Success */
.btn-outline-success {
    color: var(--eco);
    border-color: var(--eco);
}

.btn-outline-success:hover {
    background-color: var(--eco);
    border-color: var(--eco);
}

.text-success { color: var(--eco) !important; }
.bg-success   { background-color: var(--eco) !important; }

/* Subtle backgrounds */
.bg-primary-subtle { background-color: var(--primary-soft) !important; }
.bg-success-subtle { background-color: var(--eco-soft) !important; }

/* Text muted */
.text-secondary { color: var(--text-muted) !important; }
.text-muted     { color: var(--text-muted) !important; }

/* Section backgrounds */
.bg-light { background-color: var(--bg-section) !important; }

/* Border */
.border { border-color: var(--border-soft) !important; }

/* Semantic */
.text-danger             { color: var(--danger) !important; }
.text-warning-emphasis   { color: var(--warning) !important; }
.text-info               { color: var(--info) !important; }

/* Navbar */
.navbar { border-color: var(--border-soft) !important; }

/* Card */
.card { border-color: var(--border-soft); }

.custom-card-shadow {
    /* Menggunakan kombinasi warna hitam transparan yang sangat lembut */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.custom-card-shadow:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

/* Animasi Hover untuk Kartu Produk */
.product-card {
    cursor: pointer;
}

.product-card:hover {
    transform: translateY(-4px); /* Mengangkat kartu sedikit ke atas */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); /* Memberikan efek bayangan lembut */
    background-color: rgba(var(--bg-section), 0.8) !important; /* Sedikit interaksi warna jika diinginkan */
}

/* Animasi mikro pada ikon saat kartu di-hover */
.product-card:hover .flex-shrink-0 i {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

.hover-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
}

.hover-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important;
}

/* Efek animasi hover yang halus */
.feature-card {
    transition: all 0.3s ease-in-out;
    background-color: var(--bg-section); /* Mengikuti tema */
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
    background-color: #FFFFFF !important; /* Berubah jadi putih saat di-hover */
}

/* Menimpa warna bawaan Bootstrap saat tombol dalam kondisi tertutup (collapsed) */
.accordion-item .accordion-button.collapsed {
    background-color: var(--bg-section) !important;
    color: var(--text-main) !important;
}

/* Menimpa warna bawaan Bootstrap saat tombol dalam kondisi terbuka (tidak collapsed) */
.accordion-item .accordion-button:not(.collapsed) {
    background-color: var(--primary-soft) !important; /* Warna saat diklik */
    color: var(--primary) !important;
    box-shadow: none !important;
}

/* Memastikan tidak ada warna biru aneh saat tombol difokuskan/diklik */
.accordion-button:focus {
    box-shadow: none !important;
    border-color: transparent !important;
}

/* ── FOTO PREVIEW ── */
.foto-preview-item {
    position: relative;
    width: 90px;
    height: 90px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-soft);
}

.foto-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.foto-preview-item .btn-hapus {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: rgba(220, 38, 38, 0.85);
    color: white;
    border: none;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 1;
}


/* ============================================
   STEP CIRCLES
============================================ */

.step-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--border-soft);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    transition: all 0.3s ease;
}

.step-circle.active {
    background-color: var(--primary);
    color: white;
    box-shadow: 0 0 0 4px var(--primary-soft);
}

.step-circle.done {
    background-color: var(--eco);
    color: white;
}


/* ============================================
   FORM STEP TRANSITION
============================================ */

.form-step {
    display: none;
    animation: fadeSlideIn 0.4s ease;
}

.form-step.active {
    display: block;
}


/* ============================================
   MENU NAVIGASI
============================================ */

.custom-nav-link {
    color: #4a5568 !important; /* Warna text default (abu-abu/secondary) */
    font-weight: 600;          /* Sama dengan fw-semibold */
    position: relative;
    padding-bottom: 4px;
    transition: color 0.3s ease;
}

/* Efek saat Hover dan saat Menu Active (Teks berubah jadi biru) */
.custom-nav-link:hover,
.custom-nav-link.active {
    color: #0d6efd !important; /* Warna biru Bootstrap (bisa diganti sesuai seleramu) */
}

/* Membuat garis bawah (underline) menggunakan pseudo-element */
.custom-nav-link::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0); /* Default: garis tidak terlihat (skala 0) */
    height: 2px;          /* Ketebalan garis bawah */
    bottom: 0;
    left: 0;
    background-color: #0d6efd; /* Warna garis bawah biru */
    transform-origin: bottom left;
    transition: transform 0.25s ease-out; /* Animasi bergeser/tumbuh */
}

/* Jalankan animasi garis memanjang saat di-hover ATAU saat halaman sedang aktif */
.custom-nav-link:hover::after,
.custom-nav-link.active::after {
    transform: scaleX(1); /* Garis memanjang penuh (skala 1) */
}


/* ============================================
   NAV TAB TENTANG
============================================ */

.nav-tab-item:hover {
    background-color: var(--bg-section);
    color: var(--primary) !important;
}

.nav-tab-item.active {
    background-color: var(--primary-soft);
    color: var(--primary) !important;
    font-weight: 600 !important;
}

/* Sembunyikan scrollbar horizontal nav tab */
.overflow-auto::-webkit-scrollbar {
    display: none;
}

/* ════════════════════════════════════════
   TOMBOL INTRO — ANIMASI & INTERAKTIF
════════════════════════════════════════ */

/* Ripple effect */
.btn-kontribusi::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
    opacity: 0;
}

.btn-kontribusi:active::after {
    width: 300px;
    height: 300px;
    opacity: 0;
}

/* Hover kontribusi */
.btn-kontribusi:hover {
    background-color: var(--primary-dark) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35) !important;
    color: white !important;
}

.btn-kontribusi:active {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
}

/* Hover pelajari */
.btn-pelajari {
    background-color: var(--eco) !important;
    border-color: var(--eco) !important;
    color: white !important;
    animation: pulse-eco 2s ease 1.3s 3;
}

.btn-pelajari:hover {
    background-color: #0da271 !important;
    border-color: #0da271 !important;
    color: white !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3) !important;
}

.btn-pelajari:active {
    transform: translateY(-1px) !important;
}


/* Pulse animation pada btn kontribusi saat pertama load */
@keyframes pulse-eco {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
    70%  { box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.btn-kontribusi {
    animation: pulse-primary 2s ease 1s 3;
}

/* Responsive */
@media (max-width: 576px) {
    .btn-kontribusi,
    .btn-pelajari {
        width: 100% !important;
        justify-content: center !important;
        font-size: 0.95rem !important;
        padding: 12px 24px !important;
    }
}

/* ============================================
   ANIMATIONS
============================================ */

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* ============================================
   RESPONSIVE
============================================ */

@media (max-width: 576px) {
    #hero h1 {
        font-size: 1.8rem;
    }

    #hero .fs-5 {
        font-size: 1rem !important;
    }
}