/* ============================================
π€ FONTS & TYPOGRAPHY β fonts.css
Google Fonts'tan otomatik yüklemek için bu
satırı HTML içine ekleyin:
Alternatif: @import ile (daha yavaΕ ama tek dosya):
============================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Fira+Code:wght@400;500&display=swap');
/* ββββββββββββββββββββββββββββββββββββββββββββ
Font DeΔiΕkenleri (variables.css ile uyumlu)
ββββββββββββββββββββββββββββββββββββββββββββ */
:root {
/* YazΔ± tipi aileleri */
--font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
--font-jakarta: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
--font-mono: 'Fira Code', 'Cascadia Code', 'Consolas', 'Courier New', monospace;
--font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
--font-body: 'Inter', system-ui, sans-serif;
/* Boyutlar β fluid typography */
--text-xs: clamp(0.694rem, 0.68rem + 0.07vw, 0.75rem);
--text-sm: clamp(0.833rem, 0.81rem + 0.11vw, 0.875rem);
--text-base: clamp(1rem, 0.96rem + 0.20vw, 1.063rem);
--text-lg: clamp(1.2rem, 1.14rem + 0.30vw, 1.25rem);
--text-xl: clamp(1.44rem, 1.35rem + 0.44vw, 1.563rem);
--text-2xl: clamp(1.728rem, 1.59rem + 0.68vw, 1.953rem);
--text-3xl: clamp(2.074rem, 1.88rem + 0.97vw, 2.441rem);
--text-4xl: clamp(2.488rem, 2.20rem + 1.44vw, 3.052rem);
--text-5xl: clamp(2.986rem, 2.58rem + 2.03vw, 3.815rem);
/* SatΔ±r yΓΌksekliΔi */
--leading-none: 1;
--leading-tight: 1.25;
--leading-snug: 1.375;
--leading-normal: 1.5;
--leading-relaxed:1.625;
--leading-loose: 2;
/* Harf aralΔ±ΔΔ± */
--tracking-tighter: -0.05em;
--tracking-tight: -0.025em;
--tracking-normal: 0em;
--tracking-wide: 0.025em;
--tracking-wider: 0.05em;
--tracking-widest: 0.1em;
/* Font kalΔ±nlΔ±ΔΔ± */
--weight-light: 300;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-extrabold: 800;
}
/* ββββββββββββββββββββββββββββββββββββββββββββ
Heading Stilleri
ββββββββββββββββββββββββββββββββββββββββββββ */
.h1, h1 {
font-family: var(--font-display);
font-size: var(--text-4xl);
font-weight: var(--weight-bold);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--color-text-base);
}
.h2, h2 {
font-family: var(--font-display);
font-size: var(--text-3xl);
font-weight: var(--weight-bold);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--color-text-base);
}
.h3, h3 {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: var(--weight-semibold);
line-height: var(--leading-snug);
color: var(--color-text-base);
}
.h4, h4 {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: var(--weight-semibold);
line-height: var(--leading-snug);
color: var(--color-text-base);
}
.h5, h5 {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
line-height: var(--leading-normal);
color: var(--color-text-base);
}
.h6, h6 {
font-family: var(--font-display);
font-size: var(--text-base);
font-weight: var(--weight-semibold);
line-height: var(--leading-normal);
color: var(--color-text-base);
}
/* ββββββββββββββββββββββββββββββββββββββββββββ
Display (Hero) Stilleri
ββββββββββββββββββββββββββββββββββββββββββββ */
.display-1 {
font-family: var(--font-display);
font-size: var(--text-5xl);
font-weight: var(--weight-extrabold);
line-height: var(--leading-none);
letter-spacing: var(--tracking-tighter);
}
.display-2 {
font-family: var(--font-display);
font-size: var(--text-4xl);
font-weight: var(--weight-extrabold);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
}
.display-3 {
font-family: var(--font-display);
font-size: var(--text-3xl);
font-weight: var(--weight-bold);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
}
/* ββββββββββββββββββββββββββββββββββββββββββββ
Paragraph & Body Stilleri
ββββββββββββββββββββββββββββββββββββββββββββ */
.text-body {
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: var(--weight-regular);
line-height: var(--leading-relaxed);
color: var(--color-text-base);
}
.text-lead {
font-size: var(--text-lg);
line-height: var(--leading-relaxed);
color: var(--color-text-muted);
font-weight: var(--weight-regular);
}
.text-small { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }
.text-muted { color: var(--color-text-muted); }
.text-subtle { color: #94a3b8; }
/* ββββββββββββββββββββββββββββββββββββββββββββ
Font Ailesi YardΔ±mcΔ±larΔ±
ββββββββββββββββββββββββββββββββββββββββββββ */
.font-sans { font-family: var(--font-sans); }
.font-jakarta { font-family: var(--font-jakarta); }
.font-mono { font-family: var(--font-mono); }
.font-display { font-family: var(--font-display); }
/* ββββββββββββββββββββββββββββββββββββββββββββ
Font AΔΔ±rlΔ±k YardΔ±mcΔ±larΔ±
ββββββββββββββββββββββββββββββββββββββββββββ */
.font-light { font-weight: var(--weight-light); }
.font-regular { font-weight: var(--weight-regular); }
.font-medium { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold { font-weight: var(--weight-bold); }
.font-extrabold { font-weight: var(--weight-extrabold); }
/* ββββββββββββββββββββββββββββββββββββββββββββ
Boyut YardΔ±mcΔ±larΔ±
ββββββββββββββββββββββββββββββββββββββββββββ */
.text-xs-r { font-size: var(--text-xs); }
.text-sm-r { font-size: var(--text-sm); }
.text-base-r { font-size: var(--text-base); }
.text-lg-r { font-size: var(--text-lg); }
.text-xl-r { font-size: var(--text-xl); }
.text-2xl-r { font-size: var(--text-2xl); }
.text-3xl-r { font-size: var(--text-3xl); }
.text-4xl-r { font-size: var(--text-4xl); }
.text-5xl-r { font-size: var(--text-5xl); }
/* ββββββββββββββββββββββββββββββββββββββββββββ
Hizalama & DΓΆnΓΌΕΓΌm
ββββββββββββββββββββββββββββββββββββββββββββ */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }
.italic { font-style: italic; }
.not-italic{ font-style: normal; }
.tracking-tight { letter-spacing: var(--tracking-tight); }
.tracking-wide { letter-spacing: var(--tracking-wide); }
.tracking-wider { letter-spacing: var(--tracking-wider); }
.tracking-widest { letter-spacing: var(--tracking-widest); }
.leading-tight { line-height: var(--leading-tight); }
.leading-normal { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }
.leading-loose { line-height: var(--leading-loose); }
/* ββββββββββββββββββββββββββββββββββββββββββββ
Γzel Metin Efektleri
ββββββββββββββββββββββββββββββββββββββββββββ */
/* Gradient metin */
.text-gradient-primary {
background: linear-gradient(135deg, var(--color-primary), #a78bfa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.text-gradient-warm {
background: linear-gradient(135deg, #f59e0b, #ef4444);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.text-gradient-cool {
background: linear-gradient(135deg, #3b82f6, #06b6d4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Vurgu */
.text-highlight {
background-color: #fef08a;
padding: 1px 4px;
border-radius: 3px;
}
.text-highlight-primary {
background-color: var(--color-primary-light);
color: var(--color-primary);
padding: 1px 4px;
border-radius: 3px;
}
/* Kod stilii */
.text-code {
font-family: var(--font-mono);
font-size: 0.9em;
background-color: #f1f5f9;
color: #be185d;
padding: 1px 5px;
border-radius: 4px;
border: 1px solid #e2e8f0;
}
/* AltΔ± Γ§izili vurgu */
.text-underline-primary {
text-decoration: underline;
text-decoration-color: var(--color-primary);
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
/* Kesikli alt Γ§izgi (baΔlantΔ± benzeri) */
.text-dotted {
border-bottom: 1.5px dotted var(--color-text-muted);
cursor: help;
}
/* KΔ±rp */
.text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.text-clamp-1 {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.text-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.text-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ββββββββββββββββββββββββββββββββββββββββββββ
Kod & Pre BloklarΔ±
ββββββββββββββββββββββββββββββββββββββββββββ */
pre, code, kbd, samp {
font-family: var(--font-mono);
}
code {
font-size: 0.875em;
color: #be185d;
background-color: #fdf2f8;
padding: 2px 6px;
border-radius: 4px;
}
pre {
background-color: #1e293b;
color: #e2e8f0;
padding: var(--space-5) var(--space-6);
border-radius: var(--radius-lg);
overflow-x: auto;
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
tab-size: 2;
}
pre code {
background: none;
color: inherit;
padding: 0;
border-radius: 0;
font-size: inherit;
}
kbd {
display: inline-flex;
align-items: center;
padding: 2px 6px;
font-size: var(--text-xs);
background-color: #f1f5f9;
border: 1px solid #cbd5e1;
border-bottom-width: 2px;
border-radius: 4px;
color: var(--color-text-base);
}
blockquote {
border-left: 4px solid var(--color-primary);
padding: var(--space-3) var(--space-5);
margin: var(--space-5) 0;
background-color: var(--color-primary-light);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
font-style: italic;
color: var(--color-text-muted);
}
blockquote cite {
display: block;
margin-top: var(--space-2);
font-size: var(--text-sm);
font-style: normal;
font-weight: var(--weight-semibold);
color: var(--color-primary);
}
/* ββββββββββββββββββββββββββββββββββββββββββββ
Tipografi TemalarΔ± (data-font attribute)
KullanΔ±m:
ββββββββββββββββββββββββββββββββββββββββββββ */
[data-font="inter"] {
--font-family: var(--font-sans);
font-family: var(--font-sans);
}
[data-font="jakarta"] {
--font-family: var(--font-jakarta);
font-family: var(--font-jakarta);
}
[data-font="mono"] {
--font-family: var(--font-mono);
font-family: var(--font-mono);
}