fix(tasarim): karşılaştırma tablosu kaymıyor; çekmecede tek çarpı; bildirimler eski hâlinde

- Ana sayfa karşılaştırması telefonda/tablette yana kayıyordu: lg altında
  özellik başına satır + üç sütun, sütun adları yapışık (96/128 px, ölçüldü);
  lg'de tablo, taşma yok
- Liste çekmecesinde kapatma çarpısı ile satır çıkarma çarpısı aynı
  görünüyordu: satırda çerçevesiz "−" (CircleMinus)
- Bildirim (toast) görünümündeki değişiklik geri alındı (uyumsuzdu)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

docs/tasarim/2026-09-25-samimi-arayuz-arastirmasi.md

@@ -108,7 +108,7 @@ TL karşılığı açık bir karar olarak Bilal'e bırakıldı (aşağıda).
 |---|---|
 | `/sonuc` | `h1` + tek cümlelik cevap ("85.000. sıradasın… 4.760 program sana açık"), liste durumu düğmesi |
 | ＋ ile ekleme | İlk programda ve 24/24'te tek seferlik onay; dolu listede ne yapılacağı |
-| Bildirimler | 16 px başlık, okunur açıklama, sitenin köşesi |
+| Bildirimler | Denendi, geri alındı: sitenin geri kalanıyla uyumsuz duruyordu (Bilal) |
 | Liste çekmecesi | Risk dağılımı metinle, "Listen tamam", güvenli yoksa ipucu, silmede geri al |
 | Sihirbaz | Adlı adımlar (Alan · Şehir · Öncelik), ekran okuyucuya duyuru |
 | Sıralama yok | "Önce sıralamanı gir" + ne işe yaradığı |

docs/tasarim/DESIGN.md

@@ -279,7 +279,8 @@ açılan modal değil. Çekmece kabı ve çarpı `cta-sira-form.tsx`'teki çekme
 - **Liste çekmecesi** (`liste-cekmecesi.tsx`, 24 Eyl 2026): başlık aynı düzende (temizle
   düğmesi çarpıyla aynı sınıf setinde solda). Satırlar çerçeveli kart değil, düz liste satırı
   (`border-b border-slate-100`); ad §4.15 gibi sarar, risk + taban sıra adın altında, çıkar
-  düğmesi `size-11`. Listeler uzun olduğu için bu çekmece kaydırılır (tek ekran kuralının
+  düğmesi `size-11` **çerçevesiz `CircleMinus`** — çarpı yalnız çekmeceyi kapatır (Bilal, 25 Eyl
+  2026: "2 çarpı var"). Listeler uzun olduğu için bu çekmece kaydırılır (tek ekran kuralının
   tek istisnası); alt bandı telefonda alt alta dizilir ki listeye en az ~280 px kalsın.
 - **Arama motoru uyarısı:** çekmece içeriği sayfa açılırken HTML'de yoktur (kapalıyken
   çizilmez). Google'ın görmesi gereken metin ve **zorunlu atıflar** (ör. URAP sırası + payda +
@@ -419,6 +420,12 @@ Tek satırda üç hap 375 px'e sığmıyordu (418 px, sayfa yana kayıyordu). Te
 `grid w-full grid-cols-3`, hapın içinde ikon+ad üstte, sayı altta; sm'den tek satır. Hap en az
 44 px (`min-h-11`), hover §2.1.
 
+### 5.2.3 Karşılaştırma tablosu (ana sayfa) — yatay kaydırma yok
+Dört sütunlu tablo yalnız `lg`'de. Altında her özellik kendi satırında (başlık ortalı
+`text-base font-semibold`), üç cevap altında üç sütun; KolayTercih sütunu `bg-primary/5`
+kutuda. Sütun adları üstte yapışık: `sticky top-24 sm:top-32` (site başlığı telefonda 96 px,
+sm'den itibaren 128 px — ölçüldü). Bilal, 25 Eyl 2026: "kaydırması gerekiyor, olmamalı".
+
 ### 5.3 Verimli ve havadar
 - İlişkili öğeler yan yana dizilir (iki sütun) — tek sütunda alt alta uzayan panel yapılmaz.
 - Yan yana dizmek "hepsini tek şeride sıkıştırmak" değildir: 23 Eyl'de denenen yatay "bilgi

src/app/page.tsx

@@ -429,45 +429,93 @@ export default function Home() {
                 </p>
               </Reveal>
             </Parallax>
+            {/* Tablo yatay kaydırmaz (DESIGN.md §5.1): lg altında her özellik
+                kendi satırında, üç cevap altında üç sütun; sütun adları
+                üstte yapışık durur (site başlığının hemen altında: telefonda 96 px,
+                sm'den itibaren 128 px — ölçüldü).
+                lg'de klasik dört sütunlu tablo. */}
             <Parallax strength={7} className="mt-12">
-              <Reveal
+              <Reveal delay={0.08}>
-                delay={0.08}
+                <div className="rounded-2xl border border-slate-200/70 bg-white shadow-sm lg:hidden">
-                className="overflow-x-auto rounded-2xl border border-slate-200/70 bg-white shadow-sm"
+                  <div
+                    aria-hidden
+                    className="sticky top-24 z-10 grid grid-cols-3 sm:top-32 gap-2 rounded-t-2xl border-b border-slate-100 bg-white/95 px-3 py-3 text-center text-sm font-semibold text-slate-500 backdrop-blur"
                   >
+                    <span>Robotlar ve botlar</span>
+                    <span>İnsan danışman</span>
+                    <span className="font-heading font-bold text-primary">
+                      KolayTercih
+                    </span>
+                  </div>
+                  <ul className="divide-y divide-slate-100">
+                    {comparison.map((row) => (
+                      <li key={row.feature} className="px-3 py-5">
+                        <p className="px-1 text-center text-base font-semibold leading-snug text-slate-900">
+                          {row.feature}
+                        </p>
+                        <dl className="mt-3 grid grid-cols-3 items-center gap-2 text-center">
+                          <div>
+                            <dt className="sr-only">Robotlar ve botlar</dt>
+                            <dd>
+                              <ComparisonCell value={row.robot} />
+                            </dd>
+                          </div>
+                          <div>
+                            <dt className="sr-only">İnsan danışman</dt>
+                            <dd>
+                              <ComparisonCell value={row.danisman} />
+                            </dd>
+                          </div>
+                          <div className="rounded-xl bg-primary/5 py-2">
+                            <dt className="sr-only">KolayTercih</dt>
+                            <dd>
+                              <ComparisonCell value={row.tercihai} vurgu />
+                            </dd>
+                          </div>
+                        </dl>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+
+                <div className="hidden overflow-hidden rounded-2xl border border-slate-200/70 bg-white shadow-sm lg:block">
                   <Table>
                     <TableHeader>
-                    <TableRow className="bg-slate-50">
+                      <TableRow className="bg-slate-50 hover:bg-slate-50">
-                      <TableHead className="w-[40%]">Özellik</TableHead>
+                        <TableHead className="h-12 w-[40%] pl-5 text-sm font-semibold text-slate-500">
-                      <TableHead className="text-center">
+                          Özellik
-                        Ücretsiz robotlar ve sohbet botları
                         </TableHead>
-                      <TableHead className="text-center">
+                        <TableHead className="h-12 text-center text-sm font-semibold text-slate-500">
+                          Robotlar ve sohbet botları
+                        </TableHead>
+                        <TableHead className="h-12 text-center text-sm font-semibold text-slate-500">
                           İnsan danışman
                         </TableHead>
-                      <TableHead className="text-center font-heading font-bold text-primary">
+                        <TableHead className="h-12 text-center font-heading text-base font-bold text-primary">
                           KolayTercih
                         </TableHead>
                       </TableRow>
                     </TableHeader>
                     <TableBody>
                       {comparison.map((row) => (
-                      <TableRow key={row.feature}>
+                        <TableRow key={row.feature} className="hover:bg-transparent">
-                        <TableCell className="font-medium">
+                          <TableCell className="whitespace-normal py-4 pl-5 text-base font-semibold text-slate-900">
                             {row.feature}
                           </TableCell>
-                        <TableCell className="text-center">
+                          <TableCell className="whitespace-normal py-4 text-center">
                             <ComparisonCell value={row.robot} />
                           </TableCell>
-                        <TableCell className="text-center">
+                          <TableCell className="whitespace-normal py-4 text-center">
                             <ComparisonCell value={row.danisman} />
                           </TableCell>
-                        <TableCell className="bg-primary/5 text-center">
+                          <TableCell className="whitespace-normal bg-primary/5 py-4 text-center">
-                          <ComparisonCell value={row.tercihai} />
+                            <ComparisonCell value={row.tercihai} vurgu />
                           </TableCell>
                         </TableRow>
                       ))}
                     </TableBody>
                   </Table>
+                </div>
               </Reveal>
             </Parallax>
           </div>

src/components/ui/sonner.tsx

@@ -37,13 +37,8 @@ const Toaster = ({ ...props }: ToasterProps) => {
         } as React.CSSProperties
       }
       toastOptions={{
-        // Şişko ve sade (DESIGN.md §10): başlık 16 px, açıklama okunur
-        // koyulukta; kutu sitenin kart köşesiyle aynı.
         classNames: {
-          toast: "cn-toast !rounded-2xl !border-slate-200 !p-4 !shadow-lg",
+          toast: "cn-toast",
-          title: "!text-base !font-semibold !text-slate-900",
-          description: "!text-sm !leading-relaxed !text-slate-600",
-          icon: "!text-primary",
         },
       }}
       {...props}

src/features/liste/components/liste-cekmecesi.tsx

@@ -30,6 +30,7 @@ import {
 import {
   ArrowRight,
   Check,
+  CircleMinus,
   GripVertical,
   ListChecks,
   Plus,
@@ -491,9 +492,11 @@ function CekmeceSatiri({
             geriAlinabilirCikar([tercih.id], `${tercih.isim} çıkarıldı`)
           }
           onPointerDown={(e) => e.stopPropagation()} // kaydırmayı tetiklemesin
-          className="inline-flex size-11 shrink-0 cursor-pointer items-center justify-center rounded-full border border-slate-200 bg-white text-slate-500 transition-[background-color,border-color,color,transform] duration-150 hover:border-orange-500 hover:bg-orange-50/60 hover:text-orange-500 active:scale-[0.92]"
+          // Satırdan çıkarma "−" ile, çerçevesiz: kapatma çarpısıyla (§4.3)
+          // karışmasın diye çarpı yalnız çekmecenin kendisini kapatır.
+          className="inline-flex size-11 shrink-0 cursor-pointer items-center justify-center rounded-full text-slate-400 transition-[background-color,color,transform] duration-150 hover:bg-orange-50/60 hover:text-orange-500 active:scale-[0.92]"
         >
-          <X className="size-4" aria-hidden />
+          <CircleMinus className="size-5" aria-hidden />
           <span className="sr-only">{tercih.isim} listeden çıkar</span>
         </button>
       </motion.div>

src/features/pazarlama/components/landing-parcalari.tsx

@@ -2,13 +2,26 @@ import { CheckCircle2, X } from "lucide-react";
 
 // Ana sayfadaki karşılaştırma tablosunun hücresi: metin değeri düz yazılır,
 // boolean değer Var/Yok ikonuna çevrilir.
-export function ComparisonCell({ value }: { value: boolean | string }) {
+export function ComparisonCell({
+  value,
+  vurgu = false,
+}: {
+  value: boolean | string;
+  /** KolayTercih sütunu: metin koyu ve kalın */
+  vurgu?: boolean;
+}) {
   if (typeof value === "string") {
-    return <span className="text-sm font-medium">{value}</span>;
+    return (
-  }
+      <span
-  return value ? (
+        className={`block text-sm leading-snug ${vurgu ? "font-semibold text-slate-900" : "font-medium text-slate-600"}`}
-    <CheckCircle2 className="mx-auto size-5 text-primary" aria-label="Var" />
+      >
-  ) : (
+        {value}
-    <X className="mx-auto size-5 text-muted-foreground/50" aria-label="Yok" />
+      </span>
+    );
+  }
+  return value ? (
+    <CheckCircle2 className="mx-auto size-6 text-primary" aria-label="Var" />
+  ) : (
+    <X className="mx-auto size-5 text-slate-300" aria-label="Yok" />
   );
 }