/* ============================================================================
T-spektral-insa / D01-onlinesirketim-ajans — temel.css
BUILDER 1. GEÇİŞ — yapısal/işlevsel iskelet (HTML'in temel CSS'i).
Bu dosya TEK BAŞINA çalışır: Animasyon-Plus paketi (atmosfer.css/hareket.*)
GELMEDEN ve JS OLMADAN bile sayfa gezilebilir + hero RENKLİ açılır (UY1).
Statik `.spektrum-bloom` burada dolu-renkli tanımlıdır — paket bunu 2. geçişte
zenginleştirir, VAR ETMEZ.
Hook sözleşmesi (brief madde 13): sahne kapları [data-sahne], imza öğeleri
.tayf-isin/.tayf-tel/.tayf-refraksiyon, sabit-renk zemin .spektrum-bloom/
.spektrum-mesh, wght hedefi [data-wght-gecis], reduced kökü .js-reduced.
ÇEŞİTLİLİK NOTU: her sayfanın kendi düzen sistemi var — index=spektral defter
omurgası, kapsam=yapışkan-kenar okuma, surec=dikey pin-timeline,
paketler=karşılaştırma-tablosu, yaklasim=editoryal manifesto, iletisim=bölünmüş
form. Tek "sec-head+kart-grid" iskeleti aşağı tekrar EDİLMEZ.
============================================================================ */
/* ═══ 0 · RESET / KÖK ══════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
/* [hidden] her zaman gizli kalmalı — .ilt-onay gibi display: kuralları onu
ezmemeli (aksi halde form başarı bloğu gönderim öncesi görünür kalır). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
/* Native smooth scroll YALNIZ Lenis yokken. Lenis her karede window.scrollTo
çağırır; tarayıcı bunu kendi smooth animasyonuna sokarsa iki yumuşatma
çakışır ve Lenis etkisiz/tutuk görünür (WebKit'te belirgin). .lenis sınıfını
'e Lenis kendisi ekler → Lenis'siz sayfalarda davranış değişmez. */
html:not(.lenis) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
margin: 0;
background: var(--zemin);
color: var(--murekkep);
font-family: var(--font-govde);
font-weight: var(--w-govde);
font-size: 1rem;
line-height: 1.62;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
h1, h2, h3, h4 {
margin: 0;
font-family: var(--font-display);
font-weight: var(--w-kurulmus);
line-height: 1.08;
letter-spacing: -.02em;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
/* SAVUNMA KATMANI (BULGU-18): bugün her ![]()
tek tek sınırlı (.brand-logo sabit
34px, .obs-poster %100, .mq-amblem min(64vmin,620px)) — yani taşan görsel YOK.
Ama kuralı olmayan yeni bir görsel eklenirse (temel.css'te "ileride şablon ekran
görüntüsü gelecek" diye planlanmış) mobilde taşar ve body{overflow-x:hidden}
yüzünden SESSİZCE kırpılır: hata görünmez, teşhis edilemez. Bu iki satır o
sınıfı baştan kapatıyor. Mevcut kuralların hepsi daha özgül (0,1,0 > 0,0,1),
dolayısıyla hiçbiri ezilmiyor — görsel çıktı değişmez. */
img { max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cz-renk, var(--murekkep)); outline-offset: 3px; border-radius: 2px; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); position: relative; }
/* PAPER NEFES BÖLGESİ (UY3/16c) — KRİTİK METİN GÖRÜNÜRLÜĞÜ.
Nötr/hat token'ları LİTERAL ink/paper ile yeniden tanımlanır: var(--murekkep)
üzerinden geç-çözümleme paper üstünde açık-gri metin bırakıp AA'yı düşürüyordu.
Ayrıca gerçek paper zemin PAINT + ink metin; spektral tedavi (bloom/mesh) üstte
katman (boş beyaz DEĞİL — madde 21b). */
/* PAPER NEFES: [data-mod="paper"] atmosfer.css'te tanımlı (opak paper + AA --notr +
multiply mesh + eşit özen). Bu dosya paper'ı TANIMLAMAZ (paket kazanır). */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 300; background: var(--murekkep); color: var(--zemin); padding: 10px 16px; border-radius: 4px; }
.skip:focus { left: 8px; }
/* ── IŞIK HALESİ · .isik-hale ────────────────────────────────────────────────
Beyaz metnin çevresine yumuşak ışık halesi. İki katman: dar çekirdek + geniş
bloom. Renk --murekkep'ten türer, yani kağıt bölgede kendiliğinden koyu haleye
döner (orada da doğru davranır).
⚠ ANİMASYONLU/TRANSFORM'LU BAŞLIKLARA VERME. Blur'lu text-shadow, her karede
transform edilen bir metnin raster'ını yeniden boyatır; deck başlıklarında tam
olarak bu yüzden gölge kaldırılmıştı (bkz. tayf-tipografi.css). Statik
başlıkta ise bir kez boyanır, kare başına maliyeti YOKTUR.
Spektral parçalar hale ALMAZ: beyaz bir hale gökkuşağı harflerin kenarını
soldurup rengi kirletiyor. text-shadow miras alındığı için açıkça sıfırlanır. */
/* ── TEK IŞIK KAYNAĞI · .isik-kaynak ───────────────────────────
"Tek ışık" tezinin tipografik hâli: parlak beyaz çekirdek + geniş yayılım.
İki kullanımı var — (a) cümle içindeki TEK kelime (sablonlar h1'inde "özel";
kalanı düz beyaz kalır), (b) TÜM başlık (surec akış adımları, ekranda tek
başına duran dev tipografi). Işığın komşu harflere taşması KASITLI.
Ölçüm: çekirdek 19.6:1, düz beyaz metin 19.1:1. Ayrım parlaklık farkından değil
YAYILIMDAN geliyor: kelime ışık saçıyor, kalanı saçmıyor. (Bir ara kalan metin
%70'e kısılmıştı — kullanıcı düz beyaz istedi, kısma kaldırıldı.)
Yayılım 4 katmanlı: dar çekirdek → geniş bloom. Tek katman ya sert bir kontur
ya da dağınık bir sis veriyor; kademe ışık hissini kuran şey.
⚠ .isik-hale ile AYNI ANDA kullanma — ikisi de text-shadow yazar.
TRANSFORM'LU BAŞLIKLAR: kural, öğe KENDİ compositor katmanındaysa güvenli
(metin bir kez raster'lanır, animasyon yalnız katmanı kompoze eder). surec
akış adımlarında öyle — .akis-adim `will-change: transform, opacity` taşıyor;
scrub boyunca ölçtüm, gölgeli/gölgesiz fark gürültü seviyesinde. Promote
EDİLMEYEN, her karede transform edilen bir başlığa verirsen blur'lu gölge her
karede yeniden boyanır (deck başlıklarında tam bu yüzden gölge kaldırıldı,
bkz. tayf-tipografi.css). Yeni bir yere uygularken önce bunu doğrula. */
.isik-kaynak {
/* SAF BEYAZ — bilerek token DEĞİL. Sitenin beyazları kasten kırık: --paper
#FBFBF9, --isin-beyaz #fffef7 (mavisi 247, kırmızısı 255 → sıcak/krem).
Işık kaynağı olarak o sıcaklık "kırık beyaz" gibi okunuyordu; burada nötr
#fff isteniyor. Sitedeki TEK saf beyaz burasıdır, token'lara taşıma. */
color: #fff;
-webkit-text-fill-color: #fff; /* bg-clip'li bir geçmişten gelirse sıfırla */
/* ── FLARE PALETİ (varsayılan: mavi → menekşe → macenta nebula) ─────────────
r,g,b ÜÇLÜSÜ olarak tutulur ki aşağıdaki gradyanlar rgba(var(--x), alfa)
ile kendi alfasını verebilsin. Adım bazlı paletler için en alta bak. */
--fl-sol: 96,170,255; /* sol kanat */
--fl-sag: 255,110,210; /* sağ kanat */
--fl-dik: 150,110,255; /* dikey bıçak */
--fl-kopru: 168,110,255; /* orta köprü */
--fl-sis: 116,74,214; /* geniş sis */
--fl-hale: 160,107,245; /* text-shadow dış halkası */
/* Çekirdek DAR tutuldu: geniş yayılımı artık aşağıdaki flare çubukları taşıyor.
Buradaki iş yalnız harflerin kendi kenarını yakmak. */
/* İç halka beyaz kalır (harfin kenarı sıcak), dış halka menekşeye kayar —
çekirdekten dışa doğru soğuma, nebula referansındaki geçişin ta kendisi. */
text-shadow:
0 0 3px rgba(255,255,255,.62),
0 0 12px rgba(var(--fl-hale), .38);
position: relative;
isolation: isolate; /* ::before z-index:-1 ile metnin ARKASINDA kalsın */
}
/* ── GLARE / FLARE ÇUBUKLARI ─────────────────────────────────────────────────
Anamorfik lens parlaması: parlak çekirdekten çıkan uzun YATAY bıçak + daha
kısa dikey bıçak. Yönlü bir efekt olduğu için text-shadow ile YAPILAMAZ —
blur her yöne eşit yayılır, sonuç hep yuvarlak hale olur.
Teknik: üç ELİPTİK radial-gradient. Elips zaten uzun; yumuşaklığı gradyanın
kendisi veriyor, yani `filter: blur()` GEREKMİYOR. Bu önemli — tam ekran
blur'lu katmanlar bu projede Safari compositor'ını tıkayıp tıkları düşürmüştü
(bkz. atmosfer.css). Burada filtre yok, blend yok, animasyon yok: katman bir
kez raster'lanır, kaydırma sırasında yalnız kompoze edilir. */
.isik-kaynak::before {
content: "";
position: absolute; z-index: -1; pointer-events: none;
left: 50%; top: 50%; translate: -50% -50%;
width: 168%; height: 300%;
/* NEBULA PALETİ (referans görsel): derin mavi → menekşe → macenta, çekirdek
beyaz-sıcak. Renkler yan yana DEĞİL, kanat kanat dağıtıldı: sol kanat mavi,
sağ kanat macenta. Bu kromatik ayrışma gerçek anamorfik flare'in davranışı —
tek renkli bir çubuktan çok daha inandırıcı duruyor.
SIRA ÖNEMLİ: CSS'te İLK background-image EN ÜSTTE boyanır, o yüzden beyaz
çekirdek başta; renkli kanatlar ve sis onun altından taşar. */
/* ALFA NOTU: siyah zeminde bir rengin görünen parlaklığı ≈ alfa × renk. İlk
denemede kanatlar .30-.34'teydi ve nebula tonları griye düşüp kayboluyordu;
renk okunsun diye .55-.70 bandına çıkarıldı. Buraları düşürürsen efekt
yeniden beyaz bir sise döner. */
background:
/* 1) beyaz-sıcak çekirdek — DAR tutuldu ki renkleri yıkamasın */
radial-gradient(ellipse 20% 1.7% at 50% 50%, rgba(255,255,255,.72), transparent 62%),
/* 2) dikey bıçak (4 uçlu yıldız) — menekşe */
radial-gradient(ellipse 2.6% 32% at 50% 50%, rgba(var(--fl-dik),.55), transparent 72%),
/* 3) sol kanat */
radial-gradient(ellipse 36% 5.6% at 30% 50%, rgba(var(--fl-sol),.70), transparent 74%),
/* 4) sağ kanat */
radial-gradient(ellipse 36% 5.6% at 70% 50%, rgba(var(--fl-sag),.62), transparent 74%),
/* 5) köprü — iki kanadı birleştirir, çekirdeğin altından geçer */
radial-gradient(ellipse 30% 4% at 50% 50%, rgba(var(--fl-kopru),.55), transparent 74%),
/* 6) geniş nebula sisi */
radial-gradient(ellipse 54% 13% at 50% 50%, rgba(var(--fl-sis),.38), transparent 78%);
}
/* ── FLARE NEFESİ — hafif hareket ────────────────────────────────────────────
Yalnız `transform` + `opacity` oynar; ikisi de compositor özelliği, layout ya
da paint tetiklemez. Gradyanın KENDİSİ (background-position/renk) ASLA
animasyonlanmaz — o her karede yeniden boyama demek olurdu.
Merkezleme `translate: -50% -50%` ile yapılıyor; `translate` ayrı bir özellik
olduğu için `transform`u animasyona bırakabiliyoruz, ikisi çakışmıyor.
Buradaki transform'a translate EKLEME, merkezleme bozulur.
Hareket yatayda genişleyip dikeyde hafif inceliyor (gerçek anamorfik flare
nefes alırken böyle davranır) + opaklık dalgalanıyor. 2.8s — yuvarlak olmayan
bir süre, döngü göze "tekrar" olarak çarpmasın diye. (Önce 6.4s'ti, fazla
yavaş bulundu.) */
@media (prefers-reduced-motion: no-preference) {
.isik-kaynak::before { animation: flare-nefes 2.8s ease-in-out infinite; }
/* GİZLİ ADIMLARDA DURDUR. Süreç sahnesinde aynı anda tek adım görünür; kalan
dördü de flare nefesi çeviriyordu ve bu tamamen boşa işti — ölçtüm: 5 animasyon
0.284 sn, yalnız görünen olan 0.188 sn, hiç yok 0.151 sn (5 sn boşta).
GSAP autoAlpha gizli adıma satır içi `visibility: hidden` yazar; kanca o.
BAŞARISIZLIK MODU GÜVENLİ: seçici bir gün eşleşmezse animasyon eskisi gibi
çalışmaya devam eder, hiçbir şey bozulmaz. */
.akis-adim[style*="visibility: hidden"] .isik-kaynak::before { animation: none; }
}
@keyframes flare-nefes {
0%, 100% { transform: scaleX(1) scaleY(1); opacity: .82; }
50% { transform: scaleX(1.16) scaleY(.92); opacity: 1; }
}
/* ── ADIM BAZLI FLARE PALETLERİ (süreç akışı) ────────────────────────────────
Her adım İKİ RENKLİ bir flare taşır (sol kanat ↔ sağ kanat geçişi); adım 1
varsayılan mavi → macenta paletinde kalır (beğenilen referans, DEĞİŞTİRME). Yalnızca RENK değişkenleri
ezilir — gradyan geometrisi, alfalar ve animasyon ortak kalır, yani buradaki
bir düzeltme beş adımı birden düzeltir.
Sıra `:nth-child` ile: .akis-adimlar > .akis-adim ×5, HTML sırası = ekran sırası.
Adım eklenir/çıkarılırsa buradaki numaralar kayar — o zaman güncelle. */
/* ⚠ KROMATİK AYRIŞMA KURALI (adım 1'in beğenilen davranışı, istek üzerine 2-5'e
de taşındı): --fl-sol ile --fl-sag AYNI RENK AİLESİNDEN OLMAZ. Adım 1'de sol
kanat mavi (96,170,255), sağ kanat macenta (255,110,210) — flare'in içindeki
"renk geçişi" tam olarak bu. Eski 2-5 paletleri iki kanadı aynı aileden
veriyordu (kızıl/turuncu, yeşil/yeşil, sarı/sarı) ve tek renk parlama gibi
okunuyordu. Yeni paletlerin hepsinde iki kanat belirgin biçimde ayrı; ara
parçalar (dik bıçak, köprü, hale) İKİSİNİN ORTA TONU, sis ise o orta tonun
koyusu — geçiş kanattan kanada kesintisiz aksın diye. Yeni palet yazarken
bu üçlü ilişkiyi koru: sol ↔ ORTA(dik/köprü/hale) ↔ sağ, sis = koyu orta. */
.akis-adim:nth-child(2) .isik-kaynak { /* ATEŞ — sol kızıl → sağ altın (orta: turuncu, bronz sis) */
--fl-sol: 255,72,56; --fl-sag: 255,205,78; --fl-dik: 255,138,62;
--fl-kopru: 255,148,68; --fl-sis: 162,60,20; --fl-hale: 250,150,78;
}
.akis-adim:nth-child(3) .isik-kaynak { /* AURORA GECE — sol turkuaz → sağ menekşe (orta: mavi) */
--fl-sol: 46,235,200; --fl-sag: 176,110,255; --fl-dik: 110,170,250;
--fl-kopru: 104,178,248; --fl-sis: 52,84,190; --fl-hale: 120,170,240;
}
.akis-adim:nth-child(4) .isik-kaynak { /* GÜL — sol TAM KIRMIZI → sağ TOZ PEMBE (orta: gül, koyu gül sis)
Yeşil palet (zümrüt → limon) istek üzerine kaldırıldı; ardından denenen
kırmızı → mor da yeterince kırmızı okunmadı (mor sağ kanadı baskın geliyordu).
Şimdi geçiş TEK AİLE İÇİNDE ama açık uçtan koyu uca: doymuş kırmızıdan
pudra pembesine. Bu, "iki kanat aynı aileden olmasın" kuralının bilinçli
istisnası — burada ayrışmayı hue değil DOYGUNLUK/AÇIKLIK farkı taşıyor
(255,20,28 → 246,186,196), o yüzden tek renk parlama gibi okunmuyor.
02 (kızıl → altın) ile karışmaz: o sarıya açılır, bu pembeye. */
--fl-sol: 255,20,28; --fl-sag: 246,186,196; --fl-dik: 252,116,136;
--fl-kopru: 250,126,144; --fl-sis: 148,44,62; --fl-hale: 250,140,155;
}
.akis-adim:nth-child(5) .isik-kaynak { /* ALACAKARANLIK — sol menekşe → sağ altın (orta: mercan) */
--fl-sol: 168,104,255; --fl-sag: 255,198,72; --fl-dik: 232,132,168;
--fl-kopru: 236,140,150; --fl-sis: 128,68,150; --fl-hale: 226,140,160;
}
@media (forced-colors: active) { .isik-kaynak::before { display: none; } }
@media print { .isik-kaynak::before { display: none; animation: none; } }
@media (forced-colors: active) {
.isik-kaynak { text-shadow: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
}
@media print { .isik-kaynak { text-shadow: none; } }
.isik-hale :is(.tayf-yazi, .tayf-tam, .tayf-yazi-kucuk) { text-shadow: none; }
.eyebrow, .kicker {
font-family: var(--font-mono); font-weight: var(--w-orta);
font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase;
color: var(--notr);
}
/* section ritmi — sabit değil: sayfalar bunu kendi mantığıyla ezer */
section { padding-block: var(--s-8); position: relative; }
section.tight { padding-block: var(--s-6); }
/* ═══ 1-2 · İMZA ZEMİN + ARKA PLAN — ANİMASYON-PLUS PAKETİ SAHİBİ ═══════════ .spektrum-zemin (tek sürekli fixed arka plan, m26) · .spektrum-bloom/-mesh · .tayf-isin/.tayf-tel/.tayf-refraksiyon · .icerik-scrim · .foto-spektral · [data-mod="paper"] → hepsi atmosfer.css + hareket.css'te tanımlı (paket kazanır). Bu dosya bunları TANIMLAMAZ; yalnız yapısal/düzen kuralları taşır. */
/* ═══ 3 · HEADER / NAV ═════════════════════════════════════════════════════ */
.site-header {
position: sticky; top: 0; z-index: 100;
/* backdrop-filter KALDIRILDI: Safari'de sticky header'ın altındaki animasyonlu
.spektrum-zemin'i her kare yeniden bulanıklaştırıp örnekliyordu → nav linkleri
sürekli yeniden çizilen bir compositor katmanında kalıp tıkları geciktiriyordu.
Blur, arkadaki içeriği bulanıklaştırmak içindi; TAM OPAK zeminde gerek kalmıyor
(içerik header'ın altından sızmaz), GPU maliyeti sıfır. */
background: var(--zemin);
border-bottom: 1px solid var(--hatt);
}
.nav-in { display: flex; align-items: center; gap: var(--s-4); min-height: 68px; }
/* min-height 44px: bağlantının yüksekliği logo + .brand-ad satırından geliyordu
≈34px (≤560px'de logo 29px'e inince daha da az). Dokunma hedefi olarak küçük.
Header'ı BÜYÜTMEZ: .nav-in zaten min-height:68px ve align-items:center — 44px
onun içinde kalıyor, hiçbir şey yer değiştirmiyor (masaüstü dahil). */
.brand { display: inline-flex; align-items: center; min-height: 44px; gap: 11px; font-family: var(--font-display); font-weight: var(--w-kurulmus); letter-spacing: -.02em; font-size: 1.06rem; }
/* Raster logo lockup (açık-tema tasarımı) koyu header/footer üzerinde okunur kalsın diye
kendi near-white (#fcfcfc) zeminiyle eşleşen ince yuvarlak "chip" içinde. */
/* Amblem: gümüş, alfa kanallı, KARE. Eskiden buradaki logo aydınlık zemin için
çizilmiş bir lockup'tı ve koyu header'da okunsun diye beyaz bir "chip" içine
alınmıştı (padding + #fcfcfc + gölge). Yeni amblem zaten koyu zemin için
tasarlandı → chip KALDIRILDI, doğrudan header'a oturuyor. Kare olduğu için
width/height eşit; `width: auto` bırakılsaydı yükleme bitene kadar oran
bilinmez, satır zıplardı. */
/* "Ana Sayfa" — amblemin yanındaki görünür etiket. Logo ile birlikte AYNI
içinde durur, dolayısıyla ikisine de tıklanınca ana sayfaya gidilir; ayrı bir
bağlantı açmak aynı hedefe iki komşu link demek olurdu (ekran okuyucuda ve
klavye gezinmede gereksiz tekrar).
.brand display font'u + 700 ağırlığı taşıyor; etiket bunu DEVRALMAMALI, yoksa
amblemin yanında ikinci bir logo gibi ağır durur → gövde fontuna ve nav
linkleriyle aynı ölçüye çekiliyor. Bağlantının erişilebilir adı
"Onlineşirketim ana sayfa" olarak kalıyor: görünür metni ("Ana Sayfa")
içerdiği için WCAG 2.5.3 (Label in Name) karşılanıyor. */
.brand-ad {
font-family: var(--font-govde); font-size: .93rem; font-weight: 500;
letter-spacing: 0; color: var(--notr);
transition: color .18s var(--ease-mikro);
}
.brand:hover .brand-ad,
.brand:focus-visible .brand-ad,
.brand[aria-current="page"] .brand-ad { color: var(--murekkep); }
@media (max-width: 420px) { .brand-ad { font-size: .86rem; } }
.brand-logo { display: block; height: 34px; width: 34px; }
@media (max-width: 560px) { .brand-logo { height: 29px; width: 29px; } }
/* marka işareti: beyaz ışın + spektral ayrım (imza mikro-ölçekte) */
.nav-links { display: flex; gap: var(--s-4); margin-inline-start: auto; }
.nav-links a { position: relative; font-size: .93rem; font-weight: 500; color: var(--notr); padding: 8px 2px; transition: color .18s var(--ease-mikro); }
.nav-links a:hover { color: var(--murekkep); }
.nav-links a[aria-current="page"] { color: var(--murekkep); }
/* aktif alt-çizgi = SPEKTRAL İPLİK (imza yayılımı, madde 4) */
.nav-links a::after {
content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px; border-radius: 2px;
background: var(--cz-renk, currentColor); transition: right .28s var(--ease-cikis);
}
.nav-links a:hover::after { right: 0; }
.nav-links a[aria-current="page"]::after { right: 0; box-shadow: 0 0 8px var(--cz-renk, transparent); }
.nav-burger { display: none; margin-inline-start: auto; background: none; border: 1px solid var(--hatt); border-radius: 8px; width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; }
.nav-burger svg { width: 22px; height: 22px; stroke: currentColor; fill: none; }
/* Panel, sticky .site-header'ın KARDEŞİ ve normal akıştaydı → sayfa kaydırılmışken
belgenin tepesinde, yani görünür alanın DIŞINDA açılıyordu: hamburger'a basınca
ekranda hiçbir şey olmuyor, üstelik panel akışa girdiği için altındaki içerik
aşağı kayıyordu ("sayfa zıpladı, menü açılmadı"). Yalnız scrollY≈0'da doğruydu.
FIXED: header'ın hemen altına yapışır, içeriği ÖRTER (itmez). z-index header'ın
(100) altında kalır ki header'ın alt kenarlığı panelin üstünde okunsun.
--ust-h header'ın ölçülen yüksekliği (temel.js yazar). 69px fallback = .nav-in
min-height 68px + 1px border; JS çalışmasa da panel doğru yere oturur. */
.mnav {
display: none;
position: fixed; top: var(--ust-h, 69px); left: 0; right: 0; z-index: 99;
/* Uzun panel kısa ekranı (yatay telefon) taşmasın: kendi içinde kaydırılır.
overscroll-behavior: panelin sonuna gelince kaydırma arkadaki sayfaya ZİNCİRLENMEZ. */
max-height: calc(100svh - var(--ust-h, 69px));
overflow-y: auto; overscroll-behavior: contain;
border-bottom: 1px solid var(--hatt); background: var(--zemin);
}
@supports not (height: 100svh) {
.mnav { max-height: calc(100vh - var(--ust-h, 69px)); }
}
.mnav[data-open="true"] { display: block; }
/* 861px'te .nav-links geri gelir ve .nav-burger gizlenir (bkz. 13 · RESPONSIVE).
Panel data-open="true" kalsaydı iki navigasyon aynı anda görünür, üstelik
hamburger de gittiği için kapatmanın tek yolu bir bağlantıya tıklamak olurdu.
(Telefonu yatay çevirmek 375→812px'e çıkarır — bu yol gerçekten yürünüyor.)
JS de aynı eşikte durumu sıfırlar; bu kural JS'siz halde de güvenlik ağıdır. */
@media (min-width: 861px) { .mnav[data-open="true"] { display: none; } }
.mnav ul { padding: var(--s-2) 0; }
.mnav a {
display: flex; align-items: center; gap: 12px; padding: 14px var(--gutter);
font-weight: 500; color: var(--murekkep); border-bottom: 1px solid var(--hatt);
/* AKSAN BEYAZ: her bağlantı kendi data-hue'sunu taşıyor (tokenlar.css:128 →
[data-hue="n"] { --cz-renk: … }) ve nokta oradan besleniyordu → menü dokuz
ayrı renkte benek gibi okunuyordu. Tek satırda beyaza çekiliyor; nokta artık
yazıyla aynı mürekkebi kullanıyor, ikisi tek öğe gibi okunuyor.
--murekkep, sabit #fff DEĞİL: paper modunda koyu mürekkebe döner, yani tema
değişse de kontrast korunur. data-hue nitelikleri HTML'de duruyor — rengi
geri istersen bu satırı sil, hue sistemi kendiliğinden döner.
(Aynı kalıp .hs-kart'ta da var, oradaki nota bak.)
Özgüllük: .mnav a (0,1,1) > [data-hue="n"] (0,1,0) → kazanır. */
--cz-renk: var(--murekkep);
}
.mnav a .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--cz-renk, var(--notr)); flex: none; }
/* ═══ 4 · BUTONLAR ═════════════════════════════════════════════════════════ */
.btn {
display: inline-flex; align-items: center; gap: 9px;
padding: 13px 22px; border-radius: 999px; border: 1px solid transparent;
font-family: var(--font-govde); font-weight: 600; font-size: .95rem; cursor: pointer;
transition: transform var(--sure-mikro) var(--ease-mikro), background var(--sure-mikro), border-color var(--sure-mikro), box-shadow var(--sure-mikro);
}
.btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
.btn-primary { background: var(--murekkep); color: var(--zemin); }
.btn-primary:hover { transform: translateY(-1px) scale(1.02); box-shadow: 0 8px 30px color-mix(in srgb, var(--murekkep) 26%, transparent); }
.btn-ghost { border-color: var(--hatt-koyu); color: var(--murekkep); }
.btn-ghost:hover { border-color: var(--murekkep); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }
/* ═══ 5 · GENEL BAŞLIK BLOĞU (kullanıldığı yerde; sayfalar bunu ezebilir) ═══ */
.blok-baslik { display: grid; gap: var(--s-3); max-width: 52ch; }
.blok-baslik h1 { font-size: var(--t-h1); }
.blok-baslik h2 { font-size: var(--t-h2); }
.blok-baslik .lead { font-size: var(--t-lead); color: var(--notr); max-width: 46ch; }
/* ── IŞIK SAÇAN BAŞLIK ─────────────────────────────────────────────────────
Parlak beyaz + çevresine yayılan hale. Parlama `text-shadow` ile DEĞİL
`filter: drop-shadow` ile verilir: SplitText maskeleri (.spharf-mask) harf
kutularını `overflow: clip` ile kırpıyor, text-shadow o kutunun içinde kalıp
kesilirdi. filter öğenin render edilmiş çıktısına uygulanır, maske kırpmaz.
İki katman yeterli — drop-shadow pahalıdır, sayıyı düşük tut. */
.isik-baslik {
color: var(--murekkep);
/* Yarıçaplar em — başlık ölçeğiyle birlikte büyür/küçülür. Sabit px ile
gerçek boyutta (index'te 65,6px) hale orantısız kalıyordu. */
filter:
drop-shadow(0 0 .16em color-mix(in srgb, var(--murekkep) 50%, transparent))
drop-shadow(0 0 .55em color-mix(in srgb, var(--murekkep) 28%, transparent));
}
/* ═══════════════════════════════════════════════════════════════════════════
6 · INDEX — "spektral defter" omurgası (kendine özgü kompozisyon)
═══════════════════════════════════════════════════════════════════════════ */
/* 6.1 HERO (madde 22) — SOL: güçlü başlık/kopya · SAĞ: crisp tarayıcı-UI render'ı.
AZ renk (22a): geniş çok-renk yıkama yok, yalnız restrained kaynak-glow. */
.hero-copy { display: grid; gap: clamp(12px, 1.6vh, 24px); align-content: center; position: relative; z-index: 1; }
.hero-copy .eyebrow { color: var(--cz-renk, var(--notr)); }
.hero-copy .lead { font-size: var(--t-lead); color: var(--notr); max-width: 40ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3); }
/* 6.3 "TEK IŞIKTAN, TEK SİSTEM" (madde 21a) — imza YAKINSAMA (equalizer DEĞİL):
9 `.tayf-tel[data-hue]` merkeze (`.tayf-refraksiyon`) yakınsar. Tel/refraksiyon
stilleri PAKET'te (hareket.css). Bu dosya yalnız sahne düzenini verir. */
.nefes { text-align: center; }
.nefes-in { display: grid; gap: var(--s-4); place-items: center; position: relative; z-index: 1; }
.nefes-baslik { font-family: var(--font-display); font-size: var(--t-mega); font-weight: var(--w-ham); max-width: 14ch; line-height: 1; letter-spacing: -.03em; }
.nefes-baslik b { font-weight: var(--w-kurulmus); }
.nefes-alt { color: var(--notr); font-size: var(--t-lead); max-width: 42ch; }
.nefes-soz { font-family: var(--font-display); font-size: var(--t-mega); font-weight: var(--w-ham); line-height: 1; letter-spacing: -.03em; }
.nefes-soz b { font-weight: var(--w-kurulmus); }
/* ═══════════════════════════════════════════════════════════════════════════
7 · KAPSAM — yapışkan sol omurga + scrollspy okuma düzeni
═══════════════════════════════════════════════════════════════════════════ */
/* ⚠ minmax(0, 1fr) — SADE `1fr` DEĞİL. `1fr` aslında `minmax(auto, 1fr)`dir ve o
`auto` taban, ızgara öğesinin MIN-CONTENT genişliğidir. Buradaki öğe .omurga,
içinde `.omurga-mobil` var: `display:flex` + flex-wrap YOK → tek satırda 9 çip.
`overflow-x: auto` bunu sıfırlamıyor, çünkü "kaydırma kabının otomatik asgari
boyutu 0'dır" kuralı yalnız FLEX/GRID ÖĞELERİ için geçerli; .omurga-mobil ise
sıradan bir blok çocuk. Sonuç: min-content ≈ 678px, tek kolonluk track 678px'e
şişiyor ve 320px'lik ekranda sayfa 375px YATAY TAŞIYORDU (ölçüldü, TUR-0b).
`body{overflow-x:hidden}` bunu gizlediği için hiç fark edilmemişti.
minmax(0,…) tabanı sıfırlar; .omurga'daki min-width:0 aynı işi öğe tarafından
yapar (ikisi de yazıldı — biri değişirse diğeri korur). */
.kapsam-govde { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .kapsam-govde { grid-template-columns: 232px 1fr; gap: var(--s-6); align-items: start; } }
/* sol omurga: kalıcı spektral index (position sticky) */
.omurga { position: relative; min-width: 0; } /* bkz. .kapsam-govde notu: min-content taşmasını kes */
@media (min-width: 960px) { .omurga { position: sticky; top: 96px; } }
@media (min-width: 960px) {
.omurga ol { display: grid; gap: 2px; position: relative; padding-left: 20px; }
.omurga ol::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--hatt); border-radius: 2px; }
}
.omurga a { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: .9rem; color: var(--notr); position: relative; transition: color var(--sure-mikro); }
.omurga a::before { content: ""; position: absolute; left: -19px; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 999px; background: var(--zemin); border: 2px solid var(--hatt); transition: all var(--sure-mikro); }
.omurga a[aria-current="true"] { color: var(--murekkep); font-weight: 600; }
.omurga a[aria-current="true"]::before { background: var(--cz-renk); border-color: var(--cz-renk); box-shadow: 0 0 10px var(--cz-renk); }
.omurga a[aria-current="true"] { --cz-renk: var(--cz-renk); }
.omurga-mobil { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; }
@media (min-width: 960px) { .omurga-mobil { display: none; } }
/* DOKUNMA HEDEFİ 44px (BULGU-10): `padding: 6px 12px` + .8rem yazı ≈ 34,7px
yükseklik veriyordu — WCAG 2.5.5 / iOS-Android kılavuzlarının 44px önerisinin
altında, üstelik yatay kaydırmalı bir şeritte yan yana: hem küçük hem de
yanlışlıkla kaydırma tetikliyordu. Dolgu yerine min-height + inline-flex:
yazı boyutu değişse de yükseklik garanti kalır.
Bu kural ≥960px'te zaten uygulanmıyor (.omurga-mobil display:none) → masaüstü
etkilenmez. */
.omurga-mobil a { flex: none; display: inline-flex; align-items: center; min-height: 44px;
padding: 0 14px; border: 1px solid var(--hatt); border-radius: 999px; font-size: .8rem; color: var(--notr); }
/* KAYDIRMA İPUCU (BULGU-19): dokunmatikte kaydırma çubuğu görünmez; 9 çipin
kaydırılabilir olduğunu gösteren tek işaret sağdaki çipin sert kesilmesiydi.
Sağ kenarda 18px'lik yumuşama bunu "devamı var" işaretine çeviriyor.
mask kullanılıyor (gradyan zemin DEĞİL): sayfanın arkasında animasyonlu yıldız
katmanı var, opak bir gradyan onu keserdi; mask şeffaflık ürettiği için zemin
olduğu gibi görünür. Sonuna gelindiğinde de yumuşama kalır — kabul edilen
bedel; alternatifi (scroll-driven animation) tarayıcı desteği henüz dar. */
@media (pointer: coarse) {
.omurga-mobil {
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
}
}
/* sağ: 9 legend girişi — her biri hue tel çizimiyle (kart-grid değil, akan bölüm) */
.legend-akis { display: grid; gap: var(--s-3); min-width: 0; }
/* Dolgu SABİT 40px (--s-5) idi ve 375px'te metne yalnız ~193px bırakıyordu:
335 (wrap içi) − 80 (dolgu) − 8 (sol kenar çubuğu) − 30 (tel sütunu) − 24 (aralık).
O genişlikte --t-h3 başlık satır başına ~9-10 karakter alıyor, "Google İşletme
Profili" gibi adlar 3-4 satıra sarıyordu. Sayfadaki diğer kartlar dolguyu zaten
ölçekliyor (.pkt-kart, .ilt-kart, .bakim); .legend-madde bu kalıbın dışında
kalmış tek karttı.
Formül 960px'te (kapsam düzeninin iki kolona geçtiği eşik) 40px'e ULAŞIR →
masaüstü değeri birebir korunur; 375px'te 20px'e iner, metne ~243px kalır. */
.legend-madde { padding: clamp(20px, 3.6vw + 6px, 40px); display: grid; grid-template-columns: auto 1fr; gap: var(--s-3) clamp(14px, 2.5vw, 24px); align-items: start; scroll-margin-top: 96px; border-radius: 16px;
background: linear-gradient(105deg, color-mix(in srgb, var(--cz-renk) 16%, var(--cam)) 0%, var(--cam) 55%);
border-left: 8px solid var(--cz-renk); box-shadow: 0 10px 40px color-mix(in srgb, var(--cz-renk) 12%, transparent); }
.legend-tel-kap { width: 30px; }
.legend-tel-kap svg { width: 30px; height: 64px; overflow: visible; }
/* legend hue teli — STATİK (paket'in js-anim'de gizlediği .tayf-tel DEĞİL) */
.legend-hue-tel { fill: none; stroke: var(--cz-renk); stroke-width: 3; stroke-linecap: round;
filter: drop-shadow(0 0 5px color-mix(in srgb, var(--cz-renk) 60%, transparent)); }
.legend-govde h2 { font-size: var(--t-h3); font-weight: var(--w-kurulmus); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.legend-govde h2 .no { font-family: var(--font-mono); font-size: .74rem; color: var(--cz-renk); font-weight: 500; }
.legend-govde p { color: var(--notr); font-size: .97rem; font-weight: 500; margin-top: 8px; max-width: 60ch; }
.legend-specs { display: flex; flex-wrap: wrap; gap: 7px; margin-top: var(--s-3); }
.legend-specs li { font-family: var(--font-mono); font-weight: 500; font-size: .7rem; letter-spacing: .03em; color: var(--murekkep); background: color-mix(in srgb, var(--cz-renk) 22%, var(--cam-2)); border-radius: 999px; padding: 6px 12px; }
/* hangi sektöre ne katar — dürüst iki-sütun tanım listesi (yeni bölüm) */
.katar { display: grid; gap: 1px; background: var(--hatt); border: 1px solid var(--hatt); border-radius: 16px; overflow: hidden; }
.katar-satir { background: var(--zemin); display: grid; grid-template-columns: 1fr; gap: 6px; padding: var(--s-4); }
@media (min-width: 700px) { .katar-satir { grid-template-columns: 200px 1fr; gap: var(--s-4); align-items: baseline; } }
.katar-satir dt { font-family: var(--font-display); font-weight: var(--w-orta); font-size: 1.02rem; }
.katar-satir dd { color: var(--notr); font-size: .96rem; margin: 0; }
/* ═══════════════════════════════════════════════════════════════════════════
8 · SÜREÇ — dikey pin-timeline + SSS akordeon
═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
SÜREÇ — TAM-EKRAN ARDIŞIK AKIŞ ([data-sahne="surec-akis"])
───────────────────────────────────────────────────────────────────────────
BURADA yalnız DÜZEN + statik (no-js/reduced) durum: adımlar okunur dikey yığın,
zemin siyah, ışıltılar statik. Sticky/scrub/overlap + twinkle MOTION → hareket.css
(`:root.js-anim` altında). KUTU YOK: büyük tip + boşluk. ═══════════════════════ */
/* Zemin BİLEREK boyanmıyor: opak `background: var(--ink)` sitenin global yıldız
katmanını (body::before/::after, yildiz-zemin.css) bu bölümde kapatıyordu ve
bölüm sayfanın kalanından farklı görünüyordu. Şeffaf bırakınca aynı zemin
kesintisiz akıyor. Buraya opak bir background geri yazma. */
[data-sahne="surec-akis"] { position: relative; overflow: clip; }
/* no-js/reduced: normal blok — sahne-sabit sticky DEĞİL, adımlar akışta */
[data-sahne="surec-akis"] .sahne-uzun { height: auto; }
[data-sahne="surec-akis"] .sahne-sabit { position: static; min-height: 0; overflow: visible; }
/* Beyaz ışıltı alanı (saf CSS starfield) — içerik ARKASINDA */
/* 3 derinlik katmanı — her biri scroll'a göre farklı hızda kayar (hareket.js parallax).
inset:-14% = overscan → parallax kayarken kenarlarda boşluk açılmaz. */
/* Derinlik ipucu: uzak küçük+sönük, yakın büyük+parlak (--tw-max twinkle tepe opaklığı) */
/* Adımlar — no-js/reduced: dikey okunur yığın */
/* Süreç giriş bloğu DÜZ BEYAZ (kullanıcı isteği): başlık gökkuşağını, eyebrow
hue-3 yeşilini bıraktı. Eyebrow'un site geneli varsayılanı --notr (gri); burada
bilerek beyaza çekiliyor ki başlıkla aynı tonda okunsun. */
[aria-labelledby="sur-h"] .eyebrow { color: var(--murekkep); }
/* overflow-x: clip — TUR-0b ölçümünde bulundu (BULGU-12).
Adım başlıklarındaki `.isik-kaynak::before` nebula parlaması `width: 168%` ve
ortalanmış → başlığın HER İKİ YANINA %34 taşıyor. 320px'te başlık 263px, parlama
442px, sağ kenar 372px → sayfa 69px yatay kayıyordu (375px'te 88px). Hesap
ölçümle piksel piksel tuttu. Sola taşan kısım kaydırma üretmez (LTR), yalnız sağ.
`body{overflow-x:hidden}` bunu gizliyordu; kaldırılınca ortaya çıktı.
NEDEN BURADA KIRPIYORUZ: .akis-adimlar tam viewport genişliğinde, yani padding
kutusu 0→viewport. Kırpma sınırı, bugün body'nin yaptığı kırpmayla AYNI YER →
görsel çıktı hiç değişmez (masaüstü dahil). Parlamayı daraltmak (::before'a
width/max-width vermek) ise efekti görünür şekilde kısaltırdı — o yol seçilmedi.
.akis-adim'de kırpmak da olmazdı: o kutu 40px daha dar, parlama erken kesilirdi.
overflow-y BİLEREK visible: adımlar dikeyde akmaya devam etmeli. */
.akis-adimlar { position: relative; z-index: 1; display: grid; gap: var(--s-8); padding-block: var(--s-7); padding-inline: var(--gutter); overflow-x: clip; }
.akis-adim { display: grid; gap: var(--s-3); max-width: 900px; margin-inline: auto; width: 100%;
justify-items: center; text-align: center; } /* sahne ortalı — başlık/açıklama blokları da merkezde */
/* Akış başlıkları --t-mega'dan bir kademe DAHA büyük: bu sahnede ekranda tek
başlarına duruyorlar, sayfa ritmine uymak zorunda değiller.
BÜYÜTÜLDÜ (istek): 8.2rem → 9.6rem. Yer, üstteki .akis-no etiketi ve alttaki
ilerleme göstergesi kaldırılınca açıldı — iki satır + açıklama 100svh sahneye
hâlâ sığıyor (ölçüldü). Arkadaki flare ayrıca büyütülmek zorunda DEĞİL:
.isik-kaynak::before ölçüsünü kelimenin kutusundan yüzde olarak alıyor
(168% × 300%), yani punto ile birlikte kendiliğinden ölçekleniyor. */
.akis-baslik { font-family: var(--font-display); font-weight: var(--w-kurulmus); font-size: clamp(3.8rem, 1.6rem + 10.8vw, 9.6rem); line-height: .96; letter-spacing: -.03em; max-width: 16ch; margin-inline: auto; }
.akis-aciklama { color: var(--notr); font-size: var(--t-lead); line-height: 1.5; max-width: 46ch; margin-inline: auto; }
/* İlerleme göstergesi (.akis-gosterge/.akis-ray/.akis-sayac) KALDIRILDI — istek. */
/* SSS akordeon — details/summary (JS'siz de açılır) */
.sss { display: grid; gap: 0; max-width: 820px; }
.sss details { border-top: 1px solid var(--hatt); }
.sss details:last-child { border-bottom: 1px solid var(--hatt); }
.sss summary {
display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
padding: var(--s-4) 0; cursor: pointer; list-style: none;
font-family: var(--font-display); font-weight: var(--w-orta); font-size: 1.06rem;
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary .isaret { position: relative; width: 18px; height: 18px; flex: none; }
.sss summary .isaret::before, .sss summary .isaret::after { content: ""; position: absolute; background: var(--cz-renk, var(--murekkep)); border-radius: 2px; transition: transform var(--sure-mikro) var(--ease-mikro); }
.sss summary .isaret::before { left: 0; right: 0; top: 8px; height: 2px; }
.sss summary .isaret::after { top: 0; bottom: 0; left: 8px; width: 2px; }
.sss details[open] summary .isaret::after { transform: scaleY(0); }
.sss details[open] summary { color: var(--cz-renk, var(--murekkep)); }
.sss-cevap { color: var(--notr); font-size: .98rem; padding-bottom: var(--s-4); max-width: 68ch; }
/* ═══════════════════════════════════════════════════════════════════════════
9 · PAKETLER — üç kart, sitenin kendi teması
═══════════════════════════════════════════════════════════════════════════
RENK DİSİPLİNİ (bu sayfanın tek kuralı). Sayfa mürekkep zeminde, tek aksanla
(bölümdeki [data-hue="7"]) çalışır: kicker'lar, ✓ işaretleri, odak halkası ve
yükseltme vurguları hep O rengi okur. GÖKKUŞAĞI YALNIZ TEK YERDE: öne çıkan
paketin üst kenarındaki spektral şerit. Sebebi var — dokuz iplik sitenin
imzası, burada da tam olarak bir şeyi işaretliyor: önerilen paketi. Başlıklar,
fiyatlar ve liste öğeleri DÜZ; hepsi renkli olursa hiçbiri özel kalmaz
(önceki sürümün sorunu buydu: altı ayrı gökkuşağı başlık).
KARŞILAŞTIRILABİLİRLİK. Üç kart da AYNI sekiz özelliği AYNI SIRADA gösterir;
göz yatay tarayabilsin diye. Dahil = aksan renginde ✓ · Yok = nötr tire
(renk tek sinyal değil, şekil de — renk körlüğü için).
═══════════════════════════════════════════════════════════════════════════ */
/* ── Sayfa başlığı ────────────────────────────────────────────────────────── */
.pkt-giris { display: grid; gap: var(--s-3); justify-items: center; text-align: center;
max-width: 60ch; margin-inline: auto; margin-bottom: var(--s-6); }
.pkt-giris .eyebrow { color: var(--cz-renk, var(--notr)); }
.pkt-giris h1 { font-family: var(--font-display); font-weight: var(--w-kurulmus);
font-size: clamp(2rem, 1.4rem + 2.2vw, 3.1rem); line-height: 1.08;
letter-spacing: -.025em; margin: 0; }
.pkt-giris .lead { color: var(--notr); font-size: var(--t-lead); margin: 0; max-width: 52ch; }
/* ── Izgara ───────────────────────────────────────────────────────────────── */
.pkt-izgara { display: grid; gap: var(--s-4); grid-template-columns: 1fr; align-items: stretch; }
/* Üç kolon eşiği 1060 (900 değil): 900-1060 arasında kart ~300px'e düşüyor ve
mutlak konumlu .pkt-rozet başlığın üstüne biniyordu. Altında tek kolon. */
@media (min-width: 1060px) { .pkt-izgara { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }
/* ── Kart ─────────────────────────────────────────────────────────────────
Kutu var ve olması doğru: fiyat kartı karşılaştırma nesnesidir, sınırı
belli olmalı. Ama kütle değil yüzey — hafif cam + hairline. */
.pkt-kart { position: relative; display: grid; grid-template-rows: auto 1fr auto;
background: var(--cam); border: 1px solid var(--hatt); border-radius: 18px;
padding: clamp(22px, 2.6vw, 32px); overflow: hidden;
transition: border-color var(--sure-mikro), background var(--sure-mikro),
transform var(--sure-mikro) var(--ease-mikro); }
@media (hover: hover) and (pointer: fine) {
.pkt-kart:hover { border-color: var(--hatt-koyu); background: var(--cam-2); transform: translateY(-3px); }
}
/* SUBGRID — üç kart AYNI üç satırı paylaşır: başlık bloğu, özellik listesi ve
kart altı üç kartta da aynı y'de başlar. Fiyat/konum satırları farklı
yükseklikte (Küçük'ün konumu iki satıra sarıyor, Premium'da rakam yok) olduğu
için subgrid olmadan listeler 27px kayıyordu.
SIRA ÖNEMLİ: bu blok `.pkt-kart` temel kuralından SONRA gelmeli — medya
sorgusu özgüllük katmaz, eşit özgüllükte sonraki kural kazanır. Önce
yazıldığında `grid-template-rows: auto 1fr auto` subgrid'i eziyordu. */
@media (min-width: 1060px) {
.pkt-izgara { grid-template-rows: auto 1fr auto; }
.pkt-kart { grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
}
.pkt-ust { display: grid; gap: 6px; }
.pkt-ad { font-family: var(--font-display); font-weight: var(--w-kurulmus);
font-size: 1.3rem; letter-spacing: -.01em; margin: 0; color: var(--murekkep); }
.pkt-fiyat { font-family: var(--font-display); font-weight: var(--w-kurulmus);
font-size: clamp(2rem, 1.5rem + 1.5vw, 2.6rem); letter-spacing: -.03em;
line-height: 1.05; margin: 2px 0 0; color: var(--murekkep); }
/* Premium'un fiyatı yok — aynı optik ağırlıkta durmasın, satır yüksekliği tutsun */
.pkt-fiyat--iletisim { font-size: 1.18rem; font-weight: var(--w-orta); color: var(--notr);
letter-spacing: 0; padding-block: .5em; }
.pkt-konum { color: var(--notr); font-size: .92rem; line-height: 1.5; margin: 10px 0 0; }
/* ── Özellik listesi ──────────────────────────────────────────────────────── */
.pkt-ozellikler { list-style: none; margin: var(--s-4) 0 0; padding: var(--s-4) 0 0;
border-top: 1px solid var(--hatt); display: grid; gap: 11px; align-content: start; }
.pkt-madde { display: grid; grid-template-columns: 18px 1fr; gap: 11px; align-items: start;
font-size: .91rem; line-height: 1.45; color: var(--murekkep); }
.pkt-im { width: 18px; height: 18px; margin-top: 1px; position: relative; flex: none; }
/* DAHİL: aksan renginde ince ✓ (daire yok — daire, listeyi noktalı bir tabloya çeviriyordu) */
/* ✓ rengi karta göre: Küçük nötr → Büyük beyaz → Premium kendi spektral hue'su.
Renk merdiveni kartların önem sırasını işaretin kendisinde de taşır. */
.pkt-im::after { content: ""; position: absolute; left: 3px; top: 4px; width: 11px; height: 6px;
border-left: 2px solid var(--notr); border-bottom: 2px solid var(--notr);
transform: rotate(-45deg); border-radius: 1px; }
.pkt-orta .pkt-im::after { border-color: var(--murekkep); }
/* Büyük'te de renkli ✓ — AMA glow YOK. Hue satır sırasına bağlı olduğu için
aynı özellik her iki kartta da aynı rengi taşır (spektrumdaki yer özelliğin,
kartın değil). Odak hiyerarşisi ✓ renginde değil, Premium'un kendi
katmanlarında duruyor: spektral şerit, ışık sızıntısı, renkli hale, büyütme,
dolu buton ve ✓'lerdeki parıltı. */
.pkt-orta .pkt-madde[data-hue] .pkt-im::after { border-color: var(--cz-renk); }
.pkt-one-cikan .pkt-madde[data-hue] .pkt-im::after {
border-color: var(--cz-renk);
filter: drop-shadow(0 0 5px color-mix(in srgb, var(--cz-renk) 70%, transparent)); }
/* YOK: nötr tire — şekil de değişir, renk tek sinyal değil */
.pkt-madde.yok { color: var(--notr-silik); }
.pkt-madde.yok .pkt-im::after { left: 2px; top: 8px; width: 13px; height: 0;
border-left: 0; border-bottom: 2px solid var(--notr-silik); transform: none; }
/* Yükseltme: bir üst pakete göre farklılaşan madde */
/* Yükseltme vurgusu: renk DEĞİL ağırlık taşır (kart içinde mavi kalmadı). */
.pkt-madde.yukselt em { font-style: normal; font-weight: 600; color: var(--murekkep); }
/* ── Kart altı ────────────────────────────────────────────────────────────── */
.pkt-alt { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--hatt); }
.pkt-kart .btn { width: 100%; justify-content: center; }
/* ── BEYAZ PARLAK ÇERÇEVE · Küçük + Büyük ─────────────────────────────────
İki katman: net beyaz hairline (1px kenarlık) + dışa yayılan yumuşak hale.
Hale `box-shadow` ile — statik, animasyonsuz, tek boyama. Büyük bir kademe
daha parlak (kenarlık ve halede daha yüksek beyaz oranı). */
.pkt-kart:not(.pkt-one-cikan) {
border-color: color-mix(in srgb, var(--murekkep) 42%, transparent);
box-shadow:
0 0 18px -6px color-mix(in srgb, var(--murekkep) 34%, transparent),
inset 0 0 30px -24px var(--murekkep);
}
.pkt-orta {
background: var(--cam-2);
border-color: color-mix(in srgb, var(--murekkep) 80%, transparent);
box-shadow:
/* iki halkalı hale: dar+yoğun çekirdek, geniş+yumuşak yayılma.
Tek halkayla parlaklığı artırmak kenarlığı kalınlaştırıyor gibi
okunuyordu; ikinci geniş halka farkı KALINLIK değil IŞIK olarak taşır. */
0 0 16px -5px color-mix(in srgb, var(--murekkep) 60%, transparent),
0 0 42px -12px color-mix(in srgb, var(--murekkep) 42%, transparent),
inset 0 0 34px -20px var(--murekkep);
}
/* ── NEON HAREKETLİ ÇERÇEVE · Premium ─────────────────────────────────────
TEKNİK ve NEDENİ. Konik gradyanın açısını animasyonlamak (@property --angle)
her karede gradyanı YENİDEN BOYAR. Bunun yerine gradyan bir kez boyanır ve
`transform: rotate` ile döndürülür — compositor işi, boyama yok. Kartın
`overflow: hidden`ı fazlalığı kırpar, `::after` iç paneli ortayı kapatır;
geriye yalnız 2px'lik dönen halka kalır.
Bu, kaldırılan ışık animasyonundan çok daha ucuz: orada tüm viewport'u kaplayan,
9 maskeli, blur'lu ve iki kat blend'li bir katman her karede yeniden
birleşiyordu. Burada tek, maskesiz, blend'siz, kart boyutunda bir katman var.
İç panel OPAK olmak zorunda — yarı saydam olsaydı dönen gradyan kartın
içinden görünür, okuma zeminini kaydırırdı. */
.pkt-one-cikan {
background: transparent;
border-color: transparent;
box-shadow:
0 -10px 46px -22px var(--hue-9-ink),
0 16px 54px -26px var(--hue-7-ink),
0 0 90px -40px var(--hue-4-ink);
}
/* dönen neon kaynağı — kartı örtecek kadar büyük kare */
.pkt-one-cikan::before {
content: ""; position: absolute; left: 50%; top: 50%;
width: 168%; aspect-ratio: 1; translate: -50% -50%;
background: conic-gradient(from 0turn,
var(--hue-1-ink), var(--hue-2-ink), var(--hue-3-ink), var(--hue-4-ink),
var(--hue-5-ink), var(--hue-6-ink), var(--hue-7-ink), var(--hue-8-ink),
var(--hue-9-ink), var(--hue-1-ink));
filter: blur(6px);
will-change: transform;
}
/* iç panel — halkayı 2px'e indirir. Opak: dönen gradyan içeri sızmaz. */
.pkt-one-cikan::after {
content: ""; position: absolute; inset: 2px; border-radius: 16px;
background: linear-gradient(var(--cam-2), var(--cam-2)), var(--zemin);
}
@media (prefers-reduced-motion: no-preference) {
:root:not(.js-reduced) .pkt-one-cikan::before { animation: pkt-neon 8s linear infinite; }
}
@keyframes pkt-neon { to { rotate: 1turn; } }
/* Odak kartında metin parlar */
.pkt-one-cikan .pkt-fiyat--iletisim { color: var(--murekkep); font-size: 1.32rem; font-weight: var(--w-kurulmus); }
.pkt-one-cikan .pkt-konum { color: color-mix(in srgb, var(--murekkep) 84%, var(--zemin)); }
.pkt-one-cikan .pkt-madde { color: var(--murekkep); }
/* İçerik iki sözde-öğenin de ÜSTÜNDE kalmalı */
.pkt-one-cikan > * { position: relative; z-index: 1; }
@media (min-width: 1060px) {
.pkt-one-cikan { transform: scale(1.045); }
}
@media (prefers-reduced-motion: reduce) { .pkt-one-cikan { transform: none; } }
.pkt-rozet { position: absolute; top: 16px; right: 16px;
font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
color: var(--zemin); background: var(--murekkep); padding: 5px 11px; border-radius: 999px; }
/* Büyütülen kartta rozet de büyümesin — optik olarak diğeriyle eşit kalsın */
@media (min-width: 1060px) { .pkt-one-cikan .pkt-rozet { transform: scale(.958); transform-origin: top right; } }
/* ── İlk yıl açıklaması — kartların hemen altında, sessiz şerit ──────────── */
.bakim { display: grid; gap: var(--s-3); align-items: start;
border: 1px solid var(--hatt); border-radius: 16px; padding: clamp(20px, 2.4vw, 30px);
background: var(--cam); }
@media (min-width: 780px) { .bakim { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s-5); } }
.bakim .lb { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: .1em;
text-transform: uppercase; color: var(--cz-renk, var(--notr)); display: block; margin-bottom: 8px; }
.bakim h2 { font-family: var(--font-display); font-weight: var(--w-kurulmus);
font-size: var(--t-h3); margin: 0; }
.bakim p { color: var(--notr); font-size: .96rem; line-height: 1.6; margin: 0; }
/* ── Şeffaflık notları ────────────────────────────────────────────────────── */
.notlar { display: grid; max-width: 820px; list-style: none; padding: 0; margin: 0; }
.notlar li { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start;
padding-block: var(--s-3); border-top: 1px solid var(--hatt); color: var(--notr);
font-size: .96rem; line-height: 1.55; }
.notlar li:last-child { border-bottom: 1px solid var(--hatt); }
.notlar li svg { width: 19px; height: 19px; stroke: var(--notr-silik); fill: none;
stroke-width: 1.7; margin-top: 3px; flex: none; }
/* Son madde olumlu bir taahhüt ("gizli ücret yok") — tek aksan orada belirir */
.notlar li:last-child { color: var(--murekkep); }
.notlar li:last-child svg { stroke: var(--cz-renk); }
/* ═══════════════════════════════════════════════════════════════════════════
9b · SEO — afiş düzeni (index bölümü + seo.html). Az metin, büyük tip, boşluk.
Animasyon LAZY IFRAME ile izole (assets/seo-animation.html).
═══════════════════════════════════════════════════════════════════════════ */
/* AFİŞ / EDİTORYAL — KUTU YOK: kenarlık/dolgu/kart yok. Büyük tip + bol boşluk +
asimetri; öğeler boşlukta yüzer. Tek accent hue 7. */
/* index açıklayıcı afiş (animasyonsuz) — sola yaslı, boşlukta yüzen */
.seo-afis { display: grid; gap: var(--s-5); justify-items: start; }
.seo-afis .eyebrow { color: var(--cz-renk, var(--notr)); }
.seo-afis :is(h1, h2) { font-size: var(--t-mega); line-height: .98; letter-spacing: -.03em; font-weight: var(--w-kurulmus); max-width: 15ch; }
.seo-afis .lead { max-width: 46ch; }
/* ── HERO "grow" girişi (seo.html · .seo-afis--buyu) ─────────────────────────
Üç yazı açılışta küçükten (scale .5) doğal boyutuna (scale 1) büyür; sola
sabit (transform-origin:left) → görsel olarak SAĞA/yana doğru genişler.
transform reflow yapmaz + son kare scale 1 → hiçbir an taşma/kaydırma yok
("ekranı kaydırmadan"). Yalnız :root.js-anim altında; JS-off / reduced-motion'da
yazılar zaten tam boyutta ve görünür. */
@keyframes seo-buyu { from { transform: scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
:root.js-anim .seo-afis--buyu > * { transform-origin: left center; animation: seo-buyu .9s var(--ease-cikis) both; }
:root.js-anim .seo-afis--buyu > *:nth-child(1) { animation-delay: .05s; }
:root.js-anim .seo-afis--buyu > *:nth-child(2) { animation-delay: .20s; }
:root.js-anim .seo-afis--buyu > *:nth-child(3) { animation-delay: .38s; }
@media (prefers-reduced-motion: reduce) { :root.js-anim .seo-afis--buyu > * { animation: none; } }
.seo-satirlar { display: grid; gap: var(--s-3); max-width: 56ch; }
.seo-satir { font-size: var(--t-lead); line-height: 1.5; color: var(--notr); }
.seo-satir b { color: var(--cz-renk, var(--murekkep)); font-weight: 600; }
/* Animasyon (yalnız seo.html): kenarlık ve gölge YOK, zemin #202124.
KÖŞE: istek üzerine yumuşak/geniş yuvarlatma — eski 14px'ten belirgin daha
yuvarlak. clamp ile ölçeğe bağlı: dar ekranda 18px, geniş ekranda 34px.
iframe köşeyi `inherit` ile ALIR: WebKit bazı durumlarda ata `overflow:hidden`
ile iframe'i köşelerden kırpmıyor (kare kenar sızıyor); ikisine birden
yazınca iki motorda da yuvarlak görünüyor.
En-boy sahnenin mantıksal ölçüsüyle (1440×980) hizalı; kutu yükseldikçe yazılar büyür. */
.seo-anim { position: relative; width: 100%; aspect-ratio: 1440 / 980; border-radius: clamp(18px, 2.4vw, 34px); overflow: hidden; background: #202124; box-shadow: none; border: 0; }
.seo-anim iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; border-radius: inherit; }
/* seo.html kahraman animasyon — mümkün olduğunca büyük; yükseklik 84vh'yi aşmasın diye
genişlik üçüncü bir sınırla (84vh × 1.469 ≈ 123vw-eşdeğeri) kırpılır. */
.seo-anim--buyuk { width: min(100%, 1360px, 123vh); margin-inline: auto; }
/* ── MOBİLDE ORAN KİLİDİ AÇILIR ──────────────────────────────────────────────
`aspect-ratio: 1440/980` yüksekliği genişliğe kilitliyordu: 375px'lik telefonda
kutu yalnız 255px yüksek oluyor, iframe içindeki 1440×980 sabit sahne oraya
~0,25 ölçekle sığdırılıyordu → 20px'lik SERP başlığı ekranda ~5px görünüyordu.
Kutu dikeyde serbest bırakılmadan iframe içindeki hiçbir düzen düzeltmesi işe
yaramaz; ikisi birlikte gerekiyor (iframe tarafı: seo-animation.html ≤720px).
Yükseklik genişlikle ölçekleniyor ama tavan/taban var: 320px'de 490px (küçük
telefonda ekranı yutmasın), 430px+ genişlikte 570px'de duruyor.
Aynı eşik iframe'in içinde de 720px — ikisi ayrışırsa sahne ya kutuyu taşar
ya kutuda boşluk bırakır. */
@media (max-width: 720px) {
.seo-anim { aspect-ratio: auto; height: clamp(490px, 132vw, 570px); }
}
/* "Bir gün" süreç animasyonu (surec.html · LAZY IFRAME, izole) — açık kart koyu zeminde.
En-boy animasyonun kendi sahnesiyle (1600/600) hizalı; <720px'de o da dikeye döner (560px). */
/* SAYDAM — kart YOK. Eskiden burada krem bir panel vardı (background:#faf7f2 +
border-radius:18px + ağır box-shadow); kaldırıldı. Yerine ALTERNATİF BİR YÜZEY
DE KONMADI: yarı saydam panel, blur, gradient overlay, ince çerçeve, hatta
rgba(255,255,255,.03) gibi çok hafif bir zemin bile yok. Timeline doğrudan
sayfanın yıldız zemininin üstünde yüzer, yıldızlar altından kesintisiz görünür.
Ölçü/konum KORUNDU: aynı genişlik (min(100%,1200px)), yatayda ortalı, aynı
en-boy oranı → çevredeki metinlere göre hiçbir hizalama kayması olmaz. */
/* BÜYÜTME + METİN KOLONUNDAN TAŞMA. Sahne 1600×600 tasarlandı ve iframe içinde
`scale = kapsayıcıGenişliği / 1600` ile küçültülüyor; .wrap'in 1200px'ine
sıkışınca ölçek ~0.68'e düşüyor ve 13px'lik etiketler ekranda ~9px görünüyordu.
Kart kaldığı sürece o genişlik zorunluydu (panel metin kolonuna hizalıydı);
panel gidince böyle bir bağ kalmadı → bileşen .wrap'i aşıp ekrana yayılıyor.
TAŞMA TEKNİĞİ: margin-left:50% kutunun sol kenarını kapsayıcının ORTASINA
koyar, translate:-50% kendi genişliğinin yarısı kadar geri çeker → hangi
kapsayıcıda olursa olsun viewport'a göre ortalı kalır. 96vw tavanı sayesinde
asla ekrandan taşmaz (body'de overflow-x:hidden'a da yaslanmaz). */
.gun-anim { position: relative; width: min(96vw, 1800px); margin-left: 50%; translate: -50% 0; aspect-ratio: 1600 / 600; }
.gun-anim iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* MOBİLDE `vw` YOK — kapsayıcıya göre taşma.
Üstteki kural `width: min(96vw, 1800px)` kullanıyor, ama `vw` kaydırma çubuğunu
DA sayar; klasik çubuklu bir tarayıcıda (masaüstü Windows/Linux Chrome, dar
pencere) 96vw kullanılabilir genişliği aşabiliyor. TUR-0b ölçümünde surec.html
bu yüzden taşmış görünmüştü. Gerçek telefonda çubuk katman olduğu için etki
yok, ama `vw`ye yaslanmak gereksiz bir risk: .wrap'in kendi padding'i (--gutter)
üzerinden negatif marjla taşmak hem çubuktan bağımsız hem de daha basit.
Sonuç: bileşen viewport'un iki yanından 8px içeride durur, tam olarak. */
@media (max-width: 720px) {
.gun-anim {
aspect-ratio: auto; height: 560px;
width: auto; translate: none;
margin-left: calc(var(--gutter) * -1 + 8px);
margin-right: calc(var(--gutter) * -1 + 8px);
}
}
/* seo.html editoryal bloklar — KUTU YOK, boşlukla ayrılır, asimetrik (alternan) */
.seo-detay { display: grid; gap: var(--s-8); }
.seo-blok { display: grid; gap: var(--s-3); max-width: 42ch; }
.seo-blok:nth-child(even) { justify-items: end; text-align: right; margin-inline-start: auto; }
.seo-blok .kicker { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--cz-renk, var(--notr)); }
.seo-blok h2 { font-size: var(--t-h1); line-height: 1.02; letter-spacing: -.02em; }
.seo-blok p { color: var(--notr); font-size: var(--t-lead); line-height: 1.5; }
/* "İlk yıl ücrete dahil" — büyük tipografik ifade (şerit-kutu DEĞİL) */
.seo-vurgu { font-family: var(--font-display); font-weight: var(--w-kurulmus); font-size: var(--t-mega); line-height: 1; letter-spacing: -.03em; max-width: 15ch; }
.seo-vurgu em { font-style: normal; color: var(--cz-renk, var(--murekkep)); }
.seo-vurgu-alt { margin-top: var(--s-4); color: var(--notr); font-size: var(--t-lead); max-width: 48ch; }
/* ═══════════════════════════════════════════════════════════════════════════
9c · ANASAYFA DENEYİM AKIŞI — KUTUSUZ tipografik bölümler (A · B · C · D)
Ritim: bilgi (A) ↔ imza-animasyon (nefes) ↔ SEO ↔ dev-tip VURGU (B) ↔ köprü (C) ↔ tipografi (D).
Kural: kutu/çerçeve/dolgu YOK; ayrım boşluk + hue + tipografi ile. Split-text [data-split].
═══════════════════════════════════════════════════════════════════════════ */
/* (A) NE KURUYORUZ — eyebrow + H2 + 3 eksen satırı (kart değil, akan tipografi) */
.ne-kuruyoruz { display: grid; gap: var(--s-4); }
.ne-kuruyoruz > .eyebrow { color: var(--cz-renk, var(--notr)); }
.ne-kuruyoruz > h2 { font-size: var(--t-h1); font-weight: var(--w-kurulmus); line-height: 1.02; letter-spacing: -.02em; max-width: 18ch; }
.ne-eksenler { display: grid; gap: var(--s-4); margin-top: var(--s-3); max-width: 60ch; }
.ne-eksen { position: relative; padding-left: var(--s-4); font-size: var(--t-lead); line-height: 1.4; color: var(--notr); }
.ne-eksen b { display: block; color: var(--murekkep); font-family: var(--font-display); font-weight: var(--w-kurulmus); font-size: var(--t-h3); line-height: 1.15; letter-spacing: -.01em; margin-bottom: 4px; }
/* sol imza-tik: kısa hue çubuğu (kutu değil, tipografik işaret) */
.ne-eksen::before { content: ""; position: absolute; left: 0; top: .12em; width: 4px; height: 1.1em; border-radius: 4px; background: var(--cz-renk, var(--murekkep)); box-shadow: 0 0 12px color-mix(in srgb, var(--cz-renk, var(--murekkep)) 55%, transparent); }
/* (B) İLK YIL ÜCRETSİZ — VURGU ANI: dev tipografi + imza spektral çizgi (JS çizer) */
.ucretsiz-vurgu .wrap { display: grid; justify-items: center; gap: var(--s-4); text-align: center; }
.vurgu-baslik { font-family: var(--font-display); font-size: var(--t-mega); font-weight: var(--w-kurulmus); line-height: 1; letter-spacing: -.03em; max-width: 16ch; }
/* imza çizgi: JS-off/reduced'da çizili; js-anim'de gizli → .cizildi ile çizilir */
.vurgu-cizgi { width: min(560px, 72%); height: 12px; overflow: visible; }
.vurgu-cizgi path { fill: none; stroke: url(#vurguGrad); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--a5) 45%, transparent)); }
:root.js-anim .vurgu-cizgi path { stroke-dashoffset: 1; }
:root.js-anim .ucretsiz-vurgu.cizildi .vurgu-cizgi path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--sure-cozulme) var(--ease-cikis) .12s; }
@media (prefers-reduced-motion: reduce) { :root.js-anim .vurgu-cizgi path { stroke-dashoffset: 0; transition: none; } }
/* ince güven satırı — kutusuz, boşlukla ayrık küçük ikon+etiket */
.vurgu-guven { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px var(--s-4); margin-top: var(--s-2); }
.vurgu-guven span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-weight: 500; font-size: var(--t-micro); letter-spacing: .02em; color: var(--notr); }
.vurgu-guven span svg { width: 17px; height: 17px; flex: none; stroke: var(--cz-renk, var(--murekkep)); fill: none; stroke-width: 1.8; }
/* ═══════════════════════════════════════════════════════════════════════════
10 · YAKLAŞIM — editoryal manifesto · BAŞTAN SONA SİYAH (paper blok YOK)
mega pull-quote → numaralı ilkeler → insan onayı → kutusuz karşılaştırma → CTA
═══════════════════════════════════════════════════════════════════════════ */
/* .manifesto* KURALLARI KALDIRILDI — o hero bölümü (Yaklaşım · nasıl çalışırız /
"Hızlıyız. Ama acele etmeyiz.") tamamen silindi. Sayfa artık doğrudan aşağıdaki
tam ekran odak anıyla açılıyor. .manifest-akis (6 paragraf) BAŞKA bir şeydir,
aşağıda duruyor — karıştırma. */
/* ═══ MEGA PULL-QUOTE — SAYFANIN ODAK ANI ══════════════════════════════════════
Tam ekran, tek cümle, çıplak zemin. Bölümde hue YOK: yazının kendi beyaz
parlaması dışında hiçbir ışık/leke katmanı bulunmaz.
ARKA PLAN KATMANI YOK. Bir ara burada 5 lambalı bir sahne rigi (huzmeler +
havuz + zemin ışığı + vinyet) vardı, KALDIRILDI. Bölüm sitenin kesintisiz siyah
zemininin üstünde durur; ekrandaki tek ışık kaynağı yazının kendi parlamasıdır.
Geri eklemeden önce: o katmanlar blur + mix-blend-mode taşıyordu, bedava değil.
ÜÇ EVRE — sınıfları hareket.js sürer:
.mq-tayf harfler karışıkken DÜZ BEYAZ (scramble oynuyor; ad eski, bkz. evre 1)
.mq-parla metin çözüldüğü an IŞIK HUZMELERİ — yazıdan dışa açılan demet
(sınıfsız) sönümlenme sonrası SON HÂL: hafif parlak beyaz + saçılan ışık
⚠ SINIFSIZ HÂL = SON HÂL, bilerek. JS/GSAP/ScrambleText yoksa ya da
reduced-motion'da yazı doğrudan parlak beyaz görünür. Karışık evre OPT-IN:
.mq-tayf'ı yalnız gerçekten oynatacaksa JS ekler.
⚠ text-shadow SÜREKLİ ANİMASYON YOK — bilerek. Display ölçekli metinde her
karede blur'lu gölge yeniden boyanır (bkz. tayf-tipografi.css'teki aynı not).
Buradaki gölge DURAĞANDIR; yalnız evre geçişinde bir kez tween'lenir. */
.mega-quote {
position: relative;
min-height: 100dvh; /* TAM EKRAN — html/body'ye overflow:hidden YOK
(iletişim sayfasındaki içerik-yutan tuzak) */
display: grid; align-content: center;
padding-block: var(--s-7);
text-align: center;
overflow: clip;
/* Işın/patlama katmanları KALDIRILDI (istek): parlama artık yalnız metnin
kendi text-shadow'u. isolation duruyor — bölümün yığın bağlamını kendine
kilitli tutmak sonraki eklemeler için güvenli taban. */
isolation: isolate;
}
/* .vs-mesh KALDIRILDI (istek): karşılaştırma bölümündeki renkli/blur'lu zemin
katmanı. Bölüm artık sayfanın kesintisiz siyahını kullanıyor. Taban
.spektrum-mesh DURUYOR — kapsam.html hâlâ kullanıyor. */
/* ── YAZI · SON HÂL (varsayılan) ─────────────────────────────────────────────
Özgüllük notu: tayf-tipografi.css temel.css'ten SONRA yüklenir, dolayısıyla
`.tayf-yazi` (0,1,0) ve `.tayf-yazi :is(b,em,strong)` (0,1,1) kurallarını
ezebilmek için buradaki seçiciler bilerek daha özgül: `.mega-quote blockquote`
(0,1,1) ve `.mega-quote blockquote em/span` (0,1,2). */
.mega-quote blockquote {
font-family: var(--font-display); font-weight: var(--w-ham);
font-size: var(--t-mega); line-height: 1.02;
max-width: 16ch; margin-inline: auto; letter-spacing: -.03em;
position: relative;
background-image: none;
-webkit-text-fill-color: #fff;
color: #fff;
/* PARLAMA: seo.html'deki "Zirve tesadüf değil." (#seo-h) ile BİREBİR aynı —
istek üzerine kopyalandı. Katmanlı hale: yakın parlaklık → geniş yumuşak
saçılma. Gölge STATİK (nabız/animasyon yok).
NOT: bu dosyada daha önce "geniş yarıçap kullanma" uyarısı vardı (Chromium
büyük blur'u düşük çözünürlüklü tamponda hesaplayıp basamaklı dikdörtgen
leke bırakabiliyordu). #seo-h aynı yarıçaplarla sorunsuz çalıştığı için
birebir kopyalandı; render'da leke kontrolü yapıldı. */
/* GÜÇLENDİRİLDİ (istek: "şu an genel olarak sönük"). Yarıçaplar #seo-h'ınkine
yakın tutuldu — o değerlerde leke/bantlaşma olmadığı ölçülmüştü; artış
ağırlıkla ALFADA yapıldı (.50→.72, .28→.45, .16→.26, .10→.16), yarıçaplar
yalnız hafifçe genişledi. Alfa büyütmek bant riski taşımaz; yarıçap büyütmek
taşır (Chromium büyük blur'u düşük çözünürlüklü tamponda hesaplıyor). */
text-shadow:
0 0 12px rgba(255,255,255,.72),
0 0 34px rgba(255,255,255,.45),
0 0 76px rgba(255,255,255,.26),
0 0 130px rgba(255,255,255,.16);
transition: text-shadow 760ms var(--ease-cikis);
}
/* SÖNÜK EVRELER KALDIRILDI (istek): "animasyon sonucundaki parlaklık en baştan
kullanılsın". Yani hale artık TEK ve SABİT — scramble oynarken de, bittikten
sonra da aynı. Kaldırılanlar:
· `.mega-quote.mq-tayf blockquote { text-shadow: none }` + amblem sönük hâli
· `:root.js-anim .mega-quote:not(.mq-basladi)` sönük başlangıcı (EVRE 0)
EVRE 0 "parlak → sönük → parlak" titremesini önlemek için vardı; hale hiç
sönmediği için o titreme artık mümkün değil, kural gereksizleşti.
NOT: `.mq-basladi` sınıfını hareket.js hâlâ ekliyor ve temel.js'te onu zorla
ekleyen bir emniyet var. Artık HİÇBİR CSS kuralı bu sınıfa bakmıyor — zararsız
ama yük taşımıyor; ileride "bu sınıf ne işe yarıyor?" diye bakan olursa cevabı
burada. Sönük bir evre geri istenirse kanca yerinde duruyor.
⚠ PERF: gölge artık scramble OYNARKEN de boyanıyor (harfler her karede yeniden
yazılıyor). Ölçüldü — aşağıdaki nota bak; kabul edilebilir çıktı. */
/* ── AMBLEM · sözün arkasında ─────────────────────────────────────────────
Logo metnin ARKASINDA duruyor ve metinle AYNI haleyle parlıyor: gölge
katmanları blockquote'unkiyle birebir, tek fark drop-shadow olması —
text-shadow glif şeklini, drop-shadow alfa siluetini takip eder, burada
silüet daire olduğu için hale de dairesel çıkar.
Opaklık bilerek kısık: amblemin gümüş bölgeleri tam parlaklıkta beyaz
yazının kontrastını düşürüyordu (ölçüldü). */
.mq-amblem {
/* --mq-amblem-yukari: amblemi dikey merkezden YUKARI kaydırır (istek).
Ölçüm: kaydırmadan önce metnin merkezi bölümde 421px, amblemin merkezi
450px — amblem 29px AŞAĞIDA kalıyordu, söz amblemin üst yarısına biniyordu.
6vmin (900px yükseklikte ~54px) ikisini dengeliyor: amblem metnin bir tık
üstüne çıkıyor, söz dairenin ortasına oturuyor.
TEK AYAR KOLU BURASI — büyütürsen daha yukarı, küçültürsen merkeze döner. */
--mq-amblem-yukari: 6vmin;
position: absolute; left: 50%; top: 50%;
translate: -50% calc(-50% - var(--mq-amblem-yukari));
width: min(64vmin, 620px); height: auto; z-index: -1;
pointer-events: none; user-select: none;
/* .34 → .40 ve gölgeler güçlendirildi (istek: daha fazla parlama).
Opaklık üst sınırını KONTRAST belirliyor — amblemin gümüş bölgeleri fazla
açılırsa üstündeki beyaz yazıyı yer. Yazının arkasındaki birleşik zemin
ölçüldü (yazı gizlenip piksel piksel):
.34 → ort 15,2:1 · AA altı alan %0,03
.40 → ort 14,2:1 · AA altı alan %0,03 ← seçildi
.46 → ort 13,2:1 · AA altı alan %0,73 (okunurluk bozulmaya başlıyor)
.40 bedava sınır: gözle belirgin daha parlak, okunurluk maliyeti sıfır.
DAHA YUKARI ÇIKARMA — .46'da AA altı alan 24 katına çıkıyor. */
/* ⚠ YARIÇAPLAR SÖNÜK HÂLLE BİREBİR AYNI OLMALI — aşağıdaki iki sönük kural
(.mq-tayf ve EVRE 0) de 16/46/104 kullanır. Yalnız ALFALAR farklıdır.
Bir kez yalnız buradaki yarıçapları büyütmüştüm (16/46/104 yaparken sönük
hâl 12/34/76'da kaldı): uyumsuz yarıçaplar arasındaki filter geçişinde
WebKit katmanı komple düşürdü ve AMBLEM TAMAMEN KAYBOLDU — hesaplanan
stil doğru görünüyordu (opacity .62, visibility visible, görsel yüklü),
ekranda hiçbir şey yoktu. Üçünü birlikte değiştir. */
opacity: .62;
filter:
drop-shadow(0 0 12px rgba(255,255,255,1))
drop-shadow(0 0 34px rgba(255,255,255,.72))
drop-shadow(0 0 76px rgba(255,255,255,.44));
transition: opacity 760ms var(--ease-cikis), filter 760ms var(--ease-cikis);
}
/* Mobilde amblem daha geniş (78vmin) → yazının arkasına daha çoğu geliyor;
opaklık aynı oranda ölçekli tutuldu (.28 → .33). Yukarı kaydırma ÖZEL DEĞER
ALMIYOR: bir ara 4vmin yazılmıştı, ölçünce amblem yazının hâlâ 13px altında
kalıyordu. 6vmin masaüstündeki dengeyi mobilde de kuruyor (vmin zaten ekranla
ölçekleniyor, ayrı bir değere gerek yok). */
@media (max-width: 640px) { .mq-amblem { width: 78vmin; opacity: .51; } }
/* ── EVRE · "yazı düzelirken amblem de parlar" ───────────────────────────
Scramble oynarken (.mq-tayf) hem yazının halesi hem amblem SÖNÜK durur.
Harfler çözülüp sınıf kalkınca ikisi de AYNI süre ve eğriyle (760ms) son
hâline açılır → parlama tek bir olay gibi okunur.
Sönük durumda `filter: none` YAZILMAZ: none ile gölge listesi arasında
interpolasyon yok, geçiş zıplardı. Aynı sayıda drop-shadow, yalnız alfası
sıfır → yumuşak geçer.
Sınıfsız hâl = SON HÂL (fail-safe): JS hiç çalışmazsa da ikisi parlak. */
/* AMBLEM sönük başlar ve YAZIYLA BİRLİKTE yanar — YAZI ise hiç sönmez.
İkisi bilerek AYRILDI:
· yazının halesi: SABİT ve baştan parlak (istek: "animasyon sonucundaki
parlaklık en baştan kullanılsın").
· amblem: sönük → parlak, scramble bitince 760 ms'de açılır. Bir ara bunu da
kaldırmıştım; sonuç "logo animasyonla beraber parlamıyor" oldu — çünkü
ekrandaki tek ışık olayı buydu. Yazı zaten parlak olduğu için parlama anını
artık YALNIZ amblem taşıyor.
Sönük durumda `filter: none` YAZILMAZ: none ile gölge listesi arasında
interpolasyon yok, geçiş zıplardı. Aynı sayıda drop-shadow, yalnız alfası
sıfır → yumuşak geçer. */
.mega-quote.mq-tayf .mq-amblem {
/* Yarıçaplar parlak hâlle BİREBİR aynı (16/46/104) — bkz. oradaki uyarı.
Sönük form artık görünür: .07 "yok" gibiydi, istek üzerine ikisi de
yükseltildi. Alfalar sıfır değil, düşük → amblem scramble boyunca da var,
sonra yanıyor. */
opacity: .22;
filter:
drop-shadow(0 0 12px rgba(255,255,255,.24))
drop-shadow(0 0 34px rgba(255,255,255,.15))
drop-shadow(0 0 76px rgba(255,255,255,.09));
}
/* ── EVRE 0 · SÖNÜK BAŞLANGIÇ ────────────────────────────────────────────────
Sayfa BOYANDIĞI an ile hareket.js'in çalıştığı an arasında bölüm henüz
.mq-tayf almamış oluyordu → söz ve amblem TAM PARLAK görünüyor, script gelince
sönüyor, scramble bitince yeniden parlıyordu. Yani parlak → sönük → parlak.
Soğuk yüklemede gsap + ScrollTrigger + CustomEase + SplitText + ScrambleText
+ Lenis sırayla indiği için o ilk parlama bir saniyeye kadar çıkabiliyor.
Işık sıfırdan kurulmalı: başlangıç .mq-tayf ile BİREBİR aynı sönük hâl.
ÜÇ KATLI EMNİYET — sönük başlangıç ASLA kilitlenmemeli:
1) `:root.js-anim` — 'deki satır içi script BOYA ÖNCESİ ekler ve yalnız
hareket azaltma kapalıysa. reduced-motion'da bu kural hiç uygulanmaz;
GSAP yüklenmezse hareket.js js-anim'i kaldırır → söz doğrudan parlar.
2) `.mq-basladi` — animasyonu kuran JS ekler ve BİR DAHA KALDIRMAZ. Son
(sınıfsız) hâlin yeniden sönükleşmemesi buna bağlı; `:not(.mq-tayf)` gibi
bir kurgu son hâli de sönükleştirirdi.
3) ScrambleText eksikse hareket.js sınıfı yine ekler; hareket.js hiç
yüklenmezse temel.js'teki zaman aşımı ekler (bkz. o dosyalar). */
/* EVRE 0 — YALNIZ AMBLEM İÇİN. Yazının satırı bilerek YOK: yazı artık hiç
sönmüyor (istek), o yüzden onda "parlak → sönük → parlak" titremesi imkânsız.
Amblemde ise hâlâ gerekli, üstelik iki nedenle:
1) sayfa boyandığı an ile hareket.js'in .mq-tayf'ı eklediği an arasında
amblem tam parlak görünüp sonra sönerdi (titreme);
2) amblem görseli async çözülüyor — sönük başlangıç olmadan, görsel hazır
olduğu an tam parlaklıkta BİRDEN beliriyor. Yerelde önbellekli olduğu
için testte görünmez, ilk yüklemede "logo buglanıyor" diye okunur.
Üç katlı emniyet aynen geçerli: kural `:root.js-anim`e bağlı (reduced-motion'da
hiç uygulanmaz), `.mq-basladi` bir kez eklenip KALDIRILMAZ, ve hareket.js
yüklenmezse temel.js'teki zaman aşımı sınıfı zorla ekler. */
/* ⚠ `pointer: fine` KAPISI — MOBİLDE AMBLEM PARLAMASI YOK (istek).
"Parlama" dediğimiz olay bu kuralın ta kendisi: amblem sönük başlar, scramble
bitince 760 ms'de son hâline AÇILIR. Dokunmatikte scramble zaten hiç kurulmuyor
(hareket.js, aynı kapı) → sönük başlangıç da anlamsız kalırdı; üstelik kalsaydı
amblem sönükten parlağa BİR KEZ yine geçerdi, yani parlama sürerdi.
Kural hiç uygulanmayınca amblem ilk kareden itibaren son hâlinde duruyor:
parlaklık aynı, ANİMASYON yok. .mq-tayf'lı sönük kural da mobilde ölü — o sınıf
yalnız scramble kurulduğunda ekleniyor.
BEDELİ (kabul edildi): yukarıdaki EVRE 0 notunun 2. gerekçesi mobilde geçersiz
kalıyor — amblem görseli async çözüldüğü için hazır olduğu an belirir, öncesinde
sönük bir hayaleti olmaz. Bu bir POP'tur, parlama değil; istenen de buydu.
MASAÜSTÜ ETKİLENMEZ: `pointer: fine` yalnız fare/kalem kullanan cihazlarda
eşleşir, yani bugünkü davranış orada birebir korunur. */
@media (pointer: fine) {
:root.js-anim .mega-quote:not(.mq-basladi) .mq-amblem {
/* Yarıçaplar parlak hâlle BİREBİR aynı (16/46/104) — bkz. oradaki uyarı.
Sönük form artık görünür: .07 "yok" gibiydi, istek üzerine ikisi de
yükseltildi. Alfalar sıfır değil, düşük → amblem scramble boyunca da var,
sonra yanıyor. */
opacity: .22;
filter:
drop-shadow(0 0 12px rgba(255,255,255,.24))
drop-shadow(0 0 34px rgba(255,255,255,.15))
drop-shadow(0 0 76px rgba(255,255,255,.09));
}
}
/* İÇ VURGU ( "kalitenin") — GERİ GETİRİLDİ. Patlama katmanlarını silerken
bu kural da gitmişti: tarayıcı varsayılanına düşüp EĞİK ve ince
görünüyordu. Vurgu eğimle değil AĞIRLIKLA taşınır; renk/dolgu atadan miras
alınır ki tayf kuralları içeriden ayrı bir gradyan kurmasın. */
.mega-quote blockquote em,
.mega-quote blockquote span {
font-style: normal;
background-image: none;
-webkit-text-fill-color: inherit; color: inherit;
}
.mega-quote blockquote em { font-weight: var(--w-kurulmus); }
.mega-quote cite { display: block; margin-top: var(--s-5); font-family: var(--font-mono);
font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; font-style: normal;
color: var(--notr); }
@media (prefers-reduced-motion: reduce) {
.mega-quote blockquote { transition: none; }
}
/* manifesto gövdesi — 6 paragraf, taahhüt kelimeleri wght 300→700 (madde 5) */
/* B3: numaralar "ilke" gibi okunsun — kenar boşluğunda mono, hue'lu, harf aralıklı.
Kutu yok; ritim yalnız numara + boşlukla kurulur. */
.manifest-akis { display: grid; gap: var(--s-6); max-width: 62ch; margin-inline: auto; counter-reset: mp; }
.manifest-akis p { font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem); line-height: 1.55; color: var(--notr); position: relative; padding-left: 68px; }
.manifest-akis p::before {
counter-increment: mp; content: counter(mp, decimal-leading-zero);
position: absolute; left: 0; top: .42em;
font-family: var(--font-mono); font-size: .78rem; letter-spacing: .14em;
color: var(--cz-renk, var(--notr-silik));
}
/* numaranın altında kısa hue tiki — ilkeleri birbirinden ayıran sessiz işaret */
.manifest-akis p::after { content: ""; position: absolute; left: 2px; top: calc(.42em + 1.5rem); width: 22px; height: 1px; background: color-mix(in srgb, var(--cz-renk, var(--notr-silik)) 50%, transparent); }
@media (max-width: 560px) { .manifest-akis p { padding-left: 0; padding-top: var(--s-4); } .manifest-akis p::before { top: 0; } .manifest-akis p::after { display: none; } }
.manifest-akis p strong, .manifest-akis [data-wght-gecis] {
color: var(--murekkep); font-weight: var(--w-kurulmus);
font-variation-settings: "wght" var(--w-kurulmus);
}
/* B5 · karşılaştırma — KUTU YOK: çerçeve/dolgu/köşe kaldırıldı, ayrım artık
boşluk + ince hue tiki + tipografi. İki sütun, kart değil. */
.hazir-vs { display: grid; gap: var(--s-6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 820px) { .hazir-vs { grid-template-columns: 1fr 1fr; gap: var(--s-7); } }
/* Karşılaştırmanın GİRİŞİ: ortalı ve büyük (istek). İki sütun zaten simetrik
duruyor; giriş sola dayalı ve --t-h2 ölçeğindeyken bölümün ekseni kayıyordu.
YENİ ÖLÇEK İCAT EDİLMEDİ: büyütme --t-h2 → --t-h1, ortalama da
`margin-inline:auto + text-align:center` — ikisi de bu dosyada zaten kullanılan
deyimler (bkz. .hs-giris h2 yükseltmesi ve .gorunur-sahne .blok-baslik).
Kapsam #vs-h ile: o id yalnız yaklasim.html'de var, başka sayfaya sızmaz.
⚠ max-width `ch` cinsinden ve BLOĞUN kendi font boyutuna (≈16px) göre çözülür,
başlığınkine göre DEĞİL — yani başlığı büyütmek genişliği kendiliğinden
büyütmez. 46ch'de (varsayılan ölçü) başlık 4 satıra bölünüp dar bir sütun
hâline geliyordu. Ölçüldü: 54/62/70ch üçü de 3 satır, 46ch 4 satır.
62ch ortadaki değer — iki yöne de pay bırakır, ufak font/ekran oynamalarında
4 satıra düşmez. */
.blok-baslik:has(> #vs-h) { max-width: 62ch; margin-inline: auto; text-align: center; }
#vs-h { font-size: var(--t-h1); }
.vs-kart { display: grid; gap: var(--s-2); align-content: start; }
/* index.html — "Bizim verdiğimiz" bloğu biraz SAĞA kaydırılır (istek). Kart zaten
kapsayıcının sağ kenarında bittiği için translate/negatif margin taşma üretirdi;
başlangıç payı ise ızgara hücresinin içinde kalır: içerik sağa kayar, sağ kenar
yerinde durur, satırlar bir tık dar sarar. Yalnız iki kolonun rahat olduğu
genişlikte (≥1000px) — 820-1000 bandında kolonlar zaten dar, orada pay yer yer.
KAPSAM: .gorunur-sahne sadece index.html'de. Aynı bileşen yaklasim.html'de de
kullanılıyor, oraya DOKUNULMUYOR. */
/* 1000-1200: .wrap'in dışında kayda değer boşluk yok → hücre İÇİNDE küçük pay. */
@media (min-width: 1000px) and (max-width: 1199.98px) {
.gorunur-sahne .hazir-vs .vs-kart.iyi { margin-inline-start: clamp(20px, 3vw, 48px); }
}
/* ≥1200: .wrap 1200px'de kapanıyor, geniş ekranda sağda büyük bir boşluk kalıyor.
Kart oraya taşınır. Başlangıç payı kadar NEGATİF bitiş payı veriliyor: kart
genişliğini KORUR, sadece kayar (yalnız pozitif pay verilseydi daralır ve
maddeler iki satıra düşerdi).
Kaydırma miktarı serbest dış paydan türer — (100vw − içerik genişliği) / 2 —
ve sayfanın kendi --gutter'ı kadar emniyet payı düşülür: kart en fazla sayfanın
DIŞ HİZASINA kadar gider, ekran kenarına yapışmaz (20px denendi, 1440'ta
sıkışık duruyordu). 280px tavanı çok geniş ekranda sol sütundan büsbütün
kopmasını engeller. */
@media (min-width: 1200px) {
.gorunur-sahne .hazir-vs .vs-kart.iyi {
--vs-kaydir: min(calc((100vw - (var(--wrap) - var(--gutter) * 2)) / 2 - var(--gutter)), 280px);
margin-inline-start: var(--vs-kaydir);
margin-inline-end: calc(var(--vs-kaydir) * -1);
}
}
/* kutu yerine kısa hue tiki — sütunu sessizce işaretler */
.vs-kart .lb { position: relative; padding-top: var(--s-3); font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--notr); }
.vs-kart .lb::before { content: ""; position: absolute; left: 0; top: 0; width: 40px; height: 2px; border-radius: 2px; background: var(--cz-renk); }
.vs-kart.kotu .lb::before { background: var(--notr-silik); }
.vs-kart.iyi .lb { color: var(--cz-renk); }
.vs-kart h3 { font-size: var(--t-h3); font-weight: var(--w-orta); }
.vs-kart ul { display: grid; gap: 10px; margin-top: var(--s-3); }
.vs-kart li { display: grid; grid-template-columns: auto 1fr; gap: 10px; font-size: .95rem; color: var(--notr); }
.vs-kart li svg { width: 18px; height: 18px; margin-top: 3px; flex: none; fill: none; }
.vs-kart.kotu li svg { stroke: var(--notr-silik); }
.vs-kart.iyi li svg { stroke: var(--cz-renk); }
/* B4 "otomatik üretir, kararı insan verir" bölümü KALDIRILDI (istek) — .evre-akis
/ .ev-ad / .ev-not kuralları yalnız onu giydiriyordu, birlikte silindi. */
/* ═══════════════════════════════════════════════════════════════════════════
11 · İLETİŞİM — sade, iki kolon
═══════════════════════════════════════════════════════════════════════════
Alışıldık bir iletişim düzeni: SOL anlatı + kanallar, SAĞ form.
Kavramsal mekanizma yok; sayfa sitenin token'larıyla temiz kurulmuş.
TEK AKSAN. Bölümde bir [data-hue="7"] var (serin mavi) ve her vurgu onu
--cz-renk üzerinden okur. Sağ-alt köşedeki asistan widget'ı da aynı maviye
ayarlı (data-accent="#3186fe") — sayfa onunla aynı dili konuşur.
KAYDIRMA YOK. ≥1000px'te html/body overflow:hidden; ölçüler clamp(...vh...)
ile verildiği için ayrı bir yükseklik eşiği gerekmez.
NOT — geçmişte iki kez ısırdı, tekrar etme:
1) :has() içinde :has() GEÇERSİZDİR ve virgül grubundaki tek geçersiz
seçici GRUBUN TAMAMINI düşürür.
2) Yerel sunucu Cache-Control göndermezse tarayıcı CSS'i sezgisel tazelikle
önbellekten verir; kod değişse de ekran değişmez.
═══════════════════════════════════════════════════════════════════════════ */
.iletisim { padding-block: var(--s-6); }
.ilt-grid { display: grid; gap: var(--s-6); grid-template-columns: 1fr; align-items: center; }
/* ── SOL · anlatı + kanallar ──────────────────────────────────────────────── */
.ilt-sol { display: grid; align-content: center; gap: var(--s-4); min-width: 0; }
.ilt-sol .eyebrow { color: var(--cz-renk); }
.ilt-sol h1 { font-family: var(--font-display); font-weight: var(--w-kurulmus);
font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem); line-height: 1.08;
letter-spacing: -.025em; max-width: 14ch; margin: 0; }
.ilt-lead { font-size: var(--t-lead); color: var(--notr); max-width: 40ch; margin: 0; }
.ilt-kanallar { display: grid; gap: clamp(8px, 1.4vh, 14px); margin-top: var(--s-2); }
.ilt-kanal { display: flex; align-items: center; gap: var(--s-3);
padding: clamp(9px, 1.4vh, 14px) var(--s-3);
border: 1px solid var(--hatt); border-radius: 12px;
transition: border-color var(--sure-mikro), background var(--sure-mikro),
transform var(--sure-mikro) var(--ease-mikro); }
.ilt-kanal:hover { border-color: color-mix(in srgb, var(--cz-renk) 55%, transparent);
background: var(--cam); transform: translateX(3px); }
.ilt-kanal .ic { width: 38px; height: 38px; flex: none; border-radius: 10px;
background: var(--cam); display: grid; place-items: center;
transition: background var(--sure-mikro); }
.ilt-kanal:hover .ic { background: color-mix(in srgb, var(--cz-renk) 18%, transparent); }
.ilt-kanal .ic svg { width: 19px; height: 19px; stroke: var(--cz-renk); fill: none;
stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ilt-kanal .tx { display: grid; gap: 1px; min-width: 0; }
.ilt-kanal .lb { font-family: var(--font-mono); font-size: var(--t-micro);
letter-spacing: .08em; text-transform: uppercase; color: var(--notr); }
.ilt-kanal .vl { font-weight: 500; font-size: .96rem; color: var(--murekkep);
overflow-wrap: anywhere; }
.ilt-kanal .ok { width: 17px; height: 17px; flex: none; margin-inline-start: auto;
stroke: var(--cz-renk); fill: none; opacity: .45;
transition: opacity var(--sure-mikro), transform var(--sure-mikro); }
.ilt-kanal:hover .ok { opacity: 1; transform: translateX(3px); }
/* ── SAĞ · form ───────────────────────────────────────────────────────────
Alışıldık kart yüzeyi: hafif cam + hairline + yumuşak köşe. Alanlar da
kendi yüzeyinde — "bu tıklanır" sinyali net olsun. */
.ilt-kart { background: var(--cam); border: 1px solid var(--hatt); border-radius: 18px;
padding: clamp(20px, 3vh, 34px); min-width: 0; }
.ilt-kart-baslik { font-family: var(--font-display); font-weight: var(--w-kurulmus);
font-size: 1.12rem; margin: 0 0 4px; }
.ilt-kart-alt { color: var(--notr); font-size: .9rem; margin: 0 0 var(--s-4); }
.ilt-satir { display: grid; gap: clamp(12px, 1.8vh, 18px); grid-template-columns: 1fr; }
/* Eşik 520 → 640.
⚠ GEREKÇE DÜZELTİLDİ: MOBILE_AUDIT.md BULGU-16 bunu "alanlar içeriğe dar
kalıyor, placeholder ve