/* ============================================================================ T-spektral-insa · tayf-tipografi.css "GÖKKUŞAĞI BAŞLIK" katmanı — sitedeki TÜM çarpıcı yazılar 9 duraklı TEK bir rampayla yazılır. RAMPA (istek üzerine): Apple Intelligence paleti — mavi → mor → magenta → kızıl → turuncu. Renkler yerinde durmaz, sürekli akar (§4). BU DOSYA EN SON YÜKLENİR (observer.css'ten de sonra). Tek işi tipografiye rampayı taşımak; düzen/yerleşim kuralı taşımaz. Rampanın renkleri BU DOSYADA tanımlıdır (--ai-1..--ai-9) ve yalnız buradaki yazılara gider; tokenlar.css'in --hue-* sistemine (bölüm aksanları, eyebrow/kicker, noktalar) DOKUNMAZ. ── KURAL ────────────────────────────────────────────────────────────────── Display ölçekli her başlık/çarpıcı satır SOLDAN SAĞA tam spektrum alır. Gövde metni, etiketler ve küçük yazılar ASLA renklenmez — kontrast onlarda taşınır. Yani "gökkuşağı" bir vurgu aracı olarak kalır, arka plan gürültüsü hâline gelmez. ── TEK DİZİLİM ──────────────────────────────────────────────────────────── Her çarpıcı yazı AYNI rampayı taşır: soldan mavi, sağdan turuncu. Bir ara [data-hue] bazlı "başlangıç hue'su rotasyonu" denendi ve TERK EDİLDİ — aşağıdaki "ROTASYON YOK" notuna bak, geri ekleme. ── OKUNURLUK GARANTİLERİ ────────────────────────────────────────────────── 1) Koyu zeminde rampa HAM kullanılır (en düşük durak ~5.8:1); kağıt zeminde her durak %60 ink'e karıştırılır (~5.1:1). AA eşiği 4.5 — 9 durak × 2 zeminin tamamı geçiyor. 2) @supports yoksa öğe kendi doğal rengini korur; hiçbir yerde şeffaf metin kalmaz. 3) ::selection, forced-colors ve print için kaçış kapıları var. 4) Fotoğraf üstündeki deck başlıklarında kontrastı .obs-arka::after scrim'i taşır — gölge BİLEREK yok (gerekçe aşağıda, perf). ── SPLIT-TEXT UYUMU (kritik) ────────────────────────────────────────────── [data-split] başlıklarda GSAP SplitText harfleri/satırları TRANSFORM eder. background-clip:text bir ATAdaki gradyanı transform'lu torunlarla TAŞIMAZ → reveal sırasında harfler kayar/kaybolur. Bu yüzden gradyan atadan alınıp doğrudan .spharf / .spkelime üstüne konur; her parça spektrumun DOĞRU DİLİMİNİ göstersin diye background-size/position'ı `tayf-tipografi.js` hizalar. O dosya yüklenmezse harfler tek tek tüm spektrumu tekrarlar (çirkin ama okunur) — ikisi birlikte gider, birini taşırken diğerini de taşı. ============================================================================ */ /* ═══════════════════════════════════════════════════════════════════════════ 1 · DURAKLAR + ROTASYON --tt1..--tt9 hiç --cz-renk okumaz → :root'ta bildirilmesi GÜVENLİ. --tay-1..--tay-9 "slot"lardır: gradyan hep slot sırasını çizer, [data-hue] yalnız slotlara hangi durağın düşeceğini değiştirir. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* APPLE INTELLIGENCE RAMPASI (istek üzerine; eskiden sitenin 9 hue'suydu) Dört çapa Apple'ın tanıtım gradyanından: #0894FF · #C959DD · #FF2E54 · #FF9004 — mavi → mor → magenta → kızıl → turuncu. Aradaki slotlar bu çapalar arasında eşit aralıklı örneklendi (sRGB doğrusal ara değer). BU RAMPA YALNIZ SPEKTRUM YAZILARA GİDER: --tt* yalnız --tay-* slotlarını, onlar da yalnız --tayf-g'yi besler. Sitenin --hue-* sistemi (bölüm aksanları, eyebrow/kicker, noktalar) DEĞİŞMEDİ. */ --ai-1: #0894ff; --ai-2: #4b84f2; --ai-3: #8b6fe6; --ai-4: #c959dd; --ai-5: #e2489e; --ai-6: #ff2e54; --ai-7: #ff5138; --ai-8: #ff7220; --ai-9: #ff9004; /* koyu zemin: renkler HAM kullanılır — beyaza karıştırmak Apple'ın doygun tonunu soldururdu ve gerek de yok (en düşük durak ~5.8:1, AA eşiği 4.5). */ --tt1: var(--ai-1); --tt2: var(--ai-2); --tt3: var(--ai-3); --tt4: var(--ai-4); --tt5: var(--ai-5); --tt6: var(--ai-6); --tt7: var(--ai-7); --tt8: var(--ai-8); --tt9: var(--ai-9); /* Süzülme fazı — @property ile kayıtlı (aşağıda §4). Buradaki düz bildirim FAIL-SAFE: @property desteklenmeyen motorda var() boşa düşüp background-image'ı geçersiz kılmasın (şeffaf metin riski). */ --tay-kay: 0%; --tay-1:var(--tt1); --tay-2:var(--tt2); --tay-3:var(--tt3); --tay-4:var(--tt4); --tay-5:var(--tt5); --tay-6:var(--tt6); --tay-7:var(--tt7); --tay-8:var(--tt8); --tay-9:var(--tt9); } /* Kağıt nefes bölgesi — paper hue'ları, ink'e doğru koyulaştırılmış. Slotlar burada da yeniden bağlanmak ZORUNDA: --tay-n :root'ta ink duraklarına çözülüp donmuş hâlde inerdi (tokenlar.css'teki --notr tuzağının aynısı). */ [data-mod="paper"], [data-zemin="paper"] { /* Kağıt zeminde ham rampa AA'yı geçmez (#0894FF beyazda 3.1:1). Her durak %60 oranında ink'e karıştırılır → ölçülen en düşük durak ~5.1:1. */ --tt1: color-mix(in srgb, var(--ai-1) 60%, var(--ink)); --tt2: color-mix(in srgb, var(--ai-2) 60%, var(--ink)); --tt3: color-mix(in srgb, var(--ai-3) 60%, var(--ink)); --tt4: color-mix(in srgb, var(--ai-4) 60%, var(--ink)); --tt5: color-mix(in srgb, var(--ai-5) 60%, var(--ink)); --tt6: color-mix(in srgb, var(--ai-6) 60%, var(--ink)); --tt7: color-mix(in srgb, var(--ai-7) 60%, var(--ink)); --tt8: color-mix(in srgb, var(--ai-8) 60%, var(--ink)); --tt9: color-mix(in srgb, var(--ai-9) 60%, var(--ink)); --tay-1:var(--tt1); --tay-2:var(--tt2); --tay-3:var(--tt3); --tay-4:var(--tt4); --tay-5:var(--tt5); --tay-6:var(--tt6); --tay-7:var(--tt7); --tay-8:var(--tt8); --tay-9:var(--tt9); } /* ROTASYON YOK — BİLEREK. Bir ara her bölüm spektrumu kendi [data-hue]'sundan başlatıyordu (yeşilden başlayan başlık, mordan başlayan başlık…). Onaylanan referans TEK bir dizilim: her çarpıcı yazı soldan MAVİ, sağdan TURUNCU. Bu dosyaya [data-hue] bazlı bir --tay-n eşlemesi geri EKLEME; bölüm kimliği eyebrow/kicker renklerinde ve --cz-renk'e bağlı öğelerde zaten taşınıyor. */ /* ═══════════════════════════════════════════════════════════════════════════ 2 · SPEKTRUM METİN FALLBACK NOTU: burada bilerek `color:` YAZILMAZ. Şeffaflık YALNIZCA @supports bloğunda kurulur; blok çalışmazsa öğe doğal rengini korur (miras --murekkep ya da .pkt-ad gibi kendi hue'su). Blanket bir fallback rengi onları ezerdi. ═══════════════════════════════════════════════════════════════════════════ */ @supports ((-webkit-background-clip: text) or (background-clip: text)) { .tayf-yazi, .tayf-tam, .tayf-yazi-kucuk { /* Gradyan bir custom property'ye kurulur: değeri BU ÖĞEDE (doğru rotasyonla) çözülür, sonra .spharf/.spkelime'ye hazır DEĞER olarak miras kalır. */ /* Durakların HEPSİ --tay-kay kadar ötelenir → §4'teki animasyon renkleri yazının üstünde sürekli gezdirir. Taşan uçlar sorun değil: gradyan ilk ve son rengi kenarların ötesine uzatır, kesik/dikiş oluşmaz. var() fallback'i 0% — @property yoksa gradyan yine geçerli kalır. */ --tayf-g: linear-gradient(97deg, var(--tay-1) calc( 0% + var(--tay-kay, 0%)) calc( 6% + var(--tay-kay, 0%)), var(--tay-2) calc(11% + var(--tay-kay, 0%)) calc( 17% + var(--tay-kay, 0%)), var(--tay-3) calc(22% + var(--tay-kay, 0%)) calc( 28% + var(--tay-kay, 0%)), var(--tay-4) calc(33% + var(--tay-kay, 0%)) calc( 39% + var(--tay-kay, 0%)), var(--tay-5) calc(44% + var(--tay-kay, 0%)) calc( 50% + var(--tay-kay, 0%)), var(--tay-6) calc(55% + var(--tay-kay, 0%)) calc( 61% + var(--tay-kay, 0%)), var(--tay-7) calc(66% + var(--tay-kay, 0%)) calc( 72% + var(--tay-kay, 0%)), var(--tay-8) calc(77% + var(--tay-kay, 0%)) calc( 83% + var(--tay-kay, 0%)), var(--tay-9) calc(88% + var(--tay-kay, 0%)) calc(100% + var(--tay-kay, 0%))); background-image: var(--tayf-g); background-size: 100% 100%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; /* ── NOKTA/KUYRUK ONARIMI ──────────────────────────────────────────── background-clip:text YALNIZ öğenin dolgu kutusunun içini boyar. Bu başlıklarda line-height .96–1.02 arası; kutu, harfin mürekkebinden KISA kalıyor. Türkçede İ'nin noktası, Ğ'nin şapkası, Ü/Ö'nün noktaları cap height'ın ÜSTÜNDE, ğ/ş kuyrukları taban çizgisinin ALTINDA durur → kutu dışına taşan mürekkep boyanacak arka plan bulamıyor ve SAYDAM kalıyor. Ekranda "noktanın yarısı yok" diye görünen şey bu. Ölçüm: 112px/lh .98'de İ 9,0px yukarı, seo.html'de ğ 6,0px aşağı taşıyordu. Çözüm: dolgu kutusunu dikeyde .16em büyüt, negatif margin'le düzeni aynı bırak. h1-h4 ve p'de blok margin'i zaten 0 (temel.css §0), o yüzden margin-block'u ezmek güvenli. */ padding-block: .16em; margin-block: -.16em; } /* İç vurgular (, , ) ayrı renk ALMAZ: ata gradyanı harflerin üstünden kesintisiz akmalı. Ağırlık/eğim farkı vurguyu zaten taşıyor. */ /* NOT: `span` bilerek listede YOK — .spharf/.spkelime de span'dir, onlar aşağıdaki split kuralına ait. */ .tayf-yazi :is(b, em, strong), .tayf-tam :is(b, em, strong), .tayf-yazi-kucuk :is(b, em, strong) { background-image: none; -webkit-text-fill-color: inherit; } /* hareket.css m34/m35b, index hero ve "tek ışık" sahnesinin 'sine kendi beyaz→teal tedavisini (0,3,1) özgüllükle veriyor; genel kural (0,1,1) onu ezemez. Bu başlıklar artık tam spektrum taşıdığı için o tedavi devre dışı: spektrum 'nin üstünden kesintisiz akmalı. */ /* aynı sahnenin LED tetiğindeki cyan drop-shadow'u da kalkar: renkli bir hâle spektrum harflerin kenarında saçaklanma yapıyor. (0,6,0) > hareket.css (0,5,0) */ /* Sayı damgası (.no — kapsam legend "01".."09") SOLİD hue'sunu korur: tek başına duran bir işaret, spektrumun içinde kaybolmamalı. */ .tayf-yazi .no, .tayf-yazi-kucuk .no, .tayf-tam .no { -webkit-text-fill-color: var(--cz-renk, var(--notr)); color: var(--cz-renk, var(--notr)); } /* Deck başlıklarına GÖLGE YOK — BİLEREK. Burada bir kez 22px blur'lu text-shadow vardı. Bu başlıklar deck geçişinde GSAP ile her karede transform ediliyor (.obs-anim yPercent) ve bg-clip:text ile birlikte blur'lu bir gölge, display ölçekli metin raster'ının her karede yeniden boyanmasına yol açıyor → geçiş takılıyor, animasyon "çalışmıyor" gibi görünüyor. Kontrast zaten .obs-arka::after scrim'inden geliyor (rgba(4,6,12,.86→.90)); gölgeye gerek yok. GERİ EKLEME. */ /* ── SPLIT-TEXT DEVRİ ───────────────────────────────────────────────────── */ /* Ata nötrlenir; bölünmemiş bir metin düğümü kalırsa solid okunur kalsın. */ .tayf-yazi:has(.spharf), .tayf-yazi:has(.spsatir), .tayf-tam:has(.spharf), .tayf-tam:has(.spsatir), .tayf-yazi-kucuk:has(.spharf), .tayf-yazi-kucuk:has(.spsatir) { background-image: none; -webkit-text-fill-color: var(--murekkep); color: var(--murekkep); } /* Gradyan HER ZAMAN YAPRAK öğeye konur: harf modunda .spharf, satır modunda .spkelime (satırın KENDİSİ değil). ⚠ .spsatir'a KOYMA — WebKit'te yazı TAMAMEN KAYBOLUYOR. Sebep: satır modunda GSAP `words,lines` üretir, yani .spsatir'ın metni .spkelime (inline-block) torunlarının içindedir. WebKit `-webkit-background-clip:text` kırpmasını atomik inline torunların gliflerine uygulamıyor → kırpma alanı boş kalıyor, -webkit-text-fill-color:transparent ile birlikte geriye hiçbir şey kalmıyor. Chromium'da çalışıyor olması yanıltıcı; Safari'de bölüm bomboş görünüyordu. .spkelime yapraktır (içinde yalnız metin var) → iki motorda da boyanır. Satırların transform edilmesi sorun değil: kelime kendi gradyanını kendi koordinat uzayında kırpar, ata transform'uyla birlikte taşınır. Dilim hizası (her parçanın spektrumun doğru yerini göstermesi): tayf-tipografi.js. */ [data-split="harf"] :is(.tayf-yazi, .tayf-tam, .tayf-yazi-kucuk) .spharf, [data-split="harf"]:is(.tayf-yazi, .tayf-tam, .tayf-yazi-kucuk) .spharf, [data-split="satir"] :is(.tayf-yazi, .tayf-tam, .tayf-yazi-kucuk) .spkelime, [data-split="satir"]:is(.tayf-yazi, .tayf-tam, .tayf-yazi-kucuk) .spkelime { background-image: var(--tayf-g); background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; /* Bölünmüş başlıkta gradyan yaprakta (.spharf/.spkelime) olduğu için kutu onarımı da BURADA gerekli — atadaki dolgu yaprağın kutusunu büyütmez. Yapraklar inline-block; padding + negatif margin düzeni değiştirmez. */ padding-block: .16em; margin-block: -.16em; } /* HAYALET ÖNLEME: bölünmüş başlıkta iç / de nötr kalmalı, yoksa kendi bg-clip'i harflerin DURGUN konumuna kırpılır ve reveal boyunca hareket eden harflerin arkasında sabit bir "hayalet metin" görünür. */ :is(.tayf-yazi, .tayf-tam, .tayf-yazi-kucuk):has(.spharf) :is(b, em, strong, i), :is(.tayf-yazi, .tayf-tam, .tayf-yazi-kucuk):has(.spsatir) :is(b, em, strong, i) { background-image: none; } } /* ═══════════════════════════════════════════════════════════════════════════ 3 · ÇARPICI KÜÇÜK YAZILAR — kicker / eyebrow Bunlar 0.72rem: spektrum gradyanı bu ölçekte okunmaz. Bölümün TEK hue'sunu solid alırlar — sayfa boyunca yürüyen aynı gökkuşağı ritmini taşırlar. Hue %86 beyazla kaldırılır ki en koyu hue (hue-7) bile rahat AA üstünde olsun. ═══════════════════════════════════════════════════════════════════════════ */ .eyebrow[data-hue], .kicker[data-hue], [data-hue] > .eyebrow, [data-hue] > .kicker { color: color-mix(in srgb, var(--cz-renk, var(--notr)) 86%, var(--isin-beyaz)); } [data-mod="paper"] .eyebrow[data-hue], [data-mod="paper"] .kicker[data-hue], [data-mod="paper"] [data-hue] > .eyebrow, [data-mod="paper"] [data-hue] > .kicker, [data-zemin="paper"] .eyebrow[data-hue], [data-zemin="paper"] .kicker[data-hue] { color: color-mix(in srgb, var(--cz-renk, var(--notr)) 88%, var(--ink)); } /* deck slaytları fotoğraf üstünde: observer.css beyaz-şeffaf verir, biz hue veriyoruz — scrim (.obs-arka::after) AA'yı taşıyor. */ .obs-icerik .eyebrow[data-hue] { color: color-mix(in srgb, var(--cz-renk) 78%, var(--isin-beyaz)); } /* ═══════════════════════════════════════════════════════════════════════════ 4 · SÜREKLİ RENK GEÇİŞİ — varsayılan AÇIK İstek: "renkler sürekli bir geçiş halinde olabilir". NEDEN background-position DEĞİL: burada bir zamanlar `.tayf-akis` opt-in sınıfı vardı, background-size/position'ı animasyonluyordu. Bölünmüş başlıklarda ÇALIŞMAZ: tayf-tipografi.js her .spharf/.spkelime'ye hizalama için satır içi background-size/position yazar; CSS animasyonu satır içini ezip dilim hizasını bozardı (o dosyanın kendi notu da bunu söylüyor). Kural kaldırıldı, yerine bu geldi. NASIL: yalnızca gradyanın DURAK KONUMLARI oynatılır (--tay-kay). Renk sırası ve hizalama makinesi el değmeden kalır; kayan tek şey rampanın yazı üstündeki konumu → renkler harflerin üzerinden akıyormuş gibi görünür. NEREDE: animasyon :root'ta. Öğelerin üstüne konsaydı `animation` kısayolu öğenin kendi giriş animasyonunu ezerdi (ör. temel.css'teki .seo-afis--buyu grow'u, #seo-h de .tayf-tam taşıyor). Kök öğede rakip animasyon yok. MALİYET: --tay-kay yalnız --tayf-g'de okunur, yani her karede yeniden boyanan şey SADECE spektrum yazılardır. Yine de bg-clip'li display metni boyamak bedava değil; salınım bilerek yavaş (24s) ve ping-pong (alternate) — hem dikişsiz hem sakin. Kapatmak için: aşağıdaki animation satırını sil. ═══════════════════════════════════════════════════════════════════════════ */ @property --tay-kay { syntax: ""; inherits: true; initial-value: 0%; } @media (prefers-reduced-motion: no-preference) { :root.js-anim:not(.js-reduced) { animation: tayf-akim 24s ease-in-out infinite alternate; } } @keyframes tayf-akim { from { --tay-kay: -13%; } to { --tay-kay: 13%; } } /* ═══════════════════════════════════════════════════════════════════════════ 5 · KAÇIŞ KAPILARI — seçim, zorlanmış renkler, baskı ═══════════════════════════════════════════════════════════════════════════ */ /* bg-clip'li metin seçilince glif şeffaf kalır → seçim görünmez olur. Geri al. */ .tayf-yazi::selection, .tayf-yazi *::selection, .tayf-tam::selection, .tayf-tam *::selection, .tayf-yazi-kucuk::selection, .tayf-yazi-kucuk *::selection { -webkit-text-fill-color: var(--zemin); color: var(--zemin); background: var(--murekkep); } @media (forced-colors: active) { .tayf-yazi, .tayf-tam, .tayf-yazi-kucuk, .tayf-yazi *, .tayf-tam *, .tayf-yazi-kucuk * { background-image: none !important; -webkit-text-fill-color: CanvasText !important; color: CanvasText !important; text-shadow: none !important; animation: none !important; } .eyebrow[data-hue], .kicker[data-hue] { color: CanvasText !important; } } /* ═══════════════════════════════════════════════════════════════════════════ 6 · SEO SAYFASI — üç yazı spektrumdan ÇIKARILIR (istek: beyaz) · #seo-h "Zirve tesadüf değil." → parlak beyaz + etrafa ışık halesi · .seo-vurgu "İlk yıl ücrete dahil." → düz beyaz · #seo-cta "Zirveye çıkalım." → düz beyaz Gradyan iki yerde kurulu: ÖĞENİN kendisinde ve SplitText yapraklarında (.spharf harf modunda, .spkelime satır modunda) — ikisi de nötrlenmeli. Blok bilerek tayf kurallarından SONRA; özgüllük id/çift-sınıf ile taşınıyor, !important yok. Üstteki forced-colors ve alttaki @print kaçış kapıları !important taşıdığı için sıradan bağımsız hâlâ bu bloğu ezer. Yalnız seo.html: bu üç seçici başka sayfada kullanılmıyor. ═══════════════════════════════════════════════════════════════════════════ */ #seo-h, #seo-h .spharf, #seo-h .spkelime, #seo-h :is(b, em, strong, i), p.seo-vurgu.tayf-yazi, p.seo-vurgu.tayf-yazi .spharf, p.seo-vurgu.tayf-yazi .spkelime, p.seo-vurgu.tayf-yazi em, #seo-cta, #seo-cta .spharf, #seo-cta .spkelime, #seo-cta :is(b, em, strong, i) { background-image: none; -webkit-text-fill-color: #fff; color: #fff; } /* "Zirve tesadüf değil." — parlak beyaz, etrafa ışık saçar. Katmanlı hale: yakın parlaklık → geniş yumuşak saçılma. Gölge STATİK (nabız/animasyon yok): bu ölçekte (--t-mega) blur'lu gölgeyi her karede yeniden boyamak display metnini raster'lar — dosyanın 2. bölümündeki perf notuyla aynı gerekçe. */ #seo-h { text-shadow: 0 0 10px rgba(255,255,255,.50), 0 0 30px rgba(255,255,255,.28), 0 0 68px rgba(255,255,255,.16), 0 0 120px rgba(255,255,255,.10); } @media print { .tayf-yazi, .tayf-tam, .tayf-yazi-kucuk, .tayf-yazi *, .tayf-tam *, .tayf-yazi-kucuk * { background-image: none !important; -webkit-text-fill-color: #000 !important; color: #000 !important; text-shadow: none !important; animation: none !important; } }