/* ==========================================================================
FONTLAR — self-hosted WOFF2
ADR: Google Fonts CDN YASAK (CSP ve LCP için, Faz 1 §1).
┌──────────────────────────────────────────────────────────────────────┐
│ DURUM: font dosyaları henüz eklenmedi, tanımlar DEVRE DIŞI.          │
│                                                                      │
│ Neden yorum içinde: @font-face tanımı aktif olduğunda tarayıcı       │
│ dosyayı ister ve olmayan dosya HER SAYFA YÜKLEMESİNDE 404 üretir.    │
│ Bu hem konsolu kirletir (gerçek hataları maskeler) hem de üretim     │
│ loglarına sahte 404 yazar. Site zaten sistem fontuna düşüyor.        │
│                                                                      │
│ AÇMAK İÇİN: wwwroot/fonts/README.md'deki dosyaları ekleyin, sonra    │
│ aşağıdaki bloğun yorum işaretlerini kaldırın ve _Layout.cshtml'e     │
│ preload satırını ekleyin.                                            │
└──────────────────────────────────────────────────────────────────────┘
Tasarım notları (dosyalar eklendiğinde geçerli olacak):
- font-display: swap — metin font yüklenmeden GÖRÜNÜR olur.
Alternatifi (block) LCP'yi doğrudan geciktirir.
- unicode-range ile latin ve latin-ext AYRILDI: Türkçe karakterler
(ğ ş ı İ ç ö ü) latin-ext bloğundadır. Ayrılmasaydı Türkçe olmayan
bir sayfada da latin-ext dosyası indirilirdi.
========================================================================== */
/*
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("/fonts/inter-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("/fonts/inter-latin-ext.woff2") format("woff2");
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122;
}
*/
/* ==========================================================================
DESIGN TOKENS
Tek kaynak. Hicbir bilesende ham renk, ham piksel veya ham sure yazilmaz.
Faz 1 §13.
TEMA: varsayilan KOYU; isletim sistemi acik tema istiyorsa
(prefers-color-scheme: light) dosyanin sonundaki blok devreye girer.
Elle tema degistirici BILEREK yok: secimi sayfa yuklenmeden uygulamak
inline script ister ve ADR 0005 cache'lenen sayfada inline script'i
yasaklar - script'siz bir dugme ise her yuklemede yanlis temayla
parlayip sonra degisirdi.
========================================================================== */
:root {
color-scheme: dark light;
/* --- renk: koyu teknolojik yuzey + TEK guclu vurgu ---------------------
3'ten fazla ana renk kullanilmaz. Vurgu rengi yalnizca eylem
(buton, link, odak) icin; dekorasyon icin degil. */
--color-bg: #0b0f16;
--color-surface: #121822;
--color-surface-2: #1a2130;
--color-border: #26303f;
--color-text: #e8edf5;
--color-text-muted: #94a3b8;
--color-accent: #3d7dff;
--color-accent-hover: #5b93ff;
--color-accent-soft: rgba(61, 125, 255, 0.12);
/*
Vurgu rengi ustundeki metin KOYU, beyaz degil.
Olculdu (WCAG 2.1 kontrast):
beyaz  metin / #3d7dff = 3.77  -> AA'yi GECMEZ (4.5 gerekli)
koyu   metin / #3d7dff = 5.10  -> gecer
#3d7dff link / koyu zemin = 5.10 -> gecer
Alternatif, vurgu rengini koyulastirmakti; o zaman beyaz metin
gecerdi ama koyu zemindeki LINKLER duserdi (#2563eb icin 3.71).
Tek vurgu rengi korunup on plan rengi cevrildi - koyu temada
parlak buton + koyu etiket zaten dogru gorunum.
*/
--color-on-accent: #0b0f16;
--color-success: #2fbf71;
--color-warning: #e8a33d;
--color-danger: #e5484d;
--color-danger-soft: rgba(229, 72, 77, 0.08);
/* --- turetilmis yuzeyler ve dekorasyon -------------------------------
Bilesenlerde rgba() yazilmaz; tema degisince hepsi buradan doner. */
--color-header-bg: rgba(11, 15, 22, 0.85);
--color-surface-translucent: rgba(18, 24, 34, 0.85);
--color-accent-2: #7aa5ff;
--color-accent-border: rgba(61, 125, 255, 0.35);
--color-accent-glow: rgba(61, 125, 255, 0.2);
--color-accent-glow-strong: rgba(61, 125, 255, 0.32);
--color-success-glow: rgba(47, 191, 113, 0.12);
--color-success-pulse: rgba(47, 191, 113, 0.55);
--color-grid-line: rgba(38, 48, 63, 0.4);
--color-heading-from: #ffffff;
--color-heading-to: #b9c6da;
--color-index-text: rgba(232, 237, 245, 0.85);
/* Kod penceresi IKI temada da koyu kalir - tasarim ogesidir. */
--color-code-bg-from: #131a26;
--color-code-bg-to: #0e131c;
--color-code-bar: #1a2130;
--color-code-border: #26303f;
--color-code-text: #c8d3e6;
--color-code-gutter: #4a5568;
/* --- tipografi: 1.25 olcek, clamp() ile akiskan ---------------------- */
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--fs-xs: 0.75rem;
--fs-sm: 0.875rem;
--fs-base: 1rem;           /* govde metni min 16px */
--fs-lg: 1.125rem;
--fs-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
--fs-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.953rem);
--fs-3xl: clamp(1.875rem, 1.5rem + 1.9vw, 2.441rem);
--fs-4xl: clamp(2.25rem, 1.7rem + 2.8vw, 3.052rem);
--fs-5xl: clamp(2.75rem, 1.9rem + 4.2vw, 3.815rem);
--lh-tight: 1.15;
--lh-normal: 1.6;
--lh-loose: 1.8;
--tracking-tight: -0.02em;
--tracking-normal: 0;
/* --- bosluk: 4px tabanli --------------------------------------------- */
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
/* --- form ------------------------------------------------------------- */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-full: 999px;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.45);
/* --- olcu ------------------------------------------------------------- */
--container-max: 1280px;
--container-pad: var(--space-5);
--measure: 68ch;           /* satir uzunlugu 65-75 karakter */
/* --- hareket ---------------------------------------------------------- */
--transition-fast: 150ms;
--transition-base: 250ms;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
/* --- katman ----------------------------------------------------------- */
--z-header: 100;
--z-dropdown: 200;
--z-modal: 300;
--z-toast: 400;
/* --- dokunma hedefi: WCAG 2.2 AA min 44x44 ---------------------------- */
--touch-target: 44px;
}
/* ==========================================================================
ACIK TEMA - isletim sistemi tercihine gore (prefers-color-scheme).
Vurgu rengi acik zeminde KOYULASTIRILDI: #3d7dff beyaz zeminde 3.77
kontrast verir (AA icin 4.5 gerekli). #2457d6:
link / #f6f8fb zemin  = 5.3  -> gecer
beyaz metin / #2457d6 = 5.6  -> gecer (bu yuzden on-accent beyaz)
Ikincil metin #4b5870 / #f6f8fb = 6.9.
SECIM SIRASI (theme.js <html data-theme> yazar):
data-theme="light"  -> acik (kullanici secti)
data-theme="dark"   -> koyu (kullanici secti; sistem acik olsa bile)
data-theme yok      -> isletim sistemi tercihi
Ayni blok iki kez yazili: CSS'te "medya sorgusu VEYA nitelik" tek
seciciyle ifade edilemiyor. Bir deger degisirse IKISI birden degismeli.
========================================================================== */
:root[data-theme="dark"] {
color-scheme: dark;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) {
color-scheme: light;
--color-bg: #f6f8fb;
--color-surface: #ffffff;
--color-surface-2: #eef2f7;
--color-border: #dbe2ec;
--color-text: #0f172a;
--color-text-muted: #4b5870;
--color-accent: #2457d6;
--color-accent-hover: #1b46b8;
--color-accent-soft: rgba(36, 87, 214, 0.08);
--color-on-accent: #ffffff;
--color-success: #1f8f55;
--color-warning: #b26b00;
--color-danger: #c9302c;
--color-danger-soft: rgba(201, 48, 44, 0.07);
--color-header-bg: rgba(255, 255, 255, 0.86);
--color-surface-translucent: rgba(255, 255, 255, 0.9);
--color-accent-2: #5b8cff;
--color-accent-border: rgba(36, 87, 214, 0.28);
--color-accent-glow: rgba(36, 87, 214, 0.1);
--color-accent-glow-strong: rgba(36, 87, 214, 0.16);
--color-success-glow: rgba(31, 143, 85, 0.08);
--color-success-pulse: rgba(31, 143, 85, 0.45);
--color-grid-line: rgba(15, 23, 42, 0.06);
--color-heading-from: #0f172a;
--color-heading-to: #3b4a66;
--color-index-text: rgba(15, 23, 42, 0.78);
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
--shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
--shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.12);
}
}
:root[data-theme="light"] {
color-scheme: light;
--color-bg: #f6f8fb;
--color-surface: #ffffff;
--color-surface-2: #eef2f7;
--color-border: #dbe2ec;
--color-text: #0f172a;
--color-text-muted: #4b5870;
--color-accent: #2457d6;
--color-accent-hover: #1b46b8;
--color-accent-soft: rgba(36, 87, 214, 0.08);
--color-on-accent: #ffffff;
--color-success: #1f8f55;
--color-warning: #b26b00;
--color-danger: #c9302c;
--color-danger-soft: rgba(201, 48, 44, 0.07);
--color-header-bg: rgba(255, 255, 255, 0.86);
--color-surface-translucent: rgba(255, 255, 255, 0.9);
--color-accent-2: #5b8cff;
--color-accent-border: rgba(36, 87, 214, 0.28);
--color-accent-glow: rgba(36, 87, 214, 0.1);
--color-accent-glow-strong: rgba(36, 87, 214, 0.16);
--color-success-glow: rgba(31, 143, 85, 0.08);
--color-success-pulse: rgba(31, 143, 85, 0.45);
--color-grid-line: rgba(15, 23, 42, 0.06);
--color-heading-from: #0f172a;
--color-heading-to: #3b4a66;
--color-index-text: rgba(15, 23, 42, 0.78);
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
--shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
--shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.12);
}
/* ==========================================================================
RESET
Bootstrap/normalize yerine minimal, bilincli sifirlama (ADR 0004).
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
min-height: 100vh;
line-height: var(--lh-normal);
-webkit-font-smoothing: antialiased;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
/* Gorseller icin width/height zorunlu (CLS). Bu kural onu telafi etmez,
sadece oran korunur. */
img {
height: auto;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
overflow-wrap: break-word;
}
ul[role="list"],
ol[role="list"] {
list-style: none;
padding: 0;
}
/* prefers-reduced-motion: TUM animasyonlar kapanir (Faz 1 §21). */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ==========================================================================
BASE — tipografi ve temel elemanlar
========================================================================== */
body {
background-color: var(--color-bg);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--fs-base);
}
h1,
h2,
h3,
h4 {
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
font-weight: 600;
text-wrap: balance;
}
h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
p {
max-width: var(--measure);
text-wrap: pretty;
}
a {
color: var(--color-accent);
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
transition: color var(--transition-fast) var(--ease);
}
a:hover {
color: var(--color-accent-hover);
}
/* Odak gorunur ve kontrastli olmali (WCAG 2.2 AA). */
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) {
outline: none;
}
code,
pre,
kbd {
font-family: var(--font-mono);
font-size: 0.9em;
}
code {
background-color: var(--color-surface-2);
padding: 0.15em 0.4em;
border-radius: var(--radius-sm);
}
hr {
border: 0;
border-top: 1px solid var(--color-border);
margin-block: var(--space-10);
}
::selection {
background-color: var(--color-accent);
color: var(--color-on-accent);
}
/* ==========================================================================
LAYOUT — grid ve kapsayicilar (Bootstrap grid yerine, ADR 0004)
========================================================================== */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-pad);
}
.container--narrow {
max-width: 800px;
}
.section {
padding-block: var(--space-16);
}
.section--tight {
padding-block: var(--space-10);
}
/* Otomatik sigan grid: kirilim noktasi yazmadan responsive olur. */
.grid {
display: grid;
gap: var(--space-6);
}
.grid--auto {
grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
/* auto-fill: az sayida kart oldugunda tek kartin tum satiri kaplamasini
engeller (ornek: henuz tek proje varken ana sayfa). */
.grid--fill { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.stack > * + * {
margin-block-start: var(--space-4);
}
.cluster {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
align-items: center;
}
/* --- iskelet ---------------------------------------------------------- */
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.page__main {
flex: 1;
}
/* Klavye kullanicisi icin ilk durak (Faz 1 §22). */
.skip-link {
position: absolute;
left: var(--space-4);
top: -100%;
z-index: var(--z-modal);
background-color: var(--color-accent);
color: var(--color-on-accent);
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-md);
text-decoration: none;
transition: top var(--transition-fast) var(--ease);
}
.skip-link:focus {
top: var(--space-4);
color: var(--color-on-accent);
}
/* ==========================================================================
BUTTON
========================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: var(--touch-target);
padding: var(--space-3) var(--space-6);
border: 1px solid transparent;
border-radius: var(--radius-md);
font-size: var(--fs-sm);
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition:
background-color var(--transition-fast) var(--ease),
border-color var(--transition-fast) var(--ease),
color var(--transition-fast) var(--ease);
}
.btn--primary {
background-color: var(--color-accent);
color: var(--color-on-accent);
}
.btn--primary:hover {
background-color: var(--color-accent-hover);
color: var(--color-on-accent);
}
.btn--secondary {
background-color: transparent;
border-color: var(--color-border);
color: var(--color-text);
}
.btn--secondary:hover {
border-color: var(--color-accent);
color: var(--color-text);
background-color: var(--color-accent-soft);
}
.btn--ghost {
background-color: transparent;
color: var(--color-text-muted);
}
.btn--ghost:hover {
color: var(--color-text);
background-color: var(--color-surface-2);
}
/* ==========================================================================
CARD
========================================================================== */
.card {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-6);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
transition:
border-color var(--transition-base) var(--ease),
transform var(--transition-base) var(--ease);
}
.card:hover {
border-color: var(--color-accent);
transform: translateY(-2px);
}
.card__title {
font-size: var(--fs-xl);
margin: 0;
}
.card__title a {
color: var(--color-text);
text-decoration: none;
}
.card__text {
color: var(--color-text-muted);
font-size: var(--fs-sm);
margin: 0;
}
.card__meta {
margin-block-start: auto;
padding-block-start: var(--space-3);
color: var(--color-text-muted);
font-size: var(--fs-xs);
}
/* ==========================================================================
ÇEREZ ONAY BANNERI
========================================================================== */
.consent {
position: fixed;
inset-inline: 0;
bottom: 0;
z-index: var(--z-toast);
background-color: var(--color-surface);
border-block-start: 1px solid var(--color-border);
box-shadow: var(--shadow-lg);
padding: var(--space-5) var(--container-pad);
}
.consent[hidden] {
display: none;
}
.consent__inner {
max-width: var(--container-max);
margin-inline: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-5);
}
.consent__title {
font-size: var(--fs-lg);
margin: 0 0 var(--space-2);
}
.consent__text p {
margin: 0;
font-size: var(--fs-sm);
color: var(--color-text-muted);
max-width: 60ch;
}
/*
Reddetme butonu kabul etmekle AYNI boyutta ve görünürlükte.
KVKK/GDPR: reddetmek kabul etmek kadar kolay olmalı; küçültmek
veya soluklaştırmak karanlık desen sayılır.
*/
.consent__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.consent__actions .btn {
flex: 1 1 auto;
min-width: 140px;
}
.consent__options {
max-width: var(--container-max);
margin: var(--space-5) auto 0;
padding-block-start: var(--space-5);
border-block-start: 1px solid var(--color-border);
display: grid;
gap: var(--space-4);
}
.consent__options[hidden] {
display: none;
}
.consent__options .btn {
justify-self: start;
}
@media (max-width: 640px) {
.consent__inner {
flex-direction: column;
align-items: stretch;
}
.consent__actions .btn {
width: 100%;
}
}
/* ==========================================================================
İÇERİK BİLEŞENLERİ
prose, breadcrumb, toc, faq, related, pagination, stat, testimonial, search
========================================================================== */
/* --- markdown gövdesi --------------------------------------------------- */
.prose {
max-width: var(--measure);
}
.prose > * + * {
margin-block-start: var(--space-5);
}
.prose h2 {
margin-block-start: var(--space-12);
font-size: var(--fs-2xl);
scroll-margin-top: 88px; /* sticky header + anchor link */
}
.prose h3 {
margin-block-start: var(--space-8);
font-size: var(--fs-xl);
scroll-margin-top: 88px;
}
.prose ul,
.prose ol {
padding-inline-start: var(--space-6);
}
.prose li + li {
margin-block-start: var(--space-2);
}
.prose img {
border-radius: var(--radius-md);
margin-block: var(--space-6);
}
.prose blockquote {
padding-inline-start: var(--space-5);
border-inline-start: 3px solid var(--color-accent);
color: var(--color-text-muted);
}
/*
Dar ekranda tablo sayfayi genisletmesin (320px'te yatay kaydirma
olculdu): tablo blok olur ve KENDI icinde kaydirilir. Markdown'dan
gelen tabloyu sarmalayacak bir HTML yok; display:block bunu sarmalayicisiz
cozer.
*/
.prose table {
display: block;
max-width: 100%;
overflow-x: auto;
border-collapse: collapse;
font-size: var(--fs-sm);
}
.prose th {
white-space: nowrap;
color: var(--color-text);
}
.prose th,
.prose td {
padding: var(--space-3);
border-block-end: 1px solid var(--color-border);
text-align: start;
}
.lead {
font-size: var(--fs-lg);
max-width: var(--measure);
}
/* --- içerik + içindekiler yerleşimi ------------------------------------- */
.content-layout {
display: grid;
gap: var(--space-10);
margin-block-start: var(--space-10);
}
@media (min-width: 1024px) {
.content-layout {
grid-template-columns: 240px minmax(0, 1fr);
align-items: start;
}
/* Yalnızca yan sütundaki içindekiler yapışkan. Tek sütunlu sayfalarda
(Hakkımızda vb.) metnin üstünde durur; yapışkan olursa kaydırırken
ekranın yarısını kapatıyordu. Uzun listede kutu ekrandan taşmaz,
kendi içinde kayar. */
.content-layout > .toc {
position: sticky;
top: 88px;
max-height: calc(100vh - 88px - var(--space-6));
overflow-y: auto;
overscroll-behavior: contain;
}
}
/* --- breadcrumb --------------------------------------------------------- */
.breadcrumb {
padding-block-start: var(--space-6);
}
.breadcrumb__list {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
list-style: none;
margin: 0;
padding: 0;
font-size: var(--fs-sm);
color: var(--color-text-muted);
}
.breadcrumb__item + .breadcrumb__item::before {
content: "/";
margin-inline-end: var(--space-2);
color: var(--color-border);
}
.breadcrumb__item a {
color: var(--color-text-muted);
text-decoration: none;
}
.breadcrumb__item a:hover {
color: var(--color-text);
}
/* --- içindekiler -------------------------------------------------------- */
.toc {
padding: var(--space-5);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
}
.toc__title {
font-size: var(--fs-sm);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-muted);
margin-block-end: var(--space-3);
}
.toc__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-2);
font-size: var(--fs-sm);
}
.toc__item--level-3 {
padding-inline-start: var(--space-4);
}
/* Tek sütunlu sayfada içindekiler: kompakt kutu, geniş ekranda iki sütun
liste — dikeyde yarı yer kaplar, metne hızlı geçilir. */
.toc:not(.content-layout > .toc) {
padding: var(--space-4) var(--space-5);
margin-block: var(--space-8);
}
@media (min-width: 640px) {
.toc:not(.content-layout > .toc) .toc__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--space-6);
}
}
.toc__item a {
color: var(--color-text-muted);
text-decoration: none;
}
.toc__item a:hover {
color: var(--color-text);
}
/* --- SSS ---------------------------------------------------------------- */
.faq__list {
display: grid;
gap: var(--space-3);
margin-block-start: var(--space-6);
}
.faq__item {
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
.faq__question {
padding: var(--space-4) var(--space-5);
font-weight: 600;
cursor: pointer;
min-height: var(--touch-target);
display: flex;
align-items: center;
}
.faq__answer {
padding: 0 var(--space-5) var(--space-5);
color: var(--color-text-muted);
}
/* --- ilgili içerikler --------------------------------------------------- */
.related__group + .related__group {
margin-block-start: var(--space-6);
}
.related__title {
font-size: var(--fs-sm);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-muted);
margin-block-end: var(--space-3);
}
.related__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.related__list a {
display: inline-flex;
align-items: center;
min-height: var(--touch-target);
padding-inline: var(--space-4);
background-color: var(--color-surface-2);
border-radius: var(--radius-full);
font-size: var(--fs-sm);
color: var(--color-text);
text-decoration: none;
}
.related__list a:hover {
background-color: var(--color-accent-soft);
}
/* --- sayfalama ---------------------------------------------------------- */
.pagination {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-4);
margin-block-start: var(--space-10);
}
.pagination__status {
color: var(--color-text-muted);
font-size: var(--fs-sm);
}
/* --- proje sonuçları ---------------------------------------------------- */
.stat {
padding: var(--space-6);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
}
.stat__value {
font-size: var(--fs-2xl);
font-weight: 650;
color: var(--color-accent);
margin: 0;
}
.stat__label {
color: var(--color-text-muted);
font-size: var(--fs-sm);
margin: 0;
}
.meta-grid {
display: flex;
flex-wrap: wrap;
gap: var(--space-8);
margin: 0;
}
.meta-grid dt {
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-muted);
}
.meta-grid dd {
margin: 0;
font-weight: 600;
}
.pain-points {
margin-block-start: var(--space-6);
padding-inline-start: var(--space-6);
color: var(--color-text-muted);
max-width: var(--measure);
}
.process {
display: grid;
gap: var(--space-4);
margin-block-start: var(--space-6);
padding-inline-start: var(--space-6);
}
.process__title {
font-size: var(--fs-lg);
margin: 0;
}
/* --- referans ----------------------------------------------------------- */
.testimonial {
margin: var(--space-12) 0 0;
padding: var(--space-8);
background-color: var(--color-surface);
border-inline-start: 3px solid var(--color-accent);
border-radius: var(--radius-md);
}
.testimonial__quote {
margin: 0;
font-size: var(--fs-lg);
}
.testimonial__author {
margin-block-start: var(--space-4);
font-size: var(--fs-sm);
}
/* --- blog --------------------------------------------------------------- */
.article-meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
font-size: var(--fs-sm);
}
.post-nav {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-4);
margin-block-start: var(--space-12);
padding-block-start: var(--space-6);
border-block-start: 1px solid var(--color-border);
}
.post-nav__link {
font-size: var(--fs-sm);
text-decoration: none;
}
/* --- arama -------------------------------------------------------------- */
.search-form {
display: flex;
gap: var(--space-3);
flex-wrap: wrap;
}
.search-form__input {
flex: 1;
min-width: 220px;
min-height: var(--touch-target);
padding-inline: var(--space-4);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
.search-form__input:focus-visible {
border-color: var(--color-accent);
}
.search-results {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-8);
}
.search-results__type {
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 0;
}
.search-results__title {
font-size: var(--fs-xl);
margin: 0;
}
.search-results__title a {
text-decoration: none;
}
/* ==========================================================================
FOOTER
========================================================================== */
.site-footer {
margin-block-start: var(--space-24);
padding-block: var(--space-16) var(--space-8);
background-color: var(--color-surface);
border-block-start: 1px solid var(--color-border);
}
.site-footer__grid {
display: grid;
gap: var(--space-10);
grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
.site-footer__brand p {
color: var(--color-text-muted);
font-size: var(--fs-sm);
margin-block-start: var(--space-3);
}
.site-footer__brand .site-footer__since {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--color-text);
font-weight: 600;
}
.footer-column__title {
font-size: var(--fs-sm);
font-weight: 650;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text);
margin-block-end: var(--space-4);
}
.footer-column__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-2);
}
.footer-column__list a {
color: var(--color-text-muted);
font-size: var(--fs-sm);
text-decoration: none;
}
.footer-column__list a:hover {
color: var(--color-text);
}
/* NAP (Name, Address, Phone) — Google Business Profile ile birebir ayni
olmali (Faz 1 §12). Tek kaynagi content/site.json. */
.site-footer__nap {
font-style: normal;
color: var(--color-text-muted);
font-size: var(--fs-sm);
display: grid;
gap: var(--space-2);
}
.site-footer__nap a {
color: var(--color-text-muted);
}
.site-footer__bottom {
margin-block-start: var(--space-12);
padding-block-start: var(--space-6);
border-block-start: 1px solid var(--color-border);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-4);
color: var(--color-text-muted);
font-size: var(--fs-sm);
}
/* ==========================================================================
FORM
========================================================================== */
.form {
display: grid;
gap: var(--space-6);
margin-block-start: var(--space-8);
max-width: 720px;
}
.form__row {
display: grid;
gap: var(--space-6);
grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.form__field {
display: grid;
gap: var(--space-2);
}
.form__field label {
font-size: var(--fs-sm);
font-weight: 600;
}
.form__hint {
font-weight: 400;
color: var(--color-text-muted);
font-size: var(--fs-xs);
margin: 0;
}
.form__field input,
.form__field select,
.form__field textarea {
width: 100%;
min-height: var(--touch-target);
padding: var(--space-3) var(--space-4);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
color: var(--color-text);
transition: border-color var(--transition-fast) var(--ease);
}
.form__field textarea {
min-height: 140px;
resize: vertical;
line-height: var(--lh-normal);
}
.form__field input:hover,
.form__field select:hover,
.form__field textarea:hover {
border-color: var(--color-text-muted);
}
.form__field input:focus-visible,
.form__field select:focus-visible,
.form__field textarea:focus-visible {
border-color: var(--color-accent);
}
/* Hatali alan: yalnizca renkle degil kalinlikla da isaretlenir -
renk korlugu olan kullanici icin renk tek basina yetmez. */
.form__field [aria-invalid="true"] {
border-color: var(--color-danger);
border-width: 2px;
}
.form__error {
color: var(--color-danger);
font-size: var(--fs-sm);
}
.form__error:empty {
display: none;
}
/* --- checkbox ve fieldset ---------------------------------------------- */
.form__fieldset {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-5);
margin: 0;
}
.form__fieldset legend {
padding-inline: var(--space-2);
font-size: var(--fs-sm);
font-weight: 600;
}
.form__checks {
display: grid;
gap: var(--space-3);
grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
.form__check {
display: flex;
align-items: flex-start;
gap: var(--space-3);
font-size: var(--fs-sm);
line-height: var(--lh-normal);
cursor: pointer;
min-height: var(--touch-target);
}
.form__check input {
inline-size: 20px;
block-size: 20px;
margin-block-start: 2px;
flex-shrink: 0;
accent-color: var(--color-accent);
}
.form__consent {
display: grid;
gap: var(--space-4);
padding: var(--space-5);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}
/* --- hata özeti --------------------------------------------------------- */
.form-errors {
margin-block-start: var(--space-6);
padding: var(--space-5);
background-color: var(--color-danger-soft);
border: 1px solid var(--color-danger);
border-radius: var(--radius-md);
}
.form-errors:focus-visible {
outline: 2px solid var(--color-danger);
outline-offset: 3px;
}
.form-errors__title {
font-weight: 650;
margin: 0 0 var(--space-3);
}
.form-errors__list {
margin: 0;
padding-inline-start: var(--space-5);
color: var(--color-text-muted);
font-size: var(--fs-sm);
}
/* --- honeypot ----------------------------------------------------------- */
/*
display:none KULLANILMIYOR: bazı botlar gizlenmiş alanları atlar.
Ekran dışına taşınıyor — görsel olarak yok, DOM'da var.
*/
.hp-field {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
/* --- iletişim sayfası yerleşimi ---------------------------------------- */
.form-layout {
display: grid;
gap: var(--space-12);
}
@media (min-width: 900px) {
.form-layout {
grid-template-columns: minmax(0, 1fr) 280px;
align-items: start;
}
}
.contact-info {
font-style: normal;
display: grid;
gap: var(--space-2);
padding: var(--space-5);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
font-size: var(--fs-sm);
}
.contact-info__title {
font-size: var(--fs-sm);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-muted);
margin-block-end: var(--space-3);
}
.ticket-ref code {
font-size: var(--fs-lg);
padding: var(--space-2) var(--space-4);
}
/* --- mobil menü --------------------------------------------------------- */
@media (max-width: 900px) {
.main-nav.is-open {
display: block;
position: absolute;
inset-inline: 0;
top: 100%;
padding: var(--space-4);
background-color: var(--color-surface);
border-block-end: 1px solid var(--color-border);
box-shadow: var(--shadow-lg);
}
.main-nav.is-open .main-nav__list {
flex-direction: column;
align-items: stretch;
gap: var(--space-1);
}
.main-nav.is-open .main-nav__link {
width: 100%;
}
.site-header__inner {
position: relative;
}
}
/* ==========================================================================
HEADER / NAV
========================================================================== */
.site-header {
position: sticky;
top: 0;
z-index: var(--z-header);
background-color: var(--color-header-bg);
backdrop-filter: blur(12px);
border-block-end: 1px solid var(--color-border);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
min-height: 64px;
}
.site-logo {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-weight: 650;
font-size: var(--fs-lg);
color: var(--color-text);
text-decoration: none;
letter-spacing: var(--tracking-tight);
}
.site-logo:hover {
color: var(--color-text);
}
/* Ad + altinda "2012'den beri" satiri: yan yana degil alt alta, header'i genisletmesin. */
.site-logo__text {
display: grid;
line-height: 1.1;
}
.site-logo__since {
font-size: var(--fs-xs);
font-weight: 500;
letter-spacing: 0.02em;
color: var(--color-text-muted);
}
.site-logo__mark {
display: block;
width: 32px;
height: 32px;
}
.btn--sm {
min-height: 38px;
padding: var(--space-2) var(--space-4);
font-size: var(--fs-sm);
}
@media (pointer: coarse) {
.btn--sm {
min-height: var(--touch-target);
}
}
.site-logo {
white-space: nowrap;
}
@media (max-width: 560px) {
.header-cta {
display: none;
}
}
/*
Dar ekranda logo + dil + tema + menu tek satira sigmali (320px'te
42px tasma olculdu). Logo yazisi GORSEL olarak gizlenir ama ekran
okuyucu icin kalir: link adsiz kalmasin (img alt="" dekoratif).
*/
@media (max-width: 420px) {
.site-logo__text {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.site-header__inner,
.header-actions {
gap: var(--space-2);
}
}
.main-nav__list {
display: flex;
align-items: center;
gap: var(--space-1);
list-style: none;
margin: 0;
padding: 0;
}
.main-nav__link {
display: inline-flex;
align-items: center;
min-height: var(--touch-target);
padding-inline: var(--space-3);
border-radius: var(--radius-md);
color: var(--color-text-muted);
font-size: var(--fs-sm);
text-decoration: none;
}
.main-nav__link:hover,
.main-nav__link[aria-current="page"] {
color: var(--color-text);
background-color: var(--color-surface-2);
}
.header-actions {
display: flex;
align-items: center;
gap: var(--space-3);
}
/* Mobil menu tetigi - davranis Faz 1B'de JS ile eklenecek. */
.nav-toggle {
display: none;
min-width: var(--touch-target);
min-height: var(--touch-target);
align-items: center;
justify-content: center;
background: none;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
color: var(--color-text);
cursor: pointer;
}
@media (max-width: 900px) {
.main-nav {
display: none;
}
.nav-toggle {
display: inline-flex;
}
}
/* --- dil degistirici -------------------------------------------------- */
.lang-switcher__list {
display: flex;
align-items: center;
gap: var(--space-1);
list-style: none;
margin: 0;
padding: 2px;
background-color: var(--color-surface-2);
border-radius: var(--radius-full);
}
.lang-switcher__item {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
min-height: 32px;
padding-inline: var(--space-2);
border-radius: var(--radius-full);
font-size: var(--fs-xs);
font-weight: 600;
color: var(--color-text-muted);
text-decoration: none;
}
/*
Dokunmatik cihazda hedef 44px'e cikar (Faz 1 §22).
Masaustunde 32px yeterli ve baslik cubugunu sismanlatmiyor;
pointer:coarse ile ayirmak ikisini de dogru kiliyor.
*/
@media (pointer: coarse) {
.lang-switcher__item {
min-height: var(--touch-target);
min-width: var(--touch-target);
}
}
.lang-switcher__item:hover {
color: var(--color-text);
}
.lang-switcher__item.is-current {
background-color: var(--color-accent);
color: var(--color-on-accent);
}
/* --- tema degistirici --------------------------------------------------
Koyu temada GUNES (acik temaya gec), acik temada AY gorunur. Hangi
ikonun gorunecegi theme.js'e degil CSS'e bagli: JS gec yuklense de
ikon her zaman o anki temayla tutarli. */
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--touch-target);
min-height: var(--touch-target);
padding: 0;
background: none;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
color: var(--color-text);
cursor: pointer;
transition: border-color var(--transition-fast) var(--ease), background-color var(--transition-fast) var(--ease);
}
.theme-toggle:hover {
border-color: var(--color-accent);
background-color: var(--color-accent-soft);
}
/* .theme-toggle on eki: .icon (icon.css) da display tanimliyor ve bundle'da
header.css'ten SONRA geliyor; tek sinifli secici onu ezemezdi. */
.theme-toggle .theme-toggle__moon {
display: none;
}
:root[data-theme="light"] .theme-toggle .theme-toggle__sun {
display: none;
}
:root[data-theme="light"] .theme-toggle .theme-toggle__moon {
display: inline-block;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .theme-toggle .theme-toggle__sun {
display: none;
}
:root:not([data-theme="dark"]) .theme-toggle .theme-toggle__moon {
display: inline-block;
}
}
/* ==========================================================================
ICON — /icons/sprite.svg sembolleri
fill/stroke kalitimla <use> golge agacina gecer.
========================================================================== */
.icon {
display: inline-block;
flex-shrink: 0;
width: 1.25em;
height: 1.25em;
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
vertical-align: -0.2em;
}
.icon--lg {
width: 1.75rem;
height: 1.75rem;
}
/* Kart basindaki ikon kutusu. */
.icon-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: var(--radius-md);
background-color: var(--color-accent-soft);
border: 1px solid var(--color-accent-border);
color: var(--color-accent-hover);
}
/* ==========================================================================
SECTION — bolum basligi, alternatif zemin, CTA paneli, link oku
Ana sayfa ve detay sayfalari ortak kullanir.
========================================================================== */
/* Liste sayfalarinin baslik alani: H1, ana sayfa hero'su kadar buyuk degil. */
.page-intro {
padding-block-start: var(--space-8);
}
.page-intro__title {
margin: 0;
font-size: var(--fs-4xl);
}
.section--alt {
background:
linear-gradient(180deg, transparent 0%, var(--color-surface) 12%, var(--color-surface) 88%, transparent 100%);
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin: 0 0 var(--space-3);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--color-accent-hover);
}
.section-header {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-4) var(--space-8);
margin-block-end: var(--space-10);
}
.section-header__text {
max-width: 720px;
}
.section-header__title {
margin: 0;
}
.section-header__lead {
margin: var(--space-4) 0 0;
color: var(--color-text-muted);
font-size: var(--fs-lg);
line-height: var(--lh-normal);
}
.section-header--center {
flex-direction: column;
align-items: center;
text-align: center;
}
.section-header--center .section-header__lead {
margin-inline: auto;
}
.link-arrow {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: var(--touch-target);
font-size: var(--fs-sm);
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.link-arrow .icon {
transition: transform var(--transition-fast) var(--ease);
}
.link-arrow:hover .icon {
transform: translateX(3px);
}
/* --- CTA paneli ------------------------------------------------------- */
.cta-panel {
position: relative;
overflow: hidden;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-8);
padding: clamp(var(--space-8), 5vw, var(--space-16));
border: 1px solid var(--color-accent-border);
border-radius: var(--radius-lg);
background:
radial-gradient(120% 140% at 100% 0%, var(--color-accent-glow-strong) 0%, transparent 55%),
radial-gradient(80% 120% at 0% 100%, var(--color-success-glow) 0%, transparent 60%),
var(--color-surface);
}
.cta-panel__text {
max-width: 640px;
}
.cta-panel__title {
margin: 0;
font-size: var(--fs-3xl);
}
.cta-panel__lead {
margin: var(--space-4) 0 0;
color: var(--color-text-muted);
font-size: var(--fs-lg);
}
/* --- buyuk buton ------------------------------------------------------- */
.btn--lg {
min-height: 52px;
padding-inline: var(--space-8);
font-size: var(--fs-base);
}
.btn .icon {
transition: transform var(--transition-fast) var(--ease);
}
.btn:hover .icon {
transform: translateX(3px);
}
/* --- tiklanabilir kart -------------------------------------------------
Tum kart tiklanir ama DOM'da tek link vardir: ::after linki kartin
tamamina yayar. Ekran okuyucu tek, anlamli bir link duyar. */
.card--link {
position: relative;
}
.card__stretched::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
}
.card__stretched:focus-visible {
outline: none;
}
.card--link:has(.card__stretched:focus-visible) {
outline: 2px solid var(--color-accent);
outline-offset: 3px;
}
.card__more {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-block-start: auto;
padding-block-start: var(--space-2);
font-size: var(--fs-sm);
font-weight: 600;
color: var(--color-accent-hover);
}
.card--link:hover .card__more .icon {
transform: translateX(3px);
}
.card__more .icon {
transition: transform var(--transition-fast) var(--ease);
}
.card--accent {
background:
radial-gradient(100% 100% at 100% 0%, var(--color-accent-glow) 0%, transparent 70%),
var(--color-surface);
border-color: var(--color-accent-border);
}
/* ==========================================================================
ANA SAYFA
========================================================================== */
/* --- 1. hero ----------------------------------------------------------- */
.hero {
position: relative;
overflow: hidden;
padding-block: clamp(var(--space-12), 8vw, var(--space-24));
border-block-end: 1px solid var(--color-border);
}
/* Dekoratif zemin: izgara + vurgu isigi. Gorsel dosya yok, istek yok. */
.hero__glow {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(60% 60% at 75% 30%, var(--color-accent-glow-strong) 0%, transparent 70%),
radial-gradient(40% 50% at 10% 90%, var(--color-success-glow) 0%, transparent 70%),
linear-gradient(var(--color-grid-line) 1px, transparent 1px) 0 0 / 48px 48px,
linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px) 0 0 / 48px 48px;
mask-image: radial-gradient(80% 80% at 50% 40%, #000 30%, transparent 100%);
}
.hero__inner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
align-items: center;
gap: clamp(var(--space-8), 4vw, var(--space-16));
}
.hero__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
margin: 0 0 var(--space-6);
padding: var(--space-2) var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-full);
background-color: var(--color-surface-translucent);
font-size: var(--fs-sm);
color: var(--color-text-muted);
}
.hero__pulse {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--color-success);
box-shadow: 0 0 0 0 var(--color-success-pulse);
animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 var(--color-success-pulse); }
70% { box-shadow: 0 0 0 10px transparent; }
100% { box-shadow: 0 0 0 0 transparent; }
}
.hero__title {
margin: 0;
font-size: clamp(2.25rem, 1.4rem + 3.2vw, 3.75rem);
font-weight: 700;
letter-spacing: -0.03em;
background: linear-gradient(180deg, var(--color-heading-from) 0%, var(--color-heading-to) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero__lead {
margin: var(--space-6) 0 0;
font-size: var(--fs-xl);
line-height: var(--lh-normal);
color: var(--color-text-muted);
max-width: 58ch;
}
.hero__actions {
margin-block-start: var(--space-8);
gap: var(--space-4);
}
.hero__highlights {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: var(--space-6);
margin: var(--space-12) 0 0;
padding: var(--space-6) 0 0;
list-style: none;
border-block-start: 1px solid var(--color-border);
}
.hero__highlight {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.hero__highlight strong {
font-size: var(--fs-xl);
font-weight: 650;
color: var(--color-text);
}
.hero__highlight span {
font-size: var(--fs-sm);
color: var(--color-text-muted);
}
/* --- hero gorseli: kod penceresi --------------------------------------- */
.hero__visual {
position: relative;
padding: var(--space-8) var(--space-4);
}
.code-window {
border: 1px solid var(--color-code-border);
border-radius: var(--radius-lg);
background: linear-gradient(180deg, var(--color-code-bg-from) 0%, var(--color-code-bg-to) 100%);
box-shadow: var(--shadow-lg), 0 0 0 1px var(--color-accent-glow);
overflow: hidden;
}
.code-window__bar {
display: flex;
align-items: center;
gap: 6px;
padding: var(--space-3) var(--space-4);
border-block-end: 1px solid var(--color-code-border);
background-color: var(--color-code-bar);
}
.code-window__bar span {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: var(--color-border);
}
.code-window__bar span:nth-child(1) { background-color: #e5484d; }
.code-window__bar span:nth-child(2) { background-color: #e8a33d; }
.code-window__bar span:nth-child(3) { background-color: #2fbf71; }
.code-window__bar em {
margin-inline-start: var(--space-3);
font-family: var(--font-mono);
font-size: var(--fs-xs);
font-style: normal;
color: var(--color-code-text);
}
.code-window__body {
margin: 0;
padding: var(--space-6) var(--space-5);
overflow: hidden;
font-family: var(--font-mono);
font-size: clamp(0.7rem, 0.55rem + 0.35vw, 0.85rem);
line-height: 1.8;
color: var(--color-code-text);
counter-reset: line;
}
.code-window__line {
display: block;
min-height: 1.8em;
padding: 0;
background: none;
border-radius: 0;
font-size: inherit;
white-space: pre;
}
.code-window__line::before {
counter-increment: line;
content: counter(line);
display: inline-block;
width: 2ch;
margin-inline-end: var(--space-4);
text-align: right;
color: var(--color-code-gutter);
}
.hero__card {
position: absolute;
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background-color: var(--color-surface-translucent);
backdrop-filter: blur(8px);
box-shadow: var(--shadow-md);
font-size: var(--fs-xs);
font-weight: 600;
color: var(--color-text);
}
.hero__card .icon {
color: var(--color-success);
}
.hero__card--top {
top: 0;
right: 0;
}
.hero__card--bottom {
bottom: 0;
left: 0;
}
.hero__card--bottom .icon {
color: var(--color-warning);
}
@media (max-width: 960px) {
.hero__inner {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-10);
}
}
@media (max-width: 560px) {
.hero__visual {
display: none;
}
}
/* --- 2. hizmetler ------------------------------------------------------ */
.service-card {
gap: var(--space-4);
}
/* --- 3. neden biz ------------------------------------------------------ */
.why {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: var(--space-12);
align-items: start;
}
.why__intro {
position: sticky;
top: 96px;
}
.why__intro .section-header {
flex-direction: column;
align-items: flex-start;
margin: 0;
}
.why__list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
gap: var(--space-6);
margin: 0;
padding: 0;
list-style: none;
}
.why__item {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-6);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background-color: var(--color-bg);
}
.why__title {
margin: 0 0 var(--space-2);
font-size: var(--fs-lg);
}
.why__text {
margin: 0;
font-size: var(--fs-sm);
color: var(--color-text-muted);
line-height: var(--lh-normal);
}
@media (max-width: 960px) {
.why {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-8);
}
.why__intro {
position: static;
}
}
/* --- 4. teknoloji seridi ----------------------------------------------- */
.tech-strip {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
gap: var(--space-4);
margin: 0;
padding: 0;
list-style: none;
}
.tech-chip {
display: flex;
align-items: center;
gap: var(--space-4);
min-height: 72px;
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background-color: var(--color-surface);
color: var(--color-text);
text-decoration: none;
transition: border-color var(--transition-base) var(--ease), background-color var(--transition-base) var(--ease);
}
.tech-chip:hover {
border-color: var(--color-accent);
background-color: var(--color-surface-2);
color: var(--color-text);
}
.tech-chip__mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-2) 100%);
color: var(--color-on-accent);
font-family: var(--font-mono);
font-size: var(--fs-sm);
font-weight: 700;
}
.tech-chip__body {
display: flex;
flex-direction: column;
}
.tech-chip__body small {
font-size: var(--fs-xs);
color: var(--color-text-muted);
text-transform: capitalize;
}
/* --- 5. projeler ------------------------------------------------------- */
.project-card__visual {
display: flex;
align-items: flex-end;
justify-content: space-between;
height: 140px;
margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-2);
padding: var(--space-5) var(--space-6);
border-block-end: 1px solid var(--color-border);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
background:
radial-gradient(90% 120% at 100% 0%, var(--color-accent-glow-strong) 0%, transparent 60%),
linear-gradient(var(--color-grid-line) 1px, transparent 1px) 0 0 / 24px 24px,
linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px) 0 0 / 24px 24px,
var(--color-surface-2);
color: var(--color-accent-hover);
}
.project-card__index {
font-family: var(--font-mono);
font-size: var(--fs-3xl);
font-weight: 700;
color: var(--color-index-text);
}
/* --- 6. surec ---------------------------------------------------------- */
.process {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
gap: var(--space-6);
margin: 0;
padding: 0;
list-style: none;
counter-reset: step;
}
.process__step {
position: relative;
padding: var(--space-8) var(--space-6) var(--space-6);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background-color: var(--color-bg);
counter-increment: step;
}
.process__step::before {
content: counter(step, decimal-leading-zero);
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-block-end: var(--space-4);
border-radius: 50%;
border: 1px solid var(--color-accent-border);
background-color: var(--color-accent-soft);
font-family: var(--font-mono);
font-size: var(--fs-sm);
font-weight: 700;
color: var(--color-accent-hover);
}
.process__title {
margin: 0 0 var(--space-2);
font-size: var(--fs-lg);
}
.process__text {
margin: 0;
font-size: var(--fs-sm);
color: var(--color-text-muted);
line-height: var(--lh-normal);
}
/* --- 7. sektorler ------------------------------------------------------ */
.industry-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
gap: var(--space-4);
margin: 0;
padding: 0;
list-style: none;
}
.industry-tile {
display: flex;
flex-direction: column;
gap: var(--space-2);
height: 100%;
padding: var(--space-6);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background-color: var(--color-surface);
color: var(--color-text);
text-decoration: none;
transition: border-color var(--transition-base) var(--ease), transform var(--transition-base) var(--ease);
}
.industry-tile .icon {
color: var(--color-accent-hover);
margin-block-end: var(--space-2);
}
.industry-tile:hover {
border-color: var(--color-accent);
color: var(--color-text);
transform: translateY(-2px);
}
.industry-tile__title {
font-size: var(--fs-lg);
font-weight: 600;
}
.industry-tile__text {
font-size: var(--fs-sm);
color: var(--color-text-muted);
line-height: var(--lh-normal);
}
/* --- 8. referanslar ---------------------------------------------------- */
.testimonial {
display: flex;
flex-direction: column;
gap: var(--space-4);
margin: 0;
padding: var(--space-8);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background-color: var(--color-bg);
}
.testimonial__mark {
color: var(--color-accent);
}
.testimonial__quote {
margin: 0;
}
.testimonial__quote p {
margin: 0;
font-size: var(--fs-lg);
line-height: var(--lh-normal);
}
.testimonial__author {
display: flex;
flex-direction: column;
margin-block-start: auto;
font-size: var(--fs-sm);
}
.testimonial__author span {
color: var(--color-text-muted);
}
/* --- 10. SSS ----------------------------------------------------------- */
.faq-split {
display: grid;
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
gap: var(--space-12);
align-items: start;
}
.faq-split .section-header {
flex-direction: column;
align-items: flex-start;
}
@media (max-width: 960px) {
.faq-split {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-4);
}
}
/* --- hareket ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.hero__pulse {
animation: none;
}
}
/* ==========================================================================
UTILITIES — sadece gercekten tekrar eden birkac tanesi
Utility framework DEGIL. Bir kural ucuncu kez tekrar ediyorsa
component'e cikarilir (Faz 1 §14).
========================================================================== */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.text-muted { color: var(--color-text-muted); }
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.full-width { max-width: none; }