@import "tailwindcss";

/* ── Tailwind v4 tema tanımları ─────────────────────────── */
@theme {
  --color-brand-50:  #fffbeb;
  --color-brand-100: #fef3c7;
  --color-brand-200: #fde68a;
  --color-brand-300: #fcd34d;
  --color-brand-400: #fbbf24;
  --color-brand-500: #f59e0b;   /* Ana altın */
  --color-brand-600: #d97706;
  --color-brand-700: #b45309;
  --color-brand-800: #92400e;
  --color-brand-900: #78350f;

  --color-dark-900: #0a0a0a;
  --color-dark-800: #111111;
  --color-dark-700: #1a1a1a;
  --color-dark-600: #222222;

  --font-sans: 'Inter', 'Segoe UI', system-ui, sans-serif;

  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;

  --shadow-soft: 0 2px 20px rgba(0,0,0,0.06);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.08);
  --shadow-hover:0 8px 40px rgba(0,0,0,0.12);
}

/* ── Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: #111;
  background: #fafafa;
  -webkit-font-smoothing: antialiased;
}

/* ── Ürün kartı ─────────────────────────────────────────── */
.product-card {
  @apply bg-white rounded-2xl overflow-hidden transition-all duration-300;
  box-shadow: var(--shadow-soft);
}
.product-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}
.product-card img {
  @apply w-full object-cover transition-transform duration-500;
  height: 240px;
}
.product-card:hover img {
  transform: scale(1.05);
}

/* ── Buton ──────────────────────────────────────────────── */
.btn-primary {
  @apply inline-flex items-center justify-center gap-2 px-6 py-3 bg-amber-500 hover:bg-amber-600 text-white font-semibold rounded-xl transition-all duration-200 cursor-pointer select-none;
}
.btn-secondary {
  @apply inline-flex items-center justify-center gap-2 px-6 py-3 bg-gray-900 hover:bg-gray-700 text-white font-semibold rounded-xl transition-all duration-200 cursor-pointer select-none;
}
.btn-outline {
  @apply inline-flex items-center justify-center gap-2 px-6 py-3 border-2 border-amber-500 text-amber-600 hover:bg-amber-500 hover:text-white font-semibold rounded-xl transition-all duration-200 cursor-pointer select-none;
}
.btn-sm { @apply px-4 py-2 text-sm rounded-lg; }
.btn-danger { @apply inline-flex items-center gap-2 px-4 py-2 bg-red-500 hover:bg-red-600 text-white text-sm font-medium rounded-lg transition-colors cursor-pointer; }

/* ── Form ───────────────────────────────────────────────── */
.form-input {
  @apply w-full px-4 py-3 bg-white border border-gray-200 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-amber-400 focus:border-transparent transition-all placeholder:text-gray-400;
}
.form-label { @apply block text-sm font-medium text-gray-700 mb-1.5; }
.form-group { @apply mb-5; }

/* ── Admin sidebar ──────────────────────────────────────── */
.sidebar-link {
  @apply flex items-center gap-3 px-4 py-3 rounded-xl text-sm font-medium text-gray-300 hover:text-white hover:bg-white/10 transition-all duration-200;
}
.sidebar-link.active {
  @apply text-white bg-amber-500/20 text-amber-400;
}

/* ── Badge ──────────────────────────────────────────────── */
.badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold;
}

/* ── Swiper custom ──────────────────────────────────────── */
.swiper-button-next,
.swiper-button-prev {
  @apply !text-white !bg-black/30 !w-10 !h-10 !rounded-full hover:!bg-amber-500 transition-colors;
}
.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 14px !important;
  font-weight: 700;
}
.swiper-pagination-bullet-active { @apply !bg-amber-500; }

/* Hero slider pagination */
.hero-pagination .swiper-pagination-bullet {
  width: 24px !important;
  height: 4px !important;
  border-radius: 9999px !important;
  background: rgba(255,255,255,0.3) !important;
  opacity: 1 !important;
  margin: 0 3px !important;
  transition: all 0.3s ease !important;
}
.hero-pagination .swiper-pagination-bullet-active {
  width: 40px !important;
  background: #f59e0b !important;
}

/* ── Image zoom ─────────────────────────────────────────── */
.zoom-lens {
  position: absolute;
  border: 2px solid #f59e0b;
  cursor: crosshair;
  background-repeat: no-repeat;
  background-color: white;
  pointer-events: none;
  z-index: 10;
}

/* ── Breadcrumb ─────────────────────────────────────────── */
.breadcrumb li:not(:last-child)::after {
  content: '/';
  @apply mx-2 text-gray-400;
}

/* ── Skeleton loader ────────────────────────────────────── */
.skeleton {
  @apply animate-pulse bg-gray-200 rounded;
}

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #d4a017; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #b8860b; }

/* ── Utility ────────────────────────────────────────────── */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.aspect-product { aspect-ratio: 4/3; }
.aspect-hero    { aspect-ratio: 16/6; }