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

:root {
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-cream-50 text-cocoa-800 font-body antialiased;
  }

  h1,
  h2,
  h3 {
    @apply font-display text-cocoa-900;
  }

  ::selection {
    @apply bg-gold-400/30;
  }
}

@layer components {
  .container-page {
    @apply mx-auto w-full max-w-page px-5 sm:px-8;
  }

  .eyebrow {
    @apply font-body text-[0.72rem] font-medium uppercase tracking-[0.28em] text-gold-600;
  }

  .rule {
    @apply inline-block h-px w-10 bg-gold-500/60 align-middle;
  }

  .btn {
    @apply inline-flex items-center justify-center gap-2 rounded-full px-6 py-3 text-sm font-medium
           tracking-wide transition-all duration-200 focus:outline-none focus-visible:ring-2
           focus-visible:ring-gold-500 focus-visible:ring-offset-2 focus-visible:ring-offset-cream-50;
  }

  .btn-primary {
    @apply btn bg-cocoa-800 text-cream-100 shadow-soft hover:bg-cocoa-900 hover:shadow-lift;
  }

  .btn-outline {
    @apply btn border border-cocoa-800/25 text-cocoa-800 hover:border-cocoa-800/60 hover:bg-cocoa-800/5;
  }

  .btn-gold {
    @apply btn bg-gold-500 text-white shadow-soft hover:bg-gold-600 hover:shadow-lift;
  }

  .card {
    @apply rounded-2xl border border-cocoa-800/10 bg-white/70 shadow-soft backdrop-blur-sm;
  }

  .field-label {
    @apply mb-1.5 block text-xs font-medium uppercase tracking-wider text-cocoa-600;
  }

  .field {
    @apply w-full rounded-xl border border-cocoa-800/15 bg-white px-4 py-2.5 text-sm text-cocoa-900
           placeholder:text-cocoa-400/70 focus:border-gold-500 focus:outline-none focus:ring-2
           focus:ring-gold-400/25;
  }

  .admin-link {
    @apply flex items-center gap-3 rounded-xl px-3.5 py-2.5 text-sm font-medium text-cream-200/70
           transition-colors hover:bg-white/10 hover:text-cream-100;
  }

  .admin-link-active {
    @apply bg-white/15 text-cream-50;
  }
}

/* Ince, markayla uyumlu kaydirma cubugu */
@supports (scrollbar-width: thin) {
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(185, 138, 60, 0.45) transparent;
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.animate-fade-up {
  animation: fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}