diff --git a/src/app/globals.css b/src/app/globals.css index d84a774..6cee40b 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -253,4 +253,53 @@ html { @apply font-sans; } -} \ No newline at end of file +} +/* Site geneli üst/alt progressive blur katmanları (root layout). + Kendi CSS'iyle yazılır çünkü bu iki katman `position: fixed` + `backdrop-filter` + birleşimini taşıyan tek yer: iOS/iPadOS WebKit bu birleşimde bulanıklığı ayrı + bir kompozit katmana alıp kaydırma sırasında bayat scroll konumuyla çiziyor, + katman ekranın ortasında bir şerit gibi görünüyor (22 Eyl 2026, iPad + Chrome + raporu — Chrome iOS da WebKit'tir, hata Safari'yle aynı). Aşağıdaki @supports + bloğu yalnızca iOS/iPadOS'ta eşleşir (`-webkit-touch-callout` başka hiçbir + tarayıcıda desteklenmez; masaüstü Safari dahil) ve orada bulanıklık + maske + düşer, degrade fade kalır. Katalogdaki ProgressiveBlur kullanımları `absolute` + olduğu için bu hatadan etkilenmiyor; onlar bileşende kalır. */ +.kt-sayfa-blur { + position: fixed; + inset-inline: 0; + z-index: 40; + height: 7rem; + pointer-events: none; + user-select: none; + -webkit-user-select: none; + -webkit-backdrop-filter: blur(6px); + backdrop-filter: blur(6px); +} + +/* Degrade: ekran kenarında gövde zemini (bg-slate-50), içeriye doğru şeffaf. + Maske bulanıklığı aynı yönde söndürür — sert kenar kalmaz. */ +.kt-sayfa-blur-ust { + top: 0; + background: linear-gradient(to top, transparent, #f8fafc); + -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent); + mask-image: linear-gradient(to bottom, #000 50%, transparent); +} + +.kt-sayfa-blur-alt { + bottom: 0; + background: linear-gradient(to bottom, transparent, #f8fafc); + -webkit-mask-image: linear-gradient(to top, #000 50%, transparent); + mask-image: linear-gradient(to top, #000 50%, transparent); +} + +@supports (-webkit-touch-callout: none) { + .kt-sayfa-blur { + -webkit-backdrop-filter: none; + backdrop-filter: none; + } + .kt-sayfa-blur-ust, + .kt-sayfa-blur-alt { + -webkit-mask-image: none; + mask-image: none; + } +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index c273ca2..8f6d541 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -9,7 +9,6 @@ import { ListeCekmecesiLazy } from "@/features/liste/components/liste-cekmecesi- import { KaydetBannerLazy } from "@/features/liste/components/kaydet-banner-lazy"; import { TercihProfiliKapisiLazy } from "@/features/liste/components/tercih-profili-kapisi-lazy"; import { HeaderGate } from "@/components/header-gate"; -import { ProgressiveBlur } from "@/components/ui/skiper-ui/skiper41"; import { DevPanelMount } from "@/components/dev/dev-panel-mount"; import { JsonLd, organizationJsonLd, webSiteJsonLd, SITE_URL } from "@/lib/seo"; import "./globals.css"; @@ -84,23 +83,12 @@ export default function RootLayout({ > - {/* Site geneli progressive blur — üst ve alt */} -
- -
-
- -
+ {/* Site geneli progressive blur — üst ve alt. Stil globals.css'te + (.kt-sayfa-blur): iOS/iPadOS'ta fixed + backdrop-filter katmanı + kaydırmada ekranın ortasına kayıyor, orada bulanıklık @supports + ile düşürülüp degrade fade korunuyor. */} +
+