fix(tasarim): toast açıklaması okunmuyordu — tema light'a sabit, metin ve düğme tasarım dilinde

Bilal (24 Eyl 2026): "İlk programın listende · 1/24" toast'unun açıklaması okunmuyor. Sebep: sonner temayı next-themes'ten alıyor, sistem koyu temadayken açıklama beyaza yakın griye dönüyor, zemin beyaz kalıyordu. Üründe karanlık mod yok; tema light'a sabitlendi. Başlık slate-900 semibold, açıklama slate-600, aksiyon düğmesi koyu hap (h-9 rounded-full). DESIGN.md §4.16. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
feat(tasarim): liste satırı üniversite logosu 36 → 48 px
2026-09-24 12:45:17 +03:00 · 2026-09-24 12:39:38 +03:00 · 2026-09-24 12:38:47 +03:00
20 changed files with 227 additions and 154 deletions
--- a/docs/tasarim/DESIGN.md
+++ b/docs/tasarim/DESIGN.md
@@ -414,12 +414,23 @@ tablosu bu sabitleri kullanır, sınıfı elle yazmaz.
  sm'den itibaren tür/il/süre satırı adla aynı satıra çıkar (`SATIR_GRUP`); lg'de hücre
  dolgusu `py-3` ve satır düğmeleri 36 px (`SATIR_DUGME_BOYU`, §8 masaüstü tablo istisnası).
  Ölçüm 1280 px, bölüm listesi: 83 → 61 px. Telefonda değişmez (44 px düğme).
- Satırda logo varsa (bölüm sayfası) `UniLogo boy="sm"` adın solunda, `items-start`.
+- Satırda logo varsa (bölüm sayfası, `/sonuc`, rapor listesi) `UniLogo boy="sm"` adın solunda,
+  `items-start`. `sm` = **48 px** (`size-12 rounded-xl`; 36 px'ten büyütüldü — Bilal, 24 Eyl 2026:
+  "listelerde üni logoları çok küçük kalmış"). Çekmecede üniversite satırının içindeki `xs` (28 px)
+  metin içi kalır.
 - Program varyantı ("… (İngilizce) (Burslu)") adın altında ayrı satır
  `mt-0.5 block text-sm leading-snug text-slate-600`; tür çipine yapıştırılıp kesilmez.
 - Tür çipi devlet/vakıf için de aynı slate çip; vakıf violet değildir (§2.2).
 - Tablo başlığı `h-12 text-sm font-semibold text-slate-500`; hücre dolgusu `py-4 pl-4 sm:pl-5`.

+### 4.16 Bildirim (toast) — `src/components/ui/sonner.tsx` + `globals.css`
+Tema **light'a sabit** (karanlık mod yok, §1.2): sistem koyu temadayken sonner açıklamayı beyaza
+yakın griye çevirip beyaz zeminde okunmaz ediyordu (Bilal, 24 Eyl 2026: "toast açıklaması
+okunmuyor"). Kutu `rounded-2xl border-slate-200`; başlık `font-semibold text-slate-900`; açıklama
+`text-slate-600`; aksiyon düğmesi üst çubuktaki koyu hap (`h-9 rounded-full bg-slate-900` beyaz
+yazı, hover `slate-700`). Metin §10.4: ne oldu + ne yapılacak; kilometre taşı toast'ları
+(`program-ekle-butonu.tsx`) tek cümle açıklama + tek aksiyon taşır.
+
 ## 5. Yerleşim

 ### 5.1 Genel
@@ -677,9 +688,11 @@ karar.

 - Zemin `bg-primary` (sitenin mavisi), köşe `rounded-2xl`, yazı beyaz; alt satır da beyaz
  (`text-white`, `slate-300` değil). Piksel dokusu `PixelMasonry` (Bilal, 24 Eyl 2026: "arka
-  planda büyüklü küçüklü, masonry şeklinde"): 1–3 hücrelik kareler 3×3'lük makro hücrelere
-  kaymış düşer, çakışmaz ama hizaya girmez; orta bant (%22–78) boş, kenarlara doğru yoğun; iri
-  kare daha silik; **durağan** — imleç ısı fırçasına katılmaz, üzerine gelince hiçbir şey
+  planda büyüklü küçüklü, masonry şeklinde"): 2–4 hücrelik kareler 4×4'lük makro hücrelere
+  kaymış düşer, çakışmaz ama hizaya girmez. Doku **kabın gerçek ölçüsüne göre** üretilir
+  (ResizeObserver; sabit çizimi ölçeklemek yüksek kartlarda görünen kısmı boş banda düşürüyordu,
+  24 Eyl 2026'da yaşandı): kısa kenarın %30'u kadar kenar çerçevesi kenara doğru yoğunlaşır,
+  orta tamamen boş; küçük kare yok (2–4 hücre), iri kare daha silik; **durağan** — imleç ısı fırçasına katılmaz, üzerine gelince hiçbir şey
  olmaz (Bilal, 24 Eyl 2026); yalnız seyrek turuncu vurgu kareleri kendi kendine yavaşça nefes
  alır. Kap `relative isolate
  overflow-hidden`, doku `-inset-y-6 -z-10`. Eşit ızgaralı eski `PixelField` kaldırıldı.
@@ -691,19 +704,16 @@ karar.
  kart varyantı, "Kendi Listem" çekmecesinin altı (kompakt). Aynı sayfadaki iki band farklı
  `seed` alır.

-**Her CTA benzeri yüzeyin arkasında piksel zemin — `PikselZemin`, `src/components/piksel-zemin.tsx`**
-(Bilal, 24 Eyl 2026: "piksel arka planları her CTA benzeri kısmın arkasında olmalı, masonry gibi
-büyüklü küçüklü"). CTA benzeri yüzey = tek bir aksiyona çağıran kart, bant, boş durum ya da
-sayfa bölümü. Kap `relative isolate overflow-hidden`; zemin ilk çocuk. Açık kartta
-`ton="acik"` (silik mavi, `text-primary/70`), mavi bant ve koyu kartta `ton="koyu"` (beyaz).
-`CtaBandi` ve `PikselCtaYuzeyi` de bunu kullanır. Kapsananlar: `/sonuc` "24 tercihlik listen
-hazır" kartı, `/listem` dört üretim kartı + boş durum + kilit kartı, tadımlık kartı,
-sıralama-yok sayfası, meraklısına kapanış kartı, ana sayfa ve `/paket` ana paket kartı, kaydet
-bandı, katalog üstü kompakt satır, arama penceresi kartı. **Kapsam dışı:** form kartları (giriş,
-ödeme formu), durum kartları (ödeme sonucu), modal düğmeleri, hata/404 sayfası, yan kredi
-kartları — bunlar tek aksiyona çağıran yüzey değil. Yeni bir CTA yüzeyi açan ajan zemini
-ekler ve bu listeye yazar. Band üstündeki ikincil metin `text-white/90`, ince yazı `text-white/70`;
-  `slate-300`/`slate-400` yazılmaz.
+**Piksel zemin yalnız CTA yüzeylerinde — `PikselZemin`, `src/components/piksel-zemin.tsx`**
+(Bilal, 24 Eyl 2026: önce "her CTA benzeri kısmın arkasında olmalı", sonra "/sonuc'taki kartın
+arkasına da piksel koymuşsun; pikseller CTA'larda olacak sadece"). CTA yüzeyi = renkli zeminli
+çağrı yüzeyi: mavi `CtaBandi`, koyu kapanış kartı `PikselCtaYuzeyi`, arama penceresindeki koyu
+kart. Beyaz içerik kartlarına (tadımlık, `/listem` üretim/kilit kartları, paket kartı, kaydet
+bandı, katalog üstü kompakt satır, boş durumlar, sıralama-yok sayfası) **konmaz** — 24 Eyl'de
+denendi ve geri alındı. Kap `relative isolate overflow-hidden`; zemin ilk çocuk; kareler beyaz.
+Doku kabın gerçek ölçüsüne göre üretilir: yalnız kenar çerçevesinde (kısa kenarın %30'u), orta
+tamamen boş; **küçük kare yok**, 2–4 hücrelik (17/27/37 px) kareler, iri olan seyrek ve daha
+silik (Bilal: "çok fazla piksel, küçük olanlar hiç olmasın").

 **Kapanış yüzeyi — `PikselCtaYuzeyi`, `src/components/piksel-cta-yuzeyi.tsx` (yalnız ana
 sayfa kapanışı "Tercih listen, pişmanlık listesi olmasın").** Bilal'in kararı (24 Eyl 2026):
@@ -719,10 +729,9 @@ yok** (Bilal, 24 Eyl 2026: kaldırıldı); `FUNNEL_METINLERI` yalnız arama penc
  nabız atar (`kt-piksel-nabiz`). Hareketi azalt: dolu, durağan. Renk her zaman
  `PikselListeAciklama` metniyle.
 - Piksel tablosunun arkası boş kalır (Bilal, 24 Eyl 2026: "arkasına çok piksel yığılmış"):
-  telefon/tablette liste üstte ortada, dokunun boş bandında; `lg`'de liste sağ sütunda olduğu
-  için doku yalnız sol %16'da ve seyrek (`PikselZemin bosBant={[0.16, 1]} yogunluk={0.7}`).
-  Kural genel: bir kreatif ya da iri sayı piksel zeminin üstüne geliyorsa `bosBant` ile o
-  bölge boşaltılır; doku ile kreatif üst üste binmez.
+  tablo kabı `haric` ile zemine verilir, doku onun çevresini (14 px payla) her genişlikte boş
+  bırakır. Kural genel: bir kreatif ya da iri sayı piksel zeminin üstüne geliyorsa `haric` ile
+  boşaltılır; doku ile kreatif üst üste binmez.
 - Bu yüzey **sayfada bir kez** ve yalnız kapanışta durur; ara paneller ve çekmece mavi banttır.
  Yeni bir kreatif fikri (veriyi piksele çeviren, imlece tepki veren) önce burada denenir.
 - Çekmece başlığında denenen "gerçek liste" pikseli (12×2, her kare tercihin riski) **kaldırıldı**:
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -321,3 +321,31 @@
 .kt-piksel-nabiz {
  animation: kt-piksel-nabiz 0.42s cubic-bezier(0.23, 1, 0.32, 1);
 }
+
+/* Bildirim (toast, sonner) — DESIGN.md §4.16. Başlık ve açıklama slate
+   tonlarında okunur; aksiyon düğmesi üst çubuktaki koyu hap dilinde.
+   ".toaster" öneki şart: sonner kendi stilini çalışma anında enjekte eder,
+   aynı özgüllükteki kural onun altında kalır. */
+.toaster [data-sonner-toast][data-styled="true"] {
+  border-radius: 1rem;
+  border-color: var(--color-slate-200);
+}
+.toaster [data-sonner-toast][data-styled="true"] [data-title] {
+  font-weight: 600;
+  color: var(--color-slate-900);
+}
+.toaster [data-sonner-toast][data-styled="true"] [data-description] {
+  color: var(--color-slate-600);
+}
+.toaster [data-sonner-toast][data-styled="true"] [data-button] {
+  height: 2.25rem;
+  padding-inline: 0.875rem;
+  border-radius: 9999px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #fff;
+  background: var(--color-slate-900);
+}
+.toaster [data-sonner-toast][data-styled="true"] [data-button]:hover {
+  background: var(--color-slate-700);
+}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -28,7 +28,6 @@ import {
  SectionEyebrow,
 } from "@/components/pixel-decor";
 import { PikselCtaYuzeyi } from "@/components/piksel-cta-yuzeyi";
-import { PikselZemin } from "@/components/piksel-zemin";
 import { MAX_REVIZYON, URUNLER } from "@/lib/credits";
 import { VERI_YIL_SAYISI } from "@/lib/veri-kapsami";
 import {
@@ -555,9 +554,8 @@ export default function Home() {
            >
              <Reveal
                delay={0.08}
-                className="relative isolate overflow-hidden rounded-2xl border-2 border-orange-500 bg-white p-8 shadow-sm"
+                className="rounded-2xl border-2 border-orange-500 bg-white p-8 shadow-sm"
              >
-                <PikselZemin seed={43} />
                <div className="flex flex-wrap items-baseline justify-between gap-2">
                  <h3 className="font-heading text-xl font-bold">
                    {URUNLER.paket.label}
--- a/src/components/arama-funnel-karti.tsx
+++ b/src/components/arama-funnel-karti.tsx
@@ -73,7 +73,7 @@ export function AramaFunnelKarti({ onSec }: { onSec: () => void }) {
      aria-label="Tercih listeni kur"
      className="relative isolate mt-5 overflow-hidden rounded-2xl border border-blue-400/20 bg-slate-950 px-4 py-5 text-white sm:px-5"
    >
-      <PikselZemin seed={61} ton="koyu" />
+      <PikselZemin seed={61} />
      <div className="grid items-center gap-4 sm:grid-cols-[minmax(0,1fr)_auto] sm:gap-5">
        <div className="min-w-0">
          <TypingAnimation
--- a/src/components/cta-bandi.tsx
+++ b/src/components/cta-bandi.tsx
@@ -44,7 +44,7 @@ export function CtaBandi({
      )}
      {...props}
    >
-      <PikselZemin seed={seed} ton="koyu" className={buyuk ? "-inset-y-10" : undefined} />
+      <PikselZemin seed={seed} className={buyuk ? "-inset-y-10" : undefined} />
      {children}
    </Etiket>
  );
--- a/src/components/piksel-cta-yuzeyi.tsx
+++ b/src/components/piksel-cta-yuzeyi.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { useState, type ReactNode } from "react";
+import { useRef, useState, type ReactNode } from "react";
 import { cn } from "@/lib/utils";
 import { PikselZemin } from "@/components/piksel-zemin";
 import { PikselListe, PikselListeAciklama } from "@/components/piksel-liste";
@@ -13,9 +13,6 @@ import { PikselListe, PikselListeAciklama } from "@/components/piksel-liste";
 * düğmeye ya da linke imleç/odak gelince 24 kare birden dolar — "listen
 * böyle hazır olur". Yazılıp silinen satır yok (Bilal, 24 Eyl 2026).
 */
-// Geniş ekranda doku yalnız genişliğin ilk %16'sında (metnin sol boşluğu)
-const SOL_KENAR: [number, number] = [0.16, 1];
-
 export function PikselCtaYuzeyi({
  children,
  className,
@@ -27,6 +24,9 @@ export function PikselCtaYuzeyi({
  seed?: number;
 }) {
  const [tamamla, setTamamla] = useState(false);
+  // Piksel tablosunun çevresi dokuda boş kalır (Bilal, 24 Eyl 2026:
+  // "tablonun arkasına çok piksel yığılmış"); ölçü gerçek yerleşimden.
+  const listeRef = useRef<HTMLDivElement>(null);

  const hedefMi = (t: EventTarget | null) =>
    t instanceof Element && t.closest("a, button") != null;
@@ -42,23 +42,15 @@ export function PikselCtaYuzeyi({
        className,
      )}
    >
-      {/* Telefon/tablet: liste üstte ortada, dokunun boş bandında. Geniş
-          ekranda liste sağ sütunda — orası tamamen boş kalır, doku yalnız
-          sol kenarda ve seyrek (Bilal, 24 Eyl 2026: "tablonun arkasına çok
-          piksel yığılmış"). */}
-      <PikselZemin seed={seed} ton="koyu" className="-inset-y-10 lg:hidden" />
-      <PikselZemin
-        seed={seed}
-        ton="koyu"
-        bosBant={SOL_KENAR}
-        yogunluk={0.7}
-        className="-inset-y-10 hidden lg:block"
-      />
+      <PikselZemin seed={seed} haric={listeRef} className="-inset-y-10" />
      <div className="grid items-center gap-8 px-5 py-10 sm:px-10 sm:py-12 lg:grid-cols-[minmax(0,1fr)_16rem] lg:gap-12">
        <div className="flex min-w-0 flex-col items-center text-center lg:items-start lg:text-left">
          {children}
        </div>
-        <div className="order-first flex flex-col items-center lg:order-none">
+        <div
+          ref={listeRef}
+          className="order-first flex flex-col items-center lg:order-none"
+        >
          <PikselListe
            tamamla={tamamla}
            className="w-full max-w-[9rem] sm:max-w-[11rem] lg:max-w-[14rem]"
--- a/src/components/piksel-zemin.tsx
+++ b/src/components/piksel-zemin.tsx
@@ -1,31 +1,36 @@
 "use client";

+import type { RefObject } from "react";
 import { PixelMasonry } from "@/components/pixel-decor";
 import { cn } from "@/lib/utils";

 /**
 * CTA yüzeylerinin piksel zemini (DESIGN.md §10.8) — tek kaynak. Bilal'in
- * kararı (24 Eyl 2026): "piksel arka planları her CTA benzeri kısmın
- * arkasında olmalı, masonry gibi büyüklü küçüklü." Kap `relative isolate
- * overflow-hidden` olmalı; zemin ilk çocuk olarak konur.
+ * kararı (24 Eyl 2026): pikseller **yalnız CTA yüzeylerinde** (mavi bant,
+ * kapanış kartı, arama penceresi kartı); beyaz içerik kartlarında değil
+ * ("/sonuc'taki kartın arkasına da piksel koymuşsun; pikseller CTA'larda
+ * olacak sadece"). Beyaz kareler; kap `relative isolate overflow-hidden`
+ * olmalı, zemin ilk çocuk olarak konur.
 *
- * - `acik`: beyaz/açık kart — silik mavi kareler.
- * - `koyu`: mavi bant ya da koyu kart — beyaz kareler.
+ * Doku kabın gerçek ölçüsüne göre üretilir; kenar çerçevesi yoğun, orta
+ * seyrek. Üstünde kreatif ya da iri sayı varsa `haric` ile o öğe verilir,
+ * çevresi boş kalır.
 */
 export function PikselZemin({
  seed = 7,
-  ton = "acik",
-  bosBant,
  yogunluk,
+  kenar,
+  haric,
  className,
 }: {
  /** Aynı ekrandaki iki yüzey farklı desen alsın */
  seed?: number;
-  ton?: "acik" | "koyu";
-  /** Boş bırakılacak yatay bant (varsayılan orta %22–78); bkz. PixelMasonry */
-  bosBant?: [number, number];
-  /** Doluluk çarpanı */
+  /** Doluluk çarpanı (1 varsayılan) */
  yogunluk?: number;
+  /** Kenar çerçevesinin genişliği, kısa kenarın oranı (0.3 varsayılan) */
+  kenar?: number;
+  /** Çevresi boş bırakılacak öğe */
+  haric?: RefObject<HTMLElement | null>;
  /** Dikey taşma payı vb. (varsayılan `-inset-y-6`) */
  className?: string;
 }) {
@@ -33,12 +38,16 @@ export function PikselZemin({
    <div
      aria-hidden
      className={cn(
-        "pointer-events-none absolute inset-x-0 -inset-y-6 -z-10",
-        ton === "acik" ? "text-primary/70" : "text-white",
+        "pointer-events-none absolute inset-x-0 -inset-y-6 -z-10 text-white",
        className,
      )}
    >
-      <PixelMasonry seed={seed} bosBant={bosBant} yogunluk={yogunluk} />
+      <PixelMasonry
+        seed={seed}
+        yogunluk={yogunluk}
+        kenar={kenar}
+        haric={haric}
+      />
    </div>
  );
 }
--- a/src/components/pixel-decor.tsx
+++ b/src/components/pixel-decor.tsx
@@ -1,6 +1,14 @@
 "use client";

-import { useMemo, useRef, type CSSProperties, type ReactNode } from "react";
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+  type RefObject,
+} from "react";
 import { cn } from "@/lib/utils";
 import { usePixelHeat } from "@/components/use-pixel-heat";

@@ -74,41 +82,86 @@ function pixelRect(
 /**
 * CTA yüzeylerinin piksel zemini: büyüklü küçüklü kareler, masonry gibi
 * hafif kaymış (Bilal, 24 Eyl 2026: "arka planda büyüklü küçüklü, masonry
- * şeklinde"). İçeriğin oturduğu orta bant boş kalır; kareler kenarlara doğru
- * yoğunlaşır. 3×3 hücrelik makro hücrelere 1–3 hücrelik tek kare düşer ve
- * makro hücre içinde kaydırılır: kareler çakışmaz ama hizaya da girmez
- * (§1.1 "doğal duruş"). Durağan zemin: imleç ısı fırçasına katılmaz
- * (Bilal, 24 Eyl 2026: "üzerine gelindiğinde bir şey olmasın").
+ * şeklinde"). Kabın **gerçek ölçüsüne** göre üretilir (ResizeObserver):
+ * sabit bir çizimi kaplayacak şekilde ölçeklemek yüksek kartlarda görünen
+ * kısmı boş banda düşürüyordu ("hiç doku yok"). Yalnız kenar çerçevesinde,
+ * orta tamamen boş; `haric` verilen öğenin (ör. 24'lük piksel tablosu)
+ * çevresi de boş kalır. Küçük (tek hücrelik) kare **yok** (Bilal, 24 Eyl
+ * 2026: "çok fazla piksel, küçük olanlar hiç olmasın"): 4×4 hücrelik makro
+ * hücrelere 2–4 hücrelik tek kare düşer ve makro hücre içinde kaydırılır:
+ * çakışmaz ama hizaya da girmez (§1.1 "doğal duruş"). Durağan zemin:
+ * imleç ısı fırçasına katılmaz.
+ * Sunucuda boş çizilir, ölçülünce belirir (dekor; aria-hidden).
 */
-// Varsayılan boş bant modül sabiti: her render'da yeni dizi olup useMemo'yu
-// boşa düşürmesin (rendering-hoist-jsx)
-const BOS_BANT_VARSAYILAN: [number, number] = [0.22, 0.78];
-
 export function PixelMasonry({
  seed = 7,
-  bosBant = BOS_BANT_VARSAYILAN,
  yogunluk = 1,
+  kenar = 0.3,
+  haric,
  className,
 }: {
  seed?: number;
-  /** Genişliğin bu oranları arasındaki bant boş kalır (içerik orada) */
-  bosBant?: [number, number];
  /** Doluluk çarpanı; 1 varsayılan, 0.6 seyrek */
  yogunluk?: number;
+  /** Kenar çerçevesinin genişliği: kısa kenarın oranı (0.3 = %30) */
+  kenar?: number;
+  /** Çevresi boş bırakılacak öğe (kreatif, iri sayı) */
+  haric?: RefObject<HTMLElement | null>;
  className?: string;
 }) {
-  const COLS = 42;
-  const ROWS = 12;
-  const MAKRO = 3;
+  const svgRef = useRef<SVGSVGElement>(null);
+  const [olcu, setOlcu] = useState<{
+    w: number;
+    h: number;
+    hx: number;
+    hy: number;
+    hw: number;
+    hh: number;
+  } | null>(null);
+
+  useEffect(() => {
+    const svg = svgRef.current;
+    if (!svg) return;
+    const olc = () => {
+      const r = svg.getBoundingClientRect();
+      const hr = haric?.current?.getBoundingClientRect();
+      const sonraki = {
+        w: Math.round(r.width),
+        h: Math.round(r.height),
+        hx: hr ? Math.round(hr.left - r.left) : 0,
+        hy: hr ? Math.round(hr.top - r.top) : 0,
+        hw: hr ? Math.round(hr.width) : 0,
+        hh: hr ? Math.round(hr.height) : 0,
+      };
+      setOlcu((onceki) =>
+        onceki &&
+        onceki.w === sonraki.w &&
+        onceki.h === sonraki.h &&
+        onceki.hx === sonraki.hx &&
+        onceki.hy === sonraki.hy &&
+        onceki.hw === sonraki.hw &&
+        onceki.hh === sonraki.hh
+          ? onceki
+          : sonraki,
+      );
+    };
+    olc();
+    const ro = new ResizeObserver(olc);
+    ro.observe(svg);
+    const h = haric?.current;
+    if (h) ro.observe(h);
+    return () => ro.disconnect();
+  }, [haric]);
+
+  const MAKRO = 4;
+  const PAY = 14; // hariç öğenin çevresinde bırakılan boşluk (px)

-  // Çıktı seed'e göre deterministik; render başına yeniden üretme
  const pixels = useMemo(() => {
-    const cx = (COLS - 1) / 2;
-    const cy = (ROWS - 1) / 2;
-    const maxD = Math.sqrt(cx * cx + cy * cy);
-    const BAND_MIN = COLS * bosBant[0];
-    const BAND_MAX = COLS * bosBant[1];
-
+    if (!olcu || olcu.w === 0 || olcu.h === 0) return null;
+    const { w, h, hx, hy, hw, hh } = olcu;
+    const cols = Math.ceil(w / CELL);
+    const rows = Math.ceil(h / CELL);
+    const kisa = Math.min(w, h);
    const sonuc: ReactNode[] = [];
    let accentIdx = 0;

@@ -141,55 +194,57 @@ export function PixelMasonry({
        );
      }
      // İri kare daha silik: yazının yanında bağırmasın
-      const op = opacityFor(x, y) * (n === 1 ? 1 : n === 2 ? 0.8 : 0.6);
+      const op = opacityFor(x, y) * (n === 2 ? 0.9 : n === 3 ? 0.7 : 0.55);
      return (
        <rect key={key} {...shared} fill="currentColor" fillOpacity={op} />
      );
    };

-    for (let my = 0; my < ROWS / MAKRO; my++) {
-      for (let mx = 0; mx < COLS / MAKRO; mx++) {
+    const haricte = (px: number, py: number) =>
+      hw > 0 &&
+      px >= hx - PAY &&
+      px <= hx + hw + PAY &&
+      py >= hy - PAY &&
+      py <= hy + hh + PAY;
+
+    for (let my = 0; my < rows / MAKRO; my++) {
+      for (let mx = 0; mx < cols / MAKRO; mx++) {
        const ox = mx * MAKRO;
        const oy = my * MAKRO;
-        const mcx = ox + MAKRO / 2;
-        if (mcx > BAND_MIN && mcx < BAND_MAX) continue;
-        // Kenarlara doğru artan doluluk
-        const d = Math.sqrt((mcx - cx) ** 2 + (oy + MAKRO / 2 - cy) ** 2) / maxD;
-        const density = (0.3 + 0.6 * d * d) * yogunluk;
-        if (hash(mx, my, seed) > density) {
-          // Boş makro hücrede ara sıra tek küçük piksel: doku kopmasın
-          if (hash(mx, my, seed + 3) < 0.25 * yogunluk) {
-            const px = ox + Math.floor(hash(mx, my, seed + 4) * MAKRO);
-            const py = oy + Math.floor(hash(mx, my, seed + 5) * MAKRO);
-            sonuc.push(kare(px, py, 1, `k-${mx}-${my}`, false));
-          }
-          continue;
-        }
+        const cxPx = (ox + MAKRO / 2) * CELL;
+        const cyPx = (oy + MAKRO / 2) * CELL;
+        if (haricte(cxPx, cyPx)) continue;
+        // En yakın kenara uzaklık, kısa kenarın oranı olarak (0 kenar, 0.5 orta)
+        const k = Math.min(cxPx, w - cxPx, cyPx, h - cyPx) / kisa;
+        // Yalnız çerçevede, kenara doğru artan doluluk; orta boş
+        if (k >= kenar) continue;
+        const density = (0.06 + 0.5 * (1 - k / kenar) ** 1.6) * yogunluk;
+        if (hash(mx, my, seed) > density) continue;
        const r = hash(mx, my, seed + 7);
-        const n = r < 0.5 ? 1 : r < 0.85 ? 2 : 3;
+        // 2–4 hücre: orta boy sık, iri seyrek
+        const n = r < 0.5 ? 2 : r < 0.85 ? 3 : 4;
        const serbest = MAKRO - n;
        const kx = ox + Math.floor(hash(mx, my, seed + 11) * (serbest + 1));
        const ky = oy + Math.floor(hash(mx, my, seed + 13) * (serbest + 1));
-        const accent = n < 3 && hash(mx, my, seed + 99) > 0.94;
+        const accent = n === 2 && hash(mx, my, seed + 99) > 0.95;
        sonuc.push(kare(kx, ky, n, `m-${mx}-${my}`, accent));
-        // Büyük karenin yanına küçük bir eş: büyüklü küçüklü ritim
-        if (n < 3 && hash(mx, my, seed + 17) < 0.45) {
-          const ex = kx + n < ox + MAKRO ? kx + n : kx - 1;
-          const ey = ky + n < oy + MAKRO ? ky + n : ky - 1;
-          if (ex >= ox && ey >= oy) sonuc.push(kare(ex, ey, 1, `e-${mx}-${my}`, false));
-        }
      }
    }
    return sonuc;
-  }, [seed, bosBant, yogunluk]);
+  }, [olcu, seed, yogunluk, kenar]);

  return (
    <svg
-      viewBox={`0 0 ${COLS * CELL} ${ROWS * CELL}`}
-      preserveAspectRatio="xMidYMid slice"
+      ref={svgRef}
+      viewBox={olcu ? `0 0 ${olcu.w} ${olcu.h}` : undefined}
+      preserveAspectRatio="xMinYMin slice"
      aria-hidden="true"
      focusable="false"
-      className={cn("h-full w-full", className)}
+      className={cn(
+        "h-full w-full transition-opacity duration-500 motion-reduce:transition-none",
+        pixels ? "opacity-100" : "opacity-0",
+        className,
+      )}
    >
      {pixels}
    </svg>
--- a/src/components/ui/sonner.tsx
+++ b/src/components/ui/sonner.tsx
@@ -1,15 +1,18 @@
 "use client"

-import { useTheme } from "next-themes"
 import { Toaster as Sonner, type ToasterProps } from "sonner"
 import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon } from "lucide-react"

+/**
+ * Bildirimler (DESIGN.md §4.16). Tema "light"e sabit: üründe karanlık mod
+ * yok (§1.2); sistem koyu temadayken sonner açıklamayı beyaza yakın griye
+ * çevirip beyaz zeminde okunmaz hâle getiriyordu (Bilal, 24 Eyl 2026:
+ * "toast açıklaması okunmuyor"). Metin ve buton renkleri globals.css'te.
+ */
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme()
-
  return (
    <Sonner
-      theme={theme as ToasterProps["theme"]}
+      theme="light"
      className="toaster group"
      icons={{
        success: (
--- a/src/components/uni-logo.tsx
+++ b/src/components/uni-logo.tsx
@@ -9,17 +9,19 @@ import { turkishSlugify } from "@/lib/slug";
 * kapsayıcı hem şeffaf hem beyaz arka planlı logolarda tutarlı görünür.
 */

+// sm = liste satırı logosu. 36 px'ten 48 px'e (Bilal, 24 Eyl 2026:
+// "listelerde üni logoları çok küçük kalmış"); md bir kademe üstü.
 const BOYUT: Record<"xs" | "sm" | "md" | "lg", string> = {
  xs: "size-7 rounded-md p-0.5",
-  sm: "size-9 rounded-lg p-1",
-  md: "size-12 rounded-xl p-1.5",
+  sm: "size-12 rounded-xl p-1.5",
+  md: "size-14 rounded-xl p-1.5",
  lg: "size-16 rounded-2xl p-2 sm:size-20",
 };

 const MONOGRAM_METIN: Record<"xs" | "sm" | "md" | "lg", string> = {
  xs: "text-xs",
-  sm: "text-xs",
-  md: "text-sm",
+  sm: "text-sm",
+  md: "text-base",
  lg: "text-lg sm:text-xl",
 };

@@ -73,7 +75,7 @@ export function UniLogo({
  const anahtar =
    slug ?? turkishSlugify(ad.replace(/\s*\([^)]*\)\s*$/, "").trim());
  const yol = uniLogoYolu(anahtar);
-  const px = boy === "lg" ? 80 : boy === "md" ? 48 : boy === "sm" ? 36 : 28;
+  const px = boy === "lg" ? 80 : boy === "md" ? 56 : boy === "sm" ? 48 : 28;

  if (!yol) {
    const h = tonu(anahtar);
--- 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>