Kariyerbul · Kariyer Paketleri Ön Yüz Tasarım Planı

Kurucunun "onarım sırası" ile birebir kullanacağı tek kapsamlı belge. Kaynak: DESIGN_BRIEF.md + dört araştırma (GPT-5.6-sol önerisi, rakip/referans araştırması, paket sergileme + demo + paket içi akış çalışması, tasarım sistemi + bilgi mimarisi çalışması). Mevcut kod tabanı (/root/projeler/kariyerbul_site/) doğrulandı.

Kurallar: Türkçe · em dash yok (virgül veya · ) · mobil öncelikli · videosuz (görsel + metin + etkileşim) · dürüstlük (tamamlama sertifikası, resmi/MYK belgesi yerine geçmez) · mevcut 14 sayfa EZİLMEZ, üstüne inşa edilir.

0. ÖZET, TASARIM İLKELERİ VE KAYNAK SENTEZİ

0.1 Ürün tek cümlede

Her meslek için, telefondan tamamlanabilen bir "işe hazırlık yolculuğu": görsel dersleri geç, görevleri yap, mesleğe özel CV'ni oluştur, sembolik sınavı geç, doğrulanabilir tamamlama sertifikanı al, o mesleğin gerçek iş ilanlarına doğrudan başvur. Konumlandırma cümlesi:

Sadece öğrenme, başvuruya hazır hale gel.

Ürünün ayrışması tek bir halkada değil, zincirin tamamını tek akışta bağlamasında: Öğren, Görev, CV, Sınav, Sertifika, İlan, Başvuru. Rakip araştırması bunu doğruladı: Coursera/Udemy/LinkedIn öğrenme+sertifikada güçlü ama CV/başvuruya girmiyor; resume.io/Enhancv CV+başvuruda güçlü ama eğitim/sertifika halkası yok; kariyer.net Akademi ikisini aynı çatıda topluyor ama gevşek bağlı ve sertifikası zayıf. Bu boşluk gerçek ve TR pazarında sıkı biçimde doldurulmamış.

0.2 Beş tasarım ilkesi (her karar bunlara bağlanır)

  1. Videosuz. Video/ses ikonu, oynatıcı, ses dalgası YOK. Tüm ders/demo görsel + metin + etkileşim (dokunulur bilgi kartı, sürükle-sırala, tek seçimli kontrol). Canlı demo bu formatın "sıkıcı değil" olduğunu 60 saniyede kanıtlar.
  2. Mobil öncelikli. 360px'den başlar, yatay kaydırma yok, gövde metni min 16px, kritik CTA thumb-reach alt bölgede, dokunma hedefi min 44px (tercihen 48px). Hedef kitle telefon ağırlıklı iş arayan.
  3. Dürüstlük. Sertifika her yerde "tamamlama sertifikası" + "resmi/MYK belgesi yerine geçmez" ibaresi. Uydurma sayı/yorum yok, sahte kıtlık ("son 2 kontenjan") yok, iş bulma garantisi yok. Gerçek olmayan sosyal kanıt yazılmaz.
  4. Dönüşüm odaklı. Her yüzey "gör, dene, seç, al" hunisini besler. Ücretsiz eşik = deneyimi bedava yaşat, değerli SON çıktıyı (tam sınav + sertifika + platform CV indirme + ilan kilidi) ödeme kapısına koy. Rakiplerin ortak formülü bu.
  5. Mevcudun üstüne inşa. Teal + amber marka, Plus Jakarta Sans + Inter font, .btn/.card/.tag/.grid bileşenleri, /meslek /cv-olustur /kariyer-testi araçları KORUNUR ve pakete entegre edilir. Sıfırdan yeniden icat yok.

0.3 Ürünün çengeli (tasarımın her yerinde görünür)

Sertifika = iş hattının anahtarı. İş ilanları sertifika alınınca açılır. Bu yüzden kilitli ilan önizlemesi satış sayfasında, paket hub'ında ve sertifika ekranında sürekli görünür ("Sertifikanı alınca bu ilanlar açılır"). Kilit motivasyondur, satış argümanıdır.

0.4 Kaynaklar arası anlaşma ve ayrışma notu

Dört kaynağın HEMFİKİR olduğu (doğrudan alındı):

AYRIŞTIKLARI noktalar ve seçilen karar (gerekçeli):

KonuGPT-5.6-solClaude ajanları (sistem + paket_demo)SEÇİLEN KARAR + gerekçe
Renk paletiYepyeni lacivert (#205081) paletMevcut teal (#0f766e) + amber korunsunTeal + amber korunur. GPT kod tabanını görmeden genel token önerdi; brief "mevcut ezilmeyecek" diyor, marka özkaynağı 14 sayfada yerleşik. Doğrulandı: app.css'te teal+amber sabit.
TipografiSadece Inter (tek font)Plus Jakarta Sans (başlık) + Inter (gövde) korunsunMevcut ikili korunur. Aynı gerekçe. Sadece ders/uzun okuma alanında gövde 16-17px'e çıkar.
Route adları/kariyer-paketleri, /kariyer-paketleri/[slug], öğrenme /hesabim/paketlerim/... altında/paketler, /paket/[slug], öğrenme /paket/[slug]/... altında/paketler + /paket/[slug] (kısa, mevcut /meslek /mulakat tekil kalıbıyla tutarlı). GPT'nin /hesabim/paketlerim fikri hesap indeksi olarak alınır.
İlan sayısı kartta(belirtmedi) paket_demo "47 aktif ilan" canlı göstersistem "gerçek zamanlı entegrasyon yoksa sayı GÖSTERME, vaat cümlesi kullan"İlke ortak: sayı yalnızca canlı sorgudan gelirse. Faz 1 = sayı yok, "Sertifika sonrası ilan erişimi" vaadi. Faz 2 = cron ile tazelenen gerçek sayı + son güncelleme tarihi. Uydurma sayı asla.
Sertifikada puan"Sertifikada puan DEĞİL, başarı durumu göster"paket_demo sertifikada "Skor %90" gösterdiPaylaşılan/herkese açık sertifika: puan yok, "başarıyla tamamladı". Puan yalnızca kullanıcının kendi özel sınav sonuç ekranında. GPT'nin onur/kıyas argümanı doğru, dürüstlük çerçevesiyle de uyumlu.
Sınav tekrar hakkı"Fiyata en az 3 deneme dahil""Sınırsız serbest tekrar, her seferinde farklı 20 soru"Sınırsız tekrar, her denemede havuzdan farklı 20 soru. Kıtlık/baskı yasağı (KPSS kitlesi hassas) ile uyumlu. Kurucu onayı: §9.6 açık karar.
Nav yapısıAraçları düz sırala (Paketler, CV, Test, Maaş, İlan, Pro)Araçları "Araçlar ▾" dropdown'da topla, nav 4 item sabitAraçlar dropdown (nav şişmez, 100 pakete ölçeklenir). GPT'nin 100+ mega menü fikri buraya eklenir.
Sertifika kodu(belirtmedi)sistem KB-2026-XXXXXX, paket_demo BRS-24X7AKB-<MESLEKKODU>-<YIL>-<RASTGELE> ör. KB-BRS-2026-7A2K (iki öneri birleşti).
İlan kaynağıeleman.net + secretcvsistem: elemanbul mu eleman.net+secretcv mi çelişkisi, veri katmanı çözPaket-özel ilan = eleman.net + secretcv (brief); genel site köprüsü = elemanbul (işveren tarafı). İki ayrı bağlam, jobLinks.ts tek yerden yönetir. Kaynak son onayı: §9.6.

Neden bu sentez: GPT-5.6-sol'un metin/copy/akış önerileri çok güçlü ve büyük ölçüde alındı (konumlandırma cümlesi, hero copy, landing bölümleri, sınav öncesi hazırlık ekranı, otomatik kayıt davranışı). Claude ajanları kod tabanına dokundukları için renk/font/route/veri modeli/prerender kararlarında onlar esas alındı. Referans araştırması ise her kararın "rakip nasıl yapıyor, bizim farkımız ne" gerekçesini sağladı.

1. BİLGİ MİMARİSİ, SİTE HARİTASI VE ROUTE PLANI

1.1 Meslek ↔ paket slug birliği (mimarinin temeli)

Mevcut meslekler.ts çoğunlukla uzman/beyaz yaka rolleri içeriyor; kurucunun seçtiği 10 paketin 8'i giriş seviyesi hizmet rolü ve meslekler.ts'te YOK.

Karar: her paketin slug'ı ilgili mesleğin slug'ıyla birebir aynı olur (ayrı mapping tablosu gerekmez, /meslek/[slug] ↔ /paket/[slug] çapraz linki tek satır). Bu yüzden:

Sonuç: paket detay sayfası, aynı meslek için var olan /meslek/[slug] (görev, beceri, maaş) sayfalarına duplike içerik üretmeden linklenir. Paket, meslek bilgisinin üstüne oturan "sertifikalı eğitim katmanı" olur.

1.2 Site haritası (tam ağaç)

kariyerbul.com/
├── /                          [GÜNCELLENİR] ana sayfa + paket vitrini
├── /paketler                  [YENİ] paket hub (arama + kategori filtre + grid/liste)
├── /paket/[slug]              [YENİ] paket detay / satış öncesi ikna sayfası
│   ├── /ogren                 [YENİ] paket ana ekranı / yol haritası (satın alınca hub)
│   ├── /ders/[n]              [YENİ] ders slayt gezgini
│   ├── /kaynaklar             [YENİ] PDF kaynak indirme (satır içi de olabilir)
│   ├── /gorev/[n]             [YENİ] interaktif görev ekranı
│   ├── /sinav                 [YENİ] sembolik sınav (20/40, %70) + sonuç
│   ├── /sertifika             [YENİ] sahibe özel sertifika görünümü + paylaşım
│   └── /ilanlar               [YENİ] sertifikayla açılan gerçek ilan linkleri
├── /sertifika/[kod]           [YENİ] HERKESE AÇIK doğrulama sayfası (noindex, dinamik)
├── /hesabim                   [YENİ, FAZ 2] kullanıcı paneli (dinamik)
│   ├── /paketlerim            [YENİ, FAZ 2] satın alınan paketler + ilerleme + sertifikalar
│   └── /giris                 [YENİ, FAZ 2] e-posta ile erişim/kurtarma (magic-link tarzı)
├── /odeme/[slug]              [YENİ, FAZ 2] PayTR checkout (kök seviyede, §1.5 gerekçe)
│   ├── /basarili
│   └── /basarisiz
├── /cv-olustur                [KORUNUR + küçük: ?paket= query desteği]
├── /maas-hesaplama            [KORUNUR + küçük: ?meslek= query desteği]
├── /kariyer-testi             [KORUNUR + küçük: sonuçta paket linki]
├── /meslek, /meslek/[slug], /meslek/[slug]/maas   [KORUNUR, +8 yeni slug]
├── /cv-ornegi, /cv-ornegi/[slug]   [KORUNUR]
├── /mulakat, /mulakat/[slug]        [KORUNUR]
├── /is-ilanlari               [KORUNUR, genel köprü; §1.6 not]
├── /pro                       [KORUNUR; Pro ürünü paketlerden ayrı, mor aksan]
├── /hakkinda                  [KORUNUR]
└── /sitemap.xml               [GÜNCELLENİR]

1.3 URL ve SEO title tablosu (mevcut kalıpla tutarlı)

URLAmaçTitle deseniİndeksleme
/paketlerPaket hubKariyer Paketleri · Sertifikalı, Videosuz Meslek Eğitimleri | kariyerbulindex
/paket/[slug]Satış/detay{Meslek} Kariyer Paketi · Ders + Sertifika + İş İlanı | kariyerbulindex, @type:Course JSON-LD
/paket/[slug]/ogrenÖğrenme hub(kullanıcıya özel)noindex
/paket/[slug]/ders/[n]Ders viewer(öğrenme içeriği)noindex
/paket/[slug]/sinavSınavnoindex
/sertifika/[kod]Doğrulama{Ad} · {Paket} Sertifikası Doğrulama | kariyerbulnoindex,follow (KVKK, kişi adı Google'da çıkmasın)

1.4 10 → 100+ ölçekleme kademesi (kategori + arama + SEO)

Kategori taksonomisi (mevcut meslekler.ts kategorileriyle hizalı, ilk 10 dağılımı):

KategoriPaket(ler)
Ofis & İdari (YENİ kategori)Sekreter, Tıbbi Sekreter, Resepsiyonist
Müşteri HizmetleriÇağrı Merkezi Elemanı
Finans / MuhasebeÖn Muhasebe Elemanı
Gıda / Yeme-İçme (HoReCa)Garson, Barista
Yönetim / İnsan Kaynaklarıİnsan Kaynakları
Satış & PerakendeKasiyer
Lojistik & KuryeKurye
(İleride) Sağlık Destek, Güvenlik & Temizlik, Üretim & Depo, Turizm...

Kademeli SEO kararı:

Arama: 100+ pakette bile client-side fuzzy filtre yeterli (paket meta verisi ~5-10KB statik JSON, mevcut MESLEKLER.filter() deseni). Elasticsearch/Algolia gerekmez. Eşanlamlı desteği: "kasa" → Kasiyer, "call/çağrı" → Çağrı Merkezi, "moto/dağıtım" → Kurye, "İK" → İnsan Kaynakları, "asistan" → Sekreter. Sonuç yoksa: "Bu meslek için henüz paket yok. Açılınca haber verelim." (e-posta talebi = talep sinyali).

1.5 Prerender ve route yerleşimi (kritik teknik incelik)

+layout.ts tüm siteye prerender=true uyguluyor. Statik/placeholder Faz 1 route'ları (paketler, paket detay, ders, kaynaklar, görev, sınav) için doğru, entries() ile otomatik çalışır.

Ama sertifika/[kod], odeme/[slug], hesabim dinamik olmalı (kullanıcı/sipariş anına özel). Bu route'ların kendi +page.ts'inde export const prerender = false; ile global ayarı override etmesi ZORUNLU. Aksi halde build kırılır. Planın en kritik "build'i kırmama" notu budur.

Ödeme kök seviyede (/odeme/[slug]), /paket/[slug]/odeme DEĞİL: svelte.config.js'deki routes.exclude glob'u (/paket/*) prefix eşleşmesi yapıyor; ödeme /paket/* altında kalsaydı yanlışlıkla "statik" sanılıp Cloudflare Functions worker'ının önüne alınabilirdi. Kök seviye bu çakışmayı imkansız kılar. Sertifika ve hesabim de aynı gerekçeyle kök seviyede.

1.6 İş ilanı kaynağı ve marka köprüleri

1.7 Paket veri modeli

Yeni dosya src/lib/data/paketler.ts, mevcut meslekler.ts stiliyle:

export interface PaketDers { sira: number; baslik: string; sure: string; slaytSayisi: number; }
export interface PaketGorev { sira: number; baslik: string; tip: 'checklist'|'coktan-secmeli'|'siralama'|'senaryo'; }
export interface PaketSinavSorusu { soru: string; secenekler: string[]; dogruIndex: number; aciklama: string; }

export interface Paket {
  slug: string;              // meslekler.ts slug'ı ile BİREBİR
  ad: string;                // "Kurye Kariyer Paketi"
  meslekAdi: string;         // "Kurye"
  kategori: string;
  seviye: 'Başlangıç'|'Orta';
  ozet: string;              // 1 cümle sonuç vaadi
  neOgrenecek: string[];     // 4-6 madde
  dersler: PaketDers[];
  pdfKaynakSayisi: number;
  gorevler: PaketGorev[];
  sinavSoruHavuzu: number;   // 40
  sinavSoruSayisi: number;   // 20
  gecmeYuzdesi: number;      // 70
  fiyat: number;             // 99-249 TL
  fiyatEski?: number;        // gerçek+tarihli indirim; varsayılan kapalı
  tahminiSure: string;       // "3-4 saat"
  populer?: boolean;
  yeni?: boolean;
  ikonAnahtari: string;      // inline SVG anahtarı (emoji DEĞİL)
  ilanKaynaklari: ('eleman-net'|'secretcv')[];
  // CANLI alanlar (uydurma YASAK, yoksa render edilmez):
  ilanSayisi?: number;       // Faz 2 cron ile tazelenir
  tamamlayan?: number;       // gerçekse gösterilir
  // Demo (herkese açık):
  demoDersSlaytlari: { baslik: string; icerik: string }[];  // 2-3 slayt
  demoGorev: PaketGorev & { aciklama: string };
  demoSinavSorusu: PaketSinavSorusu;
}

export const PAKETLER: Paket[] = [ /* 10 kayıt, Faz 1'de placeholder içerik */ ];
export const paketBySlug = (s: string) => PAKETLER.find(p => p.slug === s);
export const paketKategorileri = () => [...new Set(PAKETLER.map(p => p.kategori))].sort();

Placeholder ilkesi: Faz 1'de 10 kayıt var ama içerik alanları taslak metinle dolu (ör. "Ders 1: [İçerik ekibi dolduracak, Kuryeliğe giriş]"), yapı tam. Prerender kırılmaz, içerik sonra damlar.

1.8 Erişim ve ilerleme mimarisi

2. TASARIM SİSTEMİ

2.1 Renk paleti (mevcut korunur, semantik roller netleşir)

Korunan çekirdek (app.css'te doğrulandı, değişmez):

--brand:   #0f766e   ana marka, güven (buton, link, aktif durum)
--brand-d: #115e59   hover/koyu
--brand-l: #ccfbf1   açık zemin/tag arkaplanı
--brand-2: #14b8a6   gradyan ikinci rengi
--accent:  #f59e0b   enerji/CTA ikincil, paket/sertifika aksanı
--accent-l:#fef3c7   açık amber zemin
--ok:      #16a34a   başarı/geçti/tamamlandı
--bad:     #e11d48   hata/kaldı
--bg:      #f7faf9   sayfa zemini
--card:    #ffffff   kart zemini
--ink:     #0f172a   birincil metin
--mut:     #64748b   ikincil metin
--line:    #e6ece9   kenarlık

Yeni eklenecek (paket ürünü ihtiyacı, ham renk açmaz, mevcudu genişletir):

--accent-d: #b45309   accent koyu (sertifika rozet gradyanı)
--info:     #2563eb   nötr bilgi kutusu (sınav kuralları, ödeme güvenliği)
--info-l:   #dbeafe   açık mavi zemin
--locked:   #94a3b8   kilitli ders/görev ikonu (durum tonu)
--pro:      #6941c6   Pro ürünü aksanı (paketlerden AYRI; sertifikayla karışmaz)

Renk rol kuralı:

Koyu tema: Faz 1'de yapılmaz, token mimarisi hazır bırakılır (tüm yeni bileşenler var(--token) kullanır, hardcoded hex yok). Faz 2 opsiyonel: (a) site geneli dark, (b) sadece ders/sınav ekranında "odak modu" (küçük kapsam, yüksek değer).

2.2 Tipografi (mevcut korunur)

Tip ölçeği (mevcut clamp deseni formalize + genişletildi):

TokenDeğerKullanım
--fs-display (YENİ)clamp(32px,6vw,52px)paket detay hero, sertifika başlığı
.h-lgclamp(28px,5vw,44px)ana sayfa hero H1
.h-mdclamp(22px,3.5vw,30px)iç sayfa H1, bölüm H2
.h-sm (YENİ)clamp(18px,2.5vw,20px)kart başlığı, H3
gövde15.5pxsite geneli
--fs-lesson (YENİ)16-17px / 1.7sadece ders slaytı/uzun okuma (min 16px okunabilirlik)
.lead17pxhero alt başlığı
--fs-sm13.5-14pxyardımcı/meta
--fs-xs12pxcaption, rozet

2.3 Spacing ve grid

Mevcut ad-hoc değerler (18/22/26px) korunur, dokunulmaz. Yeni bileşenler için 4px tabanlı skala:

--sp-1:4  --sp-2:8  --sp-3:12  --sp-4:16  --sp-5:20  --sp-6:24  --sp-8:32  --sp-10:40  --sp-12:48  --sp-16:64  (px)

2.4 İkon sistemi (emoji → SVG)

Ajans kuralı: hiçbir yeni bileşende emoji YOK. Mevcut sitedeki dekoratif emoji (📄💰🧭🎯 ✓ →) uygulama fazında SVG'ye çevrilir (aksiyon maddesi §9).

2.5 Komponent listesi (MEVCUT+ / YENİ işaretli)

2.6 Etkileşim ve erişilebilirlik (mevcut boşluklara dikkat)

3. HERO

3.1 Ana sayfa hero (mevcut hero GÜNCELLENİR, ezilmez)

Başlık (birincil, en somut/dönüşüm odaklı):

İstediğin mesleğe hazırlan, CV'ni oluştur, iş ilanlarına ulaş.

Alt metin:

Görsel ve interaktif dersleri tamamla, mesleğine özel CV hazırla, tamamlama sertifikanı al ve gerçek iş ilanlarına başvur. Baştan sona telefondan.

Alternatif başlıklar (A/B için):

  1. Mesleğini seç, başvuruya hazır hale gel.
  2. Bir mesleği öğren, sertifikan ol, işe başvur.
  3. Sertifikadan fazlası: işe başvuruya hazırlık paketi.

Hero içi üç kısa fayda (ikon + metin, sadece ikona bırakılmaz):

Görsel yön (videosuz vurgusu): stok illüstrasyon değil, gerçek ürün arayüzü önizlemesi (örnek Barista paketi). Ortada mobil çerçeve içinde bir ders slaytı; yanında/altında zincir şeridi. Masaüstü: metin sol, mockup + zincir sağ. Mobil: metin üst, önizleme alt, telefon çerçevesine sıkıştırılmaz, okunabilir büyüklükte.

Zincir şeridi (ürünün asıl farkı, hero içinde veya hemen altında):

 Öğren → Görev → CV → Sınav → Sertifika → İlan → Başvur
  (numaralı ikon zinciri; tek bakışta "uçtan uca bağlıyoruz")

Hiçbir rakip zinciri tek görselde anlatmıyor. Bu şerit sitenin ana ayrışması.

CTA'lar:

Güven rozetleri satırı (hero altı, doğrulanmamış sayı/başarı oranı YOK): Sertifikalı tamamlama · Tek seferlik ödeme · Kayıt gerekmeden dene · PayTR ile güvenli ödeme

3.2 "Sertifikalı" nasıl anlatılır (dürüstlük)

"Sertifikalı" tek başına kullanılmaz (resmi yeterlilik algısı yaratır). Doğru anlatım:

Paketi tamamla, doğrulanabilir dijital tamamlama sertifikanı al.

Hemen altında/bilgi ikonunda:

Bu sertifika, Kariyerbul Kariyer Paketi'ni tamamladığını gösterir. Resmi diploma, ustalık belgesi veya MYK mesleki yeterlilik belgesi yerine geçmez.

Bu ibare: paket detayında, satın alma kutusunda, sınav öncesinde, sertifika ekranında ve doğrulama sayfasında görünür (tooltip'e gizlenmez).

3.3 Paket detay hero (ayrı, /paket/[slug])

§6.7'de kroki. Mesleğe özel: ikon + ad + kategori/seviye + özet + meta rozet şeridi + amber ilan/sertifika vurgusu + sağda (mobilde altta) fiyat kutusu.

4. MENÜ VE NAVİGASYON

4.1 Masaüstü (nav şişmez, 4 item sabit, 100 pakete ölçeklenir)

Önce: CV Oluştur | Maaş Hesaplama | Kariyer Testi | Meslekler | Mülakat + sağda [Pro] [Ücretsiz CV Oluştur]

Sonra:

[logo]  Paketler   Araçlar ▾   Meslekler   İş İlanları        [Pro]  [Paketleri Keşfet]
┌─ Paketler (mega menü) ─────────────────────────────────────┐
│ 🔎 Hangi mesleğe hazırlanmak istiyorsun?                    │
│ ─────────────┬──────────────────────┬───────────────────── │
│ POPÜLER      │ KATEGORİLER          │ HIZLI FİLTRE          │
│ Kurye        │ Ofis & İdari         │ En çok tercih edilen  │
│ Barista      │ Yeme-İçme            │ Yeni eklenenler       │
│ Ön Muhasebe  │ Müşteri Hizmetleri   │ 150 ₺ altı            │
│ Tıbbi Sekr.  │ Lojistik & Kurye     │ Ücretsiz örneği olan  │
│ ...          │ Satış & Perakende ...│                       │
│ ───────────────────────────────────────────────────────── │
│ Tüm kariyer paketleri →   ·   Ücretsiz örneği dene         │
└────────────────────────────────────────────────────────────┘

Header'a arama çubuğu eklenir. Veri modelinde kategori alanı bugünden hazır (mega menü kod hazır, sadece açılır).

4.2 Mobil hamburger davranışı

Üst bar: sol logo · sağ arama ikonu · sağ profil/giriş · sağ hamburger.

Hamburger açılınca (tam ekran katman):

┌────────────────────────────────┐
│  [ Paketleri Keşfet ]   ← buton, vurgulu, listeden ayrık
│  ──────────────────────────────│
│  Araçlar                    ▾   │  ← accordion; açınca 5 alt link
│    CV Oluştur                   │
│    Maaş Hesaplama               │
│    Kariyer Testi                │
│    Mülakat                      │
│    CV Örnekleri                 │
│  Meslekler                      │
│  İş İlanları                    │
│  Pro                            │
│  Hakkımızda                     │
│  ──────────────────────────────│
│  [ Giriş Yap ]                  │
└────────────────────────────────┘

Genel site alt navigasyon (bottom-nav, ~64px, sadece paket-dışı genel sayfalarda):

┌──────┬──────┬──────┬──────┬──────┐
│ Ana  │Paket │  CV  │Test  │Hesap │
│ 🏠   │ 📦   │ 📄   │ 🧭   │ 👤   │  (emoji YER TUTUCU; SVG ile)
└──────┴──────┴──────┴──────┴──────┘

5. LANDING BÖLÜM SIRASI

Mantık: gör (vitrin) → dene (demo) → anla (nasıl çalışır/içerik) → güven (sertifika) → seç (fiyat/SSS) → dönüş (son CTA). Ana sayfa mevcut "araçlar merkezi" kimliğini korur, paketler en öncelikli yeni katman olarak üste gelir.

  1. Hero (§3) · ürünü tek cümlede anlat, paketlere/demoya yönlendir, zinciri göster.
  2. Güven şeridi · hero altı kısa alan: Telefonda tamamlanabilir · Tek seferlik ödeme · Ücretsiz örnek · Doğrulanabilir tamamlama sertifikası · PayTR. Doğrulanmamış sayı YOK.
  3. Kariyer Paketleri vitrini · eyebrow "Yeni · Kariyer Paketleri", başlık "Bir mesleği öğren, sertifikan ol, işe başvur", 6 öne çıkan kart grid + "Tüm paketleri gör →". Kartlarda "Ücretsiz dene" bağlantısı.
  4. Canlı demo (§7) · "Anlatmayalım, dene." Vitrinden hemen sonra, sayfanın ilk yarısında. Kullanıcı çok inmeden ürünü dener.
  5. İşe başvuruya giden 6 adım · başlık "Bir kurs değil, işe hazırlık yolculuğu". Yatay (mobilde dikey) adım akışı: 1 Mesleğini seç · 2 İnteraktif dersleri tamamla · 3 Görevleri uygula · 4 CV'ni hazırla · 5 Sınavı geç ve sertifikanı al · 6 Güncel ilanlara başvur. Ürünün farkını en net anlatan alan.
  6. Bir pakette neler var · başlık "Bir Kariyer Paketi'nde neler var?", kontrol listesi: görsel dersler · indirilebilir PDF · uygulamalı görevler · mesleğe özel CV · 20 soruluk tamamlama sınavı · dijital tamamlama sertifikası · gerçek iş ilanlarına yönlendirme. Fiyatın karşılığını somutlaştırır.
  7. CV entegrasyonu · başlık "Öğrendiklerini CV'ne aktar". Sol paket becerileri, sağ oluşan CV önizleme, arada "CV'ye ekle". Mevcut CV aracının ürün içi değerini gösterir.
  8. Sertifika ve doğrulama · başlık "Paylaşılabilir ve doğrulanabilir tamamlama sertifikası". Sertifika önizleme + doğrulama kodu + herkese açık doğrulama sayfası + PDF indir + LinkedIn'de paylaş. Dürüstlük ibaresi doğrudan bu bölümde.
  9. Sertifikadan ilana geçiş · başlık "Sertifikanı aldıktan sonra sıradaki adım belli". Akış: CV hazır → Sertifika hazır → eleman.net ilanlarını aç → secretcv ilanlarını aç → başvurunu tamamla. Gerçek zamanlı doğrulanamıyorsa ilan sayısı GÖSTERİLMEZ: "Güncel ilan arama sonuçlarına doğrudan ulaş."
  10. Memur/KPSS köprüsü (opsiyonel, utm ile) · başlık "Memuriyet olmadıysa özel sektöre hazırlanmaya devam et". Metin suçlayıcı değil: "KPSS'de geliştirdiğin disiplini özel sektörde kullanabileceğin bir mesleğe dönüştür." Butonlar: Özel sektör paketlerini incele · Kariyer testini çöz.
  11. Kullanım senaryoları · üç profil: ilk işini arayanlar · meslek değiştirmek isteyenler · uzun süredir iş arayanlar. Her biri için kısa sonuç mesajı.
  12. Fiyat ve risk azaltma · başlık "Ulaşılabilir fiyatla başvuruya hazırlan": Paketler 99-249 ₺ · tek seferlik ödeme · ücretsiz örnek · PayTR. Genel abonelik fiyat TABLOSU YAPILMAZ (paketler farklı fiyatlı). BTK'nın "ücretsiz" beklentisine karşı değer gerekçesi mikro-metni.
  13. SSS · Derslerde video/ses var mı? · Telefondan tamamlar mıyım? · Sertifika resmi mi? · Sınavı geçemezsem? · Ne kadar erişim? · CV dahil mi? · İş bulma garantisi? · İlanlar Kariyerbul'da mı? · Ödeme güvenli mi? · Fatura? İş garantisi net: "Kariyer Paketi iş bulma garantisi vermez. Adayı başvuruya hazırlamayı ve güncel ilan kaynaklarına yönlendirmeyi amaçlar."
  14. Son CTA · başlık "Başvuruya hazır hale gelmek istediğin mesleği seç". Butonlar: Kariyer paketlerini incele · Ücretsiz örneği dene. Alt not: "Hangi paketi seçeceğini bilmiyorsan kariyer testini çöz."
  15. Footer · Araçlar / Keşfet / Kurumsal + YENİ Paketler kolonu (3-4 kategori + Tüm Paketler). Ek linkler: Sertifika Doğrula · İşveren misin? elemanbul.com · Memuriyet: memuratamalari.com.

Not: 5. ve 6. bölüm ders/görev sayısı arttıkça birbirini tekrar etmemeli; 5 = süreç (nasıl), 6 = içerik (ne var). Güven/kanıt bölümlerinde sahte testimonial YOK; gerçek kullanıcı verisi birikince eklenir.

6. PAKET SERGİLEME

6.1 Grid mi liste mi

Karar: kart-grid birincil. Her paket 6-7 sinyal taşır (ad, ikon, süre, zorluk, sertifika, ilan/vaat, fiyat); grid bunu tarama-dostu paketler, düz liste satırı mobilde sığdıramaz. Landing = öne çıkan 6 kart; tam katalog /paketler. /paketler'de kullanıcı grid ⇄ liste geçişi yapabilir (100 pakette liste hızlı tarama için değerli, varsayılan grid). Masaüstü cols-3, tablet 2, mobil 1.

6.2 Paket kartı anatomisi (PaketKart.svelte)

┌───────────────────────────────────────┐
│ ▓▓▓ kapak şeridi (kategori rengi) ▓▓▓ │  ← 6px üst şerit
│  ( ☕ )                      ● Popüler │  ← 48px ikon dairesi + rozet (varsa)
│                                        │
│  Barista                               │  ← ad (.h-sm, --display)
│  Yeme-İçme · Başlangıç                 │  ← kategori · seviye (--mut)
│                                        │
│  Espresso, süt köpürtme ve müşteri     │  ← özet (14px, 2 satır clamp)
│  akışının temelleri.                   │
│                                        │
│  ⌚ ~2 sa   📚 12 ders   ✅ Sertifika   │  ← meta şerit (3 çip; ikon SVG)
│                                        │
│  🔦 Sertifika sonrası ilan erişimi     │  ← Faz 1: vaat (amber). Faz 2: "47 aktif ilan"
│  ───────────────────────────────────  │
│  149 ₺  ~~199~~        [ Ücretsiz Dene ]│  ← fiyat sol + CTA sağ
└───────────────────────────────────────┘
   ↑ tüm kart tıklanır → /paket/barista
   "Ücretsiz Dene" ayrı erişilebilir link → detaydaki canlı demoya
AlanKonumStil / not
İkonsol üst 48px dairekategori rengi + inline SVG (emoji değil)
Rozetsağ üst.badge Popüler(amber)/Yeni(teal), sadece gerçekse
Adbaşlık.h-sm --ink, tek satır, taşarsa …
Kategori · Seviyead altı--mut, noktayla ayrık
Özetorta14px --mut, 2 satır clamp
Süre/Ders/Sertifikameta çip3 çip; sertifika teal güven sinyali
İlan satırıayrı satırfiyatın üstünde, amber. Faz 1 vaat, Faz 2 canlı sayı. Kullanıcının asıl sorusu "iş var mı", kart bunu fiyattan önce yanıtlar
Fiyatalt sol800; eski fiyat üstü çizik (gerçek+tarihli indirim)
Ücretsiz Denealt sağ.btn.primary.sm, eşiği düşürür

Kartta GÖSTERİLMEZ: doğrulanmamış öğrenci sayısı, sahte puan/yorum, güncel tutulamayan ilan sayısı, "iş garantili", "resmi sertifika", anlamsız başlangıç/orta/ileri. İlk 10 paket için seviye çoğunlukla "Deneyim gerektirmez".

Varyantlar: Popüler (amber badge) · Yeni (teal) · Lansman indirimi (üstü çizik + "-%25" amber, gerçek) · İlan yoksa satır gizlenir, yerine "Sertifikalı tamamlama" · Yakında (içerik boş paket, ön yüz hazır: kart soluk + "Yakında" + "Haber ver"). Yakında varyantı "önce ön yüz komple" direktifini karşılar: 100 kart iskelet durabilir, içerik damlar.

Hover (masaüstü, @media hover:hover): translateY(-3px) + gölge + border --brand.

6.3 /paketler hub: arama + kategori + filtre + sıralama

┌──────────────────────────────────────────────┐
│  🔎 Meslek ara...  (kurye, garson, sekreter)  │  ← anlık filtre
├──────────────────────────────────────────────┤
│ [Tümü] [Ofis] [Muhasebe] [Satış] [Yeme-İçme]  │  ← kategori çipleri
│ [Çağrı] [Lojistik] [Sağlık] →  (yatay kaydırır)│
├──────────────────────────────────────────────┤
│ Sırala: [Popüler ▾]   Filtre ⚙(2)   ⊞grid/☰liste│
├──────────────────────────────────────────────┤
│  [ PaketKart ] [ PaketKart ] [ PaketKart ]    │  ← cols-3
│  [ PaketKart ] [ PaketKart ] [ PaketKart ]    │
│  ...                                          │
│           [ Daha fazla yükle ]                │  ← sayfalama değil (mobil dostu)
└──────────────────────────────────────────────┘

6.4 Paket detay sayfası (/paket/[slug]) iskeleti

breadcrumb: Ana sayfa › Paketler › Barista
┌──────────────── HERO ────────────────┐
│ ( ☕ ) Barista            ● Popüler   │
│ Yeme-İçme · Başlangıç                 │
│ Espresso, süt sanatı ve müşteri...    │
│ ⌚~2sa 📚12ders 🎯4görev ✅Sertifika  │
│ 🔦 Sertifika sonrası ilan erişimi     │
│ ┌── FiyatKutusu ──────────────────┐  │
│ │ 149 ₺  ~~199~~   PayTR güvenli   │  │
│ │ [ Paketi Aç ]   (amber, birincil)│  │
│ │ [ Önce Ücretsiz Dene ] (ghost)   │  │
│ │ 🛈 tamamlama sertifikası; resmi   │  │
│ │    /MYK belgesi yerine geçmez     │  │
│ └──────────────────────────────────┘ │
└───────────────────────────────────────┘
┌── "Bu paketi 60 sn'de dene" ──────────┐  ← CanliDemo (slug'a özel, §7)
│  [Ders] [Görev] [Sınav] sekmeli widget │
└───────────────────────────────────────┘
┌── Nasıl ilerler (7 adım şeridi) ──────┐
│ Dersler→Görevler→CV→Sınav→Sertifika→   │
│ İlanlar→Başvuru  (numaralı ikon zinciri)│
└───────────────────────────────────────┘
┌── Müfredat önizleme (accordion) ──────┐
│ Bölüm 1 · Temeller       (2 ders açık) │  ← ilk dersler demo=açık
│  ✓ Barista nedir? [Önizle]             │
│  ✓ Ekipman tanıtımı [Önizle]           │
│ Bölüm 2 · Espresso 🔒 (paketle açılır) │
│ Bölüm 3 · Süt & Latte 🔒               │
└───────────────────────────────────────┘
┌── Ne kazanırsın ──────────────────────┐
│ ✓ 12 derste meslek temeli             │
│ ✓ CV'ne "Barista Sertifikası" satırı  │
│ ✓ Doğrulanabilir dijital sertifika    │
│ ✓ Gerçek barista ilanlarına erişim    │  ← sonuncu amber (çengel)
└───────────────────────────────────────┘
┌── Örnek sertifika ────────────────────┐
│ [ sertifika görsel mockup, "ÖRNEK" ]  │
│ kariyerbul.com/sertifika/KB-BRS-...    │
│ 🛈 resmi/MYK belgesi yerine geçmez     │
└───────────────────────────────────────┘
┌── Bu meslekten örnek ilanlar 🔒 ──────┐
│ Barista · Kadıköy · [kilitli/bulanık]  │
│ Barista · İzmir · yarı zamanlı [kilit] │
│ "Sertifikanı alınca linkler açılır"    │
└───────────────────────────────────────┘
┌── SSS (accordion, FAQPage schema) ────┐
┌── İlgili paketler (aynı kategori) ────┐
│ Garson · Kasiyer · Resepsiyonist       │
[ elemanbul köprüsü: işveren misin? ]
════════════ sticky alt CTA (mobil) ════
 149 ₺   [ Ücretsiz Dene ] [ Paketi Aç ]

Sayfa içi sekmeler (masaüstü yapışkan, mobil yatay kaydırılır): Genel Bakış · İçindekiler · Görevler · Sertifika · Sık Sorulanlar.

7. CANLI DEMO

7.1 Amaç ve yerleşim

Satın almadan "videosuz ama etkileşimli" formatı yaşat → güven → dönüşüm. Kullanıcının içsel sorusu: "videosuz ders sıkıcı olmaz mı?" Demo bunu 60 saniyede çürütür. Üç giriş noktası: (1) landing bağımsız bölüm (gerçek bir paketle, ör. Barista), (2) her paket kartında "Ücretsiz dene", (3) paket detayında hero altı. Tek bileşen CanliDemo.svelte, prop slug ile içeriği yükler. Demo için hesap zorunlu değil (misafir modda, ilerleme localStorage).

7.2 Üç sekmeli widget

┌──────────────────────────────────────────────┐
│  Bu paketi şimdi, burada dene · 60 saniye     │
│  ● Ücretsiz Demo            [Demodan çık]     │
│  ┌──────────┬──────────┬──────────┐           │
│  │▚Ders Slaytı│ Görev   │ Sınav    │  ← sekmeler│
│  └──────────┴──────────┴──────────┘           │
│   [ aktif sekme içeriği ]                      │
└──────────────────────────────────────────────┘

Sekme 1 · Örnek Ders Slaytı (formatı kanıtlar, video YOK):

┌────────────────────────────────────┐
│  ● ○ ○      Slayt 1 / 3             │
│ ┌────────────────────────────────┐ │
│ │      [ görsel / şema ]         │ │  ← görsel üstte
│ │  Baristanın 4 temel görevi     │ │
│ │  • Espresso çekmek             │ │
│ │  • Süt köpürtmek (steaming)    │ │
│ │  • Sipariş & müşteri akışı     │ │
│ │  • Tezgah ve hijyen            │ │
│ └────────────────────────────────┘ │
│      ‹ Geri            İleri ›      │  ← swipe de çalışır
└────────────────────────────────────┘

Sekme 2 · Örnek Görev (etkileşim + anında geri bildirim):

┌────────────────────────────────────┐
│  Görev: İdeal espresso süresi?      │
│  ( ) 5 saniye                       │
│  (•) 25-30 saniye                   │
│  ( ) 60 saniye                      │
│         [ Kontrol Et ]              │
│  ┌────────────────────────────────┐ │
│  │ ✅ Doğru! 25-30 sn ideal.       │ │  ← yeşil kutu + açıklama
│  │ Altında akış "under-extraction" │ │
│  └────────────────────────────────┘ │
└────────────────────────────────────┘

Sekme 3 · Örnek Sınav Sorusu (sınavın nasıl olduğunu gösterir):

┌────────────────────────────────────┐
│  Soru: Cappuccino oranı nedir?      │
│  A) Sadece süt                      │
│  B) 1/3 espresso, 1/3 süt, 1/3 köpük│  ← seçince B yeşil "Doğru"
│  C) Sadece espresso                 │      yanlış seçim kırmızı + doğruyu göster
│  D) Yarı su yarı süt                │
│  ┌────────────────────────────────┐ │
│  │ ✅ Doğru cevap: B               │ │
│  │ Klasik cappuccino eşit üçlüdür. │ │
│  └────────────────────────────────┘ │
│  🛈 Gerçek sınavda 20 soru, %70 geç │
└────────────────────────────────────┘

7.3 Etkileşim, dönüşüm ve güven

┌────────────────────────────────────┐
│  Format hoşuna gitti mi?            │
│  Tüm Barista paketi: 12 ders +      │
│  4 görev + sınav + sertifika + ilan │
│  [ Paketi Aç · 149 ₺ ]  (amber)     │
│  [ Diğer sekmeleri de dene ]        │  ← baskı yok
│  🛈 tamamlama sertifikası; resmi     │
│     belge yerine geçmez             │
└────────────────────────────────────┘

8. PAKET İÇİ DENEYİM (satın alma sonrası)

Ekran sırası: Yol Haritası → Ders Slaytları → (PDF) → Görev → CV → Sınav → Sertifika → İlanlar → Başvuru.

8.0 Yol Haritası / Paket Ana Ekranı (/paket/[slug]/ogren)

┌────────────────────────────────────────────┐
│ ( ☕ ) Barista paketi         ● Devam et    │
│ ▓▓▓▓▓▓▓▓▓░░░░░░░  %58 tamamlandı            │  ← genel ilerleme
├────────────────────────────────────────────┤
│  ✅ 1. Dersler        12/12   [Tekrar gez]  │
│  ⏳ 2. Görevler        2/4    [Devam et →]  │  ← sıradaki, vurgulu
│  ○ 3. CV'ni hazırla          [Başla]        │
│  🔒 4. Sınav          (görevler bitince)    │
│  🔒 5. Sertifika      (sınavı geç)          │
│  🔒 6. İş ilanları    (sertifika al) ← çengel│
├────────────────────────────────────────────┤
│  📎 Kaynaklar: 3 PDF indir                  │
│  Sertifika kodun: (henüz yok)               │
└────────────────────────────────────────────┘

En üstte tek "Devam et" bıraktığı yere götürür (tek karar). Kilitli adım sebebini söyler. İlan adımı en altta, kilitli ama GÖRÜNÜR (motivasyon).

8.1 Ders Slayt Gezgini (/paket/[slug]/ders/[n]) · videosuz çekirdek

┌────────────────────────────────────────────┐
│ ‹ Yol haritası      Bölüm 2 · Ders 5/12     │
│ ▓▓▓▓▓▓░░░░░░  ders içi ilerleme             │
├──────────┬─────────────────────────────────┤
│ BÖLÜMLER │  ┌───────────────────────────┐  │  ← masaüstü sol liste
│ 1 Temel ✓│  │   [ görsel / şema / foto ]│  │     (mobilde ☰ çekmece)
│ 2 Espres.│  │  Süt köpürtme adımları    │  │
│  ·5 aktif│  │  1. Süt sıcaklığı 60-65°  │  │
│ 3 Süt 🔒 │  │  2. Buhar ucu konumu      │  │  ← görsel + metin + liste
│          │  │  3. Mikroköpük dokusu     │  │
│          │  │  ▸ İpucu: cızırtı sesi... │  │  ← açılır ipucu (etkileşim)
│          │  └───────────────────────────┘  │
│          │   ‹ Önceki       Sonraki ›      │  ← swipe (mobil)
│          │   [ Bu dersi tamamla ✓ ]        │  ← son slaytta
└──────────┴─────────────────────────────────┘

8.2 PDF Kaynaklar (/paket/[slug]/kaynaklar veya satır içi)

Kart: kaynak adı · sayfa sayısı · dosya boyutu · Önizle · İndir · Daha sonra. Mobilde tarayıcıda açmaya zorlamaz, indir + yeni sekme seçeneği.

8.3 Görev Ekranı (/paket/[slug]/gorev/[n])

┌────────────────────────────────────────────┐
│ ‹ Yol haritası      Görev 3/4               │
├────────────────────────────────────────────┤
│  🎯 Görev: Latte için doğru sırayı kur      │
│  Adımları doğru sıraya sürükle:             │
│  ┌──────────────────────────────────────┐  │
│  │ ⠿ Espresso çek                        │  │  ← sürükle-sırala
│  │ ⠿ Sütü köpürt                         │  │     (mobilde dokun-taşı)
│  │ ⠿ Süt-espresso birleştir              │  │
│  │ ⠿ Servis                              │  │
│  └──────────────────────────────────────┘  │
│           [ Kontrol Et ]                    │
│  ┌──────────────────────────────────────┐  │
│  │ ✅ Doğru! Görev tamamlandı (+ilerleme)│  │  ← anında geri bildirim
│  └──────────────────────────────────────┘  │
│  [ Sonraki görev → ]                        │
└────────────────────────────────────────────┘

8.4 CV Oluşturma (mevcut aracın entegrasyonu, yeni ekran YOK)

/cv-olustur?paket=barista ile açılır; unvan state URL'den okunup ön-doldurulur, mesleğe özel özet/beceri şablonu hazır gelir. Akış: hedef mesleği doğrula → profil bilgileri → deneyim/deneyimsizlik → önerilen becerileri ekle → önizleme → PDF indir → pakete dön. Paket tamamlanmadıysa sertifika CV'ye eklenmez. Deneyimsizlere: "Deneyimin yoksa görevler, beceriler ve hedef profil ile güçlü bir başlangıç CV'si hazırlayabilirsin." Çıkan CV hesaba bağlanır → başvuruda (§8.8) kullanılır. Brief'in "mevcut araçları entegre et" kuralını karşılar.

8.5 Sınav öncesi hazırlık + Sınav Ekranı (/paket/[slug]/sinav)

Önce hazırlık ekranı (hazırlıksız sokma yok):

40 soruluk havuzdan rastgele 20 soru · geçme %70 (en az 14 doğru) · tek seçimli · ileri-geri gidilebilir · cevaplar bitene kadar değiştirilebilir · süre sınırı yok. "Bu sınav temel bilgiyi ölçer, resmi mesleki yeterlilik sınavı değildir." Hazırlık kontrol listesi (dersler/görevler/CV tamam mı) + "Sınavı başlat" (onay penceresi: "Cevapların otomatik kaydedilecek").

Sınav:

┌────────────────────────────────────────────┐
│  Barista Sınavı      Soru 7 / 20    (süre yok)│
│  ▓▓▓▓▓▓▓░░░░░░░░░░░░  ilerleme              │
├────────────────────────────────────────────┤
│  7. Süt köpürtürken ideal sıcaklık?         │
│  ( ) 40-45°C                                │
│  (•) 60-65°C                                │  ← seçenek tam genişlik dokunulur
│  ( ) 90-95°C                                │
│  ( ) fark etmez                             │
├────────────────────────────────────────────┤
│  ‹ Önceki            [ Sonraki › ]          │
│  ●●●●●●●○○○○○○○○○○○○○  cevap durumu          │  ← nokta navigasyon
└────────────────────────────────────────────┘
   son soruda: [ Sınavı Bitir ] → özet: "18/20 cevapladın, 2 boş"

Sonuç · GEÇTİ:

┌────────────────────────────────────────────┐
│        🎉 Tebrikler, sınavı tamamladın      │
│        18 / 20 doğru · %90                  │
│  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░  (geçme %70)          │
│  [ Sertifikanı Al → ]  (amber, birincil)    │
│  [ Cevaplarımı incele ]                     │
│  Sertifikan hazır. CV'ni indirip ilanlara   │
│  ulaşabilirsin.                             │
└────────────────────────────────────────────┘

Sonuç · KALDI (dil cezalandırıcı değil):

┌────────────────────────────────────────────┐
│        Bu denemede baraja ulaşamadın        │
│        12 / 20 (%60) · geçmek için 14 doğru │
│  Eksik konular: Süt teknikleri, Hijyen      │  ← kategori bazlı geri bildirim
│  [ İlgili dersleri tekrar et ]              │
│  [ Yeni sınav dene ]  (havuzdan farklı 20)  │  ← sınırsız, ceza/kıtlık yok
└────────────────────────────────────────────┘

Kalınca farklı 20 soru, sınırsız tekrar (öğrenme hedefli). Doğru cevaplar sınırsız gösterilmez (havuz güvenliği), konu açıklaması + ders bağlantısı verilir.

8.6 Sertifika Ekranı (/paket/[slug]/sertifika) · paylaşılabilir

┌────────────────────────────────────────────┐
│ ╔══════════════════════════════════════╗   │
│ ║  kariyerbul · TAMAMLAMA SERTİFİKASI   ║   │  ← amber gradyan çerçeve
│ ║                                        ║   │
│ ║  Bu belge                              ║   │
│ ║      AHMET YILMAZ                       ║   │
│ ║  adlı adayın                            ║   │
│ ║      Barista Kariyer Paketi'ni          ║   │
│ ║  başarıyla tamamladığını gösterir.      ║   │
│ ║                                        ║   │
│ ║  Tarih: 04.08.2026                      ║   │  ← puan YOK (herkese açık görünüm)
│ ║  Kod: KB-BRS-2026-7A2K  ✔ doğrulanabilir║   │
│ ║  kariyerbul.com/sertifika/KB-BRS-2026-7A2K║ │
│ ║  [QR]                                   ║   │
│ ╚══════════════════════════════════════╝   │
│  🛈 Tamamlama sertifikasıdır; resmi / MYK   │
│     belgesi yerine geçmez.                  │
│  Paylaş:                                    │
│  [ WhatsApp ] [ LinkedIn ] [ PNG indir ]    │  ← WhatsApp birincil (kitle telefon)
│  [ PDF indir ] [ Bağlantıyı kopyala ]       │
│  [ CV'ye ekle ]                             │
│  ───────────────────────────────────────   │
│  [ Sıradaki adım: İş İlanları → ]  (amber)  │  ← çengel: cert → ilan
└────────────────────────────────────────────┘

Herkese açık doğrulama (/sertifika/[kod]):

8.7 İş İlanları Ekranı (/paket/[slug]/ilanlar) · sertifikayla açılır

┌────────────────────────────────────────────┐
│  🔓 Tebrikler! Barista ilanların hazır      │
│  Sertifikan: KB-BRS-2026-7A2K ✓             │
│  CV hazır ✓  ·  Sertifika hazır ✓           │
│  Filtre: [şehir ▾] [tam/yarı zamanlı ▾]     │
├────────────────────────────────────────────┤
│ ┌────────────────────────────────────────┐ │
│ │ Barista · Kadıköy Kahve                 │ │
│ │ eleman.net · dış sitede açılır          │ │
│ │ [ İlanı Aç ↗ ]   [ CV ile Başvur → ]   │ │
│ └────────────────────────────────────────┘ │
│ ┌────────────────────────────────────────┐ │
│ │ Barista (yarı zamanlı) · İzmir          │ │
│ │ secretcv · dış sitede açılır            │ │
│ │ [ İlanı Aç ↗ ]   [ CV ile Başvur → ]   │ │
│ └────────────────────────────────────────┘ │
│  Kaynak: eleman.net + secretcv doğrulanmış  │
│          arama URL'leri                     │
└────────────────────────────────────────────┘

8.8 CV ile Başvuru + geri dönüş

[İlan kartı] "CV ile Başvur"
      ↓
┌────────────────────────────────────────────┐
│  Barista · Kadıköy Kahve için başvuru       │
│  CV'n: ✅ Barista CV (paket içinde hazır)    │
│  [ CV'yi PDF indir ]  [ Güncelle ]          │
│  ┌──────────────────────────────────────┐  │
│  │ 1. CV'ni indir (yukarıda)             │  │
│  │ 2. İlana git, CV'ni yükle:            │  │
│  │    [ eleman.net ilanına git ↗ ]       │  │
│  └──────────────────────────────────────┘  │
│  Sertifika kodunu başvuruya ekle:           │
│  KB-BRS-2026-7A2K   [ kodu kopyala ]        │
└────────────────────────────────────────────┘

8.9 Hesap ekranı (/hesabim/paketlerim, Faz 2)

Paketler üç grup: Devam edenler · Tamamlananlar · Başlanmayanlar. Kartta: ad · ilerleme % · son bölüm · son erişim · "Kaldığın yerden devam" / "Sertifikayı görüntüle" / "İş ilanlarına git". Tamamlananlarda ilerleme yerine: Sertifikayı aç · CV'yi güncelle · Güncel ilanlara git (ürün sertifikada bitmiş gibi davranmaz).

9. UYGULAMA SIRASI (önce ön yüz KOMPLE, sonra içerik tek tek)

Kritik ilke: her yüzey boş-durumu baştan taşır ("yakında"/"içerik geliyor"), ön yüz içerikten önce komple çıkar. Kilit ve dürüstlük ibareleri en baştan yerinde. Kurye ilk doldurulan paket.

FAZ 1 · Ön yüz iskeleti (placeholder içerikle ayakta, ödemesiz)

Her adım somut iş kalemleriyle:

  1. Veri temeli: meslekler.ts'e 8 yeni meslek ekle (kurye, on-muhasebe-elemani, garson, sekreter, tibbi-sekreter, resepsiyonist, barista, kasiyer; tam Meslek verisi). paketler.ts oluştur: Paket şeması + 10 kayıt, içerik alanları placeholder ("yakında" metniyle), fiyat/kategori/seviye gerçek. jobLinks.ts + progress.ts (localStorage yardımcıları) iskelet.
  2. Tasarım sistemi: app.css'e yeni token'lar (--accent-d, --info, --info-l, --locked, --pro, --sp-, --fs-) + yeni bileşen stilleri (.badge, .tabs, .progress.steps, .card varyantları, :focus-visible, @media hover:hover). Mevcut hiçbir şey silinmez.
  3. İkon: lucide-svelte kur VEYA $lib/icons/ minimal set; mevcut emoji'leri (📄💰🧭🎯✓→) SVG'ye çevir.
  4. Navigasyon: +layout.svelte nav/footer restructure (Paketler + Araçlar dropdown + Paketleri Keşfet CTA + Paketler footer kolonu + bottom-nav). Mobil hamburger accordion.
  5. Ana sayfa: +page.svelte bölüm sıralaması (hero güncelle + paket vitrini + nasıl çalışır + demo bloğu + sertifika + memur köprüsü). §5 sırası.
  6. Sergileme: /paketler hub (grid/liste + arama + kategori çipleri + filtre bottom-sheet + sıralama, URL state). PaketKart + PaketGrid + PaketFiltre bileşenleri.
  7. Paket detay: /paket/[slug] iskeleti (hero + FiyatKutusu + 7 adım şeridi + müfredat accordion boş-durumlu + ne kazanırsın + örnek sertifika + kilitli ilan bloğu + SSS + ilgili paketler + sticky CTA). prerender + entries().
  8. Canlı demo: CanliDemo.svelte (3 sekme) + 1-2 pakette (Barista) gerçek demo JSON. Landing güven bloğu + detay hero altı canlanır.
  9. Paket içi kabuklar: yol haritası (/ogren) → slayt gezgini (/ders/[n]) → görev (/gorev/[n]) → sınav (/sinav) → sertifika (/sertifika) → ilanlar (/ilanlar). Her biri boş-durum/placeholder kaldırır, çalışır iskelet.
  10. Sertifika doğrulama: /sertifika/[kod] (demo modda, prerender=false, gerçek kod üretimi olmadan örnek gösterir).
  11. Araç entegrasyonu: cv-olustur (?paket=), maas-hesaplama (?meslek=), kariyer-testi (sonuçta paket linki) küçük query-param güncellemeleri.
  12. Altyapı: svelte.config.js exclude'a /paket/* ekle; /sertifika/*, /odeme/*, /hesabim* EKLENMEZ (dinamik). sitemap.xml yeni route'lar (ders/sınav/sertifika hariç, noindex).
  13. Satın al CTA'ları Faz 1'de /pro'daki "Çok yakında" deseniyle devre dışı / e-posta bekleme listesi.
  14. Doğrulama: 3 viewport testi (1366px, 1280px, 390px), placeholder içerikle hiçbir sayfa kırılmamalı, yatay kaydırma olmamalı.

Faz 1 çıktısı: 10 paket kartı görünür, boş ders/görev/sınav ekranları çalışır, demo Barista'da canlı, tüm zincir tıklanabilir. Site tasarımsal olarak ortaya çıkmış olur.

FAZ 2+ · İçerik tek tek + ödeme/backend

9.6 Kurucu onayı gereken açık kararlar

  1. İş ilanı kaynağı: paket-özel eleman.net + secretcv (brief) mi, genel elemanbul mu, üçü birlikte mi? jobLinks.ts her ihtimale hazır.
  2. Sınav tekrar hakkı: sınırsız (öneri, kıtlık yasağıyla uyumlu) mi, 3 deneme mi? Sertifikada puan yok kararı sabit.
  3. fiyatEski indirim gösterimi: varsayılan kapalı (sahte kıtlık riski); istenirse gerçek+tarihli açılır.
  4. Site geneli dark mode: Faz 2, öncelik onayı (14 sayfa etkilenir).
  5. Font/gövde boyutu sitewide revizyonu: §10.4 gerilimi; rebrand isteniyorsa ayrı görev.

10. TEKNİK NOTLAR

10.1 SvelteKit uyumu

10.2 Mevcut 14 sayfanın korunması

Her route "KORUNUR / GÜNCELLENİR (küçük) / YENİ" işaretli (§1.2). KORUNUR: meslek(+8 slug), cv-ornegi, mulakat, is-ilanlari, pro, hakkinda, sitemap (genişler). GÜNCELLENİR (küçük, query-param): cv-olustur, maas-hesaplama, kariyer-testi. GÜNCELLENİR (orta): +layout, ana sayfa. YENİ: paket ağacı + sertifika + (Faz 2) odeme/hesabim.

10.3 Araç ↔ paket entegrasyon köprüleri (route DUPLICATE edilmez)

10.4 Ajans design-rules gerilimi (bilinçli karar)

design-rules.md Inter'i "forbidden font" sayıyor ve gövde min 16px istiyor (mevcut 15.5px). Karar: bu aşamada font değiştirilmez çünkü (1) brief "mevcut ezilmeyecek" diyor, (2) Inter+Plus Jakarta Sans 14 sayfada yerleşik marka özkaynağı, (3) font değişimi tüm sayfaların dengesini bozar, bu görev paket eklemek, rebrand değil. Ders/uzun-okuma alanı 16-17px'e çıkarılır (kısmi uyum + gerçek okunabilirlik). Sitewide revizyon §9.6 açık kararı.

10.5 Yeni bileşen dosya haritası

src/lib/paket/
  PaketKart.svelte   PaketGrid.svelte   PaketFiltre.svelte
  CanliDemo.svelte   (3 sekme, prop slug)
  SlaytGezgini.svelte   GorevEkrani.svelte   SinavEkrani.svelte
  YolHaritasi.svelte    Sertifika.svelte     IlanListesi.svelte
  FiyatKutusu.svelte    StickyCTA.svelte     DemoKapanisCTA.svelte
src/lib/data/paketler.ts       src/lib/jobLinks.ts       src/lib/progress.ts
src/lib/icons/*.svelte  (lucide-svelte tercih edilmezse)

10.6 Test/kalite kapıları