/* ==========================================================================
   Sektörler (liste) + Sektör detay — sayfaya özel stiller
   Önek: sx-  ·  base.css token ve bileşenleri yeniden kullanılır
   ========================================================================== */

:root { --sx-subnav-h: 56px; }
@media (min-width: 768px) { :root { --sx-subnav-h: 64px; } }

/* Çelik zeminde (u-steel) küçük metin kontrastı: gölgeli bölgelerde AA için grafit */
.sx-apps-section .eyebrow,
.sx-apps-section .lead { color: var(--graphite); }

/* Bölüm başlığı (section-head dışı 7/5 bölmelerde) */
.sx-h2 { max-width: calc(24 * var(--ch-display)); margin-bottom: var(--s-3); }
/* Detay sayfasında cümle başlıkları üç satıra kırılmasın (base: 18ch) */
.sx-hero ~ .section .section-head h2,
.sx-list .section-head h2,
#secim-rehberi .section-head h2 { max-width: calc(24 * var(--ch-display)); }

/* Yatay kaydırmalı kaplar ([data-sx-scroller]): scroll-padding ve odak kaydırması base.css + site.js'te (genel) */

/* ==========================================================================
   LİSTE: /sektorler/
   ========================================================================== */

/* Hero: sektöre hızlı geçiş çipleri */
.sx-jump { width: 100%; min-width: 0; }
.sx-jump__label { margin: 0 0 var(--s-1); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-muted); }
.sx-jump__list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-1); }
.page-hero .sx-jump .chip { min-height: 40px; padding: 6px 14px; font-size: 14px; color: var(--on-dark); background: rgba(13, 15, 17, .45); border-color: rgba(255, 255, 255, .18); transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast); }
.page-hero .sx-jump .chip .icon { width: 16px; height: 16px; color: var(--red); }
.page-hero .sx-jump .chip:hover { border-color: var(--red); background: rgba(225, 31, 38, .14); color: #fff; }
@media (max-width: 639px) {
  .sx-jump__list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .sx-jump__list::-webkit-scrollbar { display: none; }
  .sx-jump__list > li { flex: none; }
}

/* Sektör ızgarası: mobil 1 · tablet 2 (ilk kart tam) · masaüstü 12 kolon (7/5 açılış, 5/7 kapanış) */
.sx-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
.sx-grid .sector-card { min-height: 300px; }
.sx-grid .sx-tile--lead { min-height: 400px; }
.sx-tile--lead .sector-card__title { font-size: clamp(2rem, 1.4rem + 1.8vw, 3.25rem); max-width: calc(14 * var(--ch-display)); }
.sx-tile--lead .sector-card__summary { font-size: 15px; max-width: calc(52 * var(--ch-body)); }
.sx-tile--lead .sector-card__body,
.sx-tile--second .sector-card__body { padding: var(--s-4); }
.sx-tile--second .sector-card__title { font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem); }

@media (min-width: 640px) and (max-width: 1023px) {
  .sx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-grid > .sx-tile:first-child,
  .sx-grid > .sx-tile:last-child:nth-child(even) { grid-column: 1 / -1; }
  .sx-grid .sector-card { min-height: 340px; }
  .sx-grid .sx-tile--lead { min-height: 440px; }
}
@media (min-width: 1024px) {
  .sx-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-3); }
  .sx-grid > .sx-tile { grid-column: span 4; min-height: 360px; }
  .sx-grid > .sx-tile--lead { grid-column: span 7; min-height: 500px; }
  .sx-grid > .sx-tile--second { grid-column: span 5; min-height: 500px; }
  .sx-grid > .sx-tile--tail5 { grid-column: span 5; }
  .sx-grid > .sx-tile--tail7 { grid-column: span 7; }
  .sx-grid > .sx-tile--full { grid-column: 1 / -1; }
}

/* Sektör seçim rehberi (karşılaştırma tablosu) — mobilde kart listesine döner */
.sx-compare { background: var(--surface); border: 1px solid var(--line); }
.sx-compare table { font-size: 15px; }
.sx-compare thead th { padding: var(--s-2) var(--s-3); background: var(--graphite); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-align: left; }
.sx-compare thead th:first-child { box-shadow: inset 3px 0 0 var(--red); }
.sx-compare tbody th,
.sx-compare tbody td { padding: var(--s-3); border-top: 1px solid var(--line); text-align: left; vertical-align: top; font-weight: 400; }
.sx-compare tbody tr { transition: background-color var(--t-fast); }
.sx-compare tbody tr:hover { background: var(--steel-50); }
.sx-compare tbody th { width: 30%; }
.sx-compare__name { display: inline-flex; align-items: center; gap: var(--s-2); font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--text); transition: color var(--t-fast); }
.sx-compare__name .icon-box { width: 40px; height: 40px; transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.sx-compare__name > .icon { color: var(--red); opacity: 0; transform: translateX(-4px); transition: opacity var(--t-fast), transform var(--t-fast) var(--ease); }
.sx-compare__name:hover { color: var(--red-700); }
.sx-compare tbody tr:hover .sx-compare__name .icon-box { background: var(--red); border-color: var(--red); color: #fff; }
.sx-compare tbody tr:hover .sx-compare__name > .icon { opacity: 1; transform: none; }
.sx-compare__conds { list-style: none; display: grid; gap: 6px; }
.sx-compare__conds li { position: relative; padding-left: var(--s-2); }
.sx-compare__conds li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--red); }
/* Etiket sütunu en uzun etiket kadar (en çok 7.5rem; ru "Соединения" 88 px'e sığmıyordu); satırlar subgrid ile
   aynı sütun çizgisinde. Dar kartta (≤479) ve tablet tablosunda (768-1023) sütun dar: etiket değerin üstünde. */
.sx-compare__facts { display: grid; grid-template-columns: fit-content(7.5rem) minmax(0, 1fr); gap: 6px var(--s-1); margin: 0; }
.sx-compare__facts div { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
@supports not (grid-template-columns: subgrid) { .sx-compare__facts div { grid-template-columns: minmax(88px, max-content) minmax(0, 1fr); gap: var(--s-1); } }
@media (max-width: 479px), (min-width: 768px) and (max-width: 1023px) {
  .sx-compare__facts, .sx-compare__facts div { grid-template-columns: minmax(0, 1fr); }
  .sx-compare__facts div { gap: 2px; }
}
.sx-compare__facts dt { padding-top: 2px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-soft); }
.sx-compare__facts dd { margin: 0; color: var(--text); }
.sx-compare__facts dd:only-child { grid-column: 1 / -1; }
.sx-compare__none { color: var(--text-soft); }

@media (max-width: 767px) {
  .sx-compare { background: none; border: 0; }
  .sx-compare table,
  .sx-compare tbody,
  .sx-compare tr,
  .sx-compare tbody th,
  .sx-compare tbody td { display: block; width: 100%; }
  .sx-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sx-compare tbody tr { margin-bottom: var(--s-2); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--red); }
  .sx-compare tbody tr:hover { background: var(--surface); box-shadow: var(--shadow-md); }
  .sx-compare tbody th { width: 100%; padding: var(--s-2); border-top: 0; }
  .sx-compare tbody td { padding: var(--s-2); border-top: 1px solid var(--line); }
  .sx-compare tbody td::before { content: attr(data-label); display: block; margin-bottom: var(--s-1); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-soft); }
  .sx-compare__name > .icon { opacity: 1; transform: none; margin-left: auto; }
  .sx-compare__name { display: flex; }
}

/* ==========================================================================
   DETAY: /sektorler/{slug}/
   Sıra: hero (+ ürün şeridi) → alt menü → ürünler → hizmetler → genel bakış → saha koşulları →
   seçim notları → rehber → uygulamalar → galeri → yazılar → SSS → teklif → diğer sektörler
   ========================================================================== */

.sx-hero ~ .section[id],
#form-sektor { scroll-margin-top: calc(var(--sx-subnav-h) + var(--s-1)); }

/* ---------------------------------------------------------------- a) Hero */
.sx-hero { position: relative; overflow: hidden; }
.sx-hero__media { position: relative; aspect-ratio: 2 / 1; overflow: hidden; background: var(--graphite-2); }
.sx-hero__media picture,
.sx-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* kırmızı neon çizgi: mobilde görselin altında yatay */
.sx-hero__media::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 2px; background: var(--red); box-shadow: 0 0 18px var(--red-glow); }
.sx-hero__media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(13, 15, 17, .35) 0%, rgba(13, 15, 17, 0) 40%); pointer-events: none; }
.sx-hero__media--empty { display: grid; place-items: center; color: var(--steel-700); }
.sx-hero__media--empty::after { display: none; }
.sx-hero__media--empty > .icon { width: 96px; height: 96px; stroke-width: 1; opacity: .6; }

.sx-hero__content { min-width: 0; padding-block: var(--s-3) var(--s-4); }
.sx-hero .breadcrumb { margin-bottom: var(--s-2); }
/* Başlıklar uzun cümle (65-80 karakter): kolon genişliğini kullanır, masaüstünde 4 satırı geçmez ki ürün şeridi ilk ekranda kalsın */
.sx-hero h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); max-width: calc(22 * var(--ch-display)); }
.sx-hero .lead { margin: var(--s-2) 0 0; }
/* Mobil: düğmeler yan yana, satırı doldurur; iki etiket sığmıyorsa (ru, el, bg, fil) ikinci düğme alt satıra
   geçer — etiket iki-üç satıra kırılmaz, kabından taşmaz */
.sx-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-3); }
.sx-hero__actions .btn { flex: 1 1 auto; padding: calc(var(--s-1) / 2) var(--s-2); line-height: 1.2; text-align: center; }
@media (min-width: 560px) {
  .sx-hero__actions .btn { flex: 0 1 auto; padding: 0 var(--s-3); }
}

/* Öne çıkan ürün şeridi: alıcının ilk ekranda ürüne geçtiği kısa yol (mobilde yatay kaydırmalı) */
.sx-rail { margin-top: var(--s-3); }
/* Uzun etiket (el, ru) "Tümü" bağlantısıyla yan yana sığmazsa bağlantı alt satıra geçer */
.sx-rail__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--s-2); margin-bottom: var(--s-1); }
.sx-rail__label { flex: 1 1 auto; margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-muted); }
.sx-rail__all { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 32px; font-size: 14px; font-weight: 600; color: #fff; border-bottom: 1px solid transparent; transition: border-color var(--t-fast); }
.sx-rail__all .icon { color: var(--red); transition: transform var(--t-fast) var(--ease); }
.sx-rail__all:hover { border-bottom-color: var(--red); }
.sx-rail__all:hover .icon { transform: translateX(4px); }
.sx-rail__list {
  list-style: none; display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter);
}
.sx-rail__list::-webkit-scrollbar { display: none; }
.sx-rail__list > li { display: flex; flex: none; }
.sx-rail__item {
  display: flex; align-items: center; gap: var(--s-1); width: 224px; min-height: 64px; padding: var(--s-1);
  background: rgba(13, 15, 17, .5); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--radius); color: var(--on-dark);
  transition: border-color var(--t-fast), background-color var(--t-fast), transform var(--t-fast) var(--ease);
}
.sx-rail__item:hover { border-color: var(--red); background: rgba(225, 31, 38, .12); transform: translateY(-1px); }
.sx-rail__img { display: grid; place-items: center; flex: none; width: 48px; height: 48px; overflow: hidden; border-radius: var(--radius); background: var(--steel-100); }
.sx-rail__img img { width: 100%; height: 100%; object-fit: cover; }
/* Ürün adı tam (uzun ru/el/bg adları 3 satır); şeritteki kutular en uzun ada göre eşit yükseklikte */
.sx-rail__name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
.sx-rail__list a:focus-visible { outline-offset: -2px; }
@media (min-width: 1024px) {
  /* Masaüstü: 2×2 kutucuk; kaydırma yok */
  .sx-rail__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding: 0; }
  .sx-rail__item { width: 100%; }
}

/* Anahtar bilgiler şeridi: mobilde etiket/değer satırları, 640+ üç sütun */
.sx-facts { display: grid; grid-template-columns: fit-content(7.5rem) minmax(0, 1fr); column-gap: var(--s-2); margin: var(--s-3) 0 0; border-top: 1px solid var(--line-dark); }
/* Telefon: etiket sütunu en uzun etiket kadar (en çok 7.5rem), satırlar subgrid ile hizalı */
.sx-fact { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; gap: var(--s-2); padding: var(--s-1) 0; border-bottom: 1px solid var(--line-dark); }
@supports not (grid-template-columns: subgrid) { .sx-fact { grid-template-columns: 88px minmax(0, 1fr); } }
.sx-fact dt { padding-top: 3px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--on-dark-muted); }
.sx-fact dd { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.45; color: #fff; }
.sx-fact dd:only-child { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .sx-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--s-3); margin-top: var(--s-4); border-top: 0; }
  .sx-fact { grid-column: auto; grid-template-columns: 1fr; gap: 6px; align-content: start; padding: var(--s-2) 0 0; border-bottom: 0; border-top: 2px solid var(--steel-800); }
  .sx-fact:first-child { border-top-color: var(--red); }
  .sx-fact dd { font-size: 15px; }
}

@media (min-width: 640px) {
  .sx-hero__media { aspect-ratio: 21 / 9; }
  .sx-hero__content { padding-block: var(--s-4) var(--s-5); }
  .sx-hero .breadcrumb { margin-bottom: var(--s-3); }
  .sx-hero .lead { margin-top: var(--s-3); }
  .sx-hero__actions { margin-top: var(--s-4); }
}
@media (min-width: 1024px) {
  .sx-hero { min-height: 640px; display: flex; align-items: center; }
  .sx-hero > .container { position: relative; z-index: 1; }
  /* görsel: kap içeriğinin %56'sından sağ ekran kenarına kadar taşar */
  .sx-hero__media {
    position: absolute; top: 0; bottom: 0; right: 0; aspect-ratio: auto;
    left: calc(max(var(--gutter), (100% - var(--container)) / 2) + min(var(--container), 100% - 2 * var(--gutter)) * .56);
  }
  .sx-hero__media::before { left: 0; top: 0; bottom: 0; right: auto; width: 2px; height: auto; }
  .sx-hero__media::after { background: linear-gradient(90deg, rgba(13, 15, 17, .45) 0%, rgba(13, 15, 17, 0) 28%); }
  .sx-hero__content { width: 56%; padding: var(--s-5) var(--s-6) var(--s-5) 0; }
  .sx-hero .lead { font-size: 17px; }
}

/* ---------------------------------------------------------------- b) Yapışkan alt menü */
.sx-subnav {
  position: sticky; top: var(--header-h); z-index: 60;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid rgba(13, 15, 17, .22);
  box-shadow: 0 10px 24px -16px rgba(13, 15, 17, .55);
}
.sx-subnav::-webkit-scrollbar { display: none; }
/* Kaydırma kabı nav'ın kendisi (site.js scrollspy etkin bağlantıyı görünüme alır); klavye odağı sector.js ile (A11Y-8) */
.sx-subnav__list { list-style: none; display: flex; align-items: stretch; gap: var(--s-3); min-width: max-content; min-height: var(--sx-subnav-h); white-space: nowrap; }
.sx-subnav__list > li { display: flex; }
.sx-subnav a { position: relative; display: inline-flex; align-items: center; gap: var(--s-1); font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--ink); }
/* Metin genişliğindeki linke iç boşluk + eşit negatif margin (yerleşim aynı): içe çizilen odak çerçevesi (base.css) metne değmez */
.sx-subnav a:not(.sx-subnav__quote) { padding-inline: 6px; margin-inline: -6px; }
.sx-subnav a:not(.sx-subnav__quote)::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 0; height: 3px; background: var(--red); box-shadow: 0 0 10px var(--red-glow); transform: scaleX(0); transform-origin: left; transition: transform var(--t) var(--ease); }
.sx-subnav a:not(.sx-subnav__quote):hover::after { transform: scaleX(.4); }
.sx-subnav a:not(.sx-subnav__quote).is-active::after { transform: scaleX(1); }
.sx-subnav__count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--graphite); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0; }
/* "Ürünler" vurgulu: ikon + kırmızı sayaç + ayraç */
.sx-subnav .sx-subnav__lead { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.sx-subnav__lead .icon { color: var(--red); }
.sx-subnav__lead .sx-subnav__count { background: var(--red); }
.sx-subnav__list > li:first-child { padding-right: var(--s-3); border-right: 1px solid rgba(13, 15, 17, .2); }
.sx-subnav__end { margin-left: auto; padding-right: var(--gutter); }
.sx-subnav__quote { align-self: center; min-height: 40px; padding: 0 var(--s-2); background: var(--red); color: #fff !important; border-radius: var(--radius); transition: background-color var(--t-fast), box-shadow var(--t-fast); }
.sx-subnav__quote:hover,
.sx-subnav__quote.is-active { background: var(--red-600); box-shadow: var(--shadow-red); }
@media (min-width: 768px) {
  .sx-subnav__list { gap: clamp(var(--s-3), 2.2vw, var(--s-4)); }
  .sx-subnav__list > li:first-child { padding-right: clamp(var(--s-3), 2.2vw, var(--s-4)); }
  .sx-subnav a { font-size: 15px; }
  /* Bağlantılar (dile göre 900-1300 px) kaba sığmazsa liste kayar; "Teklif" sağ kenara yapışık kalır,
     altından geçen bağlantılar çelik renge solar */
  .sx-subnav__end { position: sticky; right: 0; z-index: 1; padding: 0 var(--gutter) 0 var(--s-4); margin-right: calc(var(--gutter) * -1); }
  .sx-subnav.is-overflow .sx-subnav__end { background: linear-gradient(90deg, rgba(205, 209, 213, 0), #CDD1D5 var(--s-3)); } /* site.js: liste kaba sığmıyor */
}

/* ---------------------------------------------------------------- 7/5 bölmeler */
.sx-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
@media (min-width: 1024px) {
  .sx-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-6); align-items: start; }
  .sx-split--rev { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* Mobil ilke: masaüstündeki metin, görsel ve kutular telefonda da görünür (katlama/gizleme yok); yalnızca
   düzen tek sütuna iner. Uzun metinler (genel bakış, rehber) her genişlikte tam. */

/* ---------------------------------------------------------------- c) Ürünler (sektör bağlamlı liste) */
@media (max-width: 639px) {
  /* Mobil: ürün listesi hero'ya daha yakın */
  .sx-products { padding-top: var(--s-4); }
  .sx-products .section-head { gap: var(--s-2); margin-bottom: var(--s-3); }
}
.sx-chips { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-3); }
.sx-chips .chip { min-height: 40px; padding: 6px 14px; font-size: 14px; cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast), background-color var(--t-fast); }
.sx-chips__n { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--steel-100); color: var(--steel-700); font-size: 11px; font-weight: 600; }
.sx-chips .chip[aria-pressed="true"] .sx-chips__n { background: var(--red); color: #fff; }
@media (max-width: 639px) {
  .sx-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .sx-chips::-webkit-scrollbar { display: none; }
  .sx-chips .chip { flex: none; }
}

/* Mobil: görsel + metin (grup, ad, özet, malzeme/standart) satırı, altında tam genişlik eylem çubuğu (teklif + ürün
   detayı tek satırda); 640+ eylemler metin sütununda, büyük görsel; 1024+ iki sütun */
.sx-prods { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
.sx-prods > .is-collapsed,
.sx-prods > [hidden] { display: none; }
.sx-prod {
  position: relative; display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--s-1) var(--s-2); align-items: start;
  padding: var(--s-1); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color var(--t-fast), box-shadow var(--t) var(--ease);
}
.section--white .sx-prod { background: var(--bg); }
.sx-prod:hover { border-color: var(--graphite); box-shadow: var(--shadow-md); background: var(--surface); }
.sx-prod::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; background: var(--red); transform: scaleY(0); transform-origin: top; transition: transform var(--t) var(--ease); }
.sx-prod:hover::before { transform: none; }
.sx-prod__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius); background: var(--steel-100); }
.sx-prod__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.sx-prod:hover .sx-prod__media img { transform: scale(1.05); }
.sx-prod__body { display: grid; gap: 4px; min-width: 0; padding-block: 2px; }
.sx-prod__group { margin: 0; font-size: 11px; font-weight: 600; line-height: 1.35; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); }
.sx-prod__title { font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.sx-prod__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sx-prod:hover .sx-prod__title a { color: var(--red-700); }
/* Özet (excerpt ≤130 karakter ya da sektör notu) her genişlikte tam: satır sınırı yok, kart metne göre uzar */
.sx-prod__text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.sx-prod__text--note { color: var(--text); }
.sx-prod__meta { margin: 0; font-size: 13px; line-height: 1.4; color: var(--text-soft); }
/* Uzun dil etiketinde "Ürün detayı" sığmazsa alt satıra iner (etiket kırılmaz) */
.sx-prod__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s-2); padding: 2px var(--s-1) 0 0; border-top: 1px solid var(--line); }
/* Teklif bağlantısı kart bağlantısının üstünde (z-index), 44px dokunma alanı */
.sx-prod__quote {
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-left: -4px; padding: 0 var(--s-1);
  font-size: 13px; font-weight: 600; color: var(--red-700); border: 1px solid transparent; border-radius: var(--radius);
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.sx-prod__quote:hover { background: var(--red); border-color: var(--red); color: #fff; }
.sx-prod__more { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--text); }
.sx-prod__more .icon { color: var(--red); transition: transform var(--t-fast) var(--ease); }
.sx-prod:hover .sx-prod__more .icon { transform: translateX(4px); }

@media (min-width: 640px) {
  .sx-prods { gap: var(--s-2); }
  /* Görsel iki satırı kaplar; fazla yükseklik 2. satıra (1fr) gider, eylemler metnin hemen altında kalır */
  .sx-prod { grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto 1fr; padding: var(--s-2); }
  .sx-prod__media { grid-row: span 2; }
  .sx-prod__actions { grid-column: 2; padding: 0; border-top: 0; }
  .sx-prod__title { font-size: 17px; }
  .sx-prod__quote { padding: 0 var(--s-2); margin-left: 0; border-color: var(--line-strong); color: var(--text); }
  .sx-prod__quote .icon { color: var(--red); }
  .sx-prod__quote:hover .icon { color: #fff; }
}
@media (min-width: 1024px) {
  .sx-prods { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .sx-prod { grid-template-columns: 136px minmax(0, 1fr); gap: var(--s-1) var(--s-3); }
  .sx-prod__body { gap: 6px; }
}
.sx-more-wrap { display: flex; justify-content: center; margin-top: var(--s-4); }
.sx-more[hidden] { display: none; }

/* Ürün listesinin sonu: "listede yok mu" iletişim şeridi (sayfadaki 3 iletişim noktasından biri) */
.sx-ask { position: relative; display: grid; gap: var(--s-3); margin-top: var(--s-5); padding: var(--s-3); overflow: hidden; }
.sx-ask::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--red); box-shadow: 0 0 14px var(--red-glow); }
.sx-ask__title { margin: 0 0 var(--s-1); font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 700; line-height: 1; text-transform: uppercase; color: #fff; }
.sx-ask__text p:not(.sx-ask__title) { margin: 0; max-width: calc(62 * var(--ch-body)); font-size: 15px; color: var(--on-dark-muted); }
.sx-ask__text .sx-ask__person { display: flex; align-items: center; gap: var(--s-1); margin-top: var(--s-1); font-size: 14px; color: var(--on-dark); }
.sx-ask__person .icon { color: var(--red); }
.sx-ask__actions { display: grid; gap: var(--s-1); }
@media (max-width: 479px) { .sx-ask { padding: var(--s-3) var(--s-2); } }
@media (min-width: 640px) { .sx-ask__actions { display: flex; flex-wrap: wrap; } }
@media (min-width: 1024px) {
  .sx-ask { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-5); padding: var(--s-4) var(--s-5); }
  .sx-ask__actions { flex-wrap: nowrap; }
}

.sx-empty { display: grid; gap: var(--s-3); padding: var(--s-4) var(--s-3); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--red); }
.sx-empty h3 { margin-bottom: var(--s-1); font-size: var(--fs-lg); }
.sx-empty p { max-width: calc(70 * var(--ch-body)); color: var(--text-muted); }
.sx-empty__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); margin-top: var(--s-3); }
@media (min-width: 768px) { .sx-empty { grid-template-columns: auto minmax(0, 1fr); padding: var(--s-5); } }

/* ---------------------------------------------------------------- d) Hizmetler */
.sx-services__grid { gap: var(--s-2); }
.sx-services .service-card--compact { position: relative; gap: var(--s-3); }
.sx-services .service-card--compact .service-card__summary { margin-top: var(--s-1); }
/* Kartın tamamı tıklanır (başlık bağlantısı kartı kaplar) */
.sx-services .service-card__title a::after { content: ""; position: absolute; inset: 0; }
.sx-services .service-card--compact:hover { border-color: var(--graphite); }
@media (max-width: 639px) {
  /* Mobil: ikon + ad + özet + "incele" bağlantısı (masaüstüyle aynı içerik), daha sıkı iç boşluk */
  .sx-services__grid { gap: var(--s-1); }
  .sx-services .service-card--compact { gap: var(--s-2); padding: var(--s-3) var(--s-2); }
  .sx-services .service-card--compact .icon-box { width: 40px; height: 40px; }
  .sx-services .service-card__title { font-size: 17px; }
}

/* ---------------------------------------------------------------- e) Genel bakış */
.sx-overview .answer-box { margin-bottom: var(--s-4); font-size: var(--fs-md); line-height: 1.65; }
.sx-overview .answer-box p { margin: 0 0 var(--s-1); }
.sx-overview__intro { max-width: calc(68 * var(--ch-body)); }
.sx-aside { display: grid; gap: var(--s-3); align-content: start; }
.sx-aside__box { display: grid; gap: var(--s-3); padding: var(--s-4) var(--s-3); background: var(--bg); border: 1px solid var(--line); border-top: 3px solid var(--graphite); }
.section--light .sx-aside__box { background: var(--surface); }
.sx-aside__title { font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1.05; text-transform: uppercase; letter-spacing: .01em; }
.sx-aside .list-check { gap: var(--s-1); font-size: 15px; line-height: 1.5; }
/* Mobil/tablette metnin altında tam genişlik kutu (masaüstünde yapışkan yan sütun) */
@media (max-width: 479px) { .sx-aside__box { padding: var(--s-3) var(--s-2); } }
@media (min-width: 1024px) {
  .sx-aside { position: sticky; top: calc(var(--header-h) + var(--sx-subnav-h) + var(--s-3)); }
}

/* ---------------------------------------------------------------- f) Saha koşulları */
.sx-conditions { position: relative; overflow: hidden; }
.sx-conditions__head .lead { margin-bottom: var(--s-3); }
.sx-conditions__head .link-arrow { color: #fff; }
.sx-conds { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
.sx-cond { position: relative; padding: var(--s-4) var(--s-3) var(--s-3); background: var(--graphite-2); border: 1px solid var(--line-dark); transition: border-color var(--t) var(--ease), transform var(--t) var(--ease), background-color var(--t); }
.sx-cond::before { content: ""; position: absolute; left: -1px; top: -1px; height: 2px; width: 48px; background: var(--red); box-shadow: 0 0 12px var(--red-glow); transition: width 420ms var(--ease); }
.sx-cond:hover { border-color: rgba(255, 255, 255, .22); background: var(--graphite-3); transform: translateY(-2px); }
.sx-cond:hover::before { width: calc(100% + 2px); }
/* Numara dekoratif (aria-hidden) ama axe kontrast denetler: steel-500 graphite-2 zeminde 4,27:1 (32-44 px kalın = büyük metin, eşik 3:1) */
.sx-cond__no { display: block; margin-bottom: var(--s-2); font-family: var(--font-display); font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: .02em; color: var(--steel-500); transition: color var(--t); }
.sx-cond:hover .sx-cond__no { color: var(--red); }
.sx-cond h3 { margin-bottom: var(--s-1); font-size: var(--fs-lg); color: #fff; }
.sx-cond p { margin: 0; font-size: 15px; color: var(--on-dark-muted); }
@media (max-width: 639px) {
  /* Mobil: numara başlıkla aynı satırda (kart başına ~70px kısalır) */
  .sx-cond { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-2); padding: var(--s-3) var(--s-2); }
  .sx-cond__no { grid-row: span 2; margin: 0; font-size: 32px; }
}
@media (min-width: 640px) {
  .sx-conds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-conds > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .sx-conditions__head { position: sticky; top: calc(var(--header-h) + var(--sx-subnav-h) + var(--s-4)); }
}

/* ---------------------------------------------------------------- g) Teknik seçim notları */
.sx-notes .steps { margin-top: var(--s-4); }
@media (min-width: 768px) { .sx-notes .sx-steps--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-3); } }
.sx-figure { position: relative; margin: 0; }
.sx-figure__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--steel-100); }
.sx-figure__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.sx-figure:hover .sx-figure__img img { transform: scale(1.03); }
.sx-figure__note { display: grid; gap: var(--s-1); padding: var(--s-3); background: var(--graphite); color: var(--on-dark); border-left: 3px solid var(--red); }
.sx-figure__note strong { font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1.05; text-transform: uppercase; }
.sx-figure__note span { font-size: 15px; color: var(--on-dark-muted); }
.sx-figure__note .link-arrow { margin-top: var(--s-1); color: #fff; }
@media (min-width: 1024px) {
  .sx-figure { position: sticky; top: calc(var(--header-h) + var(--sx-subnav-h) + var(--s-3)); }
  .sx-figure__img { aspect-ratio: 4 / 5; }
  .sx-figure:not(.sx-figure--noimg) .sx-figure__note { position: absolute; left: var(--s-3); right: var(--s-3); bottom: var(--s-3); box-shadow: var(--shadow-lg); }
}

/* ---------------------------------------------------------------- h) Detaylı rehber */
.sx-guide { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.sx-guide__title { max-width: calc(22 * var(--ch-display)); }
.sx-guide__cta { position: relative; align-self: start; display: grid; gap: var(--s-2); padding: var(--s-4) var(--s-3); overflow: hidden; }
.sx-guide__cta::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px; background: var(--red); box-shadow: 0 0 14px var(--red-glow); }
.sx-guide__cta h3 { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1; text-transform: uppercase; }
.sx-guide__cta p { margin: 0; font-size: 15px; color: var(--on-dark-muted); }
.sx-guide__actions { display: grid; gap: var(--s-2); margin-top: var(--s-1); justify-items: start; }
/* İlgili teknik tablolar (sektör ürün gruplarından): ince ayraçla eylemlerin altında, bağlantılar alt alta */
.sx-guide__tech { display: grid; gap: var(--s-1); margin-top: var(--s-1); padding-top: var(--s-2); border-top: 1px solid var(--line-dark); }
.sx-guide__cta .sx-guide__tech-label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-muted); }
.sx-guide__tech ul { list-style: none; display: grid; gap: var(--s-1); justify-items: start; }
.sx-guide__tech .link-arrow { font-size: var(--fs-sm); }
/* Mobil/tablette rehber metninin altında tam genişlik kutu; dar ekranda iç boşluk küçülür */
@media (max-width: 479px) { .sx-guide__cta { padding: var(--s-3) var(--s-2); } }
@media (min-width: 640px) and (max-width: 1023px) { .sx-guide__cta { max-width: calc(72 * var(--ch-body)); } }
@media (min-width: 1024px) {
  .sx-guide { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: var(--s-7); }
  .sx-guide__cta { position: sticky; top: calc(var(--header-h) + var(--sx-subnav-h) + var(--s-3)); }
}

/* ---------------------------------------------------------------- i) Uygulamalar (açık çelik zemin) */
.sx-apps { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
.sx-app { position: relative; padding: var(--s-4) var(--s-3); background: var(--surface); border: 1px solid rgba(13, 15, 17, .14); transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease), border-color var(--t); }
.sx-app::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; background: var(--red); transform: scaleY(0); transform-origin: top; transition: transform var(--t) var(--ease); }
.sx-app:hover { transform: translateY(-2px); border-color: rgba(13, 15, 17, .28); box-shadow: var(--shadow-md); }
.sx-app:hover::before { transform: none; }
.sx-app h3 { margin-bottom: var(--s-1); font-size: var(--fs-lg); }
.sx-app p { margin: 0; font-size: 15px; color: var(--text-muted); }
.sx-app--lead { background: var(--graphite); border-color: var(--graphite); color: var(--on-dark); }
.sx-app--lead::before { transform: none; box-shadow: 0 0 14px var(--red-glow); }
.sx-app--lead h3 { font-family: var(--font-display); font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); font-weight: 700; line-height: 1; text-transform: uppercase; color: #fff; }
.sx-app--lead p { font-size: 16px; max-width: calc(60 * var(--ch-body)); color: var(--on-dark-muted); }
.sx-app--lead:hover { border-color: var(--graphite); }
@media (max-width: 639px) { .sx-app { padding: var(--s-3) var(--s-2); } }
@media (min-width: 640px) and (max-width: 1023px) {
  .sx-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-apps > li:first-child,
  .sx-apps > li:last-child:nth-child(even) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .sx-apps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
  .sx-apps > li.sx-app--lead { grid-column: span 2; padding: var(--s-5) var(--s-4); }
  .sx-apps > li.sx-app--span2 { grid-column: span 2; }
  .sx-apps > li.sx-app--span3 { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- j) Galeri (koyu zemin) */
.sx-gallery .gallery a { background: var(--graphite-2); }

/* ---------------------------------------------------------------- k) Yazılar: mobilde de tam kart (görsel + özet), tek sütun */
@media (max-width: 639px) {
  .sx-articles__grid { gap: var(--s-2); }
  .sx-articles__grid .article-card__body { padding: var(--s-2) var(--s-2) var(--s-3); }
}

/* ---------------------------------------------------------------- l) SSS */
.sx-faq__head .lead { margin-bottom: var(--s-3); }
@media (min-width: 1024px) {
  .sx-faq__head { position: sticky; top: calc(var(--header-h) + var(--sx-subnav-h) + var(--s-4)); }
}

/* ---------------------------------------------------------------- m) Teklif */
.sx-quote { position: relative; overflow: hidden; }
.sx-quote::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--red); box-shadow: 0 0 18px var(--red-glow); }
.sx-quote__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.sx-quote h2 { max-width: calc(20 * var(--ch-display)); }
.sx-quote .lead { margin: var(--s-3) 0 0; }
.sx-quote__list { margin-top: var(--s-4); font-size: 15px; color: var(--on-dark); }
.sx-quote .channels { margin-top: var(--s-4); background: var(--line-dark); border-color: var(--line-dark); }
.sx-quote .channel { background: var(--graphite-2); color: var(--on-dark); }
.sx-quote .channel:hover { background: var(--graphite-3); }
.sx-quote .channel small { color: var(--on-dark-muted); }
.sx-quote .channel .icon-box { background: var(--graphite-3); border-color: var(--line-dark); color: var(--on-dark); }
.sx-quote .channel:hover .icon-box { background: var(--red); border-color: var(--red); color: #fff; }
.sx-quote .channel--wa:hover .icon-box { background: var(--wa); border-color: var(--wa); }
.sx-quote__panel { padding: var(--s-4) var(--s-3); background: var(--graphite); border: 1px solid var(--line-dark); border-top: 3px solid var(--red); box-shadow: var(--shadow-lg); }
.sx-quote__panel-title { display: flex; align-items: center; gap: var(--s-1); margin: 0 0 var(--s-3); font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1.05; text-transform: uppercase; color: #fff; }
.sx-quote__panel-title .icon { color: var(--red); }
@media (max-width: 479px) { .sx-quote__panel { padding: var(--s-3) var(--s-2); } } /* form ve gönder düğmesi dar kapta sığsın */
@media (min-width: 768px) { .sx-quote__panel { padding: var(--s-5) var(--s-4); } }
@media (min-width: 1024px) {
  .sx-quote__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6); align-items: start; }
  .sx-quote .channels--4 { grid-template-columns: minmax(0, 1fr); } /* dar 5/12 sütunda tek kolon: e-posta ve etiket kırılmasın */
}

/* ---------------------------------------------------------------- n) Diğer sektörler */
.sx-others { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
.sx-other { display: flex; align-items: center; gap: var(--s-2); height: 100%; padding: var(--s-2); background: var(--surface); border: 1px solid var(--line); transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast) var(--ease); }
.sx-other .icon-box { width: 40px; height: 40px; transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.sx-other__name { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
.sx-other > .icon { color: var(--steel-400); transition: transform var(--t-fast) var(--ease), color var(--t-fast); }
.sx-other:hover { border-color: var(--graphite); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.sx-other:hover .icon-box { background: var(--red); border-color: var(--red); color: #fff; }
.sx-other:hover > .icon { color: var(--red); transform: translateX(4px); }
.section--white .sx-other { background: var(--bg); }
.section--white .sx-other:hover { background: var(--surface); }
@media (max-width: 479px) {
  /* Mobil: iki sütun kutucuk; ikon üstte, ad altta tam kutu genişliğinde (uzun kelime: ru, nl, bg), ok sağ üstte */
  .sx-others { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sx-other { position: relative; flex-direction: column; align-items: flex-start; gap: var(--s-1); padding: var(--s-2) var(--s-1); }
  .sx-other__name { flex: none; width: 100%; font-size: 13px; overflow-wrap: anywhere; hyphens: auto; }
  .sx-other > .icon { position: absolute; top: var(--s-2); right: var(--s-1); }
}
@media (min-width: 480px) { .sx-others { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .sx-others { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); } }