:root {
  --bg-color: #121212; /* Warna latar belakang gelap */
  --card-bg: #1e1e1e;
  --text-primary: #ffffff;
  --text-secondary: #b3b3b3;
  --accent-gradient: linear-gradient(135deg, #6e8efb, #a777e3); /* Gradient modern */
}

body {
  background-color: var(--bg-color);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif; /* Font modern yang bersih */
}

/* Memperhalus scrollbar di Windows/Browser Desktop agar terlihat estetik dan sesuai tema hijau */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f8fafc; 
}
::-webkit-scrollbar-thumb {
    background: #a7f3d0; /* Warna hijau muda */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #34d399; /* Warna hijau yang lebih tegas saat di-hover */
}

/* Memastikan tap highlight di iOS/Android tidak muncul kotak abu-abu yang jelek */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Smooth transition untuk menu mobile */
#mobile-menu {
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease-out;
}

/* --- ANIMASI KUSTOM --- */

/* Animasi Melayang (Floating) untuk Gambar/Elemen Visual */
@keyframes floating {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-15px);
    }
    100% {
        transform: translateY(0px);
    }
}

.floating-anim {
    animation: floating 4s ease-in-out infinite;
}

/* --- ANIMASI MASUK (ENTRANCE "WOW" EFFECT) --- */

/* State Awal: Tersembunyi di bawah */
.hero-reveal, .item-reveal {
    opacity: 0;
    transform: translateY(40px);
    /* Menggunakan kurva bezier untuk pergerakan yang sangat mulus (lambat di akhir) */
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* State Akhir: Muncul sempurna saat class 'active' ditambahkan lewat JS */
.hero-reveal.active, .item-reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Menambahkan Delay Berjenjang agar tidak muncul serentak (Staggered) */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

/* Efek Batasi Teks (Truncate) untuk Deskripsi Overlay Gambar */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}