/* Ustaabi Brand Colors - Mavi #134fa7 & Yeşil #398d38 */
:root {
  /* Primary Colors - Mavi */
  --color-primary: #134fa7;
  --color-primary-dark: #104393;
  --color-primary-light: #4a7fc0;
  --color-primary-50: #e8eff8;
  --color-primary-100: #d1dff1;
  --color-primary-200: #a3bfe3;
  --color-primary-300: #759fd5;
  --color-primary-400: #4a7fc0;
  --color-primary-500: #134fa7;
  --color-primary-600: #104393;
  --color-primary-700: #0d377f;
  --color-primary-800: #0a2b6b;
  --color-primary-900: #071f57;

  /* Secondary Colors - Yeşil */
  --color-secondary: #398d38;
  --color-secondary-dark: #327832;
  --color-secondary-light: #5fa85f;
  --color-secondary-50: #ebf5eb;
  --color-secondary-75: #f2faf2;
  --color-secondary-100: #d7ebd7;
  --color-secondary-200: #afd7af;
  --color-secondary-300: #87c387;
  --color-secondary-400: #5fa85f;
  --color-secondary-500: #398d38;
  --color-secondary-600: #327832;
  --color-secondary-700: #2b632b;
  --color-secondary-800: #244e24;
  --color-secondary-900: #1d391d;

  /* Accent - yeşilin koyu tonu (değerler kartı vb.) */
  --color-accent-50: #e3f2e3;
  --color-accent-75: #edf7ed;
  --color-accent-100: #c8e4c8;
  --color-accent-200: #9fd09f;
  --color-accent-300: #76bc76;
  --color-accent-400: #4da84d;
  --color-accent-500: #2e7d2d;

  /* Nötr arka plan tonları */
  --color-beige-50: #f8faf8;
  --color-beige-100: #f2f6f2;
  --color-beige-200: #e8efe8;
  --color-beige-300: #d8e4d8;
  --color-beige-400: #c4d4c4;
  --color-beige-500: #a8bca8;

  /* Background Colors - Turuncu tonları (Cluster marker'lar) */
  --color-orange-50: #fff7ed;
  --color-orange-100: #ffedd5;
  --color-orange-200: #fed7aa;
  --color-orange-300: #fdba74;
  --color-orange-400: #fb923c;
  --color-orange-500: #f97316;
  --color-orange-600: #ea580c;
  --color-orange-700: #c2410c;

  /* Accent Colors - Altın tonları (Özel vurgular) */
  --color-gold: #d3b62f;
  --color-gold-light: #e5c84a;
  --color-gold-dark: #b89f28;

  /* Helper Colors */
  --color-success: #398d38;
  --color-error: #ff3827;
  --color-warning: #ffa500;
  --color-info: #134fa7;

  /* App Background */
  --color-app-bg: #fff;

  /* Text Colors */
  --color-text-primary: #1f2937;
  --color-text-secondary: #6b7280;
  --color-text-light: #9ca3af;

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

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

/* Primary button styles */
.btn-primary {
  background: linear-gradient(135deg, var(--color-primary-400) 0%, var(--color-primary-500) 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 14px 0 rgba(19, 79, 167, 0.39);
}

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

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

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

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

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

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

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

/* Secondary text colors */
.text-secondary-500 {
  color: var(--color-secondary-500) !important;
}

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

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

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

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

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

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

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

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

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

.bg-secondary-50 {
  background-color: var(--color-secondary-50) !important;
}

.bg-secondary-75 {
  background-color: var(--color-secondary-75) !important;
}

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

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

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

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

.bg-accent-50 {
  background-color: var(--color-accent-50) !important;
}

.bg-accent-75 {
  background-color: var(--color-accent-75) !important;
}

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

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

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

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

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

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

.border-secondary-100 {
  border-color: var(--color-secondary-100) !important;
}

.border-accent-100 {
  border-color: var(--color-accent-100) !important;
}

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

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

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

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

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

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

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

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

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

/* Gradient backgrounds - Primary */
.from-primary-300 {
  --tw-gradient-from: var(--color-primary-300) !important;
  --tw-gradient-to: rgb(19 79 167 / 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-primary-400 {
  --tw-gradient-from: var(--color-primary-400) !important;
  --tw-gradient-to: rgb(19 79 167 / 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-primary-500 {
  --tw-gradient-from: var(--color-primary-500) !important;
  --tw-gradient-to: rgb(19 79 167 / 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-primary-300 {
  --tw-gradient-to: var(--color-primary-300) !important;
}

.to-primary-400 {
  --tw-gradient-to: var(--color-primary-400) !important;
}

.to-primary-500 {
  --tw-gradient-to: var(--color-primary-500) !important;
}

.to-primary-600 {
  --tw-gradient-to: var(--color-primary-600) !important;
}

.bg-gradient-to-r.from-primary-300,
.bg-gradient-to-br.from-primary-300,
.bg-gradient-to-tr.from-primary-300 {
  --tw-gradient-from: var(--color-primary-300);
  --tw-gradient-to: rgb(19 79 167 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.bg-gradient-to-r.from-primary-400,
.bg-gradient-to-br.from-primary-400 {
  --tw-gradient-from: var(--color-primary-400);
  --tw-gradient-to: rgb(19 79 167 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.bg-gradient-to-br.from-primary-500,
.bg-gradient-to-tr.from-primary-500 {
  --tw-gradient-from: var(--color-primary-500);
  --tw-gradient-to: rgb(19 79 167 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

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

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

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

/* Gradient backgrounds - Secondary (yeşil) */
.from-secondary {
  --tw-gradient-from: var(--color-secondary) !important;
  --tw-gradient-to: rgb(57 141 56 / 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.from-secondary-400 {
  --tw-gradient-from: var(--color-secondary-400) !important;
  --tw-gradient-to: rgb(57 141 56 / 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-secondary {
  --tw-gradient-to: var(--color-secondary) !important;
}

.to-secondary-400 {
  --tw-gradient-to: var(--color-secondary-400) !important;
}

.to-secondary-500 {
  --tw-gradient-to: var(--color-secondary-500) !important;
}

.to-secondary-600 {
  --tw-gradient-to: var(--color-secondary-600) !important;
}

.to-secondary-700 {
  --tw-gradient-to: var(--color-secondary-700) !important;
}

.via-secondary-500 {
  --tw-gradient-via: var(--color-secondary-500) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to) !important;
}

.bg-gradient-to-br.from-secondary-400 {
  --tw-gradient-from: var(--color-secondary-400);
  --tw-gradient-to: rgb(57 141 56 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.shadow-secondary-500\/30 {
  --tw-shadow-color: rgb(57 141 56 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}

.bg-gradient-to-r.from-secondary-400,
.bg-gradient-to-br.from-secondary-400 {
  --tw-gradient-from: var(--color-secondary-400);
  --tw-gradient-to: rgb(57 141 56 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.bg-gradient-to-r.to-secondary-400,
.bg-gradient-to-r.to-secondary-500,
.bg-gradient-to-br.to-secondary-500 {
  --tw-gradient-to: var(--color-secondary-500);
}

/* Gradient backgrounds - Accent */
.from-accent-400 {
  --tw-gradient-from: var(--color-accent-400) !important;
  --tw-gradient-to: rgb(46 125 45 / 0) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-accent-400,
.to-accent-500 {
  --tw-gradient-to: var(--color-accent-500) !important;
}

.bg-gradient-to-r.from-accent-400,
.bg-gradient-to-br.from-accent-400 {
  --tw-gradient-from: var(--color-accent-400);
  --tw-gradient-to: rgb(46 125 45 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.bg-gradient-to-r.to-accent-500 {
  --tw-gradient-to: var(--color-accent-500);
}

/* Shadow colors */
.shadow-primary-200\/50 {
  --tw-shadow-color: rgb(163 191 227 / 0.5);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-primary-300\/10 {
  --tw-shadow-color: rgb(117 159 213 / 0.1);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-primary-300\/20 {
  --tw-shadow-color: rgb(117 159 213 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-primary-400\/20 {
  --tw-shadow-color: rgb(74 127 192 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-primary-400\/30 {
  --tw-shadow-color: rgb(74 127 192 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-primary-500\/40 {
  --tw-shadow-color: rgb(19 79 167 / 0.4);
  --tw-shadow: var(--tw-shadow-colored);
}

.shadow-secondary-300\/10 {
  --tw-shadow-color: rgb(135 195 135 / 0.1);
  --tw-shadow: var(--tw-shadow-colored);
}

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

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

.shadow-accent-300\/10 {
  --tw-shadow-color: rgb(118 188 118 / 0.1);
  --tw-shadow: var(--tw-shadow-colored);
}

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

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

.hover\:shadow-primary-300\/30:hover {
  --tw-shadow-color: rgb(117 159 213 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}

.hover\:shadow-primary-400\/40:hover {
  --tw-shadow-color: rgb(74 127 192 / 0.4);
  --tw-shadow: var(--tw-shadow-colored);
}

.hover\:shadow-primary-400\/50:hover {
  --tw-shadow-color: rgb(74 127 192 / 0.5);
  --tw-shadow: var(--tw-shadow-colored);
}

.hover\:shadow-primary-500\/50:hover {
  --tw-shadow-color: rgb(19 79 167 / 0.5);
  --tw-shadow: var(--tw-shadow-colored);
}

.hover\:shadow-secondary-400\/20:hover {
  --tw-shadow-color: rgb(95 168 95 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}

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

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

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

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

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

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

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

/* Opacity variants - Primary */
.bg-primary-200\/20 {
  background-color: rgb(163 191 227 / 0.2) !important;
}

.bg-primary-300\/10 {
  background-color: rgb(117 159 213 / 0.1) !important;
}

.bg-primary-300\/15 {
  background-color: rgb(117 159 213 / 0.15) !important;
}

.bg-primary-300\/20 {
  background-color: rgb(117 159 213 / 0.2) !important;
}

.bg-primary-300\/30 {
  background-color: rgb(117 159 213 / 0.3) !important;
}

.bg-primary-400\/10 {
  background-color: rgb(74 127 192 / 0.1) !important;
}

.bg-primary-400\/20 {
  background-color: rgb(74 127 192 / 0.2) !important;
}

.bg-primary-400\/30 {
  background-color: rgb(74 127 192 / 0.3) !important;
}

.bg-primary-50\/50 {
  background-color: rgb(232 239 248 / 0.5) !important;
}

.bg-primary-50\/60 {
  background-color: rgb(232 239 248 / 0.6) !important;
}

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

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

/* Opacity variants - Secondary */
.bg-secondary\/5 {
  background-color: rgb(57 141 56 / 0.05) !important;
}

.bg-secondary\/10 {
  background-color: rgb(57 141 56 / 0.1) !important;
}

.bg-secondary\/15 {
  background-color: rgb(57 141 56 / 0.15) !important;
}

.bg-secondary\/20 {
  background-color: rgb(57 141 56 / 0.2) !important;
}

.bg-secondary\/30 {
  background-color: rgb(57 141 56 / 0.3) !important;
}

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

.from-primary-300\/20 {
  --tw-gradient-from: rgb(117 159 213 / 0.2);
  --tw-gradient-to: rgb(117 159 213 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

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

.to-secondary\/5 {
  --tw-gradient-to: rgb(57 141 56 / 0.05);
}

.to-secondary\/10 {
  --tw-gradient-to: rgb(57 141 56 / 0.1);
}

.to-secondary\/20 {
  --tw-gradient-to: rgb(57 141 56 / 0.2);
}

.to-secondary\/30 {
  --tw-gradient-to: rgb(57 141 56 / 0.3);
}

.via-secondary\/10 {
  --tw-gradient-to: rgb(57 141 56 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(57 141 56 / 0.1), var(--tw-gradient-to);
}

.from-secondary\/15 {
  --tw-gradient-from: rgb(57 141 56 / 0.15);
  --tw-gradient-to: rgb(57 141 56 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-secondary\/20 {
  --tw-gradient-from: rgb(57 141 56 / 0.2);
  --tw-gradient-to: rgb(57 141 56 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

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

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

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

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

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

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

/* Outline */
.outline-primary-300 {
  outline-color: var(--color-primary-300) !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,
.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;
}