/* ════════════════════════════════════════════════════════════════
   CompoundPro - Design System
   Beyaz/Açık ton baz, Turuncu + Zümrüt Yeşili accent,
   Ayna (mirror) hissiyatlı cam (glass) görünümü.
   TÜM SİTE TEK KAYNAKTAN İŞLENİR (design-system.css).
   ════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Oswald:wght@400;700&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

/* ════════════════════════════════════════════════════════════════
   Font Display Strategy - Comprehensive FOIT Prevention
   
   While Google Fonts URL includes display=swap parameter, we add
   explicit @font-face declarations as fallback to ensure font-display: swap
   is applied consistently across all font loading scenarios.
   
   This prevents FOIT (Flash of Invisible Text) during font loading
   by showing fallback fonts immediately while custom fonts load.
   ════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: local('Syne');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: local('DM Sans');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: local('JetBrains Mono');
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Oswald Regular'), local('Oswald-Regular'), local('Oswald');
}

:root {
  /* ═══ BEYAZ / AÇIK TON BAZ (zemin) - Semantic Background Colors ═══ */
  --color-bg-primary:     #FAFAF7;   /* Sayfa zemin (sıcak beyaz) */
  --color-bg-secondary:   #FFFFFF;   /* Kart / panel zemin (saf beyaz) */
  --color-bg-tertiary:    #F1F5F9;   /* Hover, accent box (çok açık gri) */
  --color-bg-base:        #FAFAF7;   /* Alias for primary */
  --color-bg-surface:     #FFFFFF;   /* Alias for secondary */
  --color-bg-elevated:    #FFFFFF;   /* Yükseltilmiş kart, modal */
  --color-bg-elevated-2:  #F1F5F9;   /* Hover, accent box (çok açık gri) */
  --color-bg-inset:       #F8FAFC;   /* Input zemin (gömülü, çok hafif gri) */
  --color-bg-dark:        #0F172A;   /* Hero / dark panel (premium bölümler için) */
  --color-bg-dark-2:      #1E293B;

  /* ═══ TEXT (koyu, beyaz zeminde okunur) - Semantic Text Colors ═══ */
  --color-text-primary:   #0F172A;   /* Ana metin (lacivert-siyah) */
  --color-text-secondary: #475569;   /* İkincil metin (gri) */
  --color-text-tertiary:  #64748B;   /* Soluk metin */
  --color-text-muted:     #64748B;   /* Alias for tertiary */
  --color-text-dim:       #94A3B8;   /* Çok soluk */
  --color-text-inverse:   #FFFFFF;   /* Koyu zemin üzerinde beyaz */

  /* ═══ ACCENT COLORS (turuncu + zümrüt + sea + purple) - Semantic Accent Colors ═══ */
  --color-white:          #FFFFFF;
  --color-accent-orange:  #F97316;   /* Turuncu (primary CTA, brand) */
  --color-accent-emerald: #10B981;   /* Zümrüt yeşili (success, secondary) */
  --color-accent-sea:     #0EA5E9;   /* Sky/Sea (tertiary, info) */
  --color-accent-purple:  #7C3AED;   /* Premium accent */
  
  /* Legacy aliases for backward compatibility */
  --color-orange:     #F97316;   /* Turuncu (primary CTA, brand) */
  --color-orange-2:   #C2410C;   /* Turuncu koyu (hover, WCAG AA on -10 bg) */
  --color-orange-700: #9A3412;  /* Orange 800 (badge text, WCAG AA on -10 bg ≈ 6.4:1) */
  --color-emerald:    #10B981;   /* Zümrüt yeşili (success, secondary) */
  --color-emerald-2:  #047857;   /* Zümrüt koyu (hover, WCAG AA on -10 bg) */
  --color-emerald-700: #047857;  /* Emerald 700 (badge text, WCAG AA on -10 bg ≈ 4.97:1) */
  --color-sea:        #0EA5E9;   /* Sky/Sea (tertiary, info) */
  --color-sea-2:      #0369A1;   /* Sky koyu (hover, WCAG AA on -10 bg) */
  --color-sea-700:    #075985;   /* Sky 800 (badge/bg üzerinde WCAG AA metin) */
  --color-amber:      #F59E0B;
  --color-rose:       #E11D48;
  --color-rose-700:   #9F1239;   /* Rose 800 (badge/bg üzerinde WCAG AA metin) */
  --color-violet:     #7C3AED;   /* Premium accent */
  --color-violet-700: #6D28D9;   /* Violet 700 (badge/bg üzerinde WCAG AA metin) */

  /* ═══ STATE & UTILITY ═══ */
  --color-border:         rgba(15, 23, 42, 0.08);
  --color-border-strong:  rgba(15, 23, 42, 0.14);
  --color-border-accent:  rgba(249, 115, 22, 0.5);
  --color-divider:        rgba(15, 23, 42, 0.06);

  /* ═══ GLASSMORPHISM TOKENS - Premium Glass Effects ═══ */
  /* Primary glassmorphism tokens for consistent glass surfaces */
  --glass-bg: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0.92) 100%);
  --glass-border: rgba(255,255,255,0.6);
  --glass-blur: blur(20px) saturate(180%);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 8px 32px rgba(15,23,42,0.06);

  /* ═══ AYNA CAM (MIRROR GLASS) EFEKTLERİ - Legacy tokens ═══ */
  /* Hafif transparan beyaz + chrome yansıması */
  --color-glass:           rgba(255, 255, 255, 0.7);
  --color-glass-strong:    rgba(255, 255, 255, 0.85);
  --color-glass-hover:     rgba(255, 255, 255, 0.95);
  --color-glass-dark:      rgba(15, 23, 42, 0.55);
  --color-glass-shine:     linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.9) 100%);

  /* ═══ ACCENT BACKGROUNDS (subtle, beyaz temada görünür) ═══ */
  --color-orange-10:  rgba(249, 115, 22, 0.10);
  --color-orange-20:  rgba(249, 115, 22, 0.18);
  --color-emerald-10: rgba(16, 185, 129, 0.10);
  --color-emerald-20: rgba(16, 185, 129, 0.18);
  --color-sea-10:     rgba(14, 165, 233, 0.10);
  --color-sea-20:     rgba(14, 165, 233, 0.18);
  --color-amber-10:   rgba(245, 158, 11, 0.10);
  --color-rose-10:    rgba(225, 29, 72, 0.10);
  --color-violet-10:  rgba(124, 58, 237, 0.12);

  /* ═══ LEGACY ALIASES (mevcut kodu kırmamak için) ═══ */
  --color-dark:       var(--color-text-primary);  /* Beyaz zeminde koyu yazı */
  --color-dark-2:     var(--color-text-secondary);
  --color-surface:    var(--color-bg-base);
  --color-surface-2:  var(--color-bg-surface);
  --color-muted:      var(--color-text-muted);

  /* ═══ Typography - Font Families ═══ */
  --font-display:     "Syne", sans-serif;
  --font-hero:        "Oswald", "Oswald Regular", "Oswald-Regular", sans-serif;
  --font-body:        "DM Sans", sans-serif;
  --font-mono:        "JetBrains Mono", monospace;
  --font-numbers:     "JetBrains Mono", monospace;

  /* ═══ Typography Scale - Complete type scale with fontSize, lineHeight, letterSpacing ═══ */
  /* Display sizes */
  --type-display-2xl-size: 4.5rem;
  --type-display-2xl-height: 1.05;
  --type-display-2xl-spacing: -0.035em;
  --type-display-2xl-weight: 800;

  --type-display-xl-size: 3.25rem;
  --type-display-xl-height: 1.1;
  --type-display-xl-spacing: -0.03em;
  --type-display-xl-weight: 800;

  --type-display-lg-size: 2.5rem;
  --type-display-lg-height: 1.15;
  --type-display-lg-spacing: -0.02em;
  --type-display-lg-weight: 700;

  --type-display-md-size: 2rem;
  --type-display-md-height: 1.2;
  --type-display-md-spacing: -0.015em;
  --type-display-md-weight: 700;

  /* Heading sizes */
  --type-heading-lg-size: 1.625rem;
  --type-heading-lg-height: 1.3;
  --type-heading-lg-spacing: 0;
  --type-heading-lg-weight: 700;

  --type-heading-md-size: 1.375rem;
  --type-heading-md-height: 1.35;
  --type-heading-md-spacing: 0;
  --type-heading-md-weight: 700;

  --type-heading-sm-size: 1.125rem;
  --type-heading-sm-height: 1.4;
  --type-heading-sm-spacing: 0;
  --type-heading-sm-weight: 700;

  /* Body sizes */
  --type-body-xl-size: 1.25rem;
  --type-body-xl-height: 1.6;
  --type-body-xl-spacing: 0;
  --type-body-xl-weight: 400;

  --type-body-lg-size: 1.125rem;
  --type-body-lg-height: 1.65;
  --type-body-lg-spacing: 0;
  --type-body-lg-weight: 400;

  --type-body-md-size: 1rem;
  --type-body-md-height: 1.65;
  --type-body-md-spacing: 0;
  --type-body-md-weight: 400;

  --type-body-sm-size: 0.875rem;
  --type-body-sm-height: 1.6;
  --type-body-sm-spacing: 0;
  --type-body-sm-weight: 400;

  --type-body-xs-size: 0.75rem;
  --type-body-xs-height: 1.5;
  --type-body-xs-spacing: 0.02em;
  --type-body-xs-weight: 500;

  /* Monospace sizes */
  --type-mono-xl-size: 2.25rem;
  --type-mono-xl-height: 1.2;
  --type-mono-xl-spacing: -0.02em;
  --type-mono-xl-weight: 600;

  --type-mono-lg-size: 1.625rem;
  --type-mono-lg-height: 1.3;
  --type-mono-lg-spacing: 0;
  --type-mono-lg-weight: 600;

  --type-mono-md-size: 1rem;
  --type-mono-md-height: 1.5;
  --type-mono-md-spacing: 0;
  --type-mono-md-weight: 500;

  --type-mono-sm-size: 0.875rem;
  --type-mono-sm-height: 1.5;
  --type-mono-sm-spacing: 0;
  --type-mono-sm-weight: 500;

  /* ═══ Spacing (4px base) ═══ */
  --space-1:  4px;
  --space-2:  8px;
  --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-11: 44px;
  --space-12: 48px;
  --space-13: 52px;
  --space-14: 56px;
  --space-15: 60px;
  --space-16: 64px;
  --space-17: 68px;
  --space-18: 72px;
  --space-19: 76px;
  --space-20: 80px;

  /* ═══ Border Radius ═══ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* ═══ Shadows (beyaz zeminde yumuşak + chrome) ═══ */
  --shadow-sm:  0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md:  0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg:  0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --shadow-xl:  0 25px 50px -12px rgba(15, 23, 42, 0.18);
  --shadow-glow-orange:  0 0 24px rgba(249, 115, 22, 0.25), 0 0 6px rgba(249, 115, 22, 0.3);
  --shadow-glow-emerald: 0 0 24px rgba(16, 185, 129, 0.25), 0 0 6px rgba(16, 185, 129, 0.3);
  --shadow-glow-sea:     0 0 24px rgba(14, 165, 233, 0.25), 0 0 6px rgba(14, 165, 233, 0.3);
  --shadow-glow-violet:  0 0 24px rgba(124, 58, 237, 0.3);

  /* ═══ ANIMATION TOKENS - Durations and Easing Functions ═══ */
  /* Animation durations */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 350ms;
  --duration-bounce: 500ms;

  /* Easing functions */
  --ease-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
  
  /* Legacy transition token */
  --transition-normal: 200ms ease;

  /* ═══ Ayna Cam Özel (Mirror Glass) - Extended Glass Effects ═══ */
  --mirror-glass-bg: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95) 0%, 
    rgba(255, 255, 255, 0.75) 40%, 
    rgba(255, 255, 255, 0.92) 100%);
  --mirror-glass-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 1),       /* Üst chrome highlight */
    inset 0 -1px 0 rgba(15, 23, 42, 0.04),       /* Alt subtle shadow */
    0 1px 0 rgba(255, 255, 255, 0.8),            /* Üst dış highlight */
    0 8px 32px rgba(15, 23, 42, 0.06),           /* Ana gölge */
    0 0 0 1px rgba(15, 23, 42, 0.04);            /* Hairline border */
  --mirror-glass-shine: linear-gradient(135deg,
    transparent 30%,
    rgba(255, 255, 255, 0.6) 50%,
    transparent 70%);

  /* ═══ Z-index Scale ═══ */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 1000;
  --z-overlay: 1100;
  --z-modal: 1200;
  --z-toast: 1300;
}

/* ════════════════════════════════════════════════════════════════
   MODERN CSS RESET
   ════════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Sayfa zemin - subtle radial accent'ler (premium light) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 0%, rgba(249, 115, 22, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 100% 30%, rgba(16, 185, 129, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 50% 30% at 50% 100%, rgba(14, 165, 233, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: var(--color-orange-2);
  text-decoration: none;
  transition: color var(--ease-base);
}

a:hover {
  color: var(--color-orange);
}

/* ════════════════════════════════════════════════════════════════
   TYPOGRAPHY SCALE
   ════════════════════════════════════════════════════════════════ */

.display-2xl {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 4.5rem;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--color-text-primary);
}

.display-xl {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.25rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
}

.display-lg {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.display-md {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
}

.heading-lg {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 1.3;
  color: var(--color-text-primary);
}

.heading-md {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.35;
  color: var(--color-text-primary);
}

.heading-sm {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--color-text-primary);
}

.body-xl {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.body-lg {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

.body-md {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
}

.body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.body-xs {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-text-dim);
  letter-spacing: 0.02em;
}

.mono-xl {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 2.25rem;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.mono-lg {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.625rem;
  color: var(--color-text-primary);
}

.mono-md {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1rem;
  color: var(--color-text-primary);
}

.mono-sm {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

@media (max-width: 768px) {
  .display-2xl { font-size: 3.4rem; }
  .display-xl  { font-size: 2.55rem; }
  .display-lg  { font-size: 1.9rem; }
  .display-md  { font-size: 1.6rem; }
  .heading-lg  { font-size: 1.375rem; }
  .heading-md  { font-size: 1.15rem; }
  .body-xl     { font-size: 1.125rem; }
  .body-lg     { font-size: 1rem; }
  .body-md     { font-size: 0.9375rem; }
  .mono-xl     { font-size: 1.75rem; }
}

/* ════════════════════════════════════════════════════════════════
   COLOR UTILITY CLASSES
   ════════════════════════════════════════════════════════════════ */

.text-white { color: var(--color-white); }
.text-orange { color: var(--color-orange-2); }
.text-emerald { color: var(--color-emerald-2); }
.text-sea { color: var(--color-sea-2); }
.text-amber { color: var(--color-amber); }
.text-rose { color: var(--color-rose); }
.text-dark { color: var(--color-text-primary); }
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-dim { color: var(--color-text-dim); }

.bg-white { background-color: var(--color-white); }
.bg-base { background-color: var(--color-bg-base); }
.bg-surface { background-color: var(--color-bg-surface); }
.bg-elevated { background-color: var(--color-bg-elevated); }
.bg-dark { background-color: var(--color-bg-dark); }
.bg-orange { background-color: var(--color-orange); }
.bg-emerald { background-color: var(--color-emerald); }

.bg-orange-subtle { background-color: var(--color-orange-10); }
.bg-emerald-subtle { background-color: var(--color-emerald-10); }
.bg-sea-subtle { background-color: var(--color-sea-10); }
.bg-amber-subtle { background-color: var(--color-amber-10); }
.bg-rose-subtle { background-color: var(--color-rose-10); }
.bg-violet-subtle { background-color: var(--color-violet-10); }

/* ════════════════════════════════════════════════════════════════
   LAYOUT UTILITIES
   ════════════════════════════════════════════════════════════════ */

.container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.container-sm {
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.container-lg {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.section {
  padding-top: 80px;
  padding-bottom: 80px;
}

.section-sm {
  padding-top: 48px;
  padding-bottom: 48px;
}

@media (max-width: 768px) {
  .section {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .section-sm {
    padding-top: 32px;
    padding-bottom: 32px;
  }
}

/* Flexbox fallback for browsers without CSS Grid support (IE11, old Edge) */
.grid-2,
.grid-3,
.grid-4 {
  display: flex;
  flex-wrap: wrap;
  margin: -12px; /* Negative margin to create gaps */
}

.grid-2 > *,
.grid-3 > *,
.grid-4 > * {
  padding: 12px; /* Padding creates gaps between items */
  box-sizing: border-box;
}

.grid-2 > * {
  flex: 0 0 50%; /* 2 columns fallback */
  max-width: 50%;
}

.grid-3 > * {
  flex: 0 0 33.333%; /* 3 columns fallback */
  max-width: 33.333%;
}

.grid-4 > * {
  flex: 0 0 25%; /* 4 columns fallback */
  max-width: 25%;
}

/* CSS Grid for modern browsers */
@supports (display: grid) {
  .grid-2,
  .grid-3,
  .grid-4 {
    display: grid;
    margin: 0; /* Reset margin */
  }

  .grid-2 > *,
  .grid-3 > *,
  .grid-4 > * {
    padding: 0; /* Reset padding */
    flex: none; /* Reset flex */
    max-width: none; /* Reset max-width */
  }

  .grid-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }

  @media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4 {
      grid-template-columns: 1fr;
    }
  }
}

/* Flexbox fallback responsive adjustments */
@media (max-width: 1024px) {
  .grid-4 > * {
    flex: 0 0 50%; /* 2 columns on tablet */
    max-width: 50%;
  }
  
  .grid-3 > * {
    flex: 0 0 50%; /* 2 columns on tablet */
    max-width: 50%;
  }
}

@media (max-width: 768px) {
  .grid-2 > *,
  .grid-3 > *,
  .grid-4 > * {
    flex: 0 0 100%; /* 1 column on mobile */
    max-width: 100%;
  }
}

.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-start { display: flex; align-items: flex-start; justify-content: flex-start; }
.flex-col { display: flex; flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }

/* ════════════════════════════════════════════════════════════════
   GRAIN TEXTURE OVERLAY (beyaz temada subtle)
   ════════════════════════════════════════════════════════════════ */

.grain-overlay {
  position: relative;
}

.grain-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.025;
  mix-blend-mode: multiply;
  z-index: 5;
}

/* ════════════════════════════════════════════════════════════════
   SELECTION & FOCUS
   ════════════════════════════════════════════════════════════════ */

::selection {
  background-color: var(--color-orange);
  color: var(--color-white);
}

/* ═══ FOCUS INDICATORS (Keyboard Navigation Support) ═══ */
/* Strong, visible focus indicators for keyboard users (WCAG AA compliant) */
:focus-visible {
  outline: 3px solid var(--color-orange);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Fallback for browsers without :focus-visible support */
:focus {
  outline: 3px solid var(--color-orange);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Remove outline for mouse users in browsers that support :focus-visible */
:focus:not(:focus-visible) {
  outline: none;
}

/* Scrollbar (beyaz tema) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg-base);
}
::-webkit-scrollbar-thumb {
  background: var(--color-bg-elevated-2);
  border-radius: 5px;
  border: 2px solid var(--color-bg-base);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-orange);
}

/* Premium gradient text */
.gradient-text {
  background: linear-gradient(135deg, var(--color-orange-2) 0%, var(--color-amber) 50%, var(--color-emerald-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.gradient-text-cool {
  background: linear-gradient(135deg, var(--color-sea) 0%, var(--color-violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Ayna efekti (chrome shine) - data attribute ile uygulanabilir */
.mirror-shine {
  position: relative;
  overflow: hidden;
}

.mirror-shine::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}

/* Subtle "live" pulse indicator */
.pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-emerald);
  box-shadow: 0 0 0 0 var(--color-emerald-20);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Visually hidden (a11y) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ════════════════════════════════════════════════════════════════
   GLASSMORPHISM UTILITY CLASS - Task 2.3 Browser Compatibility
   Premium glass surface with backdrop blur, transparency, and depth
   
   BROWSER REQUIREMENTS:
   ════════════════════════════════════════════════════════════════
   FULL SUPPORT (with backdrop-filter glassmorphism):
   - Chrome 76+ (released July 2019)
   - Firefox 103+ (released July 2022)
   - Safari 9+ with -webkit-backdrop-filter prefix (released September 2015)
   - Safari 15.4+ without prefix (released March 2022)
   - Edge 79+ (released January 2020, Chromium-based)
   - Chrome Mobile 76+ (Android)
   - Safari Mobile iOS 9+ (iPhone/iPad)
   
   FALLBACK SUPPORT (solid background, no blur effect):
   - Firefox <103 (gets solid white background)
   - Chrome <76 (gets solid white background)
   - Safari <9 (gets solid white background)
   - Internet Explorer 11 (gets solid white background)
   - Legacy Edge <79 (gets solid white background)
   
   IMPLEMENTATION STRATEGY:
   1. Base styles use solid background fallback (rgba(255,255,255,0.95))
   2. @supports rule detects backdrop-filter capability
   3. Modern browsers get enhanced glassmorphism with transparency
   4. Fallback browsers get readable solid background
   5. All browsers get consistent border, shadow, and layout
   
   References: TR3 (Glassmorphism Browser Support), NFR3 (Browser Compatibility)
   ════════════════════════════════════════════════════════════════ */

/* Glass Surface - Main glassmorphism utility class
   Base styles with solid background fallback for unsupported browsers */
.glass-surface {
  /* FALLBACK: Solid background for browsers without backdrop-filter support
     Provides high-opacity white (95%) for proper text readability and contrast
     Ensures WCAG AA compliance even without glassmorphism effect
     Used by: Firefox <103, Chrome <76, Safari <9, IE11, Legacy Edge */
  background: rgba(255, 255, 255, 0.95);
  
  /* Semi-transparent border - works in all browsers */
  border: 1px solid var(--glass-border);
  
  /* Layered box-shadow for depth - works in all browsers */
  box-shadow: var(--glass-shadow);
  
  /* Border radius - works in all browsers */
  border-radius: var(--radius-xl);
  
  /* Performance optimizations for animated elements
     will-change hints GPU acceleration for better performance
     contain isolates element for paint/layout optimization */
  will-change: transform, opacity;
  contain: layout style paint;
}

/* ENHANCED GLASSMORPHISM for modern browsers with backdrop-filter support
   Feature detection using @supports ensures progressive enhancement
   Browsers with support: Chrome 76+, Firefox 103+, Safari 9+, Edge 79+
   
   The @supports rule checks for both unprefixed and -webkit- prefixed versions
   to ensure maximum compatibility across all modern browsers */
@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
  .glass-surface {
    /* Replace solid background with gradient transparency
       Gradient provides depth with varying opacity levels:
       - 95% at top (strong)
       - 75% in middle (light)
       - 92% at bottom (medium)
       This creates subtle visual depth while maintaining readability */
    background: var(--glass-bg);
    
    /* Backdrop filter: blur(20px) for frosted glass effect
       saturate(180%) enhances colors behind the glass
       Both prefixed and unprefixed versions ensure Safari compatibility */
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    
    /* Note: The gradient background provides semi-transparency while
       backdrop-filter creates the actual blur effect on content behind.
       Together they create the premium glassmorphism aesthetic. */
  }
}

/* Glass Mirror - Mirror reflection effect with diagonal shine overlay
   
   BROWSER REQUIREMENTS:
   ════════════════════════════════════════════════════════════════
   - Works in all modern browsers (uses standard CSS features)
   - ::before pseudo-element: Chrome 1+, Firefox 1+, Safari 1+, Edge 12+, IE 8+
   - linear-gradient: Chrome 26+, Firefox 16+, Safari 6.1+, Edge 12+, IE 10+
   - mix-blend-mode: Chrome 41+, Firefox 32+, Safari 8+, Edge 79+
   - Fallback for IE/Legacy Edge: gradient displays but without blend mode
   
   The mirror effect enhances glassmorphism with a diagonal light reflection,
   creating a premium chrome-like finish on glass surfaces. */
.glass-mirror {
  /* Base element settings for pseudo-element positioning */
  position: relative;
  overflow: hidden;
}

.glass-mirror::before {
  /* Pseudo-element for mirror shine effect
     Creates diagonal light reflection overlay across the glass surface */
  content: "";
  position: absolute;
  inset: 0;
  
  /* Diagonal gradient shine (transparent → white → transparent at 135deg)
     Simulates light reflection at 135-degree angle across the surface:
     - 30%: Transparent start (no shine on edges)
     - 50%: White peak at 60% opacity (maximum reflection in center)
     - 70%: Transparent end (fade out on opposite edge)
     This creates a realistic chrome-like shine effect */
  background: linear-gradient(135deg,
    transparent 30%,
    rgba(255, 255, 255, 0.6) 50%,
    transparent 70%);
  
  /* Opacity and blend mode for subtle overlay effect
     opacity: 0.4 reduces overall shine intensity
     mix-blend-mode: overlay blends with underlying content for natural effect
     Note: mix-blend-mode not supported in IE11/Legacy Edge, but gracefully degrades */
  opacity: 0.4;
  mix-blend-mode: overlay;
  
  /* Ensure shine doesn't interfere with mouse/touch interactions
     Clicks and hovers pass through to underlying content */
  pointer-events: none;
}

/* btn-inverse — koyu zemin üzeri beyaz buton */
.btn-inverse{background:transparent;color:var(--color-white);border:1.5px solid rgba(255,255,255,.7)}
.btn-inverse:hover{background:rgba(255,255,255,.1);border-color:var(--color-white)}