/* ═══════════════════════════════════════════════════════════════
   EKINTERA — Tasarım Sistemi Değişkenleri
   Tüm renk, tipografi, boşluk ve yüzey değerleri BURADA tanımlıdır.
   Bir rengi değiştirmek için tek yer burasıdır; başka dosyada
   çıplak renk kodu (#hex) kullanılmaz.
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ── Marka renkleri ─────────────────────────────────────────
       Marka paletindeki ham değerler. Metin için kullanılacak
       tonlar aşağıda ayrıca türetilmiştir (kontrast sebebiyle). */
    --brand-green-900: #173F35;   /* ana koyu yeşil */
    --brand-green-600: #3F735C;   /* ikincil yeşil  */
    --brand-green-300: #A9C7A7;   /* açık doğal yeşil */
    --brand-cream:     #F5F1E8;   /* krem arka plan */
    --brand-earth:     #A87449;   /* toprak tonu    */
    --brand-ink:       #17211D;   /* koyu metin     */
    --brand-white:     #FFFFFF;

    /* ── Türetilmiş tonlar ──────────────────────────────────────
       Ara tonlar; hover, kenarlık ve katman ayrımı içindir. */
    --green-950: #0F2C25;
    --green-800: #1D5044;
    --green-700: #2C5A48;
    --green-500: #4E8A6E;
    --green-400: #7BA98F;
    --green-200: #C8DCC5;
    --green-100: #E4EEE1;
    --green-50:  #F1F6EF;

    /* Toprak tonunun metin için güvenli koyu varyantı.
       Ham --brand-earth krem üzerinde 3.5:1 kalıyor; gövde metni
       için yetersiz. Bu yüzden metinde --earth-ink kullanılır. */
    --earth-ink:  #8A5D38;
    --earth-soft: #E8DBCC;

    --cream-deep: #EDE7DA;   /* krem üzerinde hafif katman ayrımı */

    /* ── Anlamsal renkler ───────────────────────────────────────
       Bileşenler bu isimleri kullanır, ham renkleri değil. */
    --surface:            var(--brand-cream);
    --surface-raised:     var(--brand-white);
    --surface-sunken:     var(--cream-deep);
    --surface-inverse:    var(--brand-green-900);
    --surface-inverse-2:  var(--green-950);

    --text-strong:   var(--brand-ink);
    --text-body:     #35423C;
    --text-muted:    #5C6A63;
    --text-on-dark:  var(--brand-white);
    --text-on-dark-muted: var(--brand-green-300);

    --accent:        var(--brand-green-600);
    --accent-strong: var(--brand-green-900);
    --accent-soft:   var(--brand-green-300);

    --border:        #DCD5C6;
    --border-strong: #C6BDA9;
    --border-on-dark: rgba(255, 255, 255, .14);

    --focus-ring: #1F6F52;

    /* Durum renkleri (form geri bildirimi) */
    --state-ok:      #2F7D5B;
    --state-ok-bg:   #E8F3ED;
    --state-error:   #A33A2A;
    --state-error-bg:#FBEDEA;
    --state-warn:    var(--earth-ink);

    /* ── Tipografi ──────────────────────────────────────────────
       Tek aile kullanılır; hiyerarşi ağırlık ve boyutla kurulur.
       Fallback zinciri Türkçe karakterleri eksiksiz destekler. */
    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Akışkan tipografi: clamp() sayesinde mobilde başlık taşmaz,
       masaüstünde küçük kalmaz. Ara kırılım noktası gerekmez. */
    --fs-display: clamp(2.15rem, 1.35rem + 3.55vw, 4.25rem);
    --fs-h1:      clamp(1.95rem, 1.35rem + 2.6vw, 3.35rem);
    --fs-h2:      clamp(1.65rem, 1.22rem + 1.85vw, 2.6rem);
    --fs-h3:      clamp(1.18rem, 1.02rem + .65vw, 1.5rem);
    --fs-h4:      clamp(1.02rem, .96rem + .28vw, 1.18rem);
    --fs-lead:    clamp(1.02rem, .96rem + .42vw, 1.22rem);
    --fs-body:    1rem;
    --fs-sm:      .9375rem;
    --fs-xs:      .8125rem;
    --fs-2xs:     .75rem;

    --lh-tight:  1.12;
    --lh-snug:   1.28;
    --lh-normal: 1.6;
    --lh-relaxed:1.72;

    --ls-tight:  -.022em;
    --ls-snug:   -.012em;
    --ls-wide:   .08em;

    /* Okunabilirlik için satır uzunluğu sınırları */
    --measure:       64ch;
    --measure-tight: 48ch;

    /* ── Boşluk ölçeği ──────────────────────────────────────── */
    --sp-1:  .25rem;
    --sp-2:  .5rem;
    --sp-3:  .75rem;
    --sp-4:  1rem;
    --sp-5:  1.25rem;
    --sp-6:  1.5rem;
    --sp-8:  2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
    --sp-24: 6rem;

    /* Bölüm dikey boşluğu — ekran genişliğiyle birlikte büyür */
    --section-y: clamp(3.5rem, 2.2rem + 5.5vw, 6.75rem);

    /* ── Yerleşim ───────────────────────────────────────────── */
    --container:      1180px;
    --container-tight: 780px;
    --gutter: clamp(1.15rem, .75rem + 1.85vw, 2.5rem);
    --nav-h: 72px;

    /* ── Köşe yarıçapı — orta seviye, abartısız ─────────────── */
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
    --r-pill: 999px;

    /* ── Gölgeler — doğal, yumuşak, düşük opaklık ───────────── */
    --sh-xs: 0 1px 2px rgba(23, 33, 29, .06);
    --sh-sm: 0 2px 6px rgba(23, 33, 29, .06), 0 1px 2px rgba(23, 33, 29, .04);
    --sh-md: 0 8px 20px rgba(23, 33, 29, .07), 0 2px 6px rgba(23, 33, 29, .04);
    --sh-lg: 0 18px 44px rgba(23, 33, 29, .10), 0 4px 12px rgba(23, 33, 29, .05);
    --sh-inset-top: inset 0 1px 0 rgba(255, 255, 255, .55);

    /* ── Hareket ────────────────────────────────────────────── */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --dur-fast: 140ms;
    --dur: 240ms;
    --dur-slow: 520ms;

    /* ── Katman sırası ──────────────────────────────────────── */
    --z-base: 1;
    --z-sticky: 100;
    --z-nav: 200;
    --z-drawer: 300;
    --z-toast: 400;
}

/* Hareket azaltma tercihi: tüm geçiş ve animasyonlar susturulur.
   Sadece süre kısaltılmaz, tamamen kapatılır ki vestibüler
   rahatsızlık yaşayan kullanıcılar etkilenmesin. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}