design: sunum sayfası yeniden tasarlandı

- Koyu gradyan hero header (slate-900), Building2 ikon, ilan sayısı pill
- Kartlar: h-52 fotoğraf, hover scale efekti, gölge animasyonu
- Status + listing type badge overlay fotoğraf üstünde (backdrop-blur)
- Fotoğraf sayısı pill (sağ alt köşe)
- Spec pill'leri: emlak tipi, oda, m²
- Fiyat büyük ve dominant (2xl), mt-auto ile alta sabitlenmiş
- MapPin ikonu konum satırında ve harita linkinde
- Footer: Kovak Emlak CRM branding
- Süresi dolmuş sunum için iyileştirilmiş boş state

src/app/sunum/[token]/page.tsx

@@ -1,5 +1,6 @@
 import { notFound } from "next/navigation";
 import { Query } from "node-appwrite";
+import { Building2, MapPin, Home } from "lucide-react";
 
 import { DATABASE_ID, TABLES, type Presentation, type Property } from "@/lib/appwrite/schema";
 import { createAdminClient } from "@/lib/appwrite/server";
@@ -31,16 +32,18 @@ export default async function SunumPage({ params }: Props) {
 
   if (presentation.expiresAt && new Date(presentation.expiresAt) < new Date()) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-gray-50">
+      <div className="min-h-screen flex items-center justify-center bg-slate-50">
-        <div className="text-center">
+        <div className="text-center px-6">
-          <h1 className="text-2xl font-bold text-gray-800 mb-2">Sunum Süresi Doldu</h1>
+          <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-orange-100 mb-4">
-          <p className="text-gray-500">Bu sunum artık geçerli değil.</p>
+            <Building2 className="size-8 text-orange-500" />
+          </div>
+          <h1 className="text-2xl font-bold text-gray-900 mb-2">Sunum Süresi Doldu</h1>
+          <p className="text-gray-500">Bu sunum bağlantısı artık geçerli değil.</p>
         </div>
       </div>
     );
   }
 
-  // Increment view count (fire-and-forget)
   void incrementPresentationViewCount(presentation.$id, presentation.viewCount ?? 0);
 
   let propertyIds: string[] = [];
@@ -56,93 +59,147 @@ export default async function SunumPage({ params }: Props) {
       const row = await tablesDB.getRow(DATABASE_ID, TABLES.properties, pid);
       properties.push(row as unknown as Property);
     } catch {
-      // Property may have been deleted
+      // deleted
     }
   }
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-slate-50">
-      <header className="bg-white border-b px-6 py-4">
+      {/* Hero header */}
-        <h1 className="text-xl font-semibold text-gray-800">{presentation.title}</h1>
+      <header className="bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white">
-        {presentation.notes && (
+        <div className="max-w-5xl mx-auto px-6 py-10">
-          <p className="mt-1 text-sm text-gray-500">{presentation.notes}</p>
+          <div className="flex items-center gap-2 text-slate-400 text-sm mb-5">
-        )}
+            <Building2 className="size-4" />
-        <p className="mt-1 text-xs text-gray-400">{properties.length} ilan</p>
+            <span>Emlak Sunumu</span>
+          </div>
+          <h1 className="text-3xl font-bold tracking-tight">{presentation.title}</h1>
+          {presentation.notes && (
+            <p className="mt-3 text-slate-300 text-sm max-w-2xl leading-relaxed">
+              {presentation.notes}
+            </p>
+          )}
+          <div className="mt-5">
+            <span className="inline-flex items-center gap-1.5 bg-white/10 rounded-full px-3 py-1.5 text-sm">
+              <span className="font-semibold text-white">{properties.length}</span>
+              <span className="text-slate-300">ilan listelendi</span>
+            </span>
+          </div>
+        </div>
       </header>
 
-      <main className="max-w-5xl mx-auto px-4 py-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+      {/* Grid */}
+      <main className="max-w-5xl mx-auto px-4 py-10 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
         {properties.map((p) => (
           <PropertyCard key={p.$id} property={p} />
         ))}
         {properties.length === 0 && (
-          <p className="col-span-full text-center text-gray-400 py-16">
+          <div className="col-span-full text-center py-20">
-            Bu sunumda ilan bulunmuyor.
+            <Home className="size-10 text-gray-200 mx-auto mb-3" />
-          </p>
+            <p className="text-gray-400">Bu sunumda ilan bulunmuyor.</p>
+          </div>
         )}
       </main>
+
+      {/* Footer */}
+      <footer className="border-t bg-white mt-8 py-6 text-center text-xs text-gray-400">
+        Bu sunum <span className="font-medium text-gray-500">Kovak Emlak CRM</span> tarafından oluşturulmuştur.
+      </footer>
     </div>
   );
 }
 
 function PropertyCard({ property: p }: { property: Property }) {
-  const isExpired = p.status === "satildi" || p.status === "kiralandit";
+  const isSold = p.status === "satildi" || p.status === "kiralandit";
   const imageIds = parseImageIds(p.imageIds);
   const coverImageId = imageIds[0];
 
+  const statusStyle: Record<string, string> = {
+    aktif: "bg-green-500/90 text-white",
+    pasif: "bg-gray-500/80 text-white",
+    satildi: "bg-orange-500/90 text-white",
+    kiralandit: "bg-blue-500/90 text-white",
+  };
+
   return (
-    <div className={`bg-white rounded-xl border shadow-sm overflow-hidden ${isExpired ? "opacity-60" : ""}`}>
+    <div
-      <div className="bg-gray-100 h-48 overflow-hidden">
+      className={`group bg-white rounded-2xl shadow-sm hover:shadow-xl transition-shadow duration-300 overflow-hidden border border-gray-100 flex flex-col ${isSold ? "opacity-70" : ""}`}
+    >
+      {/* Photo */}
+      <div className="relative h-52 bg-slate-100 overflow-hidden shrink-0">
         {coverImageId ? (
           // eslint-disable-next-line @next/next/no-img-element
           <img
-            src={getPropertyImagePreviewUrl(coverImageId, 600, 400)}
+            src={getPropertyImagePreviewUrl(coverImageId, 640, 420)}
             alt={p.title}
-            className="h-full w-full object-cover"
+            className="h-full w-full object-cover group-hover:scale-105 transition-transform duration-500"
           />
         ) : (
-          <div className="flex h-full items-center justify-center text-4xl text-gray-300">🏠</div>
+          <div className="flex h-full items-center justify-center">
+            <Home className="size-12 text-slate-200" />
+          </div>
+        )}
+
+        {/* Status badge — top left */}
+        <span
+          className={`absolute top-3 left-3 text-xs font-semibold px-2.5 py-1 rounded-full backdrop-blur-sm ${statusStyle[p.status] ?? "bg-gray-500/80 text-white"}`}
+        >
+          {PROPERTY_STATUS_LABELS[p.status] ?? p.status}
+        </span>
+
+        {/* Listing type — top right */}
+        <span className="absolute top-3 right-3 text-xs font-semibold px-2.5 py-1 rounded-full bg-slate-900/70 text-white backdrop-blur-sm">
+          {LISTING_TYPE_LABELS[p.listingType] ?? p.listingType}
+        </span>
+
+        {/* Photo count pill */}
+        {imageIds.length > 1 && (
+          <span className="absolute bottom-3 right-3 text-xs bg-black/50 text-white px-2 py-0.5 rounded-full backdrop-blur-sm">
+            {imageIds.length} fotoğraf
+          </span>
         )}
       </div>
-      <div className="p-4 space-y-2">
-        <div className="flex items-start justify-between gap-2">
-          <h2 className="font-semibold text-gray-800 text-sm leading-tight">{p.title}</h2>
-          <span className={`text-xs px-1.5 py-0.5 rounded whitespace-nowrap font-medium ${
-            p.status === "aktif" ? "bg-green-100 text-green-700" :
-            p.status === "pasif" ? "bg-gray-100 text-gray-600" :
-            "bg-orange-100 text-orange-700"
-          }`}>
-            {PROPERTY_STATUS_LABELS[p.status] ?? p.status}
-          </span>
-        </div>
 
-        <div className="flex gap-2 text-xs text-gray-500">
+      {/* Body */}
-          <span>{PROPERTY_TYPE_LABELS[p.propertyType] ?? p.propertyType}</span>
+      <div className="p-4 flex flex-col gap-2 flex-1">
-          <span>·</span>
+        <h2 className="font-semibold text-gray-900 leading-snug line-clamp-2">{p.title}</h2>
-          <span>{LISTING_TYPE_LABELS[p.listingType] ?? p.listingType}</span>
+
+        {/* Location */}
+        {(p.city || p.district || p.neighborhood) && (
+          <div className="flex items-start gap-1 text-xs text-gray-500">
+            <MapPin className="size-3 shrink-0 mt-0.5 text-gray-400" />
+            <span className="line-clamp-1">
+              {[p.neighborhood, p.district, p.city].filter(Boolean).join(", ")}
+            </span>
+          </div>
+        )}
+
+        {/* Spec pills */}
+        <div className="flex flex-wrap gap-1.5">
+          <span className="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full font-medium">
+            {PROPERTY_TYPE_LABELS[p.propertyType] ?? p.propertyType}
+          </span>
           {p.roomCount && (
-            <>
+            <span className="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full font-medium">
-              <span>·</span>
+              {p.roomCount}
-              <span>{p.roomCount}</span>
+            </span>
-            </>
           )}
           {p.netM2 && (
-            <>
+            <span className="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded-full font-medium">
-              <span>·</span>
+              {p.netM2} m²
-              <span>{p.netM2} m²</span>
+            </span>
-            </>
           )}
         </div>
 
-        <p className="text-xs text-gray-500">
+        {/* Price — pushed to bottom */}
-          {[p.neighborhood, p.district, p.city].filter(Boolean).join(", ")}
+        <div className="mt-auto pt-2">
-        </p>
+          <p className="text-2xl font-bold text-slate-900 tracking-tight">
-
+            {p.price.toLocaleString("tr-TR")}
-        <p className="text-lg font-bold text-gray-900">
+            <span className="text-sm font-normal text-gray-400 ml-1.5">{p.currency ?? "TRY"}</span>
-          {p.price.toLocaleString("tr-TR")} {p.currency ?? "TRY"}
+          </p>
-        </p>
+        </div>
 
         {p.description && (
-          <p className="text-xs text-gray-500 line-clamp-3">{p.description}</p>
+          <p className="text-xs text-gray-500 line-clamp-2 leading-relaxed">{p.description}</p>
         )}
 
         {p.mapLat != null && p.mapLng != null && (
@@ -150,9 +207,10 @@ function PropertyCard({ property: p }: { property: Property }) {
             href={`https://www.google.com/maps?q=${p.mapLat},${p.mapLng}`}
             target="_blank"
             rel="noopener noreferrer"
-            className="inline-flex items-center gap-1 text-xs text-blue-600 hover:underline"
+            className="mt-1 inline-flex items-center gap-1.5 text-xs font-medium text-blue-600 hover:text-blue-700 transition-colors"
           >
-            📍 Haritada gör
+            <MapPin className="size-3" />
+            Haritada gör
           </a>
         )}
       </div>