/* ========================================================================= BrainFit — Tasarım token'ları ========================================================================= Bu dosya tasarım sisteminin TEK doğruluk kaynağıdır. Renk, tipografi, boşluk, köşe, gölge ve hareket değerleri yalnızca burada tanımlanır; diğer CSS dosyaları bu token'ları kullanır, ham değer yazmaz. Yükleme sırası: styles.css'ten SONRA, bileşen katmanlarından ÖNCE. (styles.css'in :root bloğunu ezmesi gerekiyor.) ÖNEMLİ KURAL — renk kullanımı: Zemin beyaz kalır. Marka renkleri metin rengi olarak KULLANILMAZ; yalnızca buton, ikon, ince çizgi, etiket, SVG ve çağrı alanlarında görünür. Metin her zaman nötr mürekkep tonlarındadır. ÖNEMLİ KURAL — erişilebilirlik: Marka mavisi #54B8E3 beyaz üzerinde 2.25:1 kontrast verir; metin veya beyaz yazılı buton için WCAG AA'yı (4.5:1) GEÇMEZ. Bu yüzden metin ve buton için aynı hue'nun koyulaştırılmış tonları (--bf-accent, --bf-accent-strong) kullanılır. Açık marka mavisi yalnızca dekoratif alanlarda ve koyu yazılı zeminlerde kullanılır. ========================================================================= */ :root { /* --------------------------------------------------------------------- 1. Marka paleti — dekoratif kullanım (SVG, ikon, şerit, desen) ------------------------------------------------------------------ */ --bf-blue: #54B8E3; --bf-orange: #F0B242; --bf-green: #6CB557; --bf-grey: #77787B; --bf-magenta: #BD2D88; --bf-coral: #DF6445; --bf-white: #FFFFFF; /* Kullanıcı şartnamesindeki isimlendirme (SVG'lerde kullanılabilir) */ --brainfit-blue: var(--bf-blue); --brainfit-orange: var(--bf-orange); --brainfit-green: var(--bf-green); --brainfit-gray: var(--bf-grey); --brainfit-magenta: var(--bf-magenta); --brainfit-coral: var(--bf-coral); --brainfit-white: var(--bf-white); /* --------------------------------------------------------------------- 2. Vurgu — metin ve butonda kullanılabilen erişilebilir tonlar (şube rengi panelden değişirse Brand::cssVariables() bunları türetir) ------------------------------------------------------------------ */ --bf-accent: #0076A8; /* beyaz yazı 5.05:1 — buton dolgusu, link */ --bf-accent-strong: #005D85; /* hover 7.23:1 */ --bf-accent-bright: #54B8E3; /* marka mavisi — yalnızca dekoratif */ --bf-accent-soft: #EAF7FD; /* çok açık zemin */ --bf-accent-line: #9DD8F1; /* Pastel tonlar — kenarlardaki büyük dekoratif şekiller için. Dolgu olarak kullanılır; ince çizgi/kontur YOK. Doygunluk korunur, yalnızca açıklık artırılır: renk tanınır kalır. */ --bf-pastel-blue: #CAE9F6; --bf-pastel-blue-soft: #E7F5FB; --bf-pastel-orange: #FAE8C6; --bf-pastel-orange-soft: #FDF4E5; --bf-pastel-green: #DAECD5; --bf-pastel-green-soft: #EEF6EC; --bf-pastel-magenta: #F3CEE5; --bf-pastel-magenta-soft: #FAE8F3; --bf-pastel-coral: #F6D3CB; --bf-pastel-coral-soft: #FBEBE7; --bf-pastel-grey: #E0E0E1; --bf-pastel-grey-soft: #F1F1F1; /* --------------------------------------------------------------------- 3. Nötr ölçek — metin ve yüzeyler ------------------------------------------------------------------ */ --bf-ink: #16191D; /* başlıklar — beyaz üzerinde 17.6:1 */ --bf-ink-2: #454B52; /* gövde metni — 8.8:1 */ --bf-ink-3: #6B7178; /* ikincil / meta — 4.9:1 */ --bf-ink-inverse: #FFFFFF; --bf-surface: #FFFFFF; --bf-surface-2: #F7F9FB; /* açık bölüm zemini */ --bf-surface-3: #EFF3F6; /* kart içi vurgu zemini */ --bf-surface-dark: #10161B; /* koyu bölüm (footer / CTA) */ --bf-line: #E6EAEE; --bf-line-strong: #D3DAE1; /* --------------------------------------------------------------------- 4. Tipografi ------------------------------------------------------------------ */ --bf-font-heading: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --bf-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* Akışkan ölçek — 8 kademe, min 390px / max 1440px arası ölçeklenir */ --bf-fs-display: clamp(2.25rem, 1.35rem + 3.6vw, 3.75rem); /* 36 → 60px */ --bf-fs-h1: clamp(1.875rem, 1.35rem + 2.1vw, 2.75rem); /* 30 → 44px */ --bf-fs-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); /* 24 → 34px */ --bf-fs-h3: clamp(1.1875rem, 1.08rem + 0.42vw, 1.375rem); /* 19 → 22px */ --bf-fs-h4: 1.125rem; /* 18px */ --bf-fs-lg: 1.0625rem; /* 17px — lead */ --bf-fs-base: 1rem; /* 16px */ --bf-fs-sm: 0.875rem; /* 14px */ --bf-fs-xs: 0.8125rem; /* 13px — etiket */ /* Satır yükseklikleri — yalnızca birimsiz */ --bf-lh-tight: 1.15; --bf-lh-heading: 1.25; --bf-lh-snug: 1.45; --bf-lh-body: 1.65; /* Harf aralığı — yalnızca em */ --bf-ls-display: -0.022em; --bf-ls-heading: -0.012em; --bf-ls-body: 0em; --bf-ls-eyebrow: 0.06em; /* Ağırlıklar */ --bf-fw-regular: 400; --bf-fw-medium: 500; --bf-fw-semibold: 600; --bf-fw-bold: 700; /* --------------------------------------------------------------------- 5. Boşluk ölçeği — 4px tabanlı ------------------------------------------------------------------ */ --bf-space-1: 0.25rem; /* 4px */ --bf-space-2: 0.5rem; /* 8px */ --bf-space-3: 0.75rem; /* 12px */ --bf-space-4: 1rem; /* 16px */ --bf-space-5: 1.25rem; /* 20px */ --bf-space-6: 1.5rem; /* 24px */ --bf-space-8: 2rem; /* 32px */ --bf-space-10: 2.5rem; /* 40px */ --bf-space-12: 3rem; /* 48px */ --bf-space-16: 4rem; /* 64px */ --bf-space-20: 5rem; /* 80px */ /* Bölüm dikey ritmi — tek değer, tüm sayfalarda aynı */ --bf-section-y: clamp(3rem, 1.5rem + 4vw, 5rem); /* 48 → 80px */ --bf-section-y-sm: clamp(2rem, 1.25rem + 2.4vw, 3rem); /* 32 → 48px */ --bf-card-pad: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); /* 20 → 28px */ /* --------------------------------------------------------------------- 6. Köşe, gölge, kenarlık ------------------------------------------------------------------ */ --bf-radius-xs: 6px; --bf-radius-sm: 10px; --bf-radius: 14px; --bf-radius-lg: 20px; --bf-radius-xl: 28px; --bf-radius-pill: 999px; --bf-shadow-xs: 0 1px 2px rgba(22, 25, 29, 0.04); --bf-shadow-sm: 0 1px 2px rgba(22, 25, 29, 0.04), 0 2px 8px rgba(22, 25, 29, 0.05); --bf-shadow: 0 4px 16px rgba(22, 25, 29, 0.07); --bf-shadow-lg: 0 12px 32px rgba(22, 25, 29, 0.09); /* --------------------------------------------------------------------- 7. Hareket ------------------------------------------------------------------ */ --bf-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --bf-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --bf-dur-fast: 160ms; --bf-dur: 240ms; --bf-dur-slow: 420ms; --bf-transition: var(--bf-dur) var(--bf-ease); /* Dekoratif SVG animasyon süreleri (şartname: 2-8 s) */ --bf-dur-draw: 2.4s; --bf-dur-pulse: 3.2s; --bf-dur-float: 7s; --bf-dur-orbit: 8s; /* Dekoratif desen opaklığı — panelden ezilebilir */ --bf-pattern-opacity: 0.05; /* --------------------------------------------------------------------- 8. Şablon değişkenlerinin yeniden eşlenmesi --------------------------------------------------------------------- styles.css bu değişkenleri 400+ yerde kullanıyor. Kritik nokta: --Primary şablonda koyu KAHVE, yani bir vurgu rengi değil METİN rengiydi (54 kez `color:`, 2 kez `background`). Vurgu rengine bağlanınca tüm başlıklar renklendi. Doğru eşleme aşağıda. ------------------------------------------------------------------ */ --Black: #000000; --White: var(--bf-surface); --Primary: var(--bf-ink); /* metin/başlık — vurgu DEĞİL */ --Secondary: var(--bf-accent); /* gerçek vurgu (buton, link) */ --Third: var(--bf-orange); /* küçük vurgu, alt çizgi */ --Four: var(--bf-coral); /* sıcak vurgu / uyarı */ --Color-1: var(--bf-surface-2); /* açık yüzey */ --Color-3: var(--bf-ink-2); /* ikincil metin */ --Color-4: var(--bf-ink); /* koyu vurgu */ --Outline: var(--bf-line); --Placeholder: var(--bf-ink-3); --Border: rgba(255, 255, 255, 0.12); } /* Kök font boyutu: şablondaki 62.5% hilesi tüm CSS px olduğu için boşa gidiyordu. rem tabanlı ölçek için 100%'e alınıyor (1rem = 16px). */ html { font-size: 100%; }