# Tourism Partner · Tasarım temeli v2 · palet B "Akdeniz"

Durum: ekranlar çizilmeden önce sahibin onayına sunulan temel. Sahip `palette-options.html` içinden palet B'yi (Akdeniz) seçti; bu sürüm bütün temeli o palete taşır. Kapsam: renk, tipografi, boşluk, bileşen kuralları, yerleşim, ekran envanteri. Ekran tasarımı yok.

Dosyalar:
- `DESIGN.md` bu belge
- `tokens.css` bütün tokenlar, `:root` üzerinde, yalnızca açık tema
- `components.css` ortak bileşen stilleri; ekranlar `tokens.css` dosyasından sonra bağlar. Düz CSS, BEM benzeri sınıflar, JavaScript yok, 27 KB altı
- `styleguide.html` statik stil karosu; yalnızca `tokens.css` ve `components.css` sınıflarını kullanır, JavaScript yok
- `palette-options.html` üç palet seçeneği, karar kaydı olarak dokunulmadan duruyor

---

## 1. Amaç ve ilkeler (güven)

Tourism Partner bir işletmenin başka bir işletmeye para ve itibar emanet ettiği yerdir. Acente, 40 kişilik bir grubu tanımadığı bir otele yönlendirecek; otel, fiyatını rakiplerinin görebileceği korkusuyla teklif verecek. Arayüzün tek işi bu iki tarafı güvende hissettirmektir. "Sade bir Booking + Airbnb" isteği şu demektir: Airbnb'nin sakin, fotoğrafla açılan yüzeyleri ve sağda sabit duran özet kartı; Booking'in doğrulama rozetleri, açık rakamları ve karar anındaki yoğun tablosu.

Deck'ten korunanlar: Lato Black başlıklar, beyaz kartlar, 12 ile 16 px köşe, büyük harfli aralıklı küçük etiketler, ince koyu sol çizgili notlar ve " · " ayırıcısı. Değişen renktir: deck'in laciverti ve mavisi bırakıldı, yerine Akdeniz paleti geldi (Bölüm 2 ve 2.1).

İlkeler:
1. **Güven görünür olur.** Doğrulama, üyelik süresi, yanıt süresi her firma adının yanında durur.
2. **Rakam tek anlamlıdır.** Para birimi, birim, kapsam ve yıl her zaman yazılır.
3. **Yüzey sakindir.** Ürün ekranları düzdür. Gradyan ve koyu nav yalnızca deck ve pazarlama alanındadır.
4. **Yoğunluk işe göre ayarlanır.** Gezinirken ferah, karar verirken yoğun.
5. **Her ekranın bir sonraki adımı vardır.** Bir ana buton, boş ekranda bile.

Ana kurallar aşağıda Bölüm 8.0'da "güven kuralları" olarak tek tek yazılıdır. Bu belgenin kalbi orasıdır.

---

## 2. Renk paleti

Üç rol, üç renk: derin deniz mürekkep, petrol eylem, terrakota fırsat. Geri kalan her şey beyaz, kum ve sıcak gridir. Sayfa zemini beyazdır (4 Kasım 2026 kararı); kum yalnızca ikincil yüzeydir (`--bg-subtle`). Asıl sıcaklık yine gerçek otel fotoğraflarından gelir.

| Token | Hex | Rol | Nerede |
|---|---|---|---|
| `--color-ink` | `#0E3B47` | Derin deniz, mürekkep | H1 ile H3, logo, açık zeminde ana metin, fiyat rakamı, callout sol çizgisi, yıldız |
| `--color-text` | `#1C2A2E` | Gövde metni | Paragraf, tablo hücresi, form değeri |
| `--color-primary` | `#0F6E7A` | Petrol, TEK eylem rengi | Ana buton dolgusu, link, ikincil buton kenarı ve metni, aktif nav alt çizgisi, aktif sekme, odak halkası. Vurgu metni değildir |
| `--color-primary-hover` | `#0B5962` | Eylem hover | Buton hover; `primary-tint` üzerinde petrol metin (bilgi rozeti) |
| `--color-primary-tint` | `#E3F1F2` | Petrol tint | Seçili tablo satırı, seçili kart, ikon kutusu, avatar, bilgi rozeti zemini |
| `--color-primary-300` | `#7FC0C8` | Koyu zeminde petrol | Yalnızca pazarlama nav'ı: odak halkası ve aktif çizgi. Metin değil |
| `--color-accent` | `#C2552F` | Terrakota, fırsat | Yalnızca "Fırsat" etiketi dolgusu ve ekranda en fazla bir sıcak rakam |
| `--color-accent-700` | `#A54828` | Terrakota metin | Yüzde çipi metni (`accent-tint` üzerinde) |
| `--color-accent-tint` | `#FBE9E1` | Terrakota tint | Yüzde çipi zemini |
| `--color-sand` | `#F7F5F0` | Kum beyazı, ikincil yüzey (`--bg-subtle`) | Tablo başlığı, hover, callout, nötr rozet zemini, mesaj akışı zemini |
| `--color-white` | `#FFFFFF` | Sayfa ve yüzey (`--bg-page`, `--bg-surface`) | `body`, kart, input, modal, sabit özet kartı, ürün nav'ı |
| `--color-border` | `#DCD7CD` | Sıcak gri kenarlık, beyaz zeminde kartı ayıran tek çizgi | Kart kenarı, ayraç, tablo satır çizgisi, nav alt çizgisi |
| `--color-border-input` | `#858F94` | Kontrol kenarı | Input, select, checkbox kenarı (3:1 UI eşiği) |
| `--color-muted` | `#5F6B6E` | İkincil metin | Meta satırı, yardım metni, placeholder, etiket |
| `--color-on-dark-muted` | `#A9CBD0` | Koyu zeminde pasif metin | Yalnızca pazarlama nav'ında seçili olmayan öğe |
| `--color-photo-placeholder` | `#E2E7E9` | Ink %12 tint | Fotoğraf yer tutucu zemini |

**Terrakota kuralı.** `accent` asla buton, link ya da durum olmaz. Üç yerde yaşar: Fırsat etiketi, yüzde çipi, ekranda en fazla bir sıcak rakam (örneğin "12 aktif fırsat"). Kullanıcı bu rengi gördüğünde "burada indirim var" diye okumayı öğrenir; başka bir anlam yüklenirse sinyal ölür.

**Nav kuralı.** Ürün nav'ı beyazdır: 1 px `border` alt çizgi, ink logo metni, aktif öğede 2 px `primary` alt çizgi. Koyu ink nav (`.topnav--dark`) yalnızca pazarlama sitesi içindir, ürün ekranında kullanılmaz.

**Hesaplanan, koyulaştırılan ve türetilen değerler (kontrast tablosuna bakın):**
- `muted` `#5F6B6E` olduğu gibi kaldı. Kumda 5.05, beyazda 5.50, `primary-tint` üzerinde 4.75 ile üç zeminde de geçer; koyulaştırma gerekmedi.
- Input kenarı için önerilen `#8A9499` beyazda 3.10 ile geçiyor ama kum zeminde 2.84 ile kalıyor. `#858F94` seçildi: beyazda 3.31, kumda 3.03.
- `accent` `#C2552F` yüzde çipinde kendi tint'i üzerinde metin olarak 3.85 veriyor, kalır. Çip metni için `accent-700` `#A54828` türetildi (tint üzerinde 5.02). `accent` dolgu olarak kalır: Fırsat etiketindeki beyaz metin 4.53 ile geçer.
- `accent` kum zeminde metin olarak 4.16 verir. Bu yüzden sıcak rakam yalnızca beyaz yüzeyde (4.53) ve en az 24 px boyutta durur.
- Semantik `700` tonları, kendi `50` zemininde en az 5:1 verecek şekilde türetildi: `success-700` `#1A754D`, `warning-700` `#8D6108`, `danger-700` `#AC3327`.
- Önceki paletteki bütün lacivert ve mavi tokenlar (`navy-*`, `blue-*`, `sky-50`, `gray-*`, `navy-muted`) kaldırıldı.

### 2.1 Neden bu palet

- **Petrol, kategorinin mavisi olmadan güven verir.** Booking, Expedia ve neredeyse her B2B otel platformu mavidir; petrol aynı ciddiyeti taşır ama rafta ayrı durur ve Akdeniz destinasyonlarının denizini hatırlatır.
- **Kum zemin, beyaz kartları gölgesiz yüzdürür.** Airbnb'nin hilesi: sayfa saf beyaz değil, çok hafif sıcak bir ton olunca beyaz kart kendiliğinden ayrılır. Gölgeye gerek kalmaz, yüzey sakin kalır.
- **Terrakota ayrılmış bir renktir.** Yalnızca fırsatta görünür; kullanıcı kısa sürede bu rengin indirim demek olduğunu öğrenir ve fırsatı ekranı okumadan bulur.

---

## 3. Semantik renkler

Her semantik renk üç adımdır: `500` nokta, ilerleme çubuğu, sol kenar ve büyük dolgu içindir; `700` metin ve ikon içindir; `50` rozet ve bildirim zeminidir. `500` tonları kendi tint'i üzerinde metin olarak kullanılmaz (kontrast tablosu).

| Token | Hex | Anlam | Örnek |
|---|---|---|---|
| `success-500` / `-700` / `-50` | `#1F8A5B` / `#1A754D` / `#E6F4EC` | Yalnızca seçildi ve doğrulandı | Teklif seçildi, seçili satır check'i, doğrulanmış üye. Ödendi, etkin, yüklendi nötr rozettir |
| `warning-500` / `-700` / `-50` | `#C98A0B` / `#8D6108` / `#FFF4DE` | Bekleyen, süresi yaklaşan | Teklif bekleniyor, inceleniyor, "Kalan: 18 saat" |
| `danger-500` / `-700` / `-50` | `#C0392B` / `#AC3327` / `#FBEAE7` | Süre doldu, hata | Süresi doldu, form hatası, silme onayı |
| `primary-hover` / `primary-tint` | `#0B5962` / `#E3F1F2` | Bilgi, etkin | Yayında, gönderildi, 3 teklif geldi |
| `muted` / `sand` | `#5F6B6E` / `#F7F5F0` | Nötr, kapanmış | Taslak, kapandı, seçilmedi, geri çekildi |

Terrakota semantik bir renk değildir; hiçbir durum rozetinde kullanılmaz. Kırmızı az kullanılır. Deck'teki kırmızı "Problem" bölümü deck'te kalır, ürüne taşınmaz. "Seçilmedi" bilinçli olarak nötrdür: tedarikçi bir hata yapmadı, kırmızı onu cezalandırır ve bir sonraki teklifi verme isteğini düşürür. Kırmızı; süre dolması, hata ve geri alınamaz işlem içindir.

---

## 4. Kontrast tablosu (hesaplandı)

WCAG 2.2 göreli parlaklık formülüyle `python3 -I` içinde hesaplandı. Metin eşiği AA 4.5:1, UI öğesi eşiği 3:1.

### Metin çiftleri

| Metin | Zemin | Oran | AA 4.5 |
|---|---|---|---|
| ink `#0E3B47` | white `#FFFFFF` | 12.10:1 | geçer |
| ink `#0E3B47` | sand `#F7F5F0` | 11.11:1 | geçer |
| ink `#0E3B47` | primary-tint `#E3F1F2` | 10.45:1 | geçer |
| ink `#0E3B47` | accent-tint `#FBE9E1` | 10.28:1 | geçer |
| ink `#0E3B47` | photo-placeholder `#E2E7E9` | 9.71:1 | geçer |
| text `#1C2A2E` | white `#FFFFFF` | 14.79:1 | geçer |
| text `#1C2A2E` | sand `#F7F5F0` | 13.57:1 | geçer |
| text `#1C2A2E` | primary-tint `#E3F1F2` | 12.77:1 | geçer |
| muted `#5F6B6E` | white `#FFFFFF` | 5.50:1 | geçer |
| muted `#5F6B6E` | sand `#F7F5F0` | 5.05:1 | geçer |
| muted `#5F6B6E` | primary-tint `#E3F1F2` | 4.75:1 | geçer |
| muted `#5F6B6E` | accent-tint `#FBE9E1` | 4.68:1 | geçer |
| primary `#0F6E7A` | white `#FFFFFF` | 5.95:1 | geçer |
| primary `#0F6E7A` | sand `#F7F5F0` | 5.46:1 | geçer |
| primary `#0F6E7A` | primary-tint `#E3F1F2` | 5.13:1 | geçer |
| primary-hover `#0B5962` | white `#FFFFFF` | 8.02:1 | geçer |
| primary-hover `#0B5962` | primary-tint `#E3F1F2` | 6.92:1 | geçer |
| white `#FFFFFF` | primary `#0F6E7A` | 5.95:1 | geçer |
| white `#FFFFFF` | primary-hover `#0B5962` | 8.02:1 | geçer |
| white `#FFFFFF` | ink `#0E3B47` | 12.10:1 | geçer |
| on-dark-muted `#A9CBD0` | ink `#0E3B47` | 7.00:1 | geçer |
| white `#FFFFFF` | accent `#C2552F` (Fırsat etiketi) | 4.53:1 | geçer |
| accent `#C2552F` | white `#FFFFFF` (sıcak rakam) | 4.53:1 | geçer |
| accent-700 `#A54828` | accent-tint `#FBE9E1` (yüzde çipi) | 5.02:1 | geçer |
| accent-700 `#A54828` | white `#FFFFFF` | 5.90:1 | geçer |
| success-700 `#1A754D` | success-50 `#E6F4EC` | 5.01:1 | geçer |
| success-700 `#1A754D` | white `#FFFFFF` | 5.68:1 | geçer |
| success-700 `#1A754D` | primary-tint `#E3F1F2` (seçili satırda doğrulama) | 4.91:1 | geçer |
| warning-700 `#8D6108` | warning-50 `#FFF4DE` | 5.00:1 | geçer |
| warning-700 `#8D6108` | white `#FFFFFF` | 5.46:1 | geçer |
| warning-700 `#8D6108` | sand `#F7F5F0` | 5.01:1 | geçer |
| danger-700 `#AC3327` | danger-50 `#FBEAE7` | 5.53:1 | geçer |
| danger-700 `#AC3327` | white `#FFFFFF` | 6.45:1 | geçer |
| danger-500 `#C0392B` | white `#FFFFFF` | 5.44:1 | geçer |

### Kalan ve bu yüzden değiştirilen çiftler

| Çift | Oran | Karar |
|---|---|---|
| accent `#C2552F` metin, accent-tint zemin (yüzde çipi) | 3.85:1 | kalır, çip metni `accent-700` `#A54828` |
| accent `#C2552F` metin, sand zemin | 4.16:1 | kalır, sıcak rakam yalnızca beyaz yüzeyde |
| `#8A9499` input kenarı, sand zemin (önerilen değer) | 2.84:1 | kalır, `border-input` `#858F94` yapıldı |
| success-500 metin, success-50 zemin | 3.82:1 | kalır, rozet metni `success-700` |
| warning-500 metin, warning-50 zemin | 2.70:1 | kalır, rozet metni `warning-700` |
| warning-500 metin, white zemin | 2.95:1 | kalır, uyarı metni ve ikonu `warning-700` |

### UI öğeleri (3:1)

| Öğe | Zemin | Oran | AA 3:1 |
|---|---|---|---|
| primary `#0F6E7A` odak halkası, nav çizgisi | white | 5.95:1 | geçer |
| primary `#0F6E7A` odak halkası | sand | 5.46:1 | geçer |
| primary `#0F6E7A` seçili satır çizgisi | primary-tint | 5.13:1 | geçer |
| primary-300 `#7FC0C8` odak halkası, aktif çizgi | ink | 5.92:1 | geçer |
| primary `#0F6E7A` | ink | 2.04:1 | kalır, koyu zeminde `primary-300` |
| border-input `#858F94` input kenarı | white | 3.31:1 | geçer |
| border-input `#858F94` input kenarı | sand | 3.03:1 | geçer |
| success-500 `#1F8A5B` doğrulama ikonu, check | white | 4.33:1 | geçer |
| success-500 `#1F8A5B` seçili satır check | primary-tint | 3.74:1 | geçer |
| accent `#C2552F` Fırsat etiketi şekli | white | 4.53:1 | geçer |
| danger-500 `#C0392B` hata kenarı | white | 5.44:1 | geçer |
| ink `#0E3B47` bina işareti | photo-placeholder | 9.71:1 | geçer |
| warning-500 `#C98A0B` | white | 2.95:1 | kalır, yalnızca nokta ve çizgi |
| border `#DCD7CD` kart kenarı | white | 1.43:1 | dekoratif, eşik aranmaz; beyaz zemine geçince `#E6E2DA` (1.29) kartı ayırmadığı için koyulaştırıldı |
| border `#DCD7CD` tablo başlığı altı | sand | 1.32:1 | dekoratif, eşik aranmaz |

`warning-500` beyaz üzerinde 2.95:1 verir. Bu yüzden uyarı ikonu da `warning-700` ile çizilir; `warning-500` yalnızca nokta, callout sol çizgisi ve ilerleme çubuğu gibi yanında metin olan öğelerde kullanılır. Pasif buton kum zemin, `border` kenar ve `muted` metin taşır (5.05:1); pasif öğe WCAG'de muaftır ama okunur kalır.

---

## 5. Tipografi

- **Başlık:** Lato 700 ve 900 (Google Fonts). Marka sürekliliği. H1 ve H2 900, H3 700.
- **Gövde ve arayüz:** Inter 400, 500, 600 (Google Fonts).
- **Rakam:** her fiyat, tarih, sayı ve tablo hücresinde `font-variant-numeric: tabular-nums` (`.num`). Fiyatlar Lato ile değil Inter 600 ile yazılır, çünkü Inter'in tablo rakamları sütunları hizalar.

| Token | Boyut | Font | Satır yüksekliği | Kullanım |
|---|---|---|---|---|
| `h1` | 32 px | Lato 900 | 1.2 | Sayfa başlığı |
| `h2` | 24 px | Lato 900 | 1.2 | Bölüm başlığı, büyük fiyat |
| `h3` | 20 px | Lato 700 | 1.2 | Kart başlığı, otel adı |
| `body` | 16 px | Inter 400 | 1.5 | Paragraf, form değeri |
| `small` | 14 px | Inter 400/500 | 1.5 | Meta, tablo hücresi, buton |
| `caption` | 12 px | Inter 500 | 1.5 | Rozet, yardım metni, zaman damgası |
| `label` | 11 px | Inter 600, büyük harf, 0.12em | 1.5 | Eyebrow ve alan grubu etiketi |

Büyük harfli etiket (`.eyebrow`) `muted` renktedir; bir sayfa bölgesini açan eyebrow `ink` olur (`.eyebrow--primary`, sınıf adı geriye uyum için kaldı). Petrol eyebrow yoktur, petrol yalnızca eylemdir. Metin katmanları Bölüm 8.12'de. Türkçe büyük harf için `lang="tr"` zorunludur, yoksa "i" harfi "I" olur ("ULAŞILABİLİR TABAN" doğru, "ULAŞILABILIR" yanlış).

---

## 6. Boşluk ve şekil

- **Izgara:** 8 px. 4 px yalnızca iç mikro boşluk (ikon ile metin, rozet içi). 12 px rozet ve input yatay iç boşluğu için izinlidir.
- **Ölçek:** 4, 8, 12, 16, 24, 32, 40, 48, 64, 80 (`--space-*`).
- **Kart iç boşluğu:** 24 px masaüstü, 16 px mobil. Kartlar arası 24 px. Bölümler arası 48 ile 64 px.
- **Köşe:** 8 px input ve buton, 12 px kart, 16 px modal, hero kartı ve sabit özet kartı, 999 px hap (rozet, çip).
- **Kenarlık:** 1 px `border` `#DCD7CD`. Kart her zaman kenarlıklıdır; beyaz zeminde kartı yalnızca bu çizgi ayırır.

---

## 7. Yükseklik (elevation)

| Seviye | Değer | Ne zaman |
|---|---|---|
| 0 | gölge yok, 1 px `border` | Durağan kart, tablo, input |
| 1 | `0 4px 16px rgba(14,59,71,.08)` | Tıklanabilir kartın hover durumu, mobil alt çubuk (yukarı yönlü) |
| 2 | `0 12px 40px rgba(14,59,71,.16)` | Modal, açılır menü, bildirim paneli, toast, mobil alt sayfa |

Cam efekti (glassmorphism), bulanık arka plan ve iç gölge yoktur. Kartı zeminden ayıran gölge değil 1 px kenardır; sayfa beyaz, kart beyaz. Sabit özet kartı da durağanken gölgesizdir; kaydırınca gölge almaz, çünkü sayfanın parçasıdır, üstünde duran bir katman değildir.

---

## 8. Bileşen kuralları

### 8.0 Güven kuralları

Her kural: kural, neden, somut örnek.

1. **Doğrulama her firma adının yanında görünür, yoğunluğa göre iki biçimde.**
   Neden: B2B'de ilk soru "bu firma gerçek mi". Cevap aranmadan görülmeli, ama her satırda yeşil bir kelime olarak tekrar edilirse gürültüye döner ve asıl karar rakamını bastırır.
   Yoğun bağlamda (tablo, liste satırı, kompakt kart, mesaj listesi) doğrulama, adın hemen sağında 16 px yeşil daire içinde beyaz tiktir (`.verified--icon`), `title="Doğrulanmış üye"` ve ekran okuyucu için `sr-only` metin taşır; yeşil metin yazılmaz. Tam "Doğrulanmış üye" metinli rozet (`.verified`) yalnızca profil sayfasında, teklif detay kartında, sabit özet kartında ve yazışma başlığında durur, adın altında kendi satırında.
   Üyelik süresi, yanıt süresi ve teklif sayısı katman 3'tür: adın altında kendi muted satırında, ad ile aynı satırda asla.
   Örnek: teklif tablosunda "Lara Sahil Otel" ve yanında yeşil tik; altında muted 12 px "Ort. yanıt: 2 saat · Geçerli: 20 Kas 2026". Profilde ad, altında "Doğrulanmış üye", altında "Ort. yanıt: 2 saat · Üye: 2025'ten beri · 38 teklif".

2. **Rakamlar tek anlamlıdır.**
   Neden: "59" tek başına üç ayrı soruya kapı açar: hangi para, kişi mi oda mı, kahvaltı dahil mi. Belirsiz rakam pazarlığa, pazarlık güvensizliğe döner.
   Örnek: "59,00 € / oda / gece · her şey dahil". Tarihler yıl ile: "12 Mayıs · 20 Mayıs 2027". Tabloda rakamlar sağa hizalı ve tablo rakamlı. Çevrilmiş tutarlarda kaynak yazılır: "Tüm tutarlar EUR · kur 4 Kasım 2026".

3. **Durum = renk + ikon + kelime. Asla yalnız renk.**
   Neden: renk körlüğü, gri tonlu çıktı ve hızlı tarama. Kelime anlamı taşır, renk yalnızca hızlandırır.
   Talep durumları: Taslak (nötr, kalem), Yayında (petrol, yayın ikonu), Teklif bekleniyor (sarı, saat), 3 teklif geldi (petrol, gelen kutusu), Seçildi (yeşil, check), Kapandı (nötr, kilit), Süresi doldu (kırmızı, takvim çarpı).
   Teklif durumları: Gönderildi (petrol, gönder), İnceleniyor (sarı, göz), Seçildi (yeşil, check), Seçilmedi (nötr, eksi), Geri çekildi (nötr, geri ok).
   Terrakota hiçbir durumda yoktur.

4. **Her görünümde tek ana buton.**
   Neden: karar ekranında iki dolgulu buton, iki eşit seçenek demektir. Kullanıcı duraksar.
   Örnek: Talep detayında yalnızca "Teklifi seç" dolgulu petrol. "Mesaj gönder" çizgili ikincil. "Talebi kapat" kırmızı metin buton, her zaman onay penceresinin arkasında: "Talebi kapatmak istiyor musunuz? Gelen 3 teklif reddedilmiş sayılır."

5. **Zaman şeffaftır.**
   Neden: B2B kararı bir son tarihe bağlıdır. Kalan süreyi bilmeyen taraf ya acele eder ya kaçırır.
   Örnek: her talep ve teklifte "Oluşturuldu: 2 Kasım 2026", "Son teklif: 6 Kasım 2026 18:00", "Kalan: 2 gün 6 saat". 24 saatin altında sayaç `warning-700` olur (`.countdown--urgent`). Her tedarikçide "Ort. yanıt: 2 saat".

6. **Anonimlik raporun içinde yazılır.**
   Neden: otel fiyatını paylaşırken rakibinin göreceğinden korkar. Söz bir yardım sayfasında değil, verinin yanında durmalı.
   Örnek: her rapor kartının başlığı altında kilit ikonlu "Firma kimliği paylaşılmaz · en az 5 işletmenin verisi". Tavsiye fiyat bandında aynı satır tekrar edilir.

7. **Yüzeyler sakindir.**
   Neden: sakin yüzey, ciddi iş yeri izlenimi verir. Gölge ve gradyan dikkat ister, dikkat karar için saklanmalı.
   Örnek: beyaz zemin üzerinde beyaz kart, 1 px `border` kenar, 12 px köşe, durağanken gölge yok. Hover'da yalnızca tıklanabilir kart gölge alır.

8. **Yoğunluk düğmesi: gezinirken Airbnb, karar verirken Booking.**
   Neden: liste ekranında kullanıcı keşfeder, fotoğraf ve boşluk yardım eder. Karşılaştırmada kullanıcı hesap yapar, hizalı rakam ve sabit başlık yardım eder.
   Örnek: Fırsatlar listesi 3 sütun fotoğraflı kart. Teklif paneli yoğun tablo: sabit başlık, sağa hizalı fiyatlar, seçili satır `primary-tint` zemin ve sol başta `success-500` check. Yoğunluk, olgu sayısını artırmak değildir: Bölüm 8.12'deki altı olgu sınırı her iki modda da geçerlidir.

9. **Boş durum her zaman bir sonraki eylemi ana butonla söyler.**
   Neden: boş ekran yeni üyenin ilk gördüğü ekrandır. "Henüz bir şey yok" bir çıkış kapısıdır.
   Örnek: "Henüz talebiniz yok. Bir destinasyon için tek talep yazın, bölgedeki uygun tedarikçiler teklif göndersin." altında "Talep oluştur".

10. **Fotoğraf gerçektir.**
    Neden: acente otelin kendisini görmek ister. Üretilmiş görsel bir kez fark edilirse bütün platformun güvenini düşürür.
    Örnek: 4:3, `object-fit: cover`, 12 px köşe. Fotoğraf yoksa `#E2E7E9` ink tint zemin üzerinde ink bina işareti ve "Fotoğraf eklenmedi" (`.photo`). Yapay zekâ ile üretilmiş görsel hiçbir yerde kullanılmaz.

11. **Form: etiket üstte, yardım altta, hata satır içinde ikonla.**
    Neden: placeholder etiket yerine geçerse yazmaya başlayınca kaybolur. Hata metni yalnız renkle verilirse görülmez.
    Örnek: "Kişi sayısı" etiketi, input, altında "Rehber ve şoför dahil değil". Hatada kenar `danger-500`, altında uyarı ikonlu "En az 10 kişi girin". Kontrol yüksekliği en az 44 px.

12. **Erişilebilirlik bir özellik değil, zemindir.**
    Neden: güvenilir platform herkes için okunur.
    Örnek: her metin çifti AA, odak halkası 2 px `primary` ve 2 px boşluk (koyu zeminde `primary-300`), dokunma alanı en az 44 px, hiçbir anlam yalnız renkle verilmez.

### 8.1 Buton

| Tür | Görünüm | Kullanım |
|---|---|---|
| Ana `.btn--primary` | `primary` dolgu, beyaz Inter 600 14 px, hover `primary-hover` | Görünüm başına bir tane: "Talep oluştur", "Teklif ver", "Teklifi seç", "Fırsat yayınla" |
| İkincil `.btn--secondary` | Beyaz zemin, 1 px `primary` kenar, `primary` metin, hover `primary-tint` zemin | "Taslak olarak kaydet", "Mesaj gönder" |
| Hayalet `.btn--ghost` | Zemin yok, `text` metin, hover `sand` | Araç çubuğu, "İptal" |
| Yıkıcı `.btn--danger` | Zemin yok, `danger-700` metin, hover `danger-50` | "Talebi kapat", "Teklifi geri çek". Her zaman onaydan sonra |
| Pasif `:disabled` | `sand` zemin, `border` kenar, `muted` metin, `cursor: not-allowed` | Neden pasif olduğu altında yazılır: "Önce en az bir oda tipi ekleyin" |

Petrol tek buton rengidir; terrakota ya da başka bir renkte dolgulu buton yoktur. Boyutlar: `.btn--sm` 36 px (yalnızca yoğun masaüstü araç çubuğu, dokunmatikte 44 px olur), `.btn--md` 44 px (varsayılan), `.btn--lg` 52 px (hero, özet kartı, mobil alt çubuk). `.btn--block` tam genişlik. Yatay iç boşluk 12, 16 ve 24 px. Köşe 8 px. İkon 16 px, metinle arası 8 px. Buton metni her zaman fiildir.

### 8.2 Kart

Beyaz, 1 px `border`, 12 px köşe, 24 px iç boşluk, durağanken gölge yok; beyaz sayfada onu 1 px kenar ayırır. Kartın içinde katman grupları çizgiyle değil 4 ve 8 px boşlukla ayrılır. Tıklanabilir kartın tamamı tek bağlantıdır (`.card--hover`); hover'da `--shadow-hover`, odakta 2 px halka. Seçili kart `primary-tint` zemin ve `primary` kenar alır (`.card.is-selected`). Fotoğraflı kartta fotoğraf kartın üstünde 4:3, köşeleri kartla aynı.

### 8.3 Input

Etiket üstte (Inter 500 14 px `ink`), kontrol 44 px, 1 px `border-input` kenar, 8 px köşe, 12 px yatay iç boşluk, placeholder `muted`. Odak: kenar `primary` ve 2 px `primary` halka, 2 px boşluk. Hata: kenar `danger-500`, altında ikonlu `danger-700` metin. Yardım metni altta, 12 px `muted`. Tarih alanı takvim ikonlu, değer "12 Mayıs 2027" biçiminde. Select aşağı ok ikonlu, yerel açılır listeyle aynı yükseklik. İki alan yan yana `.field--inline`, 768 px altında alt alta.

### 8.4 Rozet ve durum

Hap biçimi, 24 px yükseklik, 12 px yatay iç boşluk, 12 px Inter 600, 14 px ikon, semantik `50` zemin ve `700` metin; bilgi rozeti `primary-tint` zemin ve `primary-hover` metin; nötr rozet `sand` zemin, `border` iç çizgi ve `muted` metin. Sayı içeren rozetler tablo rakamlıdır ("3 teklif geldi"). Rozet tıklanmaz; tıklanacaksa buton olur.

### 8.5 Tablo (teklif karşılaştırma)

- Kendi kabının içinde yatay kaydırılır (`.table-scroll`), sayfa kaydırılmaz.
- Başlık `position: sticky`, `sand` zemin, 12 px Inter 500 `muted`, cümle düzeninde. Sütun adı bir eyebrow değildir, büyük harf yapılmaz.
- Satır yüksekliği en az 56 px, satır çizgisi `border`.
- Metin sütunları sola, rakam sütunları sağa hizalı ve tablo rakamlı (`.num`).
- İlk sütun tedarikçi: ad (16 px 600 `ink`) ve hemen sağında doğrulama tiki; altında yıldız; altında katman 3 satırı "Ort. yanıt · Geçerli".
- Toplam 20 px 600 `ink` (`.offer-table__strong`), altında katman 3 "toplam". Gecelik 14 px 400 gövde, altında katman 3 "/ oda / gece".
- Seçili satır (`.is-selected`): `primary-tint` zemin, solda 3 px `primary` çizgi, `success-500` check ve "Seçildi" rozeti. Yalnız renk değil.
- Sütun sırası: Tedarikçi, Oda tipi, Pansiyon, Gecelik, Toplam, Geçerlilik, Durum.
- En düşük fiyat, toplamın altındaki katman 3 satırında "en düşük toplam" diye yazılır. Çip yok: satırdaki tek renkli öğe durum rozetidir, petrol ise yalnızca eylemdir.

### 8.6 Fiyat bloğu ve Fırsat etiketi

Yeni fiyat Inter 600 20 px `ink` (kartta), sabit özette 24 px (`.price--lg` ya da `.t1--xl`); eski fiyat Inter 400 12 px `muted` üstü çizili, katman 3; birim 12 px `muted` ("/ oda / gece"), katman 3; yüzde çipi `accent-tint` zemin `accent-700` metin ("%24", `.chip--accent`). Altında kapsam satırı, katman 3: "her şey dahil · KDV dahil". Para simgesi rakamdan sonra, Türkçe biçimde: "59,00 €", binlik ayırıcı nokta: "9.440,00 €". USD ve TRY için aynı kural: "49,99 $", "2.450,00 ₺".

Fırsat etiketi (`.deal-tag`) `accent` dolgu, beyaz 11 px büyük harfli Inter 700, fotoğrafın sol üst köşesinde. Yalnızca Fırsat modülündeki ilanlarda görünür.

### 8.7 Doğrulanmış rozeti

Daire içinde tik (`success-500` dolgu, beyaz tik) ve "Doğrulanmış üye" (Inter 600 12 px `success-700`). Rozet zemini yok, satır içinde durur (`.verified`). Yoğun bağlamda yalnız ikon (`.verified--icon`, Bölüm 8.0 kural 1). Üzerine gelince ne doğrulandığını söyleyen ipucu: "Vergi levhası ve turizm işletme belgesi kontrol edildi · Ekim 2026". Doğrulanmamış firmada rozet yerine gri "Doğrulama bekliyor" yazar (`.verified--pending`), boş bırakılmaz.

### 8.8 Callout

Beyaz ya da `sand` zemin, solda 3 px `ink` çizgi, 16 px iç boşluk, sağ köşeler 8 px. Kendi başına duran callout'ta büyük harfli etiket ve bir ile iki cümle. Bir kartın içindeki callout'ta etiket eyebrow olmaz, katman 3 olur (kartın eyebrow'u zaten vardır). Uyarı callout'unda sol çizgi `warning-500`, etiket `warning-700`.

### 8.9 Boş durum

Ortalanmış, 48 px ikon kutusu (`primary-tint` zemin, `primary` ikon), H3 başlık, en fazla iki satır açıklama, ana buton. İsteğe bağlı ikincil link: "Nasıl çalışır".

### 8.10 Nav

Ürün nav'ı 64 px, beyaz zemin, 1 px `border` alt çizgi. Solda ink kare içinde beyaz pin işareti ve ink "Tourism Partner". Ortada role özel öğeler: pasif `text`, seçili `ink` Inter 600 ve altta 2 px `primary` çizgi. Sağda bildirim zili (okunmamış varsa `primary` nokta), hesap menüsü (avatar, firma adı, rol). Nav içinde ana buton yoktur; ana buton sayfaya aittir. 768 px altında öğeler ve hesap metni gizlenir, yerine "Menü" butonu (`.topnav__menu`) görünür; açtığı alt sayfa ekran tasarımında çizilecek.

Koyu ink nav (`.topnav--dark`) yalnızca pazarlama sitesindedir: ink zemin, beyaz logo, pasif öğe `on-dark-muted`, aktif çizgi ve odak halkası `primary-300`.

- Acente: Panel, Taleplerim, Fırsatlar, Mesajlar, Raporlar
- Otel: Panel, Gelen talepler, Tekliflerim, Mesajlar, Fırsatlar, Profilim, Raporlar

### 8.11 components.css sınıf haritası

Ekranlar yeni stil yazmadan önce bu sınıflara bakar; eksik bir kalıp önce `components.css` dosyasına eklenir, ekranın kendi CSS'ine değil.

- Temel ve yardımcı: `.num`, `.icon`, `.stack-8/16/24/48`, `.row`, `.muted`, `.text-sm`, `.text-xs`, `.eyebrow`, `.divider`, `.hidden-mobile`, `.hidden-desktop`
- Metin katmanı: `.t1`, `.t1--num`, `.t1--xl`, `.t2`, `.t3`, `.ref`, `.tiers` (Bölüm 8.12)
- Yerleşim: `.page`, `.container`, `.grid-12` ve `.span-*`, `.grid-auto`, `.detail`, `.detail__main`, `.detail__aside`
- Bileşen: `.topnav`, `.btn`, `.card`, `.field`, `.input`, `.check`, `.badge`, `.verified`, `.verified--icon`, `.price`, `.chip`, `.deal-tag`, `.photo`, `.hotel-card`, `.stars`, `.meta`, `.request-card`, `.countdown`, `.table-scroll`, `.offer-table`, `.list-row`, `.callout`, `.empty`, `.stat`, `.stepper`, `.tabs`, `.toast`, `.sticky-cta`, `.kv`, `.avatar`

### 8.12 Metin hiyerarşisi: üç katman

Neden: teklif ekranında her olgu aynı ağırlıkta yazılınca kullanıcı neye bakacağını bilemez. Ad, tutar, oda tipi, yanıt süresi, referans numarası ve geçerlilik aynı boyda ve kalınlıkta yan yana durursa göz hiçbirinde durmaz. Hiyerarşi rengi değil, boyutu ve kalınlığı kullanır. Üç katman vardır, dördüncüsü yoktur.

| Katman | Ne taşır | Görünüm | Sınıf |
|---|---|---|---|
| 1 · karar | Kullanıcının karar verdiği şey: firma adı, toplam fiyat, işin başlıktaki durumu (talep başlığı "Antalya · 40 kişi · 4 yıldız") | `ink`, 16 ile 20 px, 600 ya da 700. Kart başlığı H3 (Lato 700 20 px) da bu katmandır | `.t1` 16 px 600, `.t1--num` 20 px rakam, `.t1--xl` 24 px (yalnız sabit özet), `h3` |
| 2 · niteleyen | Kararı niteleyen: oda tipi, pansiyon, tarihler, kişi ve oda sayısı, destinasyon, yıldız | Gövde rengi `text`, 14 px, 400. İkon yalnızca bir kelimenin yerine geçiyorsa | `.t2`, `.meta`, `.kv dd`, `.hotel-card__location` |
| 3 · kayıt | Defter bilgisi: oluşturulma, referans no, geçerlilik, yanıt süresi, "KDV dahil", "/ oda / gece", üyelik süresi, teklif sayısı | `muted`, 12 px, 400. Asla kalın, asla renkli | `.t3`, `.ref`, `.kv dt`, `.price__unit`, `.price__old`, `.price__incl`, `.table-note` |

Kurallar:

1. **Satır ya da kart başına en fazla bir katman 1 grubu, artı rakam.** Bir liste satırında ad ve toplam katman 1'dir; başka hiçbir şey 16 px ve 600 olmaz. Talep kartında başlık ve (varsa) tutar.
2. **Renk ekranda tek anlam taşır.** Petrol `primary` yalnızca eylem ve link. Yeşil `success` yalnızca seçildi ve doğrulandı. Terrakota yalnızca fırsat. Gerisi `ink`, `text` ya da `muted`. Vurgu için renkli metin yoktur; vurgu kalınlık ve boyuttur. "Ödendi", "Etkin", "Yüklendi" nötr rozettir; petrol eyebrow ve petrol "En düşük" çipi kaldırıldı.
3. **Satır başına bir rozet.** Durum rozeti bir satırın ya da kartın tek renkli çipidir. Doğrulama yoğun bağlamda yeşil tik ikonudur, rozet değil (Bölüm 8.0 kural 1). Kategori ve hizmetler çip olarak değil, katman 2 satırında düz metin olarak yazılır ("konaklama ve transfer").
4. **Yıldız niteleyendir.** Katman 2: `muted` renkte, 12 px (`.stars`). Mürekkep renginde yıldız yoktur.
5. **Yanıt süresi, üyelik süresi, teklif sayısı katman 3'tür**, kendi muted satırında; adla aynı satırda asla.
6. **Referans no katman 3'tür.** "TP-2431" `.ref` ile yazılır: 12 px, `muted`, 0.04em harf aralığı, tablo rakamı. Asla eyebrow değildir, asla petrol çip değildir.
7. **Eyebrow (büyük harfli aralıklı etiket)** yalnızca bir kartın ya da sayfa bölgesinin başlığıdır. Liste satırında asla, bir kartta iki kez asla. Kart içindeki callout'un etiketi katman 3 olur. Eyebrow ile H3 aynı şeyi söylüyorsa eyebrow kalkar.
8. **Rakamlar.** Toplam fiyat katman 1'dir: tablo ve özetlerde 20 px 600 `ink`, sabit özet kartında 24 px. Birim satırı ("toplam · KDV dahil") katman 3 olarak hemen altında durur. Tablodaki gecelik fiyat katman 2'dir (14 px 400), birimi katman 3. Fırsattaki üstü çizili eski fiyat katman 3'tür. Panel istatistik rakamı 24 px 600 `ink` (`.stat__value`), etiketi katman 2.
9. **Yoğunluk ölçüsü: altı olgu.** Bir liste satırı ya da kompakt kart en fazla altı olgu gösterir: ad, bir niteleyen satırı, bir kayıt satırı, toplam, durum, bir sayaç ya da tarih. Gerisi detay sayfasına aittir. Aynı olgu aynı görünümde iki kez yazılmaz (sayaç ve son tarih, tablo ve özet kartındaki aynı toplam).
10. **Kart içinde çizgi yerine boşluk.** Katman grupları 4 ve 8 px boşlukla ayrılır (`.tiers`: 4 px, katman 3'ten önce 8 px). Çizgi yalnızca satırlar arasında ve kartın çevresinde durur.
11. **Sayaç.** Normal sayaç 14 px 500 gövde rengidir, ikonsuz. 24 saatin altında `warning-700` 600 ve saat ikonlu olur (`.countdown--urgent`): ikon, renk ve kelime birlikte.

Örnek, Panel "Son teklifler" satırı:
- Katman 1: "Lara Sahil Otel" ve doğrulama tiki, yıldız; sağda "9.920,00 €"
- Katman 2: "Antalya · 40 kişi · her şey dahil"
- Katman 3: "TP-2431 · Ort. yanıt: 2 saat · Geçerli: 20 Kasım 2026"; tutarın altında "toplam · KDV dahil"
- Rozet: "İnceleniyor"
Gecelik fiyat, pansiyon ayrıntısı ve teklif tarihi satırdan çıktı, teklif panelinde duruyor.

### 8.13 Mesajlar: WhatsApp düzeni, teklif bağlamı, aksiyon

Neden: yazışma bu üründe sohbet değil, pazarlıktır. Her mesaj bir talebe ve o talepteki bir teklife bağlıdır; kullanıcı mesajı okuduğu yerde kararını da verebilmelidir (kabul, karşı teklif, revize, red). Bu yüzden Mesajlar iki tarafta da vardır, tam ekrandır ve teklifin kendisi sohbetin içinde bir karttır.

**Yerleşim (1280):** nav altında kalan yüksekliğin tamamı, sayfa kaydırmaz, üç sütun kendi içinde kaydırır. Sol `340 px` yazışma listesi; orta esnek, sohbet; sağ `320 px` bağlam paneli "Bu yazışma" (sırası: Teklif ve karar butonları, Bağlı talep, Karşı taraf; 12 ile 16 px iç boşluk, sıkı). 1100 px altında sağ panel gizlenir, bilgisi sohbet başlığının altındaki bağlam şeridine iner. Mobilde liste ve sohbet ayrı ekrandır (09 liste, 09b sohbet, geri oku ile).

**Yazışma listesi satırı (en fazla beş olgu):**
- Katman 1: karşı tarafın adı, yanında yeşil tik (ikon). Sağda saat, katman 3.
- Katman 3: `TP-2431 · Antalya · 12 ile 20 Mayıs`.
- Önizleme: son mesaj, 14 px; okunmamışsa gövde rengi 500 ve petrol nokta, okunduysa `muted`.
- Rozet yalnızca karar bekliyorsa: "Karar bekliyor" (warning). Başka rozet yok.
- Filtre çipleri: Tümü, Okunmamış, Karar bekleyen. Arama: ad ya da talep no.

**Sohbet başlığı:** avatar, ad (katman 1), tik, yıldız; altında katman 3 "TP-2431 · Ort. yanıt 2 saat". Sağda tek ghost link: "Teklif paneline git" (acente) / "Teklifi aç" (otel).

**Bağlam şeridi (sohbet başlığının altında, her genişlikte):** teklifin şu anki hali tek satırda: durum rozeti + toplam (katman 1 rakam) + "geçerli: 20 Kasım" (katman 3). Mesaj hangi teklifle ilgili, buradan okunur; kullanıcı yukarı kaydırmadan bilir.

**Mesaj türleri:**
1. *Metin balonu.* Karşı taraf solda, beyaz zemin, ince kenar. Ben sağda, `primary-tint` zemin, kenarsız. Saat balonun sağ altında 11 px `muted`; benim mesajımda okundu tiki (çift tik ikonu, sr metni "Okundu"). Ad yalnızca gönderen değiştiğinde ve karşı taraf bir kurum olduğunda, balonun üstünde katman 3 ("Mehmet A. · Lara Beach Resort").
2. *Teklif kartı.* Yapılandırılmış mesaj: başlıkta ikon ve olay adı (katman 1: "Teklif güncellendi", "Karşı teklif", "Revize istendi", "Teklif gönderildi"); gövdede `kv`: Toplam (katman 1 rakam; değiştiyse eski tutar üstü çizili katman 3), oda, pansiyon, geçerlilik; revizede istenen maddeler madde listesi; altında tek link "Teklif panelinde gör". Gönderene göre hizalanır, en çok 80% genişlik. Kartın rengi yoktur, olayın rengi de yoktur: kabul edildiğinde başlık ikonu yeşil, reddedildiğinde nötr. Petrol yalnızca linkte.
3. *Sistem satırı.* Ortada, katman 3: "Ayşe K. teklifi kabul etti · 14:02", "Geçerlilik 22 Kasım'a uzatıldı". Durum değişikliği her zaman bu satırla da yazılır; renk ve ikon tek başına durum anlatmaz (Bölüm 8.0 kural 3).
4. *Dosya balonu.* İkon, dosya adı (katman 2), boyut ve tür (katman 3).
5. *Tarih ayracı.* Ortada hap: "Bugün", "Dün", "2 Kasım 2026".

**Karar butonları:** 1100 px ve üstünde sağ paneldeki Teklif bloğunun altında, üst üste ve tam genişlikte (sohbet alanı okumaya kalır; bağlam şeridi de bu genişlikte gizlenir çünkü panel aynı bilgiyi taşır). Panel gizlenince (1100 px altı ve mobil) aynı butonlar sohbet gövdesi ile yazma alanı arasındaki çubuğa iner. Teklifin durumuna göre değişir, her zaman tek dolgulu buton:
- Acente, teklif açıkken: **Teklifi kabul et** (primary) · Karşı teklif ver (secondary) · Revize iste (ghost) · Reddet (ghost danger).
- Acente, kendi karşı teklifi beklerken: çubuk yerine katman 3 satır "Karşı teklifiniz otelde · 4 Kasım 10:12" ve "Geri çek" ghost.
- Otel, karşı teklif gelmişken: **Karşı teklifi kabul et** (primary) · Yeni teklif gönder (secondary) · Diğer (ghost menü: Geçerliliği uzat, Teklifi geri çek, Reddet).
- Otel, teklif açıkken: **Teklifi güncelle** (secondary, dolgulu buton yok çünkü karar acentede) · Geçerliliği uzat (ghost).
- Teklif kapandığında (kabul, red, süre) çubuk kalkar, yerine callout: "Bu teklif 4 Kasım'da kabul edildi. Yazışma açık kalır."
Mobilde çubuk yatay kaydırır, dolgulu buton ilk sıradadır.

**Yazma alanı:** tek satır: ataç ikon butonu, büyüyen metin alanı, yuvarlak petrol gönder butonu (ikon). Altında katman 3: "Mesajlar TP-2431 kaydıyla saklanır". Yapılandırılmış aksiyonlar (karşı teklif, revize, teklif güncelle) yazma alanının yerine açılan bir karttır, başka sayfaya gitmez: başlık, 2 ile 4 alan, "Gönder" primary, "Vazgeç" ghost. Gönderilen şey sohbete teklif kartı olarak düşer.

**Onay penceresi:** kabul ve red geri alınamaz; ikisi de modal ister (Bölüm 8.0 kural 4). Kabul modalı toplamı, oda ve pansiyonu, tarihleri, iptal koşulunu `kv` ile tekrar yazar ve sonucu söyler: "Kabul ettiğinizde TP-2431 için diğer 3 teklif Seçilmedi olur ve ilgili otellere bildirilir." Red modalı sebep seçtirir (fiyat, oda tipi, tarih, başka otel seçildi, diğer) ve notu isteğe bağlı bırakır; sebep otele gider, bunu söyler.

**Renk bu ekranda:** petrol = eylem, link, benim balonum. Yeşil = kabul edildi, doğrulandı. Warning = karar bekliyor, 24 saat altı geçerlilik. Kırmızı yalnızca Reddet butonunun hover zemini ve modal başlığı. Başka renk yok.

**Aynı karşı tarafla birden çok teklif.** Bir acente aynı otelle aynı anda iki talep yürütebilir, geçmişte üç talep kapatmış olabilir. Model:
- *Yazışma karşı taraf başına tektir* (WhatsApp'taki kişi gibi): listede "Side Mavi Koy Otel" bir satırdır. Satırın katman 3 hattı açık talep sayısını söyler: "2 açık talep · TP-2431, TP-2450". Önizleme, birden çok açık talep varsa hangi talepten geldiğini önüne yazar: "TP-2450 · Havuz katı için fiyat ekledik." Okunmamış noktası ve "Karar bekliyor" rozeti karşı taraf için tektir; hangi talep olduğunu sekme gösterir.
- *Sohbetin içinde talep sekmeleri* (`.tabs`, başlığın altında): her açık talep bir sekmedir, "TP-2431 · Antalya, Mayıs" gibi; karar bekleyen sekmede petrol nokta. Her sekme kendi akışıdır: mesajlar, teklif kartları, sistem satırları yalnızca o talebe aittir. Karışık akış yoktur; aksi halde "kabul et" neyi kabul ettiğini bilemez. Sağ panelin Teklif bloğu ve karar butonları her zaman seçili sekmenin teklifidir.
- *Geçmiş*: kapanan talepler sekme olmaz. Panelde "Bu otelle" (acentede) / "Bu acenteyle" (otelde) bloğunda sonuçlarıyla listelenir: "TP-2210 · Mart 2026 · Kabul edildi · 7.800,00 €", "TP-2088 · Ocak 2026 · Seçilmedi". Her satır o talebin kapanmış akışını açar (okunur, yazılmaz). Aynı blok diğer açık talebi de "Açık" başlığıyla gösterir, böylece sekmeyi görmeden de bilinir.
- *Bir otelin bir talebe tek teklifi vardır*; değişiklik yeni sürümdür (v1, v2), karşı teklif de o teklifin bir olayıdır. "İki alternatif oda tipiyle iki teklif" yoktur; alternatif, teklif notunda ya da yeni sürümde anlatılır (Bölüm 13'te açık soru).
- *Teklif kartı başlığı* talep sekmesi varken talep numarasını tekrar etmez (sekme söylüyor); geçmiş akışında ise kartın katman 3 satırında "TP-2210" durur.

**Olmayanlar:** emoji seçici, sesli mesaj, "yazıyor…" animasyonu, okunmamış sayacı rozet olarak (nokta yeterli), grup sohbeti, iki talebin tek akışta karışması.


---

## 9. Yerleşim

- **Kap:** en fazla 1200 px içerik, 24 px yan boşluk (768 px altında 16), 12 sütun ızgara (`.grid-12`), 24 px sütun aralığı.
- **Liste sayfası:** başlık satırı (H1, sayaç, ana buton sağda), filtre satırı, kart ızgarası `auto-fill, minmax(280px, 1fr)` (`.grid-auto`).
- **Detay sayfası:** 8/4 iki sütun (`.detail`). Sağdaki özet kartı `position: sticky; top: 88px` (`.detail__aside`). Otel tarafında "Teklif ver" ve kalan süre; acente tarafında teklif paneli özeti (teklif sayısı, en düşük, seçili teklif, toplam) ve "Teklifi seç".
- **900 px altı:** detay tek sütuna iner, özet kartı içeriğin altına geçer ve sabit olmaktan çıkar.
- **Mobil (768 px altı):** ana eylem ekranın altında sabit bir çubukta kalır (`.sticky-cta`, 52 px buton, solda fiyat ve kalan süre). Nav öğeleri Menü butonunun arkasına geçer.
- **Modal:** 16 px köşe, en fazla 560 px, `--shadow-overlay`, mobilde tam genişlik alt sayfa.

---

## 10. Booking'den ne, Airbnb'den ne

| Booking'den | Airbnb'den |
|---|---|
| Doğrulama rozetleri, üyelik ve yanıt süresi | Ferah beyaz boşluk |
| Açık rakam: para, birim, kapsam | Fotoğrafla açılan kartlar, 4:3 |
| Karar ekranında yoğun karşılaştırma tablosu | Sakin, gölgesiz yüzeyler |
| Sabit tablo başlığı, hizalı rakamlar | Sağda sabit özet kartı |
| Süre ve son tarih göstergeleri | Az ve iri tipografi, tek ana buton |
| Fırsat fiyatında üstü çizili eski fiyat ve yüzde | Profil sayfasında fotoğraf galerisi ve hikâye |

Booking'den alınmayanlar: kırmızı aciliyet baskısı ("son 1 oda"), yoğun banner, sahte kıtlık. Airbnb'den alınmayanlar: belirsiz toplam fiyat, ödemeye kadar saklanan ücretler.

---

## 11. Ekran envanteri

### Acente
- **Panel:** açık talepler, gelen teklifler ve bekleyen kararlar tek bakışta.
- **Talep oluştur:** 3 adım. Adım 1 nereye, ne zaman, kaç kişi. Adım 2 kategori ve kriterler. Adım 3 önizle ve yayınla.
- **Taleplerim:** bütün talepler, duruma göre filtreli, kalan süreyle.
- **Talep detayı ve Teklif paneli:** gelen teklifleri tek para biriminde karşılaştırma tablosu ve seçim.
- **Tedarikçi profili:** otelin herkese açık sayfası; fotoğraflar, oda tipleri, hizmetler, doğrulama ve aktif fırsatlar.
- **Fırsatlar:** üye işletmelere açık indirimli B2B fiyatların fotoğraflı listesi.
- **Mesajlar:** tam ekran, WhatsApp düzeni; her yazışma bir (talep, teklif) çiftine bağlı; kabul, karşı teklif, revize ve red sohbetin içinden (8.13). 09 liste ve sohbet, 09b karşı teklif yazma kartı, 09c kabul onayı.
- **Raporlar:** bölge ve sezon bazında anonim fiyat görünümü.
- **Üyelik ve ayarlar:** plan, fatura, ekip, bildirim tercihleri.

### Otel
- **Panel:** eşleşen yeni talepler, açık tekliflerim, aktif fırsatlar ve profil tamamlanma oranı.
- **Gelen talepler:** bölgeye ve kategoriye eşleşen talepler, son tarihe göre sıralı.
- **Talep detayı ve Teklif ver:** talebin ayrıntısı, sağda sabit teklif formu (fiyat, oda tipi, pansiyon, geçerlilik, not).
- **Tekliflerim:** gönderilen teklifler ve durumları.
- **Mesajlar:** acenteyle aynı düzen; karşı teklifi kabul et, yeni teklif gönder, geçerliliği uzat, geri çek sohbetin içinden (8.13). 09 liste ve sohbet, 09b teklif güncelleme kartı, 09c karşı teklif kabul onayı.
- **Profilim:** herkese açık sayfa düzenleyici; fotoğraflar, oda tipleri, hizmetler, belgeler ve doğrulama.
- **Fırsat modülü:** fırsat oluşturma, yönetme, durumlar (taslak, yayında, süresi doldu).
- **Raporlar:** pansiyon tipine göre fiyat aralığı, sezon eğrisi, en çok talep gören bölgeler ve hizmetler, tavsiye edilen B2B fiyat bandı.
- **Üyelik ve ayarlar:** plan, fatura, ekip, bildirim tercihleri.

### Ortak
- **Giriş ve kayıt:** rol seçimiyle (Acente ya da Otel) kayıt.
- **Onboarding:** firma bilgisi, bölge, kategori, doğrulama belgeleri.
- **Bildirimler:** yeni talep, yeni teklif, seçim, süre uyarısı.
- **Güvenli ödeme adımı:** isteğe bağlı emanet ödeme; sabit ücret, yalnızca seçen taraf öder.

---

## 12. Yazım kuralları

- **Önce Türkçe.** İngilizce ikinci dil; çeviri aynı uzunlukta düşünülür.
- **Uzun ve orta tire yoktur.** Belgede, CSS yorumunda, HTML'de hiçbir yerde. Yerine virgül, nokta ya da " · ". Ok işareti de kullanılmaz.
- **Tarih aralığı:** düz metinde "12 ile 20 Mayıs arası", kompakt arayüzde "12 Mayıs · 20 Mayıs 2027". Kompakt aralık başka " · " öğeleriyle aynı satıra düşerse düz metin biçimine döner ki ayırıcılar birbirine karışmasın: "12 ile 20 Mayıs 2027 · 20 oda · 8 gece", ay değişiyorsa "3 Haziran ile 10 Haziran 2027". Takvim ikonu yalnızca form alanında kalır.
- **Saat:** 24 saat, "18:00". Süre: "2 gün 6 saat", "18 saat".
- **Para:** rakamdan sonra simge, virgülle kuruş, noktayla binlik: "9.440,00 €".
- **Cümle düzeni:** cümle başı büyük harf, gerisi küçük. Büyük harf yalnız etiket stilinde ve CSS ile yapılır.
- **Buton fiildir:** "Talep oluştur", "Teklif ver", "Teklifi seç", "Fırsat yayınla". "Tamam" ve "Gönder" tek başına kullanılmaz; neyin gönderildiği yazılır.
- **Ton:** sakin, net, ölçülü. Ünlem yok, "harika" yok, abartı yok. Rakam ve gerçek bilgi ikna eder.
- **Hitap:** "siz". Kısa cümle.
- **Hata metni ne yapılacağını söyler:** "Geçerlilik tarihi talep tarihinden önce olamaz. 12 Mayıs 2027 ya da sonrasını seçin."

---

## 13. Açık sorular

Ekranlar çizilmeden önce sahibin cevaplaması gerekenler:

- **Aynı talebe alternatif teklifler.** Model şimdilik otel başına talep başına tek teklif (sürümlü). Oteller "standart 8.900 ya da superior 9.600" gibi iki alternatif göndermek isterse ya teklif formuna "alternatif satır" eklenir ya da ikinci bir teklif kaydı açılır; ikincisi karar butonlarını ve karşılaştırma tablosunu ikiye böler. Ürün kararı bekliyor.

1. **Varsayılan para birimi ne olacak?** Teklif paneli tek para biriminde karşılaştırıyor. EUR mu, USD mi, TRY mi, yoksa acentenin seçtiği mi? Kur kaynağı ve kur tarihi panelde gösterilecek mi?
2. **Otel fotoğrafları yayın öncesi zorunlu mu?** Zorunluysa en az kaç fotoğraf? Değilse profil yer tutucuyla yayınlanabilir ve "profil tamamlanma" bunu ölçer.
3. **Acente teklifi seçmeden önce otelin adını görüyor mu?** Görüyorsa tablo ad ve rozetle açılır; görmüyorsa "Tedarikçi A" ile açılır ve ad seçimden sonra açılır. Bu karar tablonun ilk sütununu ve profil sayfasına geçişi değiştirir.
4. **"Doğrulanmış üye" rozeti hangi belgelerle verilir?** Vergi levhası, turizm işletme belgesi, TÜRSAB belgesi? Doğrulanmamış bir otel teklif verebilir mi, verirse tabloda nasıl görünür?
5. **Talep için varsayılan son teklif süresi ne?** Örneğin 72 saat. Acente uzatabilir mi, süre dolunca gelen teklifler ne olur?