/* ============================================================
   SIMGETEK — Entegre Çözümler
   Figma: index 2166:11101 (1440x1198) · Talaşlı İmalat 2169:12004
   ============================================================ */

/* ------------------------------------------------------------
   BAŞLIK BLOĞU — Figma: 1126x337 @ (157,136) · col gap 45 · ortali
     "HİZMETLERİMİZ"  Mont 400/16/32  #0033A0
     "Entegre Çözümler" Mont 600/32/39.01 navy
     alt metin Mont 400/18/32 ortali navy
   ------------------------------------------------------------ */
/* Figma: header 89'da bitiyor, baslik bloku 136'da basliyor -> 47px ara */
.ecwrap { background: var(--color-white); padding: 47px 0 0; }
.ecwrap__inner {
  width: 1126px;
  max-width: calc(100% - var(--page-pad) * 2);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 45px;
}
/* Figma: baslik grubu 110 yuksek (kicker 32 + baslik 38 + alt metin 32, ust uste biner) */
.echead { text-align: center; min-height: 110px; }
.echead__kicker { font-size: 16px; line-height: 32px; font-weight: 400; color: var(--color-blue); }
.echead__title  { font-size: 32px; line-height: 39.01px; font-weight: 600; color: var(--color-navy); }
.echead__sub    { font-size: 18px; line-height: 32px; font-weight: 400; color: var(--color-navy); }


/* ------------------------------------------------------------
   STEPPER — 9 istasyon
   Figma: satir 1126x182 · istasyon 134px · aralik -10 (uzerine biner)
     ikon alani 134x90 · etiket Mont 600/13/15.85 · ortali · #0033A0
   ------------------------------------------------------------ */
.stepper {
  display: flex;
  gap: 0;
  align-items: flex-start;
  justify-content: center;
  min-height: 182px;
}
.stepper__item {
  position: relative;
  flex: 0 0 134px;
  width: 134px;
  margin-inline: -5px;          /* Figma gap -10 -> her iki yanda 5 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 38px;
  padding-top: 3px;
  text-align: center;
  color: var(--color-blue);
  transition: transform var(--dur) var(--ease);
}
.stepper__item:hover { transform: translateY(-3px); }
.stepper__icon { width: 134px; height: 90px; object-fit: contain; }
.stepper__label {
  font-size: 13px;
  line-height: 15.85px;
  font-weight: 600;
  padding-inline: 4px;
}
.stepper__item[aria-current="true"] { color: var(--color-navy); }
.stepper__item[aria-current="true"] .stepper__icon { filter: drop-shadow(0 2px 6px rgba(0, 51, 160, .35)); }


/* ------------------------------------------------------------
   ADIM PANELİ
   Figma: 1100x207 @ (160,519) · #E0E7F1 · 1px #D9D9D9 · r8 · pad 20
     sol kenarda 8px #0033A0 seridi (r8 0 0 8)
     ic blok col gap 24 · ust blok col gap 12
   ------------------------------------------------------------ */
.ecpanel {
  position: relative;
  width: 1100px;
  max-width: calc(100% - var(--page-pad) * 2);
  /* Figma: panel x=160 (ortali degil; stepper bloku x=157) */
  margin: 46px auto 0 160px;    /* stepper 473'te bitiyor, panel 519'da basliyor */
  min-height: 207px;
  padding: 20px;
  padding-left: 28px;
  background: #E0E7F1;
  border: 1px solid #D9D9D9;
  border-radius: var(--radius-md);
  overflow: hidden;
}
/* Kalite detektoru bunu "yan sekme vurgu seridi" kalibi olarak isaretliyor.
   Burada tasarimin acik karari: Figma'da "Rectangle 2211" — 8x207, #0033A0,
   kose yaricapi 8/0/0/8. Kaldirilmadi. */
.ecpanel::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 8px;
  background: var(--color-blue);
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.ecpanel__inner { display: flex; flex-direction: column; gap: 24px; }
.ecpanel__text  { display: flex; flex-direction: column; gap: 12px; }
.ecpanel__step  { font-size: 16px; line-height: 19.5px; font-weight: 400; color: var(--color-blue); }
.ecpanel__title { font-size: 24px; line-height: 29.26px; font-weight: 600; color: var(--color-navy); }
.ecpanel__body  { font-size: 16px; line-height: 19.5px; font-weight: 400; color: var(--color-navy); }
.ecpanel__body--empty { color: var(--color-text-muted); font-style: italic; }
.ecpanel__more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 16px;
  line-height: 19.5px;
  font-weight: 400;
  color: var(--color-navy);
}
.ecpanel__more:hover { text-decoration: underline; }
.ecpanel__more svg { width: 12px; height: 12px; }

.ecwrap__tail { height: 116px; }   /* panel 726'da bitiyor, footer 842'de basliyor */


/* ------------------------------------------------------------
   Duyarli davranis
   ------------------------------------------------------------ */
@media (max-width: 1439px) {
  .ecwrap { padding-top: 47px; }
  .stepper {
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 8px;
  }
  .stepper::-webkit-scrollbar { display: none; }
  .ecwrap__tail { height: 64px; }
  .ecpanel { margin-inline: auto; }
}

@media (max-width: 767px) {
  .ecwrap { padding-top: 32px; }
  .ecwrap__inner { width: auto; max-width: calc(100% - var(--page-pad) * 2); gap: 24px; }
  .echead__kicker { font-size: 14px; line-height: 20px; }
  .echead__title  { font-size: 20px; line-height: 24.38px; }
  .echead__sub    { font-size: 14px; line-height: 20px; }

  .stepper { margin-inline: calc(var(--page-pad) * -1); padding-inline: var(--page-pad); }
  .stepper__item { flex: 0 0 104px; width: 104px; gap: 20px; }
  .stepper__icon { width: 104px; height: 70px; }
  .stepper__label { font-size: 12px; line-height: 14.63px; }

  .ecpanel { width: auto; margin: 24px auto 0; padding: 16px 16px 16px 24px; }
  .ecpanel__inner { gap: 16px; }
  .ecpanel__title { font-size: 18px; line-height: 21.94px; }
  .ecpanel__body  { font-size: 14px; line-height: 20px; }
  .ecwrap__tail { height: 40px; }
}


/* ============================================================
   ENTEGRE ÇÖZÜM DETAY (Talaşlı İmalat · Mühendislik ve Dizayn)
   Figma: 2169:12004 / 2183:7406
   ============================================================ */

/* Hero — 1443x1024 · gorsel + #041E42 @ %30 · pad 146/87/149/109
   kirinti yolu ustte (12px), icerik altta: baslik Mont 600/36/43.88
   govde Mont 600/24/29.26 iki yana yasli · aralarinda 34 */
.sdhero {
  position: relative;
  height: 1024px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--color-white);
  --overlay: rgba(4, 30, 66, .3);
  /* Alt dolgu 167: icerik blogu alta yasli; Figma'da metin 857'de bitiyor. */
  padding: 146px 87px 167px 109px;
}
/* Mühendislik sayfasinda ortu %78 (Talaşlı'da %30) */
.sdhero--dark {
  --overlay: rgba(4, 30, 66, .78);
}
.sdhero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 1247px;
  max-width: 100%;
}
.sdhero .crumbs { position: static; }
.sdhero .crumbs a, .sdhero .crumbs span { font-size: 12px; line-height: 14.63px; }
/* gap yerine acik margin: iki paragraf oldugunda flex gap her ikisine de
   uygulaniyor ve baslik-govde araligi (34) ile paragraf araligi (28)
   ayri ayarlanamiyordu. */
.sdhero__content { display: flex; flex-direction: column; gap: 0; }
.sdhero__title { margin-bottom: 34px; }
.sdhero__body + .sdhero__body { margin-top: 28px; }
.sdhero__title { font-size: 36px; line-height: 43.88px; font-weight: 600; }
.sdhero__body  { font-size: 24px; line-height: 29.26px; font-weight: 600; text-align: justify; max-width: 1166px; }


/* Tanitim — 1440x543 · pad 48/96 · gorsel 608x447 + metin 608, aralik 32 */
.sdintro { background: var(--color-white); padding: 48px 0; }
.sdintro__row { display: flex; gap: 32px; align-items: flex-start; }
.sdintro__figure { flex: 0 0 608px; width: 608px; height: 447px; overflow: hidden; }
.sdintro__figure img { width: 100%; height: 100%; object-fit: cover; }
.sdintro__body { flex: 0 0 608px; width: 608px; display: flex; flex-direction: column; gap: 43px; }
.sdintro__text + .sdintro__text { margin-top: -20px; }   /* paragraf arasi 23, blok arasi 43 */
.sdintro__title { font-size: 24px; line-height: 34px; font-weight: 700; color: var(--color-navy); }
.sdintro__text  { font-size: 18px; line-height: 28px; font-weight: 400; color: var(--color-navy); text-align: justify; }

/* Makine bloklari — baslik 24px, gorsel 1248x560, spec tablosu */
/* Figma: makine bloklari arasi 72px; baslik cercevesi 98 (2. makinede 58),
   gorsel 1248x560, spec tablosu 249. */
/* Figma: makine bolumlerinin arkasinda beyazdan lacivere gradyan
   (Rectangle 2194: 1564..2622, Rectangle 2199: 2622..4694).
   Spec tablosu gradyanin koyu kismina denk geldigi icin metni BEYAZ. */
.machine { position: relative; padding: 0; }
/* Figma'da IKI ayri gradyan bant var:
     Rectangle 2194  y 1564..2622 (1058) — 1. makine
     Rectangle 2199  y 2622..4694 (2072) — 2. ve 3. makine + galeri basi
   Tek bant yapmak gradyanin her noktadaki degerini kaydiriyor. */
.machines { position: relative; }
.machineband {
  position: absolute;
  inset-inline: 0;
  background: linear-gradient(179deg, #FFFFFF 0%, var(--color-navy) 100%);
  pointer-events: none;
}
/* Olcum (referans render'dan): bant 1 y1564..2660 beyaz->lacivert,
   bant 2 y2660..3470 lacivert->beyaz (TERS yonde). Figma'nin gradient
   handle degerleri render'la ortusmedigi icin olcum esas alindi. */
.machineband--1 { top: -3px;    height: 1096px;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--color-navy) 100%); }
.machineband--2 { top: 1093px;  height: 810px;
  background: linear-gradient(180deg, var(--color-navy) 0%, #FFFFFF 100%); }
.machines > .machine { position: relative; z-index: 1; }
.machine + .machine { margin-top: 72px; }
/* 2. makine (C-Eksenli Yatay Torna) Figma'da farkli olculerde:
   baslik cercevesi 58, gorsel arasi 60, tablo 139 (2 satir) */
.machine--compact .machine__title { min-height: 58px; }   /* tek satırlık başlık */
.machine--compact .machine__figure { margin-top: 33px; }
.machine--compact .machine__specs { margin-top: 60px; min-height: 139px; }
/* Figma: başlık İKİ PARÇA — makine adı 700/24/38, altında açıklama
   karakter override'ı ile 400/20/38. Çerçevenin altında 1px kural var. */
.machine__title {
  min-height: 98px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 1px;
  border-bottom: 1px solid currentColor;
  color: var(--color-navy);
}
.machine__title-main { font-size: 24px; line-height: 38px; font-weight: 700; }
.machine__title-sub  { font-size: 20px; line-height: 38px; font-weight: 400; }
.machine__figure { height: 560px; overflow: hidden; margin-top: 48px; }
.machine__figure img { width: 100%; height: 100%; object-fit: cover; }
/* Ayirici cizgiler koyu zemin uzerinde beyazin soluk hali */
/* Figma: tablo tek bir 0.6px #041E42 vektör olarak çizilmiş (Vector 347).
   Referanstan ölçülen değerler — kutu 92..1340 (konteynerden 4px solda),
   dikey ayraç x=712, kural rengi tam olarak rgba(4,30,66,.25). */
.machine__specs {
  display: grid;
  grid-template-columns: 619px 627px;
  margin: 47px 0 0 -4px;
  min-height: 249px;
  border: 1px solid var(--rule);
}
.machine__side { border-left: 1px solid var(--rule); }
.machine__axes { display: flex; flex-direction: column; }
.machine__axis {
  display: grid;
  grid-template-columns: 450px 1fr;
  align-items: start;
  padding: 9px 18px;
  border-bottom: 1px solid var(--rule);
}
.machine__axis:last-child { border-bottom: 0; }
.machine__axis dt { display: flex; flex-direction: column; gap: 3px; }
.machine__axis-name { font-size: 16px; line-height: 19.5px; font-weight: 600; color: var(--color-navy); }
.machine__axis-desc { font-size: 14px; line-height: 17.07px; font-weight: 500; color: var(--color-navy); }
.machine__axis dd { margin: 0; font-size: 16px; line-height: 28px; font-weight: 600; color: var(--color-navy); }
.machine__side { padding: 19px 0 0 19px; }
.machine__side-title { font-size: 16px; line-height: 19.5px; font-weight: 600; color: var(--color-navy); margin-bottom: 36px; }
:root { --rule: rgba(4, 30, 66, .25); }
/* Sag sutun: etiket 14px + deger 16px, x=304'te hizali, satir araligi 24 */
.machine__side dl { display: flex; flex-direction: column; gap: 24px; }
.machine__side div { display: grid; grid-template-columns: 304px 1fr; align-items: baseline; }
.machine__side dt { font-size: 14px; line-height: 28px; font-weight: 400; color: var(--color-navy); }
.machine__side dd { margin: 0; font-size: 16px; line-height: 28px; font-weight: 400; color: var(--color-navy); }

/* Gradyanin koyu kismina denk gelen bloklar beyaz metne doner */
.machine--title-dark .machine__title { color: var(--color-white); }
.machine--specs-dark .machine__specs,
.machine--specs-dark .machine__axis-name,
.machine--specs-dark .machine__axis-desc,
.machine--specs-dark .machine__axis dd,
.machine--specs-dark .machine__side-title,
.machine--specs-dark .machine__side dt,
.machine--specs-dark .machine__side dd { color: var(--color-white); }
.machine--specs-dark .machine__specs { --rule: rgba(255, 255, 255, .35); }


/* Galeri — Figma: 1249x712 @ (96,4667), gorsel henuz yerlestirilmemis.
   Gezinme oklari galerinin uzerinde (1198x47 @ y=5023 -> gorselin 356px icinde). */
.sdgallery {
  position: relative;
  width: 1249px;
  max-width: calc(100% - 190px);
  height: 712px;
  margin: 102px auto 0;
  overflow: hidden;
}
.sdgallery img { width: 100%; height: 100%; object-fit: cover; }

/* Sayfalar arasi gezinme — Figma: 1198x47 @ (121,5023) */
.sdnav {
  position: absolute;
  top: 356px;
  left: 25px; right: 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 47px;
  z-index: 1;
}
.sdnav a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--color-navy);
  background: rgba(255, 255, 255, .85);
  padding: 10px 16px;
  font-size: 16px;
  line-height: 19.5px;
  font-weight: 500;
  transition: gap var(--dur) var(--ease);
}
.sdnav a:hover { gap: 18px; }
.sdnav svg { width: 24px; height: 24px; }
/* Galeriden footer'a 72px */
.sdtail { height: 72px; }

/* Mühendislik sayfasinda galeri sayfa ortasinda: tanitim 1567'de bitiyor,
   galeri 1606'da basliyor (39), oklar galerinin 356px icinde. */
.sdgallery--mid { margin-top: 39px; }

/* Metin blogu — Figma: 1248x413 @ y=2411 · col gap 43
   baslik Mont 700/24/34 · govde Mont 400/18/28 */
.sdtext { background: var(--color-white); padding: 93px 0 112px; }
.sdtext__title { font-size: 24px; line-height: 34px; font-weight: 700; color: var(--color-navy); }
.sdtext__body  { margin-top: 43px; min-height: 336px; font-size: 18px; line-height: 28px; font-weight: 400; color: var(--color-navy); }


@media (max-width: 1439px) {
  .sdhero { height: auto; padding: 160px 40px 64px; }
  .sdhero__inner { width: auto; gap: 96px; }
  .sdhero__title { font-size: 30px; line-height: 36px; }
  .sdhero__body { font-size: 20px; line-height: 28px; }
  .sdintro__row { flex-wrap: wrap; }
  .sdintro__figure, .sdintro__body { flex: 1 1 100%; width: auto; }
  .sdintro__figure { height: 44vw; max-height: 447px; }
  .machine__figure { height: 44vw; max-height: 560px; }
  .machine__specs { grid-template-columns: 1fr; gap: 24px; min-height: 0; }
  .sdgallery { width: auto; height: 44vw; margin-top: 64px; }
  .sdgallery--mid { margin-top: 32px; }
  .sdtext { padding: 48px 0 64px; }
  .sdtext__body { min-height: 0; }
  .sdnav { top: auto; bottom: 20px; }
  .machine__title { min-height: 0; }
  .machine__axis { grid-template-columns: 1fr auto; gap: 16px; }
}

@media (max-width: 767px) {
  .sdhero { padding: 120px 16px 40px; }
  .sdhero__inner { gap: 48px; }
  .sdhero__title { font-size: 20px; line-height: 24.38px; }
  .sdhero__body { font-size: 16px; line-height: 22px; text-align: left; }
  .sdintro { padding: 24px 0; }
  .sdintro__row { gap: 20px; }
  .sdintro__body { gap: 20px; }
  .sdintro__title { font-size: 18px; line-height: 24px; }
  .sdintro__text { font-size: 14px; line-height: 22px; text-align: left; }
  .machine__title { font-size: 18px; line-height: 21.94px; }
  .machine__title { min-height: 0; }
  .machine__figure { margin-top: 20px; height: 200px; }
  .machine__specs { min-height: 0; }
  .machine__specs { margin-top: 24px; }
  .machine__axis { padding: 10px 0; }
  .machine__axis-name { font-size: 14px; }
  .machine__axis-desc { font-size: 12px; }
  .machine__axis dd { font-size: 14px; line-height: 20px; }
  .sdgallery { height: 220px; margin-top: 32px; }
  .sdtext { padding: 32px 0 40px; }
  .sdtext__title { font-size: 18px; line-height: 24px; }
  .sdtext__body { margin-top: 20px; min-height: 0; font-size: 14px; line-height: 22px; }
  .sdnav { top: 90px; left: 12px; right: 12px; }
  .sdnav a { font-size: 14px; padding: 8px 12px; }
}

/* ============================================================
   Entegre Çözümler — mobil (Figma 2171:13756, 390x2750)

   Masaüstündeki yatay 9 istasyonlu stepper + panel yerine dikey kart
   listesi. Aynı veriden basılır; her breakpoint diğerini gizler.

     83   HİZMETLERİMİZ 16/32 #0033A0
     122  Entegre Çözümler 20/24.38
     153  alt metin 16/19.5
     215  kartlar 358 geniş, 151 yüksek, aralık 16, r8, #E0E7F1
     1786 footer
   ============================================================ */
.eclist { display: none; }

@media (max-width: 767px) {
  .stepper, .ecpanel { display: none; }
  /* Figma: son kart 1702'de bitiyor, footer 1786'da başlıyor -> 84px kuyruk.
     Kuyruğu mobilde de gizlemek kartların altını footer'a yapıştırıyordu. */
  .ecwrap__tail { display: block; height: 84px; }
  .ecwrap { padding: 0; background: none; }
  .ecwrap__inner { padding: 0; }
  /* Figma mobilde başlık bloğu SOLA dayalı ve x=16'dan başlıyor; masaüstünde
     ortalı (.echead temel kuralı). 16px yan dolgu metni 32'ye itiyordu.
     Kutu 338: alt metnin tasarımdaki satır sonu ("...hattı — / bir hizmete
     tıklayın.") bu genişlikte doğal olarak oluşuyor. */
  .echead { padding: 31px 0 0; text-align: left; max-width: 338px; }   /* 52 -> 83 */
  .echead__kicker { margin: 0 0 7px; font-weight: 400; font-size: 16px; line-height: 32px; color: var(--color-blue); }
  .echead__title { margin: 0 0 7px; font-weight: 600; font-size: 20px; line-height: 24.38px; color: var(--color-navy); }
  .echead__sub { margin: 0; font-weight: 400; font-size: 16px; line-height: 19.5px; color: var(--color-navy); }

  .eclist {
    position: relative; display: flex; flex-direction: column; gap: 16px;
    margin: 22px 16px 0; padding: 0; list-style: none;  /* 193 -> 215 */
  }
  /* Kartların solundaki dikey bağlantı çizgisi — Figma: Line 31, x=46 */
  .eclist::before {
    content: ""; position: absolute; left: 30px; top: 8px; bottom: 8px;
    width: 1px; background: var(--color-blue); opacity: .35;
  }
  /* Figma: satır 338 geniş, space_between -> ikon 40 + boşluk 20 + metin 278 */
  .eccard {
    position: relative; display: flex; gap: 20px;
    min-height: 151px; padding: 20px 10px;
    background: #E0E7F1; border-radius: 8px;
    color: var(--color-blue); text-decoration: none;
    transition: background-color .18s ease, color .18s ease;
  }
  .eccard:hover, .eccard:focus-visible { background: var(--color-blue); color: #fff; }
  /* Figma: 40x40 beyaz daire + gölge; dışa aktarımda 4px gölge payı (48x48).
     Daire artık varlığın içinde, CSS çizmiyor. */
  .eccard__icon { flex: 0 0 48px; width: 48px; height: 48px; margin: -4px; object-fit: contain; }
  /* Aralıklar eşit değil: başlık -> gövde 13 (metin çerçevesinin içi),
     gövde -> İncele 6 (kartın kendi col gap'i). Tek gap vermek kartı
     151'den 157'ye çıkarıyordu ve sapma her kartta birikiyordu. */
  .eccard__text { display: flex; flex-direction: column; min-width: 0; }
  .eccard__title { margin-bottom: 13px; font-weight: 600; font-size: 16px; line-height: 19.5px; }
  .eccard__body { margin-bottom: 6px; font-weight: 400; font-size: 16px; line-height: 19.5px; }
  .eccard__body--empty { font-style: italic; opacity: .8; }
  /* Figma mobilde "İncele" altı çizili (masaüstü panelinde değil). */
  .eccard__more { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; font-size: 16px; line-height: 32px; text-decoration: underline; text-underline-offset: 2px; }
  .eccard__more svg { width: 16px; height: 16px; }
}

/* ============================================================
   Çözüm detay sayfaları — mobil (Figma 2169:12114, 390x6987)

     0     kahraman 390x1024 (başlık 24/29.26 @ y=579)
     1024  tanıtım — görsel 358x243, başlık 20/24.38, metin 16/19.5
     1813  makine blokları — başlık 24/38, görsel ve tablo alt alta
     5254  galeri 358x712
     6023  footer
   ============================================================ */
@media (max-width: 767px) {
  .sdhero { height: 1024px; }
  .sdhero__inner { padding-top: 0; }
  .sdhero__content { gap: 34px; }
  .sdhero__title { font-size: 24px; line-height: 29.26px; font-weight: 500; }
  .sdhero__body { font-size: 16px; line-height: 19.5px; font-weight: 400; max-width: none; }

  .sdintro { padding: 24px 0 24px; }
  .sdintro__row { flex-direction: column; gap: 10px; }
  .sdintro__figure { flex: 0 0 auto; width: 100%; height: 243px; }
  .sdintro__body { flex: 0 0 auto; width: 100%; gap: 16px; }
  .sdintro__title { font-size: 20px; line-height: 24.38px; font-weight: 500; }
  .sdintro__text { font-size: 16px; line-height: 19.5px; text-align: left; }

  /* Makine blokları — mobilde de gradyan bant var (Figma 2169:12114:
     Rectangle 2199, 390x1047, DÖNÜŞÜMLÜ). Referanstan ölçülen profil:
       bant 1  beyaz -> lacivert (%88'de lacivert)
       bant 2  lacivert -> beyaz
       bant 3  düz beyaz
     Bandı mutlak y yerine makinenin KENDİSİNE bağlıyoruz; blok yükseklikleri
     içeriğe göre değiştiği için mutlak konum kayardı. Hangi bloğun hangi
     zeminde durduğu zaten veri bayraklarında (titleOnDark / specsOnDark). */
  .machineband { display: none; }
  .machines { background: none; }
  .machine--specs-dark:not(.machine--title-dark) {
    background: linear-gradient(180deg, #FFFFFF 0%, var(--color-navy) 88%);
  }
  .machine--title-dark:not(.machine--specs-dark) {
    background: linear-gradient(180deg, var(--color-navy) 0%, var(--color-navy) 8%, #FFFFFF 85%);
  }
  .machine:not(.machine--specs-dark):not(.machine--title-dark) { background: #FFFFFF; }
  .machine + .machine { margin-top: 48px; }
  .machine__title { min-height: 0; font-size: 24px; line-height: 38px; font-weight: 700; }
  .machine__figure { height: 287px; margin-top: 48px; }
  /* Figma: panel dolgusuz, 0.6px konturlu kutu — zemin gradyandan geliyor. */
  .machine__specs {
    flex-direction: column; gap: 19px; margin: 48px 10px 0; min-height: 0;
    padding: 9px 0 19px; border: 0.6px solid currentColor; border-radius: 0;
    background: none;
  }
  .machine--specs-dark .machine__specs,
  .machine--specs-dark .machine__axis-name, .machine--specs-dark .machine__axis-desc,
  .machine--specs-dark .machine__axis dd, .machine--specs-dark .machine__side-title,
  .machine--specs-dark .machine__side dt, .machine--specs-dark .machine__side dd { color: #fff; }
  .machine__axis { border-bottom-color: currentColor; opacity: 1; }
  .machine__axis { border-bottom-width: 0.6px; }
  /* Masaüstünde satırlar 450px sabit sütunlu; mobilde sabit kalırsa dl 434px'e
     taşıp sayfaya yatay kaydırma ekliyor. Sütunlar akışkana çevriliyor. */
  .machine__axes, .machine__side { width: 100%; min-width: 0; }
  /* Figma satır adımı ~64: ad 19.5 + açıklama 17 + 2x14 dolgu. */
  .machine__axis { grid-template-columns: 1fr auto; gap: 8px; padding: 14px 18px; }
  .machine__axis dt, .machine__axis dd { min-width: 0; }
  .machine__specs { grid-template-columns: 1fr; }
  /* Sağ sütun satırları masaüstünde 304px sabit; mobilde taşıyordu. */
  .machine__side { padding: 0 18px; }
  .machine__side div { grid-template-columns: 1fr auto; gap: 8px; }
  .machine__side dt, .machine__side dd { min-width: 0; }
  .machine__side-title { margin-bottom: 16px; }

  /* Masaüstünde max-width: calc(100% - 190px) — 390px'te 200px'e düşüyordu. */
  .sdgallery { width: 358px; max-width: none; height: 712px; margin: 32px auto 0; }
  .sdgallery--mid { height: 712px; }
  .sdnav { flex-wrap: wrap; gap: 12px; padding: 16px; }
  .sdnav a { font-size: 14px; line-height: 17.07px; }
  .sdtail { height: 0; }
  .sdtext { padding: 24px 0; }
  .sdtext__title { font-size: 20px; line-height: 24.38px; }
  .sdtext__body { font-size: 16px; line-height: 19.5px; }
}

/* Tablet / ara genişlikler (768-1439) — Figma'da tasarlanmadı.
   9 istasyonlu stepper 1126px sabit; sarmalı yapıldı. */
@media (min-width: 768px) and (max-width: 1439px) {
  .stepper { flex-wrap: wrap; justify-content: center; width: auto; max-width: 100%; margin-inline: 0; }
  .stepper__item { flex: 0 0 134px; margin-inline: 0; }
  .ecpanel { width: auto; max-width: calc(100% - 64px); margin-inline: auto; }
  .ecpanel__inner { flex-wrap: wrap; gap: 24px; }
  .sdintro__row { flex-wrap: wrap; }
  .sdintro__figure, .sdintro__body { flex: 1 1 320px; width: auto; }
  .machine__specs { grid-template-columns: 1fr; }
  .machine__axis { grid-template-columns: 1fr auto; }
  .machine__side div { grid-template-columns: 1fr auto; }
  .sdgallery { width: auto; max-width: calc(100% - 64px); }
}

/* 390 altı: galeri ve alt gezinme mobil blokta sabit genişlikte kalıyordu. */
@media (max-width: 389px) {
  .sdgallery, .sdnav { width: auto; max-width: 100%; }
  .ecpanel, .eccard { max-width: 100%; }
}