/* =============================================================
   CHATOPYA — Tasarım Sistemi: Token Katmanı
   -------------------------------------------------------------
   main.css ve chatopya-custom.css'ten SONRA yüklenir.
   Tek görevi: tüm renk / tipografi / boşluk değerlerini tek bir
   kaynaktan tanımlamak ve eski değişkenleri buraya bağlamak.
   Bileşen stilleri chatopya-components.css dosyasındadır.
   ============================================================= */

:root {
  /* ---------- Renk: marka ---------- */
  --cy-brand:        #075E54;  /* birincil marka yeşili */
  --cy-brand-600:    #0A7A6D;  /* hover / açık varyant */
  --cy-brand-050:    #E3F7EC;  /* rozet ve ikon zeminleri */

  /* ---------- Renk: aksiyon ----------
     #25D366 ASLA metin rengi olarak kullanılmaz; üzerine beyaz
     yazı erişilebilirlik testini geçmez. Zemin olarak kullanılır
     ve üzerine --cy-action-ink yazılır. */
  --cy-action:       #25D366;
  --cy-action-600:   #1FBA59;
  --cy-action-ink:   #06231F;

  /* ---------- Renk: mürekkep / nötr ---------- */
  --cy-ink-900:      #0B1F1C;  /* başlıklar, birincil metin */
  --cy-ink-700:      #24403A;  /* gövde metni */
  --cy-ink-500:      #47605A;  /* ikincil metin (AA geçer) */
  --cy-ink-400:      #6E827D;  /* üçüncül, yalnız büyük punto */
  --cy-ink-300:      #8FA39E;  /* yalnız ikon ve ayraç */
  --cy-ink-200:      #C6D4D0;  /* kuvvetli kenarlık */
  --cy-ink-100:      #DCE6E3;  /* varsayılan kenarlık */
  --cy-ink-050:      #EEF3F1;  /* ince ayraç */

  /* ---------- Renk: yüzey ---------- */
  --cy-surface:      #FFFFFF;
  --cy-surface-alt:  #F7FBF9;  /* dönüşümlü bölüm zemini */
  --cy-surface-sunk: #F2F7F5;
  --cy-surface-dark: #0B1F1C;  /* koyu bölümler ve footer */
  --cy-surface-dark-2: #16332D;
  --cy-border-dark:  #27473F;
  --cy-on-dark:      #B9D4CC;  /* koyu zemin üzerinde gövde metni */

  /* ---------- Renk: durum ---------- */
  --cy-warn:         #FFB020;
  --cy-warn-050:     #FFF1D6;
  --cy-warn-ink:     #7A4B00;
  --cy-danger:       #D92D20;

  /* ---------- Tipografi ---------- */
  --cy-font-display: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cy-font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --cy-text-xs:      0.8125rem;  /* 13 — etiket */
  --cy-text-sm:      0.9375rem;  /* 15 — küçük metin */
  --cy-text-base:    1.0625rem;  /* 17 — gövde */
  --cy-text-lg:      1.25rem;    /* 20 — giriş paragrafı */
  --cy-text-xl:      1.5rem;     /* 24 — h4 */
  --cy-text-2xl:     1.875rem;   /* 30 — h3 */
  --cy-text-3xl:     2.375rem;   /* 38 — h2 */
  --cy-text-4xl:     3.375rem;   /* 54 — h1 */

  --cy-leading-tight: 1.1;
  --cy-leading-snug:  1.25;
  --cy-leading-body:  1.7;

  --cy-tracking-tight: -0.022em;
  --cy-tracking-wide:  0.12em;

  /* ---------- Boşluk (4px tabanlı) ---------- */
  --cy-space-1:  0.25rem;
  --cy-space-2:  0.5rem;
  --cy-space-3:  0.75rem;
  --cy-space-4:  1rem;
  --cy-space-6:  1.5rem;
  --cy-space-8:  2rem;
  --cy-space-12: 3rem;
  --cy-space-16: 4rem;
  --cy-space-24: 6rem;   /* masaüstü bölüm dolgusu */

  --cy-section-y:       6rem;
  --cy-section-y-mobile: 3.5rem;
  --cy-container:       1200px;
  --cy-measure:         70ch;  /* okunabilir satır uzunluğu */

  /* ---------- Köşe yarıçapı ---------- */
  --cy-radius-sm:  8px;
  --cy-radius:     12px;
  --cy-radius-lg:  16px;
  --cy-radius-xl:  20px;
  --cy-radius-pill: 999px;

  /* ---------- Gölge (ölçülü kullanılır) ---------- */
  --cy-shadow-sm: 0 1px 2px rgba(11, 31, 28, 0.06);
  --cy-shadow:    0 4px 16px rgba(11, 31, 28, 0.08);
  --cy-shadow-lg: 0 12px 40px rgba(11, 31, 28, 0.12);

  /* ---------- Hareket ---------- */
  --cy-duration:   200ms;
  --cy-duration-lg: 400ms;
  --cy-ease:       cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Katman ---------- */
  --cy-z-header: 1000;
  --cy-z-drawer: 1100;
}

/* =============================================================
   Eski değişkenlerin yeni sisteme bağlanması
   -------------------------------------------------------------
   main.css ve chatopya-custom.css bu isimleri kullanıyor. Burada
   yeniden tanımlayarak mevcut 7 sayfanın tamamı tek seferde yeni
   tipografi ve renk sistemine geçiyor — markup'a dokunmadan.
   ============================================================= */

:root {
  /* main.css tipografi değişkenleri */
  --default-font: var(--cy-font-body);
  --heading-font: var(--cy-font-display);
  --nav-font:     var(--cy-font-body);

  /* main.css renk değişkenleri */
  --background-color: var(--cy-surface);
  --default-color:    var(--cy-ink-700);
  --heading-color:    var(--cy-ink-900);
  --accent-color:     var(--cy-brand);
  --surface-color:    var(--cy-surface);
  --contrast-color:   #ffffff;

  --nav-color:                    var(--cy-ink-700);
  --nav-hover-color:              var(--cy-brand);
  --nav-mobile-background-color:  var(--cy-surface);
  --nav-dropdown-background-color: var(--cy-surface);
  --nav-dropdown-color:           var(--cy-ink-700);
  --nav-dropdown-hover-color:     var(--cy-brand);

  /* chatopya-custom.css değişkenleri */
  --wa-green:    var(--cy-action);
  --wa-dark:     var(--cy-brand);
  --wa-light:    var(--cy-brand-050);
  --primary:     var(--cy-brand);
  --primary-dark: var(--cy-brand-600);
  --dark:        var(--cy-ink-900);
  --dark-2:      var(--cy-surface-dark-2);
  --text-muted:  var(--cy-ink-500);
  --section-bg:  var(--cy-surface-alt);
  --border-radius: var(--cy-radius-lg);
  --shadow:       var(--cy-shadow);
  --shadow-hover: var(--cy-shadow-lg);
  --transition:   all var(--cy-duration) var(--cy-ease);
}

/* =============================================================
   Temel katman
   ============================================================= */

body {
  font-family: var(--cy-font-body);
  font-size: var(--cy-text-base);
  line-height: var(--cy-leading-body);
  color: var(--cy-ink-700);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--cy-font-display);
  color: var(--cy-ink-900);
  letter-spacing: var(--cy-tracking-tight);
  line-height: var(--cy-leading-snug);
}

h1 { line-height: var(--cy-leading-tight); }

strong, b { font-weight: 700; }

/* Okunabilir satır uzunluğu — serbest metin bloklarında */
.cy-measure { max-width: var(--cy-measure); }

/* ---- Odak halkası: klavye kullanıcıları için görünür ---- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--cy-brand-600);
  outline-offset: 2px;
  border-radius: var(--cy-radius-sm);
}

/* ---- Ekran okuyucuya özel ---- */
.cy-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- İçeriğe atla bağlantısı ---- */
.cy-skip-link {
  position: absolute;
  top: -100px;
  left: var(--cy-space-4);
  z-index: calc(var(--cy-z-header) + 10);
  background: var(--cy-surface);
  color: var(--cy-ink-900);
  font-weight: 700;
  padding: var(--cy-space-3) var(--cy-space-4);
  border-radius: var(--cy-radius);
  box-shadow: var(--cy-shadow-lg);
  text-decoration: none;
  transition: top var(--cy-duration) var(--cy-ease);
}
.cy-skip-link:focus { top: var(--cy-space-4); }

/* ---- Görsellerde düzen kayması (CLS) önleme ---- */
img { max-width: 100%; height: auto; }

/* ---- Kaydırma çubuğu ---- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--cy-surface-sunk); }
::-webkit-scrollbar-thumb {
  background: var(--cy-ink-200);
  border-radius: var(--cy-radius-pill);
  border: 2px solid var(--cy-surface-sunk);
}
::-webkit-scrollbar-thumb:hover { background: var(--cy-ink-300); }

/* =============================================================
   Hareket disiplini
   Kullanıcı sistemde "hareketi azalt" seçtiyse animasyon yok.
   AOS dahil tüm geçişler devre dışı bırakılır.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}