/* Master Epoksi bileşen katmanı.
Kaynak: yeniUI/_ds/.../_ds_bundle.js içindeki React bileşenleri.
Ham hex ve ham px yok — her değer tokenlardan gelir. */
/* Grid sütunu varsayılan olarak içeriğinin min-content'inin altına inemiyor
(min-width:auto) ve dar ekranda kapsayıcıyı taşırıyor. Fransızca/Almanca
uzun etiketlerde 320px'te çıkıyordu; min-width:0 sütunun daralmasına izin
veriyor, metin de zaten sarıyor. */
.facts__grid > *,
.cta-band__inner > *{min-width:0}
/* Hero'nun zemin bandı. Hem hero hem rakam şeridi okuyor — şerit anasayfada
bandın üstüne biniyor (.facts--on-floor) ve o kural hero'nun dışında, o
yüzden değişken .hero'da değil kökte duruyor. */
:root{--zemin:180px}
@media (max-width:767px){
:root{--zemin:120px}
}
/* Almanca'da tek kelime 30 karakteri buluyor ("Arbeitsschutzmanagementsysteme")
ve dar ekranda kutusunu taşırıp sayfayı yana kaydırıyordu. break-word taşmayı
keser; tireleme yalnız Almanca'da açık, tarayıcı hecede kırsın diye. Öteki
dillerde satır sonları olduğu gibi kalıyor. */
body{overflow-wrap:break-word}
:lang(de){-webkit-hyphens:auto;hyphens:auto}
/* --- Container --- */
.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter)}
.container--wide{max-width:var(--container-wide)}
.container--text{max-width:var(--container-text)}
.container--full{max-width:100%;padding-inline:0}
@media (max-width:767px){
.container{padding-inline:var(--gutter-mobile)}
}
/* --- Section --- */
.section{position:relative;padding-block:var(--section-y)}
.section--tight{padding-block:var(--section-y-tight)}
.section--loose{padding-block:var(--space-17)}
.section--flush{padding-block:0}
/* Bir üstteki bölümün devamı: iki blok arasında ikinci bir üst pay olmasın */
.section--flush-top{padding-top:0}
.section--sunken{background:var(--surface-sunken);color:var(--text-body)}
.section--brand{background:var(--surface-brand);color:var(--text-on-brand)}
.section--dark{background:var(--surface-dark);color:var(--text-on-dark)}
.section > .container{position:relative}
/* Markanın tek dokusu: 20px nokta ızgarası. Paragraf arkasında kullanılmaz. */
.section__pattern{position:absolute;inset:0;pointer-events:none;
background-image:radial-gradient(currentColor 1.5px,transparent 1.5px);
background-size:20px 20px;opacity:.08}
@media (max-width:767px){
.section{padding-block:var(--section-y-mobile)}
.section--tight{padding-block:var(--section-y-mobile)}
}
/* --- Button --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
font-family:var(--font-body);text-decoration:none;
border:var(--border-w) solid transparent;border-radius:var(--radius-none);
cursor:pointer;transition:var(--transition-control);white-space:nowrap;max-width:100%}
.btn--sm{font-size:var(--fs-small);line-height:var(--lh-small);font-weight:var(--fw-semibold);
padding:12px 20px;min-height:var(--control-h-sm)}
.btn--md{font-size:var(--fs-h5);line-height:var(--lh-h5);font-weight:var(--fw-bold);
padding:16px 28px;min-height:var(--control-h-md)}
.btn--lg{font-size:var(--fs-h5);line-height:var(--lh-h5);font-weight:var(--fw-bold);
padding:27px 32px 24px;min-height:var(--control-h-lg)}
.btn--primary{background:var(--brand);color:var(--text-on-brand)}
.btn--primary:hover{background:var(--ink-800);color:var(--white)}
.btn--dark{background:var(--ink-800);color:var(--white)}
.btn--dark:hover{background:var(--brand);color:var(--white)}
.btn--outline{background:transparent;color:var(--brand);border-color:var(--brand)}
.btn--outline:hover{background:var(--brand);color:var(--white);border-color:var(--brand)}
.btn--on-dark{background:var(--white);color:var(--brand-deep)}
.btn--on-dark:hover{background:var(--blue-100);color:var(--brand-deep)}
.btn--ghost{background:transparent;color:var(--brand);padding:0;min-height:0}
.btn--ghost:hover{background:transparent;color:var(--ink-800)}
.btn--block{width:100%;white-space:normal}
.btn[disabled],.btn[aria-disabled="true"]{background:var(--ink-200);color:var(--ink-500);
border-color:transparent;cursor:not-allowed}
/* İkon metnin solunda; sona alınırsa yön çevrilir. */
.btn__icon{display:inline-flex;font-size:.9em}
.btn--icon-end{flex-direction:row-reverse}
/* --- Site header --- */
.site-header{position:sticky;top:0;z-index:50;background:var(--surface-page);
border-bottom:var(--border-w) solid var(--border-hairline)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;
gap:var(--space-9);padding-block:var(--space-6)}
.site-header__logo{flex:none;display:block}
.site-header__logo img{height:46px;width:auto}
.site-header__right{display:flex;align-items:center;gap:var(--space-9);margin-left:auto}
.site-header__phone{display:inline-flex;align-items:center;gap:var(--space-3);
font-family:var(--font-body);font-size:var(--fs-small);font-weight:var(--fw-bold);
color:var(--text-body);white-space:nowrap}
.site-header__phone:hover{color:var(--brand)}
.site-header__phone i{font-size:13px;color:var(--brand)}
.site-header__toggle{display:none;align-items:center;justify-content:center;
width:var(--tap-min);height:var(--tap-min);background:none;
border:var(--border-w) solid var(--border-default);color:var(--text-body);
cursor:pointer;transition:var(--transition-control)}
.site-header__toggle:hover{border-color:var(--brand);color:var(--brand)}
.site-header__toggle i{font-size:18px}
/* --- NavMenu --- */
.nav{display:flex;align-items:center;gap:var(--space-9);list-style:none;margin:0;padding:0}
.nav__item{position:relative;margin:0}
.nav__link{display:inline-flex;align-items:center;gap:var(--space-2);
font-family:var(--font-body);font-size:var(--fs-small);font-weight:var(--fw-semibold);
line-height:var(--lh-small);color:var(--text-body);padding-block:var(--space-2);
/* EN/RU'da "О нас", "About Us" gibi iki kelimelik etiketler kırılıyordu */
white-space:nowrap;
border-bottom:var(--border-w-thick) solid transparent;transition:var(--transition-control)}
.nav__link:hover,.nav__item.is-active > .nav__link{color:var(--brand);border-bottom-color:var(--brand)}
.nav__link i{font-size:11px}
/* Çözümler alt menüsü: her kategori kendi sütunu. Tek sütunda 13 sistem
1000px'i aşıp ekrandan taşıyordu. */
/* Kapalıyken display:none — visibility:hidden bıraksaydık 880px'lik panel
layout'ta kalıp sayfayı yatay taşırıyordu (eski 280px'lik menüde fark
edilmiyordu). Yan etkisi: açılış geçişi anlık, ama tasarım sistemi zaten
abartılı hareket istemiyor. */
.nav__mega{display:none;position:absolute;top:100%;left:0;gap:var(--space-9);
max-width:calc(100vw - var(--gutter) * 2);
padding:var(--space-8) var(--space-9);background:var(--white);
box-shadow:var(--shadow-lg);border-top:var(--rule-accent-w) solid var(--brand)}
.nav__item:hover .nav__mega,.nav__item:focus-within .nav__mega{display:flex}
/* Sütunlar arasına ince ayraç: üç kategori tek düzlemde eriyordu */
.nav__mega-col{min-width:240px;padding-right:var(--space-9)}
.nav__mega-col + .nav__mega-col{padding-left:var(--space-9);
border-left:var(--border-w) solid var(--border-hairline)}
.nav__mega-col:last-child{padding-right:0}
.nav__mega-title{display:block;padding-bottom:var(--space-4);
border-bottom:var(--border-w) solid var(--border-hairline);
font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow);
text-transform:uppercase;color:var(--text-muted);transition:var(--transition-control)}
.nav__mega-title{color:var(--brand-deep)}
.nav__mega-title:hover{color:var(--brand)}
.nav__mega-title i{margin-left:var(--space-2);font-size:9px}
.nav__mega-note{margin:var(--space-4) 0 0;max-width:240px;
font-size:var(--fs-micro);line-height:var(--lh-small);color:var(--text-faint)}
.nav__mega-list{margin:var(--space-3) 0 0;padding:0;list-style:none}
.nav__mega-list li{margin:0}
.nav__mega-list a{display:block;padding:var(--space-3) var(--space-4);
margin-inline:calc(var(--space-4) * -1);font-size:var(--fs-small);
color:var(--text-body);transition:var(--transition-control)}
.nav__mega-list a:hover{background:var(--blue-50);color:var(--brand-deep)}
.nav-mobile a i{margin-left:var(--space-2);font-size:11px;color:var(--text-faint)}
/* Dil kutusundaki bayrak. Emoji bayrak yok (tasarım sistemi emojiyi kapatıyor),
assets/img/flags/ altında SVG. 3:2 oranında, köşesiz — ince çerçeve düz
beyaz alanlı bayrakların (RU, FR) zeminde kaybolmasını engelliyor. */
.lang-flag{flex:none;width:20px;height:14px;object-fit:cover;
border:var(--border-w) solid var(--border-hairline)}
/* --- WhatsApp --- */
/* Yeşil WhatsApp'ın kendi marka rengi, bizim bir tasarım kararımız değil —
token setinde karşılığı yok, o yüzden burada tek yerde tanımlı.
tokens/ klasörü design system'den birebir kopya, oraya eklemiyoruz. */
.wa-link,.wa-float,.wa-btn{--wa:#25D366;--wa-deep:#1DA851}
/* Header'da telefonla yan yana duruyor: numara telefonla aynı renkte olsun,
yeşil yalnız ikonda kalsın. İkisi ayrı renkte yazıyken satır alacalı
görünüyordu. */
.wa-link{display:inline-flex;align-items:center;gap:var(--space-3);
color:var(--text-body);font-size:var(--fs-small);font-weight:var(--fw-bold);
white-space:nowrap;transition:var(--transition-control)}
.wa-link i{font-size:18px;color:var(--wa);transition:var(--transition-control)}
.wa-link:hover{color:var(--wa-deep)}
.wa-link:hover i{color:var(--wa-deep)}
.wa-link--icon{gap:0;color:var(--wa)}
.wa-link--icon i{font-size:20px}
/* Saydam header: koyu hero üstünde gövde rengi okunmaz */
.site-header--overlay:not(.is-solid):not(.has-open-nav) .wa-link{color:var(--white)}
.site-header--overlay:not(.is-solid):not(.has-open-nav) .wa-link i{color:var(--white)}
.site-header--overlay:not(.is-solid):not(.has-open-nav) .wa-link:hover,
.site-header--overlay:not(.is-solid):not(.has-open-nav) .wa-link:hover i{color:var(--blue-200)}
.wa-btn{display:inline-flex;align-items:center;justify-content:center;
white-space:normal;gap:var(--space-3)}
.wa-btn i{font-size:17px;flex:none}
/* Açık zeminde çerçeve ve ikon WhatsApp yeşili; koyu zeminde beyaz kalıyor */
.wa-btn.btn--outline{border-color:var(--wa);color:var(--wa-deep)}
.wa-btn.btn--outline i{color:var(--wa)}
.wa-btn.btn--outline:hover{background:var(--wa);border-color:var(--wa);color:var(--white)}
.wa-btn.btn--outline:hover i{color:var(--white)}
.wa-btn i{font-size:16px}
/* Sağ alt köşe. Ücretsiz Keşif sekmesi 767px altında gizleniyor, bu her
boyutta duruyor — asıl işini mobilde görüyor. */
/* Sağ altta sabit. Sabit keşif sekmesi sağ kenarda dikey duruyor, bu da
köşede — ikisi çakışmıyor. Hover'da ink-800'e gitmek WhatsApp'ı marka
dışına çıkarıyordu; koyu yeşile iniyor. */
/* İki bölmeli kutu: koyu yeşil kare içinde ikon + çağrı ve numara.
Köşeye yapışık değil, kenardan boşluk alıyor — kendi başına duran bir
öge gibi okunsun diye. Köşeli, tasarım sistemi yuvarlatmayı kapatıyor. */
.wa-float{position:fixed;right:var(--space-7);bottom:var(--space-7);z-index:41;
display:inline-flex;align-items:stretch;
background:var(--wa);color:var(--white);
font-family:var(--font-body);
box-shadow:var(--shadow-lg);transition:var(--transition-control)}
.wa-float:hover{background:var(--wa-deep);color:var(--white)}
.wa-float__icon{flex:none;display:flex;align-items:center;justify-content:center;
width:var(--control-h-md);background:rgba(0,0,0,.14);font-size:24px}
.wa-float__text{display:flex;flex-direction:column;justify-content:center;
gap:var(--space-1);padding:var(--space-3) var(--space-6);white-space:nowrap}
.wa-float__title{font-size:var(--fs-micro);font-weight:var(--fw-bold);
letter-spacing:var(--ls-eyebrow);text-transform:uppercase;opacity:.85}
.wa-float__num{font-size:var(--fs-small);font-weight:var(--fw-bold);
line-height:var(--lh-small)}
@media (max-width:767px){
/* Metin düşünce kare bir dokunma hedefi kalıyor; ikon bölmesi tek başına. */
.wa-float{right:var(--space-5);bottom:var(--space-5)}
.wa-float__icon{width:var(--control-h-lg);height:var(--control-h-lg);
background:none}
.wa-float__text{display:none}
}
/* Dar ekran menüsü — header'ın altına açılan tam genişlik panel */
.nav-mobile{display:none;border-top:var(--border-w) solid var(--border-hairline);
background:var(--white);box-shadow:var(--shadow-lg)}
.nav-mobile.is-open{display:block;
max-height:calc(100vh - var(--header-h));
max-height:calc(100dvh - var(--header-h));
overflow-y:auto;overscroll-behavior:contain;
-webkit-overflow-scrolling:touch}
.nav-mobile a{display:block;padding:17px var(--gutter);
border-bottom:var(--border-w) solid var(--border-hairline);
font-family:var(--font-body);font-size:var(--fs-small);font-weight:var(--fw-semibold);
color:var(--text-body)}
.nav-mobile a:hover{background:var(--ink-800);color:var(--white)}
/* Kategori satırı: etiket link, ok ayrı düğme */
.nav-mobile__row{display:flex;align-items:stretch;
border-bottom:var(--border-w) solid var(--border-hairline)}
.nav-mobile__row a{flex:1;border-bottom:0}
.nav-mobile__toggle{flex:none;width:var(--tap-min);background:none;cursor:pointer;
border:0;border-left:var(--border-w) solid var(--border-hairline);
color:var(--text-muted);transition:var(--transition-control)}
.nav-mobile__toggle:hover{background:var(--ink-800);color:var(--white)}
.nav-mobile__toggle i{font-size:12px;transition:transform var(--dur-base) var(--ease-standard)}
.nav-mobile__toggle.is-open i{transform:rotate(180deg)}
.nav-mobile__panel{background:var(--ink-100)}
.nav-mobile__panel a{padding-left:calc(var(--gutter) + var(--space-6));
font-weight:var(--fw-regular);color:var(--text-muted)}
/* Çözümlerimiz ve altındaki kategoriler tek parça okunsun. Menüdeki asıl iş
bu blok: başlık marka mavisi bir bant, kategoriler onun altında açık mavi
zeminde ve solda marka çizgisiyle. Diğer satırlar düz liste kalıyor.
Düz mavi tercih edildi, degrade değil — tasarım sistemi degradeyi kapatıyor. */
.nav-mobile a.nav-mobile__blok--bas{background:var(--brand);color:var(--white);
border-bottom-color:var(--brand-deep);letter-spacing:var(--ls-eyebrow);
text-transform:uppercase;font-weight:var(--fw-bold);font-size:var(--fs-micro)}
.nav-mobile a.nav-mobile__blok--bas:hover{background:var(--brand-deep);color:var(--white)}
.nav-mobile a.nav-mobile__blok--bas i{margin-left:var(--space-3);
font-size:13px;color:rgba(255,255,255,.65)}
.nav-mobile__row.nav-mobile__blok,
.nav-mobile__panel.nav-mobile__blok{background:var(--blue-50);
border-left:var(--rule-accent-w) solid var(--brand)}
.nav-mobile__row.nav-mobile__blok > a{font-weight:var(--fw-bold);color:var(--brand-deep)}
.nav-mobile__row.nav-mobile__blok > a:hover{background:var(--brand);color:var(--white)}
.nav-mobile__panel.nav-mobile__blok a{color:var(--text-body)}
.nav-mobile__panel.nav-mobile__blok a:hover{background:var(--brand);color:var(--white)}
/* Yalıtım kardeş markaya, başka siteye gidiyor. Kapalı turuncu onu mavi
bloktan ayırıyor: "bu bizim sayfamız değil" sinyali. Turuncu tasarım
sisteminde yok — WhatsApp yeşiliyle aynı gerekçe, marka dışı bir işaret,
o yüzden burada tek yerde tanımlı. Beyaz metinle kontrast 4.77 (AA). */
.nav-mobile a.nav-mobile__blok--son{--yalitim:#B35A18;--yalitim-deep:#96490F;
background:var(--yalitim);color:var(--white);
border-bottom-color:var(--yalitim-deep);letter-spacing:var(--ls-eyebrow);
text-transform:uppercase;font-weight:var(--fw-bold);font-size:var(--fs-micro)}
.nav-mobile a.nav-mobile__blok--son:hover{background:var(--yalitim-deep);color:var(--white)}
.nav-mobile a.nav-mobile__blok--son i{margin-left:var(--space-3);
font-size:11px;color:rgba(255,255,255,.7)}
/* Header satırı dolu: logo + beş menü başlığı + telefon + WhatsApp + dil
kutusu + keşif düğmesi, 1300px'lik kaba ancak sığıyor. Boşluklar bu yüzden
bir basamak dar ve **her genişlikte aynı**; 1700 üstünde geniş boşluk
verilince satır kabı 240px aşıyor ve sağ ucu aşağıdaki içerikten kopuyordu.
Daralma zinciri: dil kodu metni (her genişlikte, lang-drop tanımında) >
WhatsApp numarası (1299) > sabit hattın numarası (1250) > menü + düğme +
dil kutusu (1111, hamburger). İki numara da 1300'e kadar yan yana duruyor,
keşif düğmesi 1111'e kadar — sağ kenardaki yapışkan sekme 1430 altında
basılmadığı için çağrının header'da kalması şart.
Rusça en dar dil: 1300 ve üstünde satırın kapta 5px payı kalıyor. Menü
başlıkları sayfa adlarından geldiği için (siteNav) uzun bir ad bu payı
yer — sonraki kaldıraçlar sırayla nav boşluğu (20 > 16) ve logo boyu
(46 > 40, DS tabanı). */
.site-header__inner{gap:var(--space-4)}
.site-header__right{gap:var(--space-4)}
.nav{gap:var(--space-5)}
.site-header__phone{gap:var(--space-2)}
.site-header__right .wa-link{gap:var(--space-2)}
.site-header__cta{padding-inline:var(--space-4)}
@media (max-width:1299px){
/* WhatsApp'ın ikonu ve bağlantısı kalıyor, numarası düşüyor. Eşik 1300'ün
bir altında: 1300px'te kap tam 1234px ve Rusça satır 1229px — iki numara
oraya kadar yan yana duruyor. */
.site-header__right .wa-link span{display:none}
}
@media (max-width:1250px){
/* Sabit hattın metni gider, ikon ve tel: bağlantısı kalır */
.site-header__phone span{display:none}
}
@media (max-width:1111px){
/* Hamburger'e inince satır boşalıyor; boşluklar mobil ölçüsüne dönüyor. */
.site-header__inner{gap:var(--space-5)}
.site-header__right{gap:var(--space-6)}
/* Dil değiştirici de gizleniyor: header satırında yer kalmıyor, hamburger'i
ekran dışına itip sayfayı yatay taşırıyordu. Mobil menünün içindeki
(lang-switch--compact) duruyor. */
.nav,.site-header__cta,.site-header__right .lang-drop{display:none}
.site-header__toggle{display:inline-flex}
/* Menü gizlenince yer açılıyor, iki numara da geri gelsin */
.site-header__phone span,
.site-header__right .wa-link span{display:inline}
}
@media (max-width:767px){
/* Dar ekranda iki numara da sığmıyor. Sağ alttaki yüzen düğme zaten
WhatsApp'a götürüyor, header'daki kopyayı kaldırıyoruz. */
.site-header__right .wa-link{display:none}
}
@media (max-width:400px){
/* 320px'lik ekranlarda logo + telefon + hamburger sığmıyor */
.site-header__logo img{height:38px}
}
@media (max-width:767px){
.site-header__phone span{display:none}
}
/* --- Dil değiştirici --- */
/* Açılır dil menüsü — masaüstü. Dilleri yan yana dizince header satırı
kapsayıcıyı aşıyordu; dil sayısı arttıkça sorun büyüyor. */
.lang-drop{position:relative;flex:none}
/* Kapakta bayrak + ok yetiyor; dil adları açılan listede yazılı. Kod metni
1500 altında zaten düşüyordu, üstünde de tutmak header satırını 34px
şişiriyor ve Rusça/Almanca 1300'lük kaba sığmıyor. Geri istenirse bu satır
kaldırılır. */
.lang-drop__code{display:none;font-weight:var(--fw-bold)}
.lang-drop__toggle{display:inline-flex;align-items:center;gap:var(--space-3);
padding:var(--space-3);background:none;cursor:pointer;
border:var(--border-w) solid var(--border-hairline);
font-family:var(--font-body);font-size:var(--fs-micro);font-weight:var(--fw-bold);
letter-spacing:var(--ls-eyebrow);color:var(--text-body);
transition:var(--transition-control)}
.lang-drop__toggle:hover{color:var(--brand);border-color:var(--border-brand)}
.lang-drop__toggle i{font-size:9px}
.lang-drop__list{display:none;position:absolute;top:100%;right:0;min-width:150px;
margin:0;padding:0;list-style:none;background:var(--white);
box-shadow:var(--shadow-lg);border-top:var(--rule-accent-w) solid var(--brand)}
.lang-drop:hover .lang-drop__list,
.lang-drop:focus-within .lang-drop__list{display:block}
.lang-drop__list li{margin:0}
.lang-drop__item{display:flex;align-items:center;gap:var(--space-4);
padding:var(--space-4) var(--space-5);white-space:nowrap;
font-size:var(--fs-small);color:var(--text-body);transition:var(--transition-control)}
a.lang-drop__item:hover{background:var(--ink-800);color:var(--white)}
.lang-drop__item.is-active{color:var(--brand);font-weight:var(--fw-bold)}
/* Saydam header koyu bandın üstündeyken */
.site-header--overlay:not(.is-solid):not(.has-open-nav) .lang-drop__toggle{
color:var(--white);border-color:rgba(255,255,255,.5)}
.site-header--overlay:not(.is-solid):not(.has-open-nav) .lang-drop__toggle:hover{
border-color:var(--white)}
.lang-switch{display:flex;align-items:center;gap:var(--space-3);flex:none}
.lang-switch__label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.lang-switch__list{display:flex;align-items:center;gap:var(--space-2);
list-style:none;margin:0;padding:0}
.lang-switch__list li{margin:0}
.lang-switch__item{display:inline-flex;align-items:center;justify-content:center;
gap:var(--space-3);min-width:var(--space-9);padding:var(--space-2) var(--space-3);
font-family:var(--font-body);font-size:var(--fs-micro);font-weight:var(--fw-bold);
letter-spacing:var(--ls-eyebrow);color:var(--text-muted);
border:var(--border-w) solid transparent;transition:var(--transition-control)}
a.lang-switch__item:hover{color:var(--brand);border-color:var(--border-brand)}
.lang-switch__item.is-active{color:var(--brand);border-color:var(--border-brand)}
/* Mobil menü içinde tam ad, satır satır */
.lang-switch--compact{display:block;padding:var(--space-5) var(--gutter);
border-bottom:var(--border-w) solid var(--border-hairline)}
.lang-switch--compact .lang-switch__label{position:static;width:auto;height:auto;
clip-path:none;display:block;margin-bottom:var(--space-3);
font-family:var(--font-body);font-size:var(--fs-micro);font-weight:var(--fw-bold);
letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.lang-switch--compact .lang-switch__list{gap:var(--space-3);flex-wrap:wrap}
.nav-mobile .lang-switch__item{display:inline-flex;align-items:center;
gap:var(--space-3)}
.lang-switch--compact .lang-switch__item{min-width:0;padding:var(--space-3) var(--space-5);
font-size:var(--fs-small);letter-spacing:normal;
border-color:var(--border-hairline)}
.nav-mobile a.lang-switch__item:hover{background:var(--white);color:var(--brand);
border-color:var(--border-brand)}
/* --- SocialLinks --- */
.social{display:flex;align-items:center;gap:var(--space-5)}
.social a{color:var(--brand);font-size:26px;line-height:1;transition:var(--transition-control)}
.social a:hover{color:var(--ink-600)}
.social--on-dark a{color:var(--white);font-size:20px}
.social--on-dark a:hover{color:var(--blue-200)}
/* --- SiteFooter --- */
.site-footer{background:var(--surface-dark);color:var(--text-on-dark)}
.site-footer__grid{display:grid;padding-block:var(--section-y-tight);
grid-template-columns:minmax(240px,1.2fr) repeat(auto-fit,minmax(160px,1fr));
gap:var(--space-11) var(--space-9)}
.site-footer__brand{display:flex;flex-direction:column;gap:var(--space-6)}
.site-footer__brand img{height:46px;width:auto;filter:brightness(0) invert(1)}
.site-footer__address{margin:0;font-size:var(--fs-small);line-height:var(--lh-small);
color:var(--text-on-dark-muted);max-width:30ch}
.site-footer__contact{display:flex;flex-direction:column;gap:var(--space-2);font-size:var(--fs-small)}
.site-footer__contact a{color:var(--white)}
.site-footer__contact a:hover{color:var(--blue-200)}
.site-footer__contact .is-email{color:var(--blue-200)}
.site-footer__title{font-family:var(--font-heading);font-size:var(--fs-eyebrow);
line-height:var(--lh-eyebrow);font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow);
text-transform:uppercase;color:var(--blue-300);margin:0 0 var(--space-6)}
.site-footer__links{list-style:none;margin:0;padding:0;display:flex;
flex-direction:column;gap:var(--space-3)}
.site-footer__links li{margin:0}
.site-footer__links a{color:var(--text-on-dark-muted);font-size:var(--fs-small);line-height:var(--lh-small)}
.site-footer__links a:hover{color:var(--white)}
.site-footer__certs{display:flex;gap:var(--space-4)}
.site-footer__certs img{width:62px;height:auto;background:var(--white);padding:4px}
.site-footer__legal{background:var(--surface-brand)}
.site-footer__legal .container{min-height:70px;display:flex;flex-wrap:wrap;
align-items:center;justify-content:space-between;gap:var(--space-5);padding-block:var(--space-4)}
.site-footer__legal p{margin:0;font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--white)}
.site-footer__legal ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-6)}
.site-footer__legal li{margin:0}
.site-footer__legal a{color:var(--white);font-size:var(--fs-micro)}
.site-footer__legal a:hover{color:var(--blue-100)}
/* --- StickyContact --- */
.sticky-contact{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:40;
display:flex;flex-direction:column;align-items:center;gap:var(--space-3);
padding:var(--space-5) var(--space-3);background:var(--brand);color:var(--white);
font-family:var(--font-body);font-size:var(--fs-micro);font-weight:var(--fw-bold);
letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
writing-mode:vertical-rl;transition:var(--transition-control)}
.sticky-contact:hover{background:var(--ink-800);color:var(--white)}
.sticky-contact img{width:26px;height:auto;writing-mode:horizontal-tb;
filter:brightness(0) invert(1)}
/* Sekme 90px genişliğinde, container'ın kenar payı ise 33px: aradaki 57px'i
her zaman içerikten çalıyordu (referans duvarı, künye şeritleri, ürün rafı).
Kenarda kendine yer açmanın bedeli sayfayı asimetrik yapmak; onun yerine
sekme yalnız payın yettiği genişlikte duruyor. Eşik geometriden:
1300px kap + 90px sekme, iki yandan eşit boşlukla 1430px eder. Altında
header'daki "Ücretsiz Keşif" düğmesi ve sağ alttaki WhatsApp kutusu kalıyor,
çağrı kaybolmuyor. */
@media (max-width:1429px){
.sticky-contact{display:none}
}
/* Geniş kap (1366) 1500px'in altında normal kabına iniyor: 1430-1500 arasında
sekme görünür ama duvarın son sütunu onun altına girerdi. */
@media (max-width:1499px){
.container--wide{max-width:var(--container-max)}
}
/* --- Yardımcılar --- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;padding:var(--space-3) var(--space-5);
background:var(--brand);color:var(--white)}
.skip-link:focus{left:0}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* --- Eyebrow: bölümün kendini tanıttığı tek yeni tipografi stili --- */
.eyebrow{display:inline-flex;align-items:center;gap:var(--space-3);margin:0 0 var(--space-6);
font-family:var(--font-body);font-size:var(--fs-eyebrow);line-height:var(--lh-eyebrow);
font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
color:var(--brand)}
.eyebrow::before{content:"";width:28px;height:2px;background:currentColor;flex:none}
.eyebrow--on-dark{color:var(--blue-300)}
.lead{font-size:var(--fs-h5);line-height:var(--lh-h5);color:var(--text-muted);
max-width:60ch;text-wrap:pretty}
/* --- Anasayfa hero ---
Fotoğraf yok: logodaki eğik çizgi motifi dev ölçekte, üç çizgi ufka basıyor,
altlarında perspektifli parlak epoksi zemin ve çizgilerin zemine yatan
yansıması duruyor. Hepsi CSS.
Geometri üç değişkene bağlı: --sutun-h (metin sütununun taban yüksekliği,
ufkun en yukarıda olabileceği yer), --ayak (en soldaki çizginin container
içindeki yeri) ve --egim. Zemin, ışık, parlama ve yansıma bunlardan türüyor —
birini oynatınca öbürleri kendiliğinden takip eder.
Katman sırası (arkadan öne): zemin > parlama > çizgiler > yansıma > sheen >
ufuk > üst perde > metin. Sıra markup'tan geliyor, z-index yok. */
.hero{position:relative;overflow:hidden;color:var(--text-on-dark);
background:var(--blue-950);
/* İşaretin blend'i için: mix-blend-mode en yakın istifleme bağlamına kadar
karışır, hero kendi bağlamını açmazsa işaret sayfanın tamamıyla karışıyor */
isolation:isolate;
--sutun-h:590px; /* metin sütununun taban yüksekliği */
--taban:40px; /* buton satırının ufka mesafesi */
--egim:28deg; /* logodaki çizgi 45°, dev ölçekte 28° ayakta durur */
/* yansımanın kendi eğimi: zemin düzlemine yatınca cos(58°) ile basıldığı için
ekranda 28° görünmesi adına 16° yazılıyor; 28 yazılsa ufukta kırılıyor */
--egim-yansima:16deg;
--ayak:560px; /* en soldaki çizginin gruba göre yeri; ışık buna bağlı */
/* container'dan artan yerin bir kısmı; grup metinden kopmadan sağa açılsın */
--yay:clamp(0px,(100vw - var(--container-max)) * .3,190px);
/* Ufuk metin sütununun tabanında. Sabit bir sayıya değil alta bağlı: uzun bir
çeviride sütun büyüyünce zemin bandı da onunla iniyor, çizgiler metnin
üstüne binmiyor. Almanca/Fransızca başlıkta tam olarak bu oluyor. */
--ufuk:calc(100% - var(--zemin));
/* Logo işaretinin geometrisi: --isaret-h boy, --isaret-batma ufkun altında
kalan (kırpılan) pay, --isaret-sag inner kutunun sağ kenarına uzaklık —
negatif değer kadraj dışına taşırır. --isaret-maske sol-alt ucun karanlığa
gömülme payı (%): logonun gradyanı sol altta en açık ve dev ölçekte metin
sütununun yanında parlak bir duvar yapıyor. Maske logonun kendi 45°
ekseninde ilerliyor, açık uç sönüyor, marka mavisi duruyor. */
--isaret-h:670px;
--isaret-batma:100px;
--isaret-sag:-120px;
--isaret-maske:46;
/* overlay tam güçte kesişimleri paletin dışına çıkarıyor, kat .6'da duruyor */
--isaret-blend:overlay;
--isaret-kat-opaklik:.6;
padding-bottom:var(--zemin)}
/* Zemin: perspektifli yüzey, yaklaştıkça karanlığa gömülüyor. Derinlik 430px —
daha büyüğünde 180px'lik bantta yüzeyin uzak ucu görünüyor ve doku okunmuyor.
Doku marka nokta ızgarası; epoksi derzsizdir, kare fuga karo hissi veriyor.
Buradaki ve aşağıdaki rgba'lar tokenların alfalı hali: (0,42,54)=blue-950,
(163,218,235)=blue-200, (0,146,188)=blue-500. Tokenlar alfa taşımıyor. */
.hero__floor{position:absolute;left:-30%;right:-30%;top:var(--ufuk);height:430px;
transform-origin:50% 0;transform:perspective(900px) rotateX(58deg);
background-color:var(--blue-900);
background-image:radial-gradient(rgba(163,218,235,.18) 2px,transparent 2.1px);
background-size:68px 68px}
.hero__floor::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(0,42,54,0) 0%,rgba(0,42,54,.5) 50%,rgba(0,42,54,.95) 100%)}
/* Tavan aydınlatmasının zemindeki izi (marka kitabındaki foto tarifi). Zemin
düzleminde dikey bir şerit; perspektifle uzakta incelip yakında açılıyor.
Solda, metin sütununun altında — sağdaki parlama çizgilerin ışığı, bu ise
kadraj dışındaki armatürün. Fark edilmeyecek kadar sönük olmalı. Yüzde
zeminin kendi kutusuna göre ve zemin viewport'un %160'ı: %30 her genişlikte
ufukta viewport'un %18'ine denk geliyor, gruba bağlamaya gerek yok. */
.hero__light{position:absolute;top:0;bottom:0;left:30%;width:110px;
background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05) 45%,rgba(255,255,255,0) 80%);
-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%,#000 60%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 40%,#000 60%,transparent)}
/* Ufuk: ince kenar ışığı. Solda da okunur olmalı, yoksa zeminin sol yarısı
"burada bir yüzey başlıyor" sinyalini almıyor. Sheen'in üstünde duruyor ki
çizgi keskin kalsın. */
.hero__horizon{position:absolute;left:0;right:0;top:calc(var(--ufuk) - 1px);height:1px;
background:linear-gradient(90deg,rgba(163,218,235,.22),rgba(163,218,235,.34) 28%,rgba(163,218,235,.6) 58%,rgba(163,218,235,.3))}
/* Işık ve parlama çizgi grubuyla aynı kapta: nereden başlayacakları viewport
yüzdesine değil en soldaki çizginin ayağına bağlı, her genişlikte aynı yer.
İki ayrı .hero__anchor var çünkü parlama çizgilerin altında, sheen yansımanın
üstünde durmalı — katman sırası markup sırasından geliyor. */
.hero__anchor{position:absolute;left:50%;top:0;bottom:0;width:100%;max-width:var(--container-max);
transform:translateX(calc(-50% + var(--yay)));pointer-events:none}
.hero__glow{position:absolute;left:calc(var(--ayak) - 160px);width:900px;
top:calc(var(--ufuk) - 60px);height:130px;
background:radial-gradient(ellipse at 50% 50%,rgba(0,146,188,.42),rgba(0,146,188,0) 70%);filter:blur(22px)}
.hero__sheen{position:absolute;left:calc(var(--ayak) - 80px);width:1100px;top:var(--ufuk);height:200px;
background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 70%);
-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent)}
/* Header için üst perde: çizgiler karanlıktan çıkıp zemine iniyor. Nav ve
"Ücretsiz Keşif" butonunun bandında çizgiler iyice sönmeli, yoksa buton
çerçevesi açık çizginin üstünde okunmuyor. Saydam header kaydırılınca cama
döndüğünde de bu perde altta kalır. */
.hero__scrim{position:absolute;left:0;right:0;top:0;height:240px;
background:linear-gradient(180deg,rgba(0,42,54,.94) 0%,rgba(0,42,54,.82) 34%,rgba(0,42,54,.42) 66%,rgba(0,42,54,0) 100%)}
/* Çizgiler: ufka basar, yukarı kaçar. Grup container genişliğinde ve ortalı,
metin sütunuyla ilişkisi her ekranda aynı kalsın diye. skewX ekseni ayakta
(50% 100%) olduğu için --ayak doğrudan ayağın yeri. */
.hero__stripes{position:absolute;left:0;right:0;top:0;height:var(--ufuk);
overflow:hidden;pointer-events:none}
.hero__stripes-inner{position:absolute;left:50%;top:0;bottom:0;width:100%;max-width:var(--container-max);
transform:translateX(calc(-50% + var(--yay)))}
.hero__stripe{position:absolute;bottom:0;height:100%;
transform:skewX(calc(var(--egim) * -1));transform-origin:50% 100%}
/* geniş-koyu arkada, ince-açık önde: tek ton, üç adım */
.hero__stripe--a{left:var(--ayak);width:240px;background:var(--blue-800)}
.hero__stripe--b{left:calc(var(--ayak) + 270px);width:96px;background:var(--blue-500)}
.hero__stripe--c{left:calc(var(--ayak) + 398px);width:34px;background:var(--blue-300)}
/* Yansıma: aynı çizgiler ters, zemin düzlemine yatırılmış — zeminle aynı
perspektif, aynı kaçış noktası. Düz aynada yansıma dokunun açılmasına
uymuyordu, çizgiler ufuktan aşağı sabit genişlikte iniyordu; şimdi yakına
geldikçe doku gibi açılıyor. Eğim --egim-yansima, yukarıya bak.
Maske ayrı bir katmanda (.hero__reflect-mask): Safari maske ile 3B dönüşümü
aynı kutuda görünce kırpabiliyor, çocuk katman düzleştikten sonra
maskeleniyor. */
.hero__reflect{position:absolute;left:0;right:0;top:var(--ufuk);
height:calc(var(--sutun-h) * .48);overflow:hidden;
pointer-events:none;opacity:.44;filter:blur(3px);
transform-origin:50% 0;transform:perspective(900px) rotateX(58deg)}
.hero__reflect-mask{position:absolute;inset:0;
/* maske düzlemle birlikte sıkışıyor (yarısı ekranda ~87px'e denk geliyor),
o yüzden düz aynadakinden daha geç sönüyor */
-webkit-mask-image:linear-gradient(0deg,transparent 0%,rgba(0,0,0,.55) 45%,#000 100%);
mask-image:linear-gradient(0deg,transparent 0%,rgba(0,0,0,.55) 45%,#000 100%)}
.hero__reflect .hero__stripe{bottom:auto;top:0;transform-origin:50% 0;transform:skewX(var(--egim-yansima))}
/* Logo işareti: çizgilerin üstüne biniyor ve onlarla karışıyor. Amaç işaretin
ayrı bir nesne gibi durmaması — çizgilerle tek doku okunması.
Blend işaretin kendisine değil kabına yazılı: .hero__stripes-inner'da
translateX var, transform kendi istifleme bağlamını açıyor ve içeride
verilen mix-blend-mode çizgilere hiç ulaşmıyor (beş mod da piksel piksel
aynı çıkıyordu). Kap .hero__stripes'ta transform yok. Karışacağı bağlamı da
.hero'nun isolation:isolate'i sınırlıyor.
Kap çizgilerinkiyle aynı (.hero__stripes): yüksekliği ufka kadar, taşan
kırpılıyor ve işaret container'ı takip ediyor — metinle mesafesi her
genişlikte aynı kalsın diye. */
.hero__mark-def{position:absolute;width:0;height:0;overflow:hidden}
.hero__mark-layer{mix-blend-mode:var(--isaret-blend);opacity:var(--isaret-kat-opaklik)}
.hero__mark{position:absolute;height:var(--isaret-h);width:calc(var(--isaret-h) * 1.1966);
bottom:calc(var(--isaret-batma) * -1);right:var(--isaret-sag);
-webkit-mask-image:linear-gradient(45deg,transparent 0%,#000 calc(var(--isaret-maske) * 1%));
mask-image:linear-gradient(45deg,transparent 0%,#000 calc(var(--isaret-maske) * 1%))}
/* Yansıma: aynı işaret, ufka göre aynalanmış. .hero__reflect zaten zemin
düzlemine yatırıyor; burada sadece dikey çevirme var. Gradyan da onunla
dönüyor — gerçek bir yansımada zaten öyle olur. */
.hero__mark--reflect{bottom:auto;top:calc(var(--isaret-batma) * -1);
transform:scaleY(-1);transform-origin:50% 50%}
/* Metin ufka bağlı: sütun en az ufuk yüksekliğinde, içerik tabana basıyor.
padding-top üstte header (99px) + nefes payı ayırır; blok bundan uzunsa
sütun büyür ve ufuk aşağı iner — başlık header'ın altına kaçmaz. */
.hero > .container{position:relative;min-height:var(--sutun-h);display:flex;align-items:flex-end;
padding-top:var(--space-15);padding-bottom:var(--taban)}
.hero__body{max-width:640px}
/* Satır kırılımı zorlanmıyor, tarayıcıya bırakılıyor — beş dilde beş ayrı
yeri tutmak istemiyoruz. İki ayar şart:
- hyphens:none, çünkü :lang(de) tirelemesi başlığı "Schützen Sie Ihre Be-"
diye kesiyordu; display boyutunda tire okunmuyor. Uzun bileşik kelime bu
başlıkta yok, taşma riski de yok.
- balance değil pretty: balance Türkçeyi "Master Epoksi / ile korunsun!"
diye bölüp mavi bloğu satırın ortasında başlatıyordu. Mavi blok satır
başında durmalı. */
.hero__title{font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--fs-display);
line-height:1.08;letter-spacing:var(--ls-display);color:var(--white);margin:0;
-webkit-hyphens:none;hyphens:none;text-wrap:pretty}
.hero__title span{display:inline-block;background:var(--blue-500);padding:0 .18em;margin-left:-.18em}
/* Alt başlık gövde fontunda değil, Poppins'te: başlıkla aynı aileden (Raleway
ile ikisi de geometrik), gövde metninden ayrışıyor. Açık mavi, saf beyaz
değil; başlık beyaz kalıyor, hiyerarşi renkle. */
.hero__lead{margin:var(--space-7) 0 0;font:400 var(--fs-h5)/var(--lh-h5) var(--font-heading);
letter-spacing:-.01em;color:var(--blue-200);max-width:46ch;text-wrap:pretty}
/* Vaat cümlesi kendi satırında. Paragrafın ortasında başlayan beyaz vurgu satır
kırılımına göre yer değiştiriyordu ("On dört" bir üst satırın sonunda
kalıyordu); blok olunca açıklama ile vaat iki ayrı kademe oluyor. */
.hero__lead strong{display:block;margin-top:var(--space-2);font-weight:var(--fw-semibold);color:var(--white)}
/* Butonlar: birincil ok ikonlu ve iri, ikincil koyu zemin üstünde çerçeveli
(beyaz dolu buton birinciyle yarışıyordu), üçüncül gerçek telefon. Hover
yalnız renk; ok DS'teki 4px nudge'ı alıyor.
align-items:baseline — iki butonun metni tek çizgide; center hizada farklı
yükseklikte bir eylem eklenirse kayıyor.
404 sayfası da bu satırı kullanıyor (üç .btn), ona da uyuyor. */
.hero__actions{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-5);margin-top:var(--space-9)}
.hero__btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
min-height:var(--control-h-lg);padding:0 var(--space-8);
font:var(--fw-bold) var(--fs-body)/1 var(--font-body);
text-decoration:none;white-space:nowrap;border:var(--border-w) solid transparent;
transition:var(--transition-control)}
.hero__btn--primary{background:var(--brand);border-color:var(--brand);color:var(--white);
/* ok metinden optik olarak hafif ve kutusunun içinde ~4px boşluk taşıyor;
sağ dolgu 3px kısalınca iki yan eşit görünüyor */
padding-right:var(--space-7)}
.hero__btn--primary:hover{background:var(--white);border-color:var(--white);color:var(--brand-deep)}
/* Çerçeve tek başına butonu zeminden ayırmıyor; %5 beyaz yüzeyi işaretliyor,
hover'da %8'e çıkıyor — DS'in "hover renk değiştirir, boyut değiştirmez" kuralı */
.hero__btn--ghost{background:rgba(163,218,235,.07);border-color:rgba(255,255,255,.55);color:var(--white)}
/* base.css a:hover rengi ink-800 yapıyor, koyu zeminde yazı kayboluyordu —
koyu zemindeki her bağlantıya kendi hover rengini vermek şart */
.hero__btn--ghost:hover{border-color:var(--white);background:rgba(163,218,235,.16);color:var(--white)}
.hero__phone:hover,.hero__phone:hover small{color:var(--blue-300)}
/* 18px: metinle aynı boy. 20px'te ok metinden iri duruyordu. viewBox da 18 —
20 birimlik kutu 18px'e sıkışınca stroke 1.8px basılıyor ve ok Roboto 700'ün
gövdesinden ince kalıyordu. */
.hero__btn-arrow{display:inline-block;width:18px;height:18px;transition:var(--transition-nudge)}
.hero__btn--primary:hover .hero__btn-arrow{transform:translateX(var(--nudge-x))}
/* Telefon kendi satırında ve butonlarla aynı sol hizada. Tek satıra almak
640px'lik metin sütununda 741px istiyor; sütunu genişletmek de buton satırını
çizgi grubunun ayağına sokuyor. Üçüncül eylem için ayrı satır zaten doğru
kademe. "ya da arayın" caps değil — marka kitabı büyük harfi logoya ve
eyebrow'a ayırıyor, bu ise cümle parçası. */
.hero__phone{flex:0 0 100%;display:flex;align-items:baseline;gap:var(--space-4);text-decoration:none}
.hero__phone small{font:var(--fw-regular) var(--fs-body)/1 var(--font-body);color:var(--blue-300)}
.hero__phone b{font:var(--fw-semibold) var(--fs-body)/1 var(--font-heading);color:var(--white);
transition:color var(--dur-base) var(--ease-standard)}
.hero__phone:hover b{color:var(--blue-200)}
@media (max-width:1111px){
/* --ayak 560 -> 520: 460'ta en soldaki çizginin ayağı "Çözümlerimiz"
butonunun sağ alt köşesine değiyordu (buton kenarı 480, çizgi 481).
Pay buton etiketinin genişliğine bağlı; en dar durum Almanca ("Lösungen",
üstündeki birincil buton satırı uzattığı için butonun altı da aşağıda) ve
orada 17px kalıyor. Yeni bir dil eklerken bu payı yeniden ölç.
1024 ve üstünde üç çizgi de kadrajda; 768'de en ince olanı sağdan taşıyor,
çizgiler zaten kadrajdan çıkıyor. */
.hero{--sutun-h:560px;--ayak:520px;--isaret-h:540px;--isaret-batma:80px}
.hero__body{max-width:520px}
.hero__title{font-size:var(--fs-display-t);line-height:var(--lh-display-t)}
.hero__stripe--a{width:180px}
.hero__stripe--b{left:calc(var(--ayak) + 210px);width:72px}
.hero__stripe--c{left:calc(var(--ayak) + 306px);width:26px}
.hero__glow{width:760px}
.hero__sheen{width:900px}
}
/* mobil: metin tam genişlik, çizgiler sağ üst köşeye çekilir, yansıma kalkar */
@media (max-width:767px){
/* İşaret buton bandından tamamen çıkarıldı: overlay orayı açtığı için
"Çözümlerimiz" butonunun beyaz %55 çerçevesi işaretin üstünde 1.7:1'e
düşüyordu. Opaklığı kısmak yetmiyor — parlak piksel işaretin gövdesinden
geliyor, maskenin sönen ucundan değil. Sağda yalnız üst köşede bir dilim
kalıyor; --isaret-sag'ı küçültürken bu payı yeniden ölç. */
.hero{--sutun-h:560px;--taban:32px;
--isaret-h:400px;--isaret-batma:64px;--isaret-sag:-340px}
.hero > .container{padding-top:var(--space-13)}
.hero__body{max-width:none}
/* display'in mobil adımı (28px) hero başlığı için zayıf kalıyor; h3
basamağı 34px ve üç satıra oturuyor */
.hero__title{font-size:var(--fs-h3);line-height:1.12}
.hero__lead{font-size:var(--fs-body-m);line-height:var(--lh-body-m);margin-top:var(--space-4)}
.hero__actions{margin-top:var(--space-6)}
.hero__actions .hero__btn{flex:1 1 100%;white-space:normal;min-height:var(--control-h-md)}
.hero__stripes-inner,.hero__anchor{max-width:none}
/* iki sınırın arası: ufukta ikisi de tam görünecek kadar içeride, lead
metninin en uzun satırının sağından geçecek kadar dışarıda. 28° eğimle her
100px yukarıda ~53px sağa kaydıkları için metin hizasında ikisi de kadraj
dışında kalıyor; ufuk bandında yan yana iki çubuk olarak çıkıyorlar.
Buton satırı opak, arada onun arkasında kalmaları derinlik hissi veriyor. */
.hero__stripe--a{left:auto;right:36px;width:90px;background:var(--blue-800)}
.hero__stripe--b{left:auto;right:2px;width:22px;background:var(--blue-600)}
.hero__stripe--c{display:none}
.hero__reflect{display:none}
/* çizgiler sağa yaslı, ışık da sağdan; parlamanın merkezi iki ayağın ortası */
.hero__glow{left:auto;right:-150px;width:420px}
.hero__sheen{left:auto;right:-160px;width:520px}
.hero__light{left:34%;width:80px}
/* zemin bandı 120px; bu kadar dar bir bantta 430px derinlik yine uzak ucu
gösteriyor ve doku kayboluyor. Karartma da geç başlamalı, yoksa bant
zeminden çok koyu bir çizgi gibi duruyor */
.hero__floor{height:260px}
.hero__floor::after{background:linear-gradient(180deg,rgba(0,42,54,0) 0%,rgba(0,42,54,.3) 60%,rgba(0,42,54,.85) 100%)}
}
/* Yüksek kontrast tercihinde lead'i tam beyaza çekiyoruz; %72 beyaz zaten
8.5:1 ile AAA geçiyor ama burada ölçüyü kaçırmanın anlamı yok. */
@media (prefers-contrast:more){
.hero__lead{color:var(--white)}
}
/* Zorlanmış renk modunda (Windows yüksek kontrast) grafik katmanı iş görmüyor:
arka planlar sistem renklerine sabitlenirken gradyanlar duruyor, ortaya
okunmayan bir karışım çıkıyor. Dekoratif katmanların hepsi aria-hidden, tek
seçiciyle kaldırılıp düz metin bırakılıyor. */
@media (forced-colors:active){
.hero{padding-bottom:0}
.hero [aria-hidden="true"]{display:none}
.hero > .container{min-height:0;padding-top:var(--space-11);padding-bottom:var(--space-11)}
.hero__title span{background:none;padding:0;margin-left:0}
}
/* --- Rakam şeridi ---
Bileşen üç sayfada da koyu bir hero'nun hemen altında duruyor (anasayfa,
hakkımızda, referanslar); tam doygun marka mavisi orada ikinci bir yüzey gibi
okunuyor ve hero'nun içindeki birincil butonla dikkat için yarışıyordu. Zemin
koyu banda indi, mavi üstteki 4px işarete çekildi: hero koyudan koyuya devam
ediyor, mavi aksiyon rengi olarak kalıyor. */
.facts{background:var(--brand-deep);border-top:var(--space-1) solid var(--brand)}
.facts__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
/* Ayırıcı hücrenin başında: çizgiyle sağındaki metnin arası her hücrede aynı
30px. Çizgi hücrenin sağ kenarındayken sonraki metne yapışıyor, önceki
metinden ise sütunun artanı kadar uzaklaşıyordu. */
.facts__item{display:flex;flex-direction:column;justify-content:space-between;
padding:var(--space-9) 0 var(--space-9) var(--grid-gap);
border-left:var(--border-w) solid rgba(163,218,235,.22)}
.facts__item:first-child{border-left:0;padding-left:0}
.facts__key{font-family:var(--font-heading);font-weight:var(--fw-bold);
font-size:var(--fs-h3);line-height:1.1;letter-spacing:var(--ls-h2);color:var(--white);
text-wrap:balance}
/* Dördüncü kutu ("Türkei + weltweit", "Turquie + monde") 34px'te
279px'lik sütunu aşıyor: Almanca 289px, Fransızca 291px ister. İkiye bölünüp
üç tek satırlık komşusunun yanında dengesiz duruyordu. Ölçekte 34'ten sonraki
basamak 24, arada bir şey yok — iki dilde bir adım iniyoruz. Tireleme
kuralıyla aynı mantık: dil bazlı tipografik ödün, öteki üç dil değişmiyor.
Kural yalnız 34px'in geçerli olduğu genişlikte: altında zaten herkes 24'te ve
dil seçicisi medya sorgusundan güçlü olduğu için mobilin 18px'ini eziyordu. */
@media (min-width:1366px){
:lang(de) .facts__key,
:lang(fr) .facts__key{font-size:var(--fs-h4)}
}
/* Birim ve önek ("m²", "ISO") asıl bilgi değil: baseline'da, bir adım küçük ve
mavi. İki iş birden yapıyor — hiyerarşiyi kuruyor ve en uzun hücreyi
("ISO 9001 · 45001", 34px'te 281px) 308px'lik sütuna sığdırıyor.
"+" sayının kendi parçası, o yüzden beyaz kalıyor; onu rakamın üstüne
kaldırıp bir dipnot numarası gibi gösteriyordu. */
.facts__unit{font-size:.58em;font-weight:var(--fw-semibold);letter-spacing:0;
color:var(--blue-200);white-space:nowrap}
.facts__unit--onek{margin-right:.28em}
.facts__unit--birim{margin-left:.26em}
.facts__plus{font-size:.74em}
/* Etiket hücrenin tabanına yaslı: dar ekranda tek bir sayı sarınca (360'ta
"Türkiye + global") o hücrenin etiketi komşusundan 22px aşağı kayıyor ve
şeridin taban ritmi bozuluyordu. Artık sarma sayı satırında soğuruluyor. */
.facts__value{margin-top:var(--space-3);
font:var(--fw-bold) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-body);
letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--blue-300)}
/* Hero'ya özgü şerit: bant hero'nun zemin bandının üstüne biniyor, nokta
ızgarası, sheen ve çizgilerin yansıması gerçekten arkasında devam ediyor.
Ufuk çizgisi şeridin üst kenarı oluyor, ayrı bir dikiş kalmıyor.
Kendi zemini yok, yalnız metni taşıyacak kadar scrim var — foto scrimiyle
aynı iş, aynı gerekçe. Scrim hero'nun alt kenarından 20px önce tam opağa
kapanıyor: şerit zemin bandından uzun olduğunda (tablette 2x2, uzun bir
çeviride her yerde) hero'nun bittiği yer scrimin içinde kalıyor, yoksa orada
yatay bir ton sınırı çıkıyor. */
.facts--on-floor{margin-top:calc(-1 * var(--zemin));border-top:0;position:relative;
background:linear-gradient(180deg,rgba(0,42,54,.3) 0,rgba(0,42,54,.62) 45%,
var(--blue-950) calc(var(--zemin) - var(--space-5)))}
/* dokulu zeminde hairline kayboluyor, iki adım güçleniyor */
.facts--on-floor .facts__item{border-color:rgba(163,218,235,.3)}
/* Fotoğrafsız koyu hero'nun (page-hero-dark) altında: brand-deep zemini orada
ikinci bir koyu ton yapıyordu, şerit hero'nun zeminini sürdürüyor. Ayrım
yalnız üstteki 4px marka çizgisi. */
.facts--on-dark{background:var(--blue-950)}
.facts--on-dark .facts__item{border-color:rgba(163,218,235,.26)}
/* Container ancak 1366px'ten (1300 + iki gutter) itibaren tam genişliğine
oturuyor; altında sütun viewport'la birlikte daralıyor ve 34px'lik sayı dört
sütuna sığmıyor — 1180'de "Türkiye + global" ikiye bölünüp bandı dengesiz
bırakıyordu. Sütun düzeni aynı kalıyor, yalnız sayı bir basamak iniyor. */
@media (max-width:1365px){
.facts__key{font-size:var(--fs-h4)}
}
@media (max-width:1111px){
/* Dört sütun 1024'te 240px'e iniyor: 34px'lik sayı ile 13px'lik aralıklı
etiket aynı anda sığmıyor, etiketlerin bir kısmı sarıp öbürleri sarmıyor ve
satır dengesiz kalıyor. 2x2 tablette hem okunaklı hem hizalı. auto-fit'e
bırakmak da olmuyordu: 1024'te dört sütunun taban genişliği içerikten 2px
fazla çıkıp bandı 3+1'e düşürüyordu. */
.facts__grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--grid-gap)}
.facts__item{padding:var(--space-8) 0 var(--space-8) var(--grid-gap);
border-top:var(--border-w) solid rgba(163,218,235,.22)}
.facts__item:nth-child(odd){border-left:0;padding-left:0}
.facts__item:nth-child(-n+2){border-top:0}
.facts__key{font-size:var(--fs-h4)}
}
@media (max-width:767px){
/* 2x2 tablette kuruldu; burada dikey ayırıcı da kalkıyor, dar sütunda
çizgi + gap kalabalık yapıyor */
.facts__item{padding:var(--space-6) 0;border-left:0}
/* 390'da sütun 160px kalıyor ve 24px'lik sayı sarıyordu; sarınca o hücrenin
etiketi komşusundan 22px aşağı kaçıp satırı bozuyor. Sütun aralığı da
30'dan 16'ya iniyor — dört sayı da tek satırda kalsın diye. */
.facts__grid{column-gap:var(--space-4)}
.facts__key{font-size:var(--fs-h4-m)}
.facts__value{letter-spacing:.1em}
/* Mobilde bindirme çalışmıyor: zemin bandı 120px'e iniyor, şerit 2x2 olduğu
için 215px'e çıkıyor. Bant hem hero'nun dışına taşıyor hem de buton
satırına 42px kalıyor. Orada bileşen kendi koyu zeminine ve marka işaretine
dönüyor; hero'nun zemin bandı zaten o kadar dar ki doku görünmüyordu. */
.facts--on-floor{margin-top:0;background:var(--brand-deep);
border-top:var(--space-1) solid var(--brand)}
.facts--on-floor .facts__item{border-color:rgba(163,218,235,.22)}
}
/* Teknik künye şeridi (çözüm detayı): aynı kasa, ters hiyerarşi — üstte
etiket, altında değer. Değer sayı değil cümle taşıyor, o yüzden bir basamak
küçük ve dengelenmiyor; rakam şeridinin 2x2'ye inen kuralı da burada
geçmiyor, dört kısa sütun tablette de okunuyor. */
.facts--kunye .facts__item{justify-content:flex-start}
.facts--kunye .facts__value{margin-top:0}
.facts--kunye .facts__key{margin-top:var(--space-4);
font:var(--fw-semibold) var(--fs-h5)/1.3 var(--font-heading);
letter-spacing:var(--ls-normal);text-wrap:wrap}
@media (max-width:1111px){
.facts--kunye .facts__grid{column-gap:0;
grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
.facts--kunye .facts__item{padding:var(--space-9) 0 var(--space-9) var(--grid-gap);
border-top:0;border-left:var(--border-w) solid rgba(163,218,235,.26)}
.facts--kunye .facts__item:first-child{border-left:0;padding-left:0}
}
@media (max-width:767px){
.facts--kunye .facts__item{padding:var(--space-6) 0;border-left:0;
border-top:var(--border-w) solid rgba(163,218,235,.26)}
.facts--kunye .facts__item:first-child{border-top:0}
/* Rakam şeridi mobilde etiketin harf aralığını açıyor — orada etiket dört
dar sütuna sığmak zorunda. Künye tek sütuna indiği için gerek yok. */
.facts--kunye .facts__value{letter-spacing:var(--ls-eyebrow)}
}
/* --- Gallery: sitenin her görsel ızgarası bundan geçer --- */
.gallery{display:grid;grid-template-columns:repeat(var(--gallery-cols,4),minmax(0,1fr));
gap:var(--grid-gap)}
.gallery--1{--gallery-cols:1}
.gallery--2{--gallery-cols:2}
.gallery--3{--gallery-cols:3}
.gallery--4{--gallery-cols:4}
.gallery--fill{height:100%}
/* 30px ızgara aralığı yerine tek dikiş: kareler bir panorama gibi birleşiyor,
referans duvarının hairline ızgarasıyla aynı kuruluş. */
.gallery--seam{gap:var(--border-w)}
.gallery__item{margin:0;position:relative;overflow:hidden;
aspect-ratio:var(--gallery-ratio,4/3);background:var(--surface-sunken)}
.gallery--fill .gallery__item{height:100%}
.gallery__item img{width:100%;height:100%;object-fit:cover;
transition:transform var(--dur-slow) var(--ease-out)}
.gallery__item::after{content:"";position:absolute;inset:0;pointer-events:none;
background:var(--scrim-image);opacity:0;
transition:opacity var(--dur-base) var(--ease-standard)}
.gallery__item:hover img{transform:scale(1.04)}
.gallery__item:hover::after{opacity:.55}
.gallery--portrait{--gallery-ratio:3/4}
.gallery--square{--gallery-ratio:1/1}
@media (max-width:767px){
.gallery--3,.gallery--4{--gallery-cols:2}
}
/* --- PageHeroDark: fotoğrafsız iç sayfa başlığı ---
Anasayfa hero'sunun küçük kardeşi: aynı koyu zemin, aynı nokta dokusu ve
aynı çizgi motifi. Perspektifli zemin bandı, yansıma ve sheen yok; yükseklik
anasayfanınkinin yarısından az — motif burada tam bir sahne değil, yakın
plandan bir kesit. Sitedeki bütün iç sayfalar bu dili konuşuyor; fotoğraflı
.page-hero kaldırıldı.
Geometri anasayfayla aynı üç değişkende: --egim çizgilerin açısı, --ayak en
soldaki çizginin container içindeki yeri, --yay grubun sağa açılma payı.
Buradaki rgba'lar tokenların alfalı hali: (163,218,235)=blue-200,
(0,42,54)=blue-950, (0,146,188)=blue-500. Tokenlar alfa taşımıyor. */
.page-hero-dark{position:relative;overflow:hidden;isolation:isolate;
background:var(--blue-950);color:var(--text-on-dark);
--egim:28deg;
--ayak:680px;
/* container'dan artan yerin bir kısmı: motif metinden kopmadan sağa açılsın */
--yay:clamp(0px,(100vw - var(--container-max)) * .3,190px)}
.page-hero-dark__doku{position:absolute;inset:0;pointer-events:none;
background-image:radial-gradient(rgba(163,218,235,.11) 2px,transparent 2.1px);
background-size:68px 68px}
/* Kadraj dışındaki armatür, anasayfadaki referans bandıyla aynı açıdan */
.page-hero-dark__isik{position:absolute;top:-300px;right:-180px;width:1000px;height:740px;
pointer-events:none;
background:radial-gradient(ellipse at 50% 50%,rgba(0,146,188,.34),rgba(0,146,188,0) 66%);
filter:blur(40px)}
/* Header bandında motif sönmeli, yoksa Ücretsiz Keşif butonunun beyaz çerçevesi
açık çizginin üstünde okunmuyor. Anasayfadaki scrim ile aynı iş. */
.page-hero-dark__perde{position:absolute;left:0;right:0;top:0;height:200px;pointer-events:none;
background:linear-gradient(180deg,rgba(0,42,54,.92) 0%,rgba(0,42,54,.6) 45%,rgba(0,42,54,0) 100%)}
/* Alt kenar: motif rakam şeridinin marka çizgisine sakin bağlansın */
.page-hero-dark__taban{position:absolute;left:0;right:0;bottom:0;height:150px;pointer-events:none;
background:linear-gradient(180deg,rgba(0,42,54,0),rgba(0,42,54,.86))}
/* Çizgi grubu ufka basmıyor, üstten ve alttan taşıyor. Ölçüler anasayfadaki
grubun yaklaşık %85'i. */
.page-hero-dark__cizgiler{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.page-hero-dark__cizgiler-ic{position:absolute;left:50%;top:0;bottom:0;width:100%;
max-width:var(--container-max);transform:translateX(calc(-50% + var(--yay)))}
.page-hero-dark__cizgi{position:absolute;top:0;bottom:0;
transform:skewX(calc(var(--egim) * -1));transform-origin:50% 100%}
.page-hero-dark__cizgi--a{left:var(--ayak);width:200px;background:var(--blue-800)}
.page-hero-dark__cizgi--b{left:calc(var(--ayak) + 228px);width:80px;background:var(--blue-500)}
.page-hero-dark__cizgi--c{left:calc(var(--ayak) + 336px);width:28px;background:var(--blue-300)}
/* İçerik tabana yaslı. padding-top üstte header (99px) + nefes payı ayırıyor;
blok bundan uzunsa kap büyüyor — uzun bir çeviride başlık header'ın altına
kaçmasın diye. Genel overlay kuralı bu kaba ayrıca uygulanmıyor. */
/* Kap normal: başlık header logosuyla ve alttaki bölümlerle aynı sol hizada
başlıyor. Eskiden max-width:none vardı ve hero sayfanın kenar payından
başlıyordu — 1920'de başlık, logodan 310px solda duruyordu. */
.page-hero-dark__govde{position:relative;min-height:300px;display:flex;flex-direction:column;
justify-content:flex-end;padding-top:var(--space-15);padding-bottom:var(--space-11)}
.page-hero-dark__yol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);
margin-bottom:var(--space-6);font-size:var(--fs-micro);color:var(--text-on-dark-muted)}
.page-hero-dark__yol a{color:var(--blue-200)}
/* base.css'in a:hover kuralı rengi ink-800 yapıyor; koyu zeminde bağlantı
kayboluyor, hover rengi burada ayrıca yazılı. */
.page-hero-dark__yol a:hover{color:var(--white)}
.page-hero-dark__yol span[aria-hidden]{opacity:.5}
/* Başlık anasayfanın sesiyle: Raleway 800, display basamağı. Mavi blok yalnız
vurgu geçen sayfalarda basılıyor; tek kelimelik başlıkta hiç açılmıyor. */
.page-hero-dark__baslik{margin:0;font-family:var(--font-display);font-weight:var(--fw-black);
font-size:var(--fs-display);line-height:1.08;letter-spacing:var(--ls-display);
color:var(--white);-webkit-hyphens:none;hyphens:none;text-wrap:pretty}
.page-hero-dark__baslik span{display:inline-block;background:var(--blue-500);
padding:0 .18em;margin-left:-.18em}
.page-hero-dark__lead{margin:var(--space-6) 0 0;max-width:48ch;
font:var(--fw-regular) var(--fs-h5)/var(--lh-h5) var(--font-heading);
letter-spacing:-.01em;color:var(--blue-200);text-wrap:pretty}
/* İki sütunlu hâl (çözüm detayı): solda kimlik, sağda kat kesiti ya da teknik
künye. Çizgi grubu varsayılan yerinde sağ sütunun tam altına düşüyordu;
--ayak grubu sağa itiyor, plaka kendi zeminiyle onun üstünde duruyor.
İki sütun da kabın içinde: sol sütunun sol kenarı öbür hero'larla ve
header logosuyla aynı çizgide, sağ sütun kabın sağ kenarına dayanıyor.
Kap 1300'de durduğu için plaka sağdaki sabit "Ücretsiz Keşif" sekmesinin
altına girmiyor ve alttaki künye şeridiyle hizalanıyor. */
.page-hero-dark--split{--ayak:760px}
.page-hero-dark__govde--split{display:grid;
grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
gap:var(--space-11);align-items:end;padding-bottom:var(--space-13)}
.page-hero-dark__sol,
.page-hero-dark__sag{min-width:0}
/* Başlık 60px'te iki sütunlu düzende üç satıra çıkıyor; sütun daraldığı için
bir basamak iniyor, hero yüksekliği kontrolde kalıyor. */
.page-hero-dark--split .page-hero-dark__baslik{font-size:var(--fs-display-t);line-height:1.1}
.page-hero-dark--split .page-hero-dark__lead{max-width:44ch}
/* Sağ sütun kendi kutusu olmayan bir bileşen taşıyorsa (keşif formu) plakayı
hero basıyor — kesit ve liste-plaka kendi kutusuyla geliyor, onlarda bu
sarmalayıcı hiç açılmıyor. Zemin ve çerçeve kesit--koyu ile aynı. */
.hero-plaka{padding:var(--space-8);background:rgba(0,42,54,.62);
border:var(--border-w) solid rgba(163,218,235,.22)}
.hero-plaka .eyebrow{margin-bottom:var(--space-4)}
.hero-plaka__baslik{margin:0 0 var(--space-3);font-family:var(--font-heading);
font-size:var(--fs-h4);line-height:var(--lh-h4);font-weight:var(--fw-semibold);
color:var(--white);letter-spacing:0}
.hero-plaka__not{margin:0 0 var(--space-8);font-size:var(--fs-small);
line-height:var(--lh-small);color:var(--text-on-dark-muted)}
/* Keşif formunun onay paneli plakasız geliyor (iletişim hero'su, gönderim
sonrası): kendi kutusu var ama zemini şeffaf, motifin açık çizgisi metnin
altından geçiyordu. Plakayla aynı koyuluğa çekiyoruz. */
.page-hero-dark__sag > .kesif-done--on-dark{background:rgba(0,42,54,.62)}
/* Sayfa tek cümlelik bir ifadeyle açılıyorsa: başlık tam genişlikte tek satıra
yayılmak yerine dar bir ölçüde iki satıra iniyor, hero bir basamak uzuyor. */
.page-hero-dark--dar .page-hero-dark__baslik{max-width:18ch}
.page-hero-dark--dar .page-hero-dark__lead{max-width:52ch}
.page-hero-dark--dar .page-hero-dark__govde{padding-bottom:var(--space-14)}
@media (max-width:1111px){
.page-hero-dark{--ayak:520px}
.page-hero-dark__baslik{font-size:var(--fs-display-t);line-height:var(--lh-display-t)}
.page-hero-dark__govde--split{grid-template-columns:1fr;gap:var(--space-9);
padding-bottom:var(--space-11)}
.page-hero-dark--split .page-hero-dark__baslik{line-height:var(--lh-display-t)}
}
@media (max-width:767px){
/* Motif dar ekranda metnin altına giriyor ve okunurluğu düşürüyor; anasayfa
hero'su da aynı genişlikte dekoratif katmanlarını sadeleştiriyor. */
.page-hero-dark__cizgiler{display:none}
.hero-plaka{padding:var(--space-6)}
.page-hero-dark--dar .page-hero-dark__govde{padding-bottom:var(--space-11)}
.page-hero-dark__govde{min-height:0;padding-top:var(--space-13);padding-bottom:var(--space-11)}
.page-hero-dark__baslik{font-size:var(--fs-h3);line-height:1.12}
.page-hero-dark__lead{font-size:var(--fs-body-m);line-height:var(--lh-body-m)}
.page-hero-dark--split .page-hero-dark__baslik{font-size:var(--fs-h3);line-height:1.12}
}
/* Zorlanmış renk modunda dekoratif katman iş görmüyor: zeminler sistem
renklerine sabitlenirken gradyanlar duruyor. Hepsi aria-hidden, tek
seçiciyle kalkıyor. */
@media (forced-colors:active){
.page-hero-dark [aria-hidden="true"]{display:none}
.page-hero-dark__baslik span{background:none;padding:0;margin-left:0}
}
/* --- 404: koyu tam sayfa ---
Anasayfa hero'sunun motifi kesit ölçeğinde: aynı çizgi grubu, aynı logo
işareti, aynı perde ve taban. Perspektifli zemin, yansıma ve sheen yok —
sayfanın tek işi ziyaretçiyi üç bağlantıdan birine yollamak.
rgba'lar tokenların alfalı hali: (163,218,235)=blue-200, (0,42,54)=blue-950,
(0,146,188)=blue-500. */
.hata{position:relative;overflow:hidden;isolation:isolate;
background:var(--blue-950);color:var(--text-on-dark);
--egim:28deg;
--ayak:620px;
--yay:clamp(0px,(100vw - var(--container-max)) * .3,190px);
--isaret-h:560px;
--isaret-batma:90px;
--isaret-sag:-90px;
--isaret-maske:44;
--isaret-blend:overlay;
--isaret-kat-opaklik:.6}
.hata__doku{position:absolute;inset:0;pointer-events:none;
background-image:radial-gradient(rgba(163,218,235,.11) 2px,transparent 2.1px);
background-size:68px 68px}
.hata__isik{position:absolute;top:-300px;right:-180px;width:1000px;height:740px;
pointer-events:none;
background:radial-gradient(ellipse at 50% 50%,rgba(0,146,188,.34),rgba(0,146,188,0) 66%);
filter:blur(40px)}
.hata__perde{position:absolute;left:0;right:0;top:0;height:200px;pointer-events:none;
background:linear-gradient(180deg,rgba(0,42,54,.92) 0%,rgba(0,42,54,.6) 45%,rgba(0,42,54,0) 100%)}
.hata__taban{position:absolute;left:0;right:0;bottom:0;height:180px;pointer-events:none;
background:linear-gradient(180deg,rgba(0,42,54,0),rgba(0,42,54,.9))}
.hata__cizgiler{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hata__cizgiler-ic{position:absolute;left:50%;top:0;bottom:0;width:100%;
max-width:var(--container-max);transform:translateX(calc(-50% + var(--yay)))}
.hata__cizgi{position:absolute;top:0;bottom:0;
transform:skewX(calc(var(--egim) * -1));transform-origin:50% 100%}
.hata__cizgi--a{left:var(--ayak);width:200px;background:var(--blue-800)}
.hata__cizgi--b{left:calc(var(--ayak) + 228px);width:80px;background:var(--blue-500)}
.hata__cizgi--c{left:calc(var(--ayak) + 336px);width:28px;background:var(--blue-300)}
/* Blend kendi katmanında: çizgi grubunda translateX var, transform kendi
istifleme bağlamını açıyor ve karışım orada hiç çalışmıyor. */
.hata__mark-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;
mix-blend-mode:var(--isaret-blend);opacity:var(--isaret-kat-opaklik)}
.hata__mark{position:absolute;height:var(--isaret-h);width:calc(var(--isaret-h) * 1.1966);
bottom:calc(var(--isaret-batma) * -1);right:var(--isaret-sag);
-webkit-mask-image:linear-gradient(45deg,transparent 0%,#000 calc(var(--isaret-maske) * 1%));
mask-image:linear-gradient(45deg,transparent 0%,#000 calc(var(--isaret-maske) * 1%))}
/* Ekranı dolduruyor ama kilitlemiyor: uzun bir çeviride kap büyüyor.
Header rezervi kabın kendi padding'inde, overlay kuralından muaf. */
.hata__govde{position:relative;display:flex;flex-direction:column;justify-content:center;
min-height:calc(100vh - var(--header-h));
min-height:calc(100dvh - var(--header-h));
padding-top:var(--space-15);padding-bottom:var(--space-14)}
.hata__kod{font-size:var(--fs-body-m);letter-spacing:var(--ls-eyebrow)}
.hata__baslik{margin:var(--space-4) 0 0;font-family:var(--font-display);
font-weight:var(--fw-black);font-size:var(--fs-display);line-height:var(--lh-display);
color:var(--white);max-width:16ch;text-wrap:pretty;hyphens:none}
.hata__lead{margin:var(--space-6) 0 0;max-width:52ch;font-size:var(--fs-h5);
line-height:var(--lh-h5);color:var(--text-on-dark-muted);text-wrap:pretty}
@media (max-width:1111px){
.hata{--ayak:480px;--isaret-h:440px;--isaret-sag:-140px}
.hata__baslik{font-size:var(--fs-display-t);line-height:var(--lh-display-t)}
}
@media (max-width:767px){
/* Motif metnin altına giriyor; koyu hero ile aynı sadeleştirme. İşaret de
buton bandından çıkıyor, hayalet butonun beyaz çerçevesi okunsun diye. */
.hata__cizgiler{display:none}
.hata{--isaret-h:340px;--isaret-sag:-320px;--isaret-batma:60px}
.hata__govde{min-height:0;padding-top:var(--space-13);padding-bottom:var(--space-13)}
.hata__baslik{font-size:var(--fs-h3);line-height:1.12}
.hata__lead{font-size:var(--fs-body-m);line-height:var(--lh-body-m)}
}
@media (forced-colors:active){
.hata [aria-hidden="true"]{display:none}
}
/* --- Referanslar sayfası: koyu duvar ---
Bölüm hero + rakam şeridi koyu bloğunu kesintisiz uzatıyor; altındaki saha
galerisi beyaza dönüyor. Anasayfadaki duvarla aynı kuruluş, kart ölçeğinde:
orada 40 logo, burada 58 kurumun künyesi. */
.ref-wall{background:var(--blue-950);color:var(--text-on-dark)}
.ref-wall__doku{position:absolute;inset:0;pointer-events:none;
background-image:radial-gradient(rgba(163,218,235,.09) 2px,transparent 2.1px);
background-size:68px 68px}
.ref-wall__bos{color:var(--blue-200)}
/* Duvarın başlık çubuğu: solda ne yapılacağı, sağda kaç kurum olduğu.
Çentik DS'in accent divider'ı (40×4), anasayfadaki künyeyle aynı işaret. */
.ref-bar{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
gap:var(--space-6);margin-bottom:var(--space-6);padding-bottom:var(--space-5);
border-bottom:var(--border-w) solid var(--border-default)}
.ref-wall .ref-bar{border-color:rgba(163,218,235,.22)}
.ref-bar__etiket{margin:0;font:var(--fw-bold) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-body);
letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--blue-300)}
.ref-bar__etiket::before{content:"";display:inline-block;vertical-align:middle;
width:var(--space-9);height:var(--rule-accent-w);margin-right:var(--space-5);
background:var(--brand)}
.ref-bar__sayi{margin:0;font:var(--fw-semibold) var(--fs-h5)/1.2 var(--font-heading);
color:var(--white)}
/* Çubuk koyu duvar için yazılmış; beyaz gövdede iki rengi de çeviriyoruz. */
.ref-bar--acik .ref-bar__etiket{color:var(--brand)}
.ref-bar--acik .ref-bar__sayi{color:var(--text-body)}
/* --- Sektör çipleri ---
İki blok, arada tek dikiş: etiket ve sayı. Anasayfadaki Tüm referanslar
bağlantısıyla aynı kuruluş, çip ölçeğinde. Köşe kare, hover yalnız renk. */
.filter-bar{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-9)}
.filter-bar__chip{display:inline-flex;align-items:stretch;min-height:var(--tap-min);padding:0;
background:rgba(163,218,235,.05);color:var(--white);
border:var(--border-w) solid rgba(163,218,235,.28);border-radius:var(--radius-none);
font-family:var(--font-body);cursor:pointer;transition:var(--transition-control)}
.filter-bar__chip span{display:flex;align-items:center;padding:0 var(--space-5);
font-size:var(--fs-micro);font-weight:var(--fw-semibold);line-height:1}
.filter-bar__chip b{display:flex;align-items:center;padding:0 var(--space-4);
border-left:var(--border-w) solid rgba(163,218,235,.28);color:var(--blue-300);
font-size:var(--fs-micro);font-weight:var(--fw-regular);line-height:1}
.filter-bar__chip:hover{border-color:var(--blue-300);background:rgba(163,218,235,.12)}
.filter-bar__chip:hover b{border-color:var(--blue-300)}
.filter-bar__chip.is-active{background:var(--brand);border-color:var(--brand)}
.filter-bar__chip.is-active b{border-color:rgba(255,255,255,.4);color:rgba(255,255,255,.78)}
/* --- Referans duvarı ---
Dikiş hücrenin sol ve üst kenarında, ızgara 1px sola/yukarı kayık ve kap
kırpıyor: dış kenarda çerçeve kalmıyor. Anasayfadaki 1px boşluklu duvarla
aynı sonuç, ama sütun sayısı ve eksik son satır bunu bozmuyor. */
.reference-wall-clip{overflow:hidden}
.reference-wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
margin:calc(var(--border-w) * -1) 0 0 calc(var(--border-w) * -1)}
/* Hücreler yarı saydam, doku içeriden de okunuyor; opak yapınca duvar dokunun
üstünde düz bir yama gibi duruyor. */
.reference{display:flex;flex-direction:column;
padding:var(--space-7) var(--space-6) var(--space-6);background:rgba(0,42,54,.5);
border-left:var(--border-w) solid rgba(163,218,235,.16);
border-top:var(--border-w) solid rgba(163,218,235,.16);
transition:background var(--dur-base) var(--ease-standard)}
.reference:hover{background:rgba(163,218,235,.07)}
.reference__logo{display:flex;align-items:center;height:56px;margin-bottom:var(--space-6)}
/* Logolar koyu zeminde beyaza dönüyor: invert koyu çizimi açığa çevirir, screen
siyahı hiç basmadığı için beyaz JPG zemini kutu bırakmıyor. Marka kuralı
gri %72 / hover'da renk — koyu zeminde renk okunmuyor, hover sönükten beyaza
açıyor. Aynı iş, ters yönde. Sönük logo eleme yok (müşteri kararı): ince
çizgili logolar burada sönük kalıyor, çözüm panelden kalın dosya yüklemek. */
.reference__logo img{max-width:74%;max-height:52px;object-fit:contain;
filter:grayscale(1) invert(1);mix-blend-mode:screen;opacity:.78;
transition:opacity var(--dur-base) var(--ease-standard)}
.reference:hover .reference__logo img{opacity:1}
/* Logosuz kurum: baş harfler kare bir kutuda. Bugün 58 kurumun hepsinde logo
var, kutu panelden logosuz kayıt girilirse devreye giriyor. */
.reference__initials{display:flex;align-items:center;justify-content:center;
width:56px;height:56px;border:var(--border-w) solid rgba(163,218,235,.26);
font:var(--fw-bold) var(--fs-h4)/1 var(--font-heading);letter-spacing:.02em;
color:var(--blue-300)}
.reference__name{margin:0 0 var(--space-5);font-family:var(--font-heading);
font-size:var(--fs-small);line-height:1.35;font-weight:var(--fw-semibold);
letter-spacing:0;color:var(--white);text-wrap:pretty}
/* Liste kartın tabanına yaslı: tek projeli kartla üç projeli kart aynı satırda
dururken ikisinin de alt kenarı aynı çizgide bitiyor. base.css listelere alt
boşluk ve sol dolgu veriyor, kart içinde ikisi de fazla. */
.reference__projects{margin:auto 0 0;padding:var(--space-4) 0 0;list-style:none;
border-top:var(--border-w) solid rgba(163,218,235,.16)}
.reference__project{display:flex;align-items:baseline;gap:var(--space-4);margin:0;
font-size:var(--fs-micro);line-height:1.45}
.reference__project + .reference__project{margin-top:var(--space-2)}
.reference__project-name{min-width:0;color:var(--blue-200)}
/* Metrekare sağa yaslı: 58 kartın sağ kenarında tek bir sayı sütunu oluşuyor,
duvar bir liste değil bir künye gibi okunuyor. Birim rakam şeridindeki
mantıkla bir adım küçük ve mavi — asıl bilgi sayı. */
.reference__project-area{margin-left:auto;flex:none;white-space:nowrap;
font-weight:var(--fw-semibold);color:var(--white)}
.reference__project-area i{font-style:normal;font-size:.84em;font-weight:var(--fw-regular);
margin-left:.3em;color:var(--blue-300)}
.reference.is-hidden{display:none}
.reference-empty{margin-top:var(--space-9);color:var(--blue-200)}
/* --- Saha galerisi ---
Beyaz bant, kareler arasında 1px dikiş: duvarın kuruluşu görselde sürüyor,
dört fotoğraf tek panorama gibi okunuyor. */
.ref-shots{background:var(--surface-page)}
.ref-bar--shots{align-items:flex-end;margin-bottom:var(--space-9);padding-bottom:var(--space-6)}
.ref-bar--shots .eyebrow{margin-bottom:var(--space-4)}
.ref-shots__baslik{margin:0;font-size:var(--fs-h3);line-height:1.15}
.ref-shots__kunye{margin:0;font-size:var(--fs-micro);line-height:1.4;color:var(--text-muted)}
@media (max-width:1111px){
.reference-wall{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:767px){
.ref-bar{flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.ref-bar__sayi{font-size:var(--fs-small)}
.ref-bar--shots{align-items:flex-start}
.ref-shots__baslik{font-size:var(--fs-h2-m);line-height:var(--lh-h2-m)}
.reference-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
.reference{padding:var(--space-5) var(--space-4) var(--space-4)}
.reference__logo{height:44px;margin-bottom:var(--space-4)}
.reference__logo img{max-height:40px;max-width:86%}
.reference__name{font-size:var(--fs-micro);margin-bottom:var(--space-4)}
/* Dar sütunda ad ve metrekare yan yana sıkışıyor: alt alta geçiyorlar ve sayı
sola hizalanıyor. 13px basamağı ölçekte yalnız eyebrow tokenında var. */
.reference__project{font-size:var(--fs-eyebrow);flex-wrap:wrap;gap:0}
.reference__project-area{margin-left:0;width:100%}
}
/* --- Anasayfa referans duvarı ---
Bölüm hero + rakam şeridi koyu bloğunu kesintisiz uzatıyor, altındaki ürün
grupları beyaza dönüyor. Kayan şerit yerine duran bir duvar: 40 logo aynı
anda görünüyor ve göz tek tek gezebiliyor.
Buradaki rgba'lar tokenların alfalı hali: (163,218,235)=blue-200,
(0,42,54)=blue-950, (0,146,188)=blue-500. Tokenlar alfa taşımıyor. */
.ref-band{overflow:hidden;background:var(--blue-950);color:var(--text-on-dark)}
/* Nokta ızgarası markanın kendi dokusu; hero'nun zemin bandında da 68px adımla
duruyor, bölüm onunla aynı ölçekte. */
.ref-band__doku{position:absolute;inset:0;pointer-events:none;
background-image:radial-gradient(rgba(163,218,235,.11) 2px,transparent 2.1px);
background-size:68px 68px}
/* Işık kadraj dışındaki bir armatür gibi sağ üst köşeden giriyor; duvara
yalnız sönük kuyruğu değiyor, hücrelerin zemini boyunca eşit kalsın diye. */
.ref-band__isik{position:absolute;top:-260px;right:-200px;
width:1000px;height:760px;pointer-events:none;
background:radial-gradient(ellipse at 50% 50%,rgba(0,146,188,.36),rgba(0,146,188,0) 66%);
filter:blur(40px)}
.ref-band__head{margin-bottom:var(--space-11)}
/* Etiket başlığın ilk satırıyla aynı baseline'da: flex baseline hizası çok
satırlı başlıkta ilk satırı, künye sütununda ilk öğeyi (etiketi) esas alıyor,
ikisi tam aynı çizgiye oturuyor. */
.ref-band__baslik-satir{display:flex;align-items:baseline;gap:var(--space-9);flex-wrap:wrap}
/* Poppins 48'lik standart h2 yerine display basamağı: bölüm sıradan bir başlıkla
değil hero'nun sesiyle açılıyor, ikinci satır mavi blokta.
width:max-content kutu satırın kendisi kadar kalsın diye — vurgu parçası block
olunca başlık iki ayrı satır kutusuna ayrılıyor ve max-content en geniş satırı
oluyor. max-width:100% uzun bir çevirinin taşmasına karşı güvenlik. */
.ref-band__title{margin:0;font-family:var(--font-display);font-weight:var(--fw-black);
font-size:var(--fs-display);line-height:1.08;letter-spacing:var(--ls-display);
color:var(--white);width:max-content;max-width:100%;
/* :lang(de) tirelemesi display boyutunda başlığı kesiyor, hero'da da kapalı */
-webkit-hyphens:none;hyphens:none;text-wrap:pretty}
/* max-width 100%+.18em, düz 100% değil: kutu soldan .18em taşıyor (metin üstteki
satırla hizalansın diye) ve sağ dolgusu da .18em. Düz 100% verilince vurgu
parçası başlığın en uzun satırı olduğu her dilde (Fransızca) tam bir dolgu
payı kadar dar kalıp ikiye bölünüyordu. Sol -.18em ile birlikte sağ kenar
tam kabın kenarına oturuyor, taşma çıkmıyor. */
.ref-band__title span{display:block;width:max-content;max-width:calc(100% + .18em);
background:var(--blue-500);padding:0 .18em;margin-left:-.18em}
.ref-band__lead{margin:var(--space-6) 0 0;max-width:52ch;
font-size:var(--fs-h5);line-height:var(--lh-h5);color:var(--blue-200)}
/* Künye: etiket ve altında kurum sayısı. Rakam şeridi hemen üstte ve orada
720.000+ m² zaten yazılı; burada taze rakam kurum sayısı.
13px'lik eyebrow display ölçeğindeki başlığın yanında kayboluyordu: etiket
--fs-h5'e çıkıyor, çentiği de büyüyor (40×4, DS'in accent divider'ı). Çizgi
::before ile inline-block — flex öğesi olsaydı baseline'ı metnin değil
kutunun altı olurdu ve başlıkla aynı çizgiye oturmazdı. */
.ref-band__kunye{flex:none;display:flex;flex-direction:column;gap:var(--space-3)}
.ref-band__etiket{font:var(--fw-bold) var(--fs-h5)/1 var(--font-body);
letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--blue-300);
white-space:nowrap}
.ref-band__etiket::before{content:"";display:inline-block;vertical-align:middle;
width:var(--space-9);height:var(--space-1);margin-right:var(--space-5);
background:var(--brand)}
/* Sayı çentiğin değil etiketin altına hizalanıyor: girinti olmadan iki satır
çentik genişliği kadar kayık başlıyor (40px çentik + 20px boşluk). */
.ref-band__sayi{margin-left:calc(var(--space-9) + var(--space-5));
font:var(--fw-semibold) var(--fs-h5)/1.2 var(--font-heading);color:var(--white)}
/* Künyenin ikinci konumu: kabın sağ üst köşesi. Müşteri hangisini seçtiği
konusunda net değil, markup'ta kullanılmıyor — tek sınıf eklemekle geçilsin
diye duruyor. Sağa yaslı olduğu için çentik metnin önünde değil üstünde. */
.ref-band__kunye--kose{margin-left:auto;align-self:flex-start;text-align:right}
.ref-band__kunye--kose .ref-band__etiket::before{display:block;margin:0 0 var(--space-4) auto}
.ref-band__kunye--kose .ref-band__sayi{margin-left:0}
/* Duvar: ayırıcılar kapsayıcının zemini, hücreler onun üstünde — 1px boşluklar
çizgi gibi görünüyor ve duvarın dış kenarında çerçeve kalmıyor. Hücre zemini
blue-950'nin yarı saydamı: altındaki doku içeride devam ediyor, opak yapınca
duvar dokunun üstünde düz bir yama gibi duruyordu.
Satır yüksekliği hücrede değil ızgarada. */
.ref-band__wall{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));
grid-auto-rows:104px;gap:var(--border-w);background:rgba(163,218,235,.14)}
.ref-band__cell{display:flex;align-items:center;justify-content:center;
padding:var(--space-5);background:rgba(0,42,54,.55);
transition:background var(--dur-base) var(--ease-standard)}
.ref-band__cell:hover{background:rgba(163,218,235,.09)}
/* Logoların koyu zeminde beyaza dönmesi. Gri JPG'ler beyaz zeminli: invert
beyazı siyaha, koyu çizimi açığa çeviriyor; screen siyahı hiç basmadığı için
kutu kalmıyor, yalnız marka görünüyor. Kontrast/parlaklık eklemek alt
satırları (Tofaş'ın "Türk Otomobil Fabrikası") yiyor — düz invert en temizi.
Marka kuralı "logolar gri %72, hover'da renk" diyor; koyu zeminde renk
okunmuyor, hover sönükten beyaza açıyor. Aynı iş, ters yönde.
İnce çizgili ya da açık renkli logolar bu zeminde sönük kalıyor (Şişecam,
Parkcam); eleme yok, çözüm panelden daha kalın bir dosya yüklemek. */
.ref-band__cell img{max-width:78%;max-height:46px;object-fit:contain;
filter:grayscale(1) invert(1);mix-blend-mode:screen;opacity:.8;
transition:opacity var(--dur-base) var(--ease-standard)}
.ref-band__cell:hover img{opacity:1}
.ref-band__foot{margin-top:var(--space-10)}
/* Bölüm sonu bağlantısı, yalnız bu duvarda. more-link koyu zeminde çerçeveden
ibaret kalıyor ve zeminle aynı tonda duruyordu; bu iki dolu bloktan oluşuyor:
etiket bloğu ve ok kutusu, arada çizgi yok. Hero'nun butonuyla aynı aileden
ama onun kadar iri değil — o birincil CTA, bu bölüm sonu.
flex:1 mecburi: 480 altında blok tam genişliğe geçince metin bloğu büyümezse
ok kutusunun sağında boşluk kalıyor. */
.ref-cta{display:inline-flex;align-items:stretch;max-width:100%;text-decoration:none}
.ref-cta__text{flex:1 1 auto;min-width:0;background:var(--white);
display:flex;flex-direction:column;justify-content:center;gap:var(--space-1);
padding:var(--space-5) var(--space-8);transition:var(--transition-control)}
.ref-cta__label{font:var(--fw-bold) var(--fs-small)/1.25 var(--font-heading);
letter-spacing:.06em;text-transform:uppercase;color:var(--blue-950)}
.ref-cta__meta{font:var(--fw-regular) var(--fs-micro)/1.3 var(--font-body);color:var(--ink-600)}
/* Ok kutusu koyu olduğu ilk denemede zeminle aynı tondaydı ve kutu değil
boşlukta duran bir ok gibi görünüyordu; ton zeminden ayrışmak zorunda.
Hover DS'in kendi tersine çevirmesi: mavi dolgu kömür dolguya döner. */
.ref-cta__go{flex:none;width:var(--control-h-xl);
display:flex;align-items:center;justify-content:center;
background:var(--brand);color:var(--white);transition:var(--transition-control)}
.ref-cta__go svg{width:18px;height:18px;transition:var(--transition-nudge)}
.ref-cta:hover .ref-cta__go{background:var(--ink-800)}
.ref-cta:hover .ref-cta__go svg{transform:translateX(var(--nudge-x))}
@media (max-width:1111px){
.ref-band__title{font-size:var(--fs-display-t);line-height:var(--lh-display-t)}
.ref-band__wall{grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:96px}
.ref-band__cell--tablet-gizle{display:none}
}
@media (max-width:767px){
/* Dar ekranda künye başlığın üstüne dönüyor; yan yana duracak yer yok. order
ile taşınıyor, DOM sırası (önce başlık) bozulmuyor. Çentiğin genişliğince
girinti de kalkıyor, iki satır sola hizalı başlıyor. */
.ref-band__baslik-satir{flex-direction:column;gap:var(--space-5)}
.ref-band__kunye{order:-1;gap:var(--space-2)}
.ref-band__etiket{font-size:var(--fs-small)}
.ref-band__sayi{margin-left:0}
.ref-band__kunye--kose{margin-left:0;text-align:left}
.ref-band__kunye--kose .ref-band__etiket::before{display:inline-block;
vertical-align:middle;margin:0 var(--space-5) 0 0}
/* Display'in mobil adımı (28px) bu ifadeye zayıf geliyor; hero da aynı
sebeple h3 basamağını kullanıyor. */
.ref-band__title{font-size:var(--fs-h3);line-height:1.12}
.ref-band__lead{font-size:var(--fs-body-m);line-height:var(--lh-body-m)}
.ref-band__wall{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:84px}
.ref-band__cell{padding:var(--space-4)}
.ref-band__cell img{max-height:36px;max-width:86%}
.ref-band__cell--mobil-gizle{display:none}
}
@media (max-width:480px){
.ref-cta{display:flex;width:100%}
.ref-cta__text{padding:var(--space-5) var(--space-6)}
}
/* --- CTA bandı --- */
.cta-band__inner{position:relative;display:grid;grid-template-columns:1.3fr .7fr;
gap:var(--space-11);align-items:center}
.cta-band__title{color:var(--white);max-width:16ch;text-wrap:balance}
.cta-band__lead{margin:var(--space-5) 0 0;max-width:52ch;font-size:var(--fs-h5);
line-height:var(--lh-h5);color:var(--text-on-dark-muted);text-wrap:pretty}
.cta-band__actions{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.cta-band__phone{color:var(--white);border-color:rgba(255,255,255,.42)}
.cta-band__phone:hover{background:var(--white);color:var(--brand-deep);border-color:var(--white)}
@media (max-width:1111px){
.cta-band__inner{grid-template-columns:1fr;gap:var(--space-9)}
}
/* --- Saydam header: koyu bantla açılan sayfalarda hero'nun üstünde durur,
kaydırınca opaklaşır.
--header-h ilk boyamada doğru olsun diye burada sabit; JS yüklendikten
sonra gerçek yükseklikle güncelliyor. Değer = dikey padding (2×24) +
sağdaki CTA butonunun yüksekliği (50) + alt çizgi (1). --- */
:root{ --header-h:99px; }
.site-header--overlay{background:transparent;border-bottom-color:transparent}
.site-header--overlay + main{margin-top:calc(-1 * var(--header-h))}
.site-header--overlay + main > *:first-child{padding-top:var(--header-h)}
/* Anasayfa hero'da header rezervi kabın kendi padding-top'unda (--space-15,
header 99px). Genel kural üstüne bir --header-h daha ekleyince hem çizgilerin
ayağı hem zemin bandı bir header boyu aşağı kayıyordu. */
.site-header--overlay + main > .hero{padding-top:0}
/* Koyu iç sayfa hero'sunda da rezerv kabın kendi padding-top'unda (--space-15),
aynı gerekçe: iki rezerv üst üste binince motif ve metin bir header boyu
aşağı kayıyor. */
.site-header--overlay + main > .page-hero-dark,
.site-header--overlay + main > .hata{padding-top:0}
.site-header--overlay .site-header__logo img{filter:brightness(0) invert(1)}
.site-header--overlay .nav__link,
.site-header--overlay .site-header__phone{color:var(--white)}
.site-header--overlay .site-header__phone i{color:var(--blue-200)}
.site-header--overlay .nav__link:hover,
.site-header--overlay .nav__item.is-active > .nav__link{color:var(--white);border-bottom-color:var(--white)}
.site-header--overlay .site-header__phone:hover{color:var(--blue-200)}
.site-header--overlay .site-header__cta{color:var(--white);border-color:rgba(255,255,255,.5)}
.site-header--overlay .site-header__cta:hover{background:var(--white);color:var(--brand-deep);border-color:var(--white)}
.site-header--overlay .site-header__toggle{border-color:rgba(255,255,255,.5);color:var(--white)}
.site-header--overlay .site-header__toggle:hover{border-color:var(--white);color:var(--white)}
/* Kaydırınca yarı saydam cam. Tasarım sistemi --blur-glass'ı zaten "ileride
yapışkan header için" diye ayırmıştı; Teknik Föy prototipi de bu muameleyi
kullanıyor. backdrop-filter desteklenmeyen tarayıcıda zemin opaklaşır. */
.site-header--overlay.is-solid{background:rgba(255,255,255,.82);
border-bottom-color:var(--border-hairline);box-shadow:var(--shadow-sm)}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
.site-header--overlay.is-solid{background:rgba(255,255,255,.66);
-webkit-backdrop-filter:var(--blur-glass);backdrop-filter:var(--blur-glass)}
}
.site-header--overlay.is-solid .site-header__logo img{filter:none}
.site-header--overlay.is-solid .nav__link,
.site-header--overlay.is-solid .site-header__phone{color:var(--text-body)}
.site-header--overlay.is-solid .site-header__phone i{color:var(--brand)}
.site-header--overlay.is-solid .nav__link:hover,
.site-header--overlay.is-solid .nav__item.is-active > .nav__link{color:var(--brand);border-bottom-color:var(--brand)}
.site-header--overlay.is-solid .site-header__cta{color:var(--brand);border-color:var(--brand)}
.site-header--overlay.is-solid .site-header__cta:hover{background:var(--brand);color:var(--white)}
.site-header--overlay.is-solid .site-header__toggle{border-color:var(--border-default);color:var(--text-body)}
/* Saydam header'da açılan menü panelinin okunur kalması için opak zemin */
.site-header--overlay .nav-mobile{background:var(--white)}
/* Mobil menü açıkken header satırının arkasında koyu hero kalmıyor: main sabit
--header-h kadar yukarı çekiliyor, header ise menü boyu uzuyor. Saydam
bırakırsak beyaz logo ve hamburger beyaz gövdenin üstünde kayboluyor —
kaydırınca .is-solid gelip ortaya çıkıyordu. Menü açıkken opak beyaz yapıyoruz
(cam efekti değil; altındaki panel de düz beyaz). */
.site-header--overlay.has-open-nav{background:var(--white);
border-bottom-color:var(--border-hairline);backdrop-filter:none}
.site-header--overlay.has-open-nav .site-header__logo img{filter:none}
.site-header--overlay.has-open-nav .site-header__phone{color:var(--text-body)}
.site-header--overlay.has-open-nav .site-header__phone i{color:var(--brand)}
.site-header--overlay.has-open-nav .site-header__toggle{
border-color:var(--border-default);color:var(--text-body)}
@media (max-width:767px){
:root{ --header-h:91px; }
}
/* Tasarım imzası — marka adı kalın, gerisi normal ağırlıkta */
.site-footer__credit a,.site-footer__credit span{display:inline-flex;gap:.35em;
color:rgba(255,255,255,.78)}
.site-footer__credit strong{font-weight:var(--fw-bold);color:var(--white)}
.site-footer__credit a:hover{color:var(--white)}
/* --- SectionHeading --- */
.section-heading{max-width:62ch}
.section-heading__lead{margin:var(--space-6) 0 0;font-size:var(--fs-h5);
line-height:var(--lh-h5);color:var(--text-muted);text-wrap:pretty}
.section-heading--on-dark h2{color:var(--white)}
.section-heading--on-dark .section-heading__lead{color:var(--text-on-dark-muted)}
/* --- CheckList: markanın tek liste imi check-icon.svg --- */
.check-list{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:repeat(var(--check-cols,1),minmax(0,1fr));
gap:var(--space-6) var(--space-11)}
.check-list--2{--check-cols:2}
.check-list--3{--check-cols:3}
.check-list li{display:flex;gap:var(--space-4);align-items:flex-start;margin:0;text-wrap:pretty}
.check-list img{flex:none;width:24px;height:24px;margin-top:3px}
.check-list--on-dark li{color:var(--text-on-dark)}
@media (max-width:767px){ .check-list--2,.check-list--3{--check-cols:1} }
/* --- StatementCard: markanın imza plakası, gölgesi sola-yukarı --- */
.statement-card{padding:var(--space-12);border-radius:var(--radius-none);
background:var(--surface-card);color:var(--text-body);
box-shadow:var(--shadow-lift);transition:var(--transition-surface)}
.statement-card--flat{box-shadow:none}
.statement-card--dark{background:var(--surface-dark);color:var(--text-on-dark)}
.statement-card--brand{background:var(--surface-brand);color:var(--text-on-brand)}
.statement-card--tight{padding:var(--space-9)}
/* --- Sistem indeksi: numaralı satır listesi + yapışkan önizleme --- */
.solution-index{display:grid;grid-template-columns:1.25fr .75fr;
gap:var(--space-12);align-items:start}
.solution-index__list{min-width:0}
.solution-index__aside{position:sticky;top:calc(var(--header-h) + var(--space-5))}
.solution-row{display:grid;grid-template-columns:46px 1fr auto;gap:var(--space-6);
align-items:baseline;padding:var(--space-6) 0;
border-bottom:var(--border-w) solid var(--border-hairline);color:var(--text-body)}
.solution-row:hover{color:var(--brand)}
.solution-row__no{font-family:var(--font-heading);font-size:var(--fs-micro);
font-weight:var(--fw-bold);color:var(--brand)}
.solution-row__title{display:block;font-family:var(--font-heading);
font-size:var(--fs-h5);line-height:var(--lh-h5);font-weight:var(--fw-semibold);color:inherit}
.solution-row__spec{display:block;margin-top:4px;font-size:var(--fs-micro);color:var(--text-muted)}
.solution-row__go{font-size:var(--fs-micro);color:var(--brand);font-weight:var(--fw-semibold);
white-space:nowrap;transition:var(--transition-nudge)}
.solution-row:hover .solution-row__go{transform:translateX(var(--nudge-x))}
.solution-row__cat{font-size:var(--fs-micro);letter-spacing:.06em;
text-transform:uppercase;color:var(--text-faint);white-space:nowrap}
.solution-preview__cat{font-family:var(--font-body);font-size:var(--fs-eyebrow);
font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow);
text-transform:uppercase;color:var(--brand)}
.solution-preview__title{margin-top:var(--space-4);font-size:var(--fs-h5);
line-height:var(--lh-h5);font-weight:var(--fw-semibold);color:var(--text-body);letter-spacing:0}
.solution-preview__summary{margin:var(--space-4) 0 var(--space-7);
font-size:var(--fs-small);line-height:var(--lh-small);color:var(--text-muted)}
.solution-preview__body{padding-top:var(--space-7)}
@media (max-width:1111px){
.solution-index{grid-template-columns:1fr;gap:var(--space-9)}
.solution-index__aside{display:none}
}
@media (max-width:767px){
.solution-row{grid-template-columns:32px 1fr;gap:var(--space-4)}
.solution-row__go,.solution-row__cat{display:none}
}
/* --- Sekmeler --- */
.tabs{display:flex;flex-wrap:wrap;gap:0 var(--space-7);
border-bottom:var(--border-w) solid var(--border-hairline);margin-bottom:var(--space-11)}
.tabs__tab{background:none;border:0;cursor:pointer;padding:0 0 var(--space-5);
font-family:var(--font-heading);font-size:var(--fs-h5);font-weight:var(--fw-semibold);
color:var(--text-muted);border-bottom:var(--rule-accent-w) solid transparent;
margin-bottom:-1px;transition:var(--transition-control);text-decoration:none}
.tabs__tab:hover{color:var(--brand)}
.tabs__tab.is-active{color:var(--brand);border-bottom-color:var(--brand)}
/* Dar ekranda iki belge adı yan yana sığmıyor — Rusça karşılıkları 40
karaktere çıkıyor ve şeridi taşırıyor. Alt alta iniyor, etkin belge alttaki
çizgi yerine soldaki marka çentiğiyle işaretleniyor. */
@media (max-width:767px){
.tabs{flex-direction:column;gap:0;border-bottom:0;margin-bottom:var(--space-9)}
.tabs__tab{padding:var(--space-4) 0 var(--space-4) var(--space-5);
margin-bottom:0;font-size:var(--fs-body-m);
border-bottom:0;border-left:var(--rule-accent-w) solid var(--border-hairline)}
.tabs__tab.is-active{border-left-color:var(--brand)}
}
/* Kat yapısı: katalogdaki kesit diyagramının düz karşılığı. Satırlar üst
üste yığılı katlar; en alttaki beton zemin koyu zeminle ayrılıyor.
Numara yüzeyden değil betondan sayılıyor — uygulama sırası o yön.
Yalnız çözümler listesi kullanıyor (--mini); detay sayfası kesit
bileşenine geçti. */
.layer-stack{list-style:none;margin:var(--space-6) 0 var(--space-4);padding:0;
border:var(--border-w) solid var(--border-hairline)}
/* base.css her li'ye alt boşluk veriyor; satırların arasında 1px dikiş yerine
8px boşluk, sonuncunun altında da kabın kenarına kadar boş bir şerit kalıyordu. */
.layer-stack__row{display:flex;align-items:center;gap:var(--space-6);margin:0;
padding:var(--space-5) var(--space-6);
border-bottom:var(--border-w) solid var(--border-hairline);
background:var(--surface-card)}
.layer-stack__row:last-child{border-bottom:0}
.layer-stack__no{flex:none;display:inline-flex;align-items:center;justify-content:center;
min-width:var(--space-8);height:var(--space-8);
background:var(--blue-50);color:var(--brand-deep);
font-size:var(--fs-micro);font-weight:var(--fw-bold)}
.layer-stack__name{font-size:var(--fs-small);line-height:var(--lh-small);
color:var(--text-body)}
.layer-stack__row--base{background:var(--ink-100)}
.layer-stack__row--base .layer-stack__no{background:var(--ink-300);color:var(--white)}
.layer-stack__row--base .layer-stack__name{font-weight:var(--fw-semibold);
color:var(--text-muted)}
.detail__intro{font-size:var(--fs-h5);line-height:var(--lh-h5);color:var(--text-body)}
.bullet-grid{list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-3) var(--space-9)}
.bullet-grid li{display:flex;gap:var(--space-4);align-items:flex-start;margin:0;
font-size:var(--fs-small);line-height:var(--lh-small);color:var(--text-body)}
.bullet-grid li::before{content:"";flex:none;width:6px;height:6px;margin-top:9px;
background:var(--brand)}
.detail-cta__eyebrow{font-family:var(--font-body);font-size:var(--fs-eyebrow);
font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
color:var(--blue-300);margin-bottom:var(--space-5)}
.detail-cta__title{font-family:var(--font-heading);font-size:var(--fs-h5);
line-height:var(--lh-h5);font-weight:var(--fw-semibold);color:var(--white)}
.detail-cta__text{margin:var(--space-4) 0 var(--space-7);font-size:var(--fs-small);
line-height:var(--lh-small);color:var(--text-on-dark-muted)}
/* --- Bölüm üst çubuğu (benzer sistemler) --- */
.section-bar{display:flex;flex-wrap:wrap;align-items:baseline;
justify-content:space-between;gap:var(--space-6);padding-bottom:var(--space-7);
border-bottom:var(--border-w) solid var(--border-hairline);margin-bottom:var(--space-4)}
.section-bar__link{display:inline-flex;align-items:center;gap:var(--space-3);
font-size:var(--fs-small);font-weight:var(--fw-semibold);color:var(--brand)}
.section-bar__link i{font-size:12px;transition:var(--transition-nudge)}
.section-bar__link:hover{color:var(--brand-deep)}
.section-bar__link:hover i{transform:translateX(var(--nudge-x))}
/* "Tümünü gör" bağlantısı. İki parça: solda etiket + sayı, sağda ok kutusu.
Çerçeveli düz butondan daha ağır bassın diye; bölüm sonunda tek başına
duruyor ve tıklanacak yer olduğu belli olsun istiyoruz.
Köşeli ve tek süreli — hover rengi değiştirir, boyutu değil; ok kayar. */
.more-link{display:inline-flex;align-items:stretch;max-width:100%;
background:var(--surface-card);
border:var(--border-w) solid var(--border-hairline);
transition:var(--transition-surface)}
.more-link:hover{border-color:var(--brand);box-shadow:var(--shadow-md)}
.more-link__text{display:flex;flex-direction:column;justify-content:center;
gap:var(--space-1);padding:var(--space-5) var(--space-8);min-width:0}
.more-link__label{font-family:var(--font-body);font-size:var(--fs-micro);
font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow);
text-transform:uppercase;color:var(--brand);
transition:var(--transition-control)}
.more-link:hover .more-link__label{color:var(--brand-deep)}
.more-link__meta{font-size:var(--fs-small);line-height:var(--lh-small);
color:var(--text-muted)}
.more-link__go{flex:none;display:flex;align-items:center;justify-content:center;
width:var(--control-h-md);background:var(--brand);color:var(--white);
font-size:16px;transition:var(--transition-control)}
.more-link__go i{transition:var(--transition-nudge)}
.more-link:hover .more-link__go{background:var(--brand-deep)}
.more-link:hover .more-link__go i{transform:translateX(var(--nudge-x))}
/* Koyu zeminde: çerçeve ve etiket beyaza döner, ok kutusu beyaz kalır */
.section--dark .more-link{background:transparent;border-color:rgba(255,255,255,.35)}
.section--dark .more-link:hover{border-color:var(--white)}
.section--dark .more-link__label{color:var(--white)}
.section--dark .more-link:hover .more-link__label{color:var(--white)}
.section--dark .more-link__meta{color:var(--blue-200)}
.section--dark .more-link__go{background:var(--white);color:var(--brand-deep)}
.section--dark .more-link:hover .more-link__go{background:var(--blue-100)}
@media (max-width:480px){
.more-link{display:flex;width:100%}
/* flex:1 olmadan metin bloğu büyümüyor ve ok kutusunun sağında boşluk kalıyor */
.more-link__text{flex:1 1 auto;padding:var(--space-5) var(--space-6)}
}
/* --- Hero'nun sağ sütunundaki liste plakası ---
kunye-plaka'nın kardeşi: satırları link ve sayı kendi sütununda duruyor,
birkaç satır alt alta gelince rakamlar tek çizgide okunuyor. Ürünler
sayfasında katalog künyesi, kategori sayfasında kardeş kategoriler. */
.liste-plaka{background:rgba(0,42,54,.62);
border:var(--border-w) solid rgba(163,218,235,.22);
padding:var(--space-7) var(--space-7) var(--space-6)}
.liste-plaka__baslik{margin:0 0 var(--space-5);
font:var(--fw-bold) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-body);
letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--blue-300)}
.liste-plaka__liste{list-style:none;margin:0;padding:0}
.liste-plaka__liste li{margin:0}
.liste-plaka__liste a,.liste-plaka__satir{display:flex;align-items:baseline;
gap:var(--space-5);padding:var(--space-4) 0;
border-top:var(--border-w) solid rgba(163,218,235,.16);
color:var(--white);transition:var(--transition-control)}
.liste-plaka__liste li:first-child a,
.liste-plaka__liste li:first-child .liste-plaka__satir{border-top:0}
.liste-plaka__liste a:hover{color:var(--blue-200)}
.liste-plaka__ad{flex:1;min-width:0;
font:var(--fw-semibold) var(--fs-small)/1.3 var(--font-heading)}
.liste-plaka__sayi{flex:none;font:var(--fw-regular) var(--fs-micro)/1 var(--font-body);
color:var(--blue-300)}
.liste-plaka__not{margin:var(--space-5) 0 0;padding-top:var(--space-4);
border-top:var(--border-w) solid rgba(163,218,235,.16);
font-size:var(--fs-micro);color:var(--blue-200)}
/* Altı satırdan uzunu tek sütunda hero'yu iki katına çıkarıyor ve solda
kocaman bir boşluk kalıyor; bileşen o eşikte iki sütuna geçiyor. İki sütunda
ilk satır iki hücre, ikisinde de üst çizgi kalkıyor. */
.liste-plaka--genis .liste-plaka__liste{display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-7)}
.liste-plaka--genis .liste-plaka__liste li:nth-child(2) a{border-top:0}
/* --- Koyu raf ---
Ürünler ve kategori sayfası hero + rakam şeridinin koyu bloğunu kesintisiz
sürdürüyor; referans duvarıyla aynı kuruluş, şerit ölçeğinde. */
.raf{background:var(--blue-950);color:var(--text-on-dark)}
.raf__doku{position:absolute;inset:0;pointer-events:none;
background-image:radial-gradient(rgba(163,218,235,.09) 2px,transparent 2.1px);
background-size:68px 68px}
.raf__bos{position:relative;color:var(--blue-200)}
/* Kategori sayfasında ızgaranın hemen ardından cta-band geliyor: iki koyu ton
arasında basamak okunmasın diye bant rafın zeminini alıyor. */
.raf + .section--dark{background:var(--blue-950)}
/* Şerit: solda fotoğraf, ortada kimlik, sağda dört minyatür. Fotoğraf tam
kanamıyor — kendi kutusunda duruyor ki scrim'in kenarı belli olsun ve
hairline ızgara sürsün. */
.raf-serit{position:relative;display:grid;
grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr) minmax(0,.5fr);
align-items:stretch;
border:var(--border-w) solid rgba(163,218,235,.16);
background:rgba(0,42,54,.5);
transition:background var(--dur-base) var(--ease-standard)}
.raf-serit + .raf-serit{border-top:0}
.raf-serit:hover{background:rgba(163,218,235,.06)}
.raf-serit__foto{position:relative;overflow:hidden;min-height:260px}
.raf-serit__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Fotoğraf koyu bloğun bir parçası olmalı, üstünde duran bir kart değil:
scrim onu zemine bağlıyor ve sağ kenarda tamamen zemine dönüyor. */
.raf-serit__scrim{position:absolute;inset:0;
background:linear-gradient(90deg,rgba(0,42,54,.45) 0%,rgba(0,42,54,.72) 55%,rgba(0,42,54,.96) 100%)}
.raf-serit__govde{display:flex;flex-direction:column;gap:var(--space-5);
padding:var(--space-9) var(--space-9) var(--space-8);min-width:0;
border-left:var(--border-w) solid rgba(163,218,235,.16)}
.raf-serit__ust{display:flex;align-items:baseline;gap:var(--space-5)}
.raf-serit__no{margin:0;flex:none;font:var(--fw-bold) var(--fs-small)/1 var(--font-heading);
color:var(--blue-300)}
.raf-serit__ad{margin:0;flex:1;min-width:0;font-size:var(--fs-h4);line-height:1.15;
font-weight:var(--fw-semibold);letter-spacing:0;color:var(--white)}
.raf-serit__sayi{margin:0;flex:none;font-size:var(--fs-micro);color:var(--blue-300)}
.raf-serit__ozet{margin:0;max-width:56ch;font-size:var(--fs-small);
line-height:var(--lh-small);color:var(--blue-200)}
/* Kategori çipleri: sektör çipleriyle aynı aile, aynı ölçü. */
.kat-cip{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-wrap:wrap;
gap:var(--space-3)}
.kat-cip li{margin:0}
.kat-cip a{display:inline-flex;align-items:stretch;min-height:var(--tap-min);
background:rgba(163,218,235,.05);color:var(--white);
border:var(--border-w) solid rgba(163,218,235,.28);
transition:var(--transition-control)}
.kat-cip a span{display:flex;align-items:center;padding:0 var(--space-5);
font-size:var(--fs-micro);font-weight:var(--fw-semibold);line-height:1}
.kat-cip a b{display:flex;align-items:center;padding:0 var(--space-4);
border-left:var(--border-w) solid rgba(163,218,235,.28);color:var(--blue-300);
font-size:var(--fs-micro);font-weight:var(--fw-regular);line-height:1}
.kat-cip a:hover{background:var(--brand);border-color:var(--brand)}
.kat-cip a:hover b{border-color:rgba(255,255,255,.4);color:rgba(255,255,255,.78)}
/* Altıdan çok alt kategoride çip yerine iki sütunlu satır listesi: on çip üç
sıraya taşıp şeridin kimliğini yiyordu, satırlar hizalı okunuyor ve sayılar
tek sütunda duruyor. İlk satırdaki iki hücrede üst çizgi kalkıyor. */
.kat-liste{list-style:none;margin:auto 0 0;padding:0;display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--space-9)}
.kat-liste li{margin:0}
.kat-liste li:first-child a,.kat-liste li:nth-child(2) a{border-top:0}
.kat-liste a{display:flex;align-items:center;gap:var(--space-4);
padding:var(--space-4) 0;border-top:var(--border-w) solid rgba(163,218,235,.16);
color:var(--white);transition:var(--transition-control)}
.kat-liste a:hover{color:var(--blue-200)}
.kat-liste__ad{flex:1;min-width:0;font-size:var(--fs-small);line-height:1.35}
.kat-liste__sayi{flex:none;font-size:var(--fs-micro);color:var(--blue-300)}
.kat-liste__ok{flex:none;width:var(--space-5);font-size:var(--fs-eyebrow);
color:var(--blue-300);transition:var(--transition-nudge)}
.kat-liste a:hover .kat-liste__ok{transform:translateX(var(--nudge-x))}
/* Minyatürler: 2x2, arkalarında sönük bir ışık. Koyu zeminde koyu ambalajlar
(siyah kapaklı kovalar, lacivert tenekeler) zemine gömülüyordu; ışık onları
ayırıyor ve vitrin armatürü gibi okunuyor. Görseller nesnenin sınırına
kırpılmış, ölçeği bu yüzden kutu veriyor. */
.raf-serit__ornek{list-style:none;margin:0;padding:var(--space-7);
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);
align-content:center;
border-left:var(--border-w) solid rgba(163,218,235,.16)}
.raf-serit__ornek li{margin:0;position:relative;aspect-ratio:1/1}
.raf-serit__ornek li::before{content:"";position:absolute;inset:0;
background:radial-gradient(circle at 50% 55%,rgba(163,218,235,.14),rgba(163,218,235,0) 68%)}
/* Kutu kare, görsel içinde mutlak duruyor. Kırpılmış dosyalar kendi sınırına
oturduğu için kare değil; akışta bırakılınca uzun bir teneke kutuyu aşağı
büyütüyor ve yan yana iki ürün yine farklı ölçekte çıkıyordu. */
.raf-serit__ornek img{position:absolute;top:14%;left:14%;width:72%;height:72%;
object-fit:contain}
/* --- Koyu ürün ızgarası ---
Hücreler yarı saydam, doku içeriden okunuyor. Görseller şeffaf PNG olduğu
için koyu zeminde beyaz kutu çıkmıyor; 150 ürün görselinden 14'ünün ortalama
parlaklığı 90'ın altında (siyah kapaklı kovalar, lacivert tenekeler) ve
zemine gömülüyorlar — kutunun arkasındaki sönük ışık onları ayırıyor. */
.raf-izgara-clip{position:relative;overflow:hidden}
.raf-izgara{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
margin:calc(var(--border-w) * -1) 0 0 calc(var(--border-w) * -1)}
.raf-kart{display:flex;flex-direction:column;padding:var(--space-6);
background:rgba(0,42,54,.5);
border-left:var(--border-w) solid rgba(163,218,235,.16);
border-top:var(--border-w) solid rgba(163,218,235,.16);
transition:background var(--dur-base) var(--ease-standard)}
.raf-kart:hover{background:rgba(163,218,235,.07)}
.raf-kart__kutu{position:relative;aspect-ratio:1/1;margin-bottom:var(--space-6)}
.raf-kart__kutu::before{content:"";position:absolute;inset:0;
background:radial-gradient(circle at 50% 56%,rgba(163,218,235,.15),rgba(163,218,235,0) 66%)}
.raf-kart__kutu img{position:absolute;top:13%;left:13%;width:74%;height:74%;
object-fit:contain;transition:transform var(--dur-slow) var(--ease-out)}
.raf-kart:hover .raf-kart__kutu img{transform:scale(1.04)}
.raf-kart__ad{margin:0;font-family:var(--font-heading);font-size:var(--fs-small);
line-height:1.3;font-weight:var(--fw-semibold);letter-spacing:0;color:var(--white);
text-wrap:pretty}
.raf-kart__not{margin:var(--space-3) 0 0;font-size:var(--fs-micro);line-height:1.5;
color:var(--blue-200)}
/* --- Beyaz gövdedeki iki sütun ---
"Ürünü mü alayım, uygulamayı mı?" sorusu; sayfadaki en uzun düzyazı burada
ve site kuralı uzun metni beyaz zemine istiyor. */
.ikili{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gap)}
.ikili > *{min-width:0}
.ikili__sutun{display:flex;flex-direction:column;align-items:flex-start;
gap:var(--space-5);padding:var(--space-9);background:var(--surface-sunken)}
.ikili__baslik{margin:0;font-size:var(--fs-h4);line-height:var(--lh-h4);
font-weight:var(--fw-semibold);letter-spacing:0;color:var(--text-body)}
.ikili__metin{margin:0;flex:1;max-width:52ch;font-size:var(--fs-small);
line-height:var(--lh-small);color:var(--text-muted)}
@media (max-width:1111px){
.raf-serit{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.raf-serit__ornek{grid-column:1 / -1;grid-template-columns:repeat(4,minmax(0,1fr));
border-left:0;border-top:var(--border-w) solid rgba(163,218,235,.16)}
.raf-izgara{grid-template-columns:repeat(3,minmax(0,1fr))}
.ikili{grid-template-columns:1fr}
}
@media (max-width:767px){
.liste-plaka--genis .liste-plaka__liste{grid-template-columns:1fr}
.liste-plaka--genis .liste-plaka__liste li:nth-child(2) a{
border-top:var(--border-w) solid rgba(163,218,235,.16)}
.raf-serit{grid-template-columns:1fr}
/* "02 Sanayi Grubu" ve "37 ürün" dar sütunda tek satıra sığmıyor */
.raf-serit__ust{flex-wrap:wrap}
.raf-serit__ad{flex:1 1 100%;order:3;font-size:var(--fs-h5)}
.raf-serit__sayi{margin-left:auto}
.raf-serit__foto{min-height:180px}
.raf-serit__govde{border-left:0;padding:var(--space-7) var(--space-6)}
.kat-liste{grid-template-columns:1fr}
.kat-liste li:nth-child(2) a{border-top:var(--border-w) solid rgba(163,218,235,.16)}
.raf-izgara{grid-template-columns:repeat(2,minmax(0,1fr))}
.raf-kart{padding:var(--space-5) var(--space-4)}
.raf-kart__kutu{margin-bottom:var(--space-5)}
.ikili__sutun{padding:var(--space-7) var(--space-6)}
}
/* --- Anasayfa grup kartları --- */
.group-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--grid-gap)}
/* Her grubun kendi rengi: dört kart yan yana dururken hangisinin ne olduğu
renkle de ayrılsın. Hepsi marka ailesinden — üç mavi kademesi ve bir kömür
grisi; rastgele renk değil, aynı setin tonları. Tanınmayan bir slug gelirse
marka mavisine düşer. */
.group-card{--grup:var(--brand)}
.group-card--insaat-grubu{--grup:var(--blue-500)}
.group-card--sanayi-grubu{--grup:var(--ink-800)}
.group-card--deniz-grubu{--grup:var(--blue-900)}
.group-card--kaplama-grubu{--grup:var(--blue-700)}
.group-card{display:flex;flex-direction:column;background:var(--surface-card);
border:var(--border-w) solid var(--border-hairline);transition:var(--transition-surface)}
.group-card:hover{border-color:var(--grup);box-shadow:var(--shadow-md)}
.group-card__media{position:relative;overflow:hidden;aspect-ratio:4/3;
background:var(--surface-sunken)}
.group-card__media img{width:100%;height:100%;object-fit:cover;
transition:transform var(--dur-slow) var(--ease-out)}
.group-card:hover .group-card__media img{transform:scale(1.05)}
.group-card__body{padding:var(--space-6);display:flex;flex-direction:column;
gap:var(--space-3);flex:1;
border-top:var(--rule-accent-w) solid var(--grup)}
/* Sayaç grubun renginde dolu bir blok: kartın kimliğini o taşıyor */
.group-card__count{align-self:flex-start;white-space:nowrap;
padding:var(--space-2) var(--space-4);
background:var(--grup);color:var(--white);
font-size:var(--fs-eyebrow);font-weight:var(--fw-bold);
letter-spacing:var(--ls-eyebrow);text-transform:uppercase}
.group-card__title{font-family:var(--font-heading);font-size:var(--fs-h5);
line-height:var(--lh-h5);font-weight:var(--fw-semibold);color:var(--text-body);letter-spacing:0}
.group-card__desc{margin:0;font-size:var(--fs-micro);line-height:1.6;color:var(--text-muted)}
@media (max-width:1111px){ .group-cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:767px){
.group-cards{gap:var(--space-5)}
.group-card__body{padding:var(--space-5);gap:var(--space-2)}
/* 18px başlık iki sütunlu dar kolona sığmayıp "Kapla-ma" diye bölünüyordu */
.group-card__title{font-size:var(--fs-small);line-height:var(--lh-small)}
}
@media (max-width:400px){
.group-card__body{padding:var(--space-4)}
.group-card__count{padding:var(--space-1) var(--space-3);
max-width:100%;white-space:normal;font-size:var(--fs-micro);letter-spacing:0}
}
@media (max-width:480px){
.group-card__desc{display:none}
}
/* --- Koyu içerik bloğu ---
Dikişten sonra gelen koyu bölüm: hakkımızdaki üç adım, iletişimdeki SSS.
Doku hero'yla aynı 68px ızgara — section__pattern'in 20px'i dikişin
seyrelen dokusunu kesiyordu. Buradaki rgba'lar tokenların alfalı hali:
(163,218,235)=blue-200. */
.koyu-blok{background:var(--blue-950);color:var(--text-on-dark)}
.koyu-blok__doku{position:absolute;inset:0;pointer-events:none;
background-image:radial-gradient(rgba(163,218,235,.09) 2px,transparent 2.1px);
background-size:68px 68px}
.koyu-blok__bar{margin-bottom:var(--space-11)}
.koyu-blok__liste{margin-top:var(--space-9)}
/* Blok ile kapanış bandı tek koyu yüzey olsun: blue-950 / brand-deep basamağı
aralarında yatay bir dikiş gibi okunuyor (sis-indeks ve raf ile aynı kural). */
.koyu-blok + .section--dark{background:var(--blue-950)}
.koyu-blok .ref-bar{border-color:rgba(163,218,235,.22)}
.koyu-blok .ref-bar__sayi{color:var(--blue-200)}
/* faq bileşeni beyaz zemin için yazılmış; koyu karşılıkları burada */
.koyu-blok .faq{border-top-color:rgba(163,218,235,.22)}
.koyu-blok .faq__item{border-bottom-color:rgba(163,218,235,.22)}
.koyu-blok .faq__question{color:var(--white)}
.koyu-blok .faq__question:hover{color:var(--blue-200)}
.koyu-blok .faq__answer{color:var(--text-on-dark-muted)}
.koyu-blok .faq__sign{color:var(--blue-200)}
/* --- Hakkımızda ---
Koyu ifade hero'su + rakam şeridi > dikiş > beyaz gövde (metin + yapışkan
belge plakası) > faydalar > dikiş > koyu üç adım > kapanış bandı. */
/* Sağ sütun .5fr'de 300px'e iniyor ve sertifika adı dört satıra bölünüyordu */
.kurum-govde{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);
gap:var(--space-12);align-items:start}
.kurum-ana{min-width:0}
.kurum-yan{min-width:0;position:sticky;top:calc(var(--header-h) + var(--space-5))}
.kurum-metin p{max-width:62ch;text-wrap:pretty}
/* Giriş paragrafı bir basamak büyük: gövdenin ilk cümlesi hero'nun devamı */
.kurum-metin__giris{font-size:var(--fs-h5);line-height:var(--lh-h5)}
.kurum-politika{margin-top:var(--space-12)}
.kurum-politika .policy-list{max-width:62ch}
.policy-list{list-style:none;margin:0;padding:0;counter-reset:policy}
.policy-list li{display:flex;gap:var(--space-6);padding:var(--space-5) 0;margin:0;
border-bottom:var(--border-w) solid var(--border-default)}
.policy-list li:last-child{border-bottom:0}
.policy-list__no{flex:none;width:26px;padding-top:3px;font-family:var(--font-heading);
font-size:var(--fs-micro);font-weight:var(--fw-bold);color:var(--brand)}
.policy-list li > span:last-child{font-size:var(--fs-small);line-height:var(--lh-small);
color:var(--text-body)}
/* Belge plakası: hairline kutu, üstünde marka çizgisi, adın yanında marka tiki */
.belge-plaka{padding:var(--space-7);
border:var(--border-w) solid var(--border-hairline);
border-top:var(--border-w-thick) solid var(--brand)}
.belge-plaka__baslik{margin:0;
font:var(--fw-bold) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-body);
letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--brand)}
.belge-plaka__not{margin:var(--space-3) 0 var(--space-6);
font-size:var(--fs-micro);line-height:var(--lh-micro);color:var(--text-muted)}
/* İki sertifika yan yana: tek sütunda her biri 250px'e çıkıp plakayı sayfanın
en uzun bloğu yapıyordu. Görsel "belge var" diyor, metni okunmak zorunda
değil — bu yüzden dar ekranda da yan yana kalıyorlar. */
.belge-plaka__liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--space-6)}
.belge{margin:0;min-width:0}
.belge > img{width:100%;height:auto;display:block;
border:var(--border-w) solid var(--border-hairline)}
.belge figcaption{display:flex;gap:var(--space-3);align-items:flex-start;
margin-top:var(--space-4);
font-size:var(--fs-micro);line-height:1.45;color:var(--text-body)}
.belge__tik{flex:none;width:16px;height:16px;margin-top:1px;border:0}
/* Üç adım: keşif, uygulama, teslim. Hücreler kutulu değil, her biri kendi üst
çizgisiyle açılıyor — koyu zeminde kutu ızgarası zemin yaması gibi okunuyor. */
.adim-serit{list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-9)}
.adim{margin:0;min-width:0;padding-top:var(--space-6);
border-top:var(--border-w) solid rgba(163,218,235,.24)}
.adim__no{display:block;font-family:var(--font-heading);
font-size:var(--fs-h5);line-height:1;font-weight:var(--fw-semibold);
color:var(--blue-300)}
.adim__ad{margin:var(--space-5) 0 var(--space-4);
font-family:var(--font-heading);font-size:var(--fs-h4);line-height:var(--lh-h4);
font-weight:var(--fw-semibold);color:var(--white);letter-spacing:0}
.adim__metin{margin:0;font-size:var(--fs-small);line-height:var(--lh-small);
color:var(--text-on-dark-muted);text-wrap:pretty}
/* --- İletişim ---
Keşif formu koyu hero'nun sağ sütununda (page-hero-dark yan plakası) >
dikiş > beyaz bilgi şeridi > dikiş > koyu SSS. Kapanış bandı yok: o bant
"keşif talep et" deyip bu sayfaya bağlanıyor. */
.bilgi-serit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:var(--space-9);margin-top:var(--space-11)}
.bilgi-serit > div{min-width:0;padding-top:var(--space-6);
border-top:var(--border-w) solid var(--border-hairline)}
.bilgi-serit__baslik{margin:0 0 var(--space-4);
font:var(--fw-bold) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-body);
letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--brand)}
.bilgi-serit p{margin:0 0 var(--space-3);font-size:var(--fs-small);
line-height:var(--lh-small);color:var(--text-body)}
.bilgi-serit p:last-of-type{margin-bottom:0}
.bilgi-serit p a{color:var(--text-body)}
.bilgi-serit p a:hover{color:var(--brand)}
.bilgi-serit__sosyal{margin-top:var(--space-5)}
.harita-link{display:flex;align-items:center;justify-content:space-between;
gap:var(--space-5);margin-top:var(--space-5);padding:var(--space-5) var(--space-6);
border:var(--border-w) solid var(--border-default);text-decoration:none;
transition:var(--transition-surface)}
.harita-link:hover{border-color:var(--brand)}
.harita-link span{font:var(--fw-semibold) var(--fs-small)/1.3 var(--font-heading);
color:var(--text-body)}
.harita-link i{color:var(--brand);transition:transform var(--dur-base) var(--ease-standard)}
.harita-link:hover span{color:var(--brand)}
.harita-link:hover i{transform:translateX(var(--nudge-x,4px))}
@media (max-width:1111px){
.kurum-govde{grid-template-columns:1fr;gap:var(--space-11)}
/* Yapışkanlık tek sütunda anlamsız: plaka metnin altına düşüyor */
.kurum-yan{position:static}
.adim-serit{grid-template-columns:1fr;gap:var(--space-7)}
.bilgi-serit{grid-template-columns:1fr;gap:var(--space-7)}
}
@media (max-width:767px){
.kurum-metin__giris{font-size:var(--fs-body-m);line-height:var(--lh-body-m)}
}
/* --- Yasal metin --- */
/* Yasal metin: solda düzyazı, sağda yapışkan içindekiler. Belge seçici iki
sütunu birden kaplıyor, dar ekranda gezinme metinden önce geliyor. */
.yasal-govde{display:grid;grid-template-columns:minmax(0,66ch) 280px;
justify-content:start;gap:var(--space-9) var(--space-11);align-items:start}
.yasal-secici{grid-column:1 / -1;min-width:0}
.yasal-metin,
.yasal-yan{min-width:0}
.yasal-yan{position:sticky;top:calc(var(--header-h) + var(--space-5))}
.yasal-toc{border-left:var(--rule-accent-w) solid var(--brand);
padding-left:var(--space-6)}
.yasal-toc__baslik{margin:0 0 var(--space-5);font-size:var(--fs-micro);
font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
color:var(--text-muted)}
.yasal-toc__liste{list-style:none;margin:0;padding:0}
.yasal-toc__liste li{margin:0;border-top:var(--border-w) solid var(--border-hairline)}
.yasal-toc__liste li:first-child{border-top:0}
.yasal-toc__liste a{display:flex;gap:var(--space-4);align-items:baseline;
padding:var(--space-3) 0;color:var(--text-body);font-size:var(--fs-small);
line-height:var(--lh-small);transition:var(--transition-control)}
.yasal-toc__liste a:hover{color:var(--brand)}
.yasal-toc__no{flex:none;font-family:var(--font-heading);font-size:var(--fs-micro);
font-weight:var(--fw-bold);color:var(--text-muted)}
.yasal-toc__liste a:hover .yasal-toc__no{color:var(--brand)}
@media (max-width:1111px){
.yasal-govde{grid-template-columns:1fr}
/* Tek sütunda içindekiler metnin altında kalırsa iş görmüyor; seçicinin
hemen ardına alınıyor ve yapışkanlığını bırakıyor. */
.yasal-yan{position:static;order:1}
.yasal-metin{order:2}
.yasal-secici{order:0}
}
/* Açılış sayfasının beyaz gövdesi: metin ölçüsü yasal metinle aynı, gövde
sayfanın kendi paragraflarıyla dolunca büyüyor. */
.landing-metin{max-width:62ch;margin-bottom:var(--space-11)}
.landing-bolge{margin-top:var(--space-11);padding-top:var(--space-9);
border-top:var(--border-w) solid var(--border-hairline)}
.landing-bolge .lead{margin:var(--space-4) 0 0;max-width:62ch}
.legal{max-width:62ch}
.legal__heading{font-family:var(--font-heading);font-size:var(--fs-h5);
line-height:var(--lh-h5);font-weight:var(--fw-semibold);color:var(--text-body);
letter-spacing:0;margin-top:var(--space-11);margin-bottom:var(--space-5)}
.legal__heading:first-child{margin-top:0}
.legal__heading[id]{scroll-margin-top:calc(var(--header-h) + var(--space-6))}
.legal__list{margin:0 0 var(--space-6);padding-left:var(--space-6)}
.legal__list li{margin-bottom:var(--space-3);font-size:var(--fs-small);
line-height:var(--lh-small);color:var(--text-body)}
/* --- SSS --- */
.faq{border-top:var(--border-w) solid var(--border-hairline)}
.faq__item{border-bottom:var(--border-w) solid var(--border-hairline)}
.faq__question{width:100%;display:flex;align-items:flex-start;justify-content:space-between;
gap:var(--space-6);padding:var(--space-6) 0;background:none;border:0;cursor:pointer;
text-align:left;font-family:var(--font-heading);font-size:var(--fs-h5);
line-height:var(--lh-h5);font-weight:var(--fw-semibold);color:var(--text-body);
transition:var(--transition-control)}
.faq__question:hover{color:var(--brand)}
.faq__sign{flex:none;font-family:var(--font-body);font-size:var(--fs-h4);
line-height:1;color:var(--brand)}
.faq__answer{padding:0 0 var(--space-7);max-width:70ch;font-size:var(--fs-small);
line-height:var(--lh-small);color:var(--text-muted)}
.faq__item[hidden]{display:none}
/* details/summary varsayılan okunu gizleyip kendi +/- işaretimizi koyuyoruz */
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary{list-style:none}
.faq__sign::before{content:"+"}
.faq__item[open] .faq__sign::before{content:"\2212"}
/* --- Site bildirimleri --- */
.notice{padding:var(--space-5) var(--space-6);margin-bottom:var(--space-7);
border-left:var(--rule-accent-w) solid var(--brand);background:var(--surface-sunken);
font-size:var(--fs-small);line-height:var(--lh-small);color:var(--text-body)}
.notice--success{border-left-color:var(--green-500)}
.notice--error{border-left-color:var(--red-500)}
/* --- Anasayfa keşif bölümü --- */
.kesif{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);align-items:center}
@media (max-width:1111px){
.kesif{grid-template-columns:1fr;gap:var(--space-9)}
}
/* --- Sistem indeksi, derli toplu hali: iki sütun, kategoriye göre gruplu --- */
.solution-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--space-11) var(--space-12);align-items:start}
.solution-group__title{display:flex;align-items:baseline;gap:var(--space-3);
padding-bottom:var(--space-4);margin-bottom:var(--space-2);
border-bottom:var(--border-w-thick) solid var(--brand);
font-family:var(--font-body);font-size:var(--fs-eyebrow);line-height:var(--lh-eyebrow);
font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
color:var(--brand)}
.solution-group__title span{font-size:11px;color:var(--text-faint);letter-spacing:0}
/* Sıkı satır: dolgu ve başlık küçüldü, 13 satır bir ekrana sığsın */
.solution-row--compact{grid-template-columns:34px 1fr auto;gap:var(--space-4);
padding:14px 0}
.solution-row--compact .solution-row__title{font-size:var(--fs-small);
line-height:var(--lh-small)}
.solution-row--compact .solution-row__spec{margin-top:2px}
.solution-row--compact .solution-row__go{font-size:var(--fs-small);opacity:0}
.solution-row--compact:hover .solution-row__go{opacity:1}
@media (max-width:1111px){
.solution-groups{grid-template-columns:1fr;gap:var(--space-9)}
}
/* Tasarım imzası odakta/hover'da hafif sarıya döner — markanın kendi paletinden
değil, tasarımcının imzası olduğu için bilinçli tek istisna. */
.site-footer__credit a:hover strong,
.site-footer__credit a:focus-visible strong{color:#FFD766}
.site-footer__credit a:hover,
.site-footer__credit a:focus-visible{color:#FFE9AE}
/* ==========================================================================
Keşif formu — kutulu hal
Tasarım sistemi "kutu yok, sadece alt çizgi" diyordu; o kalıp beyaz bölümde
çalışıyor ama gri ve koyu bölümlerde alanların nerede bittiği okunmuyordu.
Kutuya geçtik, marka kuralları duruyor: köşe sıfır, tek geçiş süresi,
odakta marka mavisi.
========================================================================== */
/* Gönderim sonrası sayfa #kesif'e atlıyor; yapışkan header çapayı örtüyor ve
hata satırı ekranın dışında kalıyordu. */
.kesif-form,
.kesif-done{scroll-margin-top:calc(var(--header-h) + var(--space-5))}
.kesif-form__grid{display:grid;grid-template-columns:1fr 1fr;
gap:var(--space-6) var(--space-7);margin-bottom:var(--space-6)}
.field-line{display:flex;flex-direction:column;gap:var(--space-2)}
.field-line--full{margin-bottom:var(--space-7)}
.field-line label{font-family:var(--font-body);font-size:var(--fs-micro);
line-height:1.4;font-weight:var(--fw-bold);letter-spacing:.02em;
text-transform:uppercase;color:var(--text-muted)}
.field-line .is-required{color:var(--red-500);padding-inline-start:.2em}
.field-line input,
.field-line textarea{width:100%;background:var(--white);color:var(--text-body);
font-family:var(--font-body);font-size:var(--fs-small);line-height:var(--lh-small);
font-weight:var(--fw-regular);
border:var(--border-w) solid var(--border-default);
border-radius:var(--radius-none);padding:13px var(--space-4);
transition:var(--transition-control),box-shadow var(--dur-base) var(--ease-standard);
outline:none}
.field-line textarea{resize:vertical;min-height:110px}
.field-line input::placeholder,
.field-line textarea::placeholder{color:var(--text-faint)}
.field-line input:hover,
.field-line textarea:hover{border-color:var(--border-strong)}
.field-line input:focus,
.field-line textarea:focus{border-color:var(--brand);
box-shadow:inset 0 0 0 1px var(--brand)}
.field-line input:user-invalid,
.field-line textarea:user-invalid{border-color:var(--red-500);
box-shadow:inset 0 0 0 1px var(--red-500)}
.field-line__hint{font-size:var(--fs-micro);line-height:1.5;color:var(--text-muted)}
/* Koyu zeminde aynı kutu: saydam dolgu, açık kenar */
.kesif-form--on-dark .field-line label{color:var(--blue-200)}
.kesif-form--on-dark .field-line input,
.kesif-form--on-dark .field-line textarea{background:rgba(255,255,255,.06);
color:var(--white);border-color:rgba(255,255,255,.28)}
.kesif-form--on-dark .field-line input::placeholder,
.kesif-form--on-dark .field-line textarea::placeholder{color:rgba(255,255,255,.45)}
.kesif-form--on-dark .field-line input:hover,
.kesif-form--on-dark .field-line textarea:hover{border-color:rgba(255,255,255,.5)}
.kesif-form--on-dark .field-line input:focus,
.kesif-form--on-dark .field-line textarea:focus{border-color:var(--white);
background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.kesif-form--on-dark .field-line__hint{color:var(--text-on-dark-muted)}
/* Dar ekranda tek sütun; adres alanı 170px'e sıkışmasın */
@media (max-width:767px){
.kesif-form__grid{grid-template-columns:1fr;gap:var(--space-5)}
.kesif-form__grid .field-line--full,
.field-line--full{margin-bottom:var(--space-6)}
.kesif-form .btn{width:100%}
}
/* ==========================================================================
Mobil düzeltmeleri
========================================================================== */
/* Sıkı sistem satırı kendi ızgarasını tanımladığı için genel mobil kuralı
eziyordu; dar ekranda ok sütununu burada da kaldırıyoruz */
@media (max-width:767px){
.solution-row--compact{grid-template-columns:30px 1fr}
.solution-row--compact .solution-row__go{display:none}
}
/* Footer dar ekranda tek sütun; 240px'lik marka kolonu zorluyordu */
@media (max-width:767px){
.site-footer__grid{grid-template-columns:1fr;gap:var(--space-9)}
.site-footer__legal .container{flex-direction:column;align-items:flex-start;
gap:var(--space-4);padding-block:var(--space-6)}
.site-footer__legal ul{gap:var(--space-4)}
}
/* Uzun başlıklar dar ekranda taşmasın */
@media (max-width:767px){
.hero__title,.raf-serit__ad{
overflow-wrap:break-word}
/* Referans duvarı burada tek sütuna düşüyordu: eski kartta uzun firma adı
iki sütunlu ızgarayı taşırıyordu. Yeni duvarda sütunlar minmax(0,1fr) ve
body zaten kelime kırıyor, mobilde iki sütun kalıyor. */
}
/* Yasal metin başlıkları mobilde biraz nefes alsın */
@media (max-width:767px){
.legal__heading{margin-top:var(--space-9)}
.bullet-grid{gap:var(--space-3)}
}
/* --- Keşif formu: gönderim sonrası onay paneli --- */
.kesif-done{padding:var(--space-11) var(--space-9);text-align:center;
background:var(--surface-card);
border:var(--border-w) solid var(--border-hairline);
border-top:var(--rule-accent-w) solid var(--brand)}
.kesif-done:focus{outline:none}
.kesif-done__mark{display:block;margin-bottom:var(--space-6)}
.kesif-done__mark img{width:48px;height:48px;margin:0 auto}
.kesif-done__title{font-family:var(--font-heading);font-size:var(--fs-h3);
line-height:var(--lh-h3);font-weight:var(--fw-semibold);color:var(--text-body);
letter-spacing:0}
.kesif-done__text{margin:var(--space-5) auto 0;max-width:46ch;
font-size:var(--fs-h5);line-height:var(--lh-h5);color:var(--text-muted)}
.kesif-done__meta{margin:var(--space-5) auto var(--space-9);max-width:46ch;
font-size:var(--fs-small);color:var(--text-muted)}
.kesif-done--on-dark{background:rgba(255,255,255,.06);
border-color:rgba(255,255,255,.22);border-top-color:var(--white)}
.kesif-done--on-dark .kesif-done__title{color:var(--white)}
.kesif-done--on-dark .kesif-done__text,
.kesif-done--on-dark .kesif-done__meta{color:var(--text-on-dark-muted)}
/* Tik ikonu koyu zeminde kendi renkleriyle kalıyor: beyaza boyayan filtre
çemberi de dolduruyor ve tik kayboluyordu. */
/* Doğrulama hatası formun başında, alanların hemen üstünde */
.kesif-form__error{margin:0 0 var(--space-6);padding:var(--space-4) var(--space-5);
background:var(--white);border-left:var(--rule-accent-w) solid var(--red-500);
font-size:var(--fs-small);line-height:var(--lh-small);color:var(--text-body)}
.kesif-form--on-dark .kesif-form__error{background:rgba(255,255,255,.08);
color:var(--white)}
/* ============================================================
Bölüm dikişi — koyu ile beyaz arasındaki harmanlı geçiş
Dört aygıt aynı anda çalışıyor, hiçbiri tek başına yeterli değil:
1) Ton eğik bir sınırda sönüyor: sınır yatay bir çizgi değil, solda aşağıda
sağda yukarıda biten yumuşak bir bant. Sert kesim buradan kalkıyor.
2) Nokta dokusu beyaza doğru seyreliyor, bir yerde bitmiyor.
3) Hero'nun çizgi motifi dikişi geçiyor: koyu tarafta parlak tonlarıyla,
açık tarafta aynı geometride soluk mavi iziyle sürüyor. Motif ölmüyor,
beyaza tercüme oluyor — geçişi asıl taşıyan bu.
4) Işık kadraj dışındaki armatürden geliyor, kuyruğu dikişin üstüne taşıyor.
Sönüm eğrisi: duraklar lineer değil, ease-out dağılımlı. Lineer alfa rampası
beyaza yaklaşırken bir "bulut kenarı" bırakıyordu — gözün açıklık algısı
lineer değil, alfanın son üçte biri hâlâ görünüyor ve bant orada bitiyormuş
gibi duruyor. On bir duraklı S eğrisi hızlı düşüp uzun bir kuyrukla iniyor.
Ton dikişin %72'sinde bitiyor, kalan %28 boş beyaz değil — motifin açık
izinin sürdüğü yer. 420px'lik bir dikişte bu, beyaza girdikten sonra yaklaşık
120px daha devam eden bir iz demek.
rgba'lar tokenların alfalı hali: (163,218,235)=blue-200, (0,42,54)=blue-950,
(0,146,188)=blue-500; maskelerdeki rgba(0,0,0,x) renk değil alfa kanalı.
Motifin px ölçüleri page-hero-dark'takilerle birebir aynı olsun diye orada
olduğu gibi yazılı.
============================================================ */
.seam{position:relative;overflow:hidden;isolation:isolate;
height:var(--seam-h);background:var(--surface-page);
--seam-h:300px;
--seam-koyu:var(--blue-950);
--egim:28deg;
--ayak:680px;
/* container'dan artan yerin bir kısmı: motif hero'yla aynı hizada açılsın */
--yay:clamp(0px,(100vw - var(--container-max)) * .3,190px);
/* İki eksen var. --seam-eksen dik: kabın alt kenarında alfayı gerçekten
sıfıra indiren güvenlik maskesi bunu kullanıyor. --seam-egik ton sınırını
eğik yapan asıl maske. Tek başına eğik maske olmuyor: 1440px genişlikte
eğik gradyan kutunun sol alt köşesinde yarı yolda kalıyor, maske sıfıra
inemeden kap bitiyor ve tam kaçındığımız yatay çizgi çıkıyor. İkisi iç içe
uygulanınca sınır hem eğik hem yumuşak, kenarlar temiz. */
--seam-eksen:180deg;
/* Eğim 5 derece. Daha diki denendi: eğik gradyanın kutunun iki üst köşesi
arasındaki fark, yatay bileşen büyüdükçe artıyor ve maske koyu kenarda tam
opaklığa ulaşamıyor — bitişik koyu bölümle arada bir ton basamağı çıkıyor.
Bunu maskenin başındaki düz plato (%34) kapatıyor, plato da eğim büyüdükçe
uzuyor ve sönüme yer kalmıyor. 5 derece ikisinin dengesi. */
--seam-egik:175deg;
/* Dış güvenlik maskesi: dik, %76'da kesin sıfır. */
--seam-m-dis:linear-gradient(var(--seam-eksen),
rgba(0,0,0,1) 0%,rgba(0,0,0,1) 34%,rgba(0,0,0,.95) 44%,rgba(0,0,0,.84) 51%,
rgba(0,0,0,.66) 57%,rgba(0,0,0,.46) 62%,rgba(0,0,0,.28) 66%,
rgba(0,0,0,.15) 69%,rgba(0,0,0,.07) 71%,rgba(0,0,0,.02) 73%,
rgba(0,0,0,0) 76%);
/* İç eğik maske: sınırı yataylıktan çıkaran asıl eğri. Baştaki %34'lük düz
plato koyu kenarın her noktasında tam opaklığı garantiliyor. */
--seam-m-ic:linear-gradient(var(--seam-egik),
rgba(0,0,0,1) 0%,rgba(0,0,0,1) 34%,rgba(0,0,0,.95) 41%,rgba(0,0,0,.86) 47%,
rgba(0,0,0,.72) 53%,rgba(0,0,0,.56) 59%,rgba(0,0,0,.40) 65%,
rgba(0,0,0,.26) 70%,rgba(0,0,0,.15) 75%,rgba(0,0,0,.08) 80%,
rgba(0,0,0,.03) 85%,rgba(0,0,0,.01) 90%,rgba(0,0,0,0) 96%);
/* Doku tondan bir adım önde sönüyor: noktalar zeminden önce bitmezse son
kalan noktalar beyazın üstünde asılı kalıyor. */
--seam-m-doku:linear-gradient(var(--seam-eksen),
rgba(0,0,0,1) 0%,rgba(0,0,0,.92) 24%,rgba(0,0,0,.78) 36%,rgba(0,0,0,.60) 45%,
rgba(0,0,0,.42) 53%,rgba(0,0,0,.26) 59%,rgba(0,0,0,.14) 64%,
rgba(0,0,0,.06) 68%,rgba(0,0,0,.02) 72%,rgba(0,0,0,0) 77%);
/* Koyu motif: kenardan doğmuyor, ortada açılıp tonla birlikte sönüyor. */
--seam-m-koyu:linear-gradient(var(--seam-eksen),
rgba(0,0,0,0) 0%,rgba(0,0,0,.30) 9%,rgba(0,0,0,.62) 18%,rgba(0,0,0,.78) 27%,
rgba(0,0,0,.72) 36%,rgba(0,0,0,.58) 44%,rgba(0,0,0,.42) 51%,
rgba(0,0,0,.28) 57%,rgba(0,0,0,.16) 62%,rgba(0,0,0,.08) 67%,
rgba(0,0,0,.03) 71%,rgba(0,0,0,0) 76%);
/* Işık bandı: iki uçta da sıfır. Maskesiz haliyle armatürün parlak göbeği
dikişin koyu kenarına denk geliyor ve bitişik bölümle arada camgöbeği bir
basamak bırakıyordu — ölçümde 0,42,54 yerine 0,65,82. */
--seam-m-isik:linear-gradient(var(--seam-eksen),
rgba(0,0,0,0) 0%,rgba(0,0,0,.30) 16%,rgba(0,0,0,.85) 34%,rgba(0,0,0,1) 52%,
rgba(0,0,0,.85) 70%,rgba(0,0,0,.45) 84%,rgba(0,0,0,0) 96%);
/* Açık iz: ton ölürken devralıyor, dikişin sonuna kadar beyazda sürüyor. */
--seam-m-acik:linear-gradient(var(--seam-eksen),
rgba(0,0,0,0) 34%,rgba(0,0,0,.18) 45%,rgba(0,0,0,.42) 54%,rgba(0,0,0,.64) 62%,
rgba(0,0,0,.76) 70%,rgba(0,0,0,.72) 78%,rgba(0,0,0,.56) 85%,
rgba(0,0,0,.34) 90%,rgba(0,0,0,.14) 94%,rgba(0,0,0,.03) 96%,
rgba(0,0,0,0) 97%)}
.seam--kisa{--seam-h:200px}
.seam--uzun{--seam-h:420px}
/* Komşu koyu bölümün zemini: bölümlerin çoğu blue-950, cta-band brand-deep. */
.seam--ton-derin{--seam-koyu:var(--brand-deep)}
.seam--acik-koyu{--seam-eksen:0deg;--seam-egik:5deg}
/* Dikişten sonraki bölümün üst dolgusu iniyor: dikişin son dörtte biri zaten
sayfa zemini, bölümün 80px'i onun üstüne binince başlık bir ekran aşağı
kaçıyor. Koyudan açığa geçerken o boş kuyruk bölümün üst dolgusunun yerini
tamamen alıyor — motif kalktıktan sonra orada 100px boş beyaz artı 40px
dolgu vardı. Ters yönde almıyor: dikişin altı zaten koyu, bölüm kendi payını
istiyor. */
.seam + .section{padding-top:var(--space-9)}
.seam--koyu-acik + .section{padding-top:0}
/* Koyu kama iki katmanlı: dış kap dik eksende kesin sıfıra iner, içteki eğik
maske ton sınırını yatay olmaktan çıkarır. Sınır solda daha aşağıda, sağda
daha yukarıda bitiyor — ışığın geldiği yönle aynı. */
.seam__kama{position:absolute;inset:0;overflow:hidden;
-webkit-mask-image:var(--seam-m-dis);mask-image:var(--seam-m-dis)}
.seam__kama-ic{position:absolute;inset:0;background:var(--seam-koyu);
-webkit-mask-image:var(--seam-m-ic);mask-image:var(--seam-m-ic)}
/* Nokta yoğunluğu bitişik koyu bölümlerle aynı (.09): dikişte .11 kullanınca
sınırda doku birden koyulaşıyor. */
.seam__doku{position:absolute;inset:0;pointer-events:none;
background-image:radial-gradient(rgba(163,218,235,.09) 2px,transparent 2.1px);
background-size:68px 68px;
-webkit-mask-image:var(--seam-m-doku);mask-image:var(--seam-m-doku)}
/* cta-band kendi dokusunu DS'in 20px nokta ızgarasıyla basıyor; dikiş oraya
bağlanırken 68px'lik hero dokusunu sürdürürse iki doku sınırda çakışıyor. */
.seam--ton-derin .seam__doku{
background-image:radial-gradient(rgba(255,255,255,.08) 1.5px,transparent 1.5px);
background-size:20px 20px}
/* Kap tam dikiş boyunda: maske yüzdeleri dikişe karşılık gelsin diye. Kutu
dikişten taşarken maske %96'sına dikişin dışında ulaşıyor ve kenarda camgöbeği
bir kalıntı bırakıyordu. */
.seam__isik{position:absolute;top:0;bottom:0;right:calc(var(--space-16) * -1);
width:900px;pointer-events:none;
background:radial-gradient(ellipse at 50% 50%,rgba(0,146,188,.30),rgba(0,146,188,0) 66%);
filter:blur(40px);
-webkit-mask-image:var(--seam-m-isik);mask-image:var(--seam-m-isik)}
/* Çizgi grubu: geometri page-hero-dark ile birebir aynı, yalnız tonlar iki
tarafa ayrılıyor. Kap tam dikiş boyunda — maske yüzdeleri doğrudan dikişe
karşılık gelsin ve iki uçta da gerçekten sıfıra insin diye. */
.seam__cizgiler{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.seam__cizgiler-ic{position:absolute;left:50%;top:0;bottom:0;width:100%;
max-width:var(--container-max);transform:translateX(calc(-50% + var(--yay)))}
.seam__cizgi{position:absolute;top:0;bottom:0;
transform:skewX(calc(var(--egim) * -1));transform-origin:50% 100%}
.seam__cizgi--a{left:var(--ayak);width:200px}
.seam__cizgi--b{left:calc(var(--ayak) + 228px);width:80px}
.seam__cizgi--c{left:calc(var(--ayak) + 336px);width:28px}
.seam__cizgiler--koyu .seam__cizgi--a{background:var(--blue-800)}
.seam__cizgiler--koyu .seam__cizgi--b{background:var(--blue-500)}
.seam__cizgiler--koyu .seam__cizgi--c{background:var(--blue-300)}
/* Motif dikişin başında yok, ortasında beliriyor: üstteki bölüm (rakam şeridi,
kart ızgarası) çizgisiz, o yüzden çizgiler kenardan doğuyormuş gibi
başlamamalı. İki kopyanın sönüm bantları üst üste binerek tek bir geçiş
yapıyor — motif koyudan açığa geçiyor, bir yerde kesilmiyor. */
.seam__cizgiler--koyu{
-webkit-mask-image:var(--seam-m-koyu);mask-image:var(--seam-m-koyu)}
/* Açık taraftaki iz. blue-50 beyazda neredeyse görünmez, blue-200 net —
koyu taraftaki parlaklık sırasının aynısı, ters yönde. Ton bittikten sonra
da sürüyor: dikişin son üçte birinde ortada beyaz, üstünde sadece bu iz var. */
.seam__cizgiler--acik .seam__cizgi--a{background:var(--blue-50)}
.seam__cizgiler--acik .seam__cizgi--b{background:var(--blue-100)}
.seam__cizgiler--acik .seam__cizgi--c{background:var(--blue-200)}
.seam__cizgiler--acik{
-webkit-mask-image:var(--seam-m-acik);mask-image:var(--seam-m-acik)}
@media (max-width:1111px){
.seam{--ayak:520px;--seam-h:220px}
.seam--kisa{--seam-h:150px}
.seam--uzun{--seam-h:300px}
}
@media (max-width:767px){
/* Motif dar ekranda zaten hero'da da kapalı; kuyruk taşıyacak iz kalmıyor,
dikiş yalnız ton geçişi kadar sürüyor. */
.seam{--seam-h:130px}
.seam--kisa{--seam-h:100px}
.seam--uzun{--seam-h:170px}
.seam__cizgiler{display:none}
/* Dar ekranda dikiş kısa, boş kuyruğu da kısa: bölümün dolgusu geri geliyor,
yoksa başlık sönümün dibine yapışıyor. */
.seam--koyu-acik + .section{padding-top:var(--space-9)}
}
/* Zorlanmış renk modunda dekoratif katman iş görmüyor */
@media (forced-colors:active){
.seam{display:none}
}
/* mask-image olmadan kama düz bir koyu dikdörtgen olur ve tam kaçındığımız
sert kesimi geri getirir; o tarayıcıda dikiş düz bir ton geçişine iner. */
@supports not ((-webkit-mask-image:linear-gradient(rgba(0,0,0,1),transparent)) or
(mask-image:linear-gradient(rgba(0,0,0,1),transparent))){
.seam{background:linear-gradient(180deg,var(--seam-koyu),var(--surface-page))}
.seam--acik-koyu{background:linear-gradient(0deg,var(--seam-koyu),var(--surface-page))}
.seam > *{display:none}
}
/* ============================================================
Çözüm arşivi — kategori blokları ve sistem satırları
============================================================ */
.sis-blok + .sis-blok{margin-top:var(--space-13)}
.sis-bar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
gap:var(--space-6);margin-bottom:var(--space-11);padding-bottom:var(--space-5);
border-bottom:var(--border-w-thick) solid var(--brand)}
.sis-bar__baslik{margin:0;font-family:var(--font-heading);font-size:var(--fs-h3);
line-height:1.15;font-weight:var(--fw-semibold);color:var(--text-body);letter-spacing:0}
.sis-bar__sayi{margin:0;font-family:var(--font-heading);font-size:var(--fs-h5);
line-height:1.2;font-weight:var(--fw-semibold);color:var(--text-muted)}
/* Üç sütun: kanıt (fotoğraf), iddia (metin + künye), yapı (kat diyagramı).
Diyagram metnin altındayken satır yüksekliği ikisinin toplamıydı ve künye
sütununun altında bir o kadar ölü boşluk kalıyordu; yan yana geldiklerinde
yükseklik ikisinin büyüğü oluyor. Satır başına ~170px, sayfa boyunca ~%20.
Satır yüksekliğini metin belirliyor, fotoğraf ona uzuyor: sabit 4/3 kırpma
uzun ve kısa satırların ikisini birden tutturamıyordu. */
.sis-satir{display:grid;grid-template-columns:4.6fr 4.8fr 3.4fr;
grid-template-areas:"foto metin kat" "foto git kat";
grid-template-rows:1fr auto;
gap:var(--space-4) var(--space-9);
align-items:stretch;padding-block:var(--space-7);
border-top:var(--border-w) solid var(--border-hairline)}
.sis-satir:first-of-type{border-top:0;padding-top:0}
.sis-satir__foto{grid-area:foto;display:block;position:relative;overflow:hidden;
min-height:var(--space-17);background:var(--surface-sunken)}
.sis-satir__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
transition:transform var(--dur-slow) var(--ease-out)}
.sis-satir:hover .sis-satir__foto img{transform:scale(1.04)}
.sis-satir__govde{grid-area:metin;min-width:0}
.sis-satir__ad{margin:0;font-family:var(--font-heading);font-size:var(--fs-h3);
line-height:1.15;font-weight:var(--fw-semibold);letter-spacing:0;text-wrap:balance}
.sis-satir__ad a{color:var(--text-heading);text-decoration:none}
.sis-satir__ad a:hover{color:var(--ink-800)}
.sis-satir__ozet{margin:var(--space-5) 0 0;max-width:56ch;font-size:var(--fs-body);
line-height:var(--lh-body);color:var(--text-body);text-wrap:pretty}
.sis-satir__alt{margin-top:var(--space-6)}
.sis-satir__kat{grid-area:kat;min-width:0;align-self:start}
/* Künye tek bir ızgara, satırlar display:contents ile onun içine giriyor —
etiket sütunu bütün satırlarda ortak, değerler tek çizgide başlıyor. Her
satır kendi ızgarası olsaydı sütun satır satır ayrı ölçülürdü ve uzun bir
etiket (Almanca "Begehbarkeit") o satırın değerini kaydırırdı.
Sütun 80px'in altına inmiyor, uzun etikette büyüyor: Türkçede üç etiket de
80px'in altında kalıyor, ölçü değişmiyor. */
.sis-kunye{display:grid;grid-template-columns:minmax(var(--space-13),max-content) 1fr;
column-gap:var(--space-4);row-gap:var(--space-3);align-items:baseline;
margin:0;padding-top:var(--space-5);
border-top:var(--border-w-thick) solid var(--brand)}
.sis-kunye__satir{display:contents}
/* Sağ dolgu sütunun ölçüsüne giriyor: 80px'i aşan bir etiketle değer arasında
dar ekranda da boşluk kalıyor, Türkçede sütun zaten 80px'te durduğu için
hiçbir şey değişmiyor. */
.sis-kunye__k{padding-right:var(--space-3);
font-family:var(--font-body);font-size:var(--fs-eyebrow);
line-height:var(--lh-eyebrow);font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow);
text-transform:uppercase;color:var(--brand)}
.sis-kunye__v{margin:0;font-size:var(--fs-micro);line-height:1.45;color:var(--text-body)}
.kat-mini__baslik{display:flex;align-items:baseline;gap:var(--space-3);margin:0;
font-family:var(--font-body);font-size:var(--fs-eyebrow);line-height:var(--lh-eyebrow);
font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
color:var(--text-faint)}
.kat-mini__baslik span{letter-spacing:0;color:var(--text-muted);
font-weight:var(--fw-regular);text-transform:none}
/* Detay sayfasının kat yığınının küçük hali: aynı sıra, aynı numaralama,
satır yüksekliği yarıya iniyor ki satırın içinde yer kaplamasın. */
.layer-stack--mini{margin:var(--space-4) 0 0}
.layer-stack--mini .layer-stack__row{gap:var(--space-4);
padding:var(--space-2) var(--space-4)}
.layer-stack--mini .layer-stack__no{min-width:var(--space-6);height:var(--space-6);
font-size:var(--fs-eyebrow)}
.layer-stack--mini .layer-stack__name{font-size:var(--fs-micro);line-height:1.45}
.sis-satir__git{grid-area:git;display:inline-flex;align-self:end;justify-self:start;
align-items:center;gap:var(--space-3);
padding-top:var(--space-5);font-family:var(--font-body);font-size:var(--fs-micro);
font-weight:var(--fw-bold);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
color:var(--brand);text-decoration:none}
.sis-satir__git span{transition:var(--transition-nudge)}
.sis-satir__git:hover{color:var(--ink-800)}
.sis-satir__git:hover span{transform:translateX(var(--nudge-x))}
@media (max-width:1111px){
/* Üç sütun tablette kat sütununu 240px'e düşürüyor; fotoğraf tam genişliğe
çıkıyor, metin ve diyagram altında yan yana kalıyor. */
.sis-satir{grid-template-columns:1fr 1fr;
grid-template-areas:"foto foto" "metin kat" "git git";
grid-template-rows:auto 1fr auto;gap:var(--space-7)}
.sis-satir__foto{aspect-ratio:16/9;min-height:0}
.sis-satir__ad{font-size:var(--fs-h3-t);line-height:var(--lh-h3-t)}
}
@media (max-width:767px){
.sis-bar__baslik{font-size:var(--fs-h2-m);line-height:var(--lh-h2-m)}
/* Dar ekranda dört parça alt alta geliyor ve satır 880px'e çıkıyor: aralık,
dolgu, fotoğraf yüksekliği ve kat satırları hep birlikte bir adım iniyor.
Diyagram duruyor — sayfayı kısaltmak için ondan vazgeçmiyoruz. */
.sis-satir{grid-template-columns:1fr;
grid-template-areas:"foto" "metin" "kat" "git";
grid-template-rows:auto;gap:var(--space-5);padding-block:var(--space-6)}
.sis-satir__foto{min-height:var(--space-16)}
.sis-satir__ozet{font-size:var(--fs-body-m);line-height:var(--lh-body-m)}
/* Etiket sütunu duruyor, aradaki boşluk kalkıyor: dar ekranda değere yer
açan tek yer burası. Satır aralığı bir adım açılıyor. */
.sis-kunye{column-gap:0;row-gap:var(--space-4)}
.layer-stack--mini .layer-stack__row{padding:var(--space-1) var(--space-4)}
}
/* Kapanıştaki koyu sistem indeksi. solution-index compact beyaz zemin için
yazılmış; koyuda okunacak renkler burada, bileşenin kendi kuralları
değişmiyor. */
.sis-indeks{background:var(--blue-950);color:var(--text-on-dark)}
.sis-indeks__doku{position:absolute;inset:0;pointer-events:none;
background-image:radial-gradient(rgba(163,218,235,.09) 2px,transparent 2.1px);
background-size:68px 68px}
.sis-indeks .ref-bar{border-color:rgba(163,218,235,.22)}
.sis-indeks .solution-group__title{color:var(--blue-300);border-bottom-color:var(--brand)}
.sis-indeks .solution-group__title span{color:var(--blue-200)}
.sis-indeks .solution-row{color:var(--white);
border-bottom-color:rgba(163,218,235,.16)}
.sis-indeks .solution-row:hover{color:var(--blue-200)}
.sis-indeks .solution-row__no{color:var(--blue-300)}
.sis-indeks .solution-row__spec{color:var(--blue-200)}
.sis-indeks .solution-row__go{color:var(--blue-300)}
/* İndeks ve kapanış bandı tek bir koyu blok olsun: aralarındaki ton basamağı
(blue-950 / brand-deep) yatay bir dikiş gibi okunuyordu. */
.sis-indeks + .section--dark{background:var(--blue-950)}
/* --- Çözüm detayı ---
Koyu iki sütunlu hero + künye şeridi > dikiş > beyaz gövde (metin + yapışkan
keşif kutusu) > dikiş > koyu kapanış. Hero'nun iki sütunlu hâli ve künye
şeridi kendi bileşenlerinde (page-hero-dark--split, facts--kunye). */
/* Bölüm başlığı: markanın 2px'lik çentiği + eyebrow. Gövdedeki her blok aynı
çubukla açılıyor, h2/h3 basamağına gerek kalmıyor. */
.blok-baslik{margin:0 0 var(--space-7);padding-top:var(--space-5);
border-top:var(--border-w-thick) solid var(--brand);
font:var(--fw-bold) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-body);
letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--brand)}
/* Kat kesiti: katalog diyagramının tek sistem hali. Bantlar bitişik ve
kalınlıkları farklı — en üstteki bitiş katı, en alttaki beton. Etiketler
sağda, aradaki ince çizgi bandı etikete bağlıyor. Numaralar tersten
sayılıyor (01 = beton), uygulama sırası o yön. Hareket yok: teknik çizim.
`acik` tonu beyaz gövde için hazır ama bugün hiçbir sayfa kullanmıyor. */
.kesit{--kesit-bant:250px;--kesit-ara:38px;
--kesit-cizgi:rgba(163,218,235,.34);
--kesit-etiket:var(--white);
--kesit-no:var(--blue-300);
--kesit-not:var(--blue-200);
margin:0;position:relative}
.kesit--koyu{background:rgba(0,42,54,.62);padding:var(--space-7);
border:var(--border-w) solid rgba(163,218,235,.22)}
/* Beyaz zeminde kesit tek başına geniş bloğun solunda küçük bir çizim gibi
kalıyor. Gömük yüzeye alınıp iki sütuna açılıyor: solda diyagram, sağda
başlık ve not. Sayfadaki ikinci zemin tonu bu — üçüncüsü yok. */
.kesit--acik{--kesit-cizgi:var(--border-strong);
--kesit-etiket:var(--text-body);
--kesit-no:var(--brand);
--kesit-not:var(--text-muted);
display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
grid-template-rows:auto 1fr;gap:0 var(--space-11);
background:var(--surface-sunken);padding:var(--space-9)}
.kesit--acik .kesit__baslik{grid-column:2;grid-row:1;margin:0 0 var(--space-5)}
.kesit--acik .kesit__liste{grid-column:1;grid-row:1 / span 2;align-self:start}
.kesit--acik .kesit__not{grid-column:2;grid-row:2;margin:0;align-self:start}
.kesit__baslik{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-3);
margin:0 0 var(--space-6);
font:var(--fw-bold) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-body);
letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--kesit-no)}
.kesit__baslik span{letter-spacing:var(--ls-normal);text-transform:none;
font-weight:var(--fw-regular);color:var(--kesit-not)}
.kesit__liste{list-style:none;margin:0;padding:0;position:relative}
/* Bant sütununun çerçevesi tek parça: her banda ayrı kenarlık verilseydi
aralarda çift çizgi olurdu. */
.kesit__liste::before{content:"";position:absolute;left:0;top:0;bottom:0;
width:var(--kesit-bant);pointer-events:none;
border:var(--border-w) solid var(--kesit-cizgi)}
/* Satır en az bandın kalınlığı kadar; etiket iki satıra sararsa satır uzuyor
ve bant onunla birlikte uzuyor. Banda sabit yükseklik verilseydi sarmalı
satırlarda bantların arasında boşluk açılır, kesit kesit olmaktan çıkardı. */
.kesit__kat{display:grid;
grid-template-columns:var(--kesit-bant) var(--kesit-ara) minmax(0,1fr);
align-items:center;margin:0;min-height:var(--kat-h)}
.kesit__bant{align-self:stretch;min-height:var(--kat-h);
background:var(--kat-renk,var(--blue-500))}
/* Bantlar arasındaki ayrım içeri gölge: kutu ölçüsünü büyütmüyor. */
.kesit__kat + .kesit__kat .kesit__bant{box-shadow:inset 0 1px 0 0 rgba(0,42,54,.55)}
.kesit--acik .kesit__kat + .kesit__kat .kesit__bant{box-shadow:inset 0 1px 0 0 rgba(255,255,255,.65)}
/* Beton: markanın kendi nokta dokusu, adımı küçültülmüş — agrega gibi okunuyor. */
.kesit__kat--beton .kesit__bant{background:var(--ink-600);
background-image:radial-gradient(rgba(255,255,255,.20) 1px,transparent 1.1px);
background-size:13px 13px}
.kesit--acik .kesit__kat--beton .kesit__bant{background:var(--ink-300);
background-image:radial-gradient(rgba(35,40,44,.34) 1px,transparent 1.1px);
background-size:13px 13px}
.kesit__cizgi{height:var(--border-w);background:var(--kesit-cizgi)}
.kesit__ad{display:flex;align-items:baseline;gap:var(--space-4);
font:var(--fw-medium) var(--fs-micro)/1.35 var(--font-heading);
color:var(--kesit-etiket);text-wrap:pretty}
.kesit__ad b{flex:none;font:var(--fw-bold) var(--fs-eyebrow)/1 var(--font-heading);
letter-spacing:.04em;color:var(--kesit-no)}
.kesit__not{margin:var(--space-6) 0 0;font-size:var(--fs-micro);line-height:1.5;
color:var(--kesit-not)}
.kesit--acik .kesit__not{max-width:56ch}
/* Kat yapısı olmayan sistemlerde hero'nun sağ sütunu */
.kunye-plaka{background:rgba(0,42,54,.62);padding:var(--space-7);
border:var(--border-w) solid rgba(163,218,235,.22)}
.kunye-plaka__baslik{margin:0 0 var(--space-5);
font:var(--fw-bold) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-body);
letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--blue-300)}
.kunye-plaka__liste{margin:0}
.kunye-plaka__liste > div{display:flex;align-items:baseline;justify-content:space-between;
gap:var(--space-6);padding:var(--space-4) 0;
border-top:var(--border-w) solid rgba(163,218,235,.2)}
.kunye-plaka__liste > div:first-child{border-top:0;padding-top:0}
.kunye-plaka__liste dt{flex:none;font-size:var(--fs-micro);color:var(--blue-200)}
.kunye-plaka__liste dd{margin:0;text-align:right;
font:var(--fw-semibold) var(--fs-small)/1.35 var(--font-heading);color:var(--white)}
/* Beyaz gövde: solda metin, sağda yapışkan keşif kutusu */
.detay-govde{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.5fr);
gap:var(--space-12);align-items:start}
.detay-ana{min-width:0}
.detay-yan{min-width:0;position:sticky;top:calc(var(--header-h) + var(--space-5));
display:flex;flex-direction:column;gap:var(--space-6);align-items:flex-start}
.detay-metin p{max-width:64ch;text-wrap:pretty}
.detay-metin__giris{font-size:var(--fs-h5);line-height:var(--lh-h5)}
.detay-ikili{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--space-11);margin-top:var(--space-12)}
.bullet-grid--tek{grid-template-columns:1fr}
.detay-yan__tel{display:flex;flex-direction:column;gap:var(--space-1);
width:100%;padding:var(--space-5) var(--space-6);
border:var(--border-w) solid var(--border-default);text-decoration:none;
transition:var(--transition-surface)}
.detay-yan__tel:hover{border-color:var(--brand)}
.detay-yan__tel span{font:var(--fw-bold) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-body);
letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-faint)}
.detay-yan__tel b{font:var(--fw-semibold) var(--fs-h5)/1.2 var(--font-heading);
color:var(--text-body)}
.detay-yan__tel:hover b{color:var(--brand)}
.detay-yan .wa-btn{width:100%}
/* Koyu kapanış: saha galerisi + benzer sistemler */
.detay-kapanis__benzer{margin-top:var(--space-13)}
/* Koyu zeminde base.css'in a:hover kuralı bağlantıyı ink-800'e çeviriyor. */
.detay-kapanis__tumu{color:var(--blue-200)}
.detay-kapanis__tumu:hover{color:var(--white)}
/* Benzer sistemler tek kategoriden üç satır; compact yerleşimin iki sütunu
burada gereksiz, satırlar tam genişlikte kalıyor. */
.detay-kapanis .solution-groups{grid-template-columns:1fr}
.detay-kapanis .solution-group__title{display:none}
/* Az kareli galeride 4/3 kırpma tek fotoğrafı 900px'lik bir duvara çeviriyor;
kare sayısı düştükçe kadraj yatıklaşıyor. */
.saha-galeri--1 .gallery{--gallery-ratio:21/9}
.saha-galeri--2 .gallery{--gallery-ratio:16/9}
@media (max-width:1111px){
.kesit{--kesit-bant:170px;--kesit-ara:30px}
.detay-govde{grid-template-columns:1fr;gap:var(--space-11)}
/* Yapışkanlık tek sütunda anlamsız: kutu, telefon ve WhatsApp yan yana
duran bir satır oluyor. */
.detay-yan{position:static;flex-direction:row;flex-wrap:wrap;align-items:stretch}
.detay-yan > .statement-card{flex:1 1 320px}
.detay-yan__tel{width:auto;flex:1 1 240px;justify-content:center}
}
@media (max-width:767px){
/* Kesit dar ekranda bant sütununu daraltıyor ama duruyor: sayfanın tek
teknik çizimi, kısaltmak için ondan vazgeçmiyoruz. */
.kesit{--kesit-bant:96px;--kesit-ara:16px}
.kesit--koyu{padding:var(--space-6)}
/* Beyaz kesitin iki sütunu dar ekranda hem etiketleri hem notu kelime
ortasından bölüyor; blok tek sütuna iniyor. */
.kesit--acik{grid-template-columns:1fr;grid-template-rows:auto;
padding:var(--space-6)}
.kesit--acik .kesit__baslik{grid-column:1;grid-row:1}
.kesit--acik .kesit__liste{grid-column:1;grid-row:2}
.kesit--acik .kesit__not{grid-column:1;grid-row:3;margin-top:var(--space-6)}
.kesit__ad{font-size:var(--fs-eyebrow);line-height:1.3}
.detay-ikili{grid-template-columns:1fr;gap:var(--space-9);margin-top:var(--space-11)}
.detay-metin__giris{font-size:var(--fs-body-m);line-height:var(--lh-body-m)}
.saha-galeri--1 .gallery,.saha-galeri--2 .gallery{--gallery-ratio:16/9}
}