/* ============================================================ Press Earth Landing — temel stiller Renk kimliği: lacivert / mavi / altın ============================================================ */ :root{ --pe-navy:#060b33; --pe-navy-2:#071048; --pe-blue:#0f55ff; --pe-blue-dark:#003cc7; --pe-gold:#ffcf24; --pe-cyan:#dff0ff; --pe-violet:#7b3cff; --pe-green:#14b86a; --pe-red:#ed2f38; --pe-text:#111833; --pe-muted:#66708a; --pe-border:#dfe7fb; /* Premium tasarım yenilemesi (2026-08-28 spec): birincil buton, öne çıkan plan kartı ve vurgu detayları için indigo. --pe-blue KASITLI OLARAK dokunulmadı — linkler/odak halkaları vb. eski değerinde kalıyor, blast radius sadece bu iki token'ı kullanan yeni bileşenlerle sınırlı. */ --pe-indigo:#3346d4; /* Tek marka mavisi gradyanı: hero rozeti ve BİRİNCİL BUTONLAR birebir aynı yüzeyi kullanır (Creative Director yönü, 29 Ağu 2026). Önceden rozet #0f55ff->#082fbc ile lacivere düşüyor, buton ise düz #3346d4 (mor-indigo) duruyordu; iki farklı mavi dili aynı ekranda çarpışıyordu. */ --pe-blue-grad:linear-gradient(135deg,#3b76ff 0%,#0f55ff 52%,#0b3fd6 100%); --pe-indigo-deep:#0d1030; --shadow:0 18px 50px rgba(9,16,51,.12); --pad:18px; --shell:430px; --measure:720px; /* Çapa inişlerinin sabit üst banttan (.top-progress) kaçınmak için bıraktığı pay — kullanımı ve ölçümü .top-progress'in hemen altında. */ --anchor-offset:63px; /* YÖN İŞARETİ (RTL, T3): transform ve transform-origin MANTIKSAL ÖZELLİK DEĞİLDİR — fiziksel x eksenine bakarlar. Asimetrik kaydırmalar (marquee akışı, gezen nokta) ve kenar-kilitli ölçek kökenleri bu tek çarpanla yön duyarlı olur; ayrı bir [dir="rtl"] düzen bloğu YAZILMAZ (spec §5-T3). LTR'de +1, yani her kullanım LTR'de birebir eski değere sadeleşir. */ --dir:1; } [dir="rtl"]{--dir:-1} /* 2026-08-31: Inter'de Arapça glif yok, RTL sayfalar sistem fontuna (cihaza göre tutarsız) düşüyordu. IBM Plex Sans Arabic önce gelir (Arapça karakterler ondan render edilir), Inter ikinci sırada kalır (Arapça içindeki Latin alt dizeler — marka istisnası adları, rakamlar — hâlâ Inter'de kalsın diye). Font yükleme koşullu (bkz. template.html/ checkout.html meta.rtlFontLink) — yalnızca dir="rtl" olan tek dilde (ar) gerçekten indirilir. Seçici body ÜZERİNDE ([dir="rtl"] body, [dir="rtl"] değil) — body{font-family:Inter,...} (aşağıda) kendi doğrudan bildirimini taşıyor, 'den kalıtım YAPMAZ; [dir="rtl"]{font-family:...} yazılsa body'nin kendi kuralı tarafından ezilirdi. */ [dir="rtl"] body{font-family:'IBM Plex Sans Arabic',Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif} *{box-sizing:border-box} html{scroll-behavior:smooth;background:#f2f6ff} /* padding-bottom = mobil sabit çubuğun (.sticky-cta) footer'ı örtmemesi için ayrılan yastık. Task 14 düzeltme turu 1: sabit 96px, ÇENTİKLİ cihazda (env(safe-area-inset-bottom)>0) YETMİYORDU — BASE'te bile bant 99px'e çıkıp yastığı 3px aşıyordu (ölçüm: task-14-report.md §5b). Yastık artık güvenli alan payını da içeriyor; env yoksa/0 ise değer 96px'te KALIR, yani çentiksiz cihazda ve masaüstünde hiçbir şey değişmez (768+ katmanı zaten padding-bottom:0 yazıyor). */ body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--pe-text);background:linear-gradient(180deg,#eef4ff,#fff);padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))} button,input,textarea,select{font:inherit} .page-shell{width:100%;max-width:var(--shell);margin:0 auto;background:#fff;box-shadow:0 24px 90px rgba(7,16,72,.12)} /* İkon sistemi */ .ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto} .ic-circle{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:var(--pe-blue);color:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(15,85,255,.22)} .ic-circle .ic{width:18px;height:18px} /* Scroll giriş animasyonları */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.32,.72,0,1),transform .8s cubic-bezier(.32,.72,0,1)} .reveal.is-revealed{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}} /* Üst bar */ .topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px var(--pad);background:#fff;border-bottom:1px solid #eef2fe} .brand{display:flex;align-items:center} .brand img{display:block;height:28px;width:auto} /* WhatsApp yönlendirmesi (Task 10, desktop-polish-3): üç dokunuş noktası (topbar / SSS / mobil — Task 17'den beri yüzen düğme .wa-fab) aynı ikonu (#b-whatsapp, currentColor) ve aynı tr.json kaynağını (whatsapp.link) paylaşır. Marka yeşili (#25d366) yalnız ikon/vurgu rengi olarak, ölçülü kullanılır — sayfa paleti mavi/lacivert kalır. Taban boyut burada tek yerde tanımlanır, her yerleşim kendi seçicisiyle boyutu geçersiz kılabilir (topbar 18px, SSS 18px, yüzen düğme 32px). */ .ic-whatsapp{width:18px;height:18px;flex:0 0 auto} /* 1) Masaüstü üst bar: eski topbar-cta'nın (yukarıda, hâlâ display:none) bıraktığı boşluğu devralan sessiz metin bağlantısı. Güven rozetinin (kalkan+iki satır) ikincili — daha küçük punto, ince ağırlık, dolgusuz. Taban katmanda gizli: mobil topbar'da HİÇ görünmez (brief kuralı). */ .topbar-whatsapp{display:none;align-items:center;gap:6px;padding:8px 2px;font-size:12.5px;font-weight:800;color:#3a4564;text-decoration:none;border-radius:8px;transition:color .16s ease} .topbar-whatsapp .ic-whatsapp{color:#25d366} .topbar-whatsapp:hover{color:var(--pe-blue-dark)} /* Halka rengi TAM YOĞUNLUK: eski rgba(15,85,255,.45) beyaz topbar'a kompozit edilince #93b3ff'e denk geliyordu ve beyazla kontrastı 2.08:1 — WCAG 1.4.11 eşiği 3:1'in altında. Biçim (3px solid marka mavisi + offset) DEĞİŞMEDİ, yalnız opaklık yükseldi: #0f55ff / #fff = 5.58:1. (Nihai inceleme I-1.) */ .topbar-whatsapp:focus-visible{outline:3px solid var(--pe-blue);outline-offset:2px} /* Hero */ .hero{position:relative;overflow:hidden;padding:26px var(--pad) 30px;background:radial-gradient(circle at 88% 18%,rgba(15,85,255,.14),transparent 40%),radial-gradient(circle at 8% 92%,rgba(123,60,255,.10),transparent 45%),linear-gradient(180deg,#fbfdff,#eef4ff)} /* 5. tur: hero kutusu artık teklif bölümündeki "Net Teklif" rozetiyle (aşağıda .front-badge) BİREBİR aynı kutu — kullanıcı isteğiyle birleştirildi, bkz. .front-badge tanımı. */ .hero-kicker .ic{width:15px;height:15px;color:var(--pe-gold)} /* Genel toparlama (2026-08-28 spec, 4. tur): Cision incelemesinde (2. tur) ağırlık 950→700'e, harf aralığı -.055em→-.01em'e çekilmişti — kullanıcı geri bildirimiyle ("başlıklarımız ilk başta çok daha iyiydi") ORİJİNAL ağırlık/punto/aralık geri getirildi. Gövde metnindeki hafifletme (bkz. .hero-lead) ve buton/kart düzleştirmesi KORUNUYOR — yalnız başlık katmanı geri alındı. */ .hero-title{margin:18px 0 0;font-size:44px;line-height:1;letter-spacing:-.055em;font-weight:950;color:var(--pe-navy)} .hero-title span{display:block} .hero-title-accent{position:relative;width:max-content;max-width:100%;padding-bottom:14px} .hero-swash{position:absolute;inset-inline-start:3px;bottom:0;width:min(48%,150px);height:12px;display:block} .hero-lead{margin:14px 0 0;color:#2a3352;font-size:16px;line-height:1.5;font-weight:400} /* Vurgu rengi indigo'ya taşındı (2026-08-28 spec) — bkz. :root notu. Kontrast yeniden ölçüldü: #3346d4 / #eef4ff zemin = 6.41:1 (eskiki #0f55ff'in 5.06:1'inden daha güçlü), 4.5:1 eşiğinin rahatça üstünde. */ .hero-lead strong{color:var(--pe-indigo);font-weight:700} .hero-collage{display:grid;gap:10px;margin:22px 0 0} /* Çerçevesiz, kenarları sayfaya eriyen görsel */ .blend-photo{margin:0 auto;position:relative;z-index:0; -webkit-mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 90%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 9%,#000 93%,transparent 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 90%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 9%,#000 93%,transparent 100%); mask-composite:intersect} .blend-photo img{display:block;width:100%;height:auto} .hero-photo{width:min(430px,100%);margin-inline-start:auto;margin-inline-end:0} .hero-photo img{aspect-ratio:451/560;object-fit:cover;object-position:center top} .hero-rotator{height:48px;overflow:hidden;margin:16px 0 0;background:rgba(255,255,255,.95);border:1px solid #dde7ff;border-radius:999px;box-shadow:0 10px 24px rgba(9,16,51,.07)} .hero-rotator ul{list-style:none;margin:0;padding:0;animation:hero-rotate 10.5s cubic-bezier(.32,.72,0,1) infinite} .hero-rotator li{height:48px;display:flex;align-items:center;gap:11px;padding:0;padding-inline:7px 16px;font-size:14px;font-weight:700;color:#17214a} .hero-rotator li .ic-circle{flex:0 0 34px} @keyframes hero-rotate{0%,28%{transform:translateY(0)}33.3%,61.3%{transform:translateY(-48px)}66.6%,94.6%{transform:translateY(-96px)}100%{transform:translateY(-144px)}} @media (prefers-reduced-motion:reduce){ .hero-rotator{height:auto;border-radius:20px} .hero-rotator ul{animation:none;display:grid;gap:6px;padding:6px 0} .hero-rotator li:last-child{display:none} } .hero-cta{margin-top:16px;gap:4px} .link-how{display:flex;align-items:center;justify-content:center;min-height:44px;background:none;border:0;cursor:pointer;font-size:14px;font-weight:700;color:var(--pe-blue-dark);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} /* Odak halkası (nihai inceleme I-2): bu bir