/* ==========================================================================
NAZ MADENCİLİK — Bileşen & Layout Stilleri
tokens.css'e bağımlıdır. Desen kaynağı DESİL main.css (kanonik shell:
header / nav / hero / bölüm deseni); değerler token'lardan gelir.
Faz 0–1a kapsamı: taban + topbar + header + hero + reveal.
========================================================================== */
/* --- Reset & taban ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* --- Scroll snap (R5) ----------------------------------------------------
Yalnız one-page (html.has-snap — yasal sayfalarda sınıf yok), MASAÜSTÜ
genişliği (≥901px), ≥700px yükseklik, motion açıkken. Hizalama
scroll-margin-top'u (sticky header payı) otomatik kullanır; anchor
navigasyonu etkilenmez.
R6 teşhisi: mekanizma kök scroller'da (html) doğru çalışıyordu; his yokluğunun
nedeni aşırı temkinli min-height kapılarıydı — pratikte tek snap noktası hero
kalmıştı. Çözüm: BEŞ bölümün BAŞLANGICI hizalanır.
M4 (mobil turu): kapı 768 → 901px. 768'de bölümler viewport'tan uzundu
(Kurumsal 1.21vh, Ürünler 1.25vh) ve mandatory snap küçük kaydırma
artışlarını durağa geri çekiyordu — ölçüm: 300px ve 500px tekerlek
delta'sında scrollY 0'da kalıyordu. 901 sınırı, mobil ailesinin
(max-width: 900px) tam tümleyenidir ve main.js'teki
matchMedia("(min-width: 901px)") ile aynıdır.
(@media koşulu CSS değişkeni alamaz.) */
@media (min-width: 901px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
html.has-snap { scroll-snap-type: y var(--snap-strictness); }
/* R17: mandatory güvenli olsun diye HER bölüm hizalı — uzun bölümlerin
içi spec gereği serbest (alan snapport'u kaplayınca zorlanmaz), sınırlar
sert yakalar. Footer 'end' hizası: sayfa dibi geçerli durak kalır.
M5: durak listesi ID YERİNE data-snap özniteliğiyle kurulur. Eskiden
seçiciler TR ID'lerine sabitti (#kurumsal…); Faz 2'de en.html DOM'u
kopyalanıp ID'ler değişince (#corporate…) EN sayfası sessizce TÜM
duraklarını kaybetmişti (yalnız hero + footer kalmıştı). Öznitelik
dile bağımsızdır ve ileride ID değişse de kopmaz; data-* zaten bu
projenin davranış kancası idiomu (data-theme, data-bg). */
html.has-snap [data-snap="start"] { scroll-snap-align: start; }
html.has-snap [data-snap="end"] { scroll-snap-align: end; }
/* Faz 3 K1: Tab gezinmesinde mandatory snap, odak kaydırmasını geri çekip
odaklı öğeyi viewport dışında bırakabiliyor (galeri küçükleri, "Devam"
linkleri). Tab'da snap geçici bırakılır; tekerlek/dokunma/tıklamayla
kaydırmaya dönülünce geri gelir — ilk kaydırma zaten snap'leyeceği için
görünür sıçrama olmaz. Sınıfı main.js yönetir. */
html.has-snap.kbd-nav { scroll-snap-type: none; }
}
body {
margin: 0;
font-family: var(--font-body);
font-stretch: var(--stretch-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--ink);
background: var(--ground);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
/* R6: hidden değil clip — hidden, body'yi scroll konteyneri yapabilir ve
kök scroller'daki scroll-snap'i kırabilir; clip yalnız keser. */
overflow-x: clip;
}
h1, h2, h3, h4 {
font-family: var(--font-display);
font-stretch: var(--stretch-display);
color: var(--ink);
margin: 0;
line-height: var(--lh-snug);
font-weight: var(--fw-bold);
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
:focus-visible {
outline: 3px solid var(--brand);
outline-offset: 3px;
border-radius: var(--radius-xs);
}
::selection { background: var(--brand-tint); color: var(--brand-700); }
/* Saydam/koyu başlık zeminlerinde odak halkası amber — her fotoğrafta görünür */
.topbar a:focus-visible,
.site-header:not(.is-stuck) a:focus-visible,
.site-header:not(.is-stuck) button:focus-visible,
.site-header.theme-dark a:focus-visible,
.site-header.theme-dark button:focus-visible { outline-color: var(--amber); }
/* Erişilebilirlik: atlama linki */
.skip-link {
position: absolute; left: -9999px; top: 0;
background: var(--brand); color: #fff;
padding: var(--space-3) var(--space-5);
border-radius: 0 0 var(--radius-md) 0;
z-index: calc(var(--z-overlay) + 10);
font-weight: var(--fw-semi);
}
.skip-link:focus { left: 0; }
/* --- Layout yardımcıları ------------------------------------------------- */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); position: relative; }
/* R9: ana bölümler tam ekran — arka plan viewport tepesinden (header altından)
başlar, içerik padding-top ile header'dan korunur, dikeyde ortalanır.
min-height olduğundan sığmayan içerik bölümü doğal büyütür, kesilmez. */
/* M3: min-height (tam ekran eşitliği) YALNIZ masaüstünde. ROADMAP §3 zaten
"Mobil (<900px) ve kısa ekran (<700px): eşit yükseklik ve snap KAPALI"
diyordu; snap kapatılmış ama min-height kapıya alınmamıştı. Ölçülen sonuç:
İletişim içeriği 867px'ken kutu 801px'te kilitli kalıyor (harita alt kenarı
kesiliyor) ve Faaliyet'te lead ile şerit arasında ölü boşluk oluşuyordu. */
.section--screen {
display: flex; flex-direction: column; justify-content: center;
padding-top: calc(var(--topbar-h) + var(--header-h) + var(--space-6));
padding-bottom: var(--space-4);
}
@media (min-width: 901px) {
.section--screen { min-height: var(--screen-h); }
}
.section--screen .section-head { margin-bottom: var(--space-4); }
/* Bölüm geçişleri KESKİN: beyaz/taş alternansı düz zeminlerle, yumuşatma yok */
.section--white { background: var(--surface); }
.section--tint,
.section--soft { background: var(--surface-warm); }
/* Koyu bölüm — arka plan görseli + antrasit overlay (açık/koyu ritmi) */
.section--dark {
position: relative; overflow: hidden; isolation: isolate;
color: #fff; background: var(--brand-deep);
}
.section-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.section-bg img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center; display: block;
}
.section-bg::after { /* okunurluk overlay'i */
content: ""; position: absolute; inset: 0;
background: var(--grad-deep);
opacity: 0.88;
}
.section--dark .section-title { color: #fff; }
.section--dark .section-lead { color: rgba(255, 255, 255, 0.82); }
.measure { max-width: var(--measure); }
/* Bölüm deseni: (eyebrow + başlık) → lead */
.section-head { margin-bottom: var(--space-7); }
.section-head--center { margin-inline: auto; text-align: center; max-width: 62ch; }
/* Numaralı bölüm sayacı (R2-a, referans deseni): "01 / Kurumsal" —
numara bakır, ayraç ince, etiket açık gri. */
.eyebrow {
display: inline-flex;
align-items: baseline;
gap: var(--space-2);
font-family: var(--font-body);
font-stretch: var(--stretch-body);
font-size: var(--fs-eyebrow);
font-weight: var(--fw-semi);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: var(--space-4);
}
.eyebrow-num { color: var(--brand); font-weight: var(--fw-bold); }
.eyebrow-sep { color: var(--line-strong); font-weight: var(--fw-regular); }
.eyebrow-label { color: var(--ink-muted); }
.eyebrow--on-dark .eyebrow-num { color: var(--amber); }
.eyebrow--on-dark .eyebrow-sep { color: rgba(255, 255, 255, 0.25); }
.eyebrow--on-dark .eyebrow-label { color: rgba(255, 255, 255, 0.55); }
.section-title { font-size: var(--fs-h2); letter-spacing: var(--tracking-tight); text-wrap: balance; }
/* Başlık vurgusu (R21): Manrope'ta italik kesim yok — vurgu hafif ağırlıkla */
.section-title em {
font-style: normal;
font-weight: var(--fw-light);
font-stretch: var(--stretch-body);
}
.section-lead {
margin-top: var(--space-4);
font-size: var(--fs-lead);
line-height: 1.55;
color: var(--ink-soft);
max-width: var(--measure);
}
/* --- Butonlar ------------------------------------------------------------ */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: var(--space-2);
font-family: var(--font-body);
font-stretch: var(--stretch-body);
font-weight: var(--fw-semi);
font-size: var(--fs-sm);
line-height: 1;
padding: 0.85rem 1.4rem;
border-radius: var(--radius-sm);
border: 1.5px solid transparent;
transition: transform var(--dur) var(--ease),
box-shadow var(--dur) var(--ease),
background-color var(--dur) var(--ease),
border-color var(--dur) var(--ease),
color var(--dur) var(--ease);
white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary {
background: var(--brand); color: #fff;
box-shadow: var(--shadow-cta);
}
.btn--primary:hover { background: var(--brand-700); }
.btn--ghost {
background: transparent; color: var(--brand);
border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--brand); background: var(--brand-wash); }
.btn--light {
background: rgba(255, 255, 255, 0.10); color: #fff;
border-color: rgba(255, 255, 255, 0.28);
backdrop-filter: blur(4px);
}
.btn--light:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.55); }
.btn--white { background: #fff; color: var(--brand-deep); }
.btn--white:hover { background: var(--brand-soft); }
.btn--sm { padding: 0.6rem 1.05rem; font-size: 0.85rem; }
/* ==========================================================================
TOPBAR (R9) — telefon · e-posta · "Teklif Alın" metin-linki. Saydam cam,
İÇERİĞİN ÜSTÜNE biner (akışta yer kaplamaz); scroll'la yukarı KAYAR —
sabit blok 114px'e şişmesin, desil'in dikişsiz header devri korunsun.
========================================================================== */
.topbar {
position: absolute; top: 0; left: 0; right: 0;
z-index: calc(var(--z-header) + 1);
background: rgba(16, 17, 20, 0.25);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
color: rgba(255, 255, 255, 0.78);
font-size: var(--fs-label);
}
@supports not (backdrop-filter: blur(1px)) {
.topbar { background: rgba(16, 17, 20, 0.72); }
}
.topbar-inner {
display: flex; align-items: center; justify-content: flex-end;
gap: var(--space-5);
min-height: var(--topbar-h);
}
.topbar-right { display: flex; align-items: center; gap: var(--space-5); }
/* İnce metin-link CTA (dolgu buton değil): bakır, ok, hover'da altı çizgi */
.topbar-cta {
display: inline-flex; align-items: baseline; gap: var(--space-1);
color: var(--amber);
font-weight: var(--fw-semi);
letter-spacing: var(--tracking-label);
white-space: nowrap;
}
.topbar-cta:hover { text-decoration: underline; text-underline-offset: 3px; }
/* ==========================================================================
HEADER / NAV
Topbar akışta kaldığı için header 'absolute top: topbar' başlar;
scroll topbar'ı geçince JS is-stuck ile 'fixed top: 0'a alır (dikişsiz).
========================================================================== */
.site-header {
position: absolute; top: var(--topbar-h); left: 0; right: 0; z-index: var(--z-header);
background: transparent;
transition: background-color var(--dur-slow) var(--ease),
box-shadow var(--dur-slow) var(--ease),
border-color var(--dur-slow) var(--ease);
border-bottom: 1px solid transparent;
}
/* R9: en tepede saf saydam (scrim yok — hero/page-head kendi overlay'iyle
okunurluğu taşır). is-stuck: yalnız blur + ÇOK düşük opasiteli scrim +
hairline; dolgu renk YOK. Scrim tonu ve yazı/logo, altındaki bölümün
data-theme'inden JS'le gelen .theme-light/.theme-dark sınıfına bağlı. */
.site-header.is-stuck {
position: fixed; top: 0;
-webkit-backdrop-filter: saturate(1.3) blur(14px);
backdrop-filter: saturate(1.3) blur(14px);
}
.site-header.is-stuck.theme-light {
background: rgba(246, 245, 242, 0.30);
border-bottom-color: rgba(205, 200, 191, 0.5);
}
.site-header.is-stuck.theme-dark {
background: rgba(16, 17, 20, 0.35);
border-bottom-color: rgba(255, 255, 255, 0.12);
}
@supports not (backdrop-filter: blur(1px)) {
.site-header.is-stuck.theme-light { background: rgba(246, 245, 242, 0.93); }
.site-header.is-stuck.theme-dark { background: rgba(16, 17, 20, 0.88); }
}
.header-inner {
display: flex; align-items: center; justify-content: space-between;
gap: var(--space-5);
min-height: var(--header-h);
}
/* Sabit kutu: iki logo varyantı aynı oranda (160×100); 46px yükseklikte ~74px.
is-stuck swap'ında nav elemanları kaymasın diye genişlik sabit.
NOT (rötuş R1-6): kaynak logo 160×100 PNG, retinada yumuşak — vektör (SVG)
logo beklemede. Kutu oran-bağımsız (object-fit: contain); SVG gelince
index.html'de yalnız src değişir, buraya dokunulmaz. */
.brand { display: inline-flex; align-items: center; flex: none; width: 74px; height: 46px; position: relative; }
.brand img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: contain; object-position: left center; display: block;
transition: opacity var(--dur) var(--ease);
}
/* Logo: temalar arası kısa opacity crossfade (display atlaması ani kalıyordu) */
.brand .logo-dark { opacity: 0; }
.site-header.is-stuck.theme-light .brand .logo-white { opacity: 0; }
.site-header.is-stuck.theme-light .brand .logo-dark { opacity: 1; }
.nav { display: flex; align-items: center; gap: var(--space-2); }
.nav-list { display: flex; align-items: center; gap: clamp(2px, 0.4vw, 10px); }
.nav-list a {
display: inline-block;
padding: var(--space-2) var(--space-3);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
white-space: nowrap; /* menü öğesi asla iki satıra kırılmaz */
color: rgba(255, 255, 255, 0.82); /* hero üstü: açık */
border-radius: var(--radius-sm);
position: relative;
transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav-list a:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
/* Anasayfa öğesindeki home ikonu — metinle aynı renk akışı */
.nav-list a { display: inline-flex; align-items: center; gap: var(--space-2); }
.nav-ico { width: 15px; height: 15px; flex: none; }
.site-header.is-stuck.theme-light .nav-list a { color: var(--ink-soft); }
.site-header.is-stuck.theme-light .nav-list a:hover { color: var(--brand); background: var(--brand-wash); }
.site-header.is-stuck.theme-dark .nav-list a { color: rgba(255, 255, 255, 0.85); }
.site-header.is-stuck.theme-dark .nav-list a:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
/* Anasayfa öğesindeki home ikonu — metinle aynı renk akışı */
.nav-list a { display: inline-flex; align-items: center; gap: var(--space-2); }
.nav-ico { width: 15px; height: 15px; flex: none; }
.header-cta { display: flex; align-items: center; gap: var(--space-4); }
/* Dil seçeneği header'da (desil lang-switcher deseni, konum değişti):
aktif belirgin, pasif soluk, ince ayraç; renkler temaya uyar */
.header-lang {
display: inline-flex; align-items: center; gap: var(--space-2);
font-size: var(--fs-sm);
font-weight: var(--fw-semi);
letter-spacing: var(--tracking-label);
}
.header-lang .lang-active { color: #fff; transition: color var(--dur) var(--ease); }
.header-lang .lang-sep { color: rgba(255, 255, 255, 0.25); transition: color var(--dur) var(--ease); }
.header-lang a.lang-passive { color: rgba(255, 255, 255, 0.62); transition: color var(--dur) var(--ease); } /* R10: 0.45 AA altıydı (2.9:1) */
.header-lang a.lang-passive:hover { color: var(--amber); }
.site-header.is-stuck.theme-light .header-lang .lang-active { color: var(--ink); }
.site-header.is-stuck.theme-light .header-lang .lang-sep { color: var(--line-strong); }
.site-header.is-stuck.theme-light .header-lang a.lang-passive { color: var(--ink-soft); } /* R10: ink-muted 4.3:1 ile AA altıydı */
.site-header.is-stuck.theme-light .header-lang a.lang-passive:hover { color: var(--brand); }
/* Hamburger */
.nav-toggle {
display: none;
width: 46px; height: 46px;
border: 1px solid rgba(255, 255, 255, 0.32);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.10);
padding: 0; position: relative;
}
.site-header.is-stuck.theme-light .nav-toggle,
body.nav-open .nav-toggle {
border-color: var(--line-strong);
background: rgba(255, 255, 255, 0.6);
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
content: ""; position: absolute; left: 50%; top: 50%;
width: 20px; height: 2px; background: #fff;
border-radius: 2px; transform: translate(-50%, -50%);
transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease),
background-color var(--dur) var(--ease);
}
.site-header.is-stuck.theme-light .nav-toggle span,
.site-header.is-stuck.theme-light .nav-toggle span::before,
.site-header.is-stuck.theme-light .nav-toggle span::after,
body.nav-open .nav-toggle span::before,
body.nav-open .nav-toggle span::after { background: var(--graphite); }
.nav-toggle span::before { transform: translate(-50%, -7px); }
.nav-toggle span::after { transform: translate(-50%, 5px); }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { transform: translate(-50%, -50%) rotate(45deg); }
body.nav-open .nav-toggle span::after { transform: translate(-50%, -50%) rotate(-45deg); }
/* ==========================================================================
HERO — full-bleed görsel + antrasit overlay + açık metin
(Sayfanın geri kalanı açık zeminli; yalnız hero/koyu bloklar koyu-üstü-açık.)
========================================================================== */
.hero {
position: relative;
overflow: hidden;
background: var(--brand-deep);
color: #fff;
isolation: isolate;
}
/* PERDE (R10, Gavia deseni; desil'in hero-curtain ailesinin sticky uyarlaması):
hero viewport'a yapışır, Kurumsal normal akışta üstüne kayar. sticky, layout
alanını KORUDUĞU için snap/anchor geometrisi değişmez → dikey snap'le çakışma
yok (test edildi); snap eksiltmeye gerek kalmadı. Ata denetimi: body
overflow-x: clip (hidden OLSAYDI sticky kırılırdı), main'de transform/filter/
contain yok. Örtülünce visibility ile katman ve sekme sırasından çıkar.
Mobil (<900) ve reduced-motion: perde yok, normal akış. */
/* Slot: sticky hero'nun akıştaki yerini tutar — snap/anchor hedefi budur
(sticky kutu scroll'la kaydığı için kendisi snap hedefi OLAMAZ; R17 kilidi) */
.hero-slot { position: relative; }
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
.hero--curtain { position: sticky; top: 0; z-index: 0; }
.hero--curtain .hero-bg img,
.hero--curtain .hero-inner {
transform: scale(calc(1 - var(--curtain-p, 0) * 0.04));
filter: brightness(calc(1 - var(--curtain-p, 0) * 0.3));
}
/* R17 düzeltmesi: visibility hero'nun SNAP ALANINI da siliyordu (yukarı
çıkışta 900'de kilit). inert JS'ten atanır: odak/etkileşim kesilir,
snap alanı ve layout kalır. Görsel örtme işini opak Kurumsal yapıyor. */
}
.hero-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-bg img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center;
}
.hero-bg::after { /* WCAG okunurluk overlay'i */
content: ""; position: absolute; inset: 0; z-index: 1;
background: var(--grad-hero-overlay);
}
/* R9: hero belge tepesinden başlar (topbar/header üstüne biner) → tam 100svh.
Üst padding topbar+header payını içerir; içerik ortalı kalır. */
.hero-inner {
position: relative; z-index: 3;
display: flex; flex-direction: column; justify-content: center;
min-height: var(--screen-h);
padding-block: calc(var(--topbar-h) + var(--header-h) + var(--space-6))
calc(var(--header-h) + var(--space-6));
}
/* Metin ortalanmış, sade kurumsal */
.hero-copy { max-width: 46rem; margin-inline: auto; text-align: center; }
.hero-title {
font-size: var(--fs-display);
font-weight: var(--fw-black);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
margin-top: var(--space-3);
color: #fff;
text-wrap: balance;
}
.hero-title .accent { /* ortalanmış metne simetrik, iki uca soluklaşan tek çizgi */
color: #fff; position: relative;
}
.hero-title .accent::after {
content: ""; position: absolute; left: 6%; right: 6%; bottom: -0.14em; height: 3px;
border-radius: 3px;
background: linear-gradient(90deg,
rgba(232, 164, 85, 0) 0%, var(--amber) 50%, rgba(232, 164, 85, 0) 100%);
}
.hero-lead {
margin-top: var(--space-5);
font-size: var(--fs-lead);
line-height: 1.6;
color: rgba(255, 255, 255, 0.86);
max-width: 52ch;
margin-inline: auto;
}
.hero-actions {
margin-top: var(--space-7);
display: flex; flex-wrap: wrap; gap: var(--space-3);
justify-content: center;
}
/* Keskin kesim (R2-1): fade yok — hero 3px bakır şeritle net biter. */
.hero::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
height: 3px;
background: var(--grad-brand);
}
/* Kaydırma işareti (rötuş R1-3; desil'de karşılığı yok — minimal öge):
alt ortada ince dikey hat, içinde aşağı süzülen amber nokta. */
.hero-scroll {
position: absolute; left: 50%; bottom: var(--space-5); z-index: 3;
transform: translateX(-50%);
display: block;
width: 24px; height: 48px; /* dokunma alanı; görünen hat ::before */
}
.hero-scroll::before { /* hat */
content: ""; position: absolute; left: 50%; top: 0;
transform: translateX(-50%);
width: 1px; height: 100%;
background: rgba(255, 255, 255, 0.35);
}
.hero-scroll::after { /* süzülen nokta */
content: ""; position: absolute; left: 50%; top: 0;
transform: translateX(-50%);
width: 5px; height: 5px; border-radius: 50%;
background: var(--amber);
animation: hero-scroll-drift 2.4s var(--ease) infinite;
}
@keyframes hero-scroll-drift {
0% { transform: translate(-50%, 0); opacity: 0; }
25% { opacity: 1; }
75% { opacity: 1; }
100% { transform: translate(-50%, 40px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.hero-scroll::after { animation: none; transform: translate(-50%, 20px); opacity: 1; }
}
/* ==========================================================================
KURUMSAL — sola hizalı okuma bloğu + yan sütun (3-kıta vurgusu + mozaik)
========================================================================== */
/* R9: scroll-margin YOK — bölümler viewport tepesinden başlar (arka plan
header'ın altından akar); başlığı header'dan koruyan şey bölümün kendi
padding-top'u. Margin verilseydi üstte önceki bölümden şerit görünürdü. */
/* R13 (Akçelik "Hakkımızda" düzeni): solda tıklanabilir görsel galerisi
(büyük kare + 6 küçük), sağda tek sütun metin. */
/* R16: iki sütun DENGELİ — galeri, metin sütunuyla aynı boya esner; büyük
görsel kalan yüksekliği doldurur, küçükler altta sabit satır. */
.about-split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--space-8);
align-items: stretch;
}
.about-gallery { display: grid; grid-template-rows: 1fr auto; gap: var(--space-3); }
.gallery-main {
margin: 0; overflow: hidden;
min-height: 320px; height: 100%;
border: 1px solid var(--line); border-radius: var(--radius-md);
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-2); }
.gallery-thumb {
padding: 0; background: none;
border: 2px solid transparent; border-radius: var(--radius-sm);
overflow: hidden; opacity: 0.65;
transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.gallery-thumb img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; } /* R14: kare (height attr'ı aspect-ratio'yu eziyordu) */
.gallery-thumb:hover { opacity: 1; }
.gallery-thumb.is-active { opacity: 1; border-color: var(--brand); }
.about-copy { min-width: 0; }
/* R14: sağ sütun iki yana yaslı (Türkçe tireleme ile) */
.about-copy p { text-align: justify; hyphens: auto; }
/* Akçelik rozet deseni — GERÇEK değerle ("üç kıtaya yayılan" kaynak metinden);
deneyim yılı rakamı patrondan gelince yalnız içerik değişir */
.gallery-main { position: relative; }
.gallery-badge {
position: absolute; right: var(--space-4); bottom: var(--space-4);
display: grid; justify-items: center; gap: 2px;
padding: var(--space-4) var(--space-5);
background: var(--brand); color: #fff;
border-radius: var(--radius-sm);
box-shadow: var(--shadow-md);
text-align: center;
}
.gallery-badge .num {
font-family: var(--font-display);
font-weight: var(--fw-black);
font-size: 2.2rem; line-height: 1;
}
.gallery-badge .lbl {
font-size: var(--fs-eyebrow);
font-weight: var(--fw-semi);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: rgba(255, 255, 255, 0.88);
line-height: 1.3;
}
.gallery-main > img { cursor: zoom-in; }
.about-copy p { color: var(--ink-soft); }
.about-copy p + p { margin-top: var(--space-4); }
.about-copy p:first-child { margin-top: 0; }
.about-copy strong { color: var(--ink); font-weight: var(--fw-semi); }
/* Cümle içi tipografik vurgu ("üç kıtaya yayılan") — metin birebir korunur */
.text-accent { color: var(--brand); font-weight: var(--fw-semi); }
/* ==========================================================================
ÜRÜN PORTFÖYÜ (R11, Gavia "Hizmetler" kart iskeleti) — 4 sütun:
üstte tam genişlik grafik alanı, altta gövde (etiket-chip → başlık →
künye/açıklama). "Detay" linki YOK (gidecek sayfa yok — ALTIN KURAL).
========================================================================== */
.case-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.case-card {
display: flex; flex-direction: column;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-xs);
transition: transform var(--dur) var(--ease),
box-shadow var(--dur) var(--ease),
border-color var(--dur) var(--ease);
}
.case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand-tint); }
.case-body { display: grid; gap: var(--space-2); justify-items: start; padding: var(--space-4) var(--space-5) var(--space-5); align-content: start; }
/* Kategori etiketi: Gavia'daki ikon-chip rolü — küçük tonlu rozet */
.case-tag {
display: inline-flex; align-items: center;
padding: 0.3rem 0.6rem;
background: var(--brand-wash);
border: 1px solid var(--brand-tint);
border-radius: var(--radius-xs);
font-size: var(--fs-eyebrow);
font-weight: var(--fw-semi);
letter-spacing: var(--tracking-label);
text-transform: uppercase;
color: var(--brand-700);
}
.case-card h3 { font-size: var(--fs-h3); }
.case-content { display: grid; gap: var(--space-3); justify-items: start; }
.spec-label {
font-size: var(--fs-eyebrow);
font-weight: var(--fw-semi);
letter-spacing: var(--tracking-label); /* R4: eyebrow kadar havadar değil */
text-transform: uppercase;
color: var(--ink-muted);
}
/* R17: dört kartta da açıklama SABİT 4 satırlık blok — kısa metin dolgulanır,
uzun liste 4 satıra kırpılır (tam liste title'da; kalıcı karar açık işte) */
.case-desc {
margin-top: var(--space-2);
padding-top: var(--space-3);
border-top: 1px solid var(--line);
max-width: 52ch;
font-size: var(--fs-label);
line-height: 1.6;
color: var(--ink-soft);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
}
/* M7: 4 satırlık dolgu rezervi masaüstündeki 4 sütun eşitliği İÇİNDİR; mobil
şeritte kartlar zaten aynı grid satırında eşitlenir, rezerv yalnız ölü
boşluk bırakıyordu (2 satırlık açıklamada ~50px). */
@media (min-width: 901px) {
.case-desc { min-height: calc(4 * 1.6em + var(--space-3) + 1px); }
}
/* Ürün grafiği (R2-3): elle yazılmış dekoratif inline SVG — fotoğraf yok.
Gerçek ürün fotoğrafı gelirse .case-media içeriği ![]()
ile değişir, kutu aynı. */
/* Üst medya bandı (R12): kenardan kenara fotoğraf — şimdilik tema eşleşmeli
vekil (kaynak sitenin kendi görselleri); gerçek ürün fotoğrafı gelince
yalnız src değişir. */
.case-media {
margin: 0;
aspect-ratio: 16 / 10;
overflow: hidden;
border-bottom: 1px solid var(--line);
}
.case-media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform var(--dur-slow) var(--ease);
}
.case-card:hover .case-media img { transform: scale(1.04); }
/* Tipografi görsel görevi görür: büyük ölçü rakamı */
/* R13: künye değerleri minimal ve tutarlı — kart içi hiyerarşi başlıkta kalır */
.case-figure {
font-family: var(--font-display);
font-stretch: var(--stretch-display);
font-weight: var(--fw-bold);
font-size: clamp(1.35rem, 1.2rem + 0.5vw, 1.6rem);
line-height: 1.1;
letter-spacing: var(--tracking-tight);
color: var(--brand);
}
.case-figure .unit {
font-size: 0.4em;
font-weight: var(--fw-semi);
letter-spacing: var(--tracking-label);
color: var(--ink-muted);
}
/* Rakamsız değerler (marka/tip adı) — gövdeyle aynı ölçek, yalnız renk/ağırlıkla ayrışır */
.case-figure--text { font-size: var(--fs-h4); line-height: 1.3; }
/* ==========================================================================
YATAY ŞERİT DESENİ (.hscroll) — KANONİK
--------------------------------------------------------------------------
Kaynak: Faaliyet Alanları şeridi (.axes-track). Mobil turunda ölçümle
doğrulandı: native overflow + x mandatory snap, dokunmatik swipe'ı ve
momentum'u tarayıcıdan alır, JS gerektirmez (360px'te tek sürüklemede
scrollLeft 0 → 288, tam bir hücre).
.axes-track bu desenin bir varyantıdır (HTML'de class="axes-track hscroll").
Ürün Portföyü ve Kurumsal galerisi masaüstünde GRID kalmak zorunda olduğu
için sınıfı HTML'de taşıyamaz; onlar deseni ≤900px media query'sinde
devralır (dosya sonundaki mobil bloğa bak). Bu bilinçli bir ödünç:
sınıfı HTML'e koyup masaüstünde tek tek geri almak, "masaüstü sıfır fark"
kuralı için gereksiz risk üretirdi.
========================================================================== */
.hscroll {
display: grid; grid-auto-flow: column;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.hscroll::-webkit-scrollbar { display: none; }
.hscroll__item { scroll-snap-align: start; }
/* Konum göstergesi — Faaliyet'in .axes-progress ince çizgisiyle aynı dil.
VARSAYILAN GİZLİ: yalnız ≤900px'te açılır, masaüstüne sıfır etki. */
.hscroll-progress { display: none; height: 2px; background: var(--line); }
.hscroll-progress-bar { height: 100%; width: 0%; background: var(--grad-brand); }
/* ==========================================================================
FAALİYET ALANLARI (R7, Gavia gerçek deseni) — TAM EKRAN sahne:
full-bleed arka plan fotoğrafı (aktif sektöre göre iki katmanlı crossfade),
üstte başlık, altta yatay slider şeridi (scroll-snap x, desil carousel
deseni). Aktiflik TIKLAMAYLA; hover yalnız ipucu. Kart kutusu yok.
========================================================================== */
.axes-stage {
display: flex; flex-direction: column;
padding-top: calc(var(--topbar-h) + var(--header-h) + var(--space-6));
}
/* M3: tam ekran sahne yalnız masaüstünde (bkz. .section--screen notu) */
@media (min-width: 901px) {
.axes-stage { min-height: var(--screen-h); }
}
.axes-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
/* R8-b: kaynaklar 700×800 → tam ekranda 2–2.8× gerilme. Ağır işleme fotoğrafı
dokuya çevirir: blur + düşük doygunluk + hafif kontrast; scale blur'un kenar
sızmasını keser. Crossfade yalnız opacity — filter sabit kalır. */
.axes-bg-layer {
position: absolute; inset: 0;
background-size: cover; background-position: center;
filter: blur(var(--stage-blur)) saturate(0.6) contrast(1.05) brightness(0.9);
opacity: 0;
transition: opacity calc(var(--dur-slow) * 2) var(--ease);
}
.axes-bg-layer.is-visible { opacity: 1; }
.axes-stage::before { /* okunurluk overlay'i — her fotoğrafta metin okunur */
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: var(--grad-stage-overlay);
}
.axes-stage::after { /* ince film grain — piksel yumuşamasını doku olarak satar */
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
background-size: 160px 160px;
opacity: 0.10; /* R20: gerçek 1920px fotoğraflarla grain hafifledi */
mix-blend-mode: overlay;
}
.axes-stage .section-head { margin-bottom: var(--space-6); }
/* R22 okunurluk: başlık bloğunun ARKASINA yerel scrim. `isolation: isolate`
kendi yığınlama bağlamını kurar → z-index:-1 pseudo metnin ALTINDA ama
sahnenin overlay/grain katmanlarının ÜSTÜNDE kalır (onlar sahne bağlamında).
Scrim bloktan taşar (negatif inset) ki harf kenarları scrim sınırına
denk gelmesin; sağ kenar şeffafa gider, fotoğraf orada açık kalır. */
.axes-stage .section-head { position: relative; isolation: isolate; }
.axes-stage .section-head::before {
content: ""; position: absolute; z-index: -1; pointer-events: none;
/* Dikey pay bilerek geniş: eliptik sönümün üst/alt kenarda sıfıra ulaşacak
yeri olsun, metnin hemen dibinde bitmesin. */
top: calc(var(--space-7) * -1);
bottom: calc(var(--space-7) * -1);
left: calc(var(--space-7) * -1);
width: min(var(--stage-textscrim-w), calc(100% + var(--space-7) * 2));
background: var(--grad-stage-textscrim);
}
/* Kontrol satırı: ince ilerleme çizgisi + oklar; şeridi alta iter */
.axes-controls {
display: flex; align-items: center; gap: var(--space-5);
margin-top: auto;
padding-bottom: var(--space-4);
}
.axes-progress { flex: 1; height: 2px; background: rgba(255, 255, 255, 0.18); }
.axes-progress-bar { height: 100%; width: 0%; background: var(--grad-brand); }
.axes-nav { display: flex; gap: var(--space-2); }
.axes-btn {
width: 48px; height: 48px;
display: grid; place-items: center;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.12);
color: #fff; padding: 0;
transition: background-color var(--dur) var(--ease),
border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.axes-btn svg { width: 20px; height: 20px; }
.axes-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.5); }
.axes-btn:disabled { opacity: 0.35; cursor: default; }
.axes-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
/* Şerit: full-bleed; track yatay scroll-snap scroller (desil carousel deseni).
Yatay eksen kendi konteynerinde — sayfanın dikey snap'ine karışmaz. */
.axes-strip { border-top: 1px solid rgba(255, 255, 255, 0.16); }
/* R8: 6 sütun görünür (8 sektörden 2'si taşar; ok TEK sütun ilerletir).
<1400: 4 · <1100: 3 · <900: swipe şeridi
M-slider: davranış .hscroll'a taşındı (yukarı bak); burada yalnız bu
şeride özgü sütun genişliği kalır — hesaplanan değerler birebir aynıdır. */
.axes-track { grid-auto-columns: calc(100% / 6); }
.axis {
scroll-snap-align: start;
position: relative;
display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch;
min-height: clamp(220px, 30svh, 300px);
padding: var(--space-6) var(--space-4) var(--space-5);
text-align: left;
background: transparent;
border: 0; border-left: 1px solid rgba(255, 255, 255, 0.16);
color: #fff;
transition: background-color var(--dur) var(--ease);
}
.axis:first-child { border-left: 0; }
/* R8b: her hücrenin zemini KENDİ sektör fotoğrafı — arka planın aksine blur/grain
YOK (220px hücrede 700×800 fazlasıyla net); bulanık sahne + net sütun farkı
kasıtlı derinlik katmanı. Durum merdiveni: pasif soluk → hover/focus ara →
aktif tam renk. JS, bölüm yaklaşınca data-bg'yi .axis-photo'ya yazar. */
.axis { isolation: isolate; }
.axis-photo {
position: absolute; inset: 0; z-index: -2;
background-size: cover; background-position: center;
opacity: 0;
filter: saturate(0.35) brightness(0.55);
transition: opacity var(--dur-slow) var(--ease), filter var(--dur-slow) var(--ease);
}
.axis-photo.is-loaded { opacity: 1; }
.axis::before { /* alt-yukarı okunurluk gradyanı: ad + açıklama her fotoğrafta okunur */
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: var(--grad-axis-overlay); /* R22: token'a taşındı, hard-code kaldırıldı */
}
.axis:hover .axis-photo,
.axis:focus-visible .axis-photo { filter: saturate(0.7) brightness(0.75); } /* ara kademe */
.axis.is-active .axis-photo { filter: saturate(1) brightness(0.95); } /* tam renk */
.axis::after { /* aktif sütunda bakır çizgi */
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
background: var(--grad-brand);
transform: scaleX(0); transform-origin: left;
transition: transform var(--dur-slow) var(--ease);
}
.axis.is-active::after { transform: scaleX(1); }
.axis:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.axis-title {
font-family: var(--font-display);
font-stretch: var(--stretch-display);
font-weight: var(--fw-bold);
line-height: var(--lh-snug);
color: #fff;
/* 6 sütunda hücre ~220px: h3 ölçeği taşırır — bir kademe altı, wrap serbest */
font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.25rem);
text-wrap: balance;
text-shadow: 0 2px 12px rgba(16, 17, 20, 0.6);
transition: color var(--dur) var(--ease);
}
.axis.is-active .axis-title { color: var(--amber); }
/* Açıklama DOM'da hep var; kapalı sütunda yalnız görsel olarak toplu */
.axis-detail {
display: grid; grid-template-rows: 0fr;
opacity: 0; margin-top: 0;
transition: grid-template-rows var(--dur-slow) var(--ease),
opacity var(--dur-slow) var(--ease),
margin-top var(--dur-slow) var(--ease);
}
.axis-detail p {
overflow: hidden; min-height: 0;
font-size: var(--fs-label);
line-height: 1.5;
color: rgba(255, 255, 255, 0.85);
}
.axis.is-active .axis-detail { grid-template-rows: 1fr; opacity: 1; margin-top: var(--space-3); }
/* ==========================================================================
DEVAM BLOĞU (R2-d, referans deseni) — İletişim'den önce ince köprü;
ayrım hairline'la (keskin), yalnız gerçek anchor linkleri.
========================================================================== */
.next-block { position: relative; background: var(--surface); border-block: 1px solid var(--line); }
.next-inner {
display: flex; align-items: baseline; justify-content: space-between;
gap: var(--space-4) var(--space-6);
flex-wrap: wrap;
padding-block: var(--space-6);
}
.next-label {
font-size: var(--fs-eyebrow);
font-weight: var(--fw-semi);
letter-spacing: var(--tracking-eyebrow);
text-transform: uppercase;
color: var(--ink-muted);
}
.next-links {
display: flex; align-items: baseline; flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
font-size: var(--fs-lead);
font-weight: var(--fw-semi);
}
.next-links a { color: var(--ink); transition: color var(--dur) var(--ease); }
.next-links a:hover { color: var(--brand); }
.next-links .dot { color: var(--line-strong); }
/* ==========================================================================
İLETİŞİM (R6: açık zemin — Faaliyet koyulaşınca alternans yeniden dengelendi)
bilgi kartları + form + harita
========================================================================== */
/* R19: form servisi bağlanana dek form yayında değil — yerine belirgin
"Bize Ulaşın" bloğu (büyük tıklanabilir tel/e-posta/adres). Form stilleri
servis bağlanınca geri açılacak markup için korunur. */
/* R21: tekilleştirme — iletişim bilgileri SADECE burada; ikon + değer
(görsel etiket yok; erişilebilirlik aria-label ile). 3'lü yatay set. */
.reach-block { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.reach-note { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--ink-muted); }
.reach-link {
display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-4) var(--space-5);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-md);
box-shadow: var(--shadow-xs);
transition: border-color var(--dur) var(--ease),
box-shadow var(--dur) var(--ease),
transform var(--dur) var(--ease);
}
.reach-link:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.reach-ico {
flex: none; width: 40px; height: 40px;
display: grid; place-items: center;
border: 1px solid var(--brand);
border-radius: var(--radius-sm);
color: var(--brand);
background: var(--brand-wash);
}
.reach-ico svg { width: 18px; height: 18px; }
.reach-value {
font-family: var(--font-display);
font-weight: var(--fw-bold);
font-size: var(--fs-sm);
color: var(--ink);
line-height: 1.4;
overflow-wrap: anywhere;
}
/* Form — açık zemin: beyaz input, ince kenarlık, focus'ta bakır ring
(koyu zemin varyantı gerekirse --ring-amber hazır) */
.contact-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-4); }
.form-field { display: grid; gap: var(--space-1); align-content: start; }
.form-field--full { grid-column: 1 / -1; }
.form-field label {
font-size: var(--fs-label);
font-weight: var(--fw-semi);
letter-spacing: var(--tracking-label);
color: var(--ink-soft);
}
.input {
width: 100%;
font: inherit; color: var(--ink);
background: var(--surface);
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
padding: 0.8rem 1rem;
transition: border-color var(--dur) var(--ease),
box-shadow var(--dur) var(--ease),
background-color var(--dur) var(--ease);
}
.input:focus {
outline: none;
border-color: var(--brand);
box-shadow: var(--ring-brand);
}
textarea.input { min-height: 88px; resize: vertical; }
/* KVKK onayı (R2-4) — desil .form-check deseni, koyu zemin uyarlaması */
.form-check {
grid-column: 1 / -1;
display: flex; align-items: flex-start; gap: var(--space-3);
font-size: var(--fs-sm);
color: var(--ink-soft);
line-height: 1.5;
}
.form-check input {
flex: none; width: 18px; height: 18px; margin-top: 2px;
accent-color: var(--brand);
}
.form-check a {
color: var(--brand);
text-decoration: underline;
text-underline-offset: 2px;
}
.form-actions { grid-column: 1 / -1; }
/* R18 (onaylı karar): harita ince şerit — İletişim tam ekran eşitliğe girer */
.map-frame {
margin-top: var(--space-5);
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--line);
}
.map-frame iframe { display: block; width: 100%; height: 180px; border: 0; }
/* Faz 3 Z3: Chrome, iframe öğesinde :focus/:focus-visible'ı eşleştirmiyor —
sınıfı main.js yönetir (iframe focus + K1'in kbd-nav klavye sinyali).
Halka yalnız klavye gezinmesinde görünür, fare tıklamasında görünmez. */
.map-frame.kbd-focus { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: var(--radius-lg); }
/* ==========================================================================
FOOTER — antrasit gradient, ortalanmış hiyerarşi (desil deseni)
========================================================================== */
.site-footer {
position: relative;
background: var(--grad-footer);
color: rgba(255, 255, 255, 0.72);
padding-block: var(--space-8) var(--space-6);
text-align: center;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-inner { display: grid; justify-items: center; gap: var(--space-5); }
.footer-brand { display: inline-flex; }
.footer-brand img { width: 96px; height: auto; }
.footer-line { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.6); max-width: 60ch; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); font-size: var(--fs-sm); }
.footer-nav a { color: rgba(255, 255, 255, 0.72); transition: color var(--dur) var(--ease); }
.footer-nav a:hover { color: var(--amber); }
/* Yasal link şeridi (R2-e) — orta-nokta ayraçlı tek satır */
.footer-legal {
display: flex; align-items: baseline; flex-wrap: wrap; justify-content: center;
gap: var(--space-2) var(--space-3);
font-size: var(--fs-label);
}
.footer-legal a { color: rgba(255, 255, 255, 0.55); transition: color var(--dur) var(--ease); }
.footer-legal a:hover { color: var(--amber); }
.footer-legal .dot { color: rgba(255, 255, 255, 0.25); }
.footer-bottom {
margin-top: var(--space-6);
padding-top: var(--space-5);
border-top: 1px solid rgba(255, 255, 255, 0.1);
font-size: var(--fs-label);
color: rgba(255, 255, 255, 0.5);
}
/* ==========================================================================
ALT SAYFALAR (yasal) — koyu başlık bandı + dar okuma sütunu
========================================================================== */
.container--narrow { max-width: var(--container-narrow); }
/* Hero'suz sayfalarda transparan header'ın üstüne bindiği koyu band;
hero ile aynı keskin 3px bakır kesimle biter. */
.page-head {
position: relative;
background-color: var(--brand-deep);
/* R21: fotoğraflı banner — okunurluk overlay token'ı üstte */
background-image: var(--grad-stage-overlay), url("../img/hero/quarry-aerial.webp");
background-size: cover;
background-position: center;
color: #fff;
padding-block: calc(var(--topbar-h) + var(--header-h) + var(--space-7)) var(--space-7);
}
.page-head::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0;
height: 3px; background: var(--grad-brand);
}
.page-title { font-size: var(--fs-h2); letter-spacing: var(--tracking-tight); color: #fff; text-wrap: balance; }
.page-meta { margin-top: var(--space-3); font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.55); }
.legal-body { color: var(--ink-soft); }
.legal-body h2 {
font-size: var(--fs-h3);
margin-top: var(--space-7);
color: var(--ink);
}
.legal-body p { margin-top: var(--space-3); }
.legal-body ul {
list-style: disc;
padding-left: 1.4rem;
margin-top: var(--space-3);
display: grid; gap: var(--space-2);
}
.legal-body strong { color: var(--ink); }
.legal-body a { color: var(--brand); font-weight: var(--fw-semi); text-decoration: underline; text-underline-offset: 2px; }
/* ==========================================================================
LIGHTBOX (R14) — galeri görseline tıklayınca tam ekran açılır;
ok/Escape/arka plan ile gezinme-kapanma.