/* Atazen Nakliye Fiyat Hesaplama - Frontend Stil Dosyası */

/* Tailwind CSS'in temel stillerini dahil et */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Genel sıfırlama ve temel stiller */
:root {
  --primary-blue: #1e3a8a; /* Ana mavi renk */
  --success-green: #22c55e; /* Başarı mesajları için yeşil */
  --error-red: #ef4444; /* Hata mesajları için kırmızı */
  --teal-accent: #5eead4; /* Form butonu için teal */
}

body {
  @apply bg-gray-100 font-sans text-gray-800;
}

/* Form ve container özelleştirmeleri */
.atazen-nakliye-form {
  @apply transition-all duration-300;
}

.atazen-nakliye-form h2 {
  @apply text-2xl md:text-3xl font-extrabold tracking-tight;
}

/* Form elemanları */
input,
select,
textarea {
  @apply transition-all duration-200 border-gray-300 focus:border-blue-500 focus:ring-blue-500;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  @apply appearance-none;
}

button[type="submit"] {
  @apply transform transition-transform duration-200 hover:scale-105 focus:scale-105;
}

/* Sonuç alanı */
#result .bg-green-100 {
  @apply shadow-sm;
}

#result .bg-red-100 {
  @apply shadow-sm;
}

/* Contact Form Container */
#contact-form-container {
  @apply transition-opacity duration-300 opacity-100;
}

/* WhatsApp ve Contact Form butonları */
#whatsapp-request {
  @apply transform transition-all duration-200 hover:scale-105 focus:scale-105;
}

#contact-form-request {
  @apply transform transition-all duration-200 hover:scale-105 focus:scale-105 !bg-yellow-500 !text-black hover:bg-yellow-600 hover:text-black !important;
}

/* Contact Form 7 ve fallback form stilleri */
.wpcf7-form,
#fallback-contact-form {
  @apply space-y-2;
}

.wpcf7-form p,
#fallback-contact-form div {
  @apply mb-2;
}

.wpcf7-form label,
#fallback-contact-form label {
  @apply block text-sm font-semibold text-gray-700 mb-1 !important;
}

.wpcf7-form input,
.wpcf7-form textarea,
#fallback-contact-form input,
#fallback-contact-form textarea {
  @apply w-full p-2 border rounded-md focus:ring-2 focus:ring-blue-500;
}

.wpcf7-form input[type="submit"],
#fallback-contact-form button[type="submit"] {
  @apply w-full bg-blue-600 text-white py-2 rounded-md font-semibold hover:bg-blue-700;
}

/* Erişilebilirlik için odak stilleri */
:focus-visible {
  @apply outline-none ring-2 ring-blue-500 ring-offset-2;
}

/* Mobil uyumluluk için ek stiller */
@media (max-width: 640px) {
  .atazen-nakliye-form {
    @apply p-4;
  }

  .atazen-nakliye-form h2 {
    @apply text-xl;
  }

  #contact-form-container {
    @apply w-full max-w-[90vw];
  }
}

/* Ek animasyonlar */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Kaydırma çubuğu özelleştirmeleri */
.scrollbar-thin {
  scrollbar-width: thin;
}

.scrollbar-thumb-gray-400 {
  scrollbar-color: #9ca3af #f3f4f6;
}