/* Proje Özgü Global CSS Dosyası */

/* CSS Değişkenleri ve Tema Tanımlamaları */
:root {
  /* Font Tanımlamaları */
  font-synthesis: none;
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Kırmızı Renk Paleti */
  --color-red-50: oklch(.971 .013 17.38);
  --color-red-100: oklch(.936 .032 17.717);
  --color-red-200: oklch(.885 .062 18.334);
  --color-red-300: oklch(.808 .114 19.571);
  --color-red-500: oklch(.637 .237 25.331);
  --color-red-600: oklch(.577 .245 27.325);
  --color-red-700: oklch(.505 .213 27.518);

  /* Turuncu Renk Paleti */
  --color-orange-50: oklch(.98 .016 73.684);
  --color-orange-100: oklch(.954 .038 75.164);
  --color-orange-200: oklch(.901 .076 70.697);
  --color-orange-300: oklch(.837 .128 66.29);
  --color-orange-400: oklch(.75 .183 55.934);
  --color-orange-500: oklch(.705 .213 47.604);
  --color-orange-600: oklch(.646 .222 41.116);
  --color-orange-700: oklch(.553 .195 38.402);
  --color-orange-900: oklch(.408 .123 38.172);

  /* Sarı Renk Paleti */
  --color-yellow-50: oklch(.987 .026 102.212);
  --color-yellow-100: oklch(.973 .071 103.193);
  --color-yellow-300: oklch(.905 .182 98.111);
  --color-yellow-400: oklch(.852 .199 91.936);
  --color-yellow-500: oklch(.795 .184 86.047);
  --color-yellow-600: oklch(.681 .162 75.834);

  /* Yeşil Renk Paleti */
  --color-green-50: oklch(.982 .018 155.826);
  --color-green-100: oklch(.962 .044 156.743);
  --color-green-200: oklch(.925 .084 155.995);
  --color-green-300: oklch(.871 .15 154.449);
  --color-green-400: oklch(.792 .209 151.711);
  --color-green-500: oklch(.723 .219 149.579);
  --color-green-600: oklch(.627 .194 149.214);
  --color-green-700: oklch(.527 .154 150.069);

  /* Zümrüt Renk Paleti */
  --color-emerald-50: oklch(.979 .021 166.113);
  --color-emerald-500: oklch(.696 .17 162.48);

  /* Gökyüzü Renk Paleti */
  --color-sky-500: oklch(.685 .169 237.323);

  /* Mavi Renk Paleti */
  --color-blue-50: oklch(.97 .014 254.604);
  --color-blue-100: oklch(.932 .032 255.585);
  --color-blue-200: oklch(.882 .059 254.128);
  --color-blue-300: oklch(.809 .105 251.813);
  --color-blue-400: oklch(.707 .165 254.624);
  --color-blue-500: oklch(.623 .214 259.815);
  --color-blue-600: oklch(.546 .245 262.881);
  --color-blue-700: oklch(.488 .243 264.376);
  --color-blue-900: oklch(.379 .146 265.522);

  /* İndigo Renk Paleti */
  --color-indigo-50: oklch(.962 .018 272.314);

  /* Mor Renk Paleti */
  --color-purple-50: oklch(.977 .014 308.299);
  --color-purple-100: oklch(.946 .033 307.174);
  --color-purple-200: oklch(.902 .063 306.703);
  --color-purple-300: oklch(.827 .119 306.383);
  --color-purple-400: oklch(.714 .203 305.504);
  --color-purple-500: oklch(.627 .265 303.9);
  --color-purple-600: oklch(.558 .288 302.321);
  --color-purple-700: oklch(.496 .265 301.924);
  --color-purple-900: oklch(.381 .176 304.987);

  /* Pembe Renk Paleti */
  --color-pink-50: oklch(.971 .014 343.198);
  --color-pink-100: oklch(.948 .028 342.258);
  --color-pink-400: oklch(.718 .202 349.761);
  --color-pink-500: oklch(.656 .241 354.308);
  --color-pink-600: oklch(.592 .249 .584);

  /* Gri Renk Paleti */
  --color-gray-50: oklch(.985 .002 247.839);
  --color-gray-100: oklch(.967 .003 264.542);
  --color-gray-200: oklch(.928 .006 264.531);
  --color-gray-300: oklch(.872 .01 258.338);
  --color-gray-400: oklch(.707 .022 261.325);
  --color-gray-500: oklch(.551 .027 264.364);
  --color-gray-600: oklch(.446 .03 256.802);
  --color-gray-700: oklch(.373 .034 259.733);
  --color-gray-800: oklch(.278 .033 256.848);
  --color-gray-900: oklch(.21 .034 264.665);

  /* Temel Renkler */
  --color-black: #000;
  --color-white: #fff;

  /* Spacing ve Container */
  --spacing: .25rem;
  --container-md: 28rem;
  --container-lg: 32rem;

  /* Metin Boyutları */
  --text-xs: .75rem;
  --text-xs--line-height: calc(1 / .75);
  --text-sm: .875rem;
  --text-sm--line-height: calc(1.25 / .875);
  --text-base: 1rem;
  --text-base--line-height: calc(1.5 / 1);
  --text-lg: 1.125rem;
  --text-lg--line-height: calc(1.75 / 1.125);
  --text-xl: 1.25rem;
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-2xl: 1.5rem;
  --text-2xl--line-height: calc(2 / 1.5);
  --text-3xl: 1.875rem;
  --text-3xl--line-height: calc(2.25 / 1.875);
  --text-4xl: 2.25rem;
  --text-4xl--line-height: calc(2.5 / 2.25);
  --text-5xl: 3rem;
  --text-5xl--line-height: 1;
  --text-6xl: 3.75rem;
  --text-6xl--line-height: 1;

  /* Font Ağırlıkları */
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Tracking (Letter Spacing) */
  --tracking-wider: .05em;
  --tracking-widest: .1em;

  /* Line Height */
  --leading-relaxed: 1.625;

  /* Border Radius */
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;

  /* Drop Shadow */
  --drop-shadow-lg: 0 4px 4px #00000026;
  --drop-shadow-2xl: 0 25px 25px #00000026;

  /* Animasyonlar */
  --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
  --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
  --animate-bounce: bounce 1s infinite;

  /* Blur Efektleri */
  --blur-sm: 8px;
  --blur-md: 12px;
  --blur-3xl: 64px;

  /* Transition Ayarları */
  --default-transition-duration: .15s;
  --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);

  /* Font Ayarları */
  --default-font-family: var(--font-sans);
  --default-font-feature-settings: var(--font-sans--font-feature-settings);
  --default-font-variation-settings: var(--font-sans--font-variation-settings);
  --default-mono-font-family: var(--font-mono);
  --default-mono-font-feature-settings: var(--font-mono--font-feature-settings);
  --default-mono-font-variation-settings: var(--font-mono--font-variation-settings);

  /* Banner Yükseklikleri */
  --banner-height: 48px;
  --banner-height-v2: 40px;
  --full-height-with-banner: calc(100dvh - var(--banner-height));

  /* Gradient Tanımlamaları */
  --gradient-primary: linear-gradient(to right, #3b82f6, #a855f7, #ec4899);
  --gradient-primary-hover: linear-gradient(to right, #2563eb, #9333ea, #db2777);
  --gradient-header: linear-gradient(to bottom right, #3b82f6, #a855f7, #ec4899);
  --gradient-card: linear-gradient(to bottom right, #a855f7, #ec4899);
  --gradient-badge: linear-gradient(to right, #a855f7, #ec4899);

  /* Proje Özgü Renkler */
  --color-primary: #a855f7;
  --color-primary-light: #c084fc;
  --color-primary-dark: #9333ea;
  --color-accent: #ec4899;
  --color-blue: #3b82f6;

  /* Tailwind Gradient Ayarları */
  --tw-gradient-position: to bottom right in oklab;
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}

/* Global HTML ve Body Ayarları */
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  -webkit-tap-highlight-color: transparent;
}

/* Global Box Model Ayarları */
*,
*::before,
*::after {
  box-sizing: border-box;
  border: 0 solid;
  margin: 0;
  padding: 0;
  border-color: oklch(.922 0 0);
  outline-color: color-mix(in oklab, oklch(.708 0 0) 50%, transparent);
}

/* Form Elemanları için Global Ayarlar */
button,
input,
select,
textarea {
  font: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  opacity: 1;
}

button {
  appearance: button;
}

/* Proje Özgü Buton Stili Örneği */
.btn-primary {
  margin-bottom: calc(var(--spacing) * 4);
  display: inline-flex;
  height: calc(var(--spacing) * 10);
  width: 100%;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 2);
  border-radius: .425rem;
  padding-inline: calc(var(--spacing) * 6);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  --tw-outline-style: none;
  outline-style: none;
  background: var(--gradient-primary);
  color: #fff;
  transition: all .3s;
}

.btn-primary:hover {
  background: var(--gradient-primary-hover);
}

/* Animasyon Keyframes */
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(.8, 0, 1, 1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0, 0, .2, 1);
  }
}

/* Login Sayfası Özel Stilleri */
.login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom right, #3b82f6, #a855f7, #ec4899);
  padding: 2rem 1rem;
  position: relative;
  overflow: hidden;
}

.login-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2rem;
  z-index: 10;
}

.login-logo-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 1.25rem;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
  object-fit: contain;
}

.login-logo-text {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.login-logo-text .mavera {
  font-size: 2.25rem;
  font-weight: 700;
  color: white;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.login-logo-text .shop {
  font-size: 1.375rem;
  font-weight: 400;
  color: white;
  margin-left: 0.25rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.login-tagline {
  font-size: 0.875rem;
  color: white;
  opacity: 0.95;
  font-style: italic;
}

.login-card {
  background: white;
  border-radius: 1.5rem;
  padding: 2.5rem;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  z-index: 10;
}

.login-title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 2rem;
}

.login-form-group {
  margin-bottom: 1.5rem;
}

.login-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.5rem;
}

.login-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  font-size: 1rem;
  transition: all 0.2s;
  background: white;
  color: #1f2937;
}

.login-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
}

.login-input::placeholder {
  color: #9ca3af;
}

.login-btn-primary {
  width: 100%;
  padding: 1rem 1.5rem;
  background: linear-gradient(to right, #3b82f6, #a855f7, #ec4899);
  color: white;
  border: none;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  margin-bottom: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.login-btn-primary:hover {
  background: linear-gradient(to right, #2563eb, #9333ea, #db2777);
  transform: translateY(-1px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
}

.login-btn-primary:active {
  transform: translateY(0);
}

.login-btn-secondary-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 1rem;
}

.login-btn-secondary {
  padding: 0.75rem 1rem;
  background: #f3f4f6;
  color: #374151;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

.login-btn-secondary:hover {
  background: #e5e7eb;
  color: #1f2937;
}

.login-remember-me {
  margin-bottom: 1.5rem;
}

.login-checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.login-checkbox {
  width: 1.125rem;
  height: 1.125rem;
  margin-right: 0.5rem;
  cursor: pointer;
  accent-color: var(--color-primary);
}

.login-checkbox-text {
  font-size: 0.875rem;
  color: #374151;
  font-weight: 400;
}

.login-checkbox-label:hover .login-checkbox-text {
  color: #1f2937;
}

.login-error {
  background: #fee2e2;
  color: #dc2626;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  margin-bottom: 1rem;
  text-align: center;
}

.login-success {
  background: #d1fae5;
  color: #065f46;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  margin-bottom: 1rem;
  text-align: center;
}

@media (max-width: 640px) {
  .login-card {
    padding: 2rem 1.5rem;
    border-radius: 1.25rem;
  }
  
  .login-logo-text .mavera {
    font-size: 1.75rem;
  }
  
  .login-logo-text .shop {
    font-size: 1.125rem;
  }
}