/* ========================================================================= PLATO ÇİÇEK — TYPOGRAPHY SYSTEM ========================================================================= 15 isimlendirilmiş tipografi seviyesi. tokens.css'teki ham font/spacing token'larından kompoze edilir. ÖNEMLİ — GERİYE DÖNÜK UYUMLULUK: Bu dosya SADECE yeni, opt-in class'lar tanımlar (.text-display-xl, .text-h1 vb.). Mevcut `h1,h2,h3,h4,p` gibi element seçicileri theme.css içinde AYNEN KALIYOR ve değiştirilmedi — böylece hiçbir mevcut sayfanın görünümü bu dosyanın eklenmesiyle değişmez. Yeni sayfalar/component'ler ileride bu class'ları tercih etmelidir. Her seviye şu 4 özelliği net olarak taşır: font-size (responsive), line-height, font-weight, letter-spacing. Kullanım amacı ve responsive davranışı açıklaması docs/DESIGN_SYSTEM.md → "Typography System" içinde. ========================================================================= */ /* --- Display XL --- Amaç: Kampanya/hero sayfalarında en büyük, en dramatik başlık (v1'de kullanılmıyor, gelecekteki kampanya/mikrosite sayfaları için hazır). Line-height: tight (1.15) — büyük punto boşluğu azaltır. Weight: bold (700). Letter-spacing: tight (-0.02em) — büyük puntoda harfler doğal olarak açık durur, sıkılaştırma dengeler. Responsive: clamp ile 2.75rem (mobil) → 4.5rem (geniş masaüstü) arası akışkan. */ .text-display-xl { font-family: var(--pc-font-family-heading); font-size: clamp(2.75rem, 2rem + 3vw, 4.5rem); line-height: var(--pc-line-height-tight); font-weight: var(--pc-font-weight-bold); letter-spacing: var(--pc-letter-spacing-tight); margin: 0; } /* --- Display L --- Amaç: İkincil kampanya başlığı, büyük bölüm girişleri. Line-height: tight. Weight: bold. Letter-spacing: tight. Responsive: 2.25rem → 3.5rem. */ .text-display-l { font-family: var(--pc-font-family-heading); font-size: clamp(2.25rem, 1.75rem + 2.25vw, 3.5rem); line-height: var(--pc-line-height-tight); font-weight: var(--pc-font-weight-bold); letter-spacing: var(--pc-letter-spacing-tight); margin: 0; } /* --- Display M --- Amaç: Anasayfa hero başlığı seviyesi (mevcut h1 ile aynı ölçek). Line-height: tight. Weight: semibold. Letter-spacing: normal. Responsive: 2rem → 2.75rem. */ .text-display-m { font-family: var(--pc-font-family-heading); font-size: clamp(2rem, 1.7rem + 1.5vw, 2.75rem); line-height: var(--pc-line-height-tight); font-weight: var(--pc-font-weight-semibold); letter-spacing: var(--pc-letter-spacing-normal); margin: 0; } /* --- H1 --- Amaç: Sayfa başlığı (her sayfada en fazla bir tane — semantic

). Line-height: snug. Weight: semibold. Letter-spacing: normal. Responsive: 1.75rem → 2.25rem. */ .text-h1 { font-family: var(--pc-font-family-heading); font-size: clamp(1.75rem, 1.55rem + 1vw, 2.25rem); line-height: var(--pc-line-height-snug); font-weight: var(--pc-font-weight-semibold); letter-spacing: var(--pc-letter-spacing-normal); margin: 0; } /* --- H2 --- Amaç: Bölüm başlığı (ör. "Öne Çıkan Ürünler"). Line-height: snug. Weight: semibold. Letter-spacing: normal. Responsive: 1.5rem → 2rem. */ .text-h2 { font-family: var(--pc-font-family-heading); font-size: clamp(1.5rem, 1.35rem + 0.75vw, 2rem); line-height: var(--pc-line-height-snug); font-weight: var(--pc-font-weight-semibold); letter-spacing: var(--pc-letter-spacing-normal); margin: 0; } /* --- H3 --- Amaç: Alt bölüm/kart grubu başlığı (ör. admin panel kart başlıkları). Line-height: snug. Weight: semibold. Letter-spacing: normal. Responsive: sabit (küçük başlıklarda akışkan boyuta gerek yok). */ .text-h3 { font-family: var(--pc-font-family-heading); font-size: var(--pc-font-size-xl); /* 1.25rem */ line-height: var(--pc-line-height-snug); font-weight: var(--pc-font-weight-semibold); letter-spacing: var(--pc-letter-spacing-normal); margin: 0; } /* --- H4 --- Amaç: Kart içi mini başlık (ör. ürün kartı başlığı, footer sütun başlığı). Line-height: snug. Weight: semibold. Letter-spacing: normal. Sabit boyut. */ .text-h4 { font-family: var(--pc-font-family-heading); font-size: var(--pc-font-size-lg); /* 1.125rem */ line-height: var(--pc-line-height-snug); font-weight: var(--pc-font-weight-semibold); letter-spacing: var(--pc-letter-spacing-normal); margin: 0; } /* --- H5 --- Amaç: En küçük başlık seviyesi — form grup başlığı, tablo grup satırı. Body fontuyla (Inter) yazılır, başlık fontuyla değil — çok küçük puntoda serif okunabilirliği düşürür. Line-height: snug. Weight: semibold. Sabit. */ .text-h5 { font-family: var(--pc-font-family-body); font-size: var(--pc-font-size-md); /* 1rem */ line-height: var(--pc-line-height-snug); font-weight: var(--pc-font-weight-semibold); letter-spacing: var(--pc-letter-spacing-normal); margin: 0; } /* --- Body Large --- Amaç: Giriş paragrafı, hero altı açıklama metni — vurgulu gövde metni. Line-height: loose (1.6) — uzun metinde okunabilirlik önceliği. Weight: regular. Letter-spacing: normal. Sabit boyut (gövde metni akışkan büyütülmez — okuma satır uzunluğu bozulur). */ .text-body-lg { font-family: var(--pc-font-family-body); font-size: var(--pc-font-size-lg); /* 1.125rem */ line-height: var(--pc-line-height-loose); font-weight: var(--pc-font-weight-regular); letter-spacing: var(--pc-letter-spacing-normal); } /* --- Body Medium --- Amaç: Standart gövde metni — varsayılan paragraf, form açıklamaları. Line-height: normal (1.5). Weight: regular. Letter-spacing: normal. */ .text-body-md { font-family: var(--pc-font-family-body); font-size: var(--pc-font-size-md); /* 1rem */ line-height: var(--pc-line-height-normal); font-weight: var(--pc-font-weight-regular); letter-spacing: var(--pc-letter-spacing-normal); } /* --- Body Small --- Amaç: İkincil/destekleyici metin — kart alt bilgisi, tablo hücre metni. Line-height: normal. Weight: regular. Letter-spacing: normal. */ .text-body-sm { font-family: var(--pc-font-family-body); font-size: var(--pc-font-size-sm); /* 0.875rem */ line-height: var(--pc-line-height-normal); font-weight: var(--pc-font-weight-regular); letter-spacing: var(--pc-letter-spacing-normal); } /* --- Caption --- Amaç: En küçük açıklayıcı metin — görsel alt yazısı, zaman damgası, yardımcı form metni. Muted renk (semantic text-secondary) ile birlikte kullanılması önerilir. Line-height: normal. Weight: regular. */ .text-caption { font-family: var(--pc-font-family-body); font-size: var(--pc-font-size-xs); /* 0.8125rem */ line-height: var(--pc-line-height-normal); font-weight: var(--pc-font-weight-regular); letter-spacing: var(--pc-letter-spacing-normal); color: var(--pc-color-text-secondary); } /* --- Label --- Amaç: Form alanı etiketleri, admin tablo satır etiketleri. Mevcut `label` element seçicisiyle (theme.css) aynı ölçek — burada class olarak da sunulur (label olmayan öğelerde de kullanılabilsin diye). Line-height: snug. Weight: semibold. Letter-spacing: normal. */ .text-label { font-family: var(--pc-font-family-body); font-size: 0.9375rem; /* mevcut label ile birebir */ line-height: var(--pc-line-height-snug); font-weight: var(--pc-font-weight-semibold); letter-spacing: var(--pc-letter-spacing-normal); } /* --- Button --- Amaç: Tüm buton/CTA metinleri (mevcut .btn class'ıyla aynı ölçek). Line-height: snug — buton yüksekliğinde dikey ortalamayı bozmaz. Weight: semibold. Letter-spacing: wide (0.02em) — büyük harfe yakın dolgunlukta CTA'larda okunabilirliği artırır. */ .text-button { font-family: var(--pc-font-family-body); font-size: var(--pc-font-size-md); /* 1rem */ line-height: var(--pc-line-height-snug); font-weight: var(--pc-font-weight-semibold); letter-spacing: var(--pc-letter-spacing-wide); } /* --- Overline --- Amaç: Başlık üstü "eyebrow" etiketi (ör. "YENİ KOLEKSİYON" gibi bir kategori/bölüm başlığının üstünde). v1'de kullanılmıyor, gelecekteki kampanya/kategori sayfaları için hazır. Büyük harf + geniş harf aralığıyla küçük punotoda okunabilirlik korunur. Line-height: normal. Weight: semibold. Letter-spacing: widest (0.08em). */ .text-overline { font-family: var(--pc-font-family-body); font-size: var(--pc-font-size-2xs); /* 0.75rem */ line-height: var(--pc-line-height-normal); font-weight: var(--pc-font-weight-semibold); letter-spacing: var(--pc-letter-spacing-widest); text-transform: uppercase; }