# 3E Akademi — Tasarım Handoff

> ## ⛔ Tasarım eksiksiz uygulanır — "nihai değildir" bunu değiştirmez
>
> *(30.07.2026 — Sets'in kural düzeltmesi. Önceki metin "nihai değildir / sayfa kompozisyonu bağlayıcı değil" diyordu ve pratikte **"umursamayın"** diye okundu: sayfalar tasarım dosyası hiç açılmadan kuruldu, aynı ekran defalarca geri aldırıldı.)*
>
> **Tasarımcının teslim ettiği her şey eksiksiz uygulanır** — token seti, bileşen dili, semantik renk, erişilebilirlik, responsive davranış **ve sayfa kompozisyonu, kartlar, alan sıralaması, ekran bölünmesi, menü grupları.** Bir ekranı yazmadan önce ilgili `*.dc.html` dosyası açılır ve okunur.
>
> **"Nihai değildir" ne demekti:** *"ama tasarımcı böyle yapmış"* denerek hedeften sapılmaz. İyileştirme ve düzenleme **yapılabilir** — gereksiz görülen bir kart kaldırılabilir, eksik bir form eklenebilir — **ancak ve ancak Sets söylediğinde.** Örnek: 5 adımlı planlama sihirbazı, planlamacının bütünü kaybetmesi gerekçesiyle tek sayfaya çevrildi (`21 Planlamaci Sihirbaz` bu yönüyle geçersiz); geri kalan her sayfa olduğu gibi uygulanır.
>
> **Tasarım kanun değildir, ama çöp de değildir.** Sapma önerisi varsa: DUR, gerekçelendir, onay al.
>
> **25.07.2026 düzeltmeleri aşağıda işlendi** — mockup dosyalarının içindeki metinler henüz güncellenmedi; çelişki halinde bu doküman ve AD'ler esastır.

Frontend hedefi: **Vue 3 + Inertia + Tailwind**. Dış portallar bu tasarımdan üretilir; **admin panel Filament'tir** (kapsam dışı: kural motoru, parametreler/limitler, fiyat tabloları, eğitim kataloğu tanımı, auth yöntem ayarları, içerik paketi tanımları).

Onaylı stil yönü: **3a "Kırma + Mürekkep"** — `Stil Yonu.dc.html#3a`. Tüm değerler `00 Tokenlar.dc.html`'deki token setinden; **token dışı renk/spacing kullanılmaz**. Breakpoint: 375 / 768 / 1024 / 1440. **Hiçbir sayfa salt mobil değildir** — her ekranın desktop'u birincil, 375px karşılığı eksiksiz.

Mockup dosyaları tarayıcıda doğrudan açılır (`design/` içinde, `support.js` + `assets/` gerekli).

## Dosya haritası

### Tasarım sistemi
| Dosya | İçerik |
|---|---|
| `Stil Yonu.dc.html` | Stil keşfi + onaylı 3a planlamacı kokpiti + semantik renk tanımı |
| `00 Tokenlar.dc.html` | Renk (ink skalası, accent, semantik dörtlüler, viz paleti), tipografi, spacing, radius, gölge, breakpoint, WCAG — Tailwind'e maplenebilir |
| `01 Form Elemanlari.dc.html` | Tüm form kontrolleri, tüm state'ler (default/hover/focus/filled/error/disabled/readonly/loading), telefon maskesi `(5__) ___ __ __`, OTP, dosya yükleme, stepper |
| `02 Veri Gosterimi.dc.html` | Tablo standardı (+ **mobil kart dönüşümü**), statü rozet dili (tüm durum makineleri), KPI, takvim, timeline, sertifika kartı |
| `03 Grafikler.dc.html` | Çubuk/çizgi/donut/huni/matris + boş/az veri/loading durumları |
| `04 Geri Bildirim.dc.html` | Modal (destructive+gerekçe), drawer, toast, banner, callout, tooltip, skeleton |
| `05 Navigasyon.dc.html` | Sidebar (rol bazlı, gruplu), topbar, bildirim merkezi, sayfa başlığı standardı, mobil bottom-nav |
| `06 Desen Ekleri.dc.html` | Segmented control, referans kodu chip'i, yön/tür rozetleri, görev satırı, collapsible satır, grup kartı, **kilit açıklama deseni**, öneri kartı |

### Sayfalar
| Dosya | Kapsam |
|---|---|
| `10 Ortak Auth.dc.html` | Ofis girişi ve müşteri portal girişi **ayrı sayfalar**; 2FA/passcode/magic link; KVKK scroll-to-accept; 403/404/500/bakım/oturum; profil-güvenlik |
| `11–16 Musteri *.dc.html` | Dashboard+organizasyon/yetki matrisi · personel+lokasyonlar · teklifler+scroll-to-accept onay (+ıslak imzalı nüsha yükleme) · teklif isteği (katılımcı grupları) · eğitimler+detay (yoklama/sınav) · sertifika/içerik/fatura/açık eğitim |
| `20–23 Planlamaci *.dc.html` | Sorgulama+kuyruk (onaylı teklif + satış talebi) · 5 adımlı sihirbaz (eğitmen uygunluk listesi, maliyet modalı, taslak detayı) · eğitim detayı (KUMS kilidi, yoklama karşılaştırma, tek sayfa/tab'sız) · takvim+tedarikçiler |
| `30–33 Satisci *.dc.html` | Kokpit (fırsat sinyalleri+CRM) · teklif oluşturma (kalem+genel indirim %/₺, limit→onay) + teklif detayı (Postmark e-postalar / görüşme notları ayrı kartlar, zaman akışı draweri, görevler) · müşteri kartı · takvimim |
| `40–41 Egitmen *.dc.html` | Kokpit (atamalar, cari, belgeler salt-okunur, müsaitlik) · eğitim detayı (dokümanlar otomatik bağlanır) + eğitim günü (oturum devam, imzalı liste kamera, **sınav notu girişi**) + masraf (fiş foto zorunlu) |
| `50 Katilimci Paneli.dc.html` | Magic link karşılama (TCKN son 4), oturum beyanları, anket, ~~sertifikalar~~ → **eğitim geçmişi** (bkz. kural 14) — desktop + 375 |
| `61–63 Yonetici *.dc.html` | Eğitmen/satışçı yönetimi+yetkilendirme · muhasebe (mali tablo, müşteri/eğitmen carileri, satışçı potansiyelleri, e-fatura) · kullanıcılar (dondur/kısıtla) + kullanıcı detayı (kişinin kokpiti+logları) + sistem logu + **Onaylar sayfası** |
| `90 Handoff.dc.html` | Bu dokümanın görsel hali |

### Rol → dashboard
planlamacı → 3a kokpit · satışçı → 30 · eğitmen → 40 · müşteri → 11 · katılımcı → 50 (dashboard'suz tek akış). **Operasyon/üst yönetici ayrı kokpit almaz**: rol bazlı menüyle planlamacı+satışçı kokpitlerini görür, üstüne 61–63 açılır. Yetkisiz menü kalemi hiç render edilmez.

## Bağlayıcı kurallar (kontrol listesi)

1. **Statü modeli — DÜZELTİLDİ (25.07.2026): tek akış değil, iki model var** (AD-15, `docs/mevzuat-kurallari.md` §10).
   Ortak omurga: Taslak (yalnız oluşturan görür; tedarikçi teklifi beklerken state korunur) → Planlandı (satışa açılır) → **[bakanlık adımı]** → Devam Ediyor → Tamamlandı / İptal.
   - **Bildirim tipi** (IMDG Kod, tehlikeli yük deniz gözetim): eğitimden en az **3 gün önce** bildirilir; statü **"Bakanlığa Bildirildi"**, KUMS ID girilince ilerler. Onay beklenmez.
   - **Onay tipi** (genel deniz gözetim/DGY): en az **15 gün önce** bildirilir ve **İdare onaylamadan eğitim verilemez** — onaysız eğitim geçersiz. Statü **"Bakanlık Onaylı"**, onay kanıtı zorunlu.
   - Hangi modelin uygulanacağı eğitim tanımındaki "bildirim tipi" alanından gelir; UI iki adı da desteklemek zorundadır.
   - **Katılımcı listesi bildirildikten sonra değişirse** "KUMS güncellemesi gerekli" bayrağı çıkar; güncelleme kaydedilmeden "Devam Ediyor"a geçilemez (yedek listeden terfi bunu sık üretecek).
2. **Kilitler nedenini söyler:** pasif buton + koşul metni. Örnekler: KUMS ID → Bakanlık Onaylı; imzalı yoklama + sınav notları + çelişki çözümü → Tamamlandı; metin sonuna scroll → teklif onayı.
3. **Semantik renk:** mavi asla sorun anlatmaz. Kritik `#C4553F`, uyarı `#D98E32`, dikkat `#C9A227`, başarı `#4E9A6E`, bilgi `#3F7FAC`, nötr `#95A5A6` — dörtlü (dot/fg/bg/border) 00'da. Aynı renk her yerde aynı anlam.
4. **Limit aşımı akışı kırmaz:** indirim aşımı, elle fiyat değişikliği, limit üstü masraf → yönetici Onaylar kuyruğuna; red her zaman gerekçeli; karar sahibine bildirilir, audit loglanır.
5. **Rol kuralları:** planlamacı müşteri seçmez (müşteri bağlamı satıştan salt-okunur gelir); satışçı yalnız **planlı** eğitimi satar ve yalnız atandığı müşterileri görür; eğitmen belge yüklemez (belgeleri yönetici yükler/takip eder); katılımcı listesini satış yönetir (planlamacıya salt okunur); eğitim dokümanları eğitim türüne admin/operasyonca atanır, eğitmen detayına otomatik bağlanır.
6. **Teklif isteği modeli:** katılımcı grubu bazlı — grup = kişiler + eğitim yeri + tercih dönemi + not + n eğitim (her eğitim ilk/yenileme). Teklif kalemleri grup × eğitim; **kalem bazlı indirim + genel indirim**, ikisi de % veya ₺ girilebilir, denetim efektif % üzerinden.
7. **Referans kodları — DÜZELTİLDİ (AD-19 esastır):** format `PREFIX-YYYY-XXXX`, prefix **2 harf**, son blok **rastgele** 4 karakter (ör. `EG-2026-7K4F`, `TK-2026-M3PD`). Mockup'lardaki `EGT-YYYY-NNNN` / `TKF-` / `FTR-` **geçersizdir**: ardışık numara iş hacmini sızdırır (teklif/eğitim adedi ticari bilgidir) ve 3 harfli prefix YouTrack ticket kodlarıyla karışır. Prefix'ler merkezî registry'de tanımlıdır; fatura `FT` olur. `KUMS-…` bizim ürettiğimiz bir kod değildir — Bakanlık ID'sidir, ayrı alan. Kod ≠ yetki: kodla erişim her zaman policy + tenant kontrolünden geçer. UI deseni (monospace, tek tık kopyalanan chip, detay başlığı + tablo ikincil satırı) aynen korunur.
8. **İletişim uçtan uca (Postmark):** teklif e-postaları sistemden çıkar (delivered/açılma izi), inbound yanıtlar teklife özel adresle otomatik eşleşir. **Adres formatı düzeltildi (AD-20 esastır):** `tk-2026-xxxx@teklif.3egrp.com` — mockup'taki `tkf-NNNN@posta…` geçersiz. Gelen mail doğrulanmamış içeriktir: maildeki "onaylıyorum" teklif onayı **değildir**, onay yalnız panelden (AD-14). Teklif detayında e-postalar (GELEN/GİDEN) ve görüşme notları **ayrı kartlar**; tam geçmiş filtreli+aramalı zaman akışı draweri. Kartta son 4-5 kayıt, tamamı sayfalı.
9. **Yoklama ikili:** sistemden üretilen liste yazdırılır, imzalı hali yüklenir (mobil kamera, netlik kontrolü) — **imzalı liste esastır**; katılımcı beyanları zaman damgalı ikincil kanıt; çelişki gerekçeli çözülür. *(Bu bir tercih değil yasal yükümlülüktür: Y-2016 md.9/1-c — eğitici devam çizelgesine devamsızları işler ve ad-soyad yazarak imzalar.)*
   **Sınav (mevzuat detayı eklendi):** IMDG ve tehlikeli yük deniz gözetim eğitimlerinde zorunlu — en az **25 soru**, 100 üzerinden en az **70**. Geçme notu eğitim tanımından gelir ama **70'in altına inemez**. Genel deniz gözetimde (DGY) mevzuat sınav şartı koşmaz; sınav gerekli mi/soru sayısı/süre/geçme notu eğitim tanımının alanlarıdır. **Sınav tekrarı yoktur** — başarısız katılımcı eğitimi baştan alır.
   **Video kaydı yalnız İdare ile paylaşılır**, hiçbir panelde gösterilmez. Kaynak: yüz yüze eğitimin Zoom kaydı; unlisted YouTube arşive yüklenir (AD-13).

14. **Sertifika — KAPSAM DEĞİŞTİ (AD-28):** sertifikayı **Bakanlık üretir**; 3E sertifika belgesi üretmez, şablonlamaz, saklamaz. Dolayısıyla **sertifika kartı, QR doğrulama ve sertifika PDF şablonu kapsam dışıdır.** Müşteri "Sertifikalar" (`16 Musteri Belgeler`) ve katılımcı "Sertifikalarım" (`50 Katilimci Paneli`) bölümleri **"eğitim geçmişi / uyum durumu"** olarak yeniden kurgulanacak: hangi eğitim, ne zaman alındı, ne zamana kadar geçerli, Bakanlık sertifika kodu. Kod gösterilir ama yanında **zorunlu disclaimer**: *"Karar verici Bakanlıktır; güncel geçerlilik durumu Bakanlık sisteminden kontrol edilmelidir."*

15. **Kontenjan ve yedek liste (yeni — çatı §15):** kontenjan göstergesi **üç sayı** gösterir — kesinleşen · teklif cevabı bekleyen · toplam (ör. *"8 kesinleşen · 10 teklif bekliyor / 25"*). Satışçı hangi satışçının teklifi olduğunu görmez. Azami kontenjan mevzuattan gelir ve hard block'tur (IMDG 30, TY gözetim 25). Kontenjan yetmezse akış kırılmaz, **"kontenjan teyidi"** kuyruğuna düşer — sistem kimin gireceğini seçmez. Yedek liste sıralıdır ama **otomatik terfi yoktur**; çağırma kararı insanındır. Açık eğitimlerde katılımcı sahipliği satışçı bazındadır: her satışçı kendi getirdiği katılımcıları görür, tam liste planlamacı ve yöneticilerdedir.

16. **Realtime göstergeler (yeni — AD-22):** teklif hazırlarken *"Bu eğitim için 1 satışçı daha teklif hazırlıyor"* uyarısı — kim olduğu ve hangi müşteri için çalıştığı gösterilmez, tavsiye niteliğindedir, hiçbir akışı bloklamaz. Online rozeti yalnız direktör ve operasyon direktörü panellerinde; müşteri ve katılımcıda **yoktur**. Kullanıcı kartlarında "son aktif" bilgisi bulunur (toplam süre/skor metriği yok).
10. **Audit:** kritik her işlem append-only loglanır (KamuSM zaman damgalı batch hash), hassas değerler maskeli (TCKN `482•••••316`). Kullanıcı detayında kişi logları, 63'te sistem logu. Dondur/kısıtla gerekçeli; veri silinmez (revizyon ilkesi).
11. **Erişilebilirlik:** WCAG AA kontrast, dokunma hedefi ≥44px (mobil form 48px), focus ring 2px accent offset 2px, tabular figures her sayısal kolonda, uzun Türkçe etiketler kısaltma+tooltip (00'daki strateji).
12. **Sidebar standardı:** microcaps grup etiketi + gruplar arası hairline, grup başına ≤5 kalem; mobilde eğitmen/katılımcıda bottom-nav (≤5 hedef), rozet sayaçları kritik işler için.
13. **Muhasebe:** cariler iki yönlü (müşteri alacak / eğitmen borç); vadesi geçende kademeli Postmark hatırlatma, 30 gün üstü yönetici görevi; e-fatura provider-bağımsız — entegratör gelince gönderim otomatikleşir, UI değişmez.

## Açık kalanlar
- Tıklanabilir prototip akışları (mockuplar hazır, bağlanmadı).
- Ofis ekranlarının 375px varyantları örneklem düzeyinde; kalanlar 02'deki tablo→kart dönüşümüyle türetilir.
- Logo kaynak SVG düzeltmeleri (kart 125px denge + AKADEMİ varyantı) repo'ya taşınmalı; güncel kopyalar `design/assets/logo-card-{light,dark}-akademi.svg`.