AI Prompt Sihirbazı | Profesyonel AI Promptlar

ARAÇLAR
NÖRAL MOTOR: AKTİF // FRONTIER HEDEF: TAM DOĞRULANDI
PPRROOMMPPTT
SSTTUUDDIIOO
SEKTÖR ZEKÂSIÇEVRİMDIŞI META-PROMPT MOTORUÖRNEK SİTE TERSİNE MÜHENDİSLİK
HEDEF YAPAY ZEKA SÖZLEŞMESİ
SEKTÖR VE İŞ ALANIEŞLEŞTİ: SaaS / Teknoloji
SEKTÖR ZEKÂSI AKTİF76 SEKTÖR PROFİLİ
Ton: Net, güven veren, fayda odaklı; jargon az
Güven: Müşteri logoları · Kullanım istatistikleri · Güvenlik/uyumluluk (SOC2/GDPR)
MARKA / ŞİRKET ADI
TEKNOLOJİ YIĞINI & MİMARİ
HEDEF KİTLE
TASARIM TONU & DİLİ
BU İŞE ÖZEL DETAYLAR & HİKAYE
EKSTRA TALİMATLAR / KISITLAMALAR
MASTER PROMPT ÇIKTISI
ÜRETİM: 12msKARAKTER: 29001TAHMİNİ TOKEN: ~7251
MONOLITH WORKS // V6 PROMPT ENGINE
<role>
Sen Awwwards/FWA seviyesinde işler çıkaran ödüllü bir creative technologist, full-stack geliştirici, UI/UX tasarımcı ve metin yazarısın. Güncel web teknolojileri, hareket tasarımı ve en yüksek estetik standartlarda ustasın.
</role>

<strict_constraints>
  - <spec> içindeki KALİTE TABANI ve committed kararlar (palet/tipografi/ikon seti/erişilebilirlik/kod bütünlüğü) burada TEKRARLANMAZ; hepsi aynen bağlayıcıdır.
  - Viewport Standardı: Mobilde adres çubuğu taşmasını önlemek için daima min-h-[100dvh] kullan.
</strict_constraints>

<spec>
>>> HEDEF MODEL: claude
CLAUDE (3.7 SONNET & 3.5 SONNET · HYBRID THINKING & ARTIFACTS OPTİMİZASYONU):
  - XML Tag Mimarisi: Çıktıyı <role>, <design_plan>, <token_matrix>, <component_inventory>, <code_contract>, <verification_checklist> etiketleriyle kesin sınırlara ayır.
  - Hybrid Thinking (<thinking>): Extended thinking AÇIKSA matematik ve layout hesaplarını thinking havuzunda çöz, özeti <design_plan>'a yaz; KAPALIYSA tüm hesabı <design_plan> içinde göster. WCAG kontrast (≥4.5:1), 6-state bileşen matrisi (Default, Hover, Active, Focus, Disabled, Loading) ve CSS Grid kolon dağılımını kod öncesi planla.
  - Çalışır Teslim: TESLİM BİÇİMİ bölümündeki dosya düzenini uygula; hiçbir importun hedefi veya işlev gövdesi eksik kalmasın.
  - Teknoloji Disiplini: Seçilen stack'in dili ve native araçlarıyla üret; hedef model tercihi teknoloji seçimini değiştirmez.

SÖZLEŞME: Verilen her değeri (HEX, font, sanat yönü, ölçü) BİREBİR uygula — yeniden icat etme, sulandırma. Boşlukları uzman gibi committed doldur; "size kalmış" YASAK. A=SPEC · B=KAÇINILACAK HATALAR · C=ÜRETİM (tam çalışır kod) · D=DOĞRULAMA (teslimden önce kendin kontrol et).

═══ PART A — SPEC (committed kararlar: ne + nasıl) ═══

GÖREV (PRO MOD — PRODUCTION WEB APP): Aşağıdaki işletme için Awwwards kalitesinde, üretime hazır bir ANA SAYFA ve eksiksiz bir TASARIM SİSTEMİ (Design Tokens + 6-State Bileşenler + Standart SEO) üret. Diğer sayfaları ve CMS'i ŞİMDİ yapma; sonunda tek satırlık bir yol haritası ver.


## İŞLETME

- Konu/sektör: B2B SaaS & Bulut Platformu
- Hedef kitle: kurumsal yöneticiler
- Tasarım tarzı: (sektöre en uygun tarzı sen seç ve kısaca gerekçelendir)
- Teknoloji: Cutting-edge 2026 — Next.js 15+ · React 19 · TypeScript · Tailwind v4 · shadcn/ui · Motion
- Ana sayfa bölümleri: Hero (değer önermesi + CTA), Özellikler, Nasıl çalışır, Fiyatlandırma, Sosyal kanıt / logolar, SSS + CTA
- Çıktı dili: Türkçe


## SEKTÖR & STRATEJİ

- Sektör: SaaS / Teknoloji
- Ton: Net, güven veren, fayda odaklı; jargon az
- Bu sektör için olması gereken bölümler: Hero (değer önermesi + CTA), Özellikler, Nasıl çalışır, Fiyatlandırma, Sosyal kanıt / logolar, SSS + CTA.
- Güven sinyalleri (mutlaka göster): Müşteri logoları, Kullanım istatistikleri, Güvenlik/uyumluluk (SOC2/GDPR), Ücretsiz deneme.
- Dönüşüm hedefleri: ücretsiz deneme, demo talebi.
- Görsel yön: Ürün ekran görüntüleri/mockup, soyut UI, izometrik, temiz illüstrasyon.
- Tipik işlevler: fiyat tablosu, özellik ızgarası, demo CTA, entegrasyonlar.
- Mevzuat/dikkat: GDPR/KVKK, kullanım koşulları.
- Hedef Kitle & Karar Verici: Teknoloji liderleri (CTO/VP Eng), ürün yöneticileri, operasyonel verimlilik ve otomasyon arayan modern büyüme ekipleri.
- Sektörel İtirazlar & Bariyerler: Uzun ve sancılı entegrasyon süreçleri, yetersiz API dokümantasyonu · Vendor lock-in riski ve gelecekte aşırı artan lisans maliyetleri · Veri güvenliği, KVKK/GDPR uyumluluğu ve hizmet kesintisi (downtime) endişesi.
- Temel Değer Sürücüleri: 5 dakikada sıfır kod/düşük kod kurulum ve zengin SDK/webhook ekosistemi · %99.99 uptime SLA taahhüdü, SOC2 Type II ve ISO 27001 güvenlik sertifikası · Kullandığın kadar öde şeffaf fiyatlandırma modeli ve koşulsuz 14 gün tam deneme.
- Sektörel Veri Varlıkları: Müşteri Organizasyonu (Tenant) · Kullanıcı Rol ve İzin Matrisi (RBAC) · API Anahtarı ve Webhook Uç Noktası · Kullanım ve Kota Metriği · Abonelik ve Fatura Planı.
- Sektörel Başarı Metrikleri (KPI): Ücretsiz deneme hesabı oluşturma ve ürün aktivasyon oranı · Canlı interaktif demo / API konsolu etkileşim süresi · Müşteri edinme maliyeti (CAC) ve dönüşüm hunisi verimi.

SEKTÖREL İMZA BİLEŞENİ (Domain Signature Blueprint — Committed):
  • Bileşen Adı: `<InteractiveApiPlayground />`
  • İşlev & Deneyim: Canlı API İstek/Yanıt Terminali: Kullanıcının parametreleri değiştirip anında JSON yanıtını ve 200 OK gecikme süresini (32ms) gördüğü morphing kod konsolu.


## YARATICI KONSEPT (COMMITTED — ÖNCE BUNU OKU)

KONSEPT (committed — bu kararları uygula, baştan icat etme): "İsviçre Standart Minimal" yönünde, Awwwards "Site of the Day" / FWA kalibresinde, 10.000$+ bütçeli ajans işi gibi görünen ve hissettiren, SaaS / Teknoloji sektörüne ÖZEL bir site. İlk 3 saniyede "vay" desinler; jenerik şablon ve AI-slop estetiğinden uzak.

PALET (Slate Minimal — TAM HEX, rolleriyle birebir kullan):
  Arka plan #18181B · Yüzey #2563EB · Metin #FFFFFF · Birincil #71717A · Aksan #F4F4F5
  Tüm 5 renk: #FFFFFF · #F4F4F5 · #18181B · #2563EB · #71717A. Metin/zemin kontrastı WCAG AA (≥4.5:1) olmalı.

KODSAL RENK TOKENS SİSTEMİ (CSS / Tailwind v4):
```css
:root {
  --bg: #18181B;
  --surface: #2563EB;
  --text: #FFFFFF;
  --primary: #71717A;
  --accent: #F4F4F5;
  --text-muted: rgba(255, 255, 255, 0.65);
  --border-subtle: rgba(255, 255, 255, 0.12);
}

/* Tailwind v4 @theme entegrasyonu */
@theme {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-primary: var(--primary);
  --color-accent: var(--accent);
}
```
TİPOGRAFİ (Clash × Satoshi — committed): Başlık "Clash Display", gövde "Satoshi".
  https://api.fontshare.com/v2/css?f[]=clash-display@500,600&f[]=satoshi@400,500&display=swap
  Ölçek: 14/16/18/20/28/40px kademeleri + H1/display clamp(2.5rem, 6vw, 4.5rem); başlıklar ağır ve karakterli, gövde 1.6 satır yüksekliği.

HERO (somut):
  Sticky multi-layer mask-reveal hero: scroll ile kilitlenen sahnede 3 katmanlı Clash Display tipografi ve Ürün ekran görüntüleri/mockup, soyut UI, izometrik, temiz illüstrasyon maskesi ayrışarak (staggered layer separation) Özellikler bölümüne sinematik köprü kurar.
  Örnek H1 (bunu geliştir): “Ekibinizin hızını ikiye katlayın.”
  Alt başlık: Müşteri logoları ile fark yaratan, net bir deneyim.
  Birincil CTA: “Ücretsiz Dene”
Signature an: İmza an: scroll-scrub görsel sekansı: canvas üzerinde kare kare akan ürün/mekân çekimi.

Yön disiplini: yukarıdaki "İsviçre Standart Minimal" yönünü tüm siteye cesurca taşı; "modern minimal" gibi belirsizliğe DÜŞME. Tipografi bir tasarım öğesi (büyük, kontrastlı, grid-kıran); atmosfer için katman/grain/degrade kullan; cansız simetrik kart-ızgaradan kaçın.


## TASARIM SİSTEMİ (detay)

Committed palet + tipografiyi token sistemine dök (renk rolleri, tip ölçeği, satır yükseklikleri); 4/8px spacing skalası, 12 kolon grid, bilinçli ritim; katman/gölge/doku ile derinlik — düz ve cansız olmasın.
Modern CSS'i sömür — DESTEK KADEMESİNE göre: (a) koşulsuz kullan: container queries, :has(), subgrid, clamp() akışkan tip, oklch + color-mix(), backdrop-filter, variable font ekseni, modal için native <dialog>; (b) kullan ama FALLBACK ver: View Transitions, text-wrap: balance, light-dark(), popover, content-visibility; (c) animation-timeline: scroll()/view() YALNIZ @supports (animation-timeline: view()) içinde — dışında IntersectionObserver reveal'ı çalışır kalsın (Safari desteklemiyor; korumasız kullanım animasyonu tamamen öldürür). Native CSS yapabiliyorsa JS kütüphanesi yerine native.
PALET KARARI (bu sektöre committed): renk kararı yukarıdaki TAM HEX palettedir; bu sektör tipik olarak "canlı marka + nötr arka plan" ruhu taşır — palet bu ruhu karşılamıyorsa tek cümleyle gerekçelendir. Token adları rol bazlı olsun (surface/elevated/accent/danger), ham renk adı DEĞİL; bileşen kodunda ham HEX de YASAK — renklere yalnız token değişkenleri üzerinden referans verilir.
TİPOGRAFİ KARARI (committed): tipografi kararı yukarıdaki font ikilisidir; bu sektör "modern geometrik sans" karakteri taşır — ikili bunu karşılamıyorsa tek cümleyle gerekçelendir. Display ve gövde arasındaki karakter farkı ölçek değil AĞIRLIK+GENİŞLİK ile kurulsun.
TASARIM TONU: Net, güven veren, fayda odaklı; jargon az. Boşluk, kontrast ve hareket miktarı bu tonu taşımalı — dekoratif efekt tonu ezmemeli.
GÖRSEL SANAT YÖNÜ (stok görsel YASAK): Ürün ekran görüntüleri/mockup, soyut UI, izometrik, temiz illüstrasyon. Her görsel için alt metni de bu yöne göre yaz.

FİZİKSEL HAREKET & CSS YAY SABİTLERİ (Committed Spring Tokens):
Donanım hızlandırmalı yay eğrileri: Jenerik geçişler yerine tüm mikro ve makro etkileşimlerde aşağıdaki fizik tabanlı eğrileri kullan:
```css
:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
  --spring-snappy: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-hover: 250ms;
  --duration-reveal: 600ms;
  --duration-modal: 400ms;
  --stagger-delay: 45ms;
}
```

12-KOLONLUK KİLİTLİ ASİMETRİK BENTO IZGARA FORMÜLÜ (Gapless Bento Formula):
Asimetrik derinlik kurgusu: Standart simetrik kutular yerine aşağıdaki matematiksel span matrisiyle sıfır boş hücreli (gapless) ritim kur:
  • Izgara Kapsayıcısı: `grid grid-cols-12 gap-4 lg:gap-6 auto-rows-[280px] lg:auto-rows-[320px]` (grid-auto-flow: dense)
  • Kart 1 (Sinematik Ana Özellik / Canlı Görsel Sahnesi): `col-span-12 lg:col-span-8 row-span-2`
  • Kart 2 (Canlı Metrik / Tabular KPI Sayacı): `col-span-12 sm:col-span-6 lg:col-span-4 row-span-1`
  • Kart 3 (Etkileşimli Mikro Araç / Toggle / Seçici): `col-span-12 sm:col-span-6 lg:col-span-4 row-span-1`
  • Kart 4 (Tam Genişlikli Zaman Çizelgesi / Akış Şeridi): `col-span-12 row-span-1`
- SEKTÖRE ÖZEL İŞLEVSEL BİLEŞENLER (jenerik envanterin ÜSTÜNE, çalışır halde): fiyat tablosu · özellik ızgarası · demo CTA · entegrasyonlar. Bunlar statik görsel/mockup olamaz; her biri gerçek etkileşim, boş durum, hata durumu ve mobil davranış ile teslim edilir.
- Token tablosu: renk (rol bazlı), tip ölçeği (12-48 gövde/UI + display clamp), spacing (4-48), radius, gölge, hareket süreleri.
- Component envanteri (tüm state'leriyle & İNTERAKTİF TAMLIK SÖZLEŞMESİ): buton (primary/secondary/ghost), kart, form alanları, nav, footer, modal, toast; her sayfada aynı stil + tek stroke ikon dili. Sıfır dummy buton: her sekme, akordeon, modal, filtre ve hesaplayıcı gerçek reaktif state machine ile çalışır; boş console.log YASAK.
- 6 ZORUNLU ETKİLEŞİM DURUMU (her interaktif öğede committed): (1) Default: taban stil, ince border/kontrast. (2) Hover: arka plan kayması veya hafif scale (~1.02-1.05), 200ms ease-out. (3) Active/Pressed: dokunsal itme (scale 0.98 veya -translate-y-[1px]). (4) Focus-visible: 2px ring + ring-offset-2, accent renginde — sticky header altında GİZLENMEMELİ. (5) Disabled: opacity-40 + pointer-events-none. (6) Loading/Skeleton: shimmer dalga, layout boyutlarına uyumlu; jenerik yuvarlak spinner YASAK.
Motion stack (committed): GSAP + ScrollTrigger (başlıklarda SplitText karakter stagger), Lenis smooth scroll; uygun yerde Three.js/WebGL/shader (HAFİF, lazy-load). 60fps hedefle, ağır efektlere fallback ver, prefers-reduced-motion'a saygı göster — efekt Core Web Vitals'ı öldürmesin.


## MARKA & GÖRSEL VARLIKLAR

LOGO VEKTÖRÜ: Harici logo verilmediğinde, markanın adına uygun modern, geometrik ve minimalist bir SVG sembolü ve tipografik wordmark oluştur (ör. /public/logo.svg).


## ETKİLEŞİM & HAREKET SABİTLERİ (committed)

- Süre ATAMASI (eleman bazında, tahmin YOK): hover/focus/buton geri bildirimi mikro 150ms · açılır menü, akordeon, sekme geçişi standart 250ms · modal, sayfa/route geçişi, hero reveal vurgulu 400ms; giriş cubic-bezier(0.2,0.8,0.2,1), çıkış cubic-bezier(0.4,0,1,1); yalnız transform+opacity.
- Reveal: IntersectionObserver, y:16px→0 + opacity 0→1, 40-60ms stagger — hazır "AOS fade-up" DEĞİL. Hover: 1.02 scale veya 2-4px lift, 200ms.
- Smooth scroll (Lenis, lerp ~0.1); scroll-reveal yalnız anlamlıysa. Tüm hareket prefers-reduced-motion'da kapanır.


## İÇERİK & TİPOGRAFİK SANAT YÖNETİMİ

TİPOGRAFİK VE METİNSEL SANAT YÖNETİMİ (YER YER YAZILARIN DAVRANIŞI):

1. HERO & H1 BAŞLIKLARI: Clash Display 700-900 · clamp(2.5rem, 6vw, 4.5rem) · line-height 1.05-1.15 · text-wrap: balance · max-w-4xl (850px) ile 2-3 satır kilidi · viewport girişinde 30-50ms char/word stagger · başlık jenerik slogan değil, müşterinin elde edeceği nihai faydayı söyler.

2. H2 & BÖLÜM BAŞLIKLARI: Clash Display 600-700 · clamp(1.75rem, 3.5vw, 2.75rem) · 1-2 satır (text-wrap: balance) · fayda-önce retorik ("Hizmetlerimiz" değil "Operasyonunuzu 3 Katına Çıkaran 4 Temel Güç").

3. EYEBROW / ÜST ETİKET & ROZET: 11-13px uppercase · tracking-[0.2em] · font-mono ya da yarı-saydam accent border'lı hap rozet · format `// BÖLÜM ADI` veya `01 / PROTOKOL`.

4. GÖVDE METNİ: Satoshi 400-500 · 16-18px · line-height 1.6-1.7 · satır uzunluğu 60-75 karakter (max-w-prose / 65ch) · metin rengi committed Metin rolü #FFFFFF — saf #FFFFFF parlaması göz yorar, kullanılmaz.

5. MİKRO-KOPYA & CTA: buton metni aksiyon fiili ("Randevu Oluştur", "Teklif Al") · CTA'nın hemen altında 12px sürtünme kırıcı güvence satırı ("30 saniyede teklif · Kredi kartı gerekmez · 7/24 destek").

6. SAYISAL METRİK & KPI: font-variant-numeric: tabular-nums · display sayı clamp(2.5rem, 4vw, 4rem) + altında 2 satırlık somut kanıt bağlamı · yuvarlak "10.000+ mutlu müşteri" yerine bu işe özgü, doğrulanabilir rakam.

METİN ÖNCE, KOD SONRA: kod yazmadan ÖNCE her bölüm için gerçek metni tek tabloda ver (Bölüm | H2 | 1-2 cümle destek | CTA etiketi), sonra o tabloyu kodda BİREBİR kullan — kodlarken metin uydurmak jenerik sonuç üretir. "Lorem ipsum" YASAK; hero için yukarıdaki örnek H1/alt başlık/CTA'yı kullan ya da daha iyisini yaz. Her başlık bu işe ÖZGÜ ve faydaya dönük olsun, değer önermesi + itiraz karşılama taşısın; jenerik "Kalite · Güven · Tecrübe" YASAK.
TEK KİŞİYE YAZ: metnin tamamını "kurumsal yöneticiler" profilindeki TEK bir okura yaz — onun diliyle, onun itirazlarına cevap vererek; genel-kitle broadcast tonu YASAK.
COPY AÇISI (committed): Risk-azaltma: garanti, süreç şeffaflığı, kanıt ve geri-dönüş yolları omurga; "güvenli seçim biziz" hissi.
BÖLÜM DİREKTİFLERİ (her biri committed — yerleşim ritmi + mikro-etkileşim dahil):
- Özellikler: Bento / editöryel ritim: öğeleri önem sırasına göre farklı boyutlarda kur (1 büyük hero kart + 2 ikincil kart); her öğe fayda başlığı + 1 mikro-kanıt taşısın; fiyat tablosu, özellik ızgarası somut gösterilsin. Yerleşim: bento ızgara (2-1 ritim). Mikro-dokunuş: bölüm girişinde clip-path/maske reveal.
- Nasıl çalışır: 3-4 numaralı adım, her adımda süre/çıktı somutlanmış; bağlantılı çizgi veya zaman şeridiyle görselleştir; adım başına 1 somut kazanım vurgula. Yerleşim: tam-genişlik bant. Mikro-dokunuş: sayı/etiketler count-up veya decode efektiyle gelir. Kanıt öğesi: Güvenlik/uyumluluk (SOC2/GDPR).
- Fiyatlandırma: 3 kademe, ortadaki vurgulu; her kademede kim-için satırı + net fiyat/değer + itiraz-kıran mikro-metin ve doğrudan eylem CTA'sı yerleştir. Yerleşim: çapraz/katmanlı kolaj. Mikro-dokunuş: scroll'a bağlı hafif parallax katmanı (reduced-motion'da kapalı).
- Sosyal kanıt / logolar: bu bölümü bu işe ÖZGÜ, faydaya dönük TEK bir fikirle kur (dolgu bölüm YASAK). Yerleşim: ortalanmış dar kolon (maks 65ch). Mikro-dokunuş: kartlarda hover'da derinlik (gölge + hafif tilt), focus'ta aynı etki. Kanıt öğesi: Müşteri logoları.
- SSS + CTA: Gerçek satın-alma itirazlarından 5-6 soru (fiyat, süre, güven, süreç); kısa ve dürüst cevaplar; FAQPage JSON-LD ekle. Yerleşim: editöryel yan-şerit (sticky başlık + akan içerik). Mikro-dokunuş: başlık viewport'a girince karakter-stagger reveal.


## UX & DÖNÜŞÜM

- Fold üstünde net değer önermesi + TEK birincil CTA; sürtünmeyi azalt.
- Sosyal kanıt (sayısal sonuç, logo, garanti) itirazları karşılasın; hiyerarşi boyut/boşluk/kontrastla (sadece renkle değil).
- Her etkileşimli öğede hover/focus/active/disabled; >300ms işlemde skeleton; anlamlı boş/hata durumları.
- Formlar: görünür etiket, alan altında hata + düzeltme yolu, blur'da inline doğrulama, zorunlu işaret.


## SEO STRATEJİSİ

SEO & PAYLAŞIM STANDARDI (Standart SEO):
  - Meta Title: ≤60 karakter, anahtar kelime başta + marka ayracı.
  - Meta Description: 140-155 karakter, pasif cümle yok, doğrudan değer vaadi + CTA.
  - Canonical: Her sayfada self-referencing absolute canonical linki.
  - OpenGraph & Twitter: og:title, og:description, og:image (1200x630 px), twitter:card (summary_large_image).
  - robots.txt & sitemap.xml: Temiz taranabilirlik, sitemap URL deklarasyonu.
  - JSON-LD Schema (COMMITTED tipler, @graph içinde @id ile bağlı): Organization, WebSite, SoftwareApplication, Offer, AggregateRating, FAQPage, BreadcrumbList — <head> içine gömülü.

```json
{"@context":"https://schema.org","@graph":[
  {"@type":"Organization","@id":"https://SITE/#org","name":"İşletme Adı","url":"https://SITE/"},
  {"@type":"WebSite","@id":"https://SITE/#site","url":"https://SITE/","publisher":{"@id":"https://SITE/#org"}},
  {"@type":"Offer","@id":"https://SITE/#e0"},
  {"@type":"AggregateRating","@id":"https://SITE/#e1"},
  {"@type":"SoftwareApplication","@id":"https://SITE/#main","parentOrganization":{"@id":"https://SITE/#org"}}
]}
```
Bu @graph/@id bağlama modelini committed tüm tiplere uygulayın; her düğüm tek script'te kalır.


## KALİTE TABANI (standart — tek tek anlatma, sadece UYGULA)

- Performans — LAB (Lighthouse ile ölç, skor ağırlıkları: TBT %30, LCP %25, CLS %25, FCP %10, SI %10): dört kategoride 95+. SAHA (CrUX, gerçek kullanıcı): LCP ≤2.5s, INP ≤200ms, CLS ≤0.1. INP Lighthouse skoruna girmez — laboratuvarda vekili TBT'dir, onu düşür. Görsellerde width/height, font-display: swap.
- WebP/AVIF + srcset, fold altı lazy-load, kritik CSS inline, üçüncü-parti script defer.
- WCAG 2.2 AA — 24 AA ölçütünün TAMAMI geçerlidir; aşağıdakiler en sık atlananlar, tükenmiş liste değil: semantik HTML, kontrast ≥4.5:1, görünür focus (2-3px ring), tam klavye, alt metin, ARIA, prefers-reduced-motion. Ek 2.2 gereksinimleri: masaüstü interaktif hedef ≥24×24px (2.5.8), focus ring sticky header altında gizlenmemeli (2.4.11), @media (prefers-reduced-motion: reduce) ile TÜM animasyon/transition sürelerini ≤0.01ms'e indir — bu media query ZORUNLU, opsiyonel değil.
- Dokunma ≥44×44px (+8px ara); cursor: pointer; 4/8px spacing skalası; tek ikon seti (Lucide/Heroicons), emoji ikon YOK.
- Mobile-first; 375/768/1024/1440; yatay kaydırma yok; satır 60-75 karakter; kök container overflow-x-hidden.
- Hareket yalnız transform+opacity; süre ve easing kanonu ETKİLEŞİM & HAREKET SABİTLERİ bloğudur; her animasyon anlam taşır.
- "Lorem ipsum" ve mor yapay zeka gradyanları YASAK; jenerik şablon görünümü, amaçsız emoji, cansız düz düzen YOK — hiyerarşi, ritim, atmosferik derinlik (SVG grain/noise, 1px border gradient, süptil radyal ortam ışığı, custom scrollbar) ve karakter.


## ÜRETİM TEMELİ (production-ready — atlanırsa site EKSİK sayılır)

HEAD & META (eksiksiz <head>):
- charset, viewport, lang · <title> ≤60 + description ≤155 · canonical · OG + Twitter Card + 1200×630 OG görseli · favicon seti (ico + 32px + apple-touch 180px + maskable) · theme-color = committed palet arka planı · font preconnect/preload, kritik CSS inline, script defer.
TEKNİK PRODUCTION & TİP GÜVENLİĞİ (Zod & TypeScript Sözleşmesi):
- robots.txt + sitemap.xml + markalı 404 (seçilen teknolojiye uygun dosyalar) · no-JS/yavaş-ağ fallback · konsol TEMİZ (0 hata/uyarı, kırık link/görsel yok).
- İletişim formu: görünür etiket, inline hata, honeypot, gönderiliyor/başarı/hata durumu ve tekrar deneme. Başarı yalnız sunucu onayı sonrasında gösterilir; bağlantı yoksa "gönderim yapılandırılmadı" durumu göster, veriyi koru ve canlıya geçiş eksiğini listele. Form/API sınırlarını Zod (`z.object({...})`) ile çalışma anında doğrula; TypeScript tipleri çalışma anı doğrulamasının yerine geçmez.
DOĞRULANAMAZ VERİ (uydurma YASAK):
- Telefon, adres, e-posta, fiyat, sertifika/lisans numarası, gerçek müşteri adı ve istatistik brief'te VERİLMEDİYSE uydurma. Yer tutucu izni yalnız işletme bilgileri içindir: önizlemede `{{TELEFON}}` `{{ADRES}}` `{{FİYAT}}` göster, sonunda "DOLDURULACAK" listesi ver; bunları aktif tel/mailto/ödeme bağlantısına veya JSON-LD olgusuna dönüştürme. Kodda boş işlev/TODO/eksik dosya bırakma. Tasarım kararlarını (renk, ölçü, düzen, metin tonu) uzman gibi committed doldurmaya DEVAM et.
GÜVEN & YASAL:
- Çerez izni banner'ı (kabul/ret) · footer'da Gizlilik Politikası / KVKK aydınlatma linki · analytics (GA4 veya Plausible) yalnız consent verilince yüklenir · footer iletişim (NAP), sosyal, telif ve yasal linkleri taşır.
SAĞLAMLIK:
- Cross-browser Chrome/Safari/Firefox/Edge son 2 sürüm + iOS Safari · safe-area env(safe-area-inset-*) ile notch/alt bar, mobilde 100svh · görsel/font yüklenmezse alt metin ve fallback, içerik JS olmadan da okunur.
TESLİM:
Net dosya yapısı + kur/çalıştır komutları + KESİN bağımlılık listesi: kullandığın her paketi ad ve sürümüyle `dependencies` JSON bloğu olarak ver — kodda import ettiğin ama bu listede olmayan paket YASAK (uydurma paket = çalışmayan proje). Font/asset kaynaklarını da ekle.
</spec>

<failure_modes>
═══ PART B — KAÇINILACAK HATALAR & FEW-SHOT STANDARDI ═══
FEW-SHOT KOD STANDARDI (Bunu Yapma ❌ → Bunu Yap ✅):
```html
<!-- ❌ BAD (AI-Slop & Şablon Refleksi): Düz zemin, jenerik boşluk, cansız tipografi -->
<div class="bg-gray-900 p-6 rounded-lg shadow-lg">
  <h3 class="text-xl text-white font-bold">Hızlı Çözüm</h3>
  <p class="text-gray-400">En kaliteli ve güvenilir hizmet.</p>
</div>

<!-- ✅ GOOD ($10K+ Awwwards Kalibre): Derinlik, 1px mikron kenarlık, ambient glow, asimetrik tipografi -->
<div class="group relative p-8 rounded-2xl bg-gradient-to-b from-white/[0.07] to-transparent border border-white/10 backdrop-blur-xl overflow-hidden hover:border-cyan-500/30 transition-all duration-500">
  <div class="absolute -top-24 -right-24 w-48 h-48 bg-cyan-500/10 rounded-full blur-3xl group-hover:bg-cyan-500/20 transition-all duration-700 pointer-events-none"></div>
  <span class="font-mono text-xs text-cyan-400 tracking-widest uppercase">// SİSTEM METRİĞİ</span>
  <h3 class="text-2xl font-medium tracking-tight text-neutral-100 mt-2 text-balance">Milisaniyelik Yanıt Eşiği</h3>
  <p class="text-sm text-neutral-400 leading-relaxed mt-2 max-w-prose">Tüm veri trafiği edge sunucularda 40ms altında deterministik olarak işlenir.</p>
</div>
```

✗ H1 4+ satıra sarıyor; dev font küçük max-width = okunmaz blok — Sebep: tipografi ölçeğini test etmemek → Fix: max-w-5xl/6xl + clamp() akışkan boyut; H1 2-3 satırı GEÇMEMELİ
✗ Bento grid boş hücreler bırakıyor, dengesiz ızgara — Sebep: col-span matematiğini yapmamak → Fix: grid-auto-flow: dense + kilitli col-span/row-span hesabı; boş hücre YASAK
✗ Yapay "SECTION 01 / QUESTION 05" numaralandırma — Sebep: jenerik AI scaffold refleksi → Fix: semantik, anlam taşıyan başlıklar; dekoratif numaralama YASAK
✗ h-screen kullanımı → mobilde browser UI altında içerik kaybolur — Sebep: masaüstü varsayımı → Fix: min-h-[100dvh] (dynamic viewport height) kullan; h-screen YASAK
✗ Yatay kaydırma sızıntısı (taşan öğe, gizli overflow yok) — Sebep: taşma kontrolünü atlamak → Fix: kök container overflow-x-hidden + 375px'te yatay kaydırma testi
✗ Jenerik hero (ortalı başlık + gradient blob + "Get Started" butonu) — Sebep: şablon refleksi → Fix: A bölümündeki committed asimetrik hero + signature anı uygula
— Sektöre özel (SaaS / Teknoloji):
✗ Özellik yığını (fayda/sonuç yok), fiyatlandırma gizli — Sebep: ürün-merkezli anlatım → Fix: fayda-önce + net fiyat tablosu + demo/trial CTA
</failure_modes>

<build>
═══ PART C — ÜRETİM (gerçek içerik + tam, çalışır kod) ═══


## KOD & PROJE AĞACI

PROJE KLASÖR & DOSYA MİMARİSİ (YOL REHBERİ):
```text
next15-app-router/
├── docs/ (HANDOFF.md, TASKS.md, SYSTEM_MAP.md, WORKLOG.md, MONOLITH_CHAIN.md)
├── .env.example
├── next.config.ts
├── package.json
├── tsconfig.json
├── public/
│   ├── favicon.ico, favicon.svg
│   ├── robots.txt, sitemap.xml, llms.txt
│   └── images/ (og-image.jpg 1200x630, logo.svg)
└── src/
    ├── app/
    │   ├── layout.tsx (font preload + JSON-LD @graph + theme-color)
    │   ├── page.tsx (home page — section list from PART A)
    │   ├── not-found.tsx (branded 404), error.tsx, loading.tsx
    │   ├── api/ (contact/route.ts, og/route.tsx)
    │   └── globals.css (@import "tailwindcss"; @theme committed tokens)
    ├── components/
    │   ├── ui/ (button.tsx, input.tsx, dialog.tsx, badge.tsx, tabs.tsx, card.tsx — 6-state matrix)
    │   ├── layout/ (navbar.tsx, footer.tsx, mobile-drawer.tsx, theme-toggle.tsx)
    │   ├── motion/ (scroll-reveal.tsx, magnetic-button.tsx)
    │   └── sections/ (hero-section.tsx + one file per PART-A section)
    ├── lib/ (utils.ts, validations/ — Zod schemas, seo/ — jsonld.ts)
    └── hooks/ (use-debounce.ts, use-media-query.ts, use-theme.ts)

# DOSYALAMA DİSİPLİNİ:
# 1. Dosya Başına <300 Satır: SRP (Tek Sorumluluk); god-file KESİNLİKLE YASAK.
# 2. Modüler Sınırlar: UI primitives / layout / feature ayrımı net; sunum ve mantık katmanları izole.
# 3. Şema & Tip Güvenliği: Form ve API girdi modelleri doğrulanmış şemalarla kilitli.
# 4. Sistem Hafızası: docs/ altında anlık durum (HANDOFF.md), görevler (TASKS.md) ve mimari kararlar (WORKLOG.md) atomik işlenir.
```

TESLİM BİÇİMİ: DOSYALI PROJE — Cutting-edge 2026 — Next.js 15+ · React 19 · TypeScript · Tailwind v4 · shadcn/ui · Motion ile her dosya için göreli yol + tam içerik ver; giriş dosyaları, import hedefleri ve yapılandırma eksiksiz olsun. Bu aşamanın dışındaki rotaları ekleme; kodu tek Artifact içine sıkıştırma.
STACK DİREKTİFİ (committed — bu stack'in deyimiyle yaz): App Router + React Server Components; "use client" sınırları bilinçli ve minimal; next/image + next/font; Tailwind v4 @theme token'ları = committed palet; route-level loading/error/not-found; Framer Motion yalnız client adalarında.
ÖNEMLİ: Çıktı tek yanıta sığmazsa, en önemli kısmı (tasarım sistemi + ana sayfa) TAM ver; "devam" dediğimde kaldığın yerden eksiksiz sürdür. Asla yarım/yer tutucu kod bırakma.
TAMAM TANIMI (Claude): TESLİM BİÇİMİ ile uyumlu eksiksiz dosyalar; her importun karşılığı var, yarım kod yok; eksik işletme bilgileri DOLDURULACAK listesinde.


## SONRAKİ ADIMLAR (sadece tek satır listele, ŞİMDİ YAPMA)

Ana sayfadan sonra ayrıca istenebilecekler: diğer sayfalar (hizmet detay, hakkımızda, iletişim, blog) ve yardımcı/yasal içerikler. CMS seçilmedi; yönetim paneli oluşturma.


## ÇIKTI FORMATI

1. Kısa konsept & tasarım gerekçesi (1 paragraf)
2. Tasarım sistemi: palet (HEX) + tipografi + spacing
3. Ana sayfa — bölüm bölüm gerçek içerik
4. TAM, çalışır kod
5. SEO paketi (meta, OG, JSON-LD schema)
</build>

<verify>
═══ PART D — DOĞRULAMA (teslimden ÖNCE mekanik kanıtla doğrula; geçmeyeni düzelt) ═══
KANIT PROTOKOLÜ (her ☐ maddesi için): kontrolü ÇALIŞTIR ve komut/eylem + gözlenen sonuç raporla. Araç yoksa ÇALIŞTIRILMADI yaz, kullanıcıya uygulanabilir kontrol adımı ver; kod incelemesini tarayıcı/derleme kanıtı sayma. Eksik bağlantı veya işletme bilgisi varsa canlıya hazır deme.

☐ Çerez izni banner'ı + Gizlilik/KVKK linki + (consent'e bağlı) analytics var mı? KANIT: consent REDDEDİLDİĞİNDE analytics script'i yüklenmiyor (Network'te yok).
☐ robots.txt + sitemap.xml verildi mi; safe-area (notch) ve cross-browser gözetildi mi? KANIT: her iki dosya isteği 200 dönüyor.
☐ Fold (ilk ekran): committed H1 + TEK net birincil CTA görünür; gerçekten "vay" etkisi var mı? Kararını tek cümleyle gerekçelendir.
☐ Sayfada en az 1 signature an (A bölümü) gerçekten uygulandı mı? Uygulanan bölümü adıyla göster.
☐ Hiçbir yerde Lorem ipsum / jenerik başlık YOK; her başlık bu işe ÖZGÜ mü? KANIT: `grep -ri "lorem" src/` boş dönüyor.
☐ Renkler birebir A bölümü HEX'leri mi? Metin/zemin kontrastı ≥ 4.5:1 mi? KANIT: committed metin/zemin çifti için relatif parlaklık hesabını göster.
☐ Font A bölümündeki committed ikili mi ve <head>'de yükleniyor mu? KANIT: render edilen <head>'de her iki fontun linki/preload'i görünüyor.
☐ 375px'te yatay kaydırma YOK; dokunma hedefleri ≥ 44px; mobil masaüstünün kopyası DEĞİL ayrı tasarlanmış mı? KANIT: 375px'te document.documentElement.scrollWidth ≤ 375 ölçümü.
☐ Klavye ile tüm etkileşimlere erişiliyor, focus halkası görünür mü? KANIT: Tab turunun odak sırasını listele (ilk→son interaktif öğe).
— Sektöre özel (SaaS / Teknoloji):
☐ Net fiyatlandırma + demo/ücretsiz deneme CTA + güvenlik/uptime/sosyal kanıt var mı?
</verify>

<design_plan_instructions>
Kod üretimine başlamadan önce <design_plan> bloğu açarak şunları MATEMATİKSEL olarak planla (tipografi ölçeği ve kontrast eşikleri PART A'da verildi, burada tekrar edilmez — hesabını göster):
1. Bento Grid Yoğunluğu: grid-auto-flow: dense ile boş hücre kalmayacağını kanıtla.
2. Hareket Amacı: Her GSAP/Motion tetikleyicisinin hangi hiyerarşik veya anlatısal amacı taşıdığını belirt.
</design_plan_instructions>

<output_format>
Yanıta <design_plan> içinde pre-flight analiziyle başla; sonra ÇIKTI FORMATI sırasını uygula. Etiketli blokların HEPSİ bağlayıcıdır.
</output_format>
DIŞA AKTAR:
Yapay zeka prompt sihirbazı nedir?

Prompt sihirbazı, görsel üreten yapay zeka araçlarına verilecek komutları yapılandırılmış şekilde oluşturmanızı sağlar. Stil, kompozisyon, ışık ve kamera parametrelerini seçerek Midjourney, DALL-E, Gemini, ChatGPT ve Adobe Firefly için tutarlı sonuç veren promptlar üretirsiniz; her modelin kendi söz dizimine uygun çıktı alırsınız.
Nasıl kullanılır?

1Üretmek istediğiniz görselin konusunu yazın.
2Stil, ışık, kompozisyon ve kamera parametrelerini seçin.
3Hedef aracı (Midjourney, DALL-E, Firefly vb.) belirleyin.
4Oluşan promptu kopyalayıp ilgili araca yapıştırın.
Sıkça sorulan sorular

Neden hazır prompt kullanmak gerekiyor?

Üretken yapay zeka araçları belirsiz komutlara tahmin yürüterek cevap verir, bu yüzden aynı istek her seferinde farklı sonuç üretir. Stil, ışık ve kompozisyonu açıkça belirten yapılandırılmış bir prompt, tekrar edilebilir ve marka çizgisine uygun görseller almanızı sağlar.
Her araç için aynı prompt çalışır mı?

Hayır. Midjourney parametre bayrakları kullanır, DALL-E ve ChatGPT doğal dil cümlelerine daha iyi yanıt verir, Firefly ise kendi stil etiketlerine sahiptir. Araç, seçtiğiniz hedefe göre söz dizimini uyarlar; aynı fikri farklı motorlarda denemek için hedefi değiştirmeniz yeterlidir.
Ürettiğim görselleri ticari olarak kullanabilir miyim?

Bu tamamen kullandığınız yapay zeka aracının lisans şartlarına bağlıdır, bu araca değil. Midjourney, OpenAI ve Adobe farklı ticari kullanım koşulları uygular ve bunlar zaman içinde değişir. Ticari bir işte kullanmadan önce ilgili servisin güncel lisans metnini kontrol edin.