sitarapart/docs/design.md

Design Brief — Sitar Apart & Otel

/design-demo skill'ine doğrudan girdi olarak verilebilir.

---

📐 Estetik Yön: Warm Coastal (Warm/Organic + kıyı tonu karışımı — lüks otel değil, samimi butik apart)

• Neden: Broşürdeki gerçek görseller (ahşap balkonlar, yeşillik, deniz-dağ manzarası, havlu üzerine serpiştirilmiş buğunvil çiçekleri) samimi, ev sıcaklığında bir apart havası veriyor. "Luxury/Refined" bu işletme için fazla iddialı — 1+0/1+1 self-catering daireler satıyoruz, 5 yıldızlı otel değil.
• Karakter: Yuvarlatılmış köşeler, toprak + turkuaz tonları, bol doğal ışık hissi, gerçekçi/samimi fotoğraf ağırlıklı

🎨 Palet (OKLCH):

:root {
  --background:         oklch(0.97 0.012 80);   /* kirli beyaz/krem */
  --foreground:          oklch(0.16 0.01 40);    /* koyu ahşap-kahve */
  --primary:             oklch(0.62 0.09 200);   /* turkuaz — broşür logosu/bantları */
  --primary-foreground:  oklch(0.98 0.01 80);
  --secondary:           oklch(0.40 0.05 40);    /* koyu ahşap balkon tonu */
  --accent:              oklch(0.68 0.14 15);    /* buğunvil pembe-mor — vurgu/CTA'da nokta atışı kullan */
  --muted:               oklch(0.92 0.01 80);
  --muted-foreground:    oklch(0.48 0.01 60);
  --border:              oklch(0.87 0.01 80);
  --radius:              0.75rem;                /* organik, yuvarlak */
}
.dark {
  --background: oklch(0.14 0.01 40);
  --foreground: oklch(0.95 0.01 80);
  --primary:    oklch(0.68 0.10 200);
  --border:     oklch(0.24 0.01 40);
}

🔤 Font:

• Başlık: Lora (700) — sıcak serif, otel siteleri için klişe olmayan seçim
• Body: Nunito (400/600) — yuvarlak, samimi sans

Tipografi tonu: Büyük başlıklarda serif ağırlık, gövde metinde yumuşak sans. Aşırı ince/keskin geometrik font yok — sıcaklık hissi korunmalı.

---

Unforgettable Element (Farklılaştırıcı Detay)

Buğunvil çiçeği motifi — broşürdeki gerçek fotoğraflarda havlu/yatak üzerine serpiştirilmiş çiçekler işletmenin kendine has, samimi bir dokunuşu. Bunu jenerik "gradient blob" yerine tekrar eden görsel imza olarak kullan:

• Hero'da başlık etrafında ince, elle çizilmiş çiçek/dal SVG detayı (Magic UI değil, custom)
• Section divider'larda minimal çiçek ikonu
• Daire kartlarında hover'da hafif yaprak/çiçek parçacık animasyonu (abartısız, prefers-reduced-motion ile kapanır)

Bu, "jenerik AI otel sitesi" hissinden kaçınmak için PRD'deki gerçek marka detayına dayanıyor — uydurma değil.

---

Bölüm Bazlı Yönlendirme

• Hero: Broşürdeki balkon/manzara fotoğrafı (veya benzeri) full-bleed, hafif koyu overlay, ortalanmış serif başlık + "Akyaka'nın Huzuru Sizinle" alt başlık + rezervasyon/iletişim CTA. Transparent navbar, scroll'da frosted glass.
• Daire kartları: 3/2 oranlı büyük görsel, shadcn Carousel, whileHover scale-[1.02], minimal metin (ad + kapasite + "Detaylar" linki)
• Olanaklar (Amenity) bandı: Ana sayfada ikon + kısa etiket şeklinde yatay şerit (Havuz, Wifi, Özel Mutfak, Balkon)
• Konum/Galeri: Editorial düzen, bol whitespace, masonry veya kategori tab'lı galeri
• Footer: Koyu ahşap-kahve arka plan (--secondary bazlı), serif logo, adres + telefon + WhatsApp butonu

Anti-Klişe Kontrol

• bg-gradient-to-r from-blue-500 to-purple-600 yok — palet OKLCH sabitlerinden
• Sistem fontu yok — next/font ile Lora + Nunito
• Her section py-20 text-center tekrarı yok — ritim değişken
• Stok "genel otel" görseli yerine broşürdeki gerçek fotoğraflar önceliklendirilir

---

Sonraki adım: Bu brief + docs/prd.md ile /design-demo çalıştırılabilir.