/* WebAction tasarım sistemi · v0.1 · 27.09.2026
   Kaynak: Kurumsal Kimlik Kılavuzu (marka-kiti). Renk değerleri kitle birebir aynıdır;
   yeni bir marka rengi eklenmez, yalnız bunların saydam kullanımları vardır.
   Renk dengesi: %60 beyaz/açık gri · %30 Mor 90 ve koyu · %10 Mor 40 vurgu. */

:root {
  /* Marka paleti (webaction-renkler.css ile aynı) */
  --wa-mor-10: #D1C1FF;
  --wa-mor-40: #873EFF;   /* ana renk: buton, bağlantı, vurgu */
  --wa-mor-50: #720EEC;   /* üzerine gelme */
  --wa-mor-70: #5007AA;   /* basılı durum */
  --wa-mor-90: #2C045D;   /* koyu zemin, alt bilgi */
  --wa-siyah: #000000;
  --wa-beyaz: #FFFFFF;
  --wa-gri: #6E6E73;
  --wa-acik-gri: #F5F5F7;

  /* Anlamsal renkler: açık zemin */
  --bg: var(--wa-beyaz);
  --bg-soft: var(--wa-acik-gri);
  --text: var(--wa-siyah);
  --text-2: var(--wa-gri);
  --line: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.14);
  --accent: var(--wa-mor-40);
  --accent-hover: var(--wa-mor-50);
  --accent-press: var(--wa-mor-70);
  --accent-soft: rgba(135, 62, 255, 0.08);

  /* Anlamsal renkler: koyu zemin (Mor 90) */
  --dark-bg: var(--wa-mor-90);
  --dark-text: var(--wa-beyaz);
  --dark-text-2: rgba(255, 255, 255, 0.72);
  --dark-line: rgba(255, 255, 255, 0.14);

  /* Cam: yalnız Mor 90 zeminin üstünde kullanılır */
  --glass-bg: rgba(255, 255, 255, 0.07);
  --glass-bg-strong: rgba(255, 255, 255, 0.11);
  --glass-border: rgba(255, 255, 255, 0.16);
  /* Bulanıklaştırmasız cam: üstten aydınlık, alta doğru saydamlaşan beyaz + hafif mor taban (arkadaki çizgileri yumuşatır) */
  --glass-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.05) 100%), rgba(44, 4, 93, 0.35);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --glass-blur: blur(20px) saturate(140%);
  --glass-fallback: rgba(60, 14, 118, 0.92); /* bulanıklık desteklenmezse */

  /* Yazı: Poppins 400 metin · 500 etiket · 600 başlık */
  --font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-xs: 0.8125rem;   /* 13 */
  --fs-sm: 0.9375rem;   /* 15 */
  --fs-base: 1.0625rem; /* 17 */
  --fs-lg: 1.25rem;     /* 20 */
  --fs-h3: 1.375rem;    /* 22 */
  --fs-h2: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --fs-h1: clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem);
  --lh-text: 1.6;
  --lh-head: 1.2;

  /* Boşluk: 4/8 ritmi */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --container: 1200px;
  --gutter: clamp(16px, 4vw, 32px);

  /* Köşe ve gölge */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-full: 999px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(44, 4, 93, 0.06);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.04), 0 16px 40px rgba(44, 4, 93, 0.12);

  /* Animasyon: yalnız transform ve opacity */
  --d-fast: 150ms;   /* düğme, üzerine gelme */
  --d-base: 250ms;   /* kart, menü */
  --d-slow: 400ms;   /* bölüm girişi */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 0ms; --d-base: 0ms; --d-slow: 0ms; }
}