/* ========================================================================== SB Yapı İnşaat — Tasarım jetonları Renkler APCA ile doğrulandı: design/renk-dogrulama-raporu.txt Altın tonları KARTVİZİT BASKI.pdf'ten piksel örneklemesiyle çıkarıldı. ========================================================================== */ :root { /* --- Marka altını: RESMİ LOGODAN piksel örneklemesiyle ölçüldü (logo.png, 3500px) --- */ /* Gradyan DİKEY: kule tepesi açık, kule dibi koyu. Yatayda düz (#D8A85B ±2). */ --c-gold-deep: #BE822F; /* kule dibi. Koyu zeminde Lc 41.8 -> büyük metin OLMAZ, dolgu olur */ --c-gold-core: #D3A152; /* orta ton + zemin kavisi. Koyu zeminde Lc 56.0 */ --c-gold-bright: #E7BE76; /* kule tepesi. Koyu zeminde Lc 70.8 */ --c-on-gold: #120C04; /* gold-bright dolgu üstündeki etiket. Lc 71.7 */ --c-on-gold-deep: #FFFFFF; /* gold-deep dolgu üstündeki etiket. Lc 65.2 */ /* Logonun kendi gradyanı: dekoratif yüzeyler, çizgiler, ilerleme çubuğu */ --g-gold: linear-gradient(180deg, var(--c-gold-bright) 0%, var(--c-gold-core) 48%, var(--c-gold-deep) 100%); /* Metin gradyanı AYRI. gold-deep koyu zeminde Lc 41.8 ile büyük metin eşiğinin (45) altında kaldığı için metinde kullanılmaz; bu gradyanın her noktası eşiği geçer. */ --g-gold-text: linear-gradient(100deg, var(--c-gold-core) 0%, var(--c-gold-bright) 62%, var(--c-gold-bright) 100%); /* --- DÜĞME GRADYANLARI --- Logo gradyanının TAMAMI tek bir etiket rengiyle okunmuyor: siyah etiket t=0.40'tan sonra, beyaz etiket t=0.85'ten önce eşiği kaybediyor. Çözüm gradyanı bırakmak değil, SINIRLAMAK: her biri logonun kendi gradyanının güvenli bir dilimi. 11 ara noktada tek tek doğrulandı, en kötü değerler yorumlarda. */ /* Birincil: logo gradyanının üst dilimi (kule tepesi -> kule gövdesi). Etiket SİYAH. */ --g-btn: linear-gradient(180deg, #E7BE76 0%, #D8A85B 100%); /* etiket en kötü 61.4 */ --g-btn-hover: linear-gradient(180deg, #F0CB8A 0%, #E0B366 100%); /* etiket en kötü 66.7 */ --c-on-btn: #000000; /* İkincil: logo gradyanının alt dilimi (kule dibi ve altı). Etiket BEYAZ. */ --g-btn2: linear-gradient(180deg, #BE822F 0%, #A66B0C 100%); /* etiket en kötü 65.2 */ --c-on-btn2: #FFFFFF; /* İkincilde hover KOYULAŞMAZ: koyulaşınca dolgu siyah zeminde Lc 30'un altına düşüp kayboluyor. Hover yalnız yükselme + altın halka ile veriliyor. */ /* --- Koyu tema --- */ --c-bg: #0C0A08; --c-surface: #171410; --c-surface-2: #24201B; --c-border: #3C3731; --c-border-strong:#5D5750; --c-text: #F0EEEB; /* Lc 96.7 */ --c-text-muted: #BCB6AF; /* Lc 63.2 */ --c-heading: #FCFAF7; /* Lc 104.6 */ /* --- Açık tema --- */ --c-bg-light: #F7F5F3; --c-surface-light:#ECE9E5; --c-border-light: #D4D0CB; --c-text-on-light:#231E18; /* Lc 97.7 */ --c-muted-on-light:#635C54; /* Lc 76.8 */ --c-gold-on-light:#995600; /* açık zeminde altın metin. Lc 72.3 */ /* --- Cam yüzey (hero istatistik kartı) --- */ --c-glass: rgba(236, 236, 236, .30); --c-glass-border: rgba(255, 255, 255, .22); /* --- Görsel üstü metin katmanları --- */ --c-on-image: #FFFFFF; --c-on-image-muted: rgba(255, 255, 255, .82); --c-on-image-faint: rgba(255, 255, 255, .58); --c-hairline: rgba(255, 255, 255, .14); /* ======================================================================== TİPOGRAFİ — referans siteden ölçülen ölçek Inter = başlık ve sayı, Manrope = gövde, nav, düğme. Üçüncü bir aile yok. (Referansta 4 yerde Bricolage Grotesque var, dekoratif; bilinçli alınmadı.) ======================================================================== */ --f-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --f-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Başlık ölçeği (Inter). Referans değerleri: 80/64/60/24/20 px */ --fs-h1: clamp(34px, 4.4vw, 62px); --lh-h1: 1.08; --ls-h1: -.015em; --fs-h2: clamp(28px, 3.2vw, 46px); --lh-h2: 1.2; --ls-h2: -.01em; /* referans: 46px / 55.2px = 1.2 */ --fs-h3: clamp(24px, 2.2vw, 30px); --lh-h3: 1.3; --fs-h4: 24px; --lh-h4: 1.5; /* referansta kart başlığı */ --fs-h5: 20px; --lh-h5: 1.5; --fs-num: clamp(40px, 4.4vw, 64px); --lh-num: 1.3; --ls-num: -.02em; /* Gövde (Manrope) */ --fs-body: 16px; --lh-body: 1.9; /* referans: 30.4px @16px */ --fs-small: 14px; --lh-small: 1.9; --fs-tiny: 13px; --lh-tiny: 1.6; /* Bölüm üstü küçük etiket (referans: Manrope 14px/500 uppercase) */ --fs-eyebrow: 14px; --fw-eyebrow: 600; --ls-eyebrow: .12em; /* --- DÜĞME TİPOGRAFİSİ: tek kaynak, her düğme buradan besleniyor --- Aile, ağırlık ve kasa BOYUTTAN BAĞIMSIZ sabit. Yalnız boyut ve harf aralığı değişir; aralık em cinsinden, küçük boyutta orantılı artar. 12px'te 600 ağırlık 16px'teki 600'den optik olarak ince göründüğü için ağırlık 700'e sabitlendi. */ --f-btn: var(--f-body); --fw-btn: 700; /* TEK ağırlık, istisnasız */ --tt-btn: uppercase; /* TEK kasa, istisnasız */ --fs-btn-sm: 12px; --ls-btn-sm: .085em; --fs-btn-md: 14px; --ls-btn-md: .06em; --fs-btn-lg: 15px; --ls-btn-lg: .04em; /* Navigasyon buton DEĞİLDİR, kendi ölçeği var (referans: Manrope 14px/500 uppercase) */ --fs-nav: 14px; --fw-nav: 500; --ls-nav: .02em; /* ======================================================================== BOŞLUK ÖLÇEĞİ — referanstaki gerçek ritim Bölüm dikey dolgusu 110px baskın (100/90/60 ikincil). Gap 20px baskın (sayfada 200 kullanım). Alt boşluk 20/15/30. ======================================================================== */ --sp-1: 5px; --sp-2: 10px; --sp-3: 15px; --sp-4: 20px; /* referansın varsayılan gap'i */ --sp-5: 30px; --sp-6: 40px; --sp-7: 60px; --sp-8: 90px; --sp-9: 110px; /* referansın bölüm dikey ritmi */ --section-y: clamp(56px, 7vw, 110px); --section-y-sm: clamp(40px, 5vw, 60px); /* ======================================================================== YARIÇAP — referans ölçeği: 30px baskın, sonra 20/12/40/50% ======================================================================== */ --r-sm: 12px; --r-md: 20px; --r-lg: 30px; --r-xl: 40px; --r-pill: 999px; --r-full: 50%; /* ======================================================================== GÖLGE — referanstan ölçüldü ======================================================================== */ --sh-card: 0 30px 60px rgba(0, 0, 0, .10); --sh-raise: 0 6px 12px rgba(0, 0, 0, .25); --sh-soft: 0 0 30px rgba(0, 0, 0, .05); --sh-deep: 0 24px 60px rgba(0, 0, 0, .34); /* --- Yerleşim --- */ --shell-inset: 20px; /* dış çerçevenin sağ/sol boşluğu */ --shell-top: 10px; --shell-radius: 30px; --header-h: 92px; --shell-max: 1400px; /* dış kabuk */ --container: 1340px; /* referansın iç içerik konteyneri: min(100%, 1340px) */ --pad-x: 20px; /* --- Hareket --- */ --e-out: cubic-bezier(.22, .61, .36, 1); --e-soft: cubic-bezier(.4, 0, .2, 1); --t-fast: .2s var(--e-soft); --t-mid: .35s var(--e-out); --t-slow: .6s var(--e-out); } @media (max-width: 1024px) { :root { --shell-inset: 12px; --shell-top: 8px; --shell-radius: 22px; --header-h: 76px; } } @media (max-width: 640px) { :root { --shell-inset: 8px; --shell-top: 6px; --shell-radius: 18px; --header-h: 68px; --pad-x: 16px; } }