@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
* { font-family: 'Plus Jakarta Sans', sans-serif; }
html, body, #root { min-height: 100%; margin: 0; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes marquee2 { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
.marquee { animation: marquee 26s linear infinite; }
.marquee2 { animation: marquee2 26s linear infinite; }
.fade-in { animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
[data-tab-panel] { display: none; }
[data-tab-panel].active { display: block; }

/* Smooth scroll untuk area utama */
#scrollArea { scroll-behavior: smooth; }

/* SKELETON LOADER EFFECT */
.skeleton {
  background-color: #e4e4e7; /* zinc-200 */
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}