@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800&display=swap');

* { font-family: 'Plus Jakarta Sans', sans-serif; }
html { scroll-behavior: smooth; }
body { font-family: 'Plus Jakarta Sans', sans-serif; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #f0f0f0; }
::-webkit-scrollbar-thumb { background: #00ADB5; border-radius: 4px; }

@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ken-burns {
  0% { transform: scale(1); }
  100% { transform: scale(1.06); }
}

.animate-pulse-ring { animation: pulse-ring 1.8s ease-out infinite; }
.animate-fade-up { animation: fade-up 0.6s ease-out forwards; }
.animate-ken-burns { animation: ken-burns 8s ease-in-out alternate infinite; }
.delay-300 { animation-delay: 0.3s; }

.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Hero slide fade */
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; z-index: 0; }
.hero-slide.active { opacity: 1; z-index: 1; }

/* Simple hover-lift helper (dipakai lewat class, pengganti onMouseEnter/Leave React) */
.hover-lift { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.hover-lift:hover { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(0,173,181,0.12); border-color: #00ADB5 !important; }

.hover-lift-sm:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.1); }

.btn-cyan { background: #00ADB5; color: #fff; transition: background .2s ease, transform .2s ease; }
.btn-cyan:hover { background: #008a91; }