/* ============================================================================ T-spektral-insa · atmosfer.css — ⚠ UY1 GARANTİ + SÜREKLİ ZEMİN (madde 26) DOYGUN + NET + ASİMETRİK-KOMPOZE, kutusuz (14+15+18); YUMUŞAK-AMA-DÜZENLİ, SÜREKLİ zemin (20b/22c/26 — sert kesim/çizgi yok); sedef AZ, kütle/foto ÇOK (20c/22a); hero'da renk KISIK (22a). ---------------------------------------------------------------------------- MADDE 26 MİMARİSİ — TEK SÜREKLİ ARKA PLAN: Arka plan artık bölüm-başına DEĞİL: `.spektrum-zemin` (position:fixed, tüm sayfa ardında TEK katman) asimetrik spektrum yapısını KESİNTİSİZ taşır. Bölümler bunun üstünde ŞEFFAF durur → bölüm sınırında renk KESİLMEZ, çizgi yok. `.spektrum-bloom`/`.spektrum-mesh` yalnız yerel VURGU; kenarları transparent'e feather'lı (mask/gradient) → süreklinin üstünde yumuşak karışır, seam üretmez. SÖZLEŞME (UY1): renk katmanları JS OLMADAN ilk karede DOLU-DOYGUN; scroll'a kilitli DEĞİL. OKUNABİLİRLİK: metin blokları `.icerik-scrim` (AA, iki mod). PERF: saf CSS gradient, GPU-dostu; tek sürekli katman → az boya. BAĞIMLILIK: tokenlar.css + tokenlar-ek.css. ============================================================================ */ .spektrum-bloom, .spektrum-mesh { position:absolute; inset:0; z-index:-1; pointer-events:none; } /* Metin okunabilirliği — yerel vignette (kütle DOYGUN kalır, metin AA; iki mod). */ /* ════════════════════════════════════════════════════════════════════════════ 0) MADDE 26 · `.spektrum-zemin` — TEK SÜREKLİ ASİMETRİK ARKA PLAN (fixed) Tüm sayfanın ardında kesintisiz; radial masses hepsi transparent'e feather'lı (kenar/çizgi yok) + asimetrik refraksiyon şaftları. Sakin drift (parallax DEĞİL — viewport-sabit). Builder köküne BİR tane koyar (aria-hidden). Alias: `.spektrum-akis` de aynı katmanı verir (geriye-uyum). ════════════════════════════════════════════════════════════════════════════ */ /* ⚠ BUILDER ENTEGRASYON DÜZELTMESİ (madde 28 — kullanıcı): SİYAH TABAN korunur. Sabit katman SOLİD SİYAH (--ink) boyar; spektrum yalnız üstte feather'lı, DÜŞÜK opaklıklı AKSAN olarak işlenir (komple renkli yıkama DEĞİL). Siyah her zaman baskın. */ .spektrum-zemin, .spektrum-akis { position:fixed; inset:0; z-index:-3; pointer-events:none; overflow:hidden; background: radial-gradient(140% 120% at 50% 6%, color-mix(in srgb, var(--hue-7-ink) 6%, transparent), transparent 55%), var(--ink); } /* asimetrik spektrum aksanları — feather'lı + DÜŞÜK opaklık (siyah taban baskın) */ .spektrum-zemin::before, .spektrum-akis::before { content:""; position:absolute; inset:-14%; background: radial-gradient(52vw 52vw at 16% 18%, color-mix(in srgb, var(--hue-7-ink) 40%, transparent), transparent 62%), radial-gradient(46vw 46vw at 84% 38%, color-mix(in srgb, var(--hue-5-ink) 32%, transparent), transparent 62%), radial-gradient(54vw 54vw at 38% 84%, color-mix(in srgb, var(--hue-9-ink) 28%, transparent), transparent 64%); filter:blur(48px) saturate(1.25); mix-blend-mode:screen; opacity:.52; } /* asimetrik refraksiyon şaftları — imza dili, çok düşük opaklık (aksan) */ .spektrum-zemin::after, .spektrum-akis::after { content:""; position:absolute; inset:-14%; background: linear-gradient(66deg, transparent 44%, color-mix(in srgb, var(--hue-4-ink) 18%, transparent) 52%, transparent 60%), linear-gradient(104deg, transparent 66%, color-mix(in srgb, var(--hue-8-ink) 14%, transparent) 74%, transparent 82%); filter:blur(28px) saturate(1.15); mix-blend-mode:screen; opacity:.42; } /* SİYAH DERİNLİK PERDESİ (madde 28): NORMAL-blend ucuz vignette katmanı — kenarlar/ geniş alanlar siyaha iner (screen değil ki siyah gerçekten karartsın). Aksanlar bunun ALTINDA screen ile parlar; siyah derinlik daima önde/altta hissedilir. */ .spektrum-zemin, .spektrum-akis { background: radial-gradient(115% 95% at 50% 40%, transparent 36%, color-mix(in srgb, var(--ink) 80%, transparent) 82%), radial-gradient(140% 120% at 50% 6%, color-mix(in srgb, var(--hue-7-ink) 6%, transparent), transparent 55%), var(--ink); } @media (prefers-reduced-motion: no-preference) { .spektrum-zemin::before, .spektrum-akis::before { animation: spx-zemin-a 72s ease-in-out infinite alternate; } .spektrum-zemin::after, .spektrum-akis::after { animation: spx-zemin-b 88s ease-in-out infinite alternate; } } @keyframes spx-zemin-a { from{transform:translate3d(0,0,0) scale(1.02)} to{transform:translate3d(2%,-2%,0) scale(1.08)} } @keyframes spx-zemin-b { from{transform:translate3d(0,0,0) scale(1.05)} to{transform:translate3d(-2%,2%,0) scale(1)} } /* ═══ GEÇİCİ PERF FİX — Safari GPU compositor tıkanması (sekmelere tık gecikmesi/ düşmesi) ═══════════════════════════════════════════════════════════════════ TEŞHİS: input hit-testing Safari'de compositor thread'inde yapılır; tam ekran animasyonlu `blur(48px)` + `mix-blend-mode:screen` katmanları compositor'ı doldurunca tıklar gecikip düşüyordu (her sayfa, aralıklı, Safari'ye özgü). Bu iki dekoratif katman (::before/::after) her sayfada olan tek ağır efektti → KAPATILDI. Statik koyu taban (.spektrum-zemin'in kendisi) kalır, per-frame GPU maliyeti sıfır. Onaylanırsa: statik/blend'siz hafif bir versiyonla geri gelebilir. */ .spektrum-zemin::before, .spektrum-zemin::after, .spektrum-akis::before, .spektrum-akis::after { display: none !important; } [data-mod="paper"] .spektrum-zemin::before, [data-mod="paper"] .spektrum-zemin::after, [data-mod="paper"] .spektrum-akis::before, [data-mod="paper"] .spektrum-akis::after { mix-blend-mode:multiply; } /* bölüm ALT sınırını zemine feather'lar (22c — görünmez geçiş, seçmeli) */ /* ════════════════════════════════════════════════════════════════════════════ 1) .spektrum-bloom · "fan" — YEREL VURGU, feather'lı (madde 26). Hero'da `.spektrum-bloom--kisik` (22a). Süreklinin üstünde yumuşak karışır. ════════════════════════════════════════════════════════════════════════════ */ .spektrum-bloom { --nod-x: 26%; --nod-y: 46%; background: radial-gradient(closest-side at var(--nod-x) var(--nod-y), var(--isin-beyaz) 0%, color-mix(in srgb, var(--isin-beyaz) 68%, transparent) 18%, transparent 46%), var(--spektrum-konik-yarim); -webkit-mask: radial-gradient(120% 130% at var(--nod-x) var(--nod-y), #000 0%, #000 34%, rgba(0,0,0,.8) 60%, rgba(0,0,0,.3) 82%, transparent 96%); mask: radial-gradient(120% 130% at var(--nod-x) var(--nod-y), #000 0%, #000 34%, rgba(0,0,0,.8) 60%, rgba(0,0,0,.3) 82%, transparent 96%); filter: blur(9px) saturate(1.3) brightness(1.05); opacity: 1; mix-blend-mode: screen; } @property --nod-x { syntax:""; inherits:true; initial-value:26%; } @property --nod-y { syntax:""; inherits:true; initial-value:46%; } /* 2) "burst" — BLOOM-KAPANIS: NET dilimli 9-yönlü prizma çarkı (finale) — feather'lı */ .spektrum-bloom[data-varyant="burst"] { background: radial-gradient(closest-side at 50% 50%, var(--isin-beyaz) 0%, color-mix(in srgb, var(--isin-beyaz) 55%, transparent) 12%, transparent 30%), var(--spektrum-konik-tam); -webkit-mask: radial-gradient(closest-side at 50% 50%, #000 0%, #000 24%, rgba(0,0,0,.82) 52%, rgba(0,0,0,.35) 74%, transparent 92%); mask: radial-gradient(closest-side at 50% 50%, #000 0%, #000 24%, rgba(0,0,0,.82) 52%, rgba(0,0,0,.35) 74%, transparent 92%); /* madde 15: NET/kütleli dilim — bulanık gökkuşağı yıkaması değil (blur/saturate düşürüldü) */ filter: blur(6px) saturate(1.16) brightness(1.03); opacity: 1; mix-blend-mode: screen; animation: none; } /* 3) "omurga" — KAPSAM: sol NET dikey 9-hizmet bandı + TEK-hue glow (feather'lı sağ) */ .spektrum-bloom[data-varyant="omurga"] { background: var(--spektrum-y) left / 16px 100% no-repeat, linear-gradient(90deg, color-mix(in srgb, var(--hue-5-ink) 34%, transparent) 0%, color-mix(in srgb, var(--hue-5-ink) 10%, transparent) 20%, transparent 44%); -webkit-mask: linear-gradient(90deg, #000 0%, #000 32%, transparent 60%); mask: linear-gradient(90deg, #000 0%, #000 32%, transparent 60%); filter: blur(6px) saturate(1.25) brightness(1.04); opacity: 1; mix-blend-mode: screen; animation: none; } /* 4) "panel" — İNŞA tabanı: ASİMETRİK REFRAKSİYON ŞAFTLARI (18 — ızgara YOK) */ .spektrum-bloom[data-varyant="panel"] { background: linear-gradient(66deg, transparent 26%, color-mix(in srgb, var(--hue-4-ink) 44%, transparent) 33%, transparent 39%), linear-gradient(82deg, transparent 50%, color-mix(in srgb, var(--hue-7-ink) 40%, transparent) 59%, transparent 66%), linear-gradient(104deg, transparent 68%, color-mix(in srgb, var(--hue-9-ink) 34%, transparent) 75%, transparent 82%), radial-gradient(54% 60% at 6% 14%, color-mix(in srgb, var(--hue-4-ink) 52%, transparent), transparent 66%), radial-gradient(50% 58% at 96% 88%, color-mix(in srgb, var(--hue-7-ink) 48%, transparent), transparent 66%); -webkit-mask: radial-gradient(120% 120% at 50% 50%, #000 60%, transparent 96%); mask: radial-gradient(120% 120% at 50% 50%, #000 60%, transparent 96%); filter: blur(4px) saturate(1.22) brightness(1.03); opacity: 1; mix-blend-mode: screen; animation: none; } /* ════════════════════════════════════════════════════════════════════════════ 5) .spektrum-mesh · yerel "nefes" VURGUSU (opsiyonel) — 3-hue, feather'lı. Not (m26): süreklilik artık `.spektrum-zemin`de; mesh yalnız özel yerel vurgu gerektiğinde. Kenarlar transparent'e söner → seam yok. ════════════════════════════════════════════════════════════════════════════ */ .spektrum-mesh { overflow:clip; } .spektrum-mesh::before, .spektrum-mesh::after { content:""; position:absolute; inset:-30%; filter:blur(44px) saturate(1.3) brightness(1.02); opacity:.6; mix-blend-mode:screen; } .spektrum-mesh::before { background: radial-gradient(40vw 40vw at 20% 30%, var(--hue-6-ink), transparent 60%), radial-gradient(36vw 36vw at 76% 46%, var(--hue-4-ink), transparent 60%); } .spektrum-mesh::after { background: radial-gradient(44vw 44vw at 48% 86%, var(--hue-8-ink), transparent 60%); } @media (prefers-reduced-motion: no-preference) { .spektrum-mesh::before { animation: spx-suzul-a var(--mesh-nefes) ease-in-out infinite alternate; } .spektrum-mesh::after { animation: spx-suzul-b calc(var(--mesh-nefes) + 6s) ease-in-out infinite alternate; } } @keyframes spx-suzul-a { from{transform:translate3d(0,0,0) scale(1.02)} to{transform:translate3d(3%,-2%,0) scale(1.08)} } @keyframes spx-suzul-b { from{transform:translate3d(0,0,0) scale(1.06)} to{transform:translate3d(-3%,3%,0) scale(1)} } .spektrum-mesh[data-varyant="hero-ambient"]::before { opacity:.3; } .spektrum-mesh[data-varyant="hero-ambient"]::after { opacity:.26; } /* ════════════════════════════════════════════════════════════════════════════ 7) UY3/21b · PAPER (beyaz-açıklık) NEFES BÖLGELERİ — EŞİT ÖZEN + VURUCU ════════════════════════════════════════════════════════════════════════════ */ [data-mod="paper"] { --zemin: var(--paper); --murekkep: var(--ink); --a1:var(--hue-1); --a2:var(--hue-2); --a3:var(--hue-3); --a4:var(--hue-4); --a5:var(--hue-5); --a6:var(--hue-6); --a7:var(--hue-7); --a8:var(--hue-8); --a9:var(--hue-9); /* paper AA: notr/hatt paper-değerleriyle YENİDEN tanımlanır (dark kök değerini ezmek için) */ --notr: color-mix(in srgb, var(--ink) 62%, var(--paper)); --notr-silik: color-mix(in srgb, var(--ink) 34%, var(--paper)); --hatt: color-mix(in srgb, var(--ink) 16%, transparent); --hatt-koyu: color-mix(in srgb, var(--ink) 30%, transparent); background: var(--paper); color: var(--ink); } [data-mod="paper"] .spektrum-mesh::before, [data-mod="paper"] .spektrum-mesh::after { opacity:.5; mix-blend-mode:multiply; filter:blur(60px) saturate(1.35); } [data-mod="paper"] .spektrum-bloom { mix-blend-mode:multiply; opacity:.82; filter:blur(8px) saturate(1.18); } /* ── reduced-motion / no-js: hareket dur, KÜTLE/RENK DOLU kalır (statik) ─────── */ @media (prefers-reduced-motion: reduce) { .spektrum-bloom, .spektrum-mesh::before, .spektrum-mesh::after, .spektrum-zemin::before, .spektrum-zemin::after, .spektrum-akis::before, .spektrum-akis::after { animation:none !important; } } :root.js-reduced .spektrum-bloom, :root.js-reduced .spektrum-mesh::before, :root.js-reduced .spektrum-mesh::after, :root.js-reduced .spektrum-zemin::before, :root.js-reduced .spektrum-zemin::after, :root.js-reduced .spektrum-akis::before, :root.js-reduced .spektrum-akis::after { animation:none !important; } /* ═══════════════════════════════════════════════════════════════════════════ m29 · INDEX-SCOPED daha KOYU/SİYAH TABAN — renk hero + tek-ışık ANİMASYONlarından. Sürekli zemin (.spektrum-zemin) aksanları KISILIR → siyah baskın; imza öğeleri (hero X-çubuk, tek-ışık LED) ve lokal bölüm blooms rengi taşır (m28/m29 ile tutarlı: canlı ama siyah-derinlikli). Yalnız altında — diğer 5 sayfa etkilenmez. ═══════════════════════════════════════════════════════════════════════════ */ .sayfa-index .spektrum-zemin::before, .sayfa-index .spektrum-akis::before { opacity: .22; filter: blur(54px) saturate(1.1); } .sayfa-index .spektrum-zemin::after, .sayfa-index .spektrum-akis::after { opacity: .14; }