/* ===================================================================== FileUSB — TASARIM TOKENLARI Sürüm: 1.0.0 · 10 Eylül 2026 --------------------------------------------------------------------- TEK RENK VE TİPOGRAFİ KAYNAĞI. Bu dosya, canlıda çakışan iki takımın (--fusb-* ve --f23-*) yerine geçer. Eski değişkenler geriye uyumluluk için en altta yeni tokenlara BAĞLANMIŞTIR; böylece mevcut şablonlar bozulmadan geçiş yapılabilir. KURAL: Bileşen CSS'inde ham renk (#hex) YAZILMAZ. Yalnız var() kullanılır. ===================================================================== */ :root { /* --------------------------------------------------------------- 1. MARKA RENKLERİ Ana mavi güven ve teknoloji; ılık kehribar insani sıcaklık verir. Mavi tek başına soğuk kalır — kehribar bunu dengeler. --------------------------------------------------------------- */ --fu-blue-50: #F2F6FE; --fu-blue-100: #EAF0FE; --fu-blue-200: #C9DAFC; --fu-blue-300: #9DBBF8; --fu-blue-400: #5E8CF0; --fu-blue-500: #3568E5; --fu-blue-600: #1B4FD8; /* ANA MARKA RENGİ — beyaz üstünde 6.9:1 */ --fu-blue-700: #1540B0; --fu-blue-800: #123588; --fu-blue-900: #0E2660; /* Ilık vurgu — "Yakında", deneme rozeti, sıcaklık gerektiren yerler */ --fu-amber-100: #FEF3E2; --fu-amber-200: #FBE0BC; --fu-amber-500: #D97706; /* dolgu / ikon */ --fu-amber-700: #B45309; /* beyaz üstünde metin — 4.8:1 */ /* --------------------------------------------------------------- 2. NÖTRLER Saf gri değil, hafif mavi tonlu: marka ile aynı ailede kalır. --------------------------------------------------------------- */ --fu-ink-900: #0E1A2B; /* başlıklar — beyaz üstünde 16.1:1 */ --fu-ink-700: #33415C; /* gövde metni — 9.4:1 */ --fu-ink-500: #5B6880; /* ikincil metin — 5.4:1 */ --fu-ink-400: #8A94A6; /* yalnız dekoratif — METİN İÇİN KULLANMA */ --fu-line: #DCE3ED; --fu-line-strong: #C3CDDC; --fu-surface: #FFFFFF; --fu-canvas: #F6F8FC; --fu-canvas-soft: #EEF3FA; /* --------------------------------------------------------------- 3. DURUM RENKLERİ --------------------------------------------------------------- */ --fu-success-100: #E4F6EF; --fu-success-500: #0E9C74; --fu-success-700: #067A5B; /* beyaz üstünde 4.6:1 */ --fu-warning-100: #FEF3E2; --fu-warning-700: #B45309; --fu-danger-100: #FDECEA; --fu-danger-500: #D93A2B; --fu-danger-700: #B3261E; /* beyaz üstünde 6.2:1 */ /* --------------------------------------------------------------- 4. ANLAMSAL ROLLER (bileşenler BUNLARI kullanır) --------------------------------------------------------------- */ --fu-bg: var(--fu-canvas); --fu-bg-elevated: var(--fu-surface); --fu-bg-soft: var(--fu-blue-50); --fu-text: var(--fu-ink-700); --fu-text-strong: var(--fu-ink-900); --fu-text-muted: var(--fu-ink-500); --fu-text-on-brand: #FFFFFF; --fu-border: var(--fu-line); --fu-border-strong: var(--fu-line-strong); --fu-brand: var(--fu-blue-600); --fu-brand-hover: var(--fu-blue-700); --fu-brand-soft: var(--fu-blue-100); --fu-focus: var(--fu-blue-500); /* --------------------------------------------------------------- 5. TİPOGRAFİ TEK AİLE. Canlıda başlık Inter, gövde sistem yığınıydı — bu tutarsızlık kaldırıldı. Inter yüklenmezse sistem yığınına düşer ve oranlar korunur. --------------------------------------------------------------- */ --fu-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --fu-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; /* Akışkan ölçek — 360 px ile 1440 px arasında yumuşak geçer. Canlıdaki sabit 71.68 px başlık dar ekranda 5 satıra kırılıyordu. */ --fu-fs-display: clamp(2.125rem, 1.45rem + 3.0vw, 3.5rem); /* 34 → 56 */ --fu-fs-h1: clamp(1.875rem, 1.35rem + 2.3vw, 3rem); /* 30 → 48 */ --fu-fs-h2: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem); /* 24 → 34 */ --fu-fs-h3: clamp(1.1875rem, 1.09rem + 0.45vw, 1.5rem); /* 19 → 24 */ --fu-fs-lg: 1.125rem; /* 18 — hero alt metni */ --fu-fs-base: 1rem; /* 16 */ --fu-fs-sm: 0.9375rem; /* 15 */ --fu-fs-xs: 0.8125rem; /* 13 — rozet, etiket */ --fu-lh-display: 1.08; --fu-lh-heading: 1.22; --fu-lh-body: 1.62; --fu-fw-regular: 400; --fu-fw-medium: 500; --fu-fw-semi: 600; --fu-fw-bold: 700; --fu-ls-display: -0.022em; /* iri başlıkta harf arası sıkışır */ --fu-ls-heading: -0.014em; --fu-ls-body: 0; --fu-ls-label: 0.04em; /* küçük etiketlerde açılır */ /* --------------------------------------------------------------- 6. BOŞLUK (4 px tabanlı) --------------------------------------------------------------- */ --fu-sp-1: 4px; --fu-sp-2: 8px; --fu-sp-3: 12px; --fu-sp-4: 16px; --fu-sp-5: 20px; --fu-sp-6: 24px; --fu-sp-8: 32px; --fu-sp-10: 40px; --fu-sp-12: 48px; --fu-sp-16: 64px; --fu-sp-20: 80px; --fu-sp-24: 96px; /* Bölüm ritmi — ÜÇ KADEME. Canlıda her bölüm 88px/88px idi; hiyerarşi yoktu ve sayfa 4.978 px olmuştu. Artık bölümün önemi boşluğuyla anlaşılır. */ --fu-section-lg: clamp(64px, 4vw + 40px, 104px); /* hero, paketler */ --fu-section-md: clamp(48px, 3vw + 30px, 76px); /* normal bölüm */ --fu-section-sm: clamp(32px, 2vw + 20px, 52px); /* şerit, alt bilgi */ /* --------------------------------------------------------------- 7. YARIÇAP, GÖLGE, KENAR --------------------------------------------------------------- */ --fu-r-sm: 8px; --fu-r-md: 12px; --fu-r-lg: 16px; --fu-r-xl: 24px; --fu-r-pill: 999px; --fu-shadow-sm: 0 1px 2px rgba(14, 26, 43, .05); --fu-shadow-md: 0 1px 2px rgba(14, 26, 43, .04), 0 8px 24px -16px rgba(14, 26, 43, .28); --fu-shadow-lg: 0 1px 3px rgba(14, 26, 43, .05), 0 20px 44px -24px rgba(14, 26, 43, .32); /* --------------------------------------------------------------- 8. YERLEŞİM --------------------------------------------------------------- */ --fu-w-text: 68ch; /* okunabilir satır uzunluğu */ --fu-w-narrow: 520px; --fu-w-content:960px; --fu-w-wide: 1160px; --fu-gutter: clamp(16px, 4vw, 32px); /* Dokunma hedefi — mobilde asla altına inilmez */ --fu-tap-min: 44px; /* --------------------------------------------------------------- 9. HAREKET (hafif; asla dikkat dağıtmaz) --------------------------------------------------------------- */ --fu-ease: cubic-bezier(.2, .7, .3, 1); --fu-dur-fast: 120ms; --fu-dur-base: 200ms; --fu-dur-slow: 320ms; --fu-z-header: 100; --fu-z-modal: 400; --fu-z-toast: 500; } /* ===================================================================== KOYU TEMA Not: Aşama 23'te koyu tema canlı değil. Bu blok hazır bırakılmıştır; Astra açmak isterse tek satır yeterlidir. ===================================================================== */ :root[data-theme="dark"] { --fu-bg: #0B1220; --fu-bg-elevated: #131C2E; --fu-bg-soft: #162034; --fu-text: #C7D2E4; --fu-text-strong: #F2F6FC; --fu-text-muted: #8E9DB6; --fu-border: #24304A; --fu-border-strong: #34425F; --fu-brand: #6E9BFF; --fu-brand-hover: #8FB2FF; --fu-brand-soft: #17264A; --fu-focus: #8FB2FF; --fu-text-on-brand: #08132B; --fu-shadow-md: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px -16px rgba(0,0,0,.8); --fu-shadow-lg: 0 1px 3px rgba(0,0,0,.5), 0 20px 44px -24px rgba(0,0,0,.85); } /* ===================================================================== HAREKET AZALTMA — sistem tercihine saygı ===================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --fu-dur-fast: 1ms; --fu-dur-base: 1ms; --fu-dur-slow: 1ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } } /* ===================================================================== GERİYE UYUMLULUK KÖPRÜSÜ --------------------------------------------------------------------- Canlıdaki iki eski takım buradan beslenir. Böylece mevcut şablonlar tek satır değişmeden yeni palete geçer ve renk çakışması biter. Astra geçiş tamamlandıktan sonra bu bloğu silebilir. ===================================================================== */ :root { /* eski --fusb-* takımı */ --fusb-blue: var(--fu-blue-600); --fusb-blue-dark: var(--fu-blue-700); --fusb-blue-soft: var(--fu-blue-100); --fusb-blue-line: var(--fu-blue-200); --fusb-ink: var(--fu-ink-900); --fusb-body: var(--fu-ink-700); --fusb-muted: var(--fu-ink-500); --fusb-line: var(--fu-line); --fusb-line-strong: var(--fu-line-strong); --fusb-surface: var(--fu-surface); --fusb-bg: var(--fu-canvas); --fusb-radius: var(--fu-r-lg); --fusb-radius-sm: var(--fu-r-sm); --fusb-radius-pill: var(--fu-r-pill); --fusb-shadow: var(--fu-shadow-md); --fusb-shadow-lift: var(--fu-shadow-lg); --fusb-w-wide: var(--fu-w-wide); --fusb-w-text: var(--fu-w-text); --fusb-w-narrow: var(--fu-w-narrow); --fusb-pad: var(--fu-sp-6); /* --fusb-teal canlıda tanımlıydı ama HİÇ KULLANILMIYORDU; kaldırıldı. */ /* Aşama 23 --f23-* takımı */ --f23-blue: var(--fu-blue-600); --f23-ink: var(--fu-ink-900); --f23-muted: var(--fu-ink-500); --f23-line: var(--fu-line); --f23-soft: var(--fu-blue-50); }