fix(tasarim): piksel zemin yalnız CTA yüzeylerinde, kabın ölçüsüne göre, küçük kare yok

Bilal (24 Eyl 2026): ana sayfa CTA'sında doku hiç görünmüyordu, bazı kartlarda çok azdı; sonra "çok fazla piksel, küçük olanlar hiç olmasın" ve "/sonuc'taki kartın arkasına da piksel koymuşsun; pikseller CTA'larda olacak sadece". - Kök neden: PixelMasonry sabit 420×120 çizimi kaplayacak şekilde ölçekleniyordu; yüksek kartlarda görünen kısım boş banda düşüyordu. Artık kabın gerçek ölçüsüne göre üretiliyor (ResizeObserver), yalnız kenar çerçevesinde, orta boş; `haric` verilen öğenin (24'lük piksel tablosu) çevresi her genişlikte boş. Sunucuda boş, ölçülünce belirir. - Küçük (tek hücre) kare yok: 4×4 makro hücrede 2–4 hücrelik kareler, iri olan seyrek ve silik. Ölçüm: kapanış kartı 1280 px'te 58 kare (tabloya binen 0), 375 px'te 27 kare. - Beyaz içerik kartlarından zemin geri alındı (tadımlık, /listem üretim ve kilit kartları, boş durum, sıralama-yok, meraklısına, paket kartları, kaydet bandı, katalog üstü kompakt satır, /sonuc "listen hazır"). Kalanlar: CtaBandi, PikselCtaYuzeyi, arama penceresi kartı. PikselZemin'in açık tonu kaldırıldı. DESIGN.md §10.8 güncellendi. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
2026-09-24 12:38:47 +03:00
parent c90c186b86
commit 613d9e012a
17 changed files with 173 additions and 144 deletions
--- a/src/features/liste/components/kaydet-banner.tsx
+++ b/src/features/liste/components/kaydet-banner.tsx
@@ -6,7 +6,6 @@
 // hariç her yerde görünür; kapatma oturum boyunca kalıcıdır (sessionStorage).
 // Exit-intent/agresif popup YOK (PRD kuralı).

-import { PikselZemin } from "@/components/piksel-zemin";
 import { useEffect, useState } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
@@ -61,9 +60,8 @@ export function KaydetBanner() {
          ref={gorunumRef}
          // Telefonda metin kendi satırında, düğme altında tam genişlik:
          // yan yana dizince başlık kelime kelime kırılıyordu (375 px).
-          className="pointer-events-auto relative isolate mx-auto flex max-w-xl flex-wrap items-center gap-3 overflow-hidden rounded-2xl border border-slate-200 bg-white p-4 pr-14 shadow-xl sm:flex-nowrap sm:gap-4"
+          className="pointer-events-auto relative mx-auto flex max-w-xl flex-wrap items-center gap-3 rounded-2xl border border-slate-200 bg-white p-4 pr-14 shadow-xl sm:flex-nowrap sm:gap-4"
        >
-          <PikselZemin seed={47} />
          {/* Kullanıcının o anki işletim sisteminin logosu: "bu tarayıcıda"
              mesajını somutlaştırır */}
          <div className="flex size-10 shrink-0 items-center justify-center rounded-xl border border-slate-200 bg-slate-50 text-slate-700">
--- a/src/features/odeme/components/paket-satinal.tsx
+++ b/src/features/odeme/components/paket-satinal.tsx
@@ -1,4 +1,3 @@
-import { PikselZemin } from "@/components/piksel-zemin";
 import { Suspense } from "react";
 import Image from "next/image";
 import Link from "next/link";
@@ -59,8 +58,7 @@ export function PaketSatinAl() {
      className="mt-10 grid gap-6 sm:grid-cols-[1fr_auto]"
    >
      {/* Ana paket */}
-      <section className="relative isolate overflow-hidden rounded-2xl border-2 border-orange-500 bg-white p-8 shadow-sm">
-        <PikselZemin seed={43} />
+      <section className="rounded-2xl border-2 border-orange-500 bg-white p-8 shadow-sm">
        <div className="flex items-baseline justify-between">
          <h2 className="font-heading text-xl font-bold">
            Tercih Dönemi Paketi
--- a/src/features/pazarlama/components/meraklisina-demo.tsx
+++ b/src/features/pazarlama/components/meraklisina-demo.tsx
@@ -7,7 +7,6 @@
 // context'ten okur. (Sihirbaz hunisi statik bir şemayla anlatılır — bkz.
 // huni-semasi.tsx.)

-import { PikselZemin } from "@/components/piksel-zemin";
 import {
  createContext,
  useContext,
@@ -235,8 +234,7 @@ export function DemoKapanisCta() {
  const profil = useTercihProfili();

  return (
-    <div className="relative isolate overflow-hidden rounded-2xl border border-slate-200 bg-white p-6 text-center">
-      <PikselZemin seed={41} />
+    <div className="rounded-2xl border border-slate-200 bg-white p-6 text-center">
      <p className="font-heading text-base font-bold text-slate-900">
        {profil
          ? "Kuralları öğrendin — sayılar zaten senin sıralamanla hesaplandı."
--- a/src/features/rapor/components/liste-uretici.tsx
+++ b/src/features/rapor/components/liste-uretici.tsx
@@ -22,7 +22,6 @@
 // Kural: action cevabının hemen ardından yönlendiriciye TEK aksiyon gönder
 // (router.replace); ikinci aksiyon (refresh) ancak o gezinme bitince.

-import { PikselZemin } from "@/components/piksel-zemin";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
@@ -265,8 +264,7 @@ export function ListeUretici({
    // Paketli kullanıcıya paket satma: onun ürünü top-up. Liste ve sohbet
    // geçmişi kalıcı; kredi yükleyince kaldığı yerden devam eder.
    return (
-      <section className="relative isolate mx-auto w-full max-w-2xl overflow-hidden rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
-        <PikselZemin seed={23} />
+      <section className="mx-auto w-full max-w-2xl rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
        <Lock className="mx-auto size-8 text-slate-400" aria-hidden />
        <h1 className="mt-4 font-heading text-xl font-bold">
          Kredin bu liste için yetmiyor
@@ -296,8 +294,7 @@ export function ListeUretici({

  if (durum.ad === "hata") {
    return (
-      <section className="relative isolate mx-auto w-full max-w-2xl overflow-hidden rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
-        <PikselZemin seed={23} />
+      <section className="mx-auto w-full max-w-2xl rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
        <h1 className="font-heading text-xl font-bold">Liste kurulamadı</h1>
        <p className="mx-auto mt-2 max-w-md text-sm text-slate-600">
          {durum.mesaj}
@@ -347,8 +344,7 @@ function SunucuYokEkrani() {
  }

  return (
-    <section className="relative isolate mx-auto w-full max-w-2xl overflow-hidden rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
-        <PikselZemin seed={23} />
+    <section className="mx-auto w-full max-w-2xl rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
      <h1 className="font-heading text-xl font-bold">
        Listen hazır, sunucuya şu an ulaşamıyoruz
      </h1>
@@ -379,8 +375,7 @@ function SunucuYokEkrani() {
 *  "Tekrar dene" yok: tekrar taze requestId üretip ikinci üretimi başlatırdı. */
 function SuruyorEkrani() {
  return (
-    <section className="relative isolate mx-auto w-full max-w-2xl overflow-hidden rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
-        <PikselZemin seed={23} />
+    <section className="mx-auto w-full max-w-2xl rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
      <h1 className="font-heading text-xl font-bold">Listen zaten hazırlanıyor</h1>
      <p className="mx-auto mt-2 max-w-md text-sm text-slate-600">
        Bunu başka bir sekmede başlatmışsın. İki kez kurmayalım — kredin bu
--- a/src/features/rapor/components/listem-govde.tsx
+++ b/src/features/rapor/components/listem-govde.tsx
@@ -4,7 +4,6 @@
 // ekranda. Harita ⇄ liste köprüsü (pinden satıra, satırdan haritaya) ve
 // paketsiz paywall kartları burada; veri çekimi sunucuda (page.tsx) kalır.

-import { PikselZemin } from "@/components/piksel-zemin";
 import { useMemo, useRef, useState } from "react";
 import Link from "next/link";
 import {
@@ -338,9 +337,8 @@ export function ListemGovde({

            <section
              ref={kilitKartRef}
-              className="relative isolate overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm"
+              className="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm"
            >
-              <PikselZemin seed={59} />
              <div className="border-b border-slate-100 p-6">
                <h3 className="font-heading text-xl font-bold tracking-tight">
                  Tablo ücretsiz.
--- a/src/features/rapor/components/listem-icerik.tsx
+++ b/src/features/rapor/components/listem-icerik.tsx
@@ -19,7 +19,6 @@ import { raporMaskele, ACIK_SATIR } from "@/lib/rapor-maske";
 import type { Mesaj } from "./sohbet-client";
 import { ListemGovde } from "./listem-govde";
 import { ListemBosCta } from "./listem-bos-cta";
-import { PikselZemin } from "@/components/piksel-zemin";
 import { ListeUretici } from "./liste-uretici";
 import { UretimBasladiOlayi } from "./uretim-basladi-olayi";

@@ -66,8 +65,7 @@ export async function ListemIcerik({

  if (!raporVar) {
    const bosDurum = (
-      <section className="relative isolate mx-auto flex max-w-2xl flex-col items-center overflow-hidden px-4 py-16 text-center">
-        <PikselZemin seed={29} />
+      <section className="mx-auto flex max-w-2xl flex-col items-center px-4 py-16 text-center">
        <Sparkles className="size-10 text-primary" aria-hidden />
        <h1 className="mt-4 font-heading text-2xl font-bold">
          Henüz Yapay Zeka listen yok
--- a/src/features/rapor/components/tadimlik-satiri.tsx
+++ b/src/features/rapor/components/tadimlik-satiri.tsx
@@ -8,7 +8,6 @@
 // varsa /api/tadimlik'ten kategoriye özel satır çekilip yerinde değiştirilir
 // (seçim sunucuda kalır). Havuzda içerik yoksa hiç render edilmez.

-import { PikselZemin } from "@/components/piksel-zemin";
 import { useEffect, useRef, useState } from "react";
 import Link from "next/link";
 import { ArrowRight } from "lucide-react";
@@ -151,8 +150,7 @@ export function TadimlikSatiri({
        </p>
      </div>

-      <div className="relative isolate mt-6 overflow-hidden rounded-2xl border border-slate-200 bg-white p-4 shadow-sm sm:p-6">
-        <PikselZemin seed={31} />
+      <div className="mt-6 rounded-2xl border border-slate-200 bg-white p-4 shadow-sm sm:p-6">
        {/* Rapor listesinin satırıyla aynı düzen (§4.15): ad sarar,
            üniversite adı altında, taban sıra sağda iri. */}
        <div className="flex items-start gap-3">
--- a/src/features/sihirbaz/components/cta-sira-form.tsx
+++ b/src/features/sihirbaz/components/cta-sira-form.tsx
@@ -23,7 +23,6 @@ import { authClient } from "@/lib/auth-client";
 import { olay, siraKovasi } from "@/lib/analitik";
 import { cn } from "@/lib/utils";
 import { CtaBandi } from "@/components/cta-bandi";
-import { PikselZemin } from "@/components/piksel-zemin";
 import { onbellekliJsonGetir } from "@/lib/istek-cache";
 import { useTercihProfili } from "@/features/liste/hooks/use-tercih-profili";
 import type { SihirbazFacetleri } from "@/types/yokatlas";
@@ -374,11 +373,10 @@ export function CtaSiraForm({
      <section
        aria-labelledby={baslikId}
        className={cn(
-          "relative isolate overflow-hidden rounded-2xl border p-4 transition-colors duration-200 sm:p-5",
+          "rounded-2xl border p-4 transition-colors duration-200 sm:p-5",
          profil ? "border-primary/20 bg-primary/5" : "border-slate-200 bg-white",
        )}
      >
-        <PikselZemin seed={53} />
        <div className="grid">
          <div
            ref={profil ? undefined : formRef}
--- a/src/features/sihirbaz/components/sihirbaz-cagri-karti.tsx
+++ b/src/features/sihirbaz/components/sihirbaz-cagri-karti.tsx
@@ -8,7 +8,6 @@ import { animate } from "motion/mini";
 import { useReducedMotion } from "motion/react";
 import { Button } from "@/components/ui/button";
 import { CtaBandi } from "@/components/cta-bandi";
-import { PikselZemin } from "@/components/piksel-zemin";
 import { useGorunumOlayi } from "@/components/use-gorunum-olayi";
 import { olay, olayBirKez, siraKovasi } from "@/lib/analitik";
 import type { SihirbazFacetleri } from "@/types/yokatlas";
@@ -263,8 +262,7 @@ export function SihirbazBolumu({
          edilmez; panel yalnızca funnel CTA'larını gösterir, üretim ve
          listenin kendisi /listem'de yaşar. */}
      {raporVar ? (
-        <section className="relative isolate mt-16 overflow-hidden rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
-          <PikselZemin seed={21} />
+        <section className="mt-16 rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
          <h2 className="font-heading text-2xl font-bold sm:text-3xl">
            24 tercihlik listen hazır
          </h2>
--- a/src/features/sihirbaz/components/sira-gerekli.tsx
+++ b/src/features/sihirbaz/components/sira-gerekli.tsx
@@ -4,7 +4,6 @@
 // sayfayı tazele (URL değişmez); yoksa kapıyı aç. Sıra bilgisi localStorage'daki
 // TercihProfili ile tüm uygulamada ortak, sunucu tablosu çerezden okur.

-import { PikselZemin } from "@/components/piksel-zemin";
 import { useEffect } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
@@ -43,8 +42,7 @@ export function SiraGerekli() {
  }

  return (
-    <main className="relative isolate mx-auto flex max-w-2xl flex-col items-center overflow-hidden px-4 py-24 text-center">
-      <PikselZemin seed={37} />
+    <main className="mx-auto flex max-w-2xl flex-col items-center px-4 py-24 text-center">
      <h1 className="font-heading text-3xl font-bold text-balance text-slate-900 sm:text-4xl">
        Önce sıralamanı gir
      </h1>