Marka sistemi · 6 Kas 2026 · önizleme

Beş marka, bir akış kuralı.

Kaynak: MARKA-20261106/tokens.css, beş logo SVG ve akan/ (flow.css + flow.js). Ortak olan yalnız token isimleri ve hareket dili; değerler markaya göre değişir, sayfa <html data-brand="…"> ile seçer. Bu sayfa yalnız dokümandır; hiçbir siteye uygulanmamıştır.

Logolar

Her logo açık ve koyu zeminde. SVG'ler kendi marka renklerini taşır; Empire Concierge koyu zemin için (fildişi metin), diğerleri açık zemin için çizilmiştir.

Renk tokenları

Değerler doğrudan tokens.css'ten okunur (getComputedStyle); kutucuk, değişken adı ve ham değer. Her markanın varsayılan teması ve karşı teması (data-theme) yan yana.

Tipografi

--font-head / --font-body / --font-accent, ağırlıklar --wt-head / --wt-body, eyebrow izleme --track-eyebrow. Örnek metin her markanın varsayılan temasında.

Ölçek · radius · hareket

Ölçek markadan bağımsızdır (:root). Radius ve gölge markaya göre değişir. Hareket: .rv bölüm süzülmesi, .xf crossfade; prefers-reduced-motion açıkken süreler 0.

Boşluk (--sp-1 … --sp-9)

Yerleşim ve hareket

Radius (markaya göre)

Akan modülü (akan/flow.css + flow.js)

Misafir yolculuğu tek sayfada, mobil önce: içini görüyor → puanları görüyor → paketler → 3 adımlı rezervasyon (tek ekran) → onaylandı (sayaç). Aşağıdaki demo gerçek flow.js'i çalıştırır; ?dry_run=1 sabittir, hiçbir rezervasyon gönderilmez. Mekân verisi demo yer tutucusudur.

Marka: yeni sekmede aç ↗
Hero + barBölümler .rv ile süzülür (IntersectionObserver); bar 40 px sonra .solid.
İçini görüyor#frame: crossfade 6 s, kaydırmada 9 s; dokunma ile swipe; lazy data-src.
Puanları görüyor[data-pick] kartları: hamam seç ya da "biz seçelim" (venue_key yalnız seçildiyse).
Paketler + stub[data-ritual]; #stub HamamPass'te pass kartı, HamamTicket'ta bilet olarak çizilir.
Rezervasyon3 adım tek ekran, doğrulama, Idempotency-Key, POST /api/bookings; fiş + 5 dk sayaç. Fiyat/saat /api/booking-config'tan (burada 404 → statik).