# FAZ 4 — Tasarım Yönü Attığın görselden çıkardığım okuma ve Magostore'a uyarlaması. Prototip: `satici-paneli.html` — tarayıcıda aç, çalışan halini görürsün. --- ## 1. Referansın gerçek okuması Görsele bakıp "koyu tema + parlak yeşil" demek yanlış olurdu. Referansın asıl kompozisyonu şu: - **Zemin** açık ve sıcak — beyaz değil, hafif tonlu - **Koyu orman yeşili** bir zemin rengi değil, **mürekkep** rolünde: metin ve tek bir koyu panel - **Lime yalnızca bir yerde büyük** kullanılmış (bakiye kartı), gerisi minik vurgular - Radius büyük (~20px), gölgeler neredeyse görünmez, boşluk cömert Bu ayrımı yapmam gerekti çünkü "koyu zemin + asit yeşili" bugün her yerde olan bir görünüm. Referansın kendisi o değil, ve o tarafa kaysam senin gösterdiğin şeyi değil, jenerik bir şeyi yapmış olurdum. ### Palet | Jeton | Değer | Rolü | |---|---|---| | `--ink` | `#0D2A1A` | Metin, koyu panel | | `--ink-2` | `#17563A` | İkincil koyu, grafik çubuğu | | `--lime` | `#A8EA55` | Aksan — tek kahraman kart, aktif menü, birincil eylem | | `--paper` | `#F1F4EC` | Zemin, adaçayı tonlu kırık beyaz | | `--sand` | `#E6E9DE` | Nötr dolgu, grafik rayı | | `--brick` | `#B8442E` | Negatif ve uyarı | Oran hedefi: **%70 paper/card, %22 ink, %8 lime.** Lime bu oranın üstüne çıkarsa tasarım dağılıyor — jeton dosyasına not düştüm. Negatifler için kırmızı değil **kiremit** seçtim. Finans panelinde her iade satırı alarm kırmızısı olursa panel sürekli acil durum gibi görünür; kiremit okunur ama bağırmaz. ### Tipografi | Rol | Yüz | Neden | |---|---|---| | Başlık | Bricolage Grotesque | Karakterli, jenerik geometrik sans değil, Türkçe diakritikleri sağlam | | Arayüz | Instrument Sans | Sakin, teknik, uzun Türkçe etiketlerde iyi kırılıyor | | **Rakam** | JetBrains Mono | Tabular — kolonlar hizalanıyor | Mono rakam kararı tasarım hevesi değil: altında **çift taraflı defter** olan bir panel yapıyoruz. Para kolonlarının hizalanması okunabilirlik gereği. Yan etkisi olarak panele referanstaki yuvarlak sans'tan farklı, "defter" hissi veriyor — bu da sistemin kendi doğasından gelen bir karakter. --- ## 2. İmza öğesi: Hakediş Şeridi Panelin en üstünde, en geniş yerde. Üç aşama: ``` YOLDA 42.180,60 ₺ → VADESİ GELDİ 8.470,25 ₺ → BU AY ÖDENDİ 126.905,40 ₺ 31 sipariş bugün 09:00'da 94 sipariş ───────────────────────────────────────────────────────────── YASAL SAAT · en eski bekleyen sipariş teslim edileli 2 iş günü [██████████░░░░░░░░░░░░░░] Teslim 3. gün · ödeme 5. gün · yasal sınır ``` Bunu seçmemin sebebi şu: Trendyol ve Hepsiburada satıcı panellerinde bir satıcının en çok sorduğu soru "**param ne zaman gelecek**" ve o paneller bunu iyi göstermiyor. Bizde arkada zaten `approvable_at` ve 5 iş günü hesabı var — Faz 3c'de kurduk. Yani bu widget yeni bir veri istemiyor, **zaten hesapladığımız şeyi görünür kılıyor.** Yasal saat rayı da bilinçli: satıcı 3. günde ödendiğini ve sınırın 5. gün olduğunu görüyor. Bu bir güven inşası — "burası zamanında ödüyor" mesajını söylemeden veriyor. --- ## 3. Referanstaki AI panelini değiştirdim Görselde sağda gradyan küreli bir "AI Assistant" var. Onu **"Bugün yapılacaklar"** ile değiştirdim: ``` 3 Termin bugün doluyor Kargoya verilmezse puanın düşer 14 Kargoya hazır sipariş Toplu etiket yazdır 6 Cevap bekleyen soru Ortalama süren 14 saat · hedef 6 saat 9 Kritik stok Tükenmeden önce güncelle 2 Onay bekleyen ürün Kozmetik kategorisi manuel incelemede ``` Sebebi: bir pazaryeri satıcısı panele sohbet etmek için girmiyor, **bugün ne yapması gerektiğini** öğrenmek için giriyor. Ekranın en değerli ikinci alanına gradyan bir küre koymak o alanı harcamak olurdu. Sayılar solda ve mono — tarayınca "3, 14, 6, 9, 2" diye okunuyor, cümle okumaya gerek kalmıyor. En üstteki kiremit zeminli, çünkü tek gerçek aciliyeti olan o. Bu tasarım kararı ama sana ait bir karar da olabilir — AI paneli istiyorsan geri koyarım, sadece neden çıkardığımı bilmeni istedim. --- ## 4. Rakamlar tutuyor Prototipteki her sayı iç tutarlı, uydurma değil. Doğruladım: - Komisyon 23.040 + kargo 11.840 + stopaj 2.535 = **37.415 ₺** → kesinti kartıyla aynı - 37.415 / 184.320 = **%20,3** → donut ortasındaki değerle aynı - Sipariş satırlarındaki "sana kalan" oranları: %20,30–20,32 → ortalamayla uyumlu - Şeritteki "vadesi geldi" 8.470,25 ₺ = kahraman karttaki kullanılabilir bakiye Bunu önemsedim çünkü toplamı tutmayan bir finans mockup'ı, geliştirici onu uygularken hangi hesabın doğru olduğunu bilemez hale getirir. --- ## 5. Botble'a uygulama `magostore-tokens.css` tema klasörüne gidiyor: ``` platform/themes/farmart/public/css/magostore-tokens.css ``` Değiştirilecek şablonlar (satıcı paneli): | Şablon | Ne olacak | |---|---| | `themes/vendor-dashboard/layouts/master.blade.php` | Jeton CSS'i + fontları yükle | | `themes/vendor-dashboard/layouts/menu.blade.php` | Kenar çubuğu yeni yapıya | | `themes/vendor-dashboard/partials/dashboard-content.blade.php` | Kart ızgarası, şerit en üste | Yeni bileşen gerekiyor: **Hakediş Şeridi**. Verisi `mg_settlement_items` ve `mg_store_balances`'tan geliyor: ``` yolda = SUM(sub_merchant_price) WHERE approval_status = 'pending' vadesi geldi = SUM(sub_merchant_price) WHERE approval_status = 'approvable' AND approvable_at <= now() bu ay ödendi = SUM(sub_merchant_price) WHERE approval_status = 'approved' AND approved_at >= ay başı ``` Yasal saat rayı için en eski bekleyen kalemin `approvable_at` değeri ve `BusinessDayCalendar::businessDaysBetween()` yeterli. Eklenti şablonlarını **doğrudan düzenlemiyoruz** — güncelleme geldiğinde kaybolur. Botble'ın tema geçersiz kılma (override) yolu: `platform/themes/farmart/views/marketplace/...` altına aynı isimle koymak. --- ## 6. Sırada ne var Bu prototip satıcı panelinin **panel ekranı.** Aynı dille yapılması gerekenler: 1. **Vitrin (müşteri tarafı)** — ana sayfa, kategori, ürün detay, sepet, ödeme. Buradaki dil daha sıcak olmalı; satıcı paneli araç, vitrin dükkân. 2. Satıcı panelinin diğer ekranları — siparişler, ürünler, hakediş dökümü 3. Admin paneli — Botble'ın kendi arayüzü, jetonlarla yeniden renklendirme Hangisinden devam edelim? Vitrin ana sayfası en görünür etkiyi yaratır ama satıcı panelinin diğer ekranları bu dili oturtmayı bitirir. Bir de: bu prototipte beğenmediğin bir şey varsa (lime dozu, mono rakamlar, şeridin yeri) söyle, devam etmeden düzeltelim — yanlış temelin üstüne dört ekran daha yapmak istemezsin. --- # EK — Vitrin ve Kontrast Denetimi ## Vitrin: `vitrin-ana-sayfa.html` Kategori sorusunu ben yanıtladım: **genel pazaryeri, ev & yaşam + moda ağırlıklı.** Ticari sebep — yeni bir pazaryeri elektronikte satıcı kazanamaz (marka yetki kapıları kapalı, komisyon zaten düşük), ev tekstili ve modada kazanır. Faz 2'de komisyon tablosunda en yüksek bantlar da orada. ### Panelden farklı ritim Panel araç, vitrin dükkân. Aynı palet, farklı yoğunluk: vitrinde daha fazla hava, görsel öncelikli, başlıklar büyük. Mono rakam kullanımı fiyatla sınırlı — panelde her sayı mono ama vitrinde bu ağır olurdu. ### İmza öğesi: Teslim Şeridi Satıcı panelindeki **Hakediş Şeridi**'nin müşteri karşılığı: ``` [04:22] Bu süre içinde sipariş ver, yarın kapında Kadıköy için geçerli · "Yarın kapında" etiketli ürünlerde ``` İkisi de aynı iş günü motorundan besleniyor. Satıcı parasının, müşteri paketinin ne zaman geleceğini görüyor. Sistemin kendi mantığından çıkan bir simetri — sonradan eklenmiş bir görsel fikir değil. ### Ürün kartında damga, indirim yüzdesi değil Kartın ikinci en belirgin öğesi kırmızı bir `%38 indirim` etiketi değil, **teslim damgası**: "Yarın kapında" veya "27 Tem'de kapında". Yavaş olanlar nötr gri, hızlı olanlar lime yıkama. Sebebi: indirim yüzdesi her pazaryerinde var ve enflasyonist ortamda anlamını yitirdi. Teslim tarihi ise satın alma kararını gerçekten değiştiriyor ve bizim altyapımız bunu **kesin** biliyor. Kartlarda ayrıca `4 satıcı` / `11 satıcı` etiketi var — Faz 4'teki buybox'a hazır. Şimdilik tek satıcı gösteriliyor, katalog birleşince aynı kart çalışmaya devam eder. ### Mağaza kartlarında reklam değil performans "Bu ayın mağazaları" bölümünde sıralama ölçütü açıkça yazılı: teslim süresi ve müşteri puanı, **reklam değil**. Kartlarda kargolama süresi ve zamanında gönderim oranı görünüyor — Faz 2'deki satıcı puanı formülünün müşteriye bakan yüzü. Faz 6'da reklam sistemi gelince sponsorlu alan **ayrı** işaretlenecek. ### Mevzuat izleri Alt bilgide ticaret unvanı, MERSİS numarası ve merkez adresi var; üst menüde "İşlem rehberi" bağlantısı. İkisi de ETAHS Yönetmeliği m.6 ve m.7 gereği ana sayfadan doğrudan erişilebilir olmak zorunda. Tasarımı sonradan bozmamak için baştan yerleştirdim. --- ## Kontrast denetimi — palette üç düzeltme yaptım WCAG AA için 15 renk çiftini ölçtüm. Üçü kaldı, düzelttim: | Jeton | Önce | Sonra | Sebep | |---|---|---|---| | `--muted-2` | `#93A093` | `#647064` | Beyaz üzerinde 2,73 — küçük metin için yetersiz | | `--muted` | `#6C7A6E` | `#525E50` | Zemin üzerinde 4,07 — sınırın altında | | `--amber` | `#C98A1E` | `#BC7F16` | İkon/grafik için 2,94 — 3,0 sınırının altında | `--muted` düzeltmesinde ikinci bir sorun çıktı: ilk denememde `muted-2`'yi koyultunca **hiyerarşi tersine döndü** — üçüncül metin ikincilden koyu oldu. İkisini birlikte çözmek gerekti. Şimdi sıra doğru: `ink` → `muted` → `muted-2`. Nihai durum, 15 çiftin tamamı geçiyor: ``` ink / paper 13.86 muted / paper 6.14 ink / card 15.40 muted-2 / card 5.19 ink / lime 10.68 muted-2 / paper 4.67 lime / ink 10.68 brick / card 5.38 muted / card 6.83 amber / card 3.39 ``` Kahraman kart en riskli yerdi — lime zemin üzerine koyu metin. 10,68 çıktı, AAA seviyesi. Lime'ın açık olması burada işe yaradı. Bu ölçümü şimdi yapmam gerekiyordu: dört ekran daha yapıp sonra paleti değiştirmek, her ekranı elden geçirmek demekti. --- # EK 2 — Manrope Geçişi ve Satın Alma Akışı ## Manrope: tek yüz, hiyerarşi ağırlıkta Üç yüzden (Bricolage / Instrument Sans / JetBrains Mono) tek yüze geçtik. Bunun iki gerçek sonucu vardı, ikisini de çözerek uyguladım. **1. Hiyerarşiyi artık ağırlık ve tracking taşıyor.** Yüz kontrastı gidince başlık-gövde ayrımı zayıflar. Telafi: | Rol | Ağırlık | Tracking | |---|---|---| | Kahraman başlık | 800 | −.05em | | Bölüm başlığı | 800 | −.04em | | Kart başlığı | 700 | −.022em | | Gövde | 400–500 | 0 | | Büyük rakam | 800 | −.045em | Manrope geniş bir yüz; büyük puntoda negatif tracking olmadan başlıklar dağınık durur. Bu yüzden değerler öncekinden daha sıkı. **2. Para kolonlarının hizası mono'dan geliyordu.** Onu kaybetmemek için `font-variant-numeric: tabular-nums` + `font-feature-settings: "tnum" 1` kullanıyorum — Manrope tabular figürleri destekliyor. Çift taraflı defterde kolonların kayması okunabilirliği bitirir, bu yüzden pazarlık konusu değil. Jeton dosyasında `--mono` değişkenini **sildim değil, anlamını değiştirdim**: artık ayrı bir aile değil, "veri rolü". Böylece mevcut şablonlarda `var(--mono)` kullanan yerler kırılmadı. --- ## Ürün detay: `urun-detay.html` Buybox'ın yaşadığı ekran. Faz 4'ün en pahalı işi burada görünür hale geliyor. ### İmza öğesi: Teklif Karşılaştırma Sağ kolonda, buybox'ın hemen altında. Aynı ürünü satan **dört satıcı**, her biri tek satırda: fiyat, kargo, puan, teslim günü ve **kargo dahil toplam**. ``` Kandil Ev Tekstili SEÇİLİ 1.249 ₺ ★4,7 · kargo bedava Yarın toplam 1.249 ₺ Ege Tekstil 1.219 ₺ ★4,9 · kargo 49 ₺ Yarın toplam 1.268 ₺ Pamuk Diyarı 1.189 ₺ ★4,2 · kargo 59 ₺ 3 gün toplam 1.248 ₺ Denizli Tekstil Evi 1.340 ₺ ★4,8 · kargo bedava 2 gün toplam 1.340 ₺ ``` Diğer pazaryerleri bunu ayrı sekmeye gömüyor. Burada birinci sınıf içerik, çünkü marka tezimiz "kim satıyor, ne zaman geliyor — ikisi de açık". **Kargo dahil toplam kolonu kritik.** En düşük liste fiyatı Pamuk Diyarı'nda (1.189 ₺) ama kargoyla toplam 1.248 ₺ ve teslim 3 gün. Müşteri bunu kendi hesaplamak zorunda kalmıyor. ### Buybox kararını açıklıyoruz Teklif listesinin üstünde bir satır: > **Kandil öne çıkarıldı:** en hızlı teslimat ve kargo dahil en düşük toplam. > Fiyat tek ölçüt değil — teslim süresi ve satıcı puanı da hesaba katılır. Bunu koymamın sebebi ticari değil, yapısal: Faz 4'te buybox skoru fiyat + kargo + teslim süresi + satıcı puanı ağırlıklarından hesaplanacak. Algoritma bir kutu içinde saklanırsa satıcılar "neden ben seçilmedim" diye sorar ve cevap veremezsin. Ölçütü yazmak, hem müşteri hem satıcı tarafında güven üretiyor. Rakamlar da bunu doğruluyor: seçilen teklif en düşük toplamdan **1 ₺ pahalı** ama 2 gün erken ve satıcı puanı 0,5 yüksek. Savunulabilir bir karar. --- ## Sepet ve ödeme: `sepet-odeme.html` Çok satıcılı yapının müşteriye görünen yeri. Botble her mağaza için ayrı sipariş üretiyor — bunu saklamak yerine açıkça anlatıyoruz. ### Satıcı bazlı gruplama ve kargo eşiği Sepet satıcıya göre gruplu. Her grubun kendi kargo hesabı ve kendi teslim tarihi var. Eşiğin altında kalan grupta ilerleme çubuğu: > Bu satıcıdan **42 ₺** daha eklersen **kargo bedava**. ▓▓▓▓▓▓▓░ Mağazaya git → Bu, müşterinin gerçekten verdiği bir karar ve bizim satıcı bazlı kargo kurallarımızdan besleniyor. Genel bir "300 ₺ üzeri kargo bedava" banner'ı bu bilgiyi vermez. ### "Neden 3 ayrı paket?" kutusu Özetin altında koyu bir panel, üç paketi ve teslim günlerini listeliyor. Sebebi: tek ödeme yapan müşteri üç ayrı kargo gelince şaşırır ve destek talebi açar. Baştan söylemek o talebi ortadan kaldırıyor. Onay kutusu metninde de aynı şeffaflık var: *"Sözleşme her satıcıyla ayrı kurulur; her paket için ayrı fatura düzenlenir."* Bu mevzuat gereği doğru olan ve Faz 3d'de e-arşiv akışını böyle kurduk. ### Matematik doğrulandı | Kalem | Değer | |---|---| | Kandil 1.249 + 2.180 | 3.429 ₺ → eşik geçildi, kargo bedava | | Ege 689 | 689 ₺ → eşik geçildi, kargo bedava | | Nar 129 × 2 | 258 ₺ → eşiğe 42 ₺, kargo 39 ₺ | | **Ara toplam** | **4.376 ₺** | | Kargo | 39 ₺ | | MAGOSTORE150 | −150 ₺ | | **Toplam** | **4.265 ₺** | Taksit tablosunun beşi de (1/3/6/9/12) toplamı tam bölüyor. Eşik ilerleme çubuğu %86 = 258/300. Bir hata yakaladım ve düzelttim: başlıkta "4 ürün" yazıyordu ama serum 2 adet olduğu için toplam 5. Paket kutusundaki adetler (2+1+2) zaten 5 veriyordu, yani sayfa kendi içinde çelişiyordu. --- ## Akışın durumu | Ekran | Dosya | Durum | |---|---|---| | Vitrin ana sayfa | `vitrin-ana-sayfa.html` | ✅ | | Ürün detay + buybox | `urun-detay.html` | ✅ | | Sepet + ödeme | `sepet-odeme.html` | ✅ | | Satıcı paneli | `satici-paneli.html` | ✅ | | Sipariş onayı / takip | — | eksik | | Kategori / arama sonucu | — | eksik | Satın alma akışının kalbi tamam. Eksik iki ekrandan **sipariş takibi** daha önemli: üç ayrı paketin ayrı ayrı izlenmesi, bizim sipariş bölme mimarimizin doğal sonucu ve müşteri desteğine en çok soru gelen yer.