/* =========================================================== ALVEXA — TASARIM TOKENLARI Tüm renk, tipografi, boşluk ve ölçü kararları burada. Başka hiçbir CSS dosyasında sabit renk/px yazılmaz — her şey bu değişkenler üzerinden kullanılır. =========================================================== */ :root { /* ------------------------------------------------------- RENK — marka paleti Müşteri görsellerinden ve referans siteden doğrulandı. ------------------------------------------------------- */ --sage: #788a63; /* adaçayı yeşili — ikon, vurgu, birincil buton */ --sage-dark: #5f6f4d; /* hover / basılı hâl */ --sage-light: #93a381; /* açık zemin üzeri ince vurgu */ --sage-tint: #eef1ea; /* çok açık adaçayı — yumuşak zemin */ --taupe: #cda787; /* sıcak bej — YALNIZCA koyu zeminde metin (ink üstünde 7.6:1) */ --taupe-dark: #b58e6c; /* koyu zeminde bej hover */ --taupe-tint: #f6efe8; /* çok açık bej zemin */ /* PROMPT 8 — ÖLÇÜLMÜŞ KONTRAST DÜZELTMESİ. --taupe açık zeminde 1.94–2.22:1 veriyordu; WCAG AA normal metin için 4.5:1 gerekiyor. Açık zeminde geçen HER bej metin bu tonu kullanır (beyaz 5.19:1 · #f1f1f1 4.60:1 · #eef1ea 4.55:1). Koyu zeminde --taupe olduğu gibi kalır. */ --taupe-text: #8b6545; /* --sage üzerine BEYAZ metin 3.74:1 veriyordu. Dolgu butonların zemini bu ton (beyaz üstünde 4.52:1); göze --sage ile neredeyse aynı, hover yine --sage-dark. */ --sage-solid: #6b7c57; /* Açık zeminde kullanılabilecek EN AÇIK nötr metin rengi (beyaz 4.57:1 · #f1f1f1 4.05:1). Sönük görünmesi istenen ama okunması gereken metinler için: marka duvarı, harita bulutu. */ --text-faint: #767670; --ink: #1d1d1b; /* koyu zemin ve başlık rengi */ --ink-soft: #2b2b28; /* koyu zemin üzeri kart / ayrım katmanı */ --ink-muted: #5a5a55; /* ikincil metin */ --white: #ffffff; --gray-bg: #f1f1f1; /* açık bölüm zemini */ --gray-line: #dcdcd8; /* ince ayraç çizgisi */ --text: var(--ink); /* açık zeminde gövde metni */ --text-muted: var(--ink-muted); --text-on-dark: #f4f4f2; /* koyu zeminde gövde metni */ --text-on-dark-muted: #a8a8a2; --focus-ring: var(--sage); /* klavye odak halkası */ /* Form doğrulama — PROMPT 7'de eklendi (iletisim.html). Marka paletinde kırmızı yok; hata rengi ayrı bir işlev rengi. #b3261e beyaz zeminde 4.9:1 — WCAG AA metin eşiğini geçiyor. Hatalı alanda RENK TEK İŞARET DEĞİL: kenar da kalınlaşıyor. */ --error: #b3261e; --error-tint: #fdecea; --overlay: rgba(29, 29, 27, 0.55); /* koyu görsel üzeri karartma */ --overlay-strong: rgba(29, 29, 27, 0.75); /* BİLİNÇLİ İSTİSNA — token'a çevrilmeyen saydam değerler. Sayfa CSS'lerinde kalan `rgba(255,255,255,α)` ve `rgba(29,29,27,α)` değerleri iki yerde geçer: 1) gradyan durakları — her gradyanın kendi eğrisi var, ortak bir token'a indirgenemez; 2) koyu yüzey üzeri saçak/dolgu — her biri o bileşenin zeminine göre ayarlanmış tek kullanımlık alfa. Marka renkleri (adaçayı/bej/mürekkep) İSTİSNASIZ buradan gelir; sabit hex hiçbir sayfa CSS'inde yoktur. */ /* Ana sayfa hero'su AYDINLIK bir fotoğraf ve yazı koyu. Karartma değil, AÇIK bir perde (scrim) gerekiyor. */ --scrim-light: rgba(255, 255, 255, 0.88); --scrim-light-soft: rgba(255, 255, 255, 0.5); /* ------------------------------------------------------- TİPOGRAFİ Montserrat yerel (css/fonts.css). Yedek yığın, font yüklenmezse Türkçe ve Kiril'i doğru gösteren sistem fontlarına düşer. ------------------------------------------------------- */ --font-sans: 'Montserrat', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Akışkan ölçek: 360px ↔ 1440px arasında yumuşak büyür */ --fs-xs: clamp(0.6875rem, 0.66rem + 0.14vw, 0.75rem); /* 11 → 12 */ --fs-sm: clamp(0.8125rem, 0.79rem + 0.14vw, 0.875rem); /* 13 → 14 */ --fs-base: clamp(0.9375rem, 0.91rem + 0.14vw, 1rem); /* 15 → 16 */ --fs-md: clamp(1rem, 0.95rem + 0.23vw, 1.125rem); /* 16 → 18 */ --fs-lg: clamp(1.125rem, 1.03rem + 0.42vw, 1.375rem); /* 18 → 22 */ --fs-xl: clamp(1.375rem, 1.21rem + 0.74vw, 1.75rem); /* 22 → 28 */ --fs-2xl: clamp(1.625rem, 1.32rem + 1.39vw, 2.375rem); /* 26 → 38 */ --fs-3xl: clamp(2rem, 1.54rem + 2.04vw, 3rem); /* 32 → 48 */ --fs-4xl: clamp(2.375rem, 1.62rem + 3.33vw, 4.125rem); /* 38 → 66 */ --lh-tight: 1.15; /* büyük başlıklar */ --lh-snug: 1.3; /* orta başlıklar */ --lh-normal: 1.55; /* gövde metni */ --lh-loose: 1.8; /* seyrek, uzun paragraflar */ /* Referans sitede başlıklar geniş harf aralıklı: "R E F E R A N S L A R I M I Z" gibi. */ --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.08em; --ls-wider: 0.18em; /* eyebrow / küçük etiketler */ --ls-widest: 0.32em; /* logo altı slogan, çok küçük etiketler */ /* ------------------------------------------------------- BOŞLUK — 4px tabanlı ölçek ------------------------------------------------------- */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.25rem; /* 20px */ --sp-6: 1.5rem; /* 24px */ --sp-7: 1.75rem; /* 28px */ --sp-8: 2rem; /* 32px */ --sp-10: 2.5rem; /* 40px */ --sp-12: 3rem; /* 48px */ --sp-14: 3.5rem; /* 56px */ --sp-16: 4rem; /* 64px */ --sp-20: 5rem; /* 80px */ --sp-24: 6rem; /* 96px */ /* Bölüm dikey ritmi — mobilde daralır, masaüstünde açılır */ --section-y: clamp(3.5rem, 2.2rem + 5.8vw, 7rem); --section-y-sm: clamp(2.5rem, 1.8rem + 3.1vw, 4rem); --section-gap: clamp(2rem, 1.4rem + 2.7vw, 3.5rem); /* başlık ile içerik arası */ /* ------------------------------------------------------- DÜZEN ------------------------------------------------------- */ --container-max: 1280px; --container-narrow: 880px; /* uzun metin blokları */ --container-pad: clamp(1.25rem, 0.7rem + 2.4vw, 2.5rem); /* 19 Ağu 2026: 88/64 idi. Logo lockup'ında "Alvexa" kelimesinin altında ince bir slogan satırı var; 58px yükseklikte o satır okunmuyordu. Header yükseltilip logoya yer açıldı. */ /* 19 Ağu 2026: logo büyütüldü (82 → 94px), şerit de 6px büyüdü ki logonun alt/üst payı eskisi gibi ~10px kalsın. Menü maddeleri DEĞİŞMEDİ. Hero'ların üst boşluğu, çapa kaydırma payı ve 404 yüksekliği bu iki değerden türüyor. */ --header-h: 114px; /* sabit header yüksekliği */ --header-h-scrolled: 82px; /* scroll'da küçülmüş hâli */ /* ------------------------------------------------------- KENAR, GÖLGE, GEÇİŞ ------------------------------------------------------- */ --radius-sm: 2px; --radius: 4px; --radius-lg: 8px; --radius-full: 999px; --border: 1px solid var(--gray-line); --border-dark: 1px solid rgba(255, 255, 255, 0.14); --shadow-sm: 0 1px 2px rgba(29, 29, 27, 0.06), 0 1px 3px rgba(29, 29, 27, 0.08); --shadow-md: 0 4px 10px rgba(29, 29, 27, 0.08), 0 2px 4px rgba(29, 29, 27, 0.06); --shadow-lg: 0 12px 32px rgba(29, 29, 27, 0.12), 0 4px 10px rgba(29, 29, 27, 0.08); --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition: 260ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 480ms cubic-bezier(0.4, 0, 0.2, 1); --z-header: 100; --z-menu: 200; --z-overlay: 300; } /* ------------------------------------------------------- Kırılım noktaları (JS ve dokümantasyon için referans; CSS custom property'ler @media içinde kullanılamaz) sm 480px büyük telefon md 768px tablet lg 1024px küçük masaüstü xl 1280px masaüstü ------------------------------------------------------- */