/* ============================================================
HERKİM GROUP — Kurumsal Tasarım Sistemi
Estetik: Rafine endüstriyel / laboratuvar-editoryal
Palet: Crimson (#A31C3C) + mürekkep + sıcak kâğıt
Tipografi: Archivo (display) / IBM Plex Sans (metin) / IBM Plex Mono (teknik)
------------------------------------------------------------
İÇİNDEKİLER
Dosya uzun; aradığınız bölüme gitmek için başlık metnini aratın.
Sıra, dosyadaki gerçek bölüm yorumlarının sırasıdır.
00 Ölçek belirteçleri (punto + boşluk) ← :root bloğunun içinde
01 Reset
02 Tipografi yardımcıları
03 Butonlar
04 Üst bilgi bandı (döviz + iletişim)
05 Site başlığı
06 Mobil menü
07 Sayfa kahramanı (hero)
08 Kayan bant (marquee)
09 Tanıtım videosu
10 Bölüm iskeleti
11 Sektör kartları
12 Ürün "element" kartları
13 Çalışma prensipleri
14 İstatistik bandı (koyu)
15 Kurumsal önizleme / zaman çizelgesi
16 Doküman merkezi kartları
17 Duyuru kartları
18 Motto bandı
19 İletişim CTA
20 Form
21 Alt bilgi
22 Alt sayfa başlığı
23 Ürün tablosu
24 Teklif sepeti çekmecesi
25 Arama katmanı
26 SSS akordeon
27 Sertifika kartları
28 Marka kiti
29 Yüzen ögeler
30 Bildirim (toast)
31 Çerez bildirimi
32 Müşteri girişi & sipariş sepeti
33 Görünürlük animasyonları
34 Duyarlı düzen
35 KURUMSAL RAFİNERİ KATMANI ← geçersiz kılma katmanı
36 Siparişlerim (ana sitede müşteri takibi)
37 Rafineri 2 (distribütör emsalleri)
UYARI: 35 ve 37 numaralı bloklar, yukarıdaki temel kuralların bir
kısmını bilinçli olarak geçersiz kılar. Bir kuralı düzenlediğinizde
ekranda değişiklik göremiyorsanız önce o iki bloğa bakın; hangi
seçicileri ezdikleri 35 numaralı bloğun başındaki listede yazılıdır.
============================================================ */
:root {
--crimson: #A31C3C;
--crimson-deep: #7C102E;
--crimson-hot: #C42449;
--crimson-soft: #F6E3E8;
--ink: #1B1216;
--ink-2: #43333A;
/* WCAG AA: eski #7A6A70, --paper-2 zemininde 4.34:1 ile eşiğin altında
kalıyordu. 5 birim koyulaştırıldı; artık --paper-2 üzerinde 4.67:1,
--paper üzerinde 5.10:1, beyaz üzerinde 5.48:1. */
--ink-3: #75656B;
/* Gövde metni mürekkebi: saf --ink yerine yumuşatılmış ton. Değer
rafineri katmanında sabit hex olarak duruyordu, buraya taşındı. */
--ink-body: #372E33;
--paper: #FAF6F1;
--paper-2: #F2ECE3;
--paper-3: #E9E1D5;
--white: #FFFFFF;
--line: rgba(27, 18, 22, 0.16);
--line-soft: rgba(27, 18, 22, 0.09);
--ok: #2E6B4F;
/* Saydam tonlar: dosyada 40+ yerde elle yazılan rgba değerleri aslında
bu iki rengin saydam hâlidir —
rgba(250, 246, 241, a) = --paper (koyu zemin üstünde açık metin)
rgba( 27, 18, 22, a) = --ink (açık zemin üstünde çizgi/gölge)
Değişken içine alınmadılar; çünkü rgb kanallarını var() ile ayrıştıran
modern söz dizimi (relative color) kurumsal sitenin desteklemesi
gereken tarayıcı yelpazesinde hâlâ güvenli değil. Yeni bir saydam ton
yazarken bu iki üçlüyü kullanın, gözle yakın başka bir gri seçmeyin. */
--font-display: "Archivo", "Arial Black", sans-serif;
--font-body: "IBM Plex Sans", "Segoe UI", sans-serif;
--font-mono: "IBM Plex Mono", "Courier New", monospace;
--wrap: 1240px;
--gutter: clamp(20px, 4vw, 48px);
--radius: 3px;
/* --shadow-offset / --shadow-offset-sm: 35 numaralı rafineri katmanında
yeniden tanımlanır (sert ofset gölge yerine yumuşak derinlik).
Buradaki eski sert değerler tamamen ezildiği için kaldırıldı. */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
/* ---------- Ölçek belirteçleri (punto + boşluk) ---------- */
/* NEDEN VAR: ölçüm yapıldığında tek bir sayfada 26 ayrı punto değeri
çıktı; yalnız 10px ile 16px arasında birbirinden ayırt edilemeyen
on iki değer vardı (10 / 10.5 / 11 / 11.5 / 12 / 12.5 / 13 / 13.5 /
14 / 14.5 / 15 / 15.5) ve
gövde metni yedi farklı boyda
yazılmıştı. Bu kadar çok basamak bir hiyerarşi kurmaz, aksine okuma
sırasını yok eder. Aşağıdaki 9 punto + 6 boşluk basamağı o dağınık
listenin damıtılmış hâlidir.
PUNTO BASAMAKLARI — hangisi nerede:
--fs-micro 11px Yalnız mono mikro etiket: rozet, çip, sayaç,
yan etiket, tablo doküman düğmesi. Ölçeğin
TABANI; 11px'in altına inen yeni bir metin
boyutu yazılmaz.
--fs-label 12px Mono etiket ve künye: .kicker, tablo sütun
başlığı, form etiketi, kırıntı menü, alt bilgi
başlığı, zaman çizelgesi yılı, kart künyesi.
--fs-small 14px Sayfa metni OLMAYAN yoğun arayüz yazısı: menü
ve alt bilgi bağlantıları, tablo hücresi,
.btn--sm ve YÜZEN yüzeylerdeki (çekmece, kip
penceresi, bildirim, çerez kutusu, açılır kutu)
metin. Bu bilinçli bir kuraldır: yüzen yüzey
sayfa değil arayüzdür, sayfa gövdesiyle aynı
puntoyu almaz.
--fs-body 16px Sayfa içeriğindeki BÜTÜN akan metin. body ile
aynı değer, yani varsayılan paragraf kımıldamaz;
kart paragrafları bu değere YÜKSELİR.
--fs-lead ~19px Başlığın altındaki giriş paragrafı.
--fs-h4 18px Kart ve panel başlığı (sektör / doküman /
sertifika / müşteri kartı, zaman çizelgesi
maddesi, SSS sorusu).
--fs-h3 ~24px Ara başlık ve katman başlığı (h3.display,
.principle h3, çekmece/giriş başlıkları).
--fs-h2 ~40px Bölüm başlığı. DEĞER DEĞİŞMEDİ; h2.display'in
zaten hesapladığı clamp aynen taşındı.
--fs-h1 ~57px Sayfa başlığı. DEĞER DEĞİŞMEDİ.
BOŞLUK BASAMAKLARI — bölüm ARASI ritim (.section) zaten tutarlıydı
ve buraya dâhil DEĞİLDİR; bunlar bölüm İÇİ boşluklardır:
--space-2xs 4px Etiket ile hemen altındaki değer.
--space-xs 8px Kart içi dar aralık, liste satırı iç boşluğu.
--space-sm 16px 1. ARALIK: kicker → başlık, ikon → başlık.
--space-md 24px 2. ARALIK: başlık → giriş paragrafı.
--space-lg 32px 3. ARALIK: paragraf → sonraki blok (kart ızgarası,
madde listesi, CTA satırı, filtre çipleri).
--space-head 4. ARALIK: .sec-head → bölüm içeriği. DEĞER
DEĞİŞMEDİ, yalnız belirtece alındı.
KURAL — YENİ TEK SEFERLİK px DEĞERİ YAZMAYIN. Bir metne boyut
verirken yukarıdaki dokuz basamaktan birini seçin; hiçbiri
uymuyorsa ihtiyaç muhtemelen yanlıştır, önce en yakın basamağı
deneyin. Aynısı boşluk için de geçerli. Ölçek dışında bilinçli
bırakılan tek seferlik değerler vardır (.hero-watermark, .sec-no,
.ec-formula, .motto-band blockquote, .brand-name, sabit kutu
içindeki ikon/glif ölçüleri); bunlar okunacak metin değil grafik
ögedir ve ilgili kuralların yanında ayrıca not düşülmüştür.
Kutu iç boşlukları (card padding) bilerek belirtece alınmadı: onlar
okuma ritmi değil, ince çizgi + ferah iç boşluk görsel karakterinin
parçasıdır. */
--fs-micro: 11px;
--fs-label: 12px;
--fs-small: 14px;
--fs-body: 16px;
--fs-lead: clamp(1.05rem, 1.4vw, 1.2rem);
--fs-h4: 18px;
--fs-h3: clamp(1.3rem, 1.6vw, 1.5rem);
--fs-h2: clamp(1.7rem, 3.4vw, 2.5rem);
--fs-h1: clamp(2.3rem, 4.6vw, 3.55rem);
--space-2xs: 4px;
--space-xs: 8px;
--space-sm: 16px;
--space-md: 24px;
--space-lg: 32px;
--space-head: clamp(34px, 5vw, 56px);
}
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.65;
color: var(--ink-body);
background: var(--paper);
overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }
::selection { background: var(--crimson); color: var(--paper); }
:focus-visible { outline: 2px solid var(--crimson); outline-offset: 3px; }
/* İnce doku: kâğıt greni */
body::before {
content: "";
position: fixed; inset: 0;
pointer-events: none; z-index: 2000;
/* opacity: 37 numaralı "Rafineri 2" bloğunda 0.028'e düşürülür;
buradaki eski 0.05 değeri tamamen ezildiği için kaldırıldı. */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
/* Kaydırma çubuğu */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb { background: var(--ink-3); border: 3px solid var(--paper-2); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--crimson); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
/* İçeriğe atlama bağlantısı — 11 sayfanın da
içindeki ilk odaklanabilir
ögesi. Klavye kullanıcısı ilk TAB'da başlıktaki 15+ bağlantıyı atlayıp doğrudan
ögesine geçer. Ekranda YALNIZCA odaklanınca görünür: gizlemek
için display:none KULLANILMAZ, çünkü o zaman odak sırasından da çıkar. */
.skip-link {
position: absolute; top: -100px; left: var(--gutter); z-index: 200;
background: var(--crimson); color: var(--white);
padding: 10px 18px; border-radius: 2px;
font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.04em;
transition: top 0.18s var(--ease-out);
}
.skip-link:focus { top: 10px; }
/* ---------- Tipografi yardımcıları ---------- */
/* NOKTALI İ UYARISI — text-transform: uppercase hakkında.
Bu dosyadaki büyütme kuralları (.kicker, .hstat span, .stat-cell span,
.field label, .footer h4, .page-hero .crumbs, .ci-row b ...) Türkçe
metnin üstüne biniyor. Tarayıcılar text-transform'u ile
uyguladığı için lang="tr" iken "İletişim" doğru şekilde "İLETİŞİM"
olur; ölçüldü ve doğrulandı. Yani bu kuralların güvenliği TAMAMEN
lang="tr" özniteliğine bağlı — i18n.js dil değiştirirken
document.documentElement.lang'i güncellemeye devam etmeli.
YENİ kurala uppercase EKLEMEYİN; büyük harf gerekiyorsa metni
kaynakta (HTML/i18n) büyük yazın. */
.kicker {
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--crimson);
display: inline-flex;
align-items: center;
gap: 12px;
}
.kicker::before { content: ""; width: 34px; height: 2px; background: var(--crimson); }
/* font-weight / font-stretch: 35 numaralı katmanda ince kesime çekilir
(560 / %104). h1 ve h2 punto skalası da 37 numaralı blokta yeniden
yazılır. Buradaki eski değerler tamamen ezildiği için kaldırıldı;
yalnız h3 hâlâ burada belirlenir. */
.display {
font-family: var(--font-display);
line-height: 1.02;
letter-spacing: -0.015em;
text-wrap: balance;
}
h3.display { font-size: var(--fs-h3); }
.lead { font-size: var(--fs-lead); color: var(--ink-2); max-width: 62ch; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--ink-3); }
.accent { color: var(--crimson); }
/* ---------- Butonlar ---------- */
/* DİKKAT: buton görünümünün büyük kısmı 35 ve 37 numaralı katmanlarda
son hâlini alır. Oradan gelenler: kenarlık kalınlığı/rengi, yazı
ağırlığı, harf aralığı, gölge ve hover/active davranışı. Buradaki
`border` kısayolu yalnız `solid` stilini yaşatır — kalınlık ve renk
35'te ezilir; kısayolu bozmamak için olduğu gibi bırakıldı. */
.btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 26px;
font-family: var(--font-display);
font-size: var(--fs-body); font-stretch: 105%;
border: 2px solid var(--ink);
border-radius: var(--radius);
background: var(--paper);
color: var(--ink);
transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), background 0.18s, color 0.18s;
white-space: nowrap;
}
/* .btn:hover ve .btn:active kuralları 35/37 numaralı katmanlarda tümüyle
yeniden yazıldığı için buradaki eski "zıplayan" sürümleri kaldırıldı. */
.btn--primary { background: var(--crimson); border-color: var(--crimson-deep); color: var(--white); }
.btn--primary:hover { background: var(--crimson-hot); }
.btn--dark { background: var(--ink); color: var(--paper); }
.btn--ghost { box-shadow: none; border-color: var(--line); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); box-shadow: var(--shadow-offset-sm); }
.btn--sm { padding: 9px 16px; font-size: var(--fs-small); }
.btn .arr { transition: transform 0.18s var(--ease-out); }
.btn:hover .arr { transform: translateX(4px); }
/* ---------- Üst bilgi bandı (döviz + iletişim) ---------- */
.topbar {
background: var(--ink);
color: var(--paper);
font-family: var(--font-mono);
font-size: var(--fs-label);
position: relative;
z-index: 60;
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 40px; }
.tb-rates { display: flex; align-items: center; gap: 20px; overflow: hidden; white-space: nowrap; }
.tb-rates .rate { display: inline-flex; gap: 8px; align-items: baseline; }
.tb-rates .rate b { color: var(--crimson-hot); font-weight: 500; }
.tb-rates .rate .up { color: #6FBF92; }
.tb-rates .rate .down { color: #E4738D; }
/* WCAG AA: 0.45 saydamlık --ink zemininde 4.28:1 veriyordu (11px metin
için eşik 4.5:1). 0.48'e çıkarıldı → 4.70:1. */
.tb-note { color: rgba(250,246,241,0.48); font-size: var(--fs-micro); }
.tb-links { display: flex; gap: 18px; align-items: center; white-space: nowrap; }
.tb-links a:hover { color: var(--crimson-hot); }
.tb-lang { display: inline-flex; border: 1px solid rgba(250,246,241,0.25); border-radius: 2px; overflow: hidden; }
.tb-lang button { padding: 3px 9px; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.06em; color: rgba(250,246,241,0.55); border-left: 1px solid rgba(250,246,241,0.16); transition: background 0.15s, color 0.15s; }
.tb-lang button:first-child { border-left: 0; }
.tb-lang button:hover { color: var(--paper); }
.tb-lang button.on { background: var(--crimson); color: var(--white); }
.tb-group { color: rgba(250,246,241,0.55); }
.tb-group:hover { color: var(--crimson-hot); }
/* ---------- Site başlığı ---------- */
.site-header {
position: sticky; top: 0; z-index: 50;
background: rgba(250, 246, 241, 0.92);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
transition: box-shadow 0.25s;
}
.site-header.scrolled { box-shadow: 0 6px 24px rgba(27, 18, 22, 0.1); }
.site-header .wrap { display: flex; align-items: center; gap: 28px; min-height: 78px; }
.brand { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.brand-mark { width: 52px; height: 52px; transition: transform 0.4s var(--ease-out); }
.brand:hover .brand-mark { transform: rotate(-8deg); }
/* KELİME MARKASI — punto ölçeğinin DIŞINDA, bilinçli olarak. Aşağıdaki
21px / 10.5px ve 0.42em harf aralığı, işaretin genişliğine ve 640px'te
markayı gizleyen kurala göre ayarlanmıştır; bir logo kilidi metin
okuma ölçeğine bağlanmaz. Aynısı portal.css'teki .sb .brand-name b
için de geçerlidir. */
.brand-name { line-height: 1.05; }
.brand-name b {
display: block;
font-family: var(--font-display); font-weight: 800; font-stretch: 115%;
font-size: 21px; letter-spacing: 0.03em; color: var(--crimson);
}
.brand-name span {
display: block;
font-family: var(--font-mono); font-size: 10.5px;
letter-spacing: 0.42em; color: var(--ink-2); text-transform: uppercase;
}
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav > li { position: relative; }
.nav > li > a {
display: inline-flex; align-items: center; gap: 6px;
padding: 10px 13px;
font-weight: 600; font-size: var(--fs-small);
border-radius: var(--radius);
transition: color 0.15s, background 0.15s;
}
.nav > li > a:hover, .nav > li > a.active { color: var(--crimson); background: var(--crimson-soft); }
.nav > li > a.active { position: relative; }
.nav .caret { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.dropdown {
position: absolute; top: calc(100% + 10px); left: 0;
min-width: 250px;
background: var(--white);
border: 2px solid var(--ink);
border-radius: var(--radius);
box-shadow: var(--shadow-offset);
padding: 8px;
opacity: 0; visibility: hidden; transform: translateY(8px);
transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}
.nav > li:hover .dropdown, .nav > li:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 12px; font-size: var(--fs-small); font-weight: 500;
border-radius: 2px;
}
.dropdown a:hover { background: var(--crimson); color: var(--white); }
.dropdown a .mono { font-size: var(--fs-micro); color: var(--ink-3); }
.dropdown a:hover .mono { color: rgba(255,255,255,0.7); }
.dropdown hr { border: 0; border-top: 1px solid var(--line-soft); margin: 6px 4px; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn {
position: relative;
display: grid; place-items: center;
width: 42px; height: 42px;
border: 1.5px solid var(--line);
border-radius: var(--radius);
transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.icon-btn:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.icon-btn .count {
position: absolute; top: -7px; right: -7px;
min-width: 19px; height: 19px; padding: 0 5px;
display: grid; place-items: center;
background: var(--crimson); color: var(--white);
font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 600;
border-radius: 99px;
}
.burger { display: none; }
/* ---------- Mobil menü ---------- */
/* Kapalıyken yalnız translateX ile kenara itmek yetmiyordu: panel hâlâ
"visible" sayıldığı için klavye sekmesi görünmez bağlantıların içinde
dolaşıyor, ekran okuyucu da menüyü iki kez okuyordu. .search-overlay ve
.drawer-overlay ile aynı kalıp uygulandı; visibility geçişi süreyi
paylaşır, böylece panel kayarak çıkarken görünür kalır. */
.mobile-nav {
position: fixed; inset: 0; z-index: 90;
background: var(--ink); color: var(--paper);
padding: 90px var(--gutter) 40px;
transform: translateX(100%);
visibility: hidden;
transition: transform 0.35s var(--ease-out), visibility 0.35s;
overflow-y: auto;
}
.mobile-nav.open { transform: translateX(0); visibility: visible; }
/* 24px punto ölçek DIŞINDA bilinçli bir tek seferlik değerdir: mobil menü
bağlantıları okuma sırası için değil PARMAK için boyutlandırılmıştır ve
bu panel masaüstü ölçeğiyle asla aynı ekranda bulunmaz. --fs-h3'e
çekmeyin, dokunma hedefi küçülür. */
.mobile-nav a { display: block; padding: 14px 0; font-family: var(--font-display); font-weight: 700; font-size: 24px; border-bottom: 1px solid rgba(250,246,241,0.12); }
.mobile-nav a:hover { color: var(--crimson-hot); }
.mobile-nav .sub { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 500; padding: 10px 0 10px 18px; color: rgba(250,246,241,0.75); }
.mobile-nav .mn-close { position: absolute; top: 22px; right: var(--gutter); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.15em; color: var(--crimson-hot); }
/* ---------- Sayfa kahramanı (hero) ---------- */
.hero {
position: relative;
padding: clamp(56px, 9vw, 110px) 0 0;
overflow: hidden;
}
.hero-grid {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: clamp(28px, 5vw, 72px);
align-items: center;
}
/* 22px → --space-sm (16px): kicker→başlık aralığı artık .sec-head ile
birebir aynı. Hero başlığı 6px yukarı gelir, bu bilinçlidir. */
.hero .kicker { margin-bottom: var(--space-sm); }
.hero h1 em { font-style: normal; color: var(--crimson); position: relative; }
.hero h1 em::after {
content: ""; position: absolute; left: 0; bottom: 4px;
width: 100%; height: 10px;
background: var(--crimson-soft); z-index: -1;
}
.hero .lead { margin: var(--space-md) 0 var(--space-lg); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; }
.hero-visual { position: relative; min-height: 380px; }
.hero-visual svg { width: 100%; height: auto; }
.hero-watermark {
position: absolute; right: -3%; top: 4%;
font-family: var(--font-display); font-weight: 800; font-stretch: 120%;
/* Punto ölçeği DIŞINDA bilinçli bir tek seferlik değer: bu bir grafik
ögedir (içi boş kontur, pointer-events:none, user-select:none),
okunacak metin değil. --fs-* basamağına çekmeyin. */
font-size: clamp(120px, 22vw, 300px);
color: transparent;
/* -webkit-text-stroke: 35 numaralı katmanda 0.07 saydamlığa iner;
buradaki eski 0.12 değeri tamamen ezildiği için kaldırıldı. */
letter-spacing: -0.02em;
pointer-events: none; user-select: none;
line-height: 1;
}
.hero-strip {
margin-top: clamp(48px, 7vw, 84px);
border-top: 2px solid var(--ink);
border-bottom: 2px solid var(--ink);
background: var(--white);
}
.hero-strip .wrap {
display: grid; grid-template-columns: repeat(4, 1fr);
}
.hstat { padding: 26px 22px; border-left: 1px solid var(--line); }
.hstat:first-child { border-left: 0; }
.hstat b {
display: block;
font-family: var(--font-display); font-weight: 800; font-stretch: 110%;
font-size: clamp(1.7rem, 3.4vw, 2.6rem);
color: var(--crimson); line-height: 1;
}
/* ">" gerekçesi için .stat-cell > span kuralındaki nota bakın (aynı tuzak). */
.hstat > span { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
/* ---------- Kayan bant (marquee) ---------- */
.marquee {
background: var(--crimson);
color: var(--paper);
overflow: hidden;
padding: 13px 0;
border-bottom: 2px solid var(--crimson-deep);
}
.marquee-track {
display: flex; gap: 48px;
white-space: nowrap;
width: max-content;
animation: marquee 36s linear infinite;
font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.14em; text-transform: uppercase;
}
.marquee-track span { display: inline-flex; align-items: center; gap: 48px; }
.marquee-track .sep { color: rgba(250,246,241,0.55); }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }
/* ---------- Tanıtım videosu ---------- */
.video-frame { max-width: 920px; margin: 0 auto; border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-offset); overflow: hidden; background: var(--ink); }
.yt-facade { display: block; width: 100%; aspect-ratio: 16 / 9; background-size: cover; background-position: center; position: relative; cursor: pointer; border: 0; padding: 0; }
.yt-facade::after { content: ""; position: absolute; inset: 0; background: rgba(27, 18, 22, 0.30); transition: background 0.25s; }
.yt-facade:hover::after { background: rgba(27, 18, 22, 0.12); }
.yt-play { position: absolute; inset: 0; margin: auto; width: 92px; height: 64px; display: grid; place-items: center; z-index: 1; transition: transform 0.2s var(--ease-out); }
.yt-facade:hover .yt-play { transform: scale(1.09); }
.yt-play svg { width: 92px; height: 64px; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45)); }
.video-frame iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
/* ---------- Bölüm iskeleti ---------- */
.section { position: relative; padding: clamp(64px, 9vw, 120px) 0; }
.section--tint { background: var(--paper-2); border-block: 1px solid var(--line-soft); }
.section--dark { background: var(--ink); color: var(--paper); }
.section--crimson { background: var(--crimson); color: var(--white); }
/* flex-wrap: başlık + yandaki metin/CTA dar ekranda tek satıra sığmıyor,
sarma olmadan sağdaki öge ekranın dışına taşıyordu. Satır arası boşluk
sütun boşluğundan küçük tutuldu (18px / 28px), alt alta düşünce
aradaki boşluk gereksiz büyümesin. */
/* .section iç boşluğu (bölümler ARASI ritim) ölçüldü, tutarlıydı ve
bilerek belirtece alınmadı. Aşağıdaki --space-head yalnız bölüm İÇİ
ilk aralıktır ve değeri birebir eskisiyle aynıdır. */
/* BÖLÜM BAŞLIĞI DAİMA TEK SÜTUNDUR: önce kicker, sonra başlık, ALTINDA açıklama.
ÖNCEDEN yatay bir flex satırıydı (justify-content: space-between +
align-items: flex-end): başlık solda, açıklama paragrafı sağda duruyordu.
Başlık kısa ("Biz kimiz?") ve açıklama uzun olduğunda ikisi farklı yükseklikte
hizalanıyor, aralarında geniş bir boşluk kalıyor ve okuma sırası bozuluyordu.
KURAL: içerik ve görseller HER ZAMAN başlığın altında akar; başlığın YANINA
ikinci bir sütun koymayın. */
.sec-head { margin-bottom: var(--space-head); }
.sec-head .display { margin-top: var(--space-sm); }
/* Başlık bloğundan SONRA gelen her doğrudan çocuk aynı aralığı alır. Kural
ögeye değil KONUMA bağlıdır; çünkü bu blok kimi bölümde