# 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):** ```css :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.