/* =================================================================
   1. GAYA DASAR & FONT
================================================================= */
body {
  /* Praktik Terbaik: Atur font utama di tailwind.config.js */
  font-family: "Poppins", sans-serif;
}

/* =================================================================
   2. KELAS KOMPONEN KUSTOM
================================================================= */

/* --- Latar Belakang Hero --- */
.hero-bg {
  background: linear-gradient(135deg, #01055e 0%, #1e3a8a 50%, #3b82f6 100%);
}

/* --- Bayangan Kartu --- */
.card-shadow {
  /* Alternatif Tailwind: shadow-xl atau definisikan di config */
  box-shadow: 0 10px 30px rgba(1, 5, 94, 0.1);
}

/* --- Efek Hover Link Navigasi --- */
.nav-link {
  position: relative;
  transition: all 0.3s ease;
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: #ff6b35; /* Warna accent */
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* --- Efek Hover Kartu Program --- */
.program-card {
  /* Alternatif Tailwind: transition-transform duration-300 hover:-translate-y-2 */
  transition: all 0.3s ease;
}

.program-card:hover {
  transform: translateY(-8px);
}

/* --- Galeri & Lightbox --- */
.gallery-item {
  transition: all 0.3s ease;
  cursor: pointer;
}

.gallery-item:hover {
  transform: scale(1.05); /* Alternatif Tailwind: hover:scale-105 */
}

.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 1000;
}

.lightbox.active {
  display: flex;
}

/* =================================================================
   3. ANIMASI
================================================================= */

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

.animate-fade-in {
  animation: fadeIn 0.6s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-up {
  animation: slideUp 0.8s ease-out;
}

/* =================================================================
   4. KELAS UTILITAS KUSTOM (Layer Tailwind)
================================================================= */

@layer utilities {
  .text-shadow {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  }
}