/* ==========================================================================
   GÜNEYSS · guneyss.com — Tasarım sistemi (base.css)
   Marka: kırmızı #E11F26 · grafit nötr · fırçalanmış paslanmaz çelik vurgu
   Font:  Barlow Condensed (başlık) + IBM Plex Sans (gövde); dile göre değişir (aşağıda "Dil yazı tipleri")
   Boşluk: 8px tabanlı ölçek  8/16/24/32/48/64/96/128
   ========================================================================== */

/* Web yazı tipleri yerelden: @font-face kuralları assets/fonts/{küme}.css, header <head>'e satır içi basar (app/i18n.php
   "YAZI TİPLERİ"; font-display: swap, unicode-range'li alt kümeler, dilin ana dosyaları preload).
   Yedek yazı tipi ölçüleri (PERF-2): web fontu inene kadar metin yerel Arial ile
   çizilir. Arial, web fontunun ortalama harf genişliğine (size-adjust) ve yükseklik ölçülerine (ascent/descent)
   uydurulur; font değişince satır kırılımı ve kutu yüksekliği değişmez (düzen kayması / CLS ~0).
   Değerler Chrome canvas ölçümüyle (Türkçe + İngilizce örnek metin, scratchpad/w2/fontmetrics.py) hesaplandı.
   local() bulunamazsa o aile atlanır ve yığındaki sonraki aile kullanılır. */
@font-face { font-family: "IBM Plex Sans Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 100 500; size-adjust: 101.31%; ascent-override: 101.18%; descent-override: 27.14%; line-gap-override: 0%; }
@font-face { font-family: "IBM Plex Sans Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600 900; size-adjust: 97.76%; ascent-override: 104.85%; descent-override: 28.13%; line-gap-override: 0%; }
/* Barlow Condensed 700/800 (BÜYÜK HARF başlık): Arial Narrow varsa (macOS, Office kurulu Windows) o, yoksa Arial Bold */
@font-face { font-family: "Barlow Condensed Narrow Fallback"; src: local("Arial Narrow Bold"), local("ArialNarrow-Bold"); font-weight: 100 900; size-adjust: 83.62%; ascent-override: 119.59%; descent-override: 23.92%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Condensed Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 100 900; size-adjust: 68.57%; ascent-override: 145.84%; descent-override: 29.17%; line-gap-override: 0%; }
/* Roboto Condensed 700 (ru, bg, el, az başlıkları; Latin + Kiril örneğinin ortalaması) */
@font-face { font-family: "Roboto Condensed Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 100 900; size-adjust: 83.1%; ascent-override: 114.32%; descent-override: 30.08%; line-gap-override: 0%; }
/* Dil seçicideki yerel dil adları (Русский, Ελληνικά, Български): Latin dilli sayfada bu üç kelime yüzünden IBM Plex'in
   Kiril ve Yunan dosyaları (2 woff2) inmesin; bu harfler yerel sistem yazı tipinden (yalnızca bu unicode aralığı) */
@font-face { font-family: "Lang Native"; src: local("Segoe UI"), local("SegoeUI"), local("Roboto"), local("Helvetica Neue"), local("HelveticaNeue"), local("Arial"); font-weight: 100 500; unicode-range: U+0370-03FF, U+1F00-1FFF, U+0400-052F; }
@font-face { font-family: "Lang Native"; src: local("Segoe UI Semibold"), local("SegoeUI-Semibold"), local("Roboto Medium"), local("Roboto-Medium"), local("Helvetica Neue Medium"), local("HelveticaNeue-Medium"), local("Arial Bold"); font-weight: 600 900; unicode-range: U+0370-03FF, U+1F00-1FFF, U+0400-052F; }

:root {
  /* Marka */
  --red: #E11F26;
  --red-600: #C8171D;
  --red-700: #A51217;
  --red-300: #FF6B70;  /* koyu zeminde küçük kırmızı metin (zorunlu alan *, istatistik eki): grafit üzerinde ≥4.5:1 */
  --red-50: #FDEDEE;
  --red-glow: rgba(225, 31, 38, .45);

  /* Grafit / çelik nötrler */
  --ink: #0D0F11;
  --graphite: #15181B;
  --graphite-2: #1C2024;
  --graphite-3: #262B30;
  --steel-800: #353B41;
  --steel-700: #4A5159;
  --steel-600: #626A73;
  --steel-500: #7B838C;
  --steel-400: #9AA1A9;
  --steel-300: #BCC2C8;
  --steel-200: #D7DBDF;
  --steel-100: #E9ECEE;
  --steel-50: #F4F5F6;
  --white: #FFFFFF;

  /* Semantik */
  --bg: var(--steel-50);
  --surface: var(--white);
  --text: #15181B;
  --text-muted: #4F575F;
  --text-soft: #626A73;
  --line: #DCE0E4;
  --line-strong: #C6CCD2;
  --on-dark: #F1F3F4;
  --on-dark-muted: #A7AEB5;
  --line-dark: rgba(255, 255, 255, .10);
  --wa: #15803D;
  --wa-600: #166534;

  /* Tipografi */
  --font-display: "Barlow Condensed", "Barlow Condensed Narrow Fallback", "Barlow Condensed Fallback", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-body: "IBM Plex Sans", "IBM Plex Sans Fallback", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* "ch" (0 rakamının genişliği) yazı tipine bağlı: yedek yazı tipinde %6-16 dar çözülür ve font değişince
     max-width'li başlık/paragraf yeniden kırılır (CLS). Okuma genişlikleri web fontunun 1ch'ı (em) ile verilir:
     max-width: calc(64 * var(--ch-body)). IBM Plex Sans 0 = .6em, Barlow Condensed 700 0 = .453em. */
  --ch-body: .6em;
  --ch-display: .453em;

  --fs-xs: .75rem;     /* 12 */
  --fs-sm: .875rem;    /* 14 */
  --fs-base: 1rem;     /* 16 */
  --fs-md: 1.125rem;   /* 18 */
  --fs-lg: 1.25rem;    /* 20 */
  --fs-h4: 1.25rem;
  --fs-h3: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --fs-h2: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --fs-h1: clamp(2.25rem, 1.6rem + 3.8vw, 4.75rem); /* en küçük 36 px: 320 px'te 16 harfli kelime (nl, bg) satıra sığar */
  --fs-display: clamp(3rem, 1.8rem + 5vw, 6rem);

  /* 8px boşluk ölçeği */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 48px;
  --s-6: 64px;
  --s-7: 96px;
  --s-8: 128px;

  --container: 1280px;
  --gutter: 16px;
  --radius: 2px;
  --radius-md: 4px;
  --header-h: 72px;
  --dock-h: 61px;       /* mobil alt iletişim şeridi: 60px + 1px üst çizgi */
  --dock-clear: 100px;  /* masaüstü yüzen dock payı: sağdan 24 + 60 daire + 16 açıklık */

  /* Gölgeler — grafitten türetilmiş, düz gri değil */
  --shadow-sm: 0 1px 2px rgba(21, 24, 27, .06), 0 1px 1px rgba(21, 24, 27, .04);
  --shadow-md: 0 8px 24px -8px rgba(21, 24, 27, .18), 0 2px 6px rgba(21, 24, 27, .06);
  --shadow-lg: 0 24px 48px -16px rgba(13, 15, 17, .32);
  --shadow-red: 0 10px 24px -10px rgba(200, 23, 29, .55);

  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 160ms;
  --t: 240ms;

  /* Fırçalanmış çelik dokusu (yatay çizgisel gürültü) */
  --brush: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='640' height='320'><filter id='n' x='0' y='0'><feTurbulence type='fractalNoise' baseFrequency='0.0025 0.9' numOctaves='3' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --steel-sheen: linear-gradient(100deg, #8C939A 0%, #DDE1E4 13%, #AAB0B6 27%, #F4F5F6 43%, #B2B8BE 57%, #E7EAEC 71%, #979EA5 86%, #CDD1D5 100%);
  --steel-sheen-dark: linear-gradient(100deg, #121417 0%, #262B30 22%, #16191C 46%, #2C3137 70%, #131518 100%);
}

@media (min-width: 768px) { :root { --gutter: 24px; --header-h: 80px; } }
@media (min-width: 1200px) { :root { --gutter: 32px; } }

/* Dil yazı tipleri (app/i18n.php i18n_font_sets yalnızca gereken ailenin @font-face kurallarını basar).
   Kiril / Yunan / Azerice (ə): başlıkta Roboto Condensed. Çince ve Hintçe: büyük harf ve harf aralığı yok. */
html[lang="ru"], html[lang="bg"], html[lang="el"], html[lang="az"] { --font-display: "Roboto Condensed", "Roboto Condensed Fallback", "Arial Narrow", sans-serif; --ch-display: .505em; }
html[lang="zh-Hans"] {
  --font-display: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-body: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --ch-body: 1ch; --ch-display: 1ch; /* sistem yazı tipi: font değişimi yok */
}
html[lang="hi"] {
  --font-display: "Noto Sans Devanagari", "Nirmala UI", sans-serif;
  --font-body: "Noto Sans Devanagari", "Nirmala UI", sans-serif;
  --ch-body: 1ch; --ch-display: 1ch;
}
html[lang="zh-Hans"] *, html[lang="hi"] * { text-transform: none !important; letter-spacing: 0 !important; }
/* Başlık yazı tipiyle dar satır aralığı (.92-1.1) Latin büyük harf için; CJK ideogramları em kutusunu doldurur,
   Devanagari'de üst çizgi + ünlü işaretleri (ि ी ु ्र) satır dışına taşar: çok satırlı başlıkta satırlar birbirine
   değer. Bileşen kuralları (.sector-card__title vb.) daha özgül olduğu için !important; tek satırlık öğede etkisiz. */
html[lang="zh-Hans"] :is(h1, h2, h3, h4, .h1, .h2, .h3, .h-display, [class*="title"], [class*="__name"], [class*="__label"], blockquote, [class*="__quote"], [class*="__motto"], .footer-title, .stat__value, .eyebrow, .btn, .chip, .badge, dt, strong, b, small) { line-height: 1.3 !important; }
html[lang="hi"] :is(h1, h2, h3, h4, .h1, .h2, .h3, .h-display, [class*="title"], [class*="__name"], [class*="__label"], blockquote, [class*="__quote"], [class*="__motto"], .footer-title, .stat__value, .eyebrow, .btn, .chip, .badge, dt, strong, b, small) { line-height: 1.4 !important; }
/* zh/hi: başlık yazı tipi geniş (CJK / Devanagari rakamları Barlow Condensed'in ~1,6 katı): büyük telefon numarası
   telefonda iki satıra bölünmesin */
html:is([lang="zh-Hans"], [lang="hi"]) :is(.cat-contact__phone, .c-person__phone) { font-size: clamp(1.375rem, 1rem + 2vw, 1.75rem); }
/* Roboto Condensed dilleri (ru/bg/el/az): rakamlar Barlow'dan geniş; uluslararası biçim "+90 545 206 13 74" 320 px'te
   kabından 12 px taşıyordu (tek satır, white-space:nowrap) — yazı boyu telefonda küçülür */
html:is([lang="ru"], [lang="bg"], [lang="el"], [lang="az"]) .cat-contact__phone { font-size: clamp(1.5rem, 1rem + 2.5vw, 2rem); }
html:is([lang="ru"], [lang="bg"], [lang="el"], [lang="az"]) .c-person__phone { font-size: clamp(1.5rem, 1rem + 2.5vw, 1.875rem); }
html:is([lang="ru"], [lang="bg"], [lang="el"], [lang="az"]) .c-person--compact .c-person__phone { font-size: clamp(1.375rem, 1rem + 2vw, 1.625rem); }
/* Çince: kapanış noktalaması (，。、）) satır başına düşmesin */
html[lang="zh-Hans"] body { line-break: strict; }
/* Çince başlık: CJK her karakterde kırılabildiği için son satırda tek karakter / yarım kelime kalıyordu
   ("表面洁净。螺纹 / 清晰。连接可 / 靠。"); satırlar dengelenir. word-break:keep-all KULLANILMAZ (boşluksuz
   CJK cümlesi tek "kelime" olur ve taşar). */
html[lang="zh-Hans"] :is(h1, h2, h3, h4, .h-display, .h1, .h2, .h3, [class*="__title"], [class*="__motto"], [class*="__quote"], .stat__label) { text-wrap: balance; line-break: strict; }
/* Kiril / Yunan başlık: uzun bileşik kelimeler ("Равнопроходной", "Корабостроене", "Πυροσβεστικά") sözlüklü
   tarayıcıda 8+ harften itibaren tireyle hecelenir; sözlük yoksa genel kuraldaki overflow-wrap son çaredir. */
html:is([lang="ru"], [lang="bg"], [lang="el"]) :is(h1, h2, h3, h4, .h-display, .h1, .h2, .h3, [class*="__title"], [class*="__name"], dt) { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 8 3 3; }
/* İrlandaca: büyük harf dönüşümünde önek küçük kalır, n-/t- kısa çizgisi düşer ("ÁR dTÁIRGÍ", "INA nOIBRÍMID");
   önekleri site.js işaretler (yalnız text-transform:uppercase öğelerde) */
/* Çince slogan başlıkları (hakkımızda, üretim): her "…。" ifadesi tek parça; sığmazsa kendi içinde kırılır */
.zh-seg { display: inline-block; }
.ga-pfx { text-transform: none; }
.ga-pfx__hy { display: none; }

/* Çok dilli metin güvenceleri: uzun kelimeler (ru/bg/el/az bileşikleri, ga, nl) dar sütunda kabından taşmasın.
   - body: overflow-wrap:break-word — sığmayan kelime satırda kırılır (en küçük içerik genişliğini değiştirmez).
   - başlık, kart başlığı, etiket, çip: hyphens:auto (html lang'e göre tarayıcı sözlüğüyle hecelenir; 10+ harfli
     kelimelerde) + overflow-wrap:anywhere — heceleme sözlüğü yoksa son çare olarak kelime içinden kırılır ve
     ızgara/esnek öğe sütunu en uzun kelimeye göre genişleyip ekranı taşırmaz. */
body { overflow-wrap: break-word; }
:is(h1, h2, h3, h4, .h-display, .h1, .h2, .h3, .h4, [class*="__title"], [class*="__name"], [class*="__label"], .lead, .eyebrow, .chip, .badge, dt, dd, label, summary) {
  overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 10 4 4;
}
/* Tablo hücresinde "anywhere" sütunun kelimeye göre genişlemesini engeller (otomatik tablo düzeni en küçük içeriği
   kullanır): hücre içinde yalnızca sığmayan kelime kırılır, sütun önce genişler */
:is(td, th) :is(h1, h2, h3, h4, [class*="__title"], [class*="__name"], [class*="__label"], .chip, .badge, dt, dd, label) { overflow-wrap: break-word; }
/* Başlıkta son satırda tek kelime / tek CJK karakteri kalmasın (destekleyen tarayıcıda) */
:is(h1, h2, h3, .h-display, .h1, .h2) { text-wrap: pretty; }

/* ---------------------------------------------------------------- Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
table { border-collapse: collapse; width: 100%; }
p { margin: 0 0 var(--s-2); }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; line-height: 1.1; color: inherit; }
[hidden] { display: none !important; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-5) 0; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
::selection { background: var(--red); color: #fff; }

/* Hareket azaltma: geçişler gerçekten 0s (A11Y-3). .01ms'lik geçiş visibility'yi bir an "hidden" tuttuğu için
   açılan çekmeceye/menüye focus() sessizce başarısız oluyordu. animation .01ms kalır (home.js animationend bekler). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 16px; top: -48px; z-index: 200; background: var(--red); color: #fff; padding: 8px 16px; }
.skip-link:focus { top: 8px; }

/* ---------------------------------------------------------------- Tipografi */
.h-display, .h1, h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 700; line-height: .98; letter-spacing: .005em; text-transform: uppercase; }
.h-display { font-size: var(--fs-display); line-height: .92; }
.h2, h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: .005em; }
.h3, h3 { font-family: var(--font-body); font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.h4, h4 { font-family: var(--font-body); font-size: var(--fs-h4); font-weight: 600; line-height: 1.3; }
.lead { font-size: var(--fs-md); line-height: 1.65; color: var(--text-muted); max-width: calc(64 * var(--ch-body)); }
.text-muted { color: var(--text-muted); }
.text-red { color: var(--red); }
.num { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Eyebrow: "— STAINLESS HYDRAULIC FITTINGS —" dili */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--steel-600);
  margin-bottom: var(--s-2);
}
.eyebrow::before { content: ""; width: 32px; height: 2px; background: var(--red); flex: none; }
.eyebrow--center::after { content: ""; width: 32px; height: 2px; background: var(--red); flex: none; }
.on-dark .eyebrow, .section--dark .eyebrow, .section--ink .eyebrow, .u-steel-dark .eyebrow, .eyebrow--light { color: var(--on-dark-muted); }

/* ---------------------------------------------------------------- Layout */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(880px + var(--gutter) * 2); }
.container--wide { max-width: calc(1440px + var(--gutter) * 2); }

.section { padding-block: var(--s-6); position: relative; }
.section--tight { padding-block: var(--s-5); }
@media (min-width: 1024px) { .section { padding-block: var(--s-7); } .section--tight { padding-block: var(--s-6); } }
.section--white { background: var(--surface); }
.section--light { background: var(--bg); }
.section--dark { background: var(--graphite); color: var(--on-dark); }
.section--ink { background: var(--ink); color: var(--on-dark); }
.section--dark .text-muted, .section--ink .text-muted, .on-dark .text-muted { color: var(--on-dark-muted); }
.section--dark .lead, .section--ink .lead, .on-dark .lead { color: var(--on-dark-muted); }

/* Fırçalanmış çelik yüzeyler */
.u-steel { background-color: #C9CED3; background-image: var(--brush), var(--steel-sheen); background-blend-mode: overlay, normal; background-size: 640px 320px, 100% 100%; color: var(--ink); }
.u-steel .eyebrow, .u-steel .lead { color: var(--graphite-2); }
.cta-band.u-steel p { color: var(--graphite-3); }
.u-steel-dark { background-color: var(--graphite); background-image: var(--brush), var(--steel-sheen-dark); background-blend-mode: soft-light, normal; background-size: 640px 320px, 100% 100%; color: var(--on-dark); }

/* Kırmızı neon çizgi (banner'daki LED şerit) */
.rule-red { display: block; height: 2px; background: var(--red); box-shadow: 0 0 14px var(--red-glow); border: 0; }
.rule-red--v { width: 2px; height: auto; }

/* Bölüm başlığı: kırık simetri — başlık solda, bağlantı sağda */
.section-head { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); align-items: end; }
@media (min-width: 900px) {
  .section-head { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s-5); }
  .section-head__aside { justify-self: end; text-align: right; }
}
.section-head h2 { max-width: calc(22 * var(--ch-display)); }
.section-head .lead { margin: var(--s-2) 0 0; }

.grid { display: grid; gap: var(--s-3); }
@media (min-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.stack > * + * { margin-top: var(--s-2); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); align-items: center; }

/* ---------------------------------------------------------------- İkon */
.icon { width: 24px; height: 24px; flex: none; }
.icon-sm { width: 18px; height: 18px; }
.icon-xs { width: 14px; height: 14px; }
.icon-lg { width: 32px; height: 32px; }
.icon-box {
  display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none;
  background: var(--steel-100); color: var(--graphite); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.icon-box--red { background: var(--red); color: #fff; border-color: var(--red); }
.icon-box--dark { background: var(--graphite-3); color: var(--on-dark); border-color: var(--line-dark); }

/* ---------------------------------------------------------------- Butonlar */
.btn {
  --btn-h: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--btn-h); max-width: 100%; padding: 6px 24px;
  font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: .01em; line-height: 1.2;
  border: 1px solid transparent; border-radius: var(--radius);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  text-align: center; cursor: pointer;
}
/* Etiket (11 dil) kabından uzunsa düğme kabı aşmaz, etiket satır kırar (max-width + normal white-space; dikey
   iç boşluk iki satırı nefeslendirir, tek satırda min-height belirler). Kap genişse düğme doğal genişliğinde
   tek satır kalır. Başlıktaki düğme hiç kırılmaz (.header-actions). */
.btn .icon { width: 18px; height: 18px; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-sm { --btn-h: 40px; padding-inline: 16px; font-size: 14px; }
.btn-lg { --btn-h: 56px; padding-inline: 32px; font-size: 16px; }
.btn-block { width: 100%; }
/* Telefon (≤479 px): kap 240-288 px; yatay iç boşluk daralır ki uzun dil etiketi (ru, el, bg, nl) tek satırda kalsın */
@media (max-width: 479px) {
  .btn, .btn-lg { gap: var(--s-1); padding-inline: 12px; }
  .btn-lg { font-size: 15px; }
}

.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-600); box-shadow: var(--shadow-red); }
.btn-dark { background: var(--graphite); color: #fff; }
.btn-dark:hover { background: var(--ink); box-shadow: var(--shadow-md); }
.btn-steel { background-color: #D3D7DB; background-image: var(--brush), var(--steel-sheen); background-blend-mode: overlay, normal; background-size: 640px 320px, 200% 100%; background-position: 0 0, 0 0; color: var(--ink); border-color: rgba(13, 15, 17, .18); }
.btn-steel:hover { background-position: 0 0, 100% 0; box-shadow: var(--shadow-md); }
.btn-outline { border-color: var(--line-strong); color: var(--text); background: transparent; }
.btn-outline:hover { border-color: var(--graphite); background: var(--graphite); color: #fff; }
.btn-outline-light { border-color: rgba(255, 255, 255, .28); color: #fff; background: transparent; }
.btn-outline-light:hover { border-color: #fff; background: #fff; color: var(--ink); }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: var(--wa-600); box-shadow: 0 10px 24px -10px rgba(21, 128, 61, .6); }
.btn-ghost { color: var(--text); padding-inline: 8px; }
.btn-ghost:hover { color: var(--red); transform: none; }

/* Metin bağlantısı + ok */
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--text); border-bottom: 1px solid transparent; transition: color var(--t-fast), gap var(--t-fast); }
.link-arrow .icon { width: 18px; height: 18px; color: var(--red); transition: transform var(--t-fast) var(--ease); }
.link-arrow:hover { color: var(--red); }
.link-arrow:hover .icon { transform: translateX(4px); }
/* Koyu zeminler: metin açık, hover'da kırmızı alt çizgi (kırmızı metin koyu zeminde AA altında kalır) */
.on-dark .link-arrow, .section--dark .link-arrow, .section--ink .link-arrow, .u-steel-dark .link-arrow { color: var(--on-dark); }
.on-dark .link-arrow:hover, .section--dark .link-arrow:hover, .section--ink .link-arrow:hover, .u-steel-dark .link-arrow:hover { color: #fff; border-bottom-color: var(--red); }

/* ---------------------------------------------------------------- Chip / rozet */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; font-size: 13px; font-weight: 500; border: 1px solid var(--line); background: var(--surface); color: var(--text-muted); border-radius: 999px; line-height: 1.2; }
a.chip:hover, button.chip:hover { border-color: var(--graphite); color: var(--graphite); }
.chip .icon { width: 16px; height: 16px; }
.chip.is-active, .chip[aria-pressed="true"] { background: var(--graphite); border-color: var(--graphite); color: #fff; }
/* button.chip:hover (0,2,1) basılı çipin beyaz metnini grafite çeviriyordu (grafit zemin üstünde) */
.chip[aria-pressed="true"]:hover, .chip.is-active:hover { color: #fff; border-color: var(--graphite); }
.on-dark .chip, .section--dark .chip { background: transparent; border-color: var(--line-dark); color: var(--on-dark-muted); }
.badge { display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; background: var(--steel-100); color: var(--steel-700); border-radius: var(--radius); }
.badge--red { background: var(--red-50); color: var(--red-700); }

/* Çince ve Hintçe küçük etiketler (A3.2): Latin dillerde 11-12 px etiket büyük harf + harf aralığıyla okunur;
   zh/hi'de ikisi de kapalı (yukarıda "Dil yazı tipleri") ve CJK / Devanagari (üst çizgi, ünlü işaretleri) 11-12 px'te
   seçilmiyor. Eyebrow, rozet, sayaç ve meta etiketleri bu iki dilde 13 px. Sayfa CSS'lerindeki etiketler de burada
   (base.css her sayfada yüklü; tek liste). Özgüllük (0,2,2): bileşen kurallarını ((0,2,0)'a kadar) ezer. */
html:is([lang="zh-Hans"], [lang="hi"]) :is(.eyebrow, .badge, .answer-box__label, .header-phone small, .table-hint, .channel small,
  .footer-langs__label, .divider-label, .brand__sub,
  .home-lead__cap, .home-lead dt, .home-group__count,
  .sx-jump__label, .sx-rail__label, .sx-fact dt, .sx-subnav__count, .sx-chips__n, .sx-prod__group, .sx-compare__facts dt, .sx-guide__tech-label,
  .cat-label, .cat-label-heading, .cat-termin span, .grp-card__kicker, .prd-info__group,
  .c-person__label, .kb-feature__tag, .post-toc__title, .post-sectors__label, .post-share__label, .mfg-facts dt, .mfg-step__flag,
  .mfg-subtitle, .contact-info__label, .contact-map__label, .quote-picked__label, .quote-pick small, .search-sub,
  .tech-grid__unit, .tech-res-head__in span, .tech-cand__facts dt, .tech-badge, .tech-card__meta,
  .tech-grid__label, .tech-seg__opt small, .tech-tag, .tech-cand__facts dd small, .cat-sectorbar__link small,
  .footer-contact small, .prd-reading__list small, .dropzone__meta) { font-size: 13px; }
html:is([lang="zh-Hans"], [lang="hi"]) :is(.sx-compare tbody td, .tech-grid--confusion tbody tr > [data-label])::before { font-size: 13px; }
/* Mobil alt şerit etiketleri (≥900 px'te dock yuvarlak ikon, metin font-size:0 ile gizli kalır) */
@media (max-width: 899px) { html:is([lang="zh-Hans"], [lang="hi"]) .contact-dock a { font-size: 13px; } }

/* ---------------------------------------------------------------- Header */
.topbar { background: var(--ink); color: var(--on-dark-muted); font-size: 13px; }
.topbar .container { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 40px; }
.topbar a { display: inline-flex; align-items: center; gap: 6px; transition: color var(--t-fast); }
.topbar a:hover { color: #fff; }
.topbar .icon { width: 15px; height: 15px; color: var(--red); }
.topbar__left, .topbar__right { display: flex; align-items: center; gap: var(--s-3); }
.topbar__left > span { display: inline-flex; align-items: center; gap: 6px; } /* ikon metnin yanında (svg blok) */
/* <900 px: üst şerit (telefon + WhatsApp) alttaki iletişim dock'unun birebir tekrarı (UX-12); dock her zaman
   görünür olduğu için şerit gizlenir. Şerit sabit değil, sayfanın başında; JS ile aç/kapa CLS yaratırdı. */
@media (max-width: 899px) { .topbar { display: none; } }

.site-header { position: sticky; top: 0; z-index: 100; background: var(--graphite); color: var(--on-dark); border-bottom: 1px solid var(--line-dark); transition: box-shadow var(--t) var(--ease), background-color var(--t); }
.site-header.is-scrolled { box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .55); background: rgba(21, 24, 27, .97); }
.site-header::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 120px; background: var(--red); box-shadow: 0 0 12px var(--red-glow); }
.header-inner { display: flex; align-items: center; gap: var(--s-3); min-height: var(--header-h); }

/* Wordmark: GÜNEY (çelik) SS (kırmızı) + slogan satırı (brand__sub).
   Uzun slogan (nl, bg, el: ~160-225 px) dar ekranda menü düğmesini ekrandan itmesin: marka küçülebilir
   (en küçük genişliği logo yazısı / en uzun kelime), slogan iki satıra kırılır. */
.brand { display: inline-flex; flex-direction: column; justify-content: center; line-height: 1; flex: 0 1 auto; }
.brand img { max-height: 44px; width: auto; }
.brand__mark { font-family: "Barlow Condensed", "Barlow Condensed Narrow Fallback", "Barlow Condensed Fallback", "Arial Narrow", sans-serif; font-weight: 800; font-style: italic; font-size: 30px; letter-spacing: .01em; text-transform: uppercase; display: flex; }
.brand__accent { color: var(--red); }
/* background-clip:text italik "Y"nin sağ kolunu kutu kenarında kesiyordu: yatay iç pay + eşit negatif dış pay (yerleşim aynı) */
.brand__base { background: linear-gradient(180deg, #F2F4F5 0%, #AEB5BC 55%, #E3E6E8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .12em 0 .08em; margin: 0 -.12em 0 -.08em; }
.brand__sub { font-family: var(--font-display); font-weight: 700; font-size: 12px; line-height: 1.2; letter-spacing: .2em; color: var(--steel-400); margin-top: 3px; padding-left: 2px; overflow-wrap: normal; hyphens: manual; }
@media (max-width: 479px) { .brand__sub { letter-spacing: .12em; } }
/* Dar telefonlarda header'da bayrak düğmesi de var: slogan tek satır kalsın, çok dar ekranda gizlensin */
@media (max-width: 419px) { .site-header .brand__sub { font-size: 11px; letter-spacing: .04em; white-space: nowrap; } }
@media (max-width: 359px) { .site-header .brand__sub { display: none; } }
@media (min-width: 768px) { .brand__mark { font-size: 34px; } }

.nav { display: none; margin-left: auto; }
.nav__list { display: flex; align-items: stretch; list-style: none; gap: 2px; }
.nav__item { position: relative; display: flex; }
/* --nav-pad: bağlantı iç boşluğu (sığdırma kademesinde daralır; alt çizgi de ona hizalı) */
.nav { --nav-pad: 14px; --nav-toggle-w: 28px; --nav-toggle-m: 6px; }
.nav__link { display: inline-flex; align-items: center; gap: 4px; padding: 0 var(--nav-pad); min-height: var(--header-h); font-size: 15px; font-weight: 500; color: var(--on-dark); position: relative; white-space: nowrap; transition: color var(--t-fast); }
.nav__item[data-dropdown] > .nav__link { padding-right: 2px; }
.nav__item[data-dropdown] > .nav__link::after { right: 2px; }
.nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--nav-toggle-w); min-height: var(--header-h); margin-right: var(--nav-toggle-m); color: var(--steel-400); border-radius: var(--radius); }
.nav__toggle:hover { color: #fff; }
.nav__toggle .icon { width: 16px; height: 16px; transition: transform var(--t-fast); }
.nav__link::after { content: ""; position: absolute; left: var(--nav-pad); right: var(--nav-pad); bottom: 18px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform var(--t) var(--ease); }
.nav__link:hover, .nav__item:focus-within > .nav__link { color: #fff; }
.nav__link:hover::after, .nav__link.is-active::after, .nav__item:hover > .nav__link::after { transform: scaleX(1); }
.nav__item:hover > .nav__toggle .icon, .nav__item.is-open > .nav__toggle .icon { transform: rotate(180deg); }
.header-actions { display: flex; align-items: center; gap: var(--s-1); margin-left: auto; }
.header-actions .btn { --btn-h: 44px; white-space: nowrap; flex: none; }
.header-phone { display: none; align-items: center; gap: 10px; padding-right: var(--s-2); margin-right: var(--s-1); border-right: 1px solid var(--line-dark); }
.header-phone small { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); }
.header-phone strong { display: block; font-family: var(--font-display); font-size: 20px; letter-spacing: .02em; color: #fff; }
.header-phone .icon-box { width: 40px; height: 40px; background: transparent; border-color: var(--line-dark); color: var(--red); }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-dark); border-radius: var(--radius); color: var(--on-dark); transition: border-color var(--t-fast), background-color var(--t-fast); }
.icon-btn:hover { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .04); }
.header-cta-label { display: none; }

@media (min-width: 1200px) {
  .nav { display: block; }
  .nav-toggle { display: none; }
  .header-actions { margin-left: var(--s-2); }
  .header-cta-label { display: inline; }
}
/* Başlıktaki telefon bloğu: menü + dil seçici + teklif düğmesiyle 1280px kaba sığmıyor (1440 px'te 11 dilde 31-64 px
   taşma ölçüldü); masaüstünde telefon üst şeritte (tek görünür numara) ve dock'ta. .header-phone işaretlemesi korunur,
   görünür değildir. Mobilde üst şerit gizli; telefon dock'ta. */
@media (min-width: 1200px) and (max-width: 1439px) {
  .nav { --nav-pad: 8px; --nav-toggle-w: 24px; --nav-toggle-m: 2px; }
}
/* Sığdırma kademeleri (site.js fitHeader): menü + dil seçici + teklif düğmesi kaba sığmazsa sırayla
   is-snug (dar iç boşluk) → is-tight (teklif düğmesi yalnız ikon; ad aria-label'da) → is-cramped (üst menü
   çekmeceye geçer). Dil ve yazı tipine göre ölçülür; başlık tek satır, yüksekliği sabit. */
@media (min-width: 1200px) {
  .site-header.is-snug .nav { --nav-pad: 8px; --nav-toggle-w: 24px; --nav-toggle-m: 2px; }
  .site-header.is-snug .lang-switch__btn .icon { display: none; }
  .site-header.is-tight .header-cta-label { display: none; }
  .site-header.is-tight .header-actions .btn-primary { padding: 0 14px; }
  .site-header.is-tight .header-actions { margin-left: var(--s-1); }
  .site-header.is-cramped .nav { display: none; }
  .site-header.is-cramped .nav-toggle { display: inline-grid; }
}
@media (max-width: 1199px) { .header-actions .btn-primary { padding: 0 14px; } }
@media (max-width: 479px) { .header-actions .btn-primary { display: none; } }

/* Açılır menüler */
/* --dd-shift: panel sağ kenardan taşacaksa site.js sola kaydırır (kapalı panel de belge genişliğini büyütmesin) */
.dropdown {
  position: absolute; top: 100%; left: var(--dd-shift, 0px); min-width: 300px; padding: var(--s-2);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); border-top: 2px solid var(--red);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t);
}
/* Açılış: fareyle hover ya da düğme (.is-open). Odak panele kendiliğinden girmez (kapalı panel Tab sırasında yok). */
.nav__item:hover > .dropdown, .nav__item.is-open > .dropdown { opacity: 1; visibility: visible; transform: none; }
/* Escape ile kapatılan menü (site.js): aynı özgüllük, sonra geldiği için hover/focus'u ezer */
.nav__item.is-dismissed > .dropdown { opacity: 0; visibility: hidden; transform: translateY(8px); }
.nav__item.is-dismissed > .nav__toggle .icon { transform: none; }
.dropdown__link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius); font-size: 15px; transition: background-color var(--t-fast); }
.dropdown__link .icon { width: 20px; height: 20px; color: var(--steel-600); }
.dropdown__link:hover { background: var(--steel-50); }
.dropdown__link:hover .icon { color: var(--red); }
/* Geçerli sayfa (aria-current="page"): kırmızı sol çizgi + kalın */
.dropdown__link[aria-current="page"] { font-weight: 600; background: var(--steel-50); box-shadow: inset 3px 0 0 var(--red); }
.dropdown__link[aria-current="page"] .icon { color: var(--red); }
.dropdown__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; min-width: 560px; }
.dropdown__foot { margin-top: var(--s-1); padding-top: var(--s-2); border-top: 1px solid var(--line); }
.dropdown__sub { display: block; padding: 6px 12px 6px 44px; font-size: 14px; line-height: 1.4; color: var(--text-muted); border-radius: var(--radius); transition: color var(--t-fast), background-color var(--t-fast); }
.dropdown__sub:hover { color: var(--red); background: var(--steel-50); }
/* Ürünler: üst gruplar + alt gruplar, iki sütun (blok bölünmez) */
.dropdown__groups { columns: 2; column-gap: var(--s-1); width: 640px; }
.dropdown__group { break-inside: avoid; padding-bottom: 2px; }

/* Sektörler mega menü */
.nav__item--mega { position: static; }
.mega { left: 0; right: 0; top: 100%; min-width: 0; padding: 0; background: var(--surface); border-bottom: 1px solid var(--line); }
.mega__inner { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0; }
.mega__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: var(--s-4) var(--s-4) var(--s-4) 0; }
.mega__link { display: grid; grid-template-columns: 40px 1fr; gap: 4px 14px; align-items: center; padding: 12px; border-radius: var(--radius); transition: background-color var(--t-fast); }
.mega__link .icon-box { width: 40px; height: 40px; grid-row: span 2; align-self: center; display: inline-grid; place-items: center; }
.mega__link .icon-box .icon { width: 20px; height: 20px; }
.mega__link strong { font-size: 15px; font-weight: 600; line-height: 1.3; }
.mega__link > span:not(.icon-box) { font-size: 13px; line-height: 1.45; color: var(--text-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mega__link:hover { background: var(--steel-50); }
.mega__link:hover .icon-box { background: var(--red); border-color: var(--red); color: #fff; }
.mega__promo { position: relative; padding: var(--s-4); color: var(--on-dark); display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%; overflow: hidden; }
.mega__promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mega__promo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 15, 17, .15) 0%, rgba(13, 15, 17, .92) 75%); z-index: 1; }
.mega__promo > *:not(img) { position: relative; z-index: 2; }
.mega__promo p { font-size: 14px; color: var(--on-dark-muted); }
/* Promo başlığı <p>: menü, sayfa başlık taslağına (H1'den önce) girmesin; görünüm eski h3 ile aynı */
.mega__promo .mega__title { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; line-height: 1; color: var(--on-dark); margin: 0 0 var(--s-1); }

/* Dil seçici: düğmede geçerli dilin bayrağı (img alt="" — ad düğmenin aria-label'ında, satırlarda yerel ad).
   ≥1200 px: bayrak + küçük ok, sağa hizalı açılır liste. Altında: 44×44 bayrak düğmesi (ok yok) ve başlığın altında
   tam genişlik panel — .lang-switch static olur, panelin konum kabı yapışkan .site-header (sayfayla birlikte kayar).
   Satır: bayrak + yerel ad; geçerli dil kalın + kırmızı çizgi + onay ikonu (aria-current). Davranış site.js. */
.flag { display: block; flex: none; border-radius: 1px; background: var(--steel-100); box-shadow: 0 0 0 1px rgba(13, 15, 17, .12); }
.lang-switch { position: relative; flex: none; }
.lang-switch__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 var(--s-1); border: 1px solid var(--line-dark); border-radius: var(--radius); color: var(--on-dark); transition: border-color var(--t-fast), background-color var(--t-fast); }
.lang-switch__btn:hover, .lang-switch.is-open .lang-switch__btn { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .04); }
.lang-switch__btn .icon { width: 14px; height: 14px; color: var(--steel-400); transition: transform var(--t-fast); }
.lang-switch.is-open .lang-switch__btn .icon { transform: rotate(180deg); }
/* Kısa ekranda site.js (fitMenu) satır içi max-height verir; liste kendi içinde kayar, sayfa kaydırmasına geçmez */
.lang-switch__menu { position: absolute; z-index: 120; right: 0; top: calc(100% + 8px); min-width: 240px; padding: var(--s-1); list-style: none; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); border-top: 2px solid var(--red); overflow-y: auto; overscroll-behavior: contain; }
.lang-switch__menu a, .drawer__langlist a, .footer-langs__list a { font-family: "Lang Native", var(--font-body); }
.lang-switch__menu a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: var(--s-1) 12px; border-radius: var(--radius); font-size: 15px; line-height: 1.3; transition: background-color var(--t-fast); }
.lang-switch__menu a:hover { background: var(--steel-50); }
.lang-switch__menu a[aria-current] { font-weight: 600; box-shadow: inset 2px 0 0 var(--red); }
.lang-switch__menu .icon-check { flex: none; margin-left: auto; color: var(--red); }
/* Yerel ad kelime içinden bölünmez (body overflow-wrap); en dar sütun en uzun ada (kalın "Azərbaycanca" 98 px) göre */
.lang-switch__name { white-space: nowrap; }
@media (max-width: 1199px) {
  .lang-switch { position: static; }
  .lang-switch__btn { width: 44px; padding: 0; }
  .lang-switch__btn .icon { display: none; }
  /* Satır iç boşluğu (8) + panel boşluğu = gutter: bayraklar logo hizasında */
  .lang-switch__menu {
    left: 0; right: 0; top: 100%; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px var(--s-1);
    padding: var(--s-1) calc(var(--gutter) - var(--s-1)) var(--s-2); max-height: calc(100vh - var(--header-h));
  }
  .lang-switch__menu a { min-height: 48px; padding: var(--s-1); gap: 10px; }
  .lang-switch__menu a[aria-current] { background: var(--steel-50); }
}
/* Telefon (2 sütun): onay ikonu sığmaz; seçili dil kalın + kırmızı çizgi + zemin. 320 px'te sütun 148 px. */
@media (max-width: 639px) { .lang-switch__menu .icon-check { display: none; } }
@media (max-width: 359px) { .lang-switch__menu a { gap: var(--s-1); } }
@media (min-width: 640px) and (max-width: 1199px) { .lang-switch__menu { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) and (max-width: 1199px) { .lang-switch__menu { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.drawer__langs summary > span { display: inline-flex; align-items: center; gap: 10px; }
.drawer__langlist { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-2); padding: var(--s-1) 0 var(--s-2); }
.drawer__langlist a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 0; color: var(--on-dark-muted); font-size: 15px; line-height: 1.3; }
.drawer__langlist a:hover, .drawer__langlist a[aria-current] { color: #fff; }
.drawer__langlist a[aria-current] { font-weight: 600; }
.drawer__sub a.drawer__sub2 { padding: 6px 0 6px 30px; font-size: 14px; }

/* Admin önizlemesi: yayında olmayan kayıt (yalnızca yönetici görür) */
.preview-bar { position: relative; z-index: 110; padding: var(--s-1) var(--gutter); background: var(--red); color: #fff; font-size: 14px; text-align: center; }
.preview-bar a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* Mobil çekmece */
.nav-toggle { color: var(--on-dark); }
.drawer { position: fixed; inset: 0; z-index: 150; visibility: hidden; }
.drawer.is-open { visibility: visible; }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(13, 15, 17, .6); opacity: 0; transition: opacity var(--t); }
.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%); background: var(--graphite); color: var(--on-dark); display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--t) var(--ease); }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); padding: 0 var(--gutter); border-bottom: 1px solid var(--line-dark); }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--s-1) var(--gutter) var(--s-4); }
.drawer__link, .drawer__acc > summary { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; font-size: 17px; font-weight: 500; border-bottom: 1px solid var(--line-dark); list-style: none; cursor: pointer; }
.drawer__acc > summary::-webkit-details-marker { display: none; }
.drawer__acc > summary .icon { transition: transform var(--t-fast); color: var(--steel-400); }
.drawer__acc[open] > summary .icon { transform: rotate(180deg); }
.drawer__sub { display: grid; padding: 8px 0 16px; }
.drawer__sub a { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: var(--on-dark-muted); font-size: 15px; }
.drawer__sub a .icon { width: 18px; height: 18px; color: var(--red); }
.drawer__sub a:hover { color: #fff; }
.drawer__sub a[aria-current="page"] { color: #fff; font-weight: 600; }
.drawer__foot { padding: var(--s-3) var(--gutter); border-top: 1px solid var(--line-dark); display: grid; gap: var(--s-1); }

/* ---------------------------------------------------------------- Breadcrumb */
.breadcrumb { font-size: 13px; color: var(--text-soft); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; } /* kesilen son öğe (yazı başlığı) dar ekranda satırı aşmasın */
.breadcrumb li + li::before { content: ""; width: 5px; height: 5px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .6; margin-right: 4px; }
/* Dar ekranda 3+ öğeli izde son öğe her zaman kendi satırında: yedek yazı tipiyle tek satıra sığıp web fontu gelince
   ikiye inen iz başlığı aşağı itmesin (CLS) */
@media (max-width: 479px) { .breadcrumb li:last-child:nth-child(n+3) { flex-basis: 100%; } }
.breadcrumb a:hover { color: var(--red); }
.breadcrumb [aria-current] { color: var(--text); font-weight: 500; }
.on-dark .breadcrumb, .page-hero .breadcrumb { color: var(--on-dark-muted); }
.on-dark .breadcrumb [aria-current], .page-hero .breadcrumb [aria-current] { color: var(--on-dark); }

/* ---------------------------------------------------------------- İç sayfa hero */
.page-hero { position: relative; overflow: hidden; padding: var(--s-5) 0 var(--s-6); }
.page-hero__grid { display: grid; gap: var(--s-4); align-items: end; }
/* Izgara öğesi içerikteki nowrap/kaydırmalı şeridin (çip, form) genişliğine uzamasın (mobil taşma) */
.page-hero__grid > * { min-width: 0; }
.page-hero .breadcrumb { margin-bottom: var(--s-4); }
.page-hero h1 { max-width: calc(20 * var(--ch-display)); }
.page-hero .lead { margin-top: var(--s-3); }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); margin-top: var(--s-4); }
.page-hero__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__media::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.page-hero::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--red); box-shadow: 0 0 18px var(--red-glow); }
@media (min-width: 1024px) {
  .page-hero { padding: var(--s-6) 0 var(--s-7); }
  .page-hero--media .page-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-6); }
  .page-hero__media { aspect-ratio: 5 / 4; }
}

/* ---------------------------------------------------------------- Kartlar */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease); }
.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }

/* Sektör kartı: görsel + koyu degrade + alt kırmızı çubuk */
.sector-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 360px; padding-top: calc(var(--s-3) + 48px); overflow: hidden; color: var(--on-dark); background: var(--graphite); isolation: isolate; }
/* padding-top: üstteki mutlak ikon şeridinin payı — uzun başlık (nl, ru, bg: 3-4 satır) ikonun üstüne binmez, kart uzar */
.sector-card__img { position: absolute; inset: 0; z-index: -2; }
.sector-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease), filter var(--t); filter: saturate(.9); }
/* İki katman (A11Y-5): yüzdelik degrade büyük kartlarda görseli açık bırakır; alttan piksel ölçülü katman metin
   bloğunu (başlık + özet + sayılar, kart yüksekliğinden bağımsız ~alt 200px) her kart boyunda koyu tutar.
   Ölçüm (1366px, metin saydam, alttaki pikseller): başlık p5 ≥ 7.8:1, özet p5 ≥ 8.5:1 (scratchpad/w2/card_contrast.py). */
.sector-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(0deg, rgba(13, 15, 17, .86) 0, rgba(13, 15, 17, .7) 190px, rgba(13, 15, 17, 0) 290px),
    linear-gradient(180deg, rgba(13, 15, 17, 0) 25%, rgba(13, 15, 17, .72) 62%, rgba(13, 15, 17, .95) 100%);
}
.sector-card::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 48px; background: var(--red); box-shadow: 0 0 14px var(--red-glow); transition: width 420ms var(--ease); }
.sector-card:hover::after, .sector-card:focus-visible::after { width: 100%; }
.sector-card:hover .sector-card__img img { transform: scale(1.045); filter: saturate(1); }
.sector-card__body { position: relative; padding: var(--s-3); }
/* Özet tam gösterildiği için kart dile göre uzar (ru/el/bg 400+ px) ve başlık, ::before'un alttan piksel ölçülü
   katmanının üstüne çıkar. Metin bloğunun kendi zemini: blok boyunca %55 grafit, üstte 48 px'te yumuşak geçiş —
   başlık kartın boyundan bağımsız koyu zeminde kalır (p5 başlık ≥ 3:1, özet ≥ 4.5:1; card_contrast.py). */
.sector-card__body::before { content: ""; position: absolute; z-index: -1; inset: calc(var(--s-5) * -1) 0 0; background: linear-gradient(180deg, rgba(13, 15, 17, 0) 0, rgba(13, 15, 17, .55) var(--s-5)); pointer-events: none; }
.sector-card__top { position: absolute; top: var(--s-3); left: var(--s-3); right: var(--s-3); display: flex; justify-content: space-between; align-items: center; }
.sector-card__top .icon-box { background: rgba(13, 15, 17, .55); border-color: rgba(255, 255, 255, .16); color: #fff; backdrop-filter: none; }
.sector-card__index { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .12em; color: #fff; padding: 2px 8px; background: rgba(13, 15, 17, .55); text-shadow: 0 1px 2px rgba(13, 15, 17, .85); }
.sector-card__title { font-family: var(--font-display); font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); font-weight: 700; text-transform: uppercase; line-height: .98; text-shadow: 0 1px 3px rgba(13, 15, 17, .8); }
/* Özet her genişlikte tam (satır sınırı yok; 11 dilde 60-280 karakter): kart metne göre uzar */
.sector-card__summary { margin: var(--s-1) 0 0; font-size: 14px; line-height: 1.5; color: var(--steel-300); text-shadow: 0 1px 2px rgba(13, 15, 17, .9); }
.sector-card__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13px; color: var(--on-dark-muted); }
.sector-card__meta .icon { width: 20px; height: 20px; color: #fff; transition: transform var(--t) var(--ease); }
.sector-card:hover .sector-card__meta .icon { transform: translateX(4px); color: var(--red); }

/* Hizmet kartı */
.service-card { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4) var(--s-3); height: 100%; position: relative; }
.service-card .icon-box { transition: background-color var(--t), color var(--t), border-color var(--t); }
.service-card:hover .icon-box { background: var(--red); border-color: var(--red); color: #fff; }
.service-card__title { font-size: var(--fs-lg); font-weight: 600; line-height: 1.3; }
.service-card__summary { font-size: 15px; color: var(--text-muted); margin: 0; flex: 1; }
.service-card .link-arrow { margin-top: var(--s-1); }
.service-card--compact { flex-direction: row; align-items: flex-start; padding: var(--s-3); }

/* Ürün kartı */
.product-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.product-card__media { position: relative; aspect-ratio: 1 / 1; background: var(--steel-100); overflow: hidden; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.product-card:hover .product-card__media img { transform: scale(1.05); }
/* Grup rozeti: uzun grup adı (ga/el/bg/az 50-60 harf) kesilmez, görselin üstünde satır kırar. Rozet kart
   bağlantısının örtüsü altında kalır ki görselin her yeri ürüne gitsin. */
.product-card__group { position: absolute; left: 12px; top: 12px; max-width: calc(100% - 24px); line-height: 1.45; }
.product-card__body { display: flex; flex-direction: column; gap: 6px; padding: var(--s-2) var(--s-2) var(--s-3); flex: 1; }
.product-card__title { font-size: 16px; font-weight: 600; line-height: 1.35; }
.product-card__title a::after { content: ""; position: absolute; inset: 0; }
.product-card { position: relative; }
.product-card__meta { font-size: 13px; color: var(--text-soft); }
.product-card__foot { margin-top: auto; padding-top: var(--s-1); display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--text); }
.product-card__foot .icon { width: 18px; height: 18px; color: var(--red); transition: transform var(--t-fast); }
.product-card:hover .product-card__foot .icon { transform: translateX(4px); }
/* 640 px altında kompakt yatay satır (görsel solda 112 px) — partial('product-card', ['row' => true]) (UX-6):
   katalog, grup, arama sonuçları. Varsayılan sizes 112px ile uyumlu. */
@media (max-width: 639px) {
  .product-card--row { flex-direction: row; min-height: calc(var(--s-7) + var(--s-2)); }
  .product-card--row .product-card__media { flex: none; width: calc(var(--s-7) + var(--s-2)); aspect-ratio: auto; min-height: calc(var(--s-7) + var(--s-2)); }
  .product-card--row .product-card__media img { position: absolute; inset: 0; }
  .product-card--row .product-card__group { display: none; }
  .product-card--row .product-card__body { min-width: 0; padding: var(--s-2); gap: calc(var(--s-1) / 2); }
  .product-card--row .product-card__title { font-size: .9375rem; }
  .product-card--row .product-card__foot { padding-top: calc(var(--s-1) / 2); }
}
/* İsteğe bağlı bağlam satırı ('context' / 'context_label'; ör. sektörde kullanım notu) */
.product-card__context { color: var(--text-muted); }
.product-card__context strong { font-weight: 600; color: var(--text); }

/* Makale kartı */
.article-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; position: relative; }
.article-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--steel-100); }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.article-card:hover .article-card__media img { transform: scale(1.04); }
.article-card__body { padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-1); flex: 1; }
.article-card__meta { font-size: 13px; color: var(--text-soft); display: flex; flex-wrap: wrap; gap: 2px var(--s-2); }
.article-card__title { font-size: var(--fs-lg); font-weight: 600; line-height: 1.3; }
.article-card__title a::after { content: ""; position: absolute; inset: 0; }
.article-card__summary { font-size: 15px; color: var(--text-muted); margin: 0; }

/* ---------------------------------------------------------------- Bilgi kutusu ("kısa cevap") */
.answer-box { position: relative; padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--red); }
@media (max-width: 479px) { .answer-box { padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3); } } /* dar sütunda metne yer */
.answer-box__label { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--red-700); margin-bottom: 6px; }
.answer-box p:last-child { margin: 0; }

/* Liste: kırmızı kare madde */
.list-check { list-style: none; display: grid; gap: 10px; }
.list-check li { position: relative; padding-left: 28px; }
.list-check li::before { content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 8px; border-left: 2px solid var(--red); border-bottom: 2px solid var(--red); transform: rotate(-45deg); }

/* Numaralı adımlar */
.steps { list-style: none; counter-reset: step; display: grid; gap: var(--s-3); }
.steps > li { counter-increment: step; position: relative; padding-top: var(--s-4); border-top: 1px solid var(--line-strong); }
.steps > li::before { content: counter(step, decimal-leading-zero); position: absolute; top: 12px; left: 0; font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: .12em; color: var(--red); }
.steps h3 { font-size: var(--fs-md); margin-bottom: 6px; }
.steps p { color: var(--text-muted); font-size: 15px; margin: 0; }
.section--dark .steps > li { border-color: var(--line-dark); }
.section--dark .steps p { color: var(--on-dark-muted); }

/* İstatistik */
.stat__value { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.5rem, 2rem + 2vw, 4rem); line-height: 1; letter-spacing: .01em; }
.stat__value small { font-size: .45em; letter-spacing: .06em; margin-left: 4px; color: var(--red); }
.stat__label { margin-top: 8px; font-size: 14px; color: var(--text-muted); }
.section--dark .stat__label, .on-dark .stat__label { color: var(--on-dark-muted); }
.section--dark .stat__value small, .on-dark .stat__value small { color: var(--red-300); } /* kırmızı grafit üzerinde 3:1'in altında kalıyordu */

/* ---------------------------------------------------------------- Rich content (prose) */
.prose { font-size: 17px; line-height: 1.75; color: #2A3036; max-width: calc(72 * var(--ch-body)); }
.prose > * + * { margin-top: var(--s-2); }
.prose h2 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); margin-top: var(--s-5); margin-bottom: var(--s-2); color: var(--text); }
.prose h3 { font-size: var(--fs-lg); margin-top: var(--s-4); color: var(--text); }
.prose p { margin: var(--s-2) 0 0; }
.prose ul, .prose ol { padding-left: 0; list-style: none; display: grid; gap: 8px; }
.prose ul li { position: relative; padding-left: 24px; }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 8px; height: 8px; background: var(--red); }
.prose ol { counter-reset: li; }
.prose ol li { counter-increment: li; position: relative; padding-left: 36px; }
.prose ol li::before { content: counter(li, decimal-leading-zero); position: absolute; left: 0; top: 0; font-family: var(--font-display); font-weight: 700; color: var(--red); }
.prose a { color: var(--red-700); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--text); font-weight: 600; }
.prose blockquote { margin: var(--s-4) 0; padding: var(--s-2) var(--s-3); border-left: 3px solid var(--red); background: var(--steel-50); font-size: 18px; }
.prose table { font-size: 15px; margin-top: var(--s-3); }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.prose th { background: var(--steel-100); font-weight: 600; }
.prose img { margin: var(--s-4) 0; }
.prose > :first-child { margin-top: 0; }

/* Kaydırılabilir içerik tablosu: dar ekranda tablo sayfayı değil kendi kabını kaydırır.
   Kap sunucuda (sector.php .prose-table, article.php .post-table) ya da site.js ile eklenir.
   Kenar gölgeleri: "local" beyaz örtüler uca gelince gölgeyi kapatır; gölge görünüyorsa o yönde sütun var. */
.prose-table, .post-table {
  max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  margin-top: var(--s-3); border: 1px solid var(--line);
  background:
    linear-gradient(90deg, var(--surface) 30%, rgba(255, 255, 255, 0)) left center / 40px 100% no-repeat local,
    linear-gradient(270deg, var(--surface) 30%, rgba(255, 255, 255, 0)) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(13, 15, 17, .24), rgba(13, 15, 17, 0)) left center / 16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(13, 15, 17, .24), rgba(13, 15, 17, 0)) right center / 16px 100% no-repeat scroll,
    var(--surface);
}
.prose-table > table, .post-table > table { margin: 0; }
/* 3+ sütunlu tablo telefonda sıkışıp okunaksızlaşmasın (kaydırma ipucu site.js'ten); daha genişte doğal sığar */
@media (max-width: 599px) {
  .prose-table > table:has(tr > :nth-child(3)), .post-table > table:has(tr > :nth-child(3)) { min-width: 480px; }
  /* 5+ sütun: satırlar çok uzamasın; ilk sütun (satır adı) kaydırırken solda kalır (tech-grid kalıbı) */
  .prose-table > table:has(tr > :nth-child(5)), .post-table > table:has(tr > :nth-child(5)) { min-width: 640px; }
  .prose-table > table:has(tr > :nth-child(4)) tr > :first-child, .post-table > table:has(tr > :nth-child(4)) tr > :first-child {
    position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: inset -1px 0 0 var(--line-strong);
  }
  .prose-table > table:has(tr > :nth-child(4)) tr > th:first-child, .post-table > table:has(tr > :nth-child(4)) tr > th:first-child {
    background: color-mix(in srgb, rgb(53, 75, 95) 11%, var(--surface));
  }
}
/* Başlık zemini yarı saydam: kenar gölgesi başlık satırında da görünsün (beyaz üstünde steel-100) */
.prose-table th, .post-table th { background: rgba(53, 75, 95, .11); }
/* Dış kenarlığı kap çiziyor: hücre kenarları ikilenmesin */
.prose-table th:first-child, .prose-table td:first-child, .post-table th:first-child, .post-table td:first-child { border-left: 0; }
.prose-table th:last-child, .prose-table td:last-child, .post-table th:last-child, .post-table td:last-child { border-right: 0; }
.prose-table > table > :first-child > tr:first-child > *, .post-table > table > :first-child > tr:first-child > * { border-top: 0; }
.prose-table > table > :last-child > tr:last-child > *, .post-table > table > :last-child > tr:last-child > * { border-bottom: 0; }
.table-hint { display: flex; align-items: center; gap: var(--s-1); margin: var(--s-3) 0 0; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; color: var(--text-soft); }
.table-hint::after { content: ""; width: 6px; height: 6px; border-top: 1.5px solid var(--red); border-right: 1.5px solid var(--red); transform: rotate(45deg); }
.table-hint + .prose-table, .table-hint + .post-table { margin-top: var(--s-1); }

/* ---------------------------------------------------------------- Tablolar */
.spec-table { font-size: 15px; background: var(--surface); border: 1px solid var(--line); }
.spec-table th, .spec-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; hyphens: auto; }
@media (max-width: 479px) { .spec-table th, .spec-table td { padding: 10px 12px; } }
/* Değer hücresinde tek parça uzun bileşik kelime (nl "grondondersteuningsmaterieel") tabloyu kabından taşırmasın;
   etiket hücresi (th) kelimeden kırılmaz, gerekirse genişler */
.spec-table td { overflow-wrap: anywhere; }
.spec-table th { width: 42%; font-weight: 500; color: var(--text-muted); background: var(--steel-50); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
/* Ölçü tablosu (ürün sayfası .table-scroll.prd-size; products.size_table HTML'i). Başlık satırı koyu: <th> hücreleri,
   <thead> içindeki <td>'ler ve thead'siz tabloda ilk satır (Excel'den yapıştırılan tablo yalnızca <td> taşır).
   Diğer satırların hepsi veri satırıdır: ilk veri satırı başlık gibi çizilmez (eskiden her tablonun 2. satırı
   alt başlık görünümündeydi; B2B okur ilk ölçüyü başlık sanıyordu). */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); background: var(--surface); }
.table-scroll table { min-width: 640px; font-size: 14px; font-variant-numeric: tabular-nums; }
.table-scroll th, .table-scroll td { padding: 10px 12px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; white-space: nowrap; }
.table-scroll th, .table-scroll thead td { background: var(--graphite); color: #fff; font-weight: 600; }
/* :has() ayrı kuralda: desteklemeyen tarayıcıda yalnızca bu kural düşer, th başlığı kalır */
.table-scroll table:not(:has(> thead)) > tbody:first-of-type > tr:first-child > td { background: var(--graphite); color: #fff; font-weight: 600; }
.table-scroll tbody tr:hover > td { background: var(--red-50); }
/* İki satırlı başlık deseni (katalogdaki "sütun grubu + ölçü harfi / birim" satırı, ör. "Boyutlar (mm)" altında
   "A · B · L"): yalnızca tabloya elle verilen .has-subhead sınıfıyla 2. satır açık gri alt başlık olur
   (Jodit kaynak görünümünde <table class="has-subhead">). Sınıfsız tabloda 2. satır normal veri satırıdır. */
.table-scroll table.has-subhead > thead > tr:nth-child(2) > * { background: var(--steel-100); color: var(--text); font-weight: 600; }
.table-scroll table.has-subhead:not(:has(> thead)) > tbody:first-of-type > tr:nth-child(2) > * { background: var(--steel-100); color: var(--text); font-weight: 600; }

/* ---------------------------------------------------------------- SSS */
.faq { border-top: 1px solid var(--line-strong); }
.faq-item { border-bottom: 1px solid var(--line-strong); }
.faq-item > summary { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 0; cursor: pointer; list-style: none; font-size: var(--fs-md); font-weight: 600; line-height: 1.4; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { color: var(--red-700); }
.faq-item__icon { position: relative; flex: none; width: 28px; height: 28px; border: 1px solid var(--line-strong); border-radius: 50%; margin-top: -2px; transition: background-color var(--t-fast), border-color var(--t-fast); }
.faq-item__icon::before, .faq-item__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform var(--t) var(--ease); }
.faq-item__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-item__icon { background: var(--red); border-color: var(--red); color: #fff; }
.faq-item[open] .faq-item__icon::after { transform: translate(-50%, -50%) rotate(0); }
.faq-item__a { padding: 0 var(--s-6) var(--s-3) 0; color: var(--text-muted); font-size: 16px; line-height: 1.7; }
.faq-item__a p:last-child { margin: 0; }
.section--dark .faq, .section--dark .faq-item { border-color: var(--line-dark); }
.section--dark .faq-item__a { color: var(--on-dark-muted); }
.section--dark .faq-item__icon { border-color: var(--line-dark); }

/* ---------------------------------------------------------------- Formlar */
.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
@media (min-width: 640px) { .form-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.field label, .field__label { font-size: 13px; font-weight: 600; color: var(--text); }
.field label .req, .form-note .req { color: var(--red-600); } /* açık zeminde ≥4.5:1 (A11Y-11) */
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; font-size: 16px; line-height: 1.4;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.textarea { min-height: 128px; resize: vertical; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--steel-500); }
/* Odak (A11Y-1): görünür kırmızı çerçeve (beyaz/grafit zeminde ≥3:1); yalnızca :focus-visible olmayan odakta gizli */
.input:focus, .select:focus, .textarea:focus { border-color: var(--graphite); box-shadow: 0 0 0 3px rgba(225, 31, 38, .18); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; box-shadow: none; }
.input:focus:not(:focus-visible), .select:focus:not(:focus-visible), .textarea:focus:not(:focus-visible) { outline: none; }
.select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F575F' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 40px; }
.form-note { font-size: 13px; color: var(--text-soft); margin: 0; }
.form-note a { text-decoration: underline; }
.form-consent { display: flex; gap: 10px; align-items: flex-start; }
.form-consent input { margin-top: 3px; flex: none; accent-color: var(--red); }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.on-dark .field label, .section--dark .field label { color: var(--on-dark); }
.on-dark .input, .on-dark .select, .on-dark .textarea { background: var(--graphite-2); border-color: var(--steel-800); color: var(--on-dark); }
/* Koyu zemin: yukarıdaki kural odaktaki kenarlığı eziyordu (aynı özgüllük, sonra geliyor); odak kuralları ondan sonra */
.on-dark .input:hover, .on-dark .select:hover, .on-dark .textarea:hover { border-color: var(--steel-600); }
.on-dark .input:focus, .on-dark .select:focus, .on-dark .textarea:focus { border-color: var(--steel-400); box-shadow: 0 0 0 3px rgba(225, 31, 38, .6); }
.on-dark .input:focus-visible, .on-dark .select:focus-visible, .on-dark .textarea:focus-visible { box-shadow: none; }
/* "background" kısaltması .select'in ok görselini sıfırlıyordu: koyu zeminde açık renk ok */
.on-dark .select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BCC2C8' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }
.on-dark .input::placeholder, .on-dark .textarea::placeholder { color: var(--steel-500); }
.on-dark .form-note { color: var(--on-dark-muted); }
.on-dark .field label .req, .section--dark .field label .req, .on-dark .form-note .req, .section--dark .form-note .req { color: var(--red-300); }

.alert { display: flex; gap: 12px; align-items: flex-start; padding: var(--s-2) var(--s-3); border: 1px solid; border-radius: var(--radius); font-size: 15px; }
.alert .icon { width: 20px; height: 20px; margin-top: 2px; }
.alert--ok { background: #EEF8F1; border-color: #B7E0C4; color: #16532C; }
.alert--err { background: var(--red-50); border-color: #F4B9BC; color: var(--red-700); }

/* ---------------------------------------------------------------- İletişim bandı (CTA) */
.cta-band { position: relative; overflow: hidden; }
.cta-band__inner { display: grid; gap: var(--s-4); align-items: center; padding-block: var(--s-5); }
.cta-band h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem); max-width: calc(22 * var(--ch-display)); }
.cta-band p { margin: var(--s-1) 0 0; color: var(--steel-700); max-width: calc(56 * var(--ch-body)); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.cta-band.u-steel-dark p { color: var(--on-dark-muted); }
@media (min-width: 1024px) {
  .cta-band__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); padding-block: var(--s-6); }
  .cta-band__actions { justify-content: flex-end; }
}

/* İletişim kanal kartları (telefon / WhatsApp / e-posta / teklif) */
.channels { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 640px) { .channels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Dört kanal tek satırda 1280 px'ten: 1024'te kart metnine ~130 px kalıyor, e-posta ve uzun etiketler (nl, ru) kırılıyordu */
@media (min-width: 1280px) { .channels--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.channel { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3); background: var(--surface); transition: background-color var(--t-fast); }
.channel:hover { background: var(--steel-50); }
.channel small { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-soft); }
@media (max-width: 479px) { .channel small { letter-spacing: .06em; } } /* iki sütunlu dar kartta uzun etiket (nl OFFERTEFORMULIER) */
.channel > span { min-width: 0; }
.channel strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; hyphens: auto; }
.channel .icon-box { transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.channel:hover .icon-box { background: var(--red); border-color: var(--red); color: #fff; }
.channel--wa:hover .icon-box { background: var(--wa); border-color: var(--wa); }

/* ---------------------------------------------------------------- Galeri + lightbox */
/* Görsel sayısına göre dengeli ızgara (A3.5): yerleşim sınıflarını partials/gallery.php verir (--lead telefonda tam satır,
   ≥900 px'te --big 2×2, --wide 2×1, --full 4×2). Hücre kare; yükseklik kap genişliğinden (cqw) hesaplanır ki
   farklı açıklıktaki öğeler aynı satır çizgisine otursun (aspect-ratio + boşluk birkaç px kayardı).
   cqw desteklemeyen tarayıcıda yaklaşık oranlar (aspect-ratio) kalır. */
.gallery { --cols: 2; display: grid; gap: var(--s-1); grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); container-type: inline-size; }
.gallery__item { --c: 1; --r: 1; grid-column: span var(--c); grid-row: span var(--r); aspect-ratio: 1 / 1; }
.gallery__item--lead { --c: 2; aspect-ratio: 2 / 1; }
@media (min-width: 900px) {
  .gallery { --cols: 4; }
  .gallery__item--lead { --c: 1; aspect-ratio: 1 / 1; }
  .gallery__item--big { --c: 2; --r: 2; aspect-ratio: 1 / 1; }
  .gallery__item--wide { --c: 2; aspect-ratio: 2 / 1; }
  .gallery__item--full { --c: 4; --r: 2; aspect-ratio: 2 / 1; }
}
@supports (width: 1cqw) {
  .gallery__item { aspect-ratio: auto; height: calc(var(--r) * (100cqw - (var(--cols) - 1) * var(--s-1)) / var(--cols) + (var(--r) - 1) * var(--s-1)); }
}
.gallery a { position: relative; display: block; overflow: hidden; background: var(--steel-100); }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.gallery a:hover img { transform: scale(1.05); }
.gallery a::after { content: ""; position: absolute; inset: 0; background: rgba(13, 15, 17, 0); transition: background-color var(--t); }
.gallery a:hover::after { background: rgba(13, 15, 17, .25); }
.gallery__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 24px 12px 10px; font-size: 13px; color: #fff; background: linear-gradient(transparent, rgba(13, 15, 17, .8)); opacity: 0; transition: opacity var(--t); }
.gallery a:hover .gallery__cap, .gallery a:focus-visible .gallery__cap { opacity: 1; }
.gallery a:focus-visible { outline-offset: 2px; }
/* Dokunmatik telefonda (imleç yok) altyazı görselin ALTINDA her zaman görünür: açıklama ve "(temsili görsel)" notu yalnızca
   lightbox'ta kalmasın (mobilde içerik gizlenmez). Kare / 2:1 oran görsele taşınır, hücre altyazıyla uzar; görselin
   üstüne yazı binmez. ≥900 px ve imleçli cihazlarda yukarıdaki üzerine gelince açılan altyazı. */
@media (hover: none) and (max-width: 899px) {
  .gallery__item, .gallery__item--lead { aspect-ratio: auto; height: auto; }   /* @supports cqw yüksekliği de kalkar */
  .gallery a { background: none; }
  .gallery img { display: block; height: auto; aspect-ratio: 1 / 1; background: var(--steel-100); }
  .gallery__item--lead img { aspect-ratio: 2 / 1; }
  .gallery a::after { content: none; }
  .gallery__cap { display: block; position: static; padding: 6px 2px 4px; line-height: 1.4; color: var(--text-muted); background: none; opacity: 1; }
  :is(.section--ink, .section--dark, .on-dark) .gallery__cap { padding: 8px 10px 10px; color: var(--on-dark-muted); }   /* koyu kart zemini */
}

.lightbox { position: fixed; inset: 0; z-index: 300; display: none; place-items: center; background: rgba(13, 15, 17, .94); padding: 64px 16px; }
.lightbox.is-open { display: grid; }
.lightbox img { max-height: calc(100vh - 160px); width: auto; max-width: 100%; box-shadow: var(--shadow-lg); }
.lightbox__caption { margin-top: 12px; text-align: center; color: var(--on-dark-muted); font-size: 14px; }
.lightbox__btn { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; color: #fff; border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--radius); background: rgba(13, 15, 17, .5); }
.lightbox__btn:hover { background: var(--red); border-color: var(--red); }
.lightbox__close { top: 16px; right: 16px; }
.lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }

/* ---------------------------------------------------------------- Sayfalama */
.pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: var(--s-5); }
.pagination a, .pagination span { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); font-weight: 600; font-size: 15px; background: var(--surface); }
.pagination a:hover { border-color: var(--graphite); }
.pagination .is-current { background: var(--graphite); border-color: var(--graphite); color: #fff; }

/* ---------------------------------------------------------------- Footer */
.pre-footer { border-top: 1px solid rgba(13, 15, 17, .2); }
.site-footer { background: var(--ink); color: var(--on-dark-muted); font-size: 15px; position: relative; }
.site-footer a { transition: color var(--t-fast); }
.site-footer a:hover { color: #fff; }
.footer-main { display: grid; gap: var(--s-5); padding-block: var(--s-6); }
@media (min-width: 768px) { .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .footer-main { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); gap: var(--s-4); } }
.footer-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; margin-bottom: var(--s-2); }
.footer-list { list-style: none; display: grid; gap: 10px; }
/* Bağlantı listeleri (.footer-links) her genişlikte açık: başlık .footer-title + liste. Masaüstünde sütun;
   <768 px bölümler ince çizgiyle ayrılır, liste 2 sütunlu sıkı ızgara, her bağlantı satırı ≥ 40 px dokunma alanı
   (uzun ad iki satıra iner, satır uzar). Okuma sırası satır satır (soldan sağa), DOM sırasıyla aynı. */
.footer-links + .footer-links { margin-top: var(--s-4); }
@media (max-width: 767px) {
  .footer-main { row-gap: 0; padding-block: var(--s-5); }
  .footer-about { padding-bottom: var(--s-4); }
  .footer-links { padding: var(--s-3) 0; border-top: 1px solid var(--line-dark); }
  .footer-links + .footer-links { margin-top: 0; }
  .footer-links .footer-title { margin-bottom: var(--s-1); }
  .footer-links .footer-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-2); }
  .footer-links .footer-list a { display: flex; align-items: center; min-height: 40px; padding-block: 4px; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; hyphens: auto; }
  .footer-col--contact { border-top: 1px solid var(--line-dark); padding-top: var(--s-3); }
}
.footer-about p { margin: var(--s-2) 0 0; max-width: calc(36 * var(--ch-body)); }
.footer-contact { list-style: none; display: grid; gap: 14px; }
.footer-contact li { display: flex; gap: 12px; align-items: flex-start; }
.footer-contact .icon { width: 18px; height: 18px; color: var(--red); margin-top: 3px; }
.footer-langs { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); padding-bottom: var(--s-4); }
.footer-langs__label { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--steel-400); }
.footer-langs__list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); font-size: 14px; }
.footer-langs__list a { display: inline-flex; align-items: center; gap: var(--s-1); padding: 4px 0; }
.footer-langs__list a[aria-current] { color: #fff; box-shadow: inset 0 -2px 0 var(--red); }
/* Firma bilgileri (yasal künye; footer.php, yalnızca dolu alanlarla basılır): dil satırıyla aynı düzen, küçük ve sakin */
.footer-legal { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); padding-bottom: var(--s-4); }
.footer-legal__label { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--steel-400); }
.footer-legal__list { display: flex; flex-wrap: wrap; gap: 4px var(--s-3); margin: 0; font-size: 13px; line-height: 1.5; }
.footer-legal__list div { display: flex; flex-wrap: wrap; gap: 0 6px; min-width: 0; }
.footer-legal__list dt { color: var(--steel-400); }
.footer-legal__list dd { margin: 0; color: var(--on-dark); overflow-wrap: anywhere; }
html:is([lang="zh-Hans"], [lang="hi"]) .footer-legal__label { font-size: 13px; }
@media (min-width: 900px) {
  .footer-legal { padding-right: max(var(--gutter), calc(var(--dock-clear) - (100vw - min(100vw, var(--container) + var(--gutter) * 2)) / 2)); }
}
.footer-bottom { border-top: 1px solid var(--line-dark); }
.footer-bottom .container { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); justify-content: space-between; align-items: center; padding-block: var(--s-3); font-size: 13px; }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.social { display: flex; gap: var(--s-1); margin-top: var(--s-3); }
.social a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-dark); border-radius: var(--radius); }
.social a:hover { border-color: var(--red); background: var(--red); }
.social .icon { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- Hızlı iletişim (dock) */
.contact-dock { position: fixed; z-index: 90; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--graphite); border-top: 1px solid var(--line-dark); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, .5); transition: transform var(--t) var(--ease), visibility var(--t); }
.contact-dock a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 60px; font-size: 12px; font-weight: 600; color: var(--on-dark); letter-spacing: .02em; }
.contact-dock a + a { border-left: 1px solid var(--line-dark); }
.contact-dock .icon { width: 22px; height: 22px; }
.contact-dock__wa { background: var(--wa); color: #fff !important; }
.contact-dock__quote { background: var(--red); color: #fff !important; }
/* Kontrolleri altta kalan bir öğe (ör. slider şeridi) dock alanına girince dock çekilir (site.js [data-dock-avoid]) */
.contact-dock.is-tucked { transform: translateY(calc(100% + 32px)); visibility: hidden; }
@media (max-width: 899px) {
  /* Odak/çapa kaydırması öğeyi dock'un altına hizalamasın (WCAG 2.4.11); çentikli iPhone'da güvenli alan payı */
  html { scroll-padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom) + var(--s-2)); }
  body { padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom)); }
}
@media (min-width: 900px) {
  /* Sayfa sonundaki footer bağlantıları yüzen dock'un altında kalmasın (WCAG 2.4.11): içerik sağ kenarı
     görünüm alanının sağından en az --dock-clear içeride. Geniş ekranda kap zaten içeride (pay = gutter). */
  .footer-bottom .container, .footer-langs { padding-right: max(var(--gutter), calc(var(--dock-clear) - (100vw - min(100vw, var(--container) + var(--gutter) * 2)) / 2)); }
  .contact-dock { left: auto; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 8px; background: none; border: 0; box-shadow: none; padding: 0; }
  .contact-dock a { width: 56px; min-height: 56px; border-radius: 50%; font-size: 0; gap: 0; background: var(--graphite); border: 1px solid rgba(255, 255, 255, .12); box-shadow: var(--shadow-lg); transition: transform var(--t-fast) var(--ease), background-color var(--t-fast); }
  .contact-dock a + a { border-left: 1px solid rgba(255, 255, 255, .12); }
  .contact-dock a:hover { transform: translateY(-2px) scale(1.04); }
  .contact-dock .contact-dock__quote, .contact-dock .contact-dock__mail { display: none; }
  .contact-dock__wa { order: 2; width: 60px !important; min-height: 60px !important; }
  .contact-dock .icon { width: 26px; height: 26px; }
}

/* ---------------------------------------------------------------- Yatay kaydırmalı kaplarda odak
   overflow-x:auto kabı dikeyde de kırpar; öğe kabın yüksekliğini dolduruyorsa dışa taşan (3px)
   odak çerçevesinin üst/alt kenarı kesilir. Bu kaplarda çerçeve öğenin içine çizilir. */
.sx-subnav a:not(.sx-subnav__quote):focus-visible, .c-subnav__nav a:focus-visible, .cat-subnav__list a:focus-visible,
.sx-chips .chip:focus-visible, .sx-jump__list .chip:focus-visible, .kb-filter .chip:focus-visible,
.cat-sectorbar__link:focus-visible { outline-offset: -2px; }
.prd-gallery__thumb:focus-visible { outline-offset: -4px; } /* 2px kenarlığın içinde kalsın */
/* Yatay kaydırıcılar ([data-scroller]; sektör sayfalarında [data-sx-scroller]): site.js odaklanan öğeyi kap içinde
   görünüme alır; kenara yapışmasın diye kaydırma payı */
[data-scroller], [data-sx-scroller] { scroll-padding-inline: var(--gutter); }

/* Görünüm alanından uzun yapışkan yan kutu (site.js [data-sticky-fit]) normal akışta kalır (A11Y-2) */
[data-sticky-fit].is-unstuck { position: relative; top: auto; }

/* ---------------------------------------------------------------- Yardımcılar */
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: var(--s-2) !important; }
.mt-3 { margin-top: var(--s-3) !important; }
.mt-4 { margin-top: var(--s-4) !important; }
.mt-5 { margin-top: var(--s-5) !important; }
.mb-0 { margin-bottom: 0 !important; }
.center { text-align: center; }
.empty-state { padding: var(--s-5) var(--s-3); text-align: center; border: 1px dashed var(--line-strong); color: var(--text-muted); background: var(--surface); }
.divider-label { display: flex; align-items: center; gap: var(--s-2); font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--text-soft); }
.divider-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }