/* Tar2Star web v3 — gece→şafak marka paleti; Inter + Baloo2 (yalnız marka). Bölümler: hero, rakam bandı, adımlar, dönüşümlü özellik sıraları, manzara şeridi (kullanıcı fotoğrafları), widget bandı, dil bandı, avatarlar, SSS. Legal sayfalar .doc ile aynı kalır. */ @font-face { font-family: "Baloo2"; src: url("/assets/fonts/baloo2-var.ttf") format("truetype-variations"); font-weight: 400 800; font-display: swap; } @font-face { font-family: "Inter"; src: url("/assets/inter-var.ttf") format("truetype-variations"); font-weight: 100 900; font-display: swap; } :root { --ink: #1a1b1e; --paper: #faf8f4; --star: #f2a93b; --sage: #9db8a0; --night: #2c3e56; --night-deep: #10141e; --ember: #e2604a; /* Kart/kenarlık/tint tabanı — açık temada paper yerine ink'e döner, rgba(var(--overlay-rgb), X) kullanan HER kural otomatik uyum sağlar. */ --overlay-rgb: 250, 248, 244; --muted: rgba(var(--overlay-rgb), 0.72); --faint: rgba(var(--overlay-rgb), 0.45); --line: rgba(var(--overlay-rgb), 0.12); color-scheme: dark; } /* Açık tema: kullanıcı geçiş yapınca basılır (script.js). Varsayılan (temasız/karanlık) davranış yukarıdaki :root. */ [data-theme="light"] { --paper: #1a1b1e; --night-deep: #faf8f4; --overlay-rgb: 26, 27, 30; color-scheme: light; } [data-theme="light"] .sky { background: radial-gradient(1000px 760px at 84% 2%, rgba(242,169,59,.16), transparent 60%), radial-gradient(860px 680px at 6% 86%, rgba(200,218,236,.55), transparent 62%), radial-gradient(1.6px 1.6px at 12% 22%, rgba(242,169,59,.55), transparent 60%), radial-gradient(1.8px 1.8px at 88% 42%, rgba(242,169,59,.4), transparent 60%), radial-gradient(1.3px 1.3px at 66% 82%, rgba(242,169,59,.3), transparent 60%), linear-gradient(180deg, #fffdf9 0%, #faf8f4 45%, #f3ede1 100%); } /* .phone/.mini/.float-av/.thstrip figcaption kasıtlı olarak koyu kalır — gerçek cihaz çerçevesi ve fotoğraf-üstü okunabilirlik katmanı, sayfa temasından bağımsız (Apple/Google ürün sayfalarında da böyledir). */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Inter", system-ui, sans-serif; background: var(--night-deep); color: var(--paper); line-height: 1.6; min-height: 100vh; /* `body::before` üst şerit zemininin dayanağı (bkz. header.site notu). */ position: relative; -webkit-font-smoothing: antialiased; } .sky { background: radial-gradient(1100px 820px at 84% 2%, rgba(242,169,59,.11), transparent 60%), radial-gradient(900px 720px at 6% 84%, rgba(60,92,132,.34), transparent 62%), radial-gradient(1.6px 1.6px at 12% 22%, rgba(242,169,59,.9), transparent 60%), radial-gradient(1.2px 1.2px at 78% 12%, rgba(var(--overlay-rgb),.8), transparent 60%), radial-gradient(1.4px 1.4px at 32% 68%, rgba(var(--overlay-rgb),.5), transparent 60%), radial-gradient(1.8px 1.8px at 88% 42%, rgba(242,169,59,.7), transparent 60%), radial-gradient(1.1px 1.1px at 55% 30%, rgba(var(--overlay-rgb),.6), transparent 60%), radial-gradient(1.3px 1.3px at 66% 82%, rgba(242,169,59,.5), transparent 60%), radial-gradient(1.2px 1.2px at 22% 88%, rgba(var(--overlay-rgb),.45), transparent 60%), linear-gradient(180deg, #0b0f1a 0%, #10141e 45%, #1c2a3d 100%); } /* ⚠️ 30 Tem 2026 — `z-index: 1` ŞART. `body::before`/`body::after` perdeleri konumlandırılmış (`position:absolute; z-index:0`) olduğu için, statik akış içindeki metnin ÜSTÜNE boyanıyorlardı: perde yalnız fotoğrafı değil yazıyı da soluklaştırıyordu. Alt şerit .90'a çıktığında bu apaçık görüldü — footer beyaz bir sisin altında kaldı. İçeriği perdelerin üstüne alınca perde amacına uygun çalışıyor: fotoğrafı bastırıyor, metne dokunmuyor. */ .wrap { max-width: 1060px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; } header.site { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 20px 0; } /* ⚠️ 30 Tem 2026 — ÜST ŞERİT ZEMİNİ. Arka plan %80'e çıkınca amber logo ve menü, kum tonlu gökyüzünün üstünde okunmaz hâle geldi (bkz. .wordmark notu). Marka rengini değiştirmek yerine yalnız üst ~150 pikselde çok yumuşak bir zemin veriyoruz: manzaranın tamamı %80'de kalıyor, sadece yazının arkası koyulaşıyor. Gradyan aşağı doğru tamamen kayboluyor, yani görünür bir bant/çizgi oluşmuyor. ⚠️ `header::before` + `width:100vw` DENENDİ VE YATAY KAYDIRMA ÇUBUĞU AÇTI: 100vw dikey scrollbar genişliğini de sayıyor, header ise max-width bir kapsayıcının içinde — ikisi birleşince sayfa yana taştı. Katman bu yüzden `body`ye taşındı ve `width:100%` kullanılıyor (kapsayıcı body, yani scrollbar hariç genişlik → taşma yok). */ body::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 190px; /* Üç duraklı: damganın oturduğu ilk ~100 pikselde perde güçlü kalıyor, sonra sıfıra iniyor. Tek duraklı hâlde (.55 → 0) damganın bulunduğu y≈70'te opaklık ancak ~.29'a düşüyordu ve yetmiyordu. */ background: linear-gradient(180deg, rgba(7,10,18,.80), rgba(7,10,18,.52) 50%, rgba(7,10,18,0)); pointer-events: none; z-index: 0; } [data-theme="light"] body::before { background: linear-gradient(180deg, rgba(250,248,244,.88), rgba(250,248,244,.58) 50%, rgba(250,248,244,0)); } /* ⚠️ 30 Tem 2026 — ALT ŞERİT (üst şeridin simetriği). Sayfanın dibi manzaranın EN HAREKETLİ yeri: çalılık. Alt damga, footer bağlantıları ve kapanış alt-başlığı orada dokuya karışıyordu. Aynı teknik, aynı gerekçe; `width:100%` (100vw DEĞİL — yatay kaydırma çubuğu açıyor, bkz. üst şerit notu) ve `pointer-events:none` ile footer linkleri tıklanabilir kalıyor. */ body::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 300px; background: linear-gradient(0deg, rgba(7,10,18,.80), rgba(7,10,18,.52) 55%, rgba(7,10,18,0)); pointer-events: none; z-index: 0; } [data-theme="light"] body::after { background: linear-gradient(0deg, rgba(250,248,244,.88), rgba(250,248,244,.58) 55%, rgba(250,248,244,0)); } .brand { grid-column: 2; display: flex; align-items: center; text-decoration: none; } .nav-icon { width: 38px; height: 38px; border-radius: 10px; margin-right: 10px; } @media (max-width: 720px) { .nav-icon { width: 32px; height: 32px; } } /* ⚠️ 30 Tem 2026 — ÜST DAMGA AMBER DEĞİL, TEMA-KARŞITI (`--paper`). Eskiden burada `background-color: var(--star)` vardı (amber). Arka plan %50'den %80'e çıkınca amber damga HER İKİ TEMADA da manzarayla kaynaşıp okunmaz hâle geldi — ekran görüntüsüyle doğrulandı. `drop-shadow` yetmedi (damga ince çizgi sanatı, gölge çizgileri ayırmıyor); markanın arkasına yerel koyu vinyet de DENENDİ ve kirli bir leke gibi göründü. `--paper` temaya duyarlı: koyu temada #faf8f4, açık temada #1a1b1e. Yani damga otomatik olarak koyu zeminde açık, açık zeminde koyu oluyor — iki ayrı logo dosyası gerekmeden çift kilit (dual lockup). Bu aynı zamanda `.wordmark` temel kuralının ZATEN yaptığı şey; amber override'ı kaldırmak tasarımın ilk hâline dönmek demek. Amber marka rengi kaybolmuyor: hero başlığı, düğmeler, aktif dil ve alt damga hâlâ `--star`. */ .brand .wordmark { width: 76px; height: 76px; background-color: var(--paper); } /* ⚠️ 30 Tem 2026 — DİL SEÇİCİ 2 DİLDEN 4 DİLE ÇIKTI (en/tr/es/pt). Eskiden tek bir karşı-dil linki vardı ("EN" ya da "TR"); artık dördü birden duruyor ve içinde bulunduğun dil `.on` ile işaretli. `gap` 16→12'ye indi: dört link + tema düğmesi dar ekranda sığsın. */ nav.lang { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 12px; } nav.lang a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px; /* Arka plan %80 olduğu için `--faint` okunmuyordu — bir ton yukarı çıkıldı ve gölge eklendi (bkz. .bg-scene notu). */ text-shadow: 0 1px 6px rgba(0,0,0,.5); } /* ⚠️ 30 Tem 2026 — AÇIK TEMADA GÖLGE KALDIRILDI. Üst perde .88'e çıkınca (bkz. `body::before`) zemin zaten tek düze açık; üstüne açık halo koymak 14 piksellik ince yazının kenarlarını yiyip menüyü SOLDURUYORDU. */ [data-theme="light"] nav.lang a { text-shadow: none; } nav.lang a:hover { color: var(--star); } /* İçinde bulunduğun dil: amber ve tıklanabilir görünmesin diye imleç yok. */ nav.lang a.on { color: var(--star); cursor: default; } /* Blog ("Yolculuk") navbar bağlantısı (2026-08-06). Dil kodları arasında kaybolmasın diye kelime olarak yazılır ve ince bir ayraçla ayrılır; yıldız rengi tıklanabilir olduğunu söyler. */ nav.lang .navblog { font-weight: 650; color: var(--star); padding-right: 12px; margin-right: 4px; border-right: 1px solid rgba(var(--overlay-rgb), .25); } nav.lang .navblog:hover { opacity: .8; } @media (max-width: 520px) { nav.lang .navblog { padding-right: 8px; margin-right: 2px; } } /* Açık temada amber (#f2a93b) neredeyse beyaz perdenin üstünde ~1.9:1 kontrast veriyor — okunmuyor. Aynı renk ailesinden koyu ton kullanılıyor (marka hissi korunuyor, kontrast ~4.6:1'e çıkıyor). */ [data-theme="light"] nav.lang a.on { color: #9a5f0d; } .theme-toggle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--faint); cursor: pointer; padding: 0; } .theme-toggle:hover { border-color: var(--star); color: var(--star); } .theme-toggle svg { width: 16px; height: 16px; } .theme-toggle .i-moon { display: none; } [data-theme="light"] .theme-toggle .i-sun { display: none; } [data-theme="light"] .theme-toggle .i-moon { display: block; } /* ---------- Marka logosu (çizgi damga) ---------- PNG şeffaf zeminli, koyu mürekkep — mask-image ile herhangi bir düz renge boyanır (Flutter tarafındaki ColorFiltered+srcIn ile aynı teknik). Site zemini her zaman koyu (--night-deep), o yüzden logo hep açık renk. */ .wordmark { display: inline-block; -webkit-mask-image: url('/assets/logo_wordmark.png'); mask-image: url('/assets/logo_wordmark.png'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-color: var(--paper); /* ⚠️ Arka plan opaklığı %80'e çıkınca (30 Tem 2026) logo manzarayla kaynaşıp okunmaz hâle geldi. Logo mask-image ile boyandığı için text-shadow İŞLEMEZ — gölge `filter: drop-shadow` ile veriliyor. ⚠️ ÖLÇÜLDÜ (30 Tem): logonun rengi `--paper` değil AMBER (`--star`, #f2a93b) — sayfada başka bir kural onu boyuyor. Sorun bu yüzden gölgenin yönü değil, RENK YAKINLIĞI: amber logo, kum/turuncu tonlu gökyüzünün üstünde kaynaşıyor. Açık temada "açık halo" denendi ve durumu KÖTÜLEŞTİRDİ (halo, ince çizgileri daha da yuttu). O yüzden iki temada da KOYU gölge kullanılıyor — amberi hem açık hem koyu zeminden ayıran tek yön bu. ⚠️ 30 Tem 2026 (ikinci tur) — ÇÖZÜLDÜ: üst damga artık amber değil, tema-karşıtı `--paper` (bkz. `.brand .wordmark` notu). Dolayısıyla gölge de temaya göre TERS yönde: koyu mürekkebin altında koyu gölge çamur yapar. "Açık halo kötüleştirdi" gözlemi AMBER mürekkep içindi; koyu mürekkeple açık halo doğru yön. */ filter: drop-shadow(0 1px 3px rgba(0,0,0,.75)) drop-shadow(0 0 14px rgba(0,0,0,.55)); } /* Açık temada GÖLGE YOK. Denendi ve ÖLÇÜLDÜ: neredeyse opak açık halo (rgba(250,248,244,.95) + 14px yayılma) damganın ince çizgilerini yiyip onu açık griye çeviriyordu — "açık halo ince çizgileri yutuyor" gözlemi koyu mürekkep için de geçerli. Perdeler artık metnin ARKASINDA olduğu (bkz. `.wrap` z-index notu) ve zemini tek düze açık tuttuğu için haloya gerek de yok. Koyu temada gölge kalıyor: beyaz mürekkebin altında koyu gölge çizgileri yutmuyor, ayırıyor. */ [data-theme="light"] .wordmark { filter: none; } .hero-icon { width: 96px; height: 96px; border-radius: 22px; margin-bottom: 22px; } .footer-mark { display: flex; justify-content: center; margin-bottom: 18px; } /* Üst damgayla aynı gerekçe (bkz. `.brand .wordmark`): alt damga sayfanın EN HAREKETLİ yerine, çalılığın tam üstüne düşüyor ve amber orada tamamen kayboluyordu. Tema-karşıtı `--paper` ile iki temada da okunur. */ .footer-mark .wordmark { width: 88px; height: 88px; background-color: var(--paper); } /* ---------- HERO ---------- */ .hero2 { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; padding: 48px 0 18px; } /* ⚠️ 30 Tem 2026 — ARKA PLAN %80 OLDUĞU İÇİN METİN GÖLGESİ ŞART. Hero metni doğrudan manzaranın üstünde duruyor (kart/panel zemini yok). Opaklığı düşürmek yerine metni kendi gölgesine oturtuyoruz: görsel %80'de kalıyor, yazı yine de okunuyor. Gölge rengi temaya göre değişmek zorunda: koyu temada açık yazının arkasına KOYU gölge, açık temada koyu yazının arkasına AÇIK halo. Aynı gölgeyi iki temada kullanmak, birinde yazıyı bulanıklaştırıyordu. */ .hero2 h1 { font-weight: 800; font-size: clamp(38px, 5.6vw, 62px); line-height: 1.03; letter-spacing: -0.035em; text-shadow: 0 2px 12px rgba(0,0,0,.55), 0 0 3px rgba(0,0,0,.35); } [data-theme="light"] .hero2 h1 { text-shadow: 0 2px 14px rgba(250,248,244,.75), 0 0 4px rgba(250,248,244,.9); } .hero2 h1 .star-w { color: var(--star); text-shadow: 0 0 34px rgba(242,169,59,.4); } .hero2 p.sub { margin: 20px 0 0; max-width: 520px; font-size: 17.5px; color: var(--muted); font-weight: 450; text-shadow: 0 1px 8px rgba(0,0,0,.5); } [data-theme="light"] .hero2 p.sub { text-shadow: 0 1px 8px rgba(250,248,244,.85); } .cta { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; } .badge { display: inline-flex; align-items: center; gap: 10px; border: 1.5px solid rgba(var(--overlay-rgb),.3); border-radius: 14px; padding: 11px 18px; color: var(--paper); text-decoration: none; font-weight: 650; font-size: 15px; letter-spacing: -0.01em; } /* ⚠️ 30 Tem 2026: arka plan %80 olunca `--faint` renkli küçük yazı ("çok yakında", "sırada") manzaranın üstünde kayboldu. Renk soluk kalıyor ama artık kendi zeminine oturuyor — opaklığı düşürmek yerine kontrastı kazanmanın yolu bu. */ .badge small { display: block; font-weight: 500; color: var(--paper); font-size: 11px; opacity: .85; } /* 9 Ağu 2026: "soon" rozeti artık iOS bekleme listesi formunu açan bir BUTON. değil