@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

/* Animasi untuk komponen Hero */
@keyframes float {
  0% {
    transform: translateY(0px) rotate(-5deg);
  }
  50% {
    transform: translateY(-10px) rotate(0deg);
  }
  100% {
    transform: translateY(0px) rotate(5deg);
  }
}

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

.animate-fadeIn {
  animation: fadeIn 0.3s ease-out forwards;
}

/* Padding atas untuk Navbar fixed */
.pt-navbar {
  padding-top: 4rem;
}

/* Add your custom scrollbar styles here */
@layer utilities {
  /* Styling untuk scrollbar */
  .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #4f46e5 #1f2937;
  }

  .custom-scrollbar::-webkit-scrollbar {
    width: 8px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: #1f2937;
    border-radius: 8px;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #4f46e5, #7e22ce);
    border-radius: 8px;
    border: 2px solid #1f2937;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #6366f1, #a855f7);
  }
}

@layer base {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

@layer components {
  /* Custom Scrollbar Styling */
  .custom-scrollbar::-webkit-scrollbar {
    width: 6px;
  }
  
  .custom-scrollbar::-webkit-scrollbar-track {
    background: #0a0f1d;
    border-radius: 10px;
  }
  
  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #3b82f6;
    border-radius: 10px;
  }
  
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #2563eb;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}