/* ========================================================= MAIN.CSS — Reset, Variables, Typography, Grid Utilities ========================================================= */ /* Inter fontu artık HTML içinde ile yükleniyor (render-blocking @import zinciri kaldırıldı — performans). */ /* --- CSS Variables --- */ :root { --color-bg: #ffffff; --color-surface: #f4f4f4; --color-surface-alt: #efefef; --color-dark: #111111; --color-anthracite:#2b2b2b; --color-mid: #666666; --color-light: #999999; --color-border: #e5e5e5; --color-border-dark: rgba(255,255,255,0.10); --color-white: #ffffff; /* Vurgu: koyu gri (altın yok) */ --color-accent: #2b2b2b; --color-accent-hover: #111111; --font-main: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; --size-xs: 0.75rem; --size-sm: 0.875rem; --size-base: 1rem; --size-md: 1.125rem; --size-lg: 1.25rem; --size-xl: 1.5rem; --size-2xl: 2rem; --size-3xl: 2.5rem; --size-4xl: 3.25rem; --weight-light: 300; --weight-regular: 400; --weight-semibold: 600; --weight-bold: 700; --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 1.5rem; --spacing-lg: 2.5rem; --spacing-xl: 4rem; --spacing-2xl: 6rem; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --shadow-sm: 0 1px 3px rgba(0,0,0,0.07); --shadow-md: 0 4px 16px rgba(0,0,0,0.09); --shadow-lg: 0 8px 32px rgba(0,0,0,0.13); --shadow-hover: 0 12px 40px rgba(0,0,0,0.16); --transition-fast: 0.18s ease; --transition-base: 0.28s ease; --transition-slow: 0.45s ease; --header-height: 77px; --container-max: 1240px; } /* --- Reset --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-main); font-weight: var(--weight-regular); font-size: var(--size-base); line-height: 1.7; color: var(--color-anthracite); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, video, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } input, textarea, select { font-family: inherit; font-size: inherit; } /* --- Typography --- */ h1, h2, h3, h4, h5, h6 { font-weight: var(--weight-bold); line-height: 1.2; color: var(--color-dark); letter-spacing: -0.02em; } h1 { font-size: clamp(1.9rem, 4.5vw, var(--size-4xl)); } h2 { font-size: clamp(1.4rem, 3vw, var(--size-3xl)); } h3 { font-size: clamp(1.15rem, 2vw, var(--size-2xl)); } h4 { font-size: var(--size-xl); } h5 { font-size: var(--size-lg); } h6 { font-size: var(--size-md); } p { color: var(--color-mid); line-height: 1.75; } strong { font-weight: var(--weight-semibold); color: var(--color-anthracite); } /* --- Container --- */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--spacing-md); } @media (min-width: 768px) { .container { padding-inline: var(--spacing-lg); } } /* --- Grid --- */ .grid { display: grid; gap: var(--spacing-md); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } @media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1100px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } } /* --- Flex --- */ .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } /* --- Spacing --- */ .section { padding-block: var(--spacing-xl); } .section--lg { padding-block: var(--spacing-2xl); } /* --- Text utilities --- */ .text-center { text-align: center; } .text-sm { font-size: var(--size-sm); } .text-xs { font-size: var(--size-xs); } .text-light { color: var(--color-light); } .text-mid { color: var(--color-mid); } .text-white { color: var(--color-white); } .text-dark { color: var(--color-dark); } /* --- Section Heading --- */ .section-label { display: inline-block; font-size: var(--size-xs); font-weight: var(--weight-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-mid); margin-bottom: var(--spacing-xs); } .section-title { font-size: clamp(1.4rem, 3vw, var(--size-3xl)); color: var(--color-dark); margin-bottom: var(--spacing-sm); } .section-subtitle { font-size: var(--size-md); color: var(--color-mid); font-weight: var(--weight-light); max-width: 600px; } .section-header { margin-bottom: var(--spacing-lg); } .section-header.centered { text-align: center; display: flex; flex-direction: column; align-items: center; } /* --- Divider --- */ .divider { width: 40px; height: 2px; background: var(--color-dark); border-radius: 1px; margin-block: var(--spacing-sm); } .section-header.centered .divider { margin-inline: auto; } /* --- SR only --- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }