.font-inter {
  font-family: 'Inter', sans-serif;
}
.font-poppins {
  font-family: 'Poppins', sans-serif;
}

/* Modern Gradients */
.gradient-primary {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 50%, #0369a1 100%);
}
.gradient-secondary {
  background: linear-gradient(135deg, #d946ef 0%, #c026d3 50%, #a21caf 100%);
}
.gradient-accent {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #c2410c 100%);
}
.gradient-dark {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}
.gradient-light {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

/* Text Gradients */
.gradient-text-primary {
  background: linear-gradient(135deg, #0ea5e9, #0369a1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-text-secondary {
  background: linear-gradient(135deg, #d946ef, #a21caf);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-text-accent {
  background: linear-gradient(135deg, #f97316, #c2410c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Modern Shadows */
.shadow-modern {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.shadow-modern-lg {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.shadow-glow-primary {
  box-shadow: 0 0 20px rgba(14, 165, 233, 0.3);
}
.shadow-glow-secondary {
  box-shadow: 0 0 20px rgba(217, 70, 239, 0.3);
}

/* Hover Effects */
.hover-lift {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-lift:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
.hover-glow {
  transition: all 0.3s ease;
}
.hover-glow:hover {
  box-shadow: 0 0 30px rgba(14, 165, 233, 0.4);
  transform: translateY(-2px);
}

/* Card Styles */
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.modern-card {
  background: linear-gradient(145deg, #ffffff, #f8fafc);
  border: 1px solid rgba(226, 232, 240, 0.8);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.modern-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
  border-color: rgba(14, 165, 233, 0.3);
}

/* Form Styles */
.form-input {
  transition: all 0.3s ease;
  border: 2px solid #e2e8f0;
}
.form-input:focus {
  border-color: #0ea5e9;
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1);
  outline: none;
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideLeft {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slideRight {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Background Patterns */
.bg-pattern {
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(14, 165, 233, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(217, 70, 239, 0.1) 0%, transparent 50%);
}
.bg-dots {
  background-image: radial-gradient(circle, rgba(14, 165, 233, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Loading Animation */
.animate-pulse-slow {
  animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #0ea5e9, #0369a1);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #0284c7, #075985);
}

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Fonts */
body {
  @apply font-inter bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 min-h-screen;
}

.font-poppins {
  font-family: 'Poppins', sans-serif;
}

/* Gradient Text */
.gradient-text-primary {
  @apply bg-gradient-to-r from-primary-600 to-primary-400 bg-clip-text text-transparent;
}

.gradient-text-secondary {
  @apply bg-gradient-to-r from-secondary-600 to-secondary-400 bg-clip-text text-transparent;
}

.gradient-text-accent {
  @apply bg-gradient-to-r from-accent-600 to-accent-400 bg-clip-text text-transparent;
}

/* Gradient Backgrounds */
.gradient-primary {
  @apply bg-gradient-to-r from-primary-600 to-primary-400;
}

.gradient-secondary {
  @apply bg-gradient-to-r from-secondary-600 to-secondary-400;
}

.gradient-accent {
  @apply bg-gradient-to-r from-accent-600 to-accent-400;
}

.gradient-dark {
  @apply bg-gradient-to-br from-slate-900 to-slate-700;
}

.gradient-light {
  @apply bg-gradient-to-r from-white to-slate-100;
}

/* Modern Card */
.modern-card {
  @apply bg-white/80 backdrop-blur-lg shadow-modern border border-white/20 transition-transform duration-300;
}

/* Hover Effects */
.hover-lift {
  @apply transform hover:-translate-y-2 transition-transform duration-300;
}

.hover-glow {
  @apply hover:shadow-glow-primary;
}

/* Shadow Effects */
.shadow-modern {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.shadow-modern-lg {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.shadow-glow-primary {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

.shadow-glow-secondary {
  box-shadow: 0 0 20px rgba(236, 72, 153, 0.5);
}

.shadow-glow-accent {
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.5);
}

/* Animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes bounceSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes pulseSlow {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

.animate-fade-in-left {
  animation: fadeInLeft 0.6s ease-out forwards;
}

.animate-fade-in-right {
  animation: fadeInRight 0.6s ease-out forwards;
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-bounce-slow {
  animation: bounceSlow 3s ease-in-out infinite;
}

.animate-pulse-slow {
  animation: pulseSlow 4s ease-in-out infinite;
}

/* Form Inputs */
.form-input:focus {
  @apply ring-2 ring-primary-400 outline-none border-primary-400;
}

/* Background Pattern */
.bg-pattern {
  background: linear-gradient(to right, rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.1) 1px, transparent 1px);
  background-size: 40px 40px;
}

.bg-dots {
  background-image: radial-gradient(rgba(255,255,255,0.2) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Navigation Fix for Overlap */
nav .flex.items-center.space-x-4 {
  @apply flex-shrink-0;
}

nav .hidden.md\\:flex.items-center.space-x-8.ml-auto {
  @apply flex-grow justify-end;
}

/* Portfolio Slider Images */
#slider-content img {
  @apply w-full h-[600px] object-contain rounded-2xl;
}

/* Review Section */
#testimoni .modern-card {
  @apply bg-white/90 backdrop-blur-lg shadow-modern p-8 rounded-2xl;
}

#testimoni .modern-card:hover {
  @apply shadow-glow-primary;
}

/* Footer */
footer a:hover {
  @apply text-primary-400;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .modern-card {
    @apply p-6;
  }
  
  #slider-content img {
    @apply h-[400px];
  }
}