Webtures · Tasarım Sistemi

Webtures'un görsel dili tek sayfada.

Bu sayfa sitenin tüm sayfalarında kullanılan tasarım örüntülerinin ekibe yönelik referans kataloğudur. Her bölüm hem görsel örnekle hem de bu örüntünün neden bu şekilde kurulduğunun kısa açıklamasıyla birlikte verilmiştir.

01 · Marka

Webtures markası, net bir kurumsal duruş ve geniş editorial bir nefes üzerine kurulu.

Logo turuncu (#E95018) yalnızca aksiyon ve italik editöryal italikte kullanılır; metin ve yapı için warm-ivory ya da near-black surface tonu hâkimdir. "Ajans" kelimesi hiçbir yerde geçmez, em-dash işareti (—) Türkçe içerikte kullanılmaz.

Primary · CTA #E95018

Buton, link, accent vurgu. Sayfada tek dominant renk.

Surface · Canvas #0b0b0b

Karanlık modda ana arkaplan, kurumsal duruşun temeli.

Surface · Ivory oklch(0.98 0.008 78)

Aydınlık modda warm-ivory canvas. Editorial his verir.

02 · Renk paleti

Renkler token olarak tanımlı; doğrudan hex kullanma.

Tüm renkler src/styles/global.css üzerinden CSS değişkenleri olarak yayınlanır. Component'lerde var(--primary), var(--surface-canvas) gibi token kullanılır; karanlık ve aydınlık moda otomatik adapte olur.

Marka turuncusu (accent)

--primary#E95018
--accent-italic#d95127
--accent-muted#b84120
--accent-softrgba(217,81,39,0.08)

Surface (yüzey)

--surface-canvas#0b0b0b
--surface-elev#101010
--surface-soft#0a0a0a
--surface-card#0f0f0f

Sınır (border)

--border-subtlergba(255,255,255,.06)
--border-defaultrgba(255,255,255,.10)
--border-strongrgba(255,255,255,.18)
03 · Tipografi

Üç font ailesi, bilinçli kontrast: Geist + Instrument Serif + JetBrains Mono.

Geist sayfa metnini (sans, modern), Instrument Serif kavramsal italik vurguyu (editöryal nefes), JetBrains Mono ise eyebrow ve kod parçalarını taşır. Body 17–18px, line-height 1.65–1.75, measure 68ch. Başlıklar her zaman sentence case (Title Case değil), italik vurgu yalnızca kavramsal kelimelerde.

u-display

Görünür olmak artık ölçülebilir bir kıyaslamadır.

.u-display
section-title

AI çağında arama bambaşka bir yere doğru evriliyor.

.section-title (sentence case + em italik)
u-lede

Açılış paragrafı. Konuyu net şekilde tanımlar, ne öğreneceğinizi söyler ve neden Webtures perspektifinin bu konuda kıymetli olduğunu işaret eder.

.u-lede
description

Standart body cümlesi. 17–18px, line-height 1.7. Akıcı okuma için 68ch measure ile sınırlandırılır.

.description
u-caption

Görsel alt yazısı, dipnot veya küçük not için kullanılır.

.u-caption
04 · Mizanpaj & spacing

Spacing token'ları, her ekrana aynı ritimle nefes verir.

--space-1 ile --space-24 arasındaki ölçek 8'in katları (yarı + tam) üzerine kurulu. Section padding mobilde clamp ile 48 → 96 / 80 → 144 arasında lerp'ler. Container --content-max: 1280px.

--space-10.5rem · 8px
--space-21rem · 16px
--space-31.5rem · 24px
--space-42rem · 32px
--space-63rem · 48px
--space-84rem · 64px
--space-126rem · 96px
05 · Buton

Sadece iki buton: filled ve ghost.

Yeni varyant tanımlamayız; ekibe ait kural. Primary aksiyon her zaman dolgun turuncu (.btn.btn-primary); ikincil ise ince border + transparent (.btn.btn-ghost). Her iki buton da hover'da ok elementini 4px sağa kaydırır.

Kanonik · #1
83 (svc-btn) → bu bölüme katıldı.

Aktif: .btn.btn-primary · .btn.btn-ghost. Servis hero'ları için .btn.btn--hero modifier eklenecek. .svc-btn-* ailesi onay sonrası global.css'ten silinecek.

Birinci aksiyon İkincil aksiyon
Markup 
<a class="btn btn-primary" href="...">
  <span>İletişime geç</span>
  <span class="arrow" aria-hidden="true">→</span>
</a>

<a class="btn btn-ghost" href="...">
  <span>İncele</span>
  <span class="arrow" aria-hidden="true">→</span>
</a>

Inline kart CTA örüntüsü

Kart içinde "İncele →" mikro CTA için yeni stil tanımlamayız. HomeClientsBand pattern'ı kopyala: parent'a group, ok'a hover'da translate-x-1.

Card content

Card açıklaması. Hover'da ok kayıyor.

İncele
06 · Form

Form açıkça davet eder, asla yapmacık görünmez.

İletişim, brief, başvuru ve abone formları aynı dili konuşur: .form-card dış yüzey, .form-field input/textarea, .form-select dropdown, .form-checkbox KVKK onay kutusu. Focus state'inde accent halka belirir.

07 · Kart

Kart yapısal bir kap — içerik dilini kart belirler.

Üç kart ailesi var: editorial card (içerikle başlayan), orange-hover-card (servis grid'inde hover'da turunculaşan) ve testimonial-card (referans alıntısı). Her birinin kullanım bağlamı farklıdır; karıştırma.

Kanonik · #5
İskelet paylaşımı: 72, 77, 78 aynı kart base'ini kullanır.

Tüm kartlar surface-card bg + border-default + 14px radius + 1.75rem padding paylaşır. Cleanup'ta tek .card base sınıfı kalacak, içerik şablonları sadece child class'larıyla farklılaşacak.

Editorial

Generative Engine Optimization nedir?

Sayfa içeriklerinin AI motorları tarafından alıntılanabilir hâle getirilmesi sürecidir.

İncele

AI Agent Readiness

30+ kriter üzerinden websitenizin AI ajanları için ne kadar hazır olduğunu ölçer.

01

" Webtures multi-channel SEO programımızda gerçek anlamda bir stratejik ortak oldu.

BKM Kitap SEO & Performance
08 · Editorial başlık

Eyebrow + sentence-case başlık + italik kavramsal vurgu.

Tüm major bölüm açılışları aynı üçlüden oluşur: .u-eyebrow mono caps eyebrow, sentence-case .section-title, içinde <em> etiketiyle Instrument Serif italik kavramsal vurgu. Yeni varyant türetmek yerine bu örüntüyü kullan.

Performans pazarlama

Ölçülebilir büyümenin teknik altyapısını biz kuruyoruz.

Açıklama paragrafı, başlığın hemen altına yerleşir; lede dilini takip eder.

09 · CTA bandı

Sayfa sonu CTA bandı, bir sonraki adım için tek bir çağrı.

Servis sayfaları, blog yazıları ve landing'lerin sonunda HomeCtaBand komponenti kullanılır. Sade bir başlık + iki buton (primary + ghost) + sağ tarafta destek cümlesi şeklinde standartlaştırılmıştır.

İletişim

Markanız AI çağına hazır mı?

Brief paylaş Webtures'u tanı

16 yıllık deneyimli ekibimiz, BKM Kitap'tan Papara'ya kadar kurumsal markaların dijital görünürlüğünü ölçülebilir biçimde büyüttü.

10 · FAQ

FAQ örüntüsü AI motorları tarafından da rahat parse edilir.

Soru numaralı, açılır kapanır <details> bloklarıyla sunulur (.faqstili-* sınıfları). Schema FAQPage ile otomatik eşlenir; her soru <h3>'e sarılır.

01

Webtures kimdir?

İstanbul ve Londra ofisli, 16 yıllık deneyime sahip dijital strateji ekibi.

02

GEO neden önemli?

Çünkü kullanıcılar artık doğrudan AI motorlarına soru soruyor; SERP'i değil cevabı görüyor.

12 · Navigasyon & breadcrumb

Header sade, breadcrumb açıkça hiyerarşik.

Site header dropdown'lı mega menü kullanır (.nav-menu); breadcrumb 200 OK olan canonical URL'ye link verir, asla 301 zincirine girmez.

13 · Sayı / metrik

Büyük tek-rakam metrik, küçük açıklamayla soluk alır.

Hero alanlarında ve case study'lerde kullanılır. Sayı Geist 300 ile 64–120px arasında, label JetBrains Mono caps eyebrow (.u-eyebrow) ile altta.

Kanonik · #2
47 (delta) ve 71 (animated counter) → bu bölüme katıldı.

Aktif: .design-stat base + opsiyonel .design-delta + opsiyonel data-counter. Tek component, üç prop kombinasyonu.

+%214 Organik trafik artışı · BKM Kitap
+4.000 16 yılda hizmet verdiğimiz marka
93/100 Webtures kendi AAR self-skoru
14 · Ok & mikro etkileşim

Ok her yerde sağa doğru kayar, asla zıplamaz.

Buton, kart CTA ve breadcrumb-style "back" linkleri hover'da oklarını 4px (translate-x-1) kaydırır. prefers-reduced-motion set olduğunda animasyon kapanır.

Inline CTA Geri İncele
15 · Code & mono kullanımı

Mono font sadece teknik referans içinde kullanılır.

Inline kod (<code>) JetBrains Mono ile, accent zemin üstünde ufak padding'le rendere edilir. Eyebrow (.u-eyebrow) da aynı font ailesini kullanır ama uppercase + harf aralığıyla "etiket" hissini verir.

Servis sayfasında schema şu tipte yayınlanır: Service, alt tipi "AI search visibility consulting". Sayfa kanonik URL'i her zaman /generative-engine-optimization-geo/ şeklindedir.

16 · Animasyon

Hareket amaçlıdır, dikkat dağıtmak için değil.

Logo şeridi (hero-logo-scroll) sürekli yatay kayma; live indicator (animate-ping) gerçek-zamanlı sinyali iletmek için; carousel kayma transform tabanlı. prefers-reduced-motion her birini durdurur.

Live indicator
Şimdi analiz ediliyor
Hover lift

Kartın üzerine geldiğinde -2px Y kayar.

18 · Pull-quote · blockquote

Pull-quote, okuyucuyu durdurup kavramı işaretler.

Blog yazılarında ve servis sayfalarında ana mesajı vurgulamak için pull-quote kullanılır: Instrument Serif italik, sol tarafta accent kalın çizgi. Schema'da blockquote olarak emit edilir.

Markaların AI çağında ölçtüğü metrik artık tıklama değil, cevabın içinde alıntılanma sayısıdır.

Webtures · GEO manifesto
19 · Callout / note

Callout, akışı bölmeden önemli bir hatırlatma yapar.

Side-border'lı küçük bir not bloğu. CMS rich-text içinde .callout sınıfıyla kullanılır. İki ton: bilgi (accent), uyarı (kırmızımsı tonlara dönülmez — accent-italic ile yumuşatılır).

Kanonik · #6
75 (inline alert) → bu aileye katıldı.

Aktif: tek .alert base + 4 modifier (--info, --ok, --warn, --err). Hem editöryal callout hem status alert aynı componenti kullanır. Cleanup'ta .design-callout ve .design-alert merge edilecek.

Not

Tüm internal linkler 200 OK olan canonical URL'ye verilir; 301 zincirine bağlantı yapmak SEO eşitliğini kırar.

Dikkat

Türkçe içerikte em-dash (—) ve "ajans" kelimesi kullanılmaz. CLAUDE.md §webturesseoset kuralı.

20 · Tag · chip · status pill

Etiketler kategori sinyali; status pill ise canlı durumu söyler.

Blog kategorileri, sözlük etiketleri ve servis tag'leri için mono-caps "chip" kullanılır. Status pill (AAR analiz sonucunda) ready / partial / failed için renk kodludur.

Kanonik · #4
51 (notification badge) ve 47'deki delta-pill bu aileye dahil.

Hepsi rounded mono-caps chip pattern'ı. Aktif: .design-tag (kategori) / .design-pill--{ok|warn|err} (status) / .design-pill--badge (positioned badge). Cleanup'ta tek .pill base + modifier'lara indirgenecek.

SEO GEO AI Visibility Performance

Status pill

Agent Ready Partial Not Ready
21 · Tab · sliding indicator

Tab şeridi, aktif sekmeyi sürükleyerek takip eder.

HomeServicesTabs örüntüsü: tab'lar metin + numarayla yatay sıralanır, altta ince accent indicator aktif tab'a doğru kayar. Yeni tab grupları için bu pattern'i kopyala.

22 · Pagination

Pagination, sade ve klavyeden erişilebilir.

Insights/Blog ve referans grid'lerinde kullanılır. Aktif sayfa accent zemin; önceki/sonraki ok ile ifade edilir; "..." ile uzun aralıklar gizlenir.

23 · Toast bildirimi

Form gönderildikten sonra kısa, sessiz onay mesajı.

FormSubmitToaster komponenti sağ-alt köşede belirir, 4 saniye sonra fade-out olur. Üç durum: success (accent), info (nötr), error (accent-italic).

Mesajınız iletildi.

24 saat içinde geri dönüş yapacağız.

Brief taslağı kaydedildi.

İstediğiniz zaman düzenleyebilirsiniz.

Bir şeyler ters gitti.

Bağlantınızı kontrol edip tekrar deneyin.

24 · Cookie banner

KVKK / GDPR uyumlu cookie banner, seçim hakkını açıkça verir.

CookieBanner.astro, sayfa altında non-modal slide-in şeklinde belirir. "Kabul et" ve "Sadece gerekli" iki net aksiyon, üçüncü bir gizli "ayarlar" linki. Banner kapanmadıkça analitik script'ler tetiklenmez.

Çerez tercihleri

Webtures.com analitik ve performans ölçümü için çerez kullanır. Detaylar: KVKK aydınlatma metni.

25 · Author & avatar

Yazar bloğu, E-E-A-T sinyalini somutlaştırır.

Blog yazılarında ve sözlükte makale altında yazar kartı vardır: avatar (60×60), isim, rol, kısa bio (≤120 karakter), LinkedIn link. Schema'da Article.author olarak Person veya Organization şeklinde emit edilir.

Kanonik · #3
Avatar görseli 58 ile paylaşılır.

Aktif: .design-author__avatar (60px) ve .design-blogmeta__avatar (28px). Cleanup'ta tek .avatar base + .avatar--sm/md/lg size modifier'lara dönüşecek.

Sinan Gergoy SEO & AI Visibility Lead

Webtures'ta GEO ve AAR programlarını yönetiyor. Kurumsal markaların AI motorlarındaki görünürlüğünü ölçülebilir biçimde büyüttüğü 16+ vakası var.

LinkedIn profili
26 · Logo ticker

Hero altındaki logo şeridi, sürekli yatay kayma ile sosyal kanıt sunar.

.hero-logo-ticker 3 sütunlu, sütunlar farklı hızlarda kayar; --dur ve --delay CSS değişkenleriyle ayarlanır. prefers-reduced-motion animasyonu durdurur.

27 · Sektör pay barı

Yatay kıyas barı, gradient + glow ile metriği görselleştirir.

SectorShare komponenti müşteri portföyünün sektörel dağılımını gösterir. Bar gradient (mor → turuncu) ve hafif glow ile vurgulanır; sayı sağda mono-caps olarak durur.

E-ticaret 64%
Finans & B2B 22%
Eğitim 14%
28 · Sparkline

Mini sparkline, cümlenin içinde trendi gösterir.

HomeServicesTabs preview pane'inde ve case study kartlarında 120×36 SVG sparkline kullanılır: çizgi accent, alt area gradient (opaklık 0 → 0.6).

Organik trafik · Q1 → Q4 2025

+%214 kümülatif organik trafik artışı.

29 · Süreç timeline

Servis sayfalarının 6 adımlık süreç akışı, metodolojiyi şeffaf kılar.

Her servis sayfasında numaralı bir process timeline (01 → 06) vardır. Mobilde dikey sıraya, masaüstünde 3×2 grid'e geçer. Numaralar mono caps; başlık sentence-case + italik kavramsal vurgu.

Kanonik · #10
69 (vertical timeline) → aynı componente katıldı.

İkisi de "numara + başlık + açıklama" listesi. Aktif: <Timeline orientation="horizontal|vertical">. Yön CSS değişkeniyle kontrol edilir; tek component.

  1. 01

    Discovery

    Mevcut SERP, AI motor ve content tabanlı görünürlük taraması.

  2. 02

    Audit

    Teknik SEO + GEO + AAR 50+ kontrol noktası üzerinden raporlama.

  3. 03

    Strateji

    Çeyreklik öncelik haritası ve KPI hedefleri.

  4. 04

    Uygulama

    İçerik, schema, link altyapısı ve site mimarisi düzenlemeleri.

  5. 05

    Ölçüm

    GA4 + GSC + custom AAR dashboard üzerinden haftalık takip.

  6. 06

    İterasyon

    Yeni AI engine güncellemelerine adaptif yanıt.

30 · Sticky TOC sidebar

Uzun makalelerde, sol sticky TOC okuyucuya konum verir.

Servis deep-dive ve uzun blog yazılarında 12-kolon grid'in 3 kolonu sticky TOC'a ayrılır. Aktif heading'i scroll spy ile işaretler.

Body içeriği burada akar. Sol sticky TOC her zaman viewport'ta kalır; aktif başlık scroll pozisyonuna göre işaretlenir.

31 · Tablo

Tablolar, AI motorlarının parse ettiği en sevdiği formattır.

Karşılaştırma tabloları, kıyas matrisleri ve metrik tabloları minimal stil kullanır: ince border, mono caps başlık, body Geist sans. CSS değişkenleri sayesinde dark/light otomatik adapte.

Yaklaşım Hedef motor Optimize edilen sinyal Çıktı
SEO Google Search Backlink + on-page + Core Web Vitals SERP sıralaması
GEO ChatGPT, Perplexity, Gemini Schema, llms.txt, passage citability AI cevabında alıntı
AAR AI Agents (MCP, ai-plugin) RFC 8288, agent-skills, OpenAPI Agent uyumluluk skoru
32 · Liste varyantları

Üç liste tipi: noktalı, numaralı, tanım.

Bullet listesi accent renkli özel marker kullanır; numaralı liste mono caps numara; definition listesi key-value kıyaslaması için. Hepsi 17px body, line-height 1.65.

Bullet
  • Schema.org structured data
  • llms.txt + AGENTS.md
  • RFC 8288 Link headers
  • OpenAPI + MCP server card
Numbered
  1. Discovery + audit
  2. Strateji haritası
  3. Uygulama sprint'i
  4. Ölçüm + iterasyon
Definition
GEO
Generative Engine Optimization
AEO
Answer Engine Optimization
AAR
AI Agent Readiness
33 · Divider · ayraç

Bölüm ayracı, mantıksal mola verir.

Üç tip ayraç: ince çizgi (1px border), nokta (mono dot ortada "·" Türkçe karakter), eyebrow + çizgi kombosu (yeni bölüm başlangıcı).

Yeni bölüm
34 · Focus & selection

Klavye odağı her interaktif elementte görünür olmalı.

:focus-visible üzerine 2px accent halka tanımlanır; ::selection aynı renk paletiyle, body'de accent-soft zemin + accent-italic metin. WCAG 2.2 AA uyumluluğu için kontrast oranı 3:1'in üstünde tutulur.

Bu link de fokuslanabilir

Aşağıdaki paragrafı seçin (mouse ile sürükleyin) → seçim rengi accent paleti.

Webtures, GEO ve AI Agent Readiness alanlarında pionir bir ekip olarak 16 yıllık deneyimini AI çağına taşıyor.

35 · Skeleton · loading

Yüklenirken, boş gri kart yerine iskelet kullan.

AAR analiz ekranında ve dashboard'da kullanılır. Shimmer animasyonu (gradient kayar), prefers-reduced-motion set ise statik kalır.

36 · Empty state

Liste boş kaldığında, açıklayıcı bir mesaj + bir aksiyon.

Arama sonucu yokken, filtre eşleşmediğinde ya da yeni başlayan bir dashboard'da kullanılır. Daima bir CTA içerir; "kaybolduk" hissi yaratmaz.

Aradığınız insightı bulamadık.

Aramayı genişletmek için tüm Insights yazılarına göz atabilir, veya doğrudan ekibe sorabilirsiniz.

Tüm yazılar Bize sor
38 · Drawer · sheet

Mobil menü, sağdan içeri sliding sheet ile gelir.

sheet.tsx shadcn-ui türevi. Mobile breakpoint altında nav menü, filter paneli ve quick-actions için kullanılır. tw-animate-css ile slide-in animasyonu.

Birleşti · #8
Bu bölüm 37 ile aynı overlay sistemine katıldı.

position="right" prop'u ile aynı overlay componentinden türeyecek. Cleanup'ta ortak base CSS payı tek tanıma indirgenecek.

39 · Mega menu

Hizmetler dropdown'u, üç sütunlu bir mega menüdür.

Header'da "Hizmetler" linkine hover edildiğinde 3 sütun (8 hizmet + alt başlık) açılır. Sol kolon GEO/AAR/AI-First, orta SEO/CRO, sağ Analytics/Performance/CRO.

40 · Dil değiştirici

TR ↔ EN geçişi, aynı sayfanın hreflang eşine gider.

Header'da iki harfli toggle (TR / EN). Tıklandığında mevcut sayfanın diğer dildeki canonical URL'ine yönlendirir; x-default daima EN.

TR EN
41 · Tema toggle

Karanlık ↔ aydınlık, OS tercihini de takip eder.

Tema seçimi localStorage'a kaydedilir; varsayılanı prefers-color-scheme'dir. Geçişler 200ms içinde, .theme-changing class'ı flicker'ı önler.

42 · Search input

Arama kutusu, sol-içe büyüteç ikonu ile başlar.

Insights ve Sözlük sayfalarında kullanılır. ESC tuşu sonucu temizler; Enter sayfaya götürür.

⌘K
43 · Radio · switch · checkbox

Form input'ları için tek-seçim, aç/kapa, çoklu işaret.

Radio (tek seçim — fiyat planı, plan tipi), switch (aç/kapa — "newsletter aboneliği"), checkbox (çoklu — KVKK + bültenler). Hepsi 18×18px, accent halka.

Radio
Switch
Checkbox
44 · Dosya yükleme

Brief eki için, sürükle-bırak dosya kutusu.

.form-file-upload sınıfı dashed-border, drag-over durumunda accent border. Maks 10MB, PDF / DOC / PPT kabul eder.

45 · Code block (multi-line)

Çok satırlı kod, kopyalanabilir bir <pre> bloğunda.

Teknik blog yazılarında ve sözlük girişlerinde örnek schema / JSON / shell snippet'leri için kullanılır. Kopyala butonu sağ üstte, hover'da belirir. 

{
  "@context": "https://schema.org",
  "@type": "Service",
  "name": "Generative Engine Optimization",
  "provider": {
    "@type": "Organization",
    "name": "Webtures"
  }
}
46 · Tooltip & popover

Tooltip kısa açıklama, popover zengin içerik.

Tooltip 200ms gecikme ile belirir, klavye fokusunda da gösterilir. Popover daha büyük (link, görsel, paragraf taşıyabilir); aria-describedby ile bağlanır.

AAR AI Agent Readiness — websitenin AI ajanları için ne kadar hazır olduğunu ölçen metodoloji. Webtures kimdir?

İstanbul ve Londra'da, 16 yıllık deneyime sahip dijital strateji ekibi. 4.000+ markaya hizmet verdi.

Hakkımızda →
47 · Delta metrik

"Geçen aya göre +/-" metriği, renk + ok kombosuyla okunur.

Dashboard, case study ve servis sayfalarında trend okumayı hızlandırır. Yeşil ok yukarı (artış), kırmızı ok aşağı (düşüş), gri tire değişim yok.

Birleşti · #2
Bu bölüm 13'e katıldı.

Delta artık .design-stat içinde opsiyonel .design-delta--{up|down|flat} child element olarak kullanılır. Ayrı bir bölüm CSS'i gerekmiyor.

12.4K Aylık ziyaretçi ▲ +%24
3.8% CRO oranı ▼ −%6
4.9 Ortalama puan — Sabit
48 · Buton durumları

Idle, hover, focus, disabled, loading: her durumun tek bir doğru karşılığı var.

Disabled opacity: 0.45 + cursor: not-allowed; loading butonun içinde mini spinner + buton tıklanamaz hâle gelir.

49 · External link indicator

Dışa açılan link, küçük ↗ ikonuyla ayrılır.

Yeni sekme açan dış linklerin (Google docs, üçüncü taraf makale, GitHub) sonuna otomatik ↗ eklenir + rel="noopener noreferrer" + target="_blank".

McKinsey'in 2025 generative AI raporu kurumsal markalar için AI ajanlarının yeni keşif yüzeyleri haline geldiğini söylüyor. Webtures GitHub repo'sunda llms.txt referans şablonunu açık kaynak olarak yayımlıyor.

50 · Spinner · loader

Yüklenirken, küçük dönen halka; sayfa-boyu yüklemeler için skeleton.

Buton içi mini spinner (12px), inline label spinner (16px), ortada full-screen loader (28px + label). border tabanlı, spin 0.7s linear infinite.

51 · Notification badge

Bildirim noktası, yeni içerik sinyalini sade bir şekilde verir.

Header menü ikonlarında, dashboard nav'ında ve "yeni rapor hazır" durumunda kullanılır. İki tip: nokta (sayısız) ve sayılı (1, 2, 99+).

Birleşti · #4
Bu bölüm 20'ye katıldı.

Badge artık pill ailesinin bir varyantı: .design-pill--badge. Positioned absolute davranışı modifier ile gelir, ayrı CSS bloğu cleanup'ta silinecek.

3 99+
52 · Sticky bottom CTA

Mobilde uzun sayfa altında, sabit bir CTA bandı kalır.

AAR sonuç sayfasında, blog yazısı sonunda ve servis deep-dive mobilde scroll'un ardından sabit CTA bandı belirir. ESC veya kapatma ile gizlenir; yalnız mobilde.

AAR raporunuz hazır. 2 dakika içinde detaylı raporu alın.
Raporu indir
54 · 404 hero

404 sayfası, "kayboldun" hissi yerine "şuraya gidebilirsin" önerir.

Büyük "404", sade lede, "did you mean" tavsiye grid'i (6 canonical link) ve arama kutusu. Ana fikir: kullanıcıyı kapı eşiğinde tutma, içeriye davet et.

404

Aradığınız sayfa bulunamadı.

Belki şu sayfalardan biri arıyorsunuz:

Ana sayfa Insights GEO hizmeti AAR analizi İletişim Referanslar
55 · Hero varyantları

Üç hero aynı dili konuşur, farklı amacı taşır.

Service hero altında metric strip; blog hero kapak görseliyle birlikte meta strip; landing hero tam ekran arkaplan SVG + dual CTA.

Service hero

Performans pazarlama, ölçülebilir büyüme.

+%214 trafik 4.9 puan 16 yıl
Blog hero

llms.txt nedir, neden önemli?

Sinan Gergoy·4 dk okuma·GEO
Landing hero

AI çağında görünür kalmak için yeni bir yaklaşım.

Brief paylaş Demo izle
56 · Figure & caption

Görseller caption ile bağlam kazanır.

Blog ve sözlük içeriklerinde <figure> + <figcaption> kullanılır. Caption mono caps gri, ana metinden ayrılır; alt text ZORUNLU.

Şekil 1 · GEO katmanları, kullanıcının doğrudan AI'a sorduğu soruyu modelin cevabına dönüştüren süreç.
57 · Aspect ratio

Görsel kapları, aspect-ratio ile sabit oranda durur.

16:9 video, 4:3 case study görseli, 1:1 logo grid, 21:9 hero şerit. aspect-ratio CSS prop'u placeholder zaman da yer kapar — CLS sıfır.

16:9
4:3
1:1
58 · Blog meta strip

Yazı başlığının altında, tek satırda meta bilgi.

Yazar avatarı + isim + yayın tarihi + okuma süresi + kategori chip'i. Mono caps, ortadaki ayraçlar bullet "·" Türkçe karakter.

Avatar paylaşımı · #3
Avatar görseli 25 ile aynı bileşendir.

İki boyut (28px ve 60px) tek .avatar base'inden türeyecek. Bu bölüm sadece "blog meta strip" düzenini gösterir; avatar visual cleanup sonrası tek tanımdan gelecek.

Sinan Gergoy 4 dk okuma GEO
59 · Reading progress

Sayfanın en üstünde, okuma ilerlemesi ince bir çubuk.

Blog yazılarında position: fixed top:0 ile yatay bar. Scroll yüzdesine göre transform: scaleX(...) ile büyür.

42% · 2 dk kaldı
60 · Step icon badge

Servis süreç adımlarının numaralı dairesi.

.step-icon-badge daire — accent border, içerde mono caps numara, dairenin sağında başlık + açıklama. Service deep-dive sticky sidebar pattern'ında kullanılır.

01
Discovery

Mevcut durumun teknik + içerik tabanlı taraması.

02
Audit

50+ kontrol noktası üzerinden raporlama.

61 · Logo lockup

Marka logosu, tek başına ya da tagline ile birlikte.

Webtures wordmark + opsiyonel "Digital strategy for the AI era" tagline. Tagline accent-italic Instrument Serif, wordmark altında 4px boşlukla.

Marka adı tek başına Webtures
Marka + tagline Webtures Digital strategy for the AI era.
62 · Skip-to-content (a11y)

Klavye kullanıcısı için, ilk Tab'da görünen atlama linki.

<a href="#main"> linki normalde position: absolute; clip: rect(0,0,0,0) ile gizlidir; :focus alındığında tepeye çıkar. Screen reader ve klavye kullanıcısı menüyü atlayıp ana içeriğe geçebilir.

Ana içeriğe atla Tab tuşuna basıp linkin görünmesini izleyin.
63 · Form validation

Hata durumu, kırmızı border + altta açıklama.

Submit denenip alan invalid ise: input border accent-italic (#d95127), altta küçük helper text. Native :invalid + :user-invalid kullanılır (ilk yazımda hata göstermesin).

Geçerli bir e-posta adresi girin (ör. ad@webtures.com).
Doğrulandı.
64 · Required marker & helper text

Zorunlu alan küçük accent yıldız; helper text küçük gri.

<label> sonuna kırmızı yıldız (aria-required="true"); altına 12px helper.

Kısa görüşmeyle hızlı geri dönüş için.
65 · Stepper · range

Sayısal seçim için +/- stepper; aralık seçimi için range slider.

AAR analiz ekranında "kaç sayfa taransın" stepper, "minimum skor eşiği" range. Klavye ↑↓ ve sol/sağ ok tuşlarıyla çalışır.

Stepper
Range Minimum AAR skoru: 64
66 · Segmented control

Az seçenekli filtre için segmented control.

Tab'a benzer ama her seçenek "fiziksel buton" gibi durur. "Aylık / Yıllık", "Tüm hizmetler / Sadece AI", "TR / EN / DE" gibi kullanımlar.

67 · Star rating

Yıldız reytingi: okuma ve seçme hâli.

Müşteri yorumlarında okuma için (5 yıldız + 4.9 puan), feedback formunda seçme için. Yarım yıldız desteği var (2.5).

Read-only · 4.9 / 5
★ ★ ★ ★ ★ 4.9
Selectable
68 · Score ring · circular progress

AAR sonuç sayfasında, 0–100 skor dairesel çubukla gösterilir.

SVG stroke-dasharray + stroke-dashoffset animasyonu. Skor 80+ yeşil, 60-79 turuncu, <60 kırmızımsı (accent-italic).

93/100
68/100
42/100
69 · Vertical timeline

Şirket tarihçesi için, dikey timeline.

"Hakkımızda" sayfasında 16 yıllık zaman çizelgesi. Sol kenarda yıl, ortada nokta + ince çizgi, sağda olay açıklaması.

Birleşti · #10
Bu bölüm 29 ile aynı componente katıldı.

orientation="vertical" prop'u ile aynı timeline componentinden türeyecek. Process (yatay) ve şirket-tarihçesi (dikey) tek tanımdan üretilecek.

  1. 2011
    Webtures kuruldu.

    İstanbul ofisi, ilk SEO odaklı 5 kişilik ekip.

  2. 2018
    Londra ofisi açıldı.

    UK pazarına genişleme. İlk uluslararası müşteriler.

  3. 2024
    GEO & AAR programları lanse edildi.

    AI çağına özel pioneering metodoloji.

70 · Carousel pagination dots

Mobile carousel'lerde, nokta sıralaması daha kompakt.

Counter + progress bar pattern (bölüm 11) daha bilgi verici; ama dar mobile alan için noktalar yeterlidir. Aktif nokta accent + 18px wide pill.

Birleşti · #7
Bu bölüm 11 ile birleşti.

Dots ve counter aynı carousel nav componentinin iki display mode'u. Dar mobile breakpoint'te otomatik dots'a geçilir.

71 · Animated counter

Hero metrikleri, 0'dan hedefe count-up ile çıkar.

IntersectionObserver tetikleyicisi: viewport'a girince 1500ms içinde 0 → değer. prefers-reduced-motion set ise direkt değer gösterilir.

Birleşti · #2
Bu bölüm 13'e katıldı.

Animasyon data-counter attribute'u ile aynı .design-stat'ta etkinleşir; ayrı bir bölüm CSS'i gerekmiyor.

+4.000 Hizmet verilen marka
16 Yıllık deneyim
93/100 AAR self-skoru
72 · Pricing card

Plan kartı, tek bir karar noktası üzerine kurulur.

3 plan: Başlangıç / Pro / Enterprise. Önerilen plan accent border + "En popüler" rozeti. Fiyat büyük Geist 300, alt satır mono caps "/ ay".

İskelet paylaşımı · #5
Bu bölüm 7'nin kart iskeletini paylaşır.

Cleanup'ta .design-pricing içerik-şablonu olarak kalır ama base CSS (border, padding, radius) .card'a devredilir.

Başlangıç
₺—Kişiye özel
  • Aylık 1 audit raporu
  • 2 saat strateji görüşmesi
  • Email destek
Detay
En popüler Pro
Custom3 aylık taahhüt
  • Haftalık monitor + raporlama
  • GEO + SEO sprint'leri
  • Slack kanalı + 4 saat aylık call
Brief paylaş
Enterprise
—Custom kapsam
  • Yıllık partnership
  • Multi-market koordinasyon
  • Dedicated team + SLA
Görüşelim
73 · Newsletter inline

Footer üstünde / blog sonunda, tek satırlık abone formu.

Sadece e-posta + büyük accent gönder butonu. Dual line değil, tek input + buton. KVKK onayı checkbox'ı küçük altta — opt-in açık.

Aylık tek mail. Spam yok, istediğin zaman çıkabilirsin.
74 · Social share

Blog yazısı sonunda, 3-4 kanal için paylaş butonları.

LinkedIn (B2B öncelik), X, e-posta, kopyala. Hover'da accent. UTM tag'leri otomatik eklenir.

in 𝕏 @
75 · Inline alert

Body içinde dikkat çekici info / success / warn / error kutuları.

Toast'tan farkı: sayfa içinde kalıcı, kullanıcı kapatana kadar durur. Sol border + accent ikon + başlık + açıklama.

Birleşti · #6
Bu bölüm 19 ile aynı componente katıldı.

Editöryal callout ile status alert görsel olarak birebir aynıydı; tek .alert base'i her ikisini de karşılar. Cleanup'ta CSS tek tanıma indirgenecek.

Bilgi

AAR analiz aracı yeni versiyon yayında.

Başarılı

Brief alındı, 24 saat içinde döneriz.

Dikkat

Webhook 30 dakikadır 5xx dönüyor.

Hata

Ödeme servisi şu an erişilemiyor.

76 · Announcement bar

Header'ın üstünde, geçici bir duyuru bandı.

Yeni rapor, etkinlik veya kampanya duyurusu için. Accent zemin, beyaz metin, kapatma butonu sağda. Kapatıldığında localStorage'a kaydedilir.

Webtures GEO 2026 Raporu yayında — indir.
77 · Office address card

İletişim sayfasında, ofis adres kartı + mini harita.

İki ofis (İstanbul + Londra) için aynı kart. Şehir adı + adres + telefon + e-posta + "yol tarifi" linki.

İskelet paylaşımı · #5
Bu bölüm 7'nin kart iskeletini paylaşır.

.design-office içerik şablonu olarak kalır; base CSS .card'tan miras alınacak.

İstanbul ofisi

Webtures · Kartal

Esentepe Mahallesi, Milangaz Caddesi No:77
A2 Blok Kat:32-33 D:219, Kartal / İstanbul

+90 216 599 0495 hello@webtures.com Yol tarifi al
Londra ofisi

Webtures · London

494a Fulham Road
Fulham, London SW6 5NH, UK

hello@webtures.com Yol tarifi al
78 · Career role card

Açık pozisyonlar, tek satırlık başvuru kartı ile listelenir.

Pozisyon başlığı, lokasyon + departman, "Detay →" CTA. Kart hover'da accent border. Liste zaman dilimi + tip filtresiyle gelir.

İskelet paylaşımı · #5
Bu bölüm 7'nin kart iskeletini paylaşır.

.design-career içerik şablonu kalır; base CSS .card'tan miras alınacak.

Senior SEO Specialist İstanbul · Tam zamanlı · Hizmetler
Detay
GEO Strategist İstanbul / Londra · Hibrit · AI Visibility
Detay
Frontend Engineer (React + Astro) Remote · Tam zamanlı · Tech
Detay
79 · Scroll-to-top FAB

Uzun sayfalarda, sağ-altta sabit yukarı çık butonu.

scrollY > 600px olunca belirir. 40×40 daire, accent border, yukarı ok ikonu. Tıklayınca smooth scroll top'a.

80 · Click-to-call · mailto · whatsapp

İletişim linkleri her zaman mobilde tek tıkla çalışır.

tel:, mailto: ve https://wa.me/ link prefix'leri. İkonla beraber verilir; mobilde dokunmatik alanı 44px üzeri.

+90 216 599 0495 Hafta içi 09:00-18:00
hello@webtures.com Genelde 24h içinde dönüyoruz
WhatsApp Hızlı yazışmak için
81 · Swipe row · scroll-snap

Mobilde uzun grid'ler, yatay kaydırma şeridine dönüşür.

.swipe-row sınıfı flex/grid container'ı overflow-x: auto + scroll-snap-type: x mandatory şekline dönüştürür. Scroll bar gizlenir, çocuk elementler scroll-snap-align: start ile hizalanır. Dar ekranda kart grid'leri otomatik bu davranışa geçer.

Kart 01
Kart 02
Kart 03
Kart 04
Kart 05
Kart 06
→ sürükleyin · her kart snap noktasına yapışır
82 · Hero background SVG layer

Hero alanında, arkaplan SVG katmanı derinlik ve hareket katar.

.hero-background hero'nun içine position: absolute; inset: 0 olarak yerleşir. Genellikle radial gradient + ince noise SVG + soft accent glow kombosu. Aydınlık modda inversiyon uygulanır.

Hero overlay

Görünür olmak artık ölçülebilir.

83 · Servis buton (svc-btn)

Servis sayfalarına özel biraz daha editöryal bir buton ailesi.

.svc-btn.svc-btn-primary / .svc-btn.svc-btn-ghost servis hero'larında kullanılır. Standart .btn ile aynı dile sahip ama padding ve harf aralığı biraz daha geniş — hero'da büyük tipografi ile kompozisyon için.

Deprecate · #1
Bu bölüm 5'e katıldı.

.svc-btn-* ailesi yerine .btn.btn--hero size modifier kullanılacak. Aşağıdaki canlı görüntü, görsel farkın ne kadar küçük olduğunu kanıtlar — birleştirme bu yüzden mantıklı.

Yan yana karşılaştırma

.btn (standart) Aksiyon İkincil
.svc-btn (servis hero) Servisi tanı Brief paylaş
Görsel fark çok ince — bu zaten DRY ihlali ve birleştirme adayı (analiz #1). Servis sayfalarının hero alanı dışında daima .btn kullan; .svc-btn yalnız hero için.
84 · Logo light/dark swap

Logo, tema değişiminde otomatik aydınlık/karanlık varyantına geçer.

.brand-logo-light sadece light mode'da görünür, .brand-logo-dark sadece dark mode'da. Hiç JS yok; CSS :is(html.dark, [data-theme="dark"]) selector'üyle kontrol edilir.

Dark mode görünümü Webtures
Light mode görünümü Webtures
86 · Tema geçiş anı (theme-changing)

Karanlık ↔ aydınlık geçişi sırasında, flicker'ı önlemek için tüm transition'lar 0ms'e çekilir.

Tema toggle tıklandığında html.theme-changing class'ı eklenir; bu class süresince * { transition: none !important } uygulanır. 200ms sonra class kaldırılır, normal transition'lar geri gelir.

Implementation: html.theme-changing * selektörüne tüm transition'ları none !important ile geçici olarak kapatır. BaseLayout.astro theme-set script'inden tetiklenir, 200ms sonra class kaldırılır.
87 · Parallax-by-scroll animation

Hero arkaplanı, scroll'a bağlı yumuşak parallax ile derinlik hissi katar.

@keyframes parallax-by-scroll CSS scroll-driven animation kullanır (animation-timeline: scroll()). JS yok; tarayıcı destekleri yoksa düz statik durur. prefers-reduced-motion'a uyumlu.

Sayfayı kaydırın

Arkaplan, scroll hızının 0.3'üyle kayar.

88 · Fade-up reveal (t-fade-up)

Section'lar, viewport'a girdiğinde 16px aşağıdan yukarı belirir.

@keyframes t-fade-up + IntersectionObserver gözcüsü. Element görünür olduğunda data-revealed attribute'u true olur, animasyon tetiklenir. 600ms ease-out, opacity + translateY.

İlk eleman

Hemen belirir.

İkinci eleman

100ms sonra.

Üçüncü eleman

200ms sonra. Stagger etkisi.

89 · Hero-dark varyantı

Light mode'da bile, hero alanı koyu kalabilir (opsiyonel).

.hero-dark sınıfı hero'yu light mode'da bile karanlık tutar — beyaz section-title, gri description, accent eyebrow korunur. Editöryal landing'lerde dramatic kontrast için.

Hero · forced dark

AI çağında marka görünürlüğü, sıralamadan değil alıntılardan ölçülür.

Kullanıcılar artık doğrudan AI motorlarına soru soruyor; siz cevabın içinde geçiyor musunuz?

90 · Cookie consent dark override (cc--darkmode)

Üçüncü taraf cookieconsent kütüphanesi, Webtures paletine override edilir.

orestbida/cookieconsent kütüphanesini default stilleriyle değil, .cc--darkmode override sınıfıyla kullanırız. Background --surface-card, accent buton --primary, border --border-default.

Asıl preview için bölüm 24 (Cookie banner). .cc--darkmode sadece kütüphane CSS'ini Webtures paletine eşler. Override edilen değişkenler: --cc-bg, --cc-primary-color, --cc-btn-primary-bg, --cc-btn-secondary-bg, --cc-cookie-category-block-bg, --cc-toggle-bg-on. Tüm değerler Webtures token'larına eşlenir.

Bu sayfa Webtures iç ekibi içindir; production sitesinde noindex olarak yayınlanır. Yeni bir tasarım örüntüsü eklenirse: önce src/styles/global.css ya da ilgili component'e ekle, sonra bu sayfaya bir bölüm olarak yansıt.

Yukarı çık