# Norden Katalog Sitesi + Admin Panel — Proje Planı

> Bu dosya bir yapay zeka kodlama ajanına (Claude Code, Cursor, Windsurf vb.)
> doğrudan verilmek üzere hazırlanmıştır. Ajan bu dosyayı okuyup fazlara
> (phase) bölerek sırayla uygulamalıdır. Her fazın sonunda "Kabul Kriterleri"
> karşılanmadan bir sonraki faza geçilmemelidir.
>
> Statü: v1 taslak · Hazırlayan: Claude (Anthropic) · Bağlam: /norden-site
> altında zaten çalışan statik bir HTML/CSS/JS prototipi mevcut (index.html,
> hobs.html, elite-90g/60g/30g.html). Bu proje o prototipi **temel alarak**
> genişletir, sıfırdan başlamaz.

> [!warning] Güncel mimari kararı — 1 Eylül 2026
> Bu dosya tarihsel başlangıç planıdır. Buradaki **Vercel + SQLite + proje içi uploads** önerisi artık yayın hedefi değildir. Güncel karar; **Hostinger VPS + Docker Compose + PostgreSQL + Cloudflare R2 + private GitHub** yapısıdır. Bağlayıcı yayın planı için [[09-HOSTINGER-DOCKER-POSTGRESQL-R2-YAYIN-VE-MALIYET-PLANI]], güncel katalog durumu için [[08-SINEMATIK-WEB-ADMIN-VE-MEDYA-ANA-PLANI]] esas alınır.

> [!info] Admin 2.0 güncellemesi — 1 Eylül 2026
> Tarihsel aşağıdaki checkbox'lar güncel uygulama kanıtı değildir. Ürün/seri/Gallery/ülke/ana sayfa bölümü/işlem geçmişi ile ürün bazlı TR/EN/RU yönetimi yerelde uygulanmıştır. Güncel kullanım ve canlıya açma koşulları için [[10-ADMIN-2-0-KULLANIM-VE-YAYIN-GUVENLIK-PLANI]] esas alınır.
> Korunan Ana Yönetici, sınırlı yönetici hesapları, modül/işlem RBAC, DB tabanlı iptal edilebilir oturum, kalıcı giriş sınırı ve 18 senaryolu güvenlik denetimi de yerelde tamamlanmıştır. Bu, canlı admin onayı değildir.

> [!important] Güncel kalan işler — 7 Eylül 2026
> Güncel kod, içerik, güvenlik, PostgreSQL, R2, Docker, staging ve canlı yayın çalışma sırası için [[12-GUNCEL-WEB-PROJESI-EKSIKLER-VE-YAYIN-PLANI]] bağlayıcı operasyon planıdır. Bu dosyanın aşağıdaki tarihsel fazları güncel durum tablosu olarak kullanılmaz.

---

## 0. Proje Özeti

**Ne yapıyoruz:** Norden (mutfak ocağı/fırın/davlumbaz üreticisi) için,
hem masaüstü hem mobilde çalışan, kaydırdıkça canlanan (scroll-triggered
animasyon) bir ürün katalog sitesi + bu siteyi kod bilmeden yönetebileceğim
bir admin panel.

**Kim için:** Site ziyaretçisi (bayi/müşteri adayı) ürünlere bakıp
WhatsApp'tan teklif istiyor. Admin panel sadece site sahibi (ben) için —
ürün ekleme/silme/düzenleme, kategori yönetimi.

**Marka kişiliği:** Karanlık, sıcak, "ateş ışığında lüks mutfak" hissi.
Mevcut prototipte kurulu tasarım dilini birebir koru (aşağıdaki Bölüm 2).

---

## 1. Mevcut Durum (Ajan buradan devam edecek)

```
norden-site/
├── index.html          ✅ hazır — hero + tanıtım + öne çıkan ürünler
├── hobs.html            ✅ hazır — kategori sayfası + filtre
├── elite-90g.html        ✅ hazır — ürün detay şablonu (örnek)
├── elite-60g.html        ✅ hazır — çoklu galeri örneği (inox/cam)
├── elite-30g.html        ✅ hazır
├── css/style.css         ✅ hazır — tüm tasarım tokenleri burada
├── js/main.js            ✅ hazır — scroll reveal, parallax, nav, galeri
└── images/
    ├── hero/              (kahraman görselleri)
    └── products/           (4 ürün görseli, PDF katalogdan çıkarıldı)
```

**Sorun:** Bu yapı statik ve elle yazıldı. 3 ürün için uygun ama gerçek
katalog **onlarca ürün, 4+ kategori, çok sayıda alt seri** içeriyor
(Bölüm 3'teki envantere bak). Elle HTML sayfası yazmak ölçeklenmiyor —
bu yüzden bir veri katmanı + admin panel gerekiyor.

---

## 2. Tasarım Sistemi (DEĞİŞTİRME — aynen koru)

```css
--bg-void: #0c0906;       /* ana arka plan */
--bg-panel: #16110d;      /* kart/panel arka planı */
--ember: #c97a2e;         /* marka vurgu rengi (ateş/amber) */
--ember-bright: #f0a94e;  /* hover/aktif */
--text-primary: #f3ece2;
--text-secondary: #b8ada0;
--text-muted: #7d7365;

font-display: "Fraunces" (serif, başlıklar)
font-body: "Inter"
font-mono: "IBM Plex Mono" (etiketler, spec tabloları, eyebrow metinler)
```

**Motion prensipleri:**
- Hero'da hafif parallax (scroll'da arka plan yaklaşır)
- Kartlar `IntersectionObserver` ile fade+slide-up olarak belirir
- Hover'da görsel hafif büyür (`scale(1.04)`), link rengi ember'a döner
- `prefers-reduced-motion` her zaman saygı görmeli

Yeni sayfalar/bileşenler eklerken bu tokenleri **yeniden tanımlama**,
`css/style.css`'e ekleme yap.

---

## 3. Varlık Envanteri (Kullanıcının `norden_gorseller` klasöründen)

Aşağıdaki klasör yapısı zaten indirilmiş durumda. Ajan bunu okuyup
otomatik kategorilere/serilere eşleştirmeli (Bölüm 6'daki veri modeline).

### 3.1 Site/Marka Varlıkları (ÜRÜN DEĞİL — ayrı tutulmalı)
| Klasör/Dosya | Kullanım |
|---|---|
| `nrdss.png` | Ana logo (nav bar) |
| `nordenfooter.png` | Footer logo varyantı |
| `bayraklar/` (`_en.png`, `_tr.png`, `_ur.png`) | Dil seçici bayrak ikonları |
| `galeri/` | Kurumsal/dekoratif galeri görselleri (ürün değil) |
| `ektraalan/` | Ekstra/dekoratif görseller (profil fotoğrafı vb.) |

→ Bunlar `public/brand/` klasörüne taşınmalı, ürün veritabanına girmemeli.

### 3.2 Kategori: **Hobs (Ocaklar)** — Marka/Seri bazlı klasörler
| Klasör | Seri adı | Not |
|---|---|---|
| `Nord/` | Nord | Halihazırda site scrape'inde görüldü |
| `Oligark/` | Oligark | Cam ocak modelleri |
| `Rio/` | Rio | Cam ocak modelleri |
| `Tiara/` | Tiara | Cam + Inox varyantları |
| `En Guncel Renderlar/` | (render havuzu) | "inox Ocaklar" / "Cam Ocaklar" alt klasörleri, seri bazlı en güncel görseller — **öncelikli kaynak**, diğer klasörlerle çakışan ürünlerde bunu tercih et |

→ Ayrıca elimizde PDF katalogdan çıkarılmış **Elite Serisi** (90G/60G/30G)
zaten var, bu klasörlerde görünmüyor olabilir — PDF'i de ikinci bir
kaynak olarak tara.

### 3.3 Kategori: **Cooker Hoods (Davlumbaz)**
| Klasör | Olası anlamı |
|---|---|
| `2 serisi push button/` | 2. Seri, push-button kontrol |
| `3 serisi bej rustik/` | 3. Seri, bej/rustik renk varyantı |
| `3 serisi distan cam touch/` | 3. Seri, dıştan cam dokunmatik |
| `3 SERISI ICTEN CAM TOUCH/` | 3. Seri, içten cam dokunmatik |
| `3 SERISI PUSH BUTTON/` | 3. Seri, push-button |
| `4 serisi/` | 4. Seri |
| `6 serisi ada/` | 6. Seri, ada (island) tipi davlumbaz |
| `6 Serisi T/` | 6. Seri, T tipi |
| `ND5 BLG PS/TS/TS3C/TSAS/TSOS` | ND5 model kod varyantları (muhtemelen renk/kontrol tipi kodları) |
| `ND7 IX/` | ND7 model, inox |
| `dad01-ps_left.jpg`, `dad01-ps_right.jpg` | Tekil ürün görselleri (sol/sağ açı) |
| `photo-2024-11-14-*.jpg` (birkaç adet) | Tekil davlumbaz fotoğrafları, isimlendirilmemiş |
| `whatsapp_image_2023-10-31...` | Tekil ürün fotoğrafı |

→ **Ajan için görev:** Bu klasör/dosya adlarını insana sorarak (veya
içerik bazlı kaba bir sınıflandırmayla) `ürün kodu` + `okunabilir isim`
eşlemesi çıkarmalı. Model kodları (ND5, ND7 gibi) gerçek ürün kodu
olabilir — bunları admin panelde "SKU" alanı olarak kullan.

### 3.4 Kategori: **Ovens (Fırınlar)**
| Klasör | Not |
|---|---|
| `NEW OVENS 75 LT/` | Alt klasörleri var: "NRD 1008 SERIES", "NRD 1008 W200 SERIES", "NRD 1009 W300 SERIES" gibi (önceki taramada görüldü) — bunlar model serisi |

---

## 4. Bilgi Mimarisi (Sitemap)

```
/                          → Ana sayfa (hero + öne çıkanlar, kategori linkleri)
/hobs                      → Hobs kategori (filtre: seri, genişlik, yüzey)
/hobs/[slug]                → Ürün detay
/ovens                      → Ovens kategori
/ovens/[slug]                → Ürün detay
/cooker-hoods                → Cooker Hoods kategori
/cooker-hoods/[slug]          → Ürün detay
/admin                        → Admin login
/admin/dashboard                → Ürün listesi + arama/filtre
/admin/products/new              → Yeni ürün ekle
/admin/products/[id]/edit          → Ürün düzenle
/admin/categories                  → Kategori/seri yönetimi
```

---

## 5. Teknoloji Seçimi

Kullanıcı **kod bilmiyor** — bu yüzden ajan, kurulumu tek komutla
çalışan, deploy'u basit bir stack seçmeli. Önerilen:

| Katman | Seçim | Neden |
|---|---|---|
| Framework | **Next.js (App Router)** | Statik + admin API route'ları tek projede, Vercel'e tek tıkla deploy |
| Veritabanı | **SQLite (Prisma ORM)** | Sunucu kurulumu gerektirmez, dosya tabanlı, kolay yedeklenir |
| Görsel depolama | Proje içi `/public/uploads/` (v1) → ileride Cloudinary/S3 | Basit başla, ölçekleneceği zaman taşı |
| Admin auth | Basit e-posta+şifre (NextAuth veya tek kullanıcılı ortam değişkeni ile korumalı) | Tek admin var, karmaşık rol sistemi gereksiz |
| Stil | Mevcut `style.css` tokenleri → Tailwind'e **taşınmadan** aynen kullanılabilir, ya da Tailwind'e config olarak aktarılabilir | Tasarım tutarlılığı |
| Deploy | **Vercel** (ücretsiz katman yeterli) | Kod bilmeyen kullanıcı için en az sürtünmeli |

> Ajan bu seçimi kullanıcıya sormadan uygulayabilir, ama alternatif
> istenirse (örn. WordPress + ACF) Bölüm 9'daki "Açık Sorular" kısmına
> not düşülmeli.

---

## 6. Veri Modeli

```prisma
model Category {
  id        String   @id @default(cuid())
  slug      String   @unique   // "hobs" | "ovens" | "cooker-hoods"
  name      String              // "Hobs"
  order     Int      @default(0)
  products  Product[]
}

model Series {
  id          String   @id @default(cuid())
  name        String              // "Elite", "Tiara", "Nord", "ND5"...
  categoryId  String
  category    Category @relation(fields: [categoryId], references: [id])
  products    Product[]
}

model Product {
  id            String   @id @default(cuid())
  slug          String   @unique          // "elite-90g"
  sku           String?                    // "ND5-BLG-TS3C" gibi model kodu
  name          String                     // "Elite 90G"
  categoryId    String
  category      Category @relation(fields: [categoryId], references: [id])
  seriesId      String?
  series        Series?  @relation(fields: [seriesId], references: [id])
  widthCm       Int?                        // 30 / 45 / 60 / 90
  surface       String?                     // "Inox" | "Cam" | null
  burnerCount   Int?
  description   String?  @db.Text
  features      Json?                        // string[] — "Basic Features"
  options       Json?                        // string[] — "Available Options"
  accessories   Json?                        // string[] — "Available Accessories"
  images        ProductImage[]
  status        String   @default("draft")   // "draft" | "published"
  order         Int      @default(0)
  createdAt     DateTime @default(now())
  updatedAt     DateTime @updatedAt
}

model ProductImage {
  id         String   @id @default(cuid())
  productId  String
  product    Product  @relation(fields: [productId], references: [id])
  url        String
  alt        String?
  order      Int      @default(0)
}
```

---

## 7. Fonksiyonel Gereksinimler

### 7.1 Genel Site (Public)
- [ ] Tüm sayfalar mobil + masaüstü tam responsive (mevcut breakpoint'ler: 860px, 560px)
- [ ] Kategori sayfalarında: seri filtresi, genişlik filtresi (30/45/60/90cm), yüzey filtresi (Inox/Cam)
- [ ] Ürün detay sayfası: çoklu görsel galerisi (thumbnail tıklanınca ana görsel değişir — zaten `main.js`'te var)
- [ ] WhatsApp CTA her ürün sayfasında, ürün adını otomatik mesaja dolduran link (mevcut örnekteki gibi)
- [ ] SEO: her ürün sayfası kendi `<title>`, `<meta description>`, Open Graph görseli üretmeli (admin panelden girilen veriden otomatik)
- [ ] Görsel yükleme: Next.js `<Image>` ile otomatik optimize + lazy-load

### 7.2 Admin Panel
- [ ] Login ekranı (tek admin kullanıcı yeterli v1 için)
- [ ] Ürün listesi: arama, kategoriye göre filtre, durum (taslak/yayında) göstergesi
- [ ] Ürün ekle/düzenle formu:
  - Temel bilgiler: isim, slug (otomatik üretilir, elle düzenlenebilir), SKU, kategori, seri, genişlik, yüzey, brülör sayısı
  - Açıklama (zengin metin veya düz metin — v1 için düz metin yeterli)
  - Özellik listeleri: **Basic Features / Available Options / Available Accessories** — her biri dinamik olarak satır ekle/çıkar (chip/tag input)
  - Görsel yükleme: sürükle-bırak çoklu görsel, sıralama (drag to reorder), bir görseli "kapak fotoğrafı" olarak işaretleme
  - Durum: Taslak / Yayında toggle
- [ ] Ürün silme (onay modalı ile)
- [ ] Kategori/Seri yönetimi: yeni seri ekleme (örn. ileride "Nirvana" serisi eklenmek istenirse kod yazmadan eklenebilmeli)
- [ ] Toplu içe aktarma (nice-to-have, v2): `norden_gorseller` klasöründeki gibi bir klasör yapısını otomatik tarayıp ürün taslağı oluşturan bir "içe aktarma" aracı — Bölüm 3'teki envanter mantığını kod olarak uygular

### 7.3 Performans / Kalite Çıtası
- [ ] Lighthouse mobil skor ≥ 85 (performans)
- [ ] Görseller WebP'ye otomatik dönüştürülmeli (Next.js Image bunu otomatik yapar)
- [ ] `prefers-reduced-motion` desteği korunmalı
- [ ] Klavye erişilebilirliği: admin formları tab-order ile kullanılabilir olmalı

---

## 8. Faz Planı (Ajan Görev Dağılımı)

> Aşağıdaki fazlar, birden fazla ajan/oturum kullanacaksan doğrudan görev
> tanımı olarak kullanılabilir. Her faz bağımsız test edilebilir bir
> teslimat üretmeli.

### Faz 0 — Proje İskeleti
- Next.js projesi kur, Prisma + SQLite bağla, mevcut `norden-site/`
  içindeki CSS tokenlerini `globals.css`'e taşı
- Mevcut 4 ürün görselini + hero görsellerini `/public` altına taşı
- **Kabul kriteri:** `npm run dev` ile boş bir Next.js sitesi mevcut
  tasarım tokenleriyle açılıyor

### Faz 1 — Veri Katmanı
- Bölüm 6'daki Prisma şemasını uygula, migration çalıştır
- Mevcut 3 statik ürünü (Elite 90G/60G/30G) veritabanına seed olarak ekle
- **Kabul kriteri:** Prisma Studio'da 3 ürün, doğru alanlarla görünüyor

### Faz 2 — Public Site (Dinamik)
- `index.html` / `hobs.html` / `elite-*.html`'i Next.js sayfalarına
  dönüştür — **içerik statik değil, veritabanından** gelsin
- Scroll animasyonları (`main.js`) React'e (`useEffect` + IntersectionObserver) taşı
- **Kabul kriteri:** Veritabanındaki bir ürünün ismini Prisma Studio'dan
  değiştirince site otomatik güncelleniyor

### Faz 3 — Admin Panel: Okuma + Listeleme
- `/admin/login`, `/admin/dashboard` (salt-okunur ürün listesi)
- **Kabul kriteri:** Login olmadan `/admin/*` erişilemiyor; login olunca
  ürün listesi görünüyor

### Faz 4 — Admin Panel: CRUD
- Ürün ekleme/düzenleme/silme formları (Bölüm 7.2)
- Görsel yükleme + sıralama
- **Kabul kriteri:** Admin panelden eklenen bir ürün, herhangi bir kod
  değişikliği olmadan public sitede görünüyor

### Faz 5 — Toplu İçe Aktarma (opsiyonel ama önerilir)
- `norden_gorseller` benzeri bir klasör yapısını okuyup taslak ürün
  listesi öneren bir admin aracı
- **Kabul kriteri:** Bir ZIP/klasör yüklenince, Bölüm 3'teki envanter
  mantığına göre kategori/seri tahmini yapılmış taslak ürünler oluşuyor
  (admin onaylayıp yayına alıyor)

### Faz 6 — Cilalama
- SEO meta üretimi, 404 sayfası, yükleme durumları (skeleton), hata mesajları
- Lighthouse denetimi ve düzeltmeler
- **Kabul kriteri:** Bölüm 7.3'teki performans çıtası karşılanıyor

### Faz 7 — Deploy
- Vercel'e bağlama, ortam değişkenleri (admin şifresi vs.), custom domain bağlama
- **Kabul kriteri:** Site canlı URL'de erişilebilir, admin panel şifreyle korunuyor

---

## 9. Açık Sorular (Ajan başlamadan önce kullanıcıya sorulmalı)

1. Next.js + Vercel yerine daha basit bir çözüm (örn. hazır bir
   site kurucusu / WordPress) tercih edilir mi, yoksa bu plan onaylanıyor mu?
2. Admin panel için tek kullanıcı yeterli mi, yoksa birden fazla kişi
   (örn. bir çalışan) ürün girecek mi? (Bu, auth karmaşıklığını etkiler.)
3. Alan adı (domain) hazır mı, yoksa Faz 7'de birlikte mi alınacak?
4. `ND5 BLG PS/TS/TS3C/TSAS/TSOS` gibi kodların gerçek anlamı biliniyor
   mu (renk mi, kontrol tipi mi)? Admin panelde doğru alan adlarıyla
   göstermek için bu bilgi gerekli.
5. Ovens ve Cooker Hoods için de PDF katalog gibi bir kaynak var mı,
   yoksa sadece klasördeki fotoğraflardan mı isim/özellik çıkarılacak?

---

## 10. Kapsam Dışı (v1'de YAPILMAYACAK)

- Çoklu dil (EN/TR/UR) — `bayraklar/` varlıkları ileride kullanılacak, v1 tek dil (TR)
- Ödeme/sepet sistemi — bu bir katalog sitesi, e-ticaret değil
- Bayi/kullanıcı girişi (sadece admin girişi var, müşteri hesabı yok)
- Stok takibi / envanter miktarı