/* variables.css
   ------------------------------------------------------------
   Tüm renk / boşluk / süre değerleri burada. Tasarımı değiştirmek
   isterseniz önce burayı düzenleyin, çoğu bileşen buna bağlı.
   ------------------------------------------------------------ */
:root {
    /* Renkler */
    --color-bg-page: #ffffff;
    --color-bg-dark: #0D0D0D;
    --color-text: #0D0D0D;
    --color-text-light: #ffffff;
    --color-text-muted: rgba(255, 255, 255, 0.72);
    --color-accent: #EF7D22;      /* marka turuncusu — oklar, ikonlar, aksanlar */
    --color-border-light: rgba(255, 255, 255, 0.18);
    --color-card-bg: rgba(0, 0, 0, 0.35);

    /* Tipografi */
    --font-base: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --fs-h1: clamp(24px, 3.2vw, 40px);
    --fs-h2: clamp(20px, 2.4vw, 28px);
    --fs-body: 16px;
    --fs-small: 13px;

    /* Yerleşim */
    --radius-hero: 32px;
    --radius-card: 18px;
    --radius-pill: 999px;
    --header-height: 92px;

    /* Geçiş süreleri */
    --ease-default: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 250ms;
    --dur-base: 500ms;
    --dur-slow: 900ms;

    /* z-index katmanları */
    --z-splash: 100;
    --z-header: 40;
    --z-modal: 200;
}