/* Zeytrade — Tasarım Token'ları
   "Cinematic" yeniden tasarım (claude.ai/design projesinden): koyu lacivert zemin +
   amber vurgu, kinetik tipografi, JetBrains Mono ile teknik/etiket metinleri.
   Marka mavisi/gümüşü (gerçek logodan örneklenen #053DA0 / #8FA0B8) arka plan
   glow'ları ve ikincil ikonlarda korunur — amber tek/asıl vurgu rengidir.
   Breakpoint'ler Bootstrap 5 grid ile hizalıdır: 576 / 768 / 992 / 1200 / 1400px
   (CSS custom properties @media içinde kullanılamadığından burada referans olarak not edilmiştir). */

:root {
    /* Lacivert / marka mavisi skalası (arka planlar) */
    --zt-navy-950: #050E24;
    --zt-navy-900: #0A1B42;
    --zt-navy-850: #071231;
    --zt-navy-800: #0F2657;
    --zt-navy-700: #15346F;
    --zt-navy-600: #1D4489;

    /* Marka mavisi (logo "ZEY") — arka plan glow'ları, ikincil vurgu */
    --zt-blue-700: #082F86;
    --zt-blue-600: #0A3894;
    --zt-blue-500: #0B3FA3;
    --zt-blue-400: #2F62C4;
    --zt-blue-glow: #4C8DFF;

    /* Amber — asıl vurgu rengi (cinematic redesign) */
    --zt-amber-600: #E8901A;
    --zt-amber-500: #FFA83D;
    --zt-amber-400: #FFC176;

    /* Gümüş-mavi (logo "TRADE" + halka) — nötr ikon/metin tonları */
    --zt-silver-100: #F3F5F8;
    --zt-silver-200: #E4E8EE;
    --zt-silver-300: #C7CEDA;
    --zt-silver-400: #A9B4C4;
    --zt-silver-500: #8FA0B8;
    --zt-silver-600: #6B7C93;

    /* Nötr skala */
    --zt-white: #FFFFFF;
    --zt-gray-50: #F6F8FB;
    --zt-gray-100: #EDF1F6;
    --zt-gray-200: #E0E6EE;
    --zt-gray-500: #5B6B84;
    --zt-gray-900: #0E1524;

    /* Durum renkleri */
    --zt-success: #2F9E62;
    --zt-danger: #E1495A;

    /* Fonksiyonel token'lar */
    --color-bg: var(--zt-navy-950);
    --color-bg-alt: var(--zt-navy-850);
    --color-surface: var(--zt-white);
    --color-text: var(--zt-silver-200);
    --color-text-muted: rgba(228, 232, 238, 0.62);
    --color-border: rgba(255, 255, 255, 0.1);
    --color-accent: var(--zt-amber-500);
    --color-accent-strong: var(--zt-amber-600);
    --color-accent-soft: rgba(255, 168, 61, 0.12);
    --color-glow: var(--zt-blue-glow);
    --color-dark-bg: var(--zt-navy-900);
    --color-dark-bg-alt: var(--zt-navy-800);
    --color-dark-text: var(--zt-white);
    --color-dark-text-muted: rgba(228, 232, 238, 0.72);
    --color-dark-border: var(--zt-navy-700);

    /* Glassmorphism token'ları — ui-ux-pro-max glassmorphism spesifikasyonu:
       blur 10-20px, translucent white 15-30% opaklık, border ~%20 opaklık */
    --glass-bg: rgba(15, 38, 87, 0.6);
    --glass-bg-light: rgba(255, 255, 255, 0.13);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-border-strong: rgba(255, 255, 255, 0.32);
    --glass-blur: 16px;
    --glass-shadow: 0 8px 32px rgba(5, 14, 36, 0.35);

    /* Tipografi */
    --font-heading: 'Barlow Semi Condensed', 'Arial Narrow', Arial, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.375rem;
    --fs-xl: 1.75rem;
    --fs-2xl: 2.25rem;
    --fs-3xl: 2.75rem;
    --fs-4xl: 3.5rem;

    --lh-tight: 1.15;
    --lh-normal: 1.5;
    --lh-relaxed: 1.7;

    /* Boşluk skalası (4px taban) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;

    /* Diğer */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 24px;
    --radius-pill: 999px;
    --shadow-sm: 0 2px 8px rgba(5, 14, 36, 0.08);
    --shadow-md: 0 12px 32px rgba(5, 14, 36, 0.14);
    --shadow-lg: 0 24px 64px rgba(5, 14, 36, 0.28);
    --shadow-glow: 0 8px 28px rgba(76, 141, 255, 0.35);
    --shadow-glow-amber: 0 8px 28px rgba(255, 168, 61, 0.35);
    --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
    --header-height: 78px;
    --header-height-scrolled: 64px;

    /* Yatay kenar boşluğu — header/hero/track/footer gibi .container-zt kullanmayan
       tam-genişlik bölümlerde tutarlı, duyarlı (responsive) gutter sağlar. */
    --gutter: 2.5rem;
}

@media (max-width: 991.98px) {
    :root { --gutter: 1.5rem; }
}

@media (max-width: 575.98px) {
    :root { --gutter: 1rem; }
}