/* =====================================================================
   E-TİCARET PAKETİ — ULTRA-PREMIUM DESIGN SYSTEM
   Material Design 3 İlhamli | Google-Seviye Ton Geçişleri
   ===================================================================== */

:root {
  /* ═══════════════════════════════════════════════════════════════
     PREMIUM RENK SİSTEMİ
     Her rengin 50-950 arası tonları mevcut (hassas geçişler)
     ═══════════════════════════════════════════════════════════════ */

  /* ── NEUTRAL (Gri Ailesi — Zemin & Metin) ── */
  --neutral-0: #FFFFFF;
  --neutral-25: #FCFCFD;
  --neutral-50: #F9FAFB;
  --neutral-100: #F3F4F6;
  --neutral-200: #E5E7EB;
  --neutral-300: #D1D5DB;
  --neutral-400: #9CA3AF;
  --neutral-500: #6B7280;
  --neutral-600: #4B5563;
  --neutral-700: #374151;
  --neutral-800: #1F2937;
  --neutral-900: #111827;
  --neutral-950: #030712;

  /* ── WARM NEUTRAL (Sıcak Gri — Marka Sıcaklığı) ── */
  --warm-50: #FDFBF9;
  --warm-100: #F9F5F0;
  --warm-200: #F0E9E0;
  --warm-300: #E2D5C5;
  --warm-400: #C4AD93;
  --warm-500: #A38B6E;
  --warm-600: #7C6A52;
  --warm-700: #5C4D3C;
  --warm-800: #3D3328;
  --warm-900: #241E16;

  /* ── PRIMARY (Marka Rengi — Rafine Amber/Bronz) ── */
  --primary-50: #FEF9F3;
  --primary-100: #FDF0E1;
  --primary-200: #FADCBA;
  --primary-300: #F5C088;
  --primary-400: #EEA050;
  --primary-500: #E08328;
  --primary-600: #C96B1A;
  --primary-700: #A75414;
  --primary-800: #854210;
  --primary-900: #6B350D;
  --primary-950: #3B1C06;

  /* ── SECONDARY (Derin Yeşil/Teal — Güven) ── */
  --secondary-50: #F0FDF9;
  --secondary-100: #CCFBEB;
  --secondary-200: #9AF5D6;
  --secondary-300: #5FEABF;
  --secondary-400: #2DD4A3;
  --secondary-500: #14B88A;
  --secondary-600: #0D9470;
  --secondary-700: #0F755B;
  --secondary-800: #115C49;
  --secondary-900: #114B3D;

  /* ── ACCENT (Vurgu — Royal Indigo — Lüks & CTA) ── */
  --accent-50: #F5F3FF;
  --accent-100: #EDE9FE;
  --accent-200: #DDD6FE;
  --accent-300: #C4B5FD;
  --accent-400: #A78BFA;
  --accent-500: #8B5CF6;
  --accent-600: #7C3AED;
  --accent-700: #6D28D9;
  --accent-800: #5B21B6;
  --accent-900: #4C1D95;

  /* ── DURUM RENKLERİ ── */
  --success-50: #ECFDF5;
  --success-100: #D1FAE5;
  --success-500: #10B981;
  --success-600: #059669;
  --success-700: #047857;

  --warning-50: #FFFBEB;
  --warning-100: #FEF3C7;
  --warning-500: #F59E0B;
  --warning-600: #D97706;
  --warning-700: #B45309;

  --error-50: #FEF2F2;
  --error-100: #FEE2E2;
  --error-500: #EF4444;
  --error-600: #DC2626;
  --error-700: #B91C1C;

  --info-50: #EFF6FF;
  --info-100: #DBEAFE;
  --info-500: #3B82F6;
  --info-600: #2563EB;
  --info-700: #1D4ED8;

  /* ── YÜZEY & KATMANLAR ── */
  --surface-ground: var(--neutral-50);
  --surface-card: var(--neutral-0);
  --surface-elevated: var(--neutral-0);
  --surface-overlay: rgba(0, 0, 0, 0.5);
  --surface-invert: var(--neutral-900);
  --surface-subtle: var(--warm-50);

  /* ── GÖLGE SİSTEMİ (6 Kademe — Zarif Derinlik) ── */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.03);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.07), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.12);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.04);
  --shadow-ring: 0 0 0 3px rgba(168, 129, 74, 0.2);
  --shadow-ring-primary: 0 0 0 3px rgba(224, 131, 40, 0.15);
  --shadow-ring-accent: 0 0 0 3px rgba(139, 92, 246, 0.15);

  /* ── GLASSMORPHISM ── */
  --glass-bg: rgba(255, 255, 255, 0.82);
  --glass-bg-dark: rgba(17, 24, 39, 0.85);
  --glass-blur: blur(20px);
  --glass-border: 1px solid rgba(255, 255, 255, 0.25);
  --glass-border-dark: 1px solid rgba(255, 255, 255, 0.08);

  /* ── TİPOGRAFİ ── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  /* Tipografi Ölçeği (Major Third — 1.25 ratio) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;

  /* ── SPACING (4px base grid, 8px rhythm) ── */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ── BORDER RADIUS ── */
  --radius-none: 0;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  /* ── ANİMASYON ── */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;

  /* ── Z-INDEX SİSTEMİ ── */
  --z-below: -1;
  --z-base: 0;
  --z-raised: 1;
  --z-dropdown: 10;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-popover: 400;
  --z-toast: 500;
  --z-tooltip: 600;
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM BİLEŞENLER — Utility Classes
   ═══════════════════════════════════════════════════════════════ */

/* ── Glassmorphism Header ── */
.glass-header {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: var(--glass-border);
}

/* ── Premium Kart ── */
.premium-card {
  background: var(--surface-card);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-slow) var(--ease-default),
              box-shadow var(--duration-slow) var(--ease-default),
              border-color var(--duration-slow) var(--ease-default);
}

.premium-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--neutral-300);
}

/* ── Skeleton Loading ── */
.skeleton {
  background: linear-gradient(90deg, var(--neutral-100) 25%, var(--neutral-200) 50%, var(--neutral-100) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Toast Bildirimleri ── */
.toast-container {
  position: fixed;
  top: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  border: 1px solid var(--neutral-200);
  box-shadow: var(--shadow-xl);
  font-size: var(--text-sm);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 280px;
  max-width: 420px;
  animation: toast-in var(--duration-slow) var(--ease-spring);
}

.toast-success { border-left: 4px solid var(--success-500); }
.toast-error { border-left: 4px solid var(--error-500); }
.toast-warning { border-left: 4px solid var(--warning-500); }
.toast-info { border-left: 4px solid var(--info-500); }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(100%) scale(0.95); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

/* ── Scroll Reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slower) var(--ease-out),
              transform var(--duration-slower) var(--ease-out);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Badge/Rozet Sistemi ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2-5);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.badge-primary { background: var(--primary-100); color: var(--primary-700); }
.badge-success { background: var(--success-50); color: var(--success-700); }
.badge-warning { background: var(--warning-50); color: var(--warning-700); }
.badge-error { background: var(--error-50); color: var(--error-700); }
.badge-info { background: var(--info-50); color: var(--info-700); }
.badge-neutral { background: var(--neutral-100); color: var(--neutral-700); }

/* ── Progress Bar ── */
.progress-bar {
  height: 6px;
  background: var(--neutral-100);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-500), var(--primary-400));
  border-radius: var(--radius-full);
  transition: width var(--duration-slow) var(--ease-default);
}

/* ── Responsive Helpers ── */
@media (max-width: 640px) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .hide-tablet { display: none !important; }
}

@media (min-width: 1025px) {
  .hide-desktop { display: none !important; }
}

/* ── Mobil Bottom Sheet ── */
.bottom-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-default);
}

.bottom-sheet.open {
  pointer-events: auto;
  opacity: 1;
}

.bottom-sheet-overlay {
  position: absolute;
  inset: 0;
  background: var(--surface-overlay);
  backdrop-filter: blur(4px);
}

.bottom-sheet-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 85vh;
  background: var(--surface-card);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  padding: var(--space-6) var(--space-5);
  padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform var(--duration-slow) var(--ease-spring);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.bottom-sheet.open .bottom-sheet-content {
  transform: translateY(0);
}

.bottom-sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--neutral-300);
  border-radius: var(--radius-full);
  margin: 0 auto var(--space-4);
}

/* ── Safe Area Padding (iPhone notch) ── */
.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.safe-area-top {
  padding-top: env(safe-area-inset-top, 0px);
}