/* Vekilat Carbon Color System */
:root {
  /* Primary Colors - Kahverengi tonları (Ana marka rengi) */
  --vekilat-primary: #6E3827;
  --vekilat-primary-dark: #5A2E20;
  --vekilat-primary-light: #8B4A35;
  --vekilat-primary-50: #FFF4F0;
  --vekilat-primary-100: #FFE8E0;
  --vekilat-primary-200: #FFD1C1;
  --vekilat-primary-300: #FFBAA2;
  --vekilat-primary-400: #A85A42;
  --vekilat-primary-500: #6E3827;
  --vekilat-primary-600: #5A2E20;
  --vekilat-primary-700: #462419;
  --vekilat-primary-800: #321A12;
  --vekilat-primary-900: #1E100B;

  /* Secondary Colors - Bej/Krem tonları (Arka planlar ve kartlar) */
  --vekilat-secondary: #F9F6F2;
  --vekilat-secondary-dark: #E8E3DC;
  --vekilat-secondary-light: #FFFCF8;
  --vekilat-beige-50: #FFFCF8;
  --vekilat-beige-100: #F9F6F2;
  --vekilat-beige-200: #F3EDE5;
  --vekilat-beige-300: #E8E3DC;
  --vekilat-beige-400: #D4CCC0;
  --vekilat-beige-500: #C0B5A4;

  /* Background Colors - Turuncu tonları (Cluster marker'lar) */
  --vekilat-orange-50: #FFF7ED;
  --vekilat-orange-100: #FFEDD5;
  --vekilat-orange-200: #FED7AA;
  --vekilat-orange-300: #FDBA74;
  --vekilat-orange-400: #FB923C;
  --vekilat-orange-500: #F97316;
  --vekilat-orange-600: #EA580C;
  --vekilat-orange-700: #C2410C;

  /* Accent Colors - Altın tonları (Özel vurgular) */
  --vekilat-gold: #D3B62F;
  --vekilat-gold-light: #E5C84A;
  --vekilat-gold-dark: #B89F28;

  /* Helper Colors */
  --vekilat-success: #1ECA71;
  --vekilat-error: #FF3827;
  --vekilat-warning: #FFA500;
  --vekilat-info: #3B82F6;

  /* App Background */
  --vekilat-app-bg: #F9F6F2;

  /* Text Colors */
  --vekilat-text-primary: #1F2937;
  --vekilat-text-secondary: #6B7280;
  --vekilat-text-light: #9CA3AF;

  /* Override Tailwind primary colors */
  --color-primary-50: var(--vekilat-primary-50);
  --color-primary-100: var(--vekilat-primary-100);
  --color-primary-200: var(--vekilat-primary-200);
  --color-primary-300: var(--vekilat-primary-300);
  --color-primary-400: var(--vekilat-primary-400);
  --color-primary-500: var(--vekilat-primary-500);
  --color-primary-600: var(--vekilat-primary-600);
  --color-primary-700: var(--vekilat-primary-700);
  --color-primary-800: var(--vekilat-primary-800);
  --color-primary-900: var(--vekilat-primary-900);

  /* Swiper theme color */
  --swiper-theme-color: var(--vekilat-primary);
  --ss-primary-color: var(--vekilat-primary);
  --primary-color: var(--vekilat-primary);
}

/* Body background */
body {
  background-color: var(--vekilat-app-bg);
}

/* Primary button styles */
.btn-primary {
  background: linear-gradient(135deg, var(--vekilat-primary) 0%, var(--vekilat-primary-dark) 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 14px 0 rgba(110, 56, 39, 0.39);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--vekilat-primary-dark) 0%, var(--vekilat-primary-800) 100%);
  transform: translateY(-2px);
}

.btn-primary.outlined {
  background: transparent;
  color: var(--vekilat-primary);
  border: 2px solid var(--vekilat-primary);
  box-shadow: none;
}

.btn-primary.outlined:hover {
  background: var(--vekilat-primary);
  color: #ffffff;
  border-color: var(--vekilat-primary);
}

/* Text colors */
.text-primary-300 {
  color: var(--vekilat-primary-300) !important;
}

.text-primary-400 {
  color: var(--vekilat-primary-400) !important;
}

.text-primary-500 {
  color: var(--vekilat-primary-500) !important;
}

.text-primary-600 {
  color: var(--vekilat-primary-600) !important;
}

/* Background colors */
.bg-primary-50 {
  background-color: var(--vekilat-primary-50) !important;
}

.bg-primary-75 {
  background-color: var(--vekilat-beige-100) !important;
}

.bg-primary-100 {
  background-color: var(--vekilat-primary-100) !important;
}

.bg-primary-200 {
  background-color: var(--vekilat-primary-200) !important;
}

.bg-primary-300 {
  background-color: var(--vekilat-primary-300) !important;
}

.bg-primary-400 {
  background-color: var(--vekilat-primary-400) !important;
}

.bg-primary-500 {
  background-color: var(--vekilat-primary-500) !important;
}

.bg-primary-600 {
  background-color: var(--vekilat-primary-600) !important;
}

/* Border colors */
.border-primary-100 {
  border-color: var(--vekilat-primary-100) !important;
}

.border-primary-200 {
  border-color: var(--vekilat-primary-200) !important;
}

.border-primary-300 {
  border-color: var(--vekilat-primary-300) !important;
}

.border-primary-400 {
  border-color: var(--vekilat-primary-400) !important;
}

.border-primary-500 {
  border-color: var(--vekilat-primary-500) !important;
}

/* Hover states */
.hover\:text-primary-300:hover {
  color: var(--vekilat-primary-300) !important;
}

.hover\:text-primary-400:hover {
  color: var(--vekilat-primary-400) !important;
}

.hover\:text-primary-500:hover {
  color: var(--vekilat-primary-500) !important;
}

.hover\:bg-primary-50:hover {
  background-color: var(--vekilat-primary-50) !important;
}

.hover\:bg-primary-400:hover {
  background-color: var(--vekilat-primary-400) !important;
}

.hover\:bg-primary-500:hover {
  background-color: var(--vekilat-primary-500) !important;
}

.hover\:bg-primary-600:hover {
  background-color: var(--vekilat-primary-600) !important;
}

.hover\:border-primary-200:hover {
  border-color: var(--vekilat-primary-200) !important;
}

.hover\:border-primary-300:hover {
  border-color: var(--vekilat-primary-300) !important;
}

/* Gradient backgrounds */
.bg-gradient-to-r.from-primary-300 {
  --tw-gradient-from: var(--vekilat-primary-300);
  --tw-gradient-to: rgb(255 186 162 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.bg-gradient-to-r.from-primary-400 {
  --tw-gradient-from: var(--vekilat-primary-400);
  --tw-gradient-to: rgb(110 56 39 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.bg-gradient-to-r.to-primary-300 {
  --tw-gradient-to: var(--vekilat-primary-300);
}

.bg-gradient-to-r.to-primary-500 {
  --tw-gradient-to: var(--vekilat-primary-500);
}

.bg-gradient-to-br.from-primary-300 {
  --tw-gradient-from: var(--vekilat-primary-300);
  --tw-gradient-to: rgb(255 186 162 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.bg-gradient-to-br.from-primary-400 {
  --tw-gradient-from: var(--vekilat-primary-400);
  --tw-gradient-to: rgb(168 90 66 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.bg-gradient-to-br.from-primary-500 {
  --tw-gradient-from: var(--vekilat-primary-500);
  --tw-gradient-to: rgb(110 56 39 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.bg-gradient-to-br.to-primary-600 {
  --tw-gradient-to: var(--vekilat-primary-600);
}

.bg-gradient-to-tr.from-primary-500 {
  --tw-gradient-from: var(--vekilat-primary-500);
  --tw-gradient-to: rgb(110 56 39 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* Shadow colors */
.shadow-primary-200\/50 {
  --tw-shadow-color: rgb(255 209 193 / 0.5);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-primary-300\/20 {
  --tw-shadow-color: rgb(255 186 162 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-primary-300\/40 {
  --tw-shadow-color: rgb(255 186 162 / 0.4);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-primary-400\/20 {
  --tw-shadow-color: rgb(168 90 66 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-primary-400\/30 {
  --tw-shadow-color: rgb(168 90 66 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-primary-500\/40 {
  --tw-shadow-color: rgb(110 56 39 / 0.4);
  --tw-shadow: var(--tw-shadow-colored);
}

.hover\:shadow-primary-300\/30:hover {
  --tw-shadow-color: rgb(255 186 162 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}

.hover\:shadow-primary-400\/40:hover {
  --tw-shadow-color: rgb(168 90 66 / 0.4);
  --tw-shadow: var(--tw-shadow-colored);
}

.hover\:shadow-primary-400\/50:hover {
  --tw-shadow-color: rgb(168 90 66 / 0.5);
  --tw-shadow: var(--tw-shadow-colored);
}

.hover\:shadow-primary-500\/50:hover {
  --tw-shadow-color: rgb(110 56 39 / 0.5);
  --tw-shadow: var(--tw-shadow-colored);
}

/* Gold accent color */
.text-gold {
  color: var(--vekilat-gold) !important;
}

.bg-gold {
  background-color: var(--vekilat-gold) !important;
}

/* Secondary/Beige colors */
.bg-secondary {
  background-color: var(--vekilat-secondary) !important;
}

.from-secondary {
  --tw-gradient-from: var(--vekilat-secondary);
}

.to-secondary {
  --tw-gradient-to: var(--vekilat-secondary);
}

/* Helper colors */
.text-success {
  color: var(--vekilat-success) !important;
}

.text-error {
  color: var(--vekilat-error) !important;
}

.bg-success {
  background-color: var(--vekilat-success) !important;
}

.bg-error {
  background-color: var(--vekilat-error) !important;
}

/* Opacity variants */
.bg-primary-200\/20 {
  background-color: rgb(255 209 193 / 0.2) !important;
}

.bg-primary-300\/10 {
  background-color: rgb(255 186 162 / 0.1) !important;
}

.bg-primary-300\/15 {
  background-color: rgb(255 186 162 / 0.15) !important;
}

.bg-primary-300\/20 {
  background-color: rgb(255 186 162 / 0.2) !important;
}

.bg-primary-400\/10 {
  background-color: rgb(168 90 66 / 0.1) !important;
}

.bg-primary-400\/20 {
  background-color: rgb(168 90 66 / 0.2) !important;
}

.bg-primary-400\/30 {
  background-color: rgb(168 90 66 / 0.3) !important;
}

.bg-primary-50\/50 {
  background-color: rgb(255 244 240 / 0.5) !important;
}

.bg-primary-50\/60 {
  background-color: rgb(255 244 240 / 0.6) !important;
}

.bg-primary-75\/30 {
  background-color: rgb(249 246 242 / 0.3) !important;
}

/* From/To opacity variants for gradients */
.from-primary-50\/50 {
  --tw-gradient-from: rgb(255 244 240 / 0.5);
  --tw-gradient-to: rgb(255 244 240 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-primary-300\/20 {
  --tw-gradient-from: rgb(255 186 162 / 0.2);
  --tw-gradient-to: rgb(255 186 162 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-primary-75\/30 {
  --tw-gradient-to: rgb(249 246 242 / 0.3);
}

.to-secondary\/5 {
  --tw-gradient-to: rgb(249 246 242 / 0.05);
}

.to-secondary\/10 {
  --tw-gradient-to: rgb(249 246 242 / 0.1);
}

.to-secondary\/30 {
  --tw-gradient-to: rgb(249 246 242 / 0.3);
}

.via-secondary\/10 {
  --tw-gradient-to: rgb(249 246 242 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(249 246 242 / 0.1), var(--tw-gradient-to);
}

/* Group hover variants */
.group-hover\:bg-primary-400:hover {
  background-color: var(--vekilat-primary-400) !important;
}

.group-hover\:text-primary-300:hover {
  color: var(--vekilat-primary-300) !important;
}

.group-hover\:text-primary-400:hover {
  color: var(--vekilat-primary-400) !important;
}

.group-hover\:text-primary-500:hover {
  color: var(--vekilat-primary-500) !important;
}

.group:hover .group-hover\:bg-primary-400 {
  background-color: var(--vekilat-primary-400) !important;
}

.group:hover .group-hover\:text-primary-300 {
  color: var(--vekilat-primary-300) !important;
}

.group:hover .group-hover\:text-primary-400 {
  color: var(--vekilat-primary-400) !important;
}

.group:hover .group-hover\:text-primary-500 {
  color: var(--vekilat-primary-500) !important;
}

/* Opacity for decorative elements */
.opacity-20 {
  opacity: 0.2;
}

.opacity-30 {
  opacity: 0.3;
}

.opacity-50 {
  opacity: 0.5;
}

.group-hover\:opacity-100:hover {
  opacity: 1;
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.group:hover .group-hover\:opacity-30 {
  opacity: 0.3;
}

.group:hover .group-hover\:opacity-70 {
  opacity: 0.7;
}