From cc46244206f16dd6d5e431ca9209a4ae838211af Mon Sep 17 00:00:00 2001
From: bilalgursen <bilalgursen777@gmail.com>
Date: Tue, 22 Sep 2026 01:08:01 +0300
Subject: [PATCH] =?UTF-8?q?fix(ui):=20iPad'de=20progressive=20blur=20kayd?=
 =?UTF-8?q?=C4=B1rmada=20ortaya=20kaym=C4=B1yor?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Site geneli üst/alt blur katmanları `position: fixed` + `backdrop-filter`
taşıyordu. iOS/iPadOS WebKit (iPad'de Chrome da WebKit) bu birleşimde
bulanıklığı ayrı kompozit katmana alıp scroll sırasında bayat kaydırma
konumuyla çiziyor; katman ekranın ortasında şerit gibi görünüyordu.

Katmanların stili skiper-ui bileşeninin inline stilinden globals.css'teki
`.kt-sayfa-blur`a taşındı (inline stil `@supports` ile ezilemiyordu).
`@supports (-webkit-touch-callout: none)` yalnızca iOS/iPadOS'ta eşleşir —
masaüstü Safari dahil başka hiçbir tarayıcıda desteklenmez — ve orada
bulanıklık + maske düşer, degrade fade korunur. Geometri (112px, z-40,
print:hidden) ve diğer tarayıcılardaki görüntü değişmedi.

Katalogdaki ProgressiveBlur kullanımları `absolute` olduğu için bu hatadan
etkilenmiyor; bileşen onlar için olduğu gibi kaldı.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/app/globals.css | 51 ++++++++++++++++++++++++++++++++++++++++++++-
 src/app/layout.tsx  | 24 ++++++---------------
 2 files changed, 56 insertions(+), 19 deletions(-)

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({
     >
       <body className="min-h-dvh flex flex-col bg-slate-50">
         <HeaderGate>
-          {/* Site geneli progressive blur — üst ve alt */}
-          <div className="pointer-events-none fixed inset-x-0 top-0 z-40 h-28 print:hidden">
-            <ProgressiveBlur
-              position="top"
-              backgroundColor="#f8fafc"
-              height="112px"
-              blurAmount="6px"
-            />
-          </div>
-          <div className="pointer-events-none fixed inset-x-0 bottom-0 z-40 h-28 print:hidden">
-            <ProgressiveBlur
-              position="bottom"
-              backgroundColor="#f8fafc"
-              height="112px"
-              blurAmount="6px"
-            />
-          </div>
+          {/* 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. */}
+          <div className="kt-sayfa-blur kt-sayfa-blur-ust print:hidden" aria-hidden />
+          <div className="kt-sayfa-blur kt-sayfa-blur-alt print:hidden" aria-hidden />
           <SiteTopBanner />
           <SiteHeader />
         </HeaderGate>