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

/* --- LOADER --- */
#loader {
  position: fixed;
  inset: 0;
  background: linear-gradient(to bottom right, #0f172a, #1e3a8a);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
#loader.hidden {
  opacity: 0;
  visibility: hidden;
}

.loader-text {
  font-size: 1.8rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 3px;
  animation: fadeIn 1.5s ease forwards;
}

.loader-line {
  width: 120px;
  height: 2px;
  background: linear-gradient(to right, #60a5fa, #3b82f6, #1d4ed8);
  margin-top: 12px;
  border-radius: 2px;
  animation: shimmer 1.8s ease-in-out infinite;
}

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

@keyframes shimmer {
  0% { transform: scaleX(0); transform-origin: left; }
  50% { transform: scaleX(1); transform-origin: left; }
  100% { transform: scaleX(0); transform-origin: right; }
}

/* Scroll to Top Button */
#scrollToTopBtn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #2563eb;
  color: white;
  border: none;
  padding: 12px 15px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 1000;
}
#scrollToTopBtn.show {
  opacity: 1;
  transform: translateY(0);
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.animate-fadeIn {
  animation: fadeIn 0.3s ease-out;
}

/* Animasi muncul + efek neon pulse */
#scrollToTopBtn {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 1000;
  animation: neonPulse 3s infinite ease-in-out;
}

#scrollToTopBtn.show {
  opacity: 1;
  transform: translateY(0);
}

@keyframes neonPulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(34,211,238,0.4), 0 0 35px rgba(236,72,153,0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(34,211,238,0.7), 0 0 70px rgba(236,72,153,0.6);
  }
}

/* Glow aura tambahan di belakang tombol */
#scrollToTopBtn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: radial-gradient(circle at 50% 50%, rgba(236,72,153,0.3), transparent 70%);
  filter: blur(8px);
  z-index: -1;
  transition: opacity 0.3s ease;
}

#scrollToTopBtn:hover::after {
  opacity: 1;
}

/* --- Scroll to Top Button: robustness overrides --- */
#scrollToTopBtn {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.2s ease;
  z-index: 1000;
  visibility: hidden;
  pointer-events: none;
}

#scrollToTopBtn.show {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

#scrollToTopBtn[aria-hidden="true"] {
  visibility: hidden;
  pointer-events: none;
}
#scrollToTopBtn[aria-hidden="false"] {
  visibility: visible;
  pointer-events: auto;
}

/* v5 - Futuristic Glow Theme */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

#loader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  background: linear-gradient(135deg,#07102b,#0f172a,#0b2847);
  background-size: 300% 300%;
  animation: gradientShift 6s ease infinite;
}

.loader-inner {
  text-align: center;
  color: white;
}

.loader-logo {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 28px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.08), transparent 20%);
  box-shadow: 0 0 30px rgba(59,130,246,0.18), 0 0 60px rgba(124,58,237,0.08);
  animation: logoPulse 2s infinite;
}

@keyframes logoPulse {
  0% { transform: scale(0.98); box-shadow: 0 0 20px rgba(59,130,246,0.12); }
  50% { transform: scale(1.06); box-shadow: 0 0 40px rgba(59,130,246,0.28); }
  100% { transform: scale(0.98); box-shadow: 0 0 20px rgba(59,130,246,0.12); }
}

.loader-text { margin-top: 10px; font-weight:600; letter-spacing:2px; color:#dbeafe; }

/* Scroll to top fancy */
#scrollToTopBtn {
  width:58px; height:58px; border-radius:50%;
  background: linear-gradient(135deg,#06b6d4,#7c3aed);
  box-shadow: 0 8px 30px rgba(124,58,237,0.25), 0 2px 10px rgba(6,182,212,0.12);
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s;
  display:flex; align-items:center; justify-content:center;
}
#scrollToTopBtn.show { animation: bounceIn 0.6s ease; transform: none; }
#scrollToTopBtn:hover { transform: translateY(-6px) scale(1.05); box-shadow: 0 12px 40px rgba(124,58,237,0.35); }
@keyframes bounceIn {
  0% { transform: translateY(40px) scale(.8); opacity:0; }
  60% { transform: translateY(-8px) scale(1.05); opacity:1; }
  100% { transform: translateY(0) scale(1); }
}

/* Reveal */
.reveal { opacity:0; transform: translateY(30px); transition: all 0.8s cubic-bezier(.2,.9,.2,1); }
.reveal.fade-in-up { opacity:1; transform: translateY(0); }

/* Hero typing */
#typing { color: rgba(219,234,254,0.95); font-weight:600; }

/* Modal fade-in */
.modal-content { animation: modalFadeIn .28s ease both; }
@keyframes modalFadeIn { from { opacity: 0; transform: translateY(8px) scale(.995); } to { opacity:1; transform: translateY(0) scale(1); } }

/* Modal overlay */
.modal-overlay { background: rgba(0,0,0,0.65); position: fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:50; }

/* Scroll-to-top button */
#scrollToTopBtn { width:58px; height:58px; border-radius:50%; background: linear-gradient(135deg,#06b6d4,#7c3aed); box-shadow:0 8px 30px rgba(124,58,237,0.25); display:flex; align-items:center; justify-content:center; color:white; border:none; position:fixed; right:24px; bottom:24px; z-index:1000; transform: translateY(40px); opacity:0; transition: all .35s ease; }
#scrollToTopBtn.show { transform: translateY(0); opacity:1; animation: bounceIn .6s ease; }
#scrollToTopBtn:hover { transform: translateY(-10px) scale(1.05); box-shadow:0 12px 40px rgba(124,58,237,0.35); }
@keyframes bounceIn { 0%{transform:translateY(40px) scale(.8); opacity:0;}60%{transform:translateY(-8px) scale(1.05); opacity:1;}100%{transform:translateY(0) scale(1);} }

/* --- FIX: Tombol Close Modal --- */
button[onclick^="closeModal"] {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  line-height: 1;
  color: #6b7280;
  transition: color 0.2s ease;
}
button[onclick^="closeModal"]:hover {
  color: #000;
}

/* --- FIX: Card Icon supaya bulat sempurna --- */
#core .bg-white .p-4.rounded-full {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}