/* ══════════════════════════════════════════════════════════════════════════ KATMAN SIRASI — sonraki katman öncekini YENER (özgüllükten bağımsız). Bu dosya BİZİM sitemizde koşuyor: kaskadın tamamı bizim, rakip yok. O yüzden panelin reçetesi burada birebir geçerli. ⚠️ `content.css`'e AYNI ŞEY YAPILMAZ: o Facebook'un sayfasına enjekte oluyor ve katmansız bir bildirim BÜTÜN katmanları yener — FB'nin kuralları katmansız olduğu için orada `@layer` durumu KÖTÜLEŞTİRİR. ══════════════════════════════════════════════════════════════════════════ */ @layer reset, token, role, component, state, override; /* Katman DIŞI bırakılanlar: @keyframes kaskad katılımcısı değildir (ada göre çözülür), katmana alınması anlamsız olurdu. */ @keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.3;}} @keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}} @keyframes scope-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}} @keyframes scope-ping{0%{transform:scale(0.4);opacity:0.55;}100%{transform:scale(1.9);opacity:0;}} @keyframes scope-blink{0%,100%{opacity:0.35;}50%{opacity:0.8;}} @keyframes scroll-x{from{transform:translateX(0);}to{transform:translateX(-50%);}} @keyframes promo-shimmer{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}} @keyframes fbaLivePulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--red-rgb),0.55);}55%{box-shadow:0 0 0 6px rgba(var(--red-rgb),0);}} @layer token { /* ============================================================ shared.css — AdVantage Scope marketing site ortak stilleri. index.html + pricing.html (+ ileride eklenecek sayfalar) bu tek dosyayı paylaşır — CSS'in iki yerde kopyalanıp zamanla birbirinden sapması (drift) riskini ortadan kaldırmak için. ============================================================ */ :root { /* ══ PALET · 5 Ağu 2026 — yeni ana sayfa tasarımına hizalandı ═══════════ Kaynak: tools/prototip/kaynak.html (kullanıcının onayladığı tasarım). Değerler ORADAN ÖLÇÜLDÜ, göz kararıyla seçilmedi — her rengin hangi özellikte kaç kez kullanıldığı sayıldı, rolü ona göre atandı. ⚠️ "138 renk uyuşmuyor" ilk ölçümü YANILTICIYDI. Rolleri sayınca görüldü: o renklerin çoğu TEMA DEĞİL, ÇİZİM İÇERİĞİ — sayfada bir Meta kartı taklidi var ve `#e4e6eb`/`#65676b`/`#f0f2f5`/`#dadde1` Meta'nın KENDİ renkleri; `#95bf47` Shopify yeşili; gerisi sahte reklam kreatifleri ve tarayıcı logoları. Bunlar token'a alınmaz — bizim tasarım dilimiz değil, taklit ettiğimiz şeyin dili. Gerçek tema farkı KÜÇÜK çıktı: beşi nüans, biri gerçek değişim. --paper #f7f5f0 → var(--paper) (sıcak kâğıt → saf beyaz) --paper-dim #eeece4 → #f0f2f5 --ink #0b0d14 → #0b0b0c --muted #5b5f6e → #5a5a62 --line ink türevi → saf siyah türevi (prototipin kenarları) --ink-soft #1a1d29 → #3a3a3e ← tek GERÇEK değişim, açıldı --blue DEĞİŞMEDİ (prototiple birebir aynı: #1f4fff) Durum renkleri (red/amber/mint) BİLEREK DOKUNULMADI: prototipin yeşilleri onun istatistik bölümüne ait, bizim durum rolümüz değil. Onları da oynatmak önceki turlarda ölçülmüş kontrastları yeniden açardı — kazancı yok, riski var. KONTRAST YENİDEN ÖLÇÜLDÜ (WCAG, metin eşiği 4.5:1). Sekiz çiftin sekizi de geçiyor ve YEDİSİ İYİLEŞİYOR: gövde metni 17.81 → 19.67 ↑ ikincil metin 5.83 → 6.83 ↑ marka metni 5.32 → 5.80 ↑ koyu yüzeyde 17.81 → 19.67 ↑ soluk yüzeyde 16.41 → 17.54 ↑ soluk/ikincil 5.37 → 6.09 ↑ mavi dolguda beyaz 5.80 = 5.80 koyu yüzey 2 15.40 → 11.32 ↓ (hâlâ ✅) ══════════════════════════════════════════════════════════════════ 🔴 9 AĞU · GERİ ALMA. Bir palet turu (9d38152) yukarıdaki üç değeri değiştirdi ve YANLIŞTI. Sebebi tam olarak bu bloğun ⚠️ ile uyardığı şeydi: değerler `tools/prototip/normal/prototip.css`ten okundu — o dosya bir NORMALİZE TÜREVİ ve içinde Meta kartı taklidinin renkleri duruyor. Depo bunu kendi aracında AÇIKÇA yazıyor: CIZIM_RENKLERI = { 'rgb(228,230,235)': 'Meta arayüz yüzeyi', → #e4e6eb 'rgb(101,103,107)': 'Meta ikincil metin', → #65676b } Yani taklit ettiğimiz arayüzün rengi tasarım dilimiz sanıldı. Otorite `tools/prototip/referans/stil-1280.json` — dondurulmuş, gerçek tarayıcıda çizilmiş referans. Kullanım sayısıyla ölçüm: rol prototipin BASKIN değeri kez yanlış alınan kez --ink #0b0b0c 90 #050505 23 --ink-soft #3a3a3e 28 #4e5054 0 ← --muted #5a5a62 81 #65676b 24 `#4e5054` prototipte HİÇ geçmiyor. Üçü de geri alındı. Turun DOĞRU olan tek kısmı korundu: `--paper-rgb` saf beyaza çevrilmişti (prototip gerçekten saf beyaz), o duruyor. ⚠️ Sonraki denetim: palet sorusu `normal/prototip.css`ten DEĞİL, `referans/stil-*.json`dan cevaplanır. Türev dosya taklit rengini tema renginden ayırmaz; referans ayırır çünkü çizilmiş hâlidir. ══════════════════════════════════════════════════════════════════ */ --ink:#0b0b0c; --ink-soft:#3a3a3e; /* `--paper-dim` = bölüm bandı grisi. Dondurulmuş referansın bant zemini kompozit ölçümle rgb(237,239,244) → #edeff4. (Ara değer #e4e6eb yukarıdaki geri almanın parçasıydı: o, Meta'nın yüzey rengi.) */ --paper:#ffffff; --paper-dim:#edeff4; --line:rgba(0,0,0,0.10); --blue:#1f4fff; --blue-deep:#0d2fbf; --red:#FF453A; --red-rgb:255,69,58; /* ⚠️ AYNI GEREKÇE, TERS YÖN (§7: ön plan rengi ≠ dolgu rengi). `--blue` (#1f4fff) beyaz zeminde 5.80:1 ile mükemmel, ama SİYAH zeminde 3.40:1 — grafik eşiğini geçiyor, metin eşiğini geçmiyor. Koyu bölümlerde vurgu rengi gerektiğinde bu kullanılır. Değer UYDURULMADI: prototipin koyu bölümünde ölçüldü (`rgb(127,160,255)`, "Görünüm" etiketi ×3). #0b0b0c üstünde 7.78:1. */ --blue-on-dark:#7fa0ff; /* ⚠️ 6 Ağu · --red METİN İÇİN YETMİYOR (CLAUDE.md §7: ön plan rengi ≠ dolgu rengi). Ölçüldü: #FF453A beyaz zeminde 3.41:1, paper-dim'de 3.04:1 — grafik eşiğini (3.0) geçiyor, METİN eşiğini (4.5) GEÇMİYOR. `--red` nokta/kenar/ikon için doğru; yazı için ayrı ton gerekiyor. Yeni renk evreni DEĞİL — aynı hue, ölçülmüş koyu varyant, panelin `--fba-state-danger-fill` kalıbıyla birebir aynı gerekçe. #C7261B → beyaz zeminde 5.64:1 ✅ · dolgu olunca beyaz metinle 5.64:1 ✅ */ --red-text:#C7261B; /* --blue-rgb: `--red-rgb`in kardeşi. Markanın yarı saydam YÜZEY olarak kullanıldığı yerler için (PRIVACY_POLICY tablo başlığı, rozet). Ham `rgba(var(--blue-rgb),…)` yazmak paletten kaçmak olurdu. */ --blue-rgb:31,79,255; /* ── ALFA TABANLARI ──────────────────────────────────────────────── Palet taşıması için ŞART. Bu değerlerin alfa varyantları CSS'te 62 yerde ÇIPLAK yazılıydı (`rgba(var(--paper-rgb),0.6)` gibi); paleti değiştirmek 62 ayrı düzenleme demekti. Artık hepsi buradan türüyor: token değişince tüm alfa varyantları birlikte değişir. Depo kalıbı `--blue-rgb`/`--red-rgb` ile aynı — yeni yol açılmadı. */ --paper-rgb:255,255,255; --ink-deep-rgb:11,13,20; --mint-rgb:15,174,122; --amber-rgb:255,159,10; --white-rgb:255,255,255; /* 12.1e — amber, kartın ÖLÇÜLMÜŞ uyarı değerlerine hizalandı (content.css --fba-state-warn / açık tema karşılığı). Aynı rol için iki farklı hex kalmadı. */ --amber:#FF9F0A; --mint:#0fae7a; --amber-deep:#8A5A00; --mint-deep:#0b8a63; /* 🔴 #65676b DEĞİL — o Meta'nın ikincil metin rengi (bkz. üstteki geri alma bloğu). Prototipin kendi ikincil tonu #5a5a62, referansta 81 kez geçiyor; #65676b 24 kez ve hepsi kart taklidinde. Yön koyulaşma → kontrast yalnız ARTAR. */ --muted:#5a5a62; /* ── 12.1a — YAZI ÖLÇEĞİ: altı basamak. YEDİNCİSİ EKLENMEZ. Öncesi 27 farklı değerdi; altısı YARIM basamaktı (10.5·11.5·12.5·13.5·15.5) ve hiçbir şeyi ayırmıyordu — 12.5px ile 13px farkı ekranda okunamaz. ⚠️ Bu blok TARİHÇE. Güncel değerler ve gerekçesi hemen aşağıda — 5 Ağu'da ölçek panelinkiyle birleştirildi, taban 16px değil. ── */ /* ══ 5 Ağu · ÖLÇEK PANELİNKİYLE BİRLEŞTİRİLDİ ══════════════════════════ Bu depoda İKİ ayrı yazı ölçeği vardı ve kimse ikisini yan yana koymamıştı: panel 11 · 12 · 13 · 14 · 15 · 17 · 22 · 26 site 12 · 14 · 16 · 20 · 28 · 44 Yeni ana sayfa tasarımı ölçüldü: 459 metin elemanının **426'sı (%93)** PANELİN basamaklarında (11·13·15·17·22·26). Sitenin ölçeğiyle eşleşen tek basamak 28'di. Yani tasarımcı panele bakarak çizmiş. Kullanıcı kararı (5 Ağu): site panelin ölçeğine geçsin — eklenti ve site tek sisteme insin. ⚠️ TOKEN ADLARI DEĞİŞMEDİ, yalnız DEĞERLERİ. Mevcut sayfalar (pricing · profil · 404) zaten bu adlara bağlı olduğu için ölçeği kendiliğinden takip ettiler; sayfalara tek tek dokunulmadı. 🔴 KONTRAST YENİDEN ÖLÇÜLDÜ. Punto düşünce WCAG'in "büyük metin" istisnası (≥24px, ya da ≥18.66px + kalın) devre dışı kalabiliyor ve eşik 3.0'dan 4.5'e çıkıyor — yani punto değişimi kontrast sonucunu DEĞİŞTİREBİLİR. Ölçüldü, bkz. commit. clamp() başlıkları ölçek DIŞINDA kalmaya devam ediyor (akışkan başlık sistemi, 12.1a'da bilinçli olarak öyle bırakılmıştı). ── */ --fs-micro: 11px; /* rozet, dipnot, etiket (12 → 11) */ --fs-small: 13px; /* nav, liste maddesi, tablo (14 → 13) */ --fs-body: 15px; /* gövde metni — SİTENİN TABANI (16 → 15) */ --fs-lead: 17px; /* alt başlık, hero cümlesi (20 → 17) */ --fs-title: 22px; /* bölüm başlığı (28 → 22) */ --fs-hero: 26px; /* sayfa başlığı, büyük sayı (44 → 26) */ /* ── 12.1f — YARIÇAP: üç değer + adı olan TEK istisna. Öncesi 9 değerdi (6·8·10·11·12·14·20·24·999); 11 ve 20 hiçbir sisteme ait değildi. --radius-hero, paketin izin verdiği bilinçli istisna: sitenin iki büyük bandı (.stats-band, .final-cta) 12px'te sıkışık görünüyor. YALNIZ o iki yerde kullanılır. ── */ --r-ctl: 8px; /* kontroller */ --r-surf: 12px; /* yüzeyler */ --r-pill: 999px; /* YALNIZCA durum rozeti / pill */ --radius-hero: 24px; /* ══ 5 Ağu · --r-chip EKLENDİ — gerekçeli, adlandırılmış genişletme ══ ⚠️ Kural "ölçek asla genişletilmez" DEĞİL: `--radius-hero` zaten dördüncü değer ve yukarıdaki yorum onu "paketin izin verdiği bilinçli istisna" diye tanımlıyor. Kural şu — ölçek GEREKÇEYLE ve ADLANDIRILMIŞ token'la genişler, ad-hoc yuvarlanarak değil. ÖLÇÜLDÜ (referans 360+768+1280, 702 bildirim, 23 farklı değer): 1px·2px·3px 1.182 ← sahte reklam kartının İÇ ÖĞELERİ (çizim içeriği; renklerde olduğu gibi token'a alınmaz) 5px·6px·7px 468 ← küçük çip / rozet ← BU TOKEN 8px 81 ← --r-ctl ✅ zaten var 14px·16px 60 ← kart yüzeyi (gözlem, bkz. aşağıdaki not) 12px 15 ← --r-surf ✅ zaten var 999px·50% 183 ← --r-pill ✅ / daire Sitenin ÜÇ token'ı da prototipte zaten var — ölçek tasarıma yabancı değil, yalnız küçük çip basamağı eksikti. 🔴 BU TOKEN BİR YUVARLAMAYI GERİ ALIYOR: dil düğmesinde 6px'i 8px'e yuvarlayıp "2px bilinçli sapma" diye yazmıştım. Tek başına masumdu ama 11 bölümün 1'indeydim — her bölümde birkaç yuvarlama tasarımdan görünür şekilde uzaklaştırırdı ve hiçbir tekil karar yanlış görünmezdi. Palette ve yazı ölçeğinde de aynısı olmuştu; ikisinde de ÖLÇÜP TAŞIMAK doğru çıktı. ⏳ `14px` (48 kullanım) kart yüzeyi için ikinci bir aday. Şimdi EKLENMEDİ: o kartları henüz yazmadım, elemanı görmeden token açmak spekülasyon olur. İlgili bölüme gelince ölçülüp karar verilecek. */ --r-chip: 6px; /* küçük çip / rozet / dil düğmesi */ --radius: var(--r-surf); /* eski ad — 404.html hâlâ kullanıyor */ /* ── 17 — Lucide `check`, MASKE olarak. Renk maskeden gelmez, currentColor'dan gelir; böylece plan başına farklı olan `color` kuralları aynen çalışır ve ikonun içine ham hex gömülmez. ── */ /* 21e — Lucide `arrow-right`, maske. Ok metin glifiydi (`→`); ekran okuyucu "sağ ok" diye okuyordu ve yazı tipine bağlıydı. CSS ile veriliyor çünkü etiket `data-i18n` ile geliyor ve shared.js her zaman .textContent yazar — HTML'e konan bir dil değişince silinirdi. */ --arrow-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat; /* Açılır bölüm göstergesi (`
summary`). `--arrow-mask`ten AYRI: o bir ok (→) ve "git" anlamı taşıyor; bu bir chevron ve "aç/kapa" anlamı taşıyor. Aynı glifi iki role vermek §4'ün yasakladığı ikinci yol olurdu. Değer YALNIZ url — konum/boyut kullanan yerde yazılır. */ --chevron-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E"); /* ⚠️ 5 Ağu · İKON GLİF DEĞİL SVG. `content:'✓'` bekçiye takıldı (7-metin-glifi). `--arrow-mask` deseniyle aynı: maske + `background-color: currentColor` — rengi miras alır, punto ölçeğinden bağımsız, yazı tipine göre kaymaz. */ --check-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6'/%3E%3C/svg%3E") center/contain no-repeat; --minus-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center/contain no-repeat; --check-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; /* ══ 5 Ağu · TEK AİLE: Instrument Sans ═══════════════════════════════ Yeni ana sayfa tasarımı bu aileyle çizilmiş (referanstan ölçüldü: computed fontFamily = "Instrument Sans"). ÖLÇÜLDÜ, "panelle tutarlılık" gerekçesi GEÇERSİZ: panel webfont KULLANMIYOR (sidepanel.html'de fonts.googleapis linki 0; ailesi -apple-system/Segoe UI sistem yığını). Yani Inter'i tutmanın panel tarafında bir dayanağı yoktu. ⚠️ İNDİRİLEN FONT SAYISI 2 → 1. Önce Space Grotesk (başlık) + Inter (gövde) ayrı ayrı iniyordu; Instrument Sans ikisini birden karşılıyor. Ağırlıklar prototipten: 400 · 600 · 700. İki token AYNI aileyi gösteriyor ama SİLİNMEDİ: `--font-head` yüzlerce yerde kullanılıyor ve rolü (başlık) hâlâ anlamlı — ileride ayrı bir başlık ailesi istenirse tek satırdan döner. */ --font-head:'Instrument Sans',ui-sans-serif,system-ui,sans-serif; --font-body:'Instrument Sans',ui-sans-serif,system-ui,sans-serif; /* ===== GLASS TOKENS — extension'ın content.css/sidepanel.css "misty glass" katmanıyla aynı dil (blur+saturate translucency), ama BU sitenin açık/paper temasına göre AYRI ölçülmüş (CLAUDE.md rule #4: koyu tema alfaları birebir taşınmadı). WCAG doğrulandı: ink@paper 18.9:1, muted@paper 6.2:1 (min 4.5:1). */ --glass-surface:rgba(255,255,255,0.72); --glass-surface-strong:rgba(255,255,255,0.86); --glass-border:rgba(0,0,0,0.08); --glass-shadow:0 8px 32px rgba(0,0,0,0.10); --glass-blur:20px; --glass-saturate:170%; } } @layer component { /* ══ Inline'dan taşınan iki bildirim (3 Ağu) ═══════════════════════════════ `pricing.html`'de bu iki `
` masaüstü boşluğunu INLINE yazıyordu ve mobilde `@media(max-width:860px) section{padding-top:48px !important}` onu eziyordu. Bayrak sökülünce inline kazandı ve mobil boşluk bozuldu (FARK'ta yakalandı). CLAUDE #8: inline'ı `!important` ile nötrlemek yerine KAYNAKTAN SİL — değer buraya taşındı, artık kaskad yönetiyor, mobil kuralı da doğal olarak (katman sırası + @media) kazanıyor. ⚠️ `#pricing` SEÇİCİSİ KULLANILMADI: o id `index.html`'de de var, kural oraya da sızardı (ölçüldü, FARK'ta görüldü) — CLAUDE #8 kapsam genişletme yasağı. Adlı sınıf yalnız hedeflenen iki `
`'ı kapsar. ═════════ */ .section--tight-top { padding-top: 24px; } .section--flush-top { padding-top: 0; } *,*::before,*::after {margin:0;padding:0;box-sizing:border-box;} html {scroll-behavior:smooth;} body { font-family:var(--font-body); background:var(--paper); color:var(--ink); line-height:1.5; overflow-x:hidden; } a {color:inherit;} img,svg {display:block;max-width:100%;} .container {max-width:1120px;margin:0 auto;padding:0 28px;} /* subtle grain */ body::before { content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:0.035; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode:multiply; } /* ===== NAV ===== */ nav { position:sticky; top:0; z-index:100; background:rgba(var(--paper-rgb),0.82); backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate)); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate)); border-bottom:1px solid var(--line); } .nav-inner {display:flex;align-items:center;justify-content:space-between;padding:16px 0;} .brand {display:flex;align-items:center;gap:10px;text-decoration:none;} .brand-mark {width:34px;height:34px;flex-shrink:0;} .brand-word {font-family:var(--font-head);font-weight:700;font-size:var(--fs-body);letter-spacing:-0.02em;} .brand-word em {font-style:normal;color:var(--blue);} .nav-links {display:flex;align-items:center;gap:28px;font-size:var(--fs-small);font-weight:600;} /* 12.1b: nav tıklanabilir → 600 */ .nav-links a {text-decoration:none;color:var(--ink);opacity:0.7;transition:opacity .15s;} .nav-links a:hover {opacity:1;} .lang-switch {display:flex;align-items:center;gap:2px;background:var(--paper-dim);border:1px solid var(--line);border-radius:var(--r-ctl);padding:3px;margin-right:6px;} .lang-btn {border:none;background:transparent;font-family:inherit;font-size:var(--fs-micro);font-weight:700;color:var(--muted);padding:5px 9px;border-radius:var(--r-ctl);cursor:pointer;letter-spacing:0.02em;} .lang-btn.active {background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(var(--ink-deep-rgb),0.12);} .btn { display:inline-flex;align-items:center;gap:8px; font-family:var(--font-body);font-weight:700;font-size:var(--fs-small); border-radius:var(--r-ctl);padding:11px 20px;text-decoration:none;cursor:pointer; border:1.5px solid transparent;transition:transform .15s ease, box-shadow .15s ease; } .btn:hover {transform:translateY(-1px);} .btn-dark {background:var(--ink);color:var(--paper);} .btn-dark:hover {box-shadow:0 6px 20px rgba(var(--ink-deep-rgb),0.25);} .btn-ghost {border-color:var(--line);color:var(--ink);} .btn-ghost:hover {border-color:var(--ink);} .btn-sm {padding:8px 14px;font-size:var(--fs-small);border-radius:var(--r-ctl);} /* ===== HERO ===== */ /* ⚠️ 5 Ağu — `overflow-x:clip` SAYFAYI YATAY KAYDIRMADAN KURTARIR. `.hero::before` dekoratif ışıma katmanı `inset:-60px -10vw 0` ile iki yana 10vw taşıyor. Sol taşma negatif olduğu için kaydırma üretmiyor, SAĞ taşma üretiyordu: ölçüldü 1440px→144px · 1728px→173px · 2000px→200px (tam 10vw). Canlı sayfa yana kayıyordu ve kullanıcı bunu ekran görüntüsüyle bildirdi. `hidden` DEĞİL `clip`: `hidden` bir kaydırma kabı yaratır (diğer ekseni de `auto`ya çeker, `position:fixed` torunları etkiler); `clip` yalnız kırpar. Görsel kayıp YOK — `.hero` zaten tam genişlikte, yani kırpma sınırı viewport sınırı; kırpılan kısım hiçbir zaman görünmüyordu. */ .hero {padding:76px 0 40px;position:relative;overflow-x:clip;} .hero::before { content:'';position:absolute;inset:-60px -10vw 0;z-index:-1;pointer-events:none; background: radial-gradient(480px circle at 15% 20%,rgba(var(--blue-rgb),0.07),transparent 70%), radial-gradient(420px circle at 85% 10%,rgba(var(--amber-rgb),0.06),transparent 70%), /* 12.1e: eski amber → yeni */ radial-gradient(520px circle at 60% 90%,rgba(var(--mint-rgb),0.06),transparent 70%); } .hero-grid {display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center;} .eyebrow { display:inline-flex;align-items:center;gap:7px; font-size:var(--fs-micro);font-weight:700;letter-spacing:0.04em;text-transform:uppercase; color:var(--muted);background:rgba(var(--blue-rgb),0.08);border:1px solid rgba(var(--blue-rgb),0.18); padding:6px 12px;border-radius:var(--r-pill);margin-bottom:22px; /* 12.1f: rozet → pill */ backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate)); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate)); } .eyebrow .dot {width:6px;height:6px;border-radius:50%;background:var(--mint);animation:pulse 1.8s infinite;} h1 { font-family:var(--font-head); font-size:clamp(34px,4.6vw,54px); font-weight:700;letter-spacing:-0.035em;line-height:1.04; margin-bottom:22px; } h1 .line2 {display:block;color:var(--ink);} .hero p.sub {font-size:var(--fs-body);color:var(--muted);max-width:460px;margin-bottom:30px;line-height:1.65;} .hero-actions {display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px;} .hero-proof {display:flex;align-items:center;gap:14px;font-size:var(--fs-small);color:var(--muted);} /* 12.1e — yıldız derecelendirmesi UYARI değil; amber paletinden çıkarıldı. */ .stars {color:var(--ink);letter-spacing:1px;font-size:var(--fs-small);} /* Hero visual: scope illustration */ .hero-visual {position:relative;aspect-ratio:1/1;max-width:440px;justify-self:end;} .scope-ring {position:absolute;inset:0;} .orbit-item { position:absolute;background:var(--glass-surface-strong);border:1px solid var(--glass-border);border-radius:var(--r-surf); padding:9px 12px;font-size:var(--fs-micro);font-weight:700;box-shadow:var(--glass-shadow); backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate)); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate)); display:flex;align-items:center;gap:6px;animation:float 5s ease-in-out infinite; } .orbit-item .i {width:14px;height:14px;flex-shrink:0;} /* Nişangâh "wow" animasyonu: dış halka yavaşça döner, radar-ping merkezden yayılır */ .scope-dash {transform-box:fill-box;transform-origin:center;animation:scope-spin 22s linear infinite;} .scope-ping {transform-box:fill-box;transform-origin:center;animation:scope-ping 2.6s cubic-bezier(.2,.7,.3,1) infinite;} .scope-ping.d2 {animation-delay:1.3s;} .scope-crosshair line {animation:scope-blink 2.2s ease-in-out infinite;} .o1 {top:6%;left:0;animation-delay:0s;} .o2 {top:14%;right:0;animation-delay:1.1s;} .o3 {bottom:20%;left:-6%;animation-delay:2.2s;} .o4 {bottom:4%;right:8%;animation-delay:0.6s;} /* ===== MARQUEE ===== */ .marquee-wrap {border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ink);overflow:hidden;padding:15px 0;} .marquee-track {display:flex;gap:0;white-space:nowrap;animation:scroll-x 32s linear infinite;width:max-content;} .marquee-wrap:hover .marquee-track {animation-play-state:paused;} .marquee-item {display:inline-flex;align-items:center;gap:8px;color:rgba(var(--paper-rgb),0.5);font-size:var(--fs-small);font-weight:600;font-family:var(--font-head);letter-spacing:0.01em;padding:0 26px;position:relative;} .marquee-item::after {content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);width:4px;height:4px;border-radius:50%;background:rgba(var(--paper-rgb),0.25);} .marquee-item .i {width:15px;height:15px;color:rgba(var(--paper-rgb),0.55);} .marquee-item em {color:var(--paper);font-style:normal;} /* ===== SECTION HEAD ===== */ .section {padding:88px 0;} .section-head {max-width:560px;margin-bottom:48px;} .kicker {font-size:var(--fs-micro);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;} .section-head h2 {font-family:var(--font-head);font-size:clamp(26px,3.4vw,38px);font-weight:700;letter-spacing:-0.03em;line-height:1.15;} .section-head p {margin-top:14px;color:var(--muted);font-size:var(--fs-body);} /* ===== FEATURES — uniform 3-col grid ===== */ .bento {display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} .bento .card { background:var(--glass-surface);border:1px solid var(--glass-border);border-radius:var(--radius);padding:26px; backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate)); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate)); transition:border-color .2s, transform .2s, box-shadow .2s, background .2s; } .bento .card:hover {border-color:var(--ink);transform:translateY(-3px);box-shadow:var(--glass-shadow);background:var(--glass-surface-strong);} .card .icn { width:42px;height:42px;border-radius:var(--r-ctl);display:flex;align-items:center;justify-content:center; margin-bottom:18px;transition:transform .2s; } .card:hover .icn {transform:scale(1.08);} .icn .i {width:20px;height:20px;} .icn.blue {background:linear-gradient(135deg,rgba(var(--blue-rgb),0.14),rgba(var(--blue-rgb),0.06));color:var(--blue-deep);} /* 12.1e — gradyan ham rgba'sı ESKİ amber'di (245,166,35); token yeni değere (#FF9F0A) geçince ikisi ayrışıyordu. Aynı renge hizalandı. */ .icn.amber {background:linear-gradient(135deg,rgba(var(--amber-rgb),0.18),rgba(var(--amber-rgb),0.07));color:var(--amber-deep);} .icn.mint {background:linear-gradient(135deg,rgba(var(--mint-rgb),0.16),rgba(var(--mint-rgb),0.06));color:var(--mint-deep);} /* ===== ICON SPRITE (Apple-style line icons, replace emoji) ===== */ .i {display:inline-block;width:20px;height:20px;vertical-align:middle;flex-shrink:0;} .card h3 {font-family:var(--font-head);font-size:var(--fs-body);font-weight:700;margin-bottom:8px;letter-spacing:-0.01em;} .card p {font-size:var(--fs-small);color:var(--muted);line-height:1.65;} /* ===== HOW IT WORKS ===== */ .steps {display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative;} .steps::before { content:'';position:absolute;top:22px;left:12%;right:12%;height:1px; background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 16px); } .step {position:relative;padding:0 20px;text-align:left;} .step-num { width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--paper); display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700; font-size:var(--fs-body);margin-bottom:18px;position:relative;z-index:2; } .step h4 {font-family:var(--font-head);font-size:var(--fs-body);font-weight:700;margin-bottom:8px;} .step p {font-size:var(--fs-small);color:var(--muted);line-height:1.6;} /* ===== STATS ===== */ .stats-band {background:var(--ink);color:var(--paper);border-radius:var(--radius-hero);padding:44px 40px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;} .stat b {font-family:var(--font-head);font-size:var(--fs-title);font-weight:700;display:block;color:var(--paper);} .stat span {font-size:var(--fs-small);color:rgba(var(--paper-rgb),0.55);} /* ===== PRICING ===== */ .promo-banner { background:linear-gradient(90deg,var(--blue),#4d74ff,var(--blue));background-size:200% 100%; border:1px solid var(--blue-deep);color:var(--paper); border-radius:var(--r-surf);padding:13px 18px;text-align:center;font-size:var(--fs-small);font-weight:700; margin-bottom:36px;align-items:center;justify-content:center;gap:8px; /* ⚠️ 6 Ağu · ARIZA YÖNÜ ÇEVRİLDİ. Eskiden `display:flex` ile GÖRÜNÜR başlıyordu ve JS `varMi` değilse gizliyordu — yani JS kapalıysa, hata verirse ya da geç yüklenirse sayfada "14 GÜN ÜCRETSİZ DENE — ilk 3 ay $1/ay" yazıyordu. Ortada öyle bir kampanya YOK (`denemeGun: 0`). Yanlış vaadin varsayılan olması kabul edilemez: artık GİZLİ başlıyor, JS yalnızca kampanya GERÇEKTEN varken açıyor. */ display:none; box-shadow:0 8px 24px rgba(var(--blue-rgb),0.25); animation:promo-shimmer 5s ease-in-out infinite; } .promo-banner .i {width:16px;height:16px;flex-shrink:0;} /* ⚠️ 6 Ağu · SÜTUN SAYISI SABİT YAZILMIYOR, TÜRETİLİYOR. Eskiden `repeat(4,1fr)` idi. Team `siteGizli:true` olduğu için ekranda ÜÇ kart var; dördüncü sütun boş kalıyordu. Ölçüldü (canlı, piksel): 1440px → 270px · 1280px → 270px · 1024px → 246px sağda boşluk Alttaki `@media (max-width:860px){1fr 1fr}` daha da kötüydü: üç kartı 2+1 yapıp ikinci satırda tek kart bırakıyordu → 860px'te 419px, 768px'te 373px boşluk. `auto-fit` BOŞ İZLERİ TOPLAR: kaç kart görünüyorsa o kadar sütun olur. Yani `TEAM_GIZLI` ileride `false` olunca ızgara kendiliğinden dörde döner — burada değiştirilecek hiçbir sayı yok. `minmax`in alt sınırı ölçümle seçildi (aşağıdaki tabloya bak): kartın içeriği bu genişliğin altında sıkışıyor, üstünde satır kırılıyor. */ .pricing-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;align-items:stretch;} .plan { background:var(--glass-surface);border:1.5px solid var(--glass-border);border-top-width:4px;border-radius:var(--radius);padding:24px;display:flex;flex-direction:column; backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate)); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate)); } /* Popüler kart büyütme (2026-07-22, kullanıcı isteği): Pro kartı diğerlerinden görsel olarak öne çıksın. transform:scale yerine padding+negatif margin kullanıldı — scale, içindeki metni bulanıklaştırabilir ve grid hizasını bozar; bu yöntemle kart gerçekten daha BÜYÜK (üst/alt taşar) ama satır tabanları net kalır. Dar ekranda (tek sütun) media query ile sıfırlanır, kartlar üst üste binmez. */ .plan.hi {background:var(--glass-surface-strong);border-color:var(--ink);border-top-color:var(--amber);box-shadow:0 22px 48px rgba(var(--ink-deep-rgb),0.16);position:relative;margin-top:-14px;margin-bottom:-14px;padding-top:34px;padding-bottom:34px;z-index:2;} @media (max-width: 900px) { .plan.hi {margin-top:0;margin-bottom:0;padding-top:24px;padding-bottom:24px;} } /* İndirim çipi (2026-07-22): üstü çizili fiyatın yanında otomatik hesaplanan −%XX */ /* 16: 800 -> 700. Agirlik olcegi uc basamak (400/600/700); 800 ile 700 arasindaki fark Inter yuklenmeden, sistem fontunda cogu zaman HIC render edilmiyor — ekranda 700 gorunup kodda 800 yazan olculmemis bir vurguydu. */ .discount-chip {display:inline-block;vertical-align:middle;font-size:var(--fs-micro);font-weight:700;letter-spacing:0.02em;background:#ffe9e0;color:#c93400;padding:2px 8px;border-radius:var(--r-pill);margin-left:2px;} /* Canlı Demo nav butonu (2026-07-23): pulse'lı LIVE noktası — anında göze çarpsın */ .nav-demo-btn {display:inline-flex;align-items:center;gap:6px;font-weight:700;border:1.5px solid rgba(var(--blue-rgb),0.35);border-radius:var(--r-pill);padding:5px 13px;transition:background .15s,box-shadow .15s;} .nav-demo-btn:hover {background:rgba(var(--blue-rgb),0.07);box-shadow:0 2px 10px rgba(var(--blue-rgb),0.18);} .nav-demo-btn .live-dot {width:7px;height:7px;border-radius:50%;background:var(--red);flex-shrink:0;animation:fbaLivePulse 1.6s ease-in-out infinite;} @media (prefers-reduced-motion: reduce) { .nav-demo-btn .live-dot {animation:none;} } .plan.hi::before { content:'EN POPÜLER';position:absolute;top:-11px;left:20px;background:var(--ink);color:var(--paper); font-size:var(--fs-micro);font-weight:700;letter-spacing:0.05em;padding:4px 10px;border-radius:var(--r-pill); /* 16: 800 -> 700 */ /* 12.1f: rozet → pill */ } .plan[data-plan="free"] {border-top-color:rgba(var(--ink-deep-rgb),0.18);} .plan[data-plan="starter"] {border-top-color:var(--blue);} .plan[data-plan="team"] {border-top-color:var(--mint);} .plan[data-plan="starter"] li::before {color:var(--blue);} .plan.hi li::before {color:var(--amber-deep);} .plan[data-plan="team"] li::before {color:var(--mint-deep);} .plan-name {font-size:var(--fs-micro);font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--muted);margin-bottom:2px;} /* "Kimin için" satırı (2026-07-21): plan seçimini hızlandıran tek satırlık hedef kitle ipucu — plan adının hemen altında, fiyattan önce. */ .plan-who {font-size:var(--fs-micro);color:var(--muted);margin-bottom:10px;line-height:1.4;} .plan-price {font-family:var(--font-head);font-size:var(--fs-title);font-weight:700;letter-spacing:-0.02em;margin-bottom:2px;} .plan-price .old {font-size:var(--fs-small);font-weight:400; /* 12.1b */color:var(--muted);text-decoration:line-through;margin-right:6px;} .plan-price .per {font-size:var(--fs-small);font-weight:400; /* 12.1b */color:var(--muted);} .plan-billed-note {font-size:var(--fs-micro);color:var(--muted);margin-bottom:14px;} /* Süre toggle (Aylık / 3 Aylık / Yıllık) */ .period-toggle {display:inline-flex;gap:4px;background:var(--paper-dim);border:1px solid rgba(var(--ink-deep-rgb),0.08);border-radius:var(--r-ctl);padding:4px;margin-bottom:28px;} .period-btn {border:none;background:transparent;font-family:inherit;font-size:var(--fs-small);font-weight:600;color:var(--muted);padding:9px 16px;border-radius:var(--r-ctl);cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .15s,color .15s;} .period-btn.active {background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(var(--ink-deep-rgb),0.12);} /* ══ 15 — "Yıllıkta %40 tasarruf" rozeti: MOR GİTTİ, ama MAVİ DE OLMADI ══ Mor, admin'de 12.2a'da kapatılan hatanın sitedeki kardeşiydi — sayfanın dördüncü markası, hiçbir sisteme ait değildi. Paketin şartı: "rozet mavi olunca pricing 6 mavi alana çıkarsa ink/muted yap." ÖLÇÜLDÜ (headless, hesaplanmış stil; kalıtımla inen renk sayılmadı): pricing bugün mavi taşıyan 8 ayrı grup barındırıyor — hero yıkaması · promo-banner · plan-offer-badge · plan[starter] üst çizgisi · o kartın liste işaretleri · eyebrow · nav-demo-btn · brand-word em. (12.1d'nin daha dar sayımıyla 5.) İki sayımda da rozet mavi olsaydı eşik AŞILIYORDU → ink/muted. Dil zaten sayfada var: .plan.hi::before ("EN POPÜLER") tam bu işi ink zemin + açık metinle yapıyor; rozet ONA bağlandı, yeni bir renk icat edilmedi. Kontrast ölçüldü — pasif: muted #5b5f6e, %6 ink yıkaması üstünde (paper-dim ile birleşince ≈ #e0dfd8) = 4.75:1 ✅ · aktif: paper #f7f5f0 / ink = 17.8:1 ✅ */ .period-btn .save-badge {font-size:var(--fs-micro);font-weight:700;background:rgba(var(--ink-deep-rgb),0.06);color:var(--ink-soft);padding:2px 6px;border-radius:var(--r-ctl);} .period-btn.active .save-badge {background:var(--ink);color:var(--paper);} /* Task #53 (2026-07-21): günlük tarama limiti daha belirgin olsun diye plain text yerine rozet/pill tasarımına çevrildi. Metin data-i18n ile textContent olarak değiştiği için (bkz. shared.js — [data-i18n] her zaman .textContent kullanır, iç HTML/span YAZAMAZ) vurguyu SAF CSS ile veriyoruz — dictionary/i18n yapısına dokunmadan, dil değişse bile kırılmaz. Kontrast doğrulandı: --blue-deep (#0d2fbf) metin, ~%9 mavi tonlu zemin üstünde ≈7.6:1 (AAA). */ /* 12.1c — İKİSİ DE açıklama metni, eylem değil. Aralarında ÜÇ kanal fark vardı: renk (mavi ↔ muted) + ağırlık (800 ↔ 500) + boyut (12.5 ↔ 11). Üç kanal harcanıp söylenen tek şey "biri biraz daha önemli"ydi. Mavi = eylem; fiyat kartındaki açıklama cümlesi eylem değil — mavi kartın CTA düğmesine kaldı. Ayrım artık TEK kanalda: ağırlık + bir basamak boyut. */ .plan-desc {font-size:var(--fs-small);color:var(--ink);font-weight:600;} .plan-desc-sub {display:block;font-size:var(--fs-micro);color:var(--muted);font-weight:400;margin-bottom:16px;} /* Task #52 (2026-07-21): Starter kartına özel "14 gün ücretsiz + ilk 3 ay $1/ay" rozeti. Sayfa üstündeki genel promo-banner'dan AYRI — kullanıcı özellikle Starter kartının ÜSTÜNDE/yakınında görmek istedi. Kontrast: beyaz metin #1f4fff→#0d2fbf gradyanının en açık ucunda bile ≈5.8:1 (AA geçer). */ .plan-offer-badge { display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-micro);font-weight:700;color:var(--paper); /* 16: 800 -> 700 */ background:linear-gradient(135deg,var(--blue),var(--blue-deep)); padding:5px 10px;border-radius:var(--r-pill);margin-bottom:12px; box-shadow:0 2px 8px rgba(var(--blue-rgb),0.3); } .plan ul {list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:20px;flex:1;} .plan li {font-size:var(--fs-small);display:flex;gap:7px;align-items:flex-start;} /* ══ 17 — '✓' METİN GLİFİ GİTTİ (13d'nin kardeşi) ══ Glif üç ayrı sorun taşıyordu: (1) yazı tipine bağlıydı — Inter yüklenmeden sistem fontunun kendi tiki çiziliyordu, (2) ekran okuyucu HER madde başında "onay işareti" diye okuyordu, oysa maddenin metni zaten "dahil" diyor, (3) üzerindeki font-weight glifte hiç uygulanmıyordu (ölü bildirim). Yerine Lucide `check`, 16px (site ikon ölçüsü), stroke-width 1.8. ::before KORUNDU ve SVG bir MASKE olarak veriliyor; çünkü bu listede RENK anlam taşıyor — her plan kendi rengini `color` ile veriyor (starter mavi · .plan.hi amber-deep · team mint-deep · diğerleri muted). background-color: currentColor + mask, o dört kuralı OLDUĞU GİBİ bırakıyor. data-URI doğrudan background-image olsaydı rengi SVG'nin içine gömmek ve dört ayrı data-URI yazmak gerekirdi — yani 12.1'de sökülen "aynı rol, dört ham hex" desenini geri getirirdim. aria-hidden'a gerek kalmadı: content:'' olan bir pseudo-element ekran okuyucuya zaten hiçbir şey söylemiyor ve işareti asacak bir eleman yok. */ .plan li::before { content:''; color:var(--muted); /* currentColor kaynağı — plan kuralları bunu ezer */ width:16px;height:16px;flex-shrink:0; margin-top:2px; /* 21px satır kutusunda 16px ikonu optik ortalar */ background-color:currentColor; -webkit-mask:var(--check-mask); mask:var(--check-mask); } /* Task #54 (2026-07-21): "tüm kartların yatay hizası" — statik inceleme: .plan zaten flex-column + ul{flex:1} ile buton alta itiliyor, .pricing-grid{align-items:stretch} ile kart yükseklikleri zaten eşitleniyor (canlı ekran görüntüsü olmadan başka bariz bir kırık nokta bulunamadı — bkz. proje kuralı: kanıtsız tahmin yürütülmez). Yine de margin-top:auto EKLENDİ — mevcut flex:1 deseniyle yedekli ama Team kartı (6 madde, diğerleri 8) gibi liste uzunluğu farklarında buton hizasını garantiye alıyor. */ .plan .btn {justify-content:center;width:100%;margin-top:auto;} /* ===== FAQ — cam kartlar (WCAG doğrulandı: paper-dim zeminde ink 18.5:1, muted 6.1:1) ===== */ .faq-item { background:var(--glass-surface);border:1px solid var(--glass-border);border-radius:var(--radius); padding:18px 22px;margin-bottom:10px; backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate)); -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate)); transition:background .2s, border-color .2s; } .faq-item:last-child {margin-bottom:0;} .faq-item.open {background:var(--glass-surface-strong);border-color:var(--ink);} .faq-q {display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:700;font-size:var(--fs-body);font-family:var(--font-head);gap:12px;} .faq-q .plus {font-size:var(--fs-lead);font-weight:400;transition:transform .2s;color:var(--muted);flex-shrink:0;} .faq-item.open .plus {transform:rotate(45deg);} .faq-a {max-height:0;overflow:hidden;transition:max-height .25s ease;font-size:var(--fs-small);color:var(--muted);line-height:1.7;} .faq-item.open .faq-a {max-height:240px;padding-top:12px;} /* ===== FINAL CTA ===== */ .final-cta { background:var(--ink);color:var(--paper);border-radius:var(--radius-hero);padding:64px 40px;text-align:center; position:relative;overflow:hidden; } .final-cta h2 {font-family:var(--font-head);font-size:clamp(26px,4vw,38px);font-weight:700;letter-spacing:-0.03em;margin-bottom:16px;} .final-cta p {color:rgba(var(--paper-rgb),0.6);font-size:var(--fs-body);margin-bottom:28px;} .final-cta .btn-dark {background:var(--paper);color:var(--ink);} /* ===== FOOTER ===== */ footer {padding:40px 0;border-top:1px solid var(--line);} .footer-inner {display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-size:var(--fs-small);color:var(--muted);} /* ⚠️ `flex-wrap` 5 Ağu'da EKLENDİ. Yokken beş bağlantı tek satırda 403px sürüyordu ve 360px ekranda 57px taşıyordu — `body`'nin `overflow-x:hidden`'ı bunu MASKELİYORDU: kullanıcı son bağlantıları hiç göremiyordu ama ekranda hiçbir belirti yoktu. Ebeveyn `.footer-inner` zaten sarıyordu; taşıran buydu. */ .footer-links {display:flex;gap:22px;flex-wrap:wrap;} /* ⚠️ 6 Ağu · FERAGATNAME. `--muted` ile — OPAKLIKLA SOLDURULMADI. Ölçüldü: #5a5a62 beyaz zeminde 6.83:1 ✅ (küçük metin eşiği 4.5). 0.7 alfa uygulansaydı 3.35:1'e düşerdi, yani eşiğin altına — CLAUDE.md §7'nin tam olarak yasakladığı şey. Ton zaten yeterince sessiz. */ .footer-feragat {margin-top:14px;color:var(--muted);font-size:var(--fs-micro);} .footer-links a {text-decoration:none;color:var(--muted);} .footer-links a:hover {color:var(--ink);} /* scroll reveal */ .reveal {opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;} .reveal.in {opacity:1;transform:none;} @media (max-width:860px) { .hero-grid {grid-template-columns:1fr;} .hero-visual {justify-self:center;margin-top:20px;} .nav-links {display:none;} .bento {grid-template-columns:1fr 1fr;} .steps {grid-template-columns:1fr;gap:32px;} .steps::before {display:none;} .stats-band {grid-template-columns:1fr 1fr;} /* `.pricing-grid` override'ı SİLİNDİ — `1fr 1fr` üç kartı 2+1 yapıp ikinci satırda 419px boşluk bırakıyordu. auto-fit bu genişlikte zaten üç sütun veriyor; sabit sayı türetmeyi eziyordu. */ } /* ⚠️ 6 Ağu · YALNIZ KART SAYISI KADAR SATIR — "2+1" yok. `auto-fit` sütun sayısını doğru türetiyor ama dar ekranda iki sütun verince üç kart 2+1 oluyor ve ikinci satırda tek kart kalıyor. Ölçüldü (piksel, canlı ölçüm): 744px → 3 sütun, boşluk 0 ← üç sütunun tutunduğu son genişlik 700px → 2 sütun, boşluk 339px ← burada kırılıyor 640px → 309px · 560px → 269px · 520px → 249px Eşik altında tek sütuna geçiliyor: üç kart alt alta, boşluk 0. ⚠️ SINIR: bu eşik ÜÇ kart içindir. `TEAM_GIZLI` false olup dördüncü kart açılırsa 744–978px arasında 3+1 oluşur — o gün eşik yeniden ÖLÇÜLMELİ (hesaplanmamalı). Sonraki denetim: bu bir eksiklik değil, yazılı sınır. */ @media (max-width:743px) { .pricing-grid {grid-template-columns:1fr;} } @media (max-width:520px) { .stats-band {grid-template-columns:1fr;} .bento {grid-template-columns:1fr;} } /* ===== COMING SOON GATE ===== */ .coming-soon { position:fixed; inset:0; z-index:99999; background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:center; text-align:center; padding:24px; } .cs-inner {max-width:440px;display:flex;flex-direction:column;align-items:center;} .cs-brand {font-family:var(--font-head);font-weight:700;font-size:var(--fs-body);letter-spacing:-0.01em;margin-bottom:26px;opacity:0.75;} .cs-brand em {font-style:normal;color:#7a9bff;} .coming-soon h1 {font-family:var(--font-head);font-size:clamp(30px,5vw,44px);font-weight:700;letter-spacing:-0.03em;margin-bottom:16px;} .coming-soon p {color:rgba(var(--paper-rgb),0.6);font-size:var(--fs-body);line-height:1.6;margin-bottom:28px;} .cs-form {display:flex;gap:8px;width:100%;margin-bottom:22px;} .cs-form input { flex:1;padding:12px 14px;border-radius:var(--r-ctl);border:1px solid rgba(var(--paper-rgb),0.18); background:rgba(var(--paper-rgb),0.06);color:var(--paper);font-size:var(--fs-small);font-family:var(--font-body); } .cs-form input::placeholder {color:rgba(var(--paper-rgb),0.35);} .cs-form button { background:var(--paper);color:var(--ink);border:none;border-radius:var(--r-ctl);padding:0 18px; font-weight:700;font-size:var(--fs-small);cursor:pointer;white-space:nowrap; } .cs-privacy {font-size:var(--fs-micro);color:rgba(var(--paper-rgb),0.4);text-decoration:none;} .cs-privacy:hover {color:rgba(var(--paper-rgb),0.7);} @media (max-width:480px) { .cs-form {flex-direction:column;} } /* ===== RAKİP KARŞILAŞTIRMA (2026-07-23) ===== */ .cmp-scroll {overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-surf);background:var(--glass-surface-strong);box-shadow:var(--glass-shadow);} .cmp-table {width:100%;border-collapse:collapse;font-size:var(--fs-small);min-width:640px;} .cmp-table th,.cmp-table td {padding:11px 14px;text-align:center;border-bottom:1px solid var(--line);} .cmp-table th {font-family:var(--font-head);font-size:var(--fs-small);font-weight:700;background:rgba(var(--ink-deep-rgb),0.03);} .cmp-table th:first-child,.cmp-table td:first-child {text-align:left;font-weight:600;min-width:220px;} .cmp-table tbody tr:last-child td {border-bottom:none;} .cmp-table td:not(.cmp-us):not(:first-child) {color:var(--muted);} /* 12.1d — metin ink'e indi; sütunu işaretleyen 2px mavi üst çizgi KALDI (o bir işaretçi, renkli ALAN değil). */ .cmp-us {background:rgba(var(--blue-rgb),0.07);font-weight:700;} /* 16: 800 -> 700 */ .cmp-table th/* 12.1d — metin ink'e indi; sütunu işaretleyen 2px mavi üst çizgi KALDI (o bir işaretçi, renkli ALAN değil). */ .cmp-us {border-top:2px solid var(--blue);} /* ══ 21d — KARŞILAŞTIRMA TABLOSU: işaretler artık metin glifi DEĞİL ══ 20 hücre düz `✓` ve `—` yazıyordu. Ekran okuyucu bunları "onay işareti" ve "uzun tire" diye okuyor; tablonun ANLAMI sesli okumada tamamen kayboluyordu (hangi ürün neyi destekliyor, duyulmuyordu). Yeni sözlük anahtarı AÇILMADI — karar gereği: sayfalar zaten ayrı dosyalar ve kendi dillerinde yazılı, 20 hücre için i18n anahtarı fazla. Görünmez metin doğrudan sayfanın dilinde: TR "Var"/"Yok", EN "Yes"/"No". İkonun rengi `currentColor` — `.cmp-us` ink, diğer sütunlar muted; yani mevcut görsel ağırlık farkı kendiliğinden korunuyor. ══ */ .sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;} .ico-check {display:inline-block;width:16px;height:16px;vertical-align:middle;background-color:currentColor;-webkit-mask:var(--check-mask);mask:var(--check-mask);} .ico-dash {display:inline-block;width:10px;height:2px;vertical-align:middle;background-color:currentColor;opacity:0.45;border-radius:var(--r-pill);} /* 21e: etiketin sonundaki yön oku — metin değil ikon. */ .btn-arrow::after {content:'';display:inline-block;width:16px;height:16px;flex-shrink:0;vertical-align:middle;background-color:currentColor;-webkit-mask:var(--arrow-mask);mask:var(--arrow-mask);} .cmp-price td {font-size:var(--fs-small);} .cmp-note {font-size:var(--fs-micro);color:var(--muted);margin-top:12px;line-height:1.6;} @media (max-width: 860px) { /* Hero butonları: tam genişlik, alt alta — "2+1 yetim buton" düzeni biter */ .hero-cta, .hero-btns { width: 100%; } } @media (max-width: 620px) { /* Rakip tablosu: min-width:640px zorunlu yatay scroll yaratıyordu. Scroll kalıyor (veri kaybolmasın) ama ipucu net: kaydırma gölgesi. */ .cmp-scroll { position: relative; } .cmp-scroll::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 26px; background: linear-gradient(to left, rgba(var(--white-rgb),0.95), transparent); pointer-events: none; border-radius: 0 12px 12px 0; } } @media (hover: none) and (pointer: coarse) { .btn, .nav-cta, .lang-btn, .faq-q { min-height: 44px; } .lang-btn { min-width: 44px; display: inline-flex; align-items: center; justify-content: center; } } /* ════════════════════════════════════════════════════════════════════════════ HERO TİPOGRAFİK VURGU + ÖZELLİK ROZETLERİ (CRO revizyonu 2026-07-25) ──────────────────────────────────────────────────────────────────────────── Kullanıcı: "çok düz, vurgu yok, kalın ince yok, arada farklı font stilli özel vurgular vs. yok". Alt metin tek ağırlıkta düz bir virgül listesiydi — göz hiçbir yere takılmıyordu. Üç katmanlı ritim kuruldu: normal (400) →
(700, ink) → (başlık fontu, mavi) Rozetler Shopify'ı EN SONA aldı; kullanıcı diğer özelliklerin öne çıkmasını istedi (Oto Tarama / Hover / Kredi yok). ════════════════════════════════════════════════════════════════════════════ */ .hero .sub b { font-weight: 700; color: var(--ink); } .hero .sub .sub-accent { font-family: var(--font-head); font-style: normal; font-weight: 700; color: var(--ink); /* Alt çizgi yerine ince vurgu şeridi — okumayı kesmeden dikkat çeker */ box-shadow: inset 0 -0.34em 0 rgba(var(--blue-rgb),0.14); } .hero-badges { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 4px; } .hbadge { display: inline-flex; align-items: center; font-size: var(--fs-micro); font-weight: 400; color: var(--muted); /* 12.1b */ background: var(--glass-surface-strong, rgba(var(--white-rgb),0.7)); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 11px; white-space: nowrap; letter-spacing: -0.005em; } .hbadge b { font-weight: 700; color: var(--ink); } /* Tek bir rozet vurgulanır — en güçlü farklılaştırıcı. Birden fazla vurgu yaparsak hiçbiri vurgu olmaz (CRO: tek odak noktası kuralı). */ .hbadge-hi { background: rgba(var(--blue-rgb),0.07); border-color: rgba(var(--blue-rgb),0.25); } .hbadge-hi b { color: var(--ink); } @media (max-width: 620px) { .hero-badges { gap: 6px; margin: 14px 0 2px; } .hbadge { font-size: var(--fs-micro); padding: 4px 9px; } } /* ════════════════════════════════════════════════════════════════════════════ FİYAT KARTI SATIR HİZASI (kullanıcı raporu 2026-07-25: "fiyat / indirim / günde X tarama düğmelerini atayınca kaymalar oluyor, aynı veriler aynı satır hizasında olacak") ──────────────────────────────────────────────────────────────────────────── KÖK NEDEN — iki ayrı kaynak: 1) Starter kartında DİĞERLERİNDE OLMAYAN bir eleman var (.plan-offer-badge), altındaki her şeyi ~29px aşağı itiyor. 2) .plan-who ve .plan-desc metin uzunlukları farklı → bazı kartta 1, bazısında 2 satır sarıyor (Pro: "Tam zamanlı medya satın alımcıları için" 2 satır). ÇÖZÜM: her "slot"a sabit min-height. Grid'e çevirmek daha zarif olurdu ama .plan yapısını baştan yazmayı gerektirirdi — min-height aynı sonucu sıfır yapısal risk ile veriyor. ════════════════════════════════════════════════════════════════════════════ */ .plan-who { min-height: 2.8em; display: flex; align-items: flex-start; } /* Rozet slotu TÜM kartlarda rezerve — rozeti olmayan kartta boş yer tutar */ /* Kampanya katmanının AÇMA sınıfları. JS `display` değeri yazmıyor, yalnız sınıf ekliyor — hangi elemanın hangi `display`e döneceğini CSS biliyor (CLAUDE.md §3b: görünüm merkezî, mekanizma JS'in işi). */ .promo-banner.is-kampanya-acik { display: flex; } .plan-offer-slot { min-height: 34px; display: none; } .plan-offer-slot.is-kampanya-acik { display: block; } /* Gizli plan da aynı yönde: JS çalışmazsa görünmesin. Checkout adresi canlı olduğu için bu bir PARA riski, kozmetik değil. */ .plan[data-plan="team"] { display: none; } .plan[data-plan="team"].is-plan-acik { display: flex; } .plan-price { min-height: 1.25em; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; } /* Üst satır (üstü çizili fiyat + indirim çipi) TAM SATIR kaplar. Eskiden bunu `
` yapıyordu; flex kabında `
` satır sonu değil ÖĞE olduğu için sıra bozuluyor, "/ay" fiyatın üstüne çıkıyor ve kutu 33px yerine 66px oluyordu (ölçüldü). `flex-basis:100%` aynı işi flex kurallarıyla, doğru yapar; indirim yokken bu kap HİÇ üretilmez, boş satır kalmaz. */ .plan-price-ust { flex: 0 0 100%; display: flex; align-items: baseline; gap: 6px; } .plan-desc { min-height: 2.6em; display: inline-flex; align-items: center; } .plan-desc-sub { min-height: 2.4em; /* Kullanıcı isteği: "2.500 tarama/saat · 3 saatte bir yenilenir italik gibi yaz" */ font-style: italic; letter-spacing: -0.005em; } @media (max-width: 860px) { /* Mobilde kartlar alt alta — sabit yükseklik gereksiz boşluk yaratır */ .plan-who, .plan-offer-slot, .plan-price, .plan-desc, .plan-desc-sub { min-height: 0; } } /* Hero alt metninde "Kredi yok" cümlesini AYRI SATIRA al (kullanıcı: "bir satır boş olup üst dolu olur") —
yerine blok span, çünkü mobilde de temiz kırılıyor. */ .hero .sub .sub-break { display: block; margin-top: 0.55em; } /* ═══ "YAKINDA" DURUMU (2026-08-05) ═════════════════════════════════════ Eklenti Chrome Web Store'da yayınlanana kadar mağazaya ve satın almaya giden düğmeler bu durumda. Tek bayrak yönetiyor: `EKLENTI_YAYINDA` (bkz. site/cta-durum.js) — CSS yalnız GÖRÜNÜMÜ verir, kararı vermez. ⚠️ DÜĞMENİN KENDİ RENGİNE DOKUNULMUYOR. Sebep ölçüldü: `.final-cta .btn-dark` zemini `var(--paper)`'e çeviriyor, `.plan` kartlarının içindeki ghost düğmeler beyaz kartta duruyor, nav'daki koyu zeminde. Sabit bir "soluk" renk yazmak bu üç bağlamın en az birinde okunamaz çıkardı ve her biri için ayrı override yazmak §8'in "rakip CSS tanımı" tuzağı olurdu. Devre dışılık ROZET + imleç + `aria-disabled` ile anlatılıyor. ROZET RENGİ `currentColor`'DAN TÜRÜYOR — sabit hex yok. Böylece hangi düğmenin içinde olursa olsun kontrast düğmenin kendi (zaten ölçülmüş) metin/zemin kontrastına yakın kalıyor. ÖLÇÜLDÜ (WCAG, metin eşiği 4.5:1): koyu düğme 12.60:1 · son CTA beyaz düğme 14.30:1 · ghost 13.22:1 plan kartı 14.30:1 · footer düz bağlantı 4.81:1 ← en dar Alfayı %14'ten aşağı çekme: footer örneği eşiğe en yakın olan. */ .cta-soon { display: none; } .is-soon .cta-soon { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 8px; border-radius: var(--r-pill); font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; background: color-mix(in srgb, currentColor 14%, transparent); } /* 🔴 Tıklanamazlık ÜÇ katmanlı: `href` JS'te sökülüyor, `aria-disabled` ekran okuyucuya söylüyor, `pointer-events` fareyi kesiyor. Yalnız biri yeterli değil — `pointer-events` klavyeyi durdurmaz, `href`in yokluğu da odaklanmayı engellemez ama bağlantıyı etkisiz kılar. */ .is-soon { pointer-events: none; cursor: default; } .is-soon:hover { transform: none; box-shadow: none; } /* ═══ PROFİL SAYFASI (2026-08-05) ═══════════════════════════════════════ Yeni evren AÇILMADI: renk/punto/yarıçap/boşluk tamamı mevcut token'lardan. Yeni token eklenmedi, ölçek dışı değer yok, `!important` yok. ⚠️ `.pf-shell[hidden]` YOK — gizleme HTML'in `hidden` özniteliğiyle yapılıyor ve CSS onu ezmiyor. Sebep İŞ 4: sayfa açılırken hiçbir kullanıcı alanı bir kare bile görünmemeli. `display:none` başlayıp JS'le açmak, CSS geç yüklenirse flaş üretir; `hidden` özniteliği CSS'ten ÖNCE geçerlidir. */ .pf-wrap { max-width: 720px; } .pf-lead { color: var(--muted); font-size: var(--fs-body); margin-top: 14px; } .pf-card { background: var(--glass-surface); border: 1px solid var(--glass-border); border-radius: var(--r-surf); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); box-shadow: var(--glass-shadow); padding: 24px 26px; margin-bottom: 16px; } .pf-card h2 { font-family: var(--font-head); font-size: var(--fs-lead); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 16px; } .pf-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); } .pf-row:first-of-type { border-top: 0; padding-top: 0; } .pf-key { font-size: var(--fs-small); color: var(--muted); flex-shrink: 0; } .pf-val { font-size: var(--fs-body); font-weight: 600; text-align: right; word-break: break-word; } .pf-note { font-size: var(--fs-micro); color: var(--muted); line-height: 1.6; margin-top: 14px; } /* Kota çubuğu — `width` JS'ten gelir (ölçülen değer), rengi buradan. */ .pf-bar { height: 8px; border-radius: var(--r-pill); background: var(--paper-dim); overflow: hidden; margin-top: 10px; } .pf-bar-fill { height: 100%; background: var(--blue); border-radius: var(--r-pill); } .pf-badge { display: inline-block; padding: 3px 10px; border-radius: var(--r-pill); font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.02em; } /* Durum renkleri: metin için `-deep` varyantlar — açık zeminde ölçülmüş olanlar bunlar (CLAUDE.md §7: ön plan rengi ≠ dolgu rengi). */ .pf-badge-ok { background: rgba(var(--mint-rgb),0.12); color: var(--mint-deep); } .pf-badge-warn { background: rgba(var(--amber-rgb),0.14); color: var(--amber-deep); } .pf-badge-off { background: var(--paper-dim); color: var(--muted); } .pf-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; } .pf-signin { text-align: center; padding: 44px 26px; } .pf-signin h1 { font-family: var(--font-head); font-size: var(--fs-title); font-weight: 700; letter-spacing: -0.03em; margin-bottom: 12px; } .pf-signin p { color: var(--muted); font-size: var(--fs-body); margin-bottom: 26px; } /* `--red` değil `--red-text`: bu bir HATA METNİ, 3.41:1 ile okunmuyordu. */ .pf-err { color: var(--red-text); font-size: var(--fs-small); margin-top: 14px; } @media (max-width: 520px) { .pf-row { flex-direction: column; align-items: flex-start; gap: 4px; } .pf-val { text-align: left; } } } /* ══ override — eskiden `!important` taşıyan bildirimler ═════════════════ Bayrak SÖKÜLDÜ; üstünlük artık katman sırasından geliyor. Kural komple taşınmadı, yalnız `!important` bildirimleri ayrıldı — normal kardeşleri `component`'te yerinde kaldı, yoksa onlar da sessizce yükselirdi. ══ */ @layer override { /* Canlı Demo nav butonu (2026-07-23): pulse'lı LIVE noktası — anında göze çarpsın */ .nav-demo-btn {color:var(--blue) ;} /* 12.1d — metin ink'e indi; sütunu işaretleyen 2px mavi üst çizgi KALDI (o bir işaretçi, renkli ALAN değil). */ .cmp-us {color:var(--ink) ;} @media (max-width: 860px) { /* Tipografi ölçekleme — clamp ile akışkan, sabit kırılım yerine */ .hero h1, h1 { font-size: clamp(30px, 8.5vw, 46px) ; line-height: 1.12 ;} .hero-sub, .hero p { font-size: clamp(15px, 4.1vw, 18px) ;} .section-head h2, h2 { font-size: clamp(24px, 6.2vw, 34px) ;} .container { padding-left: 18px ; padding-right: 18px ;} section { padding-top: 48px ; padding-bottom: 48px ;} /* Hero butonları: tam genişlik, alt alta — "2+1 yetim buton" düzeni biter */ .hero-cta, .hero-btns { display: flex ; flex-direction: column ; gap: 10px ;} .hero-cta .btn, .hero-btns .btn { width: 100% ; justify-content: center ;} /* Nav linkleri gizlenince marka + CTA arasında boşluk kalıyordu */ .nav-inner { gap: 10px ;} .nav-cta, .nav-inner .btn { padding-left: 14px ; padding-right: 14px ; font-size: var(--fs-small) ;} /* ⚠️ 5 Ağu · NAV DAR EKRANDA SARIYOR. Ölçüldü (360px): marka 121 + dil 77 + CTA 207 = 405px, kullanılabilir alan 324px. CTA'nın tek satıra sığması için ~120px olması gerekirdi — "Chrome'a Ekle" + ikon o kadar küçülemez. Tek satırda tutmanın tek yolu bir şeyi GİZLEMEKTİ; sarmak dürüst çözüm. CTA ikinci satırda tam genişlik — telefonda zaten istenen yerleşim. Öncesinde 84px taşıyor ve `body{overflow-x:hidden}` maskeliyordu: düğmenin sağ kenarı ekran dışında kalıyordu. */ .nav-inner { flex-wrap: wrap ; row-gap: 10px ;} .nav-inner > .btn { flex: 1 0 100% ; justify-content: center ;} } @media (max-width: 620px) { /* Orbit görseli: mobilde etiketler daireyle çakışıyordu — küçült + sıkılaştır */ .hero-visual { max-width: 320px ;} .orbit-item { font-size: var(--fs-micro) ; padding: 6px 10px ;} .orbit-item .i { width: 12px ; height: 12px ;} .cmp-table { font-size: var(--fs-micro) ;} .cmp-table th, .cmp-table td { padding: 9px 10px ;} .cmp-table th:first-child, .cmp-table td:first-child { min-width: 150px ;} } @media (max-width: 400px) { /* Çok dar telefonlar (iPhone SE vb.) */ .container { padding-left: 14px ; padding-right: 14px ;} .kicker { font-size: var(--fs-micro) ; letter-spacing: 0.04em ;} .hero-visual { max-width: 264px ;} .plan { padding: 20px 18px ;} } } @layer component { /* ══════════════════════════════════════════════════════════════════════ HESAP SİLME — tehlikeli eylem (6 Ağu) Sayfanın EN ALTINDA, ayrı bir bölüm, navigasyonda bağlantısı YOK. Kullanıcı buraya kazara gelmez; gelen bilerek gelir. ══════════════════════════════════════════════════════════════════════ */ /* Profil kimliği — ad + fotoğraf. Fotoğraf yoksa baş harf rozeti. */ .pf-kimlik { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; } .pf-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--blue); color: var(--paper); font-family: var(--font-head); font-size: var(--fs-lead); font-weight: 700; overflow: hidden; } .pf-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .pf-ad { font-family: var(--font-head); font-size: var(--fs-lead); font-weight: 700; color: var(--ink); } .pf-sil { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); } /* Silme kartı bir açılır bölümün arkasında (10 Ağu). Varsayılan görünümde yalnız bu sessiz satır durur; kırmızı kart tıklanınca gelir. Erişim kaybı YOK — bir tık uzakta ve klavyeyle açılabilir. */ .pf-sil-ac > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: var(--fs-small); padding: 8px 2px; min-height: 44px; } .pf-sil-ac > summary::-webkit-details-marker { display: none; } .pf-sil-ac > summary::before { content: ''; width: 14px; height: 14px; flex-shrink: 0; background: currentColor; transition: transform .18s ease; -webkit-mask: var(--chevron-mask) center / contain no-repeat; mask: var(--chevron-mask) center / contain no-repeat; } .pf-sil-ac[open] > summary::before { transform: rotate(90deg); } .pf-sil-ac > summary:hover { color: var(--ink); } .pf-sil-ac > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: var(--r-ctl); } .pf-sil-ac[open] > summary { margin-bottom: 14px; } .pf-sil-kart { border: 1px solid var(--red); border-radius: var(--r-surf); background: var(--paper); padding: 22px; } .pf-sil-kart h2 { font-size: var(--fs-body); font-weight: 600; color: var(--red-text); margin-bottom: 8px; } .pf-sil-kart p { color: var(--muted); font-size: var(--fs-small); line-height: 1.65; } .pf-sil-btn { margin-top: 16px; border: 1px solid var(--red); background: transparent; color: var(--red-text); font-family: inherit; font-size: var(--fs-small); font-weight: 600; border-radius: var(--r-ctl); padding: 10px 16px; min-height: 44px; cursor: pointer; } .pf-sil-btn:hover { background: var(--red-text); color: var(--paper); border-color: var(--red-text); } .pf-sil-btn[disabled] { opacity: .5; cursor: default; } .pf-sil-btn[disabled]:hover { background: transparent; color: var(--red-text); border-color: var(--red); } /* ── ne gider / ne kalır tablosu ── */ .pf-sil-tablo { display: grid; gap: 18px; margin-top: 18px; } @media (min-width: 640px) { .pf-sil-tablo { grid-template-columns: 1fr 1fr; } } .pf-sil-sutun h3 { font-size: var(--fs-small); font-weight: 700; margin-bottom: 8px; letter-spacing: 0.04em; text-transform: uppercase; } .pf-sil-sutun ul { list-style: none; display: grid; gap: 6px; } .pf-sil-sutun li { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.5; padding-left: 16px; position: relative; } .pf-sil-sutun li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--muted); } .pf-sil-gider h3 { color: var(--red-text); } .pf-sil-gider li::before { background: var(--red-text); } .pf-sil-kalir h3 { color: var(--muted); } /* ── aktif abonelik uyarısı ── */ .pf-sil-abo { margin-top: 18px; border: 1px solid var(--red); border-radius: var(--r-ctl); padding: 16px; background: rgba(var(--red-rgb), 0.06); } .pf-sil-abo p { color: var(--ink-soft); } .pf-sil-abo-eylem { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } /* İptal BİRİNCİL: dolu düğme. Silme İKİNCİL: soluk, kenarlıksız. */ .pf-sil-abo-eylem .birincil { background: var(--ink); color: var(--paper); border: 0; border-radius: var(--r-ctl); padding: 10px 16px; min-height: 44px; cursor: pointer; font-family: inherit; font-size: var(--fs-small); font-weight: 600; } .pf-sil-abo-eylem .ikincil { background: transparent; border: 0; color: var(--muted); font-family: inherit; font-size: var(--fs-small); text-decoration: underline; min-height: 44px; cursor: pointer; padding: 10px 4px; } /* ── e-posta doğrulama adımı ── */ .pf-sil-dogrula { margin-top: 18px; } .pf-sil-dogrula label { display: block; font-size: var(--fs-small); font-weight: 600; margin-bottom: 8px; } .pf-sil-dogrula input { width: 100%; max-width: 380px; font-family: inherit; font-size: var(--fs-small); padding: 11px 13px; min-height: 44px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--paper); color: var(--ink); } .pf-sil-dogrula input:focus { outline: 2px solid var(--blue); outline-offset: 1px; } .pf-sil-son { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .pf-sil-ok { color: var(--ink); font-size: var(--fs-small); margin-top: 14px; } } /* ⚠️ Bu blok `@layer component` İÇİNDE olmak ZORUNDA. İlk yazımda katman dışında bırakılmıştı ve bekçi yakaladı: `site/shared.css` katman dışı kural 0 → 8. Katmansız kural katmanlı olanın hepsini yener; bu dosyanın 0 katmansız kural değişmezi vardı. */ @layer component { /* ── Çerez onay şeridi (9 Ağu) ──────────────────────────────────────────── Eskiden YALNIZ pricing.html'de vardı ve satır içi stil taşıyordu. Ölçüldü: `shared.js` `if (!banner) return;` diyor — yani banner'ı olmayan sayfada analytics HİÇ yüklenmiyordu. GA4 kimliği girilse bile en çok trafik alan sayfa (index) görünmez kalacaktı. Üç sayfaya da eklendi, stil buraya alındı. */ .cookie-banner{ display:none; position:fixed; left:16px; right:16px; bottom:16px; z-index:9999; max-width:560px; margin:0 auto; background:#14161f; color:#f2f2f4; border:1px solid rgba(var(--white-rgb),0.12); border-radius:var(--r-surf); padding:18px 20px; box-shadow:0 12px 32px rgba(0,0,0,0.35); font-size:var(--fs-small); line-height:1.55; } .cookie-banner .cb-metin{margin-bottom:12px;} .cookie-banner .cb-link{color:#8ab0ff;} .cookie-banner .cb-eylem{display:flex; gap:10px; justify-content:flex-end;} .cookie-banner button{ padding:9px 18px; border-radius:var(--r-ctl); font-size:var(--fs-small); cursor:pointer; } .cookie-banner .cb-reddet{background:transparent; border:1px solid rgba(var(--white-rgb),0.25); color:#cfd2da;} .cookie-banner .cb-kabul{background:var(--blue); border:none; color:var(--paper); font-weight:600; padding:9px 20px;} .cookie-banner button:focus-visible{outline:2px solid var(--blue); outline-offset:2px;} } /* ⚠️ Bu blok `@layer component` İÇİNDE olmak ZORUNDA. Dosyanın iki değişmezi var ve bekçi ikisini de ölçüyor: `!important` 0 · katman dışı kural 0. Katmansız tek kural, katmanlı olanların HEPSİNİ yener. */ @layer component { /* ══════════════════════════════════════════════════════════════════════ HAREKET — birincil CTA parıltısı ══════════════════════════════════════════════════════════════════════ Burası 9 Ağu'da dokuz animasyonluk bir "hareket katmanı"ydı ve tamamı `n-` markup'ına bağlıydı. `f85968e` ana sayfayı prototipin KENDİSİYLE değiştirdi; o markup hiçbir sayfada kalmadı. Ölçüldü (10 Ağu): kaynakta `class="n-` → 0 (8 HTML, tr+en) canlıda `[class*="n-"]` → 0 (advantagescope.io ve /en/) ana sayfanın KENDİ animasyonu → 43 (canlı, çalışıyor) Sekiz animasyon + 197 kural bu yüzden silindi — ölü koddu, tasarım kararı değil. Ayakta kalan tek taşıyıcı `.btn-dark`: 404 · pricing (tr+en) · profil (tr+en) sayfalarında 11 kullanım. ⚠️ Yeni animasyon eklersen alttaki `prefers-reduced-motion` kapısına da ekle — o TEK kapı ve buradaki her animasyonu kapatır. Bekçi: `tools/check-hareket.py` ══════════════════════════════════════════════════════════════════════ */ /* prototip: `sweep` — düğmenin üstünden geçen parıltı */ @keyframes nParilti { from { transform: translateX(-100%); } to { transform: translateX(100%); } } /* Yalnız KOYU birincil düğmede — ikincil ve metin düğmelerde parıltı gürültü olur. `overflow:hidden` şart, yoksa parıltı düğmenin dışına taşar. */ .btn-dark { position: relative; overflow: hidden; } .btn-dark > * { position: relative; z-index: 1; } .btn-dark::after { content: ''; position: absolute; top: 0; bottom: 0; width: 45%; pointer-events: none; z-index: 0; background: linear-gradient(100deg, rgba(var(--white-rgb), 0) 0%, rgba(var(--white-rgb), 0.16) 50%, rgba(var(--white-rgb), 0) 100%); animation: nParilti 3.6s ease-in-out 1.2s infinite; } /* fare üstündeyken parıltı durur — iki hareket üst üste binmesin */ .btn-dark:hover::after { animation-play-state: paused; } /* ══ TEK KAPI · HAREKETİ AZALT ═══════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .btn-dark::after { animation: none; } } }