Bileşen kütüphanesi
Her bileşen css/components.css içinde tanımlı ve
tüm değerleri css/tokens.css'ten alıyor. Bu sayfa canlı: CSS'i değiştir,
sayfayı yenile, farkı burada gör. Next.js'e taşındığında aynı CSS kullanılacak.
1 · Renk
Zeminler dört kademeli: sayfa → yüzey → yükseltilmiş → katman. Bir kart, kartın içindeki kart ve modal farklı kademelerde olur; aksi hâlde arayüz düz ve amatör görünür.
| Token | Değer | Kullanım | Kontrast |
|---|---|---|---|
| --bg-base | #07090B | Sayfa zemini | — |
| --bg-surface | #0F1114 | Kart, sidebar, topbar | — |
| --bg-elevated | #16191D | Dropdown, modal, hover | — |
| --bg-overlay | #1D2126 | Input, çip, ikincil buton | — |
| --accent | #FF8A1F | Birincil buton, aktif durum | 8.1:1 AAA |
| --accent-fg | #140A02 | Turuncu üzerindeki her şey | 8.3:1 AAA |
| --live | #E00E40 | CANLI etiketi, izleyici noktası | 4.9:1 AA |
| --fg | #F5F7F8 | Başlık, önemli metin | 16.1:1 AAA |
| --fg-muted | #9AA2AB | Kanal adı, kategori, meta | 5.4:1 AA |
| --fg-subtle | #676E76 | Zaman damgası, pasif — 14px+ ve dekoratif | 3.2:1 |
Tek kırmızı çizgi: --accent üzerine beyaz yazı
yazılmaz (2.4:1). Button bileşeninde metin rengi parametresi
yok — varyanttan türüyor, böylece bu hata kodda yapılamaz.
Nötr seçimi kasıtlı: zeminler hafif mavi-soğuk
biaslı. Sıcak turuncu soğuk nötr üzerinde daha çok yanar. Nötr gri kullanılmadı.
Açık temada turuncu #C45800'e koyulaşır — #FF8A1F beyaz
zeminde 4.5:1'i geçmiyor.
1.5 · Üç tema
Sağ üstteki seçiciyle hepsini dene — bu sayfa canlı. Hiçbir bileşen tema bilgisine bakmaz; yalnızca token'lar yeniden tanımlanır.
| Tema | Nasıl açılır | Neden var |
|---|---|---|
| Koyu | bare :root | Taahhüt edilmiş varsayılan. Yayın platformu akşam kullanılır; koyu zemin videoyu öne çıkarır. |
| Açık | [data-theme="light"] · prefers-color-scheme | Gündüz, parlak ortam, ofis. Turuncu #C45800'e koyulaşır — #FF8A1F beyaz zeminde 4.5:1'i geçmiyor. |
| Gece | [data-theme="night"] | Tam siyah. OLED ekranda güç harcamaz ve oynatıcının çevresindeki letterbox sayfaya karışır — ekranda ışık veren tek şey video olur. |
Gece temasının teknik farkı: tam siyahta gölge görünmez.
Bu yüzden yükseklik (elevation) gölgeyle değil kenarlıkla
taşınır — --border ve --border-strong bu temada bir
kademe açılır, --shadow-* ise kenarlık tabanlı yeniden tanımlanır.
İşletim sisteminde bu temanın karşılığı olmadığı için yalnızca seçiciyle açılır.
Aynı bileşen üründe de kullanılıyor: gecikme modu,
ekip yayını düzeni, analitik dönem seçimi. Beş ve üzeri seçenek olursa
<select>'e geçilir.
2 · Tipografi
Inter Variable arayüz, JetBrains Mono sayı ve teknik değer. Sayılar her zaman
tabular-nums — izleyici sayacı güncellenirken genişlik zıplamaz.
Türkçe kuralı: büyük harf dönüşümü CSS
text-transform: uppercase ile yapılmaz — i harfi
I'ya dönüşür. Büyük harfli metinler i18n sözlüğünde hazır büyük yazılır.
Bu sayfadaki uppercase'ler sadece Latin etiketlerde.
3 · Butonlar
Altı varyant, üç boyut. Her etkileşimli bileşen yedi durumu karşılamak zorunda: varsayılan, hover, focus-visible, active, disabled, loading, error.
3.1 · Varyantlar
.btn--primary … .btn--danger- primary
- Ekranda en fazla bir tane. Ana eylem.
- secondary
- İkincil eylem — takip, paylaş, düzenle.
- outline
- Para harcatan eylem (abonelik, jeton) — dikkat çeker, baskın olmaz.
- ghost
- İptal, kapat, geri. Görsel ağırlığı yok.
- live
- Sadece yayın durdurma ve canlı müdahale.
- danger
- Geri alınamaz yönetici eylemi. Onay modalı zorunlu.
3.2 · Boyutlar
28 / 36 / 44pxaria-label zorunlu
3.3 · Durumlar
hover · focus · disabled · loadingLoading durumunda genişlik sabit kalır — etiket korunur, spinner solda açılır. Buton daralıp genişleyince imleç kayar ve kullanıcı yanlış yere basar.
3.4 · Üç zeminde
4 · Etiket, çip, canlı noktası
Canlı noktası sistemin en çok tekrarlanan öğesi: CANLI etiketinde, izleyici sayacında, sidebar avatarında, kanal kartında. Hepsi aynı 6px daire, aynı kırmızı.
4.1 · Varsayılan profil fotoğrafı
.avatar__fallbackFotoğraf yüklemeyen kullanıcı gri bir silueti değil
markanın T'sini taşır. Fotoğraf yüklendiğinde
<img class="avatar__img"> kutuyu kaplar — koşullu sınıf yok,
JavaScript yok, aynı bileşen iki durumu da karşılıyor.
Ton, kullanıcı adının hash'inden sohbet renk paletiyle aynı 12 renkten seçilir. Böylece sohbette, sidebar'da ve yorumlarda aynı kişi hep aynı renkle görünür — fotoğrafsız kullanıcılar da birbirinden ayırt edilebilir kalır. Varsayılan ton marka turuncusu.
5 · Form alanları
5.1 · Anahtarlar
5.2 · Yayın anahtarı
en kritik alan6 · Gezinme
7 · Kartlar
Kanal kartı ürünün en çok tekrarlanan bileşeni. Hover'da kenarlık accent'e döner, kart 2px yukarı kalkar ve thumbnail animasyonlu önizlemeye geçer.
8 · Oynatıcı kabuğu
Kontrol barı 2.5 saniye hareketsizlikte gizlenir; tam ekranda imleç de gizlenir. Buffer göstergesi 400ms gecikmeli açılır — kısa takılmalarda ekranda flaş olmaz.
9 · Sohbet
Yeni mesajlarda animasyon yok — 1000 mesaj/dakikada animasyon tarayıcıyı öldürür. Mesajlar 16ms tick ile toplu render edilir.
10 · Veri gösterimi
| Kullanıcı | Durum | Kayıt | Harcama | |
|---|---|---|---|---|
| burakyayinda | Aktif | 12 Mar 2026 | ₺1.240 | |
| elifcan | Aktif | 4 Nis 2026 | ₺380 | |
| spamhesap | Askıda | 28 Eki 2026 | ₺0 |
11 · Geri bildirim
Veri çeken her ekran dört durumu karşılamak zorunda: yükleniyor (skeleton), boş, hata, dolu. Tek başına "Yükleniyor…" yazısı veya "Veri yok" kabul edilmez.
Mevcut anahtar anında geçersiz olur ve aktif yayın kesilir. OBS'te yeni anahtarı girmen gerekir.
Skeleton gerçek düzene uyar. Spinner sadece butonda ve oynatıcıda kullanılır.
12 · Canlı yayın ekranı
Ürünün ana ekranı: üstte header, solda takip edilen kanallar, ortada oynatıcı, sağda sohbet. Üç sabit genişlik de token'dan geliyor — topbar 56, sidebar 240, sohbet 340 — böylece burada kurulan ekran ile Next.js'te kurulan ekran ayrışamıyor.
12.1 · Sohbet: misafir ve üye
.chatgateMisafir sohbeti okur — mesajlar gerçek zamanlı akmaya devam eder, sadece giriş alanı kapıyla değişir. Giriş modal olarak açılır, yayın arkada oynamaya devam eder ve giriş sonrası sayfa yenilenmez: mevcut WebSocket bağlantısı yazma moduna yükseltilir.
13 · Giriş ve kayıt
Uygulama içinde auth her zaman modal — mevcut sayfadan ayrılmak
yasak, yayın arkada oynamaya devam eder. /giris ve /kayit
ayrıca gerçek sayfa olarak var: doğrudan link, e-posta bağlantısı ve arama motoru için.
Sağlayıcı markaları paletin dışında. Google, Microsoft ve Discord'un giriş yönergeleri markanın kendi renkleriyle görünmesini şart koşuyor — bunlar ürün genelinde renk sabiti yazılan tek yer. İkonlar solda tek kolonda hizalı, metin kalan alanda optik ortalı; her sağlayıcının yönergesinin istediği düzen bu.
- sıra
- Google → Microsoft → Discord. Discord oyuncu kitlesinde en yüksek dönüşüm, ama Google ve Microsoft daha geniş erişim
- OAuth akışı
- Popup, redirect değil — oynatıcı pozisyonu ve sohbet geçmişi korunur
- e-posta doğrulama
- OAuth'ta sağlayıcıdan doğrulanmış gelir → anında sohbet. E-posta ile kayıtta doğrulama şart
- hesap birleştirme
- Aynı e-posta ile ikinci sağlayıcı bağlanırsa hesaplar birleştirilir, ikinci hesap açılmaz
- şifre
- argon2id · en az 10 karakter · karmaşıklık kuralı yok, uzunluk ölçülür
- Apple
- Mobil uygulamada zorunlu (F3) — App Store kuralı
14 · Yayıncı paneli
Yayıncının en çok açtığı ekran yayın ayarları — tek işi OBS'e bağlanmayı kolaylaştırmak. Bu yüzden anahtar en üstte, yanında tek tıkla OBS profili indirme.
15 · Kodlama kuralları
Renk, boşluk, radius, süre — hepsi token. var(--accent),
var(--space-4).
Boşluk ölçeği: 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64. Arası değer yok.
Geçiş süreleri: mikro 100, normal 150, panel 200, sayfa 250ms. Daha uzunu yok.
Semantik HTML. <button> tıklanır,
<a> gider.
Sabit renk kodu (#fff) veya Tailwind varsayılan paleti
(bg-gray-800).
transition: all. Hangi özellik geçiş yapıyorsa o yazılır.
Hover/focus/disabled durumu olmayan etkileşimli öğe.
<div onClick>, alert(),
dangerouslySetInnerHTML.
Taşıma planı: bu CSS olduğu gibi Next.js'e giriyor.
tokens.css Tailwind v4'ün @theme bloğuna bağlanacak
(--color-accent: var(--accent)), böylece hem yardımcı sınıflar hem
bileşen CSS'i aynı token'ı okuyacak. Bileşenler React'e çevrildiğinde sınıf adları
aynı kalır — .btn.btn--primary.