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

/* Temel animasyonlar */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

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

/* Özel sınıflar */
.animate-fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

.animate-pulse-slow {
  animation: pulse 3s infinite;
}

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

/* Geçiş efektleri */
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

/* Özel utility katmanları */
@layer utilities {
  /* Özel scrollbar stilleri */
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-thin::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  .scrollbar-thin::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
}

/* Özel component katmanları */
@layer components {
  /* Özel gradientler */
  .bg-gradient-primary {
    background: linear-gradient(135deg, #0071c2 0%, #00a5e5 100%);
  }

  .bg-gradient-secondary {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
  }

  /* Özel yazı stilleri */
  .text-booking-title {
    font-weight: 700;
    letter-spacing: -0.025em;
  }

  .text-booking-subtitle {
    font-weight: 500;
    letter-spacing: -0.01em;
  }

  /* Özel buton stilleri */
  .btn-booking {
    @apply px-4 py-2 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 transition-colors;
  }

  .btn-booking-outline {
    @apply px-4 py-2 border border-blue-600 text-blue-600 font-medium rounded-md hover:bg-blue-50 transition-colors;
  }

  /* Özel kart stilleri */
  .card-booking {
    @apply bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-booking hover:shadow-booking-hover transition-all;
  }

  /* Özel input stilleri */
  .input-booking {
    @apply w-full border-gray-300 dark:border-gray-700 focus:border-blue-500 focus:ring-blue-500 rounded-md shadow-sm;
  }

  /* Özel badge stilleri */
  .badge-booking {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300;
  }

  /* Özel container stilleri */
  .container-booking {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* Özel grid stilleri */
  .grid-booking {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6;
  }

  /* Özel header stilleri */
  .header-booking {
    @apply sticky top-0 z-50 bg-white dark:bg-gray-900 shadow-sm;
  }

  /* Özel footer stilleri */
  .footer-booking {
    @apply bg-gray-100 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800;
  }

  /* Özel hero stilleri */
  .hero-booking {
    @apply relative bg-blue-800 dark:bg-gray-900 text-white py-16 md:py-24;
  }

  /* Özel section stilleri */
  .section-booking {
    @apply py-12 md:py-16;
  }

  /* Özel loading stilleri */
  .loading-booking {
    @apply flex items-center justify-center p-4;
  }

  .loading-booking-dot {
    @apply w-2 h-2 mx-1 bg-blue-600 dark:bg-blue-500 rounded-full animate-pulse;
  }

  /* Özel tooltip stilleri */
  .tooltip {
    @apply relative inline-block;
  }

  .tooltip .tooltip-text {
    @apply invisible absolute z-50 p-2 bg-gray-900 text-white text-xs rounded-md opacity-0 transition-opacity;
    width: 120px;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
  }

  .tooltip:hover .tooltip-text {
    @apply visible opacity-100;
  }
}