:root {
  --primary: #154734; /* Hijau tua */
  --secondary: #1b5e20; /* Hijau lebih muda untuk variasi */
  --accent: #d0922d; /* Kuning emas */
  --dark: #1e293b; /* Warna teks/kontras */
  --light: #f8fafc; /* Warna latar terang */
}

body {
  font-family: "Poppins", sans-serif;
  scroll-behavior: smooth;
}

.nav-link::after {
  background-color: var(--accent);
}

.hero {
  min-height: 80vh; /* atau 70vh */
}

.hero {
  background: linear-gradient(rgba(21, 71, 52, 0.85), rgba(21, 71, 52, 0.85)),
    url("https://storage.googleapis.com/workspace-0f70711f-8b4e-4d94-86f1-2a93ccde5887/image/d4358573-9e4a-4c9e-ba58-e84a82d090b6.png")
      no-repeat center center/cover;
}

.facility-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
  border-bottom: 4px solid var(--accent);
}

.news-card:hover {
  transform: scale(1.03);
  border-color: var(--accent);
}

.loading-bar {
  background: var(--accent);
}

/* Animasi Fade + Slide */
@keyframes fadeSlide {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-slide {
  animation: fadeSlide 1s ease-out forwards;
}

/* Delay opsional biar lebih natural */
.delay-100 {
  animation-delay: 0.1s;
}
.delay-300 {
  animation-delay: 0.3s;
}
.delay-500 {
  animation-delay: 0.5s;
}
.delay-700 {
  animation-delay: 0.7s;
}

/* partner logo */
.partner-logo {
  @apply h-12 object-contain opacity-70 transition;
}

.partner-logo:hover {
  opacity: 1;
}

/* Timeline scale animation */
@keyframes scaleY {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}
.animate-scale-y {
  animation: scaleY 1s forwards;
}

/* Icon rotate animation */
@keyframes rotateIn {
  from {
    transform: rotate(-200deg) scale(0.3);
    opacity: 0;
  }
  to {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
}
.rotate-animate {
  display: inline-block;
  animation: rotateIn 1s ease forwards;
}

/* Animasi scaleY untuk garis timeline */
@keyframes scale-y {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

.animate-scale-y {
  animation: scale-y 1s ease forwards;
}

/* Timeline responsive untuk mobile */
@media (max-width: 640px) {
  #sejarah article {
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  #sejarah article > div {
    order: unset !important;
    text-align: center !important;
    padding: 0 !important;
  }

  #sejarah article .text-2xl {
    margin-bottom: 0.5rem;
  }
}

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

.animate-gradient {
  background-size: 200% 200%;
  animation: gradient-move 3s ease infinite;
}

/* Tambahan style khusus kalender */
#calendarDates div {
  transition: all 0.2s ease-in-out;
}

#calendarDates div:hover {
  transform: scale(1.1);
}

/* Sambutan Custom Styling */

/* Efek halus saat hover card */
#sambutan .hover\:shadow-2xl:hover {
  transform: translateY(-4px);
  transition: all 0.3s ease-in-out;
}

/* Gaya teks utama */
#sambutan h2 {
  letter-spacing: 0.5px;
}

/* Foto rektor border animasi */
#sambutan .border-[#154734] {
  box-shadow: 0 0 20px rgba(21, 71, 52, 0.2);
}

/* Custom tombol cepat */
.quick-btn {
  background-color: #bbf7d0; /* bg-green-200 */
  color: #14532d; /* text-green-900 */
  padding: 0.25rem 0.75rem; /* px-3 py-1 */
  border-radius: 0.5rem; /* rounded-lg */
  font-size: 0.875rem; /* text-sm */
  transition: background-color 0.3s ease;
}

.quick-btn:hover {
  background-color: #86efac; /* hover:bg-green-300 */
}

/* Video background agar fullscreen center */
.video-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.78vh; /* rasio 16:9 */
  height: 100vh;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
}

/* Overlay hijau transparan */
.overlay {
  background-color: rgba(21, 71, 52, 0.3); /* #154734 dengan 30% opacity */
}

/* Tombol CTA */
.cta-btn {
  background-color: #10b981;
  color: white;
  font-weight: bold;
  padding: 0.75rem 2rem;
  border-radius: 9999px;
  transition: 0.3s;
  display: inline-block;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.cta-btn:hover {
  background-color: #059669;
  transform: scale(1.05);
}

/* Tombol mute/unmute */
.mute-btn {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 30;
  background: rgba(0, 0, 0, 0.5);
  padding: 0.75rem;
  border-radius: 9999px;
  transition: background 0.3s;
}
.mute-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}