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

/* Özel stiller */
.fade-in {
  animation: fadeIn 0.3s ease-in;
}

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

.slide-in {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

/* Form stilleri */
.form-input {
  @apply border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

.btn-primary {
  @apply bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-secondary {
  @apply bg-gray-500 hover:bg-gray-600 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-danger {
  @apply bg-red-500 hover:bg-red-600 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-success {
  @apply bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

/* Tablo stilleri */
.table-header {
  @apply bg-gray-100 border-b border-gray-200 px-4 py-2 text-left text-sm font-medium text-gray-700;
}

.table-cell {
  @apply border-b border-gray-200 px-4 py-2 text-sm text-gray-900;
}

/* Modal stilleri */
.modal-overlay {
  @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
}

.modal-content {
  @apply bg-white rounded-lg shadow-xl max-w-md w-full mx-4 p-6;
}

/* Grid stilleri */
.grid-container {
  @apply grid gap-4 p-4;
}

/* Card stilleri */
.card {
  @apply bg-white rounded-lg shadow-md border border-gray-200 p-4;
}

.card-header {
  @apply border-b border-gray-200 pb-3 mb-3;
}

/* Alert stilleri */
.alert-success {
  @apply bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded;
}

.alert-error {
  @apply bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded;
}

.alert-warning {
  @apply bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 rounded;
}

.alert-info {
  @apply bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded;
}

@layer base {
  html.non-admin-font-scale {
    font-size: 100%;
  }

  html.admin-font-70 {
    font-size: 85%;
  }
}