Opus Growth hosting sunucumdaki
[sunucu adı] sitesine, tek ürün satan markam
[marka adı] için doğrudan tüketiciye satış yapan bir ürün sayfası ve yanındaki birkaç sayfayı kur. Ürün:
[ürün adı, ne işe yarar, kimin için]. Fiyat:
[fiyat]. Renk ya da varyantlar: [her biri için ad, renk kodu ve AYNI açıdan, AYNI tuvalde çekilmiş fotoğraf bağlantısı]. Teknik özellikler: [ölçüler, malzeme, ağırlık ve ölçüm koşullarıyla birlikte performans değerleri]. Karşılaştırılacak modeller:
[kendi diğer modelleriniz ve değerleri]. Satın alma bağlantısı:
[mağaza adresi ve varyant parametresi]. Kargo, iade ve garanti:
[süreler ve koşullar]. İletişim:
[e-posta],
[telefon],
[WhatsApp numarası],
[adres]. Alan adı:
[alan adı].
Sayfalar: ürün ana sayfası (/), garanti ve iade (/garanti-ve-iade/), iletişim (/iletisim/), gizlilik ve KVKK (/gizlilik/) ve 404.html. Ana sayfanın bölümleri sırasıyla: hero (solda 3D vitrin, sağda etiket, h1, iki cümlelik açıklama, fiyat, renk seçici, satın al düğmesi ve kargo, iade, garanti özeti), ürünün nasıl çalıştığını anlatan üç kısa bölüm, teknik özellikler tablosu (#ozellikler), boyut ya da model karşılaştırma tablosu (#karsilastir), SSS (#sss). Menüde bu bölümlere sayfa içi bağlantılar ve garanti ile iletişim sayfaları olsun. Sepet ve ödeme bu sitede yok; satın al düğmesi seçili varyantla mağaza sayfasına gider ve sayfa bunu açıkça söyler.
Tarz: Sade, modern bir doğrudan satış (D2C) ürün sayfası. Sıcak kırık beyaz zemin, ürün rengiyle uyumlu tek marka rengi, siyah yuvarlak satın al düğmesi, temiz tablolar. Tipografi Fontshare'den sıkı bir grotesk display (ör. Familjen Grotesk 500 ve 700) ve okunaklı bir gövde (ör. Ranade 400 ve 500). Sahnenin yıldızı ürün fotoğrafı; cesaret yalnız 3D vitrinde. GSAP, Lenis ve Swiper yüklenmez; tek JavaScript, vitrini eğen 1 KB'tan küçük satır içi bir betik.
3D vitrin, renk seçici ve satın al çubuğu kuralları (harfiyen uygula):
1. 3D vitrin yalnız CSS ile kurulsun: kapsayıcıda `perspective: 1100px`, içteki kartta `transform: rotateX(var(--rx, 3deg)) rotateY(var(--ry, -7deg))` ve `transform-style: preserve-3d`, 0,3 saniyelik transform geçişi. JavaScript yokken ve dokunmatik ekranda kart bu hafif eğik pozda durur. İki küçük rozet (ör. hacim ve performans değeri) `translateZ(60px)` ile kartın önünde süzülsün ve aria-hidden olsun; aynı bilgi metinde de yazsın. Görselin üstüne işaretçiyi izleyen yumuşak bir parlama (radial-gradient, --gx ve --gy değişkenleriyle) koy.
2. Eğme betiği sayfa sonunda satır içi olsun ve yalnız `matchMedia("(pointer: fine) and (prefers-reduced-motion: no-preference)")` doğruysa çalışsın. pointermove'da işaretçinin kart içindeki konumunu -0,5 ile 0,5 arasına çevirip --ry'yi en fazla 8, --rx'i en fazla 6 derece yapsın, yazmayı requestAnimationFrame ile sınırlasın; pointerleave'de değişkenleri kaldırıp varsayılan poza dönsün. Yalnız transform değişir, düzen hiç kaymaz. design-check hareketi tanısın diye vitrin kapsayıcısına data-reveal="tilt" niteliği ekle.
3. Renk seçiciyi JavaScript'siz kur: `<fieldset>` ve `<legend>` içinde her varyant için gerçek bir `<input type="radio" name="renk">` ve onu saran 44x44 piksellik bir `<label>`; radio görsel olarak gizli (sr-only), renk dairesi `input:checked + .dot` ile çift halka, `input:focus-visible + .dot` ile odak halkası alsın; ok tuşlarıyla renk değişsin. Bütün varyant görselleri aynı `aspect-ratio` kutusunda `position: absolute; inset: 0` ile üst üste dursun, yalnız `opacity` değişsin; böylece renk değişirken düzen kaymaz (demoda CLS 0). Seçimi `.urun:has(#r-renk:checked)` ile görsele, legend'daki renk adına ve satın al bağlantısına yansıt. Tarayıcı :has desteklemiyorsa varsayılan varyantın görseli, adı ve bağlantısı görünür kalsın.
4. Varsayılan varyantın görseli LCP öğesidir: fetchpriority="high", lazy değil. Diğer varyant görselleri loading="lazy" decoding="async". Varyant fotoğrafları aynı açıdan, aynı tuvalde ve aynı kırpımla çekilmiş olmalı; değilse renk değişirken ürün yer değiştirir. Bunu bana sor, farklı açılı fotoğrafları kırparak eşleştirmeye çalışma.
5. Seçime göre gösterilen satın al bağlantılarında görünürlüğü `.btn-buy` gibi düğme sınıfının `display` değeri ezmesin. Demoda `.vb { display: none }` kuralı daha sonra gelen `.btn-buy { display: inline-flex }` tarafından ezildi ve dört satın al düğmesi birden göründü; kuralı `.urun :is(.vb)` gibi daha özgül bir seçiciyle yaz ve tarayıcıda yalnız bir düğme göründüğünü doğrula.
6. Mobilde yapışkan satın al çubuğu: 768 pikselin altında `position: fixed; bottom: 0` bir çubuk; içinde ürün adı ve fiyat, seçili rengin adı ve tek bir "Satın al" düğmesi (en az 48 piksel). Düğme metni kısa kalsın ve satır kırmasın (`whitespace-nowrap`); renk adı ekran okuyucu için sr-only metin olarak düğmenin içinde dursun. Çubuk içerik ve alt bilgiyi örtmesin diye body'ye çubuk yüksekliği kadar alt boşluk ver ve sayfanın en altındaki son bağlantının çubuğun üstünde kaldığını kontrol et. Masaüstünde çubuk gizli.
7. Tablolar: teknik özellikler tablosunda satır başlıkları `<th scope="row">`, görünmez bir `<caption>` ve ölçüm koşullarını söyleyen bir cümle olsun (ör. oda sıcaklığı, kapak kapalı). Karşılaştırma tablosunda yalnız kendi modellerini karşılaştır, rakip adı ve rakip iddiası yazma; satılan modelin sütununu zemin rengiyle vurgula ama bilgiyi yalnız renge bırakma. Dar ekranda taşmasın diye tabloyu `<section aria-label="..." tabindex="0" class="overflow-x-auto">` içine al; role="region" yazma, html-validate onu prefer-native-element hatası sayar.
Kurulum ve bilinen tuzaklar (demo ölçümünde her biri puanı ya da bir kapıyı düşürdü, atlama):
1. Sunucuda yayında bir site varsa önce bana söyle, çünkü kurulum index.html ve assets klasörünü ezer. scaffold_site'ı önce confirm=false ile önizle, onayımla confirm=true çağır. Sonra site_design_guide ve site_seo_guide'ı oku. Koda başlamadan tasarım yönünü (tipografi, renk, ızgara, imza öğesi, hareket dili ve YÜKLENMEYECEK kütüphaneler) assets dışında kısa bir ART.md dosyasına yaz ve bana göster.
2. Tailwind'i derle, CDN'den yükleme. site_run_command ile background=true vererek `npm i -D tailwindcss@3` kur ve sonucu site_command_status ile izle. `tailwind.config.js` içindeki content yolları alt klasörler dahil bütün HTML dosyalarını, `_src/*.tpl` şablonlarını ve sınıf yazan JS dosyalarını kapsasın. `_src/tw.css` dosyası `@import "../assets/app.css";` satırı ve üç `@tailwind` satırından oluşsun; `npx tailwindcss -c tailwind.config.js -i _src/tw.css -o assets/site.css --minify` ile tek dosyaya derle. Sayfalardan cdn.tailwindcss.com betiğini, satır içi tailwind.config'i, chrome.js'i ve motion.js'i kaldır, yalnız `/assets/site.css` bağla. Her HTML değişikliğinden sonra yeniden derle. Renk dairelerinin renklerini `bg-
[#28385C]` gibi keyfi değer sınıflarıyla verirsen bunlar HTML'de geçtiği için derlemeye girer.
3. Fontları kendi sunucunda barındır. Fontshare CSS'ini her aile ve ağırlık için ayrı istekle oku (`https://api.fontshare.com/v2/css?f[]=aile@ağırlık`), her woff2 dosyasını site_fetch ile `assets/fonts/` altına indir ve @font-face kurallarını `font-display: swap` ile `assets/app.css` içine yaz; design-check özgün fontu orada arar. İlk ekranda kullanılan HER ağırlığı (başlık, gövde ve düğme) her sayfada `<link rel="preload" as="font" type="font/woff2" crossorigin>` ile önceden yükle ve bu satırları stil dosyası bağlantısından önce koy. Fontshare fontlarının çoğunda ₺ işareti yok, fiyatı "TL" ile yaz.
4. Menüyü ve alt bilgiyi statik HTML yap. site.config.js'teki nav listesini okuyup `_src/header.tpl` ve `_src/footer.tpl` şablonlarını her sayfadaki `<!-- nav:start --><!-- nav:end -->` ve `<!-- footer:start --><!-- footer:end -->` işaretlerinin arasına basan küçük bir `chrome-stamp.mjs` yaz; etkin sayfanın bağlantısına aria-current="page" eklesin. Şablonların uzantısı .html olmasın ve içlerinde `{{...}}` yerine `
[[NAV]]` gibi yer tutucu kullan. Mobil menüyü JS'siz `<details>` ile kur. Alt bilgide işletme adı, adres ve telefon düz metin olarak dursun; alt bilgi ve kırıntı bağlantıları da en az 44 piksel yüksekliğinde olsun.
5. Görselleri site_fetch ile indirirken dönüştür: aynı fotoğrafı resize="480x", "800x" ve "1120x" (ya da sayfanın gerektirdiği genişlikler), image_format="webp", quality=65 ile ayrı dosyalara yaz. Her `<img>` için srcset, sizes ve gerçek oranla aynı width ve height ver. İlk ekrandaki ana görsel fetchpriority="high" olsun ve lazy olmasın; fetchpriority'yi yalnız gerçek LCP öğesine ver, diğerleri loading="lazy" decoding="async" olsun. Varyant görsellerini 4:5 oranında resize="480x", "720x" ve "960x" olarak indir.
6. Site köküne küçük bir `favicon.svg` yaz ve her sayfaya `<link rel="icon" href="/favicon.svg" type="image/svg+xml">` ekle; logonun PNG'si varsa site_fetch ile resize="180x180", image_format="png" vererek apple-touch-icon üret. Favicon yoksa tarayıcı /favicon.ico için konsola 404 yazar ve En İyi Uygulamalar puanı 96'ya düşer.
7. HTML doğrulayıcısının kuralları: belge büyük harfli `<!DOCTYPE html>` ile başlasın, nitelikleri çift tırnakla yaz, tel: bağlantılarının görünen metnindeki boşluklar ` ` olsun, style="" niteliği kullanma (bir CSS değişkeni gerekiyorsa Tailwind'in `
[--r:-4deg]` gibi keyfi özellik sınıfını kullan), her düğmeye type="button" yaz, aria-label'ı `<ul>` ya da `<div>` gibi rolü olmayan öğelere koyma ve role="region" yerine `<section aria-label="...">` kullan.
8. Dokunma hedefi denetimi görsel olarak gizli radio'yu 1 piksel diye işaretleyebilir; asıl dokunma hedefi onu saran label'dır. Label'ın en az 44x44 piksel olduğunu ölç ve gerekçesini rapora yaz.
SEO, AEO ve GEO:
1. Adresleri dizin biçiminde ve sonu eğik çizgili kur (/garanti-ve-iade/, /iletisim/, /gizlilik/). site.config.js'in seo bloğunu doldur ve `node seo-stamp.mjs` çalıştır. Fiziksel mağazası olmayan bir marka için site.config.js'te localBusiness:false yaz. Ana sayfa: ItemPage (mainEntity ürün), ürün şeması ve FAQPage. Ürün şeması: tek varyant varsa Product ve Offer; renk varyantları varsa ProductGroup (productGroupID, variesBy https://schema.org/color, brand, description, material) ve hasVariant içinde her renk için Product (sku, color, image) ve Offer (price, priceCurrency TRY, availability, itemCondition, url olarak varyantın mağaza adresi, seller @id, shippingDetails ile OfferShippingDetails ve hasMerchantReturnPolicy ile MerchantReturnPolicy). Garanti ve iade sayfasında aynı MerchantReturnPolicy'yi @id ile ayrı blokta yayınla. GTIN, puan ve yorum yalnız bende gerçek değer varsa eklenir. Sayfaya özel her şemayı ayrı bir `<script type="application/ld+json">` bloğuna yaz ve @id ile temel grafiğe bağla. BreadcrumbList'i @graph içine gömme, kendi bloğunda dursun; seo-check onu yalnız böyle görür.
2. Title 48 ile 60 karakter olsun (seo-check 65'i aşanı hata sayar), description 145 ile 158 karakter, her sayfada tek h1. Her sayfanın ana içeriği en az 150 kelime olsun. Demoda garanti ve iade, gizlilik ve iletişim sayfaları ilk denemede 141, 124 ve 106 kelimede kaldı; "iade adımları", "veriler kimlerle paylaşılır" ve "garanti talebinde neler gerekir" gibi gerçek bilgilerle tamamlandı.
3. Her sayfanın ilk paragrafı sayfanın sorusuna doğrudan cevap versin; h1'i de bu soru gibi kur. Sayfaya özgü SSS'yi `<details>` ile yaz ve FAQPage olarak işaretle. Yayımlayan kurumu ve "Son güncelleme" tarihini `<time datetime>` ile göster.
4. robots.txt'te GPTBot, OAI-SearchBot, ChatGPT-User, ClaudeBot, Claude-User, Claude-SearchBot, PerplexityBot, Perplexity-User, Google-Extended, Applebot-Extended, Bingbot ve CCBot için kararını gerekçesiyle yaz ve sitemap'i göster. sitemap.xml'de gerçek lastmod olsun. llms.txt'te sitenin iki cümlelik doğru özeti ve önemli sayfaların listesi bulunsun.
5. Uydurma yok: bana sormadan yorum, puan, ödül, müşteri sayısı, sertifika, çalışma saati, koordinat, fiyat ya da ürün değeri yazma. Bilmediğin alanı şemaya hiç koyma.
Kapılar (sırayla; hepsi geçmeden "bitti" deme):
1. site_run_command ile sırasıyla `node chrome-stamp.mjs`, Tailwind derlemesi, `node seo-stamp.mjs`, `node seo-check.mjs` (0 hata, 0 uyarı), `node design-check.mjs` (0 hata; kalan uyarıyı gerekçesiyle yaz) ve `npx html-validate "**/*.html"` (0 hata).
2. Her sayfayı site_preview ile view="mobile" ve view="desktop" olarak gör. site_preview sayfayı hareket kapalıyken çeker; bu görüntüde içerik eksiksiz görünmüyorsa hareketsiz hal bozuk demektir. Tam sayfa görüntüsünde aşağıdaki lazy görseller boş çıkabilir; bunu hata sayma ama yolunu kontrol et.
3. Her sayfa için core_web_vitals'ı strategy="mobile" ve strategy="desktop" ile çalıştır. Kabul: mobilde Performance en az 95, Accessibility, Best Practices ve SEO 100; masaüstünde dördü de en az 95, hedef 100. Tutmayan sayfada resources=true ile hangi dosyanın geciktirdiğini bul, düzelt ve yeniden ölç. Ardından ana sayfada seo_audit'i strategy="mobile" ve runs=2 ile çalıştır. Ağ istekleri listesinde kendi alan adın dışında bir adres kalmamalı (mağaza ve WhatsApp bağlantıları istek değil, bağlantıdır).
4. 360, 390, 768 ve 1440 piksel genişlikte yatay kaydırma olmasın, dokunma hedefleri en az 44 piksel olsun, konsolda hata olmasın.
Etkileşim kontrolü: site_preview hareketi ve tıklamayı gösteremediği için bana kendi tarayıcımda neye bakacağımı yaz: masaüstünde fareyi ürünün üstünde gezdirince kart işaretçiye doğru eğilmeli ve rozetler önde süzülmeli, fare çıkınca eğik poza dönmeli; renk dairesine tıklayınca ya da ok tuşuna basınca görsel, renk adı ve satın al bağlantısı değişmeli, sayfada hiçbir şey kaymamalı; JavaScript kapalıyken renk seçici yine çalışmalı; telefonda alttaki çubuk hep görünmeli ve sayfanın sonundaki bağlantıları örtmemeli; hareketi azalt açıkken kart eğilmemeli.
Yayından sonra: site_headers ile `/assets/* Cache-Control: public, max-age=31536000, immutable` kuralını önizle ve onayımla uygula; bundan sonra CSS ya da JS değiştiğinde dosya adını sürümle (site-v2.css gibi). gsc_submit_sitemap ile sitemap.xml'i gönder ve gsc_url_inspect ile ana sayfanın durumuna bak. En sonda bana şunları ver: sayfa sayfa puan tablosu (sayfa, mobil dört puan, masaüstü dört puan, LCP, CLS), kapıların sonucu ve uyguladığın düzeltmelerin listesi.
