/* ============================================================
   Üretim tesisleri — TEK şablon, iki sayfa
     520:7605 Ağır Makina İmalat Fabrikası      (1440x4861)
     520:7927 Endüstriyel Ekipman İmalat Fab.   (1440x4859)

   İki sayfa aynı bileşenleri kullanıyor; yalnızca öğe sayıları
   ve değerler değişiyor (tools/section_map.py çıktısına bakınız).
   Sayfa akışı:
     0     kahraman            1440x1024
     1024  entegre üretim      1440x548
     1572  makine kartları     gradyan bant 590, kartlar 1733-2243
     2162  tesis fotoğrafı     1440x731
     2893  kapasite grafikleri 1440x884
     3777  video               placeholder 960x492 @ y=3833
     4441  footer
   ============================================================ */

/* ---------- Kahraman ---------- */
.fabhero { position: relative; height: 1024px; overflow: hidden; }
.fabhero .bg-media { position: absolute; inset: 0; }
.fabhero .bg-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fabhero .bg-media::after { content: ""; position: absolute; inset: 0; background: rgba(4, 30, 66, .78); }
/* Figma'da bu blok x=90'da; sayfanın geri kalanı 96'lık konteynerde.
   UYARI — 6px'i margin-left ile vermeyin: .container'ın `margin-inline: auto`
   merkezlemesini iptal eder ve blok tamamen sola yapışır. Konumu `left` ile
   kaydırıyoruz, düzen genişliği bozulmuyor. */
.fabhero__inner { position: relative; left: -6px; padding-top: 525px; }
.fabhero__title { margin: 0 0 38px; font-weight: 600; font-size: 36px; line-height: 43.88px; color: #fff; }
.fabhero__body { margin: 0; font-weight: 400; font-size: 18px; line-height: 28px; color: #fff; }
.fabhero__body + .fabhero__body { margin-top: 28px; }

/* ---------- Entegre Üretim şeridi — Figma: 1440x548, zemin #B9D9EF %12 ---------- */
.fabstrip { padding: 120px 0 119px; background: rgba(185, 217, 239, .12); }
.fabstrip__panel { padding: 24px; background: #fff; border-radius: 8px; }
.fabstrip__title {
  margin: 0 0 48px; text-align: center;
  font-weight: 600; font-size: 36px; line-height: 43.88px; color: var(--color-blue);
}
.fabstrip__row { display: flex; justify-content: center; gap: 16px; margin: 0; padding: 0; list-style: none; }
.fabstrip__row li { flex: 0 0 188px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
/* Figma: 90x90 kutu; dışa aktarımda 4px gölge payı var (98x98). */
.fabstrip__icon { display: block; width: 98px; height: 98px; margin: -4px 0; }
.fabstrip__label {
  width: 188px; min-height: 57px; text-align: center;   /* Figma: 188x57 */
  font-weight: 500; font-size: 16px; line-height: 19.5px; color: var(--color-blue);
}

/* ---------- Makine kartları ----------
   Kartlar gradyan bandın (590px) altından taşıp fotoğrafın üstüne biniyor.
   z-index ŞART: fotoğraf DOM'da sonra geldiği için aksi halde kartları örter. */
.fabmach {
  position: relative; z-index: 1; height: 590px;
  background: linear-gradient(160deg, #B8C8DA 7%, #6486B4 100%);
}
.fabmach__title {
  margin: 0; padding-top: 80px; text-align: center;      /* 1572 -> 1652 */
  font-weight: 600; font-size: 36px; line-height: 43.88px; color: var(--color-navy);
}
.fabmach__row {
  display: flex; gap: 23px; margin: 37px 0 0; padding: 0; list-style: none;
}
.fabcard {
  flex: 0 0 298px; display: flex; flex-direction: column;
  min-height: 510px; background: var(--color-navy); border-radius: 8px; overflow: hidden;
}
.fabcard__head {
  display: flex; align-items: center; gap: 4px;
  min-height: 75px; padding: 0 31px; background: #E0E7F1;
}
.fabcard__name { font-weight: 500; font-size: 24px; line-height: 29.26px; color: var(--color-blue); }
.fabcard__note { font-weight: 300; font-size: 16px; line-height: 19.5px; color: var(--color-blue); }
/* Başlık -> gövde boşluğu Figma'da 4 karttan 3'ünde 43-45, ilkinde 30.
   Çoğunluk (44) uygulandı; ilk kart kendi çerçevesine göre 14px aşağıda. */
.fabcard__body {
  display: flex; flex-direction: column; align-items: center; gap: 29px;
  padding: 44px 0 27px;
}
/* İkon yüksekliği karta göre değişiyor — Figma: 137 / 131 / 116 / 146.
   build.py satır içi gömerken SVG'nin width/height'ını siliyor (yalnız
   viewBox kalıyor), o yüzden ölçü veriden geliyor (--icon-h). Hepsini 137'ye
   zorlamak Momoray ikonunu %18 büyütüyordu. Genişlik viewBox oranından. */
.fabcard__icon { display: grid; place-items: center; color: #fff; }
.fabcard__icon svg { width: auto; height: var(--icon-h, 137px); max-width: 148px; }
/* Figma'da iki satır biçimi var: düz liste (yalnızca değer) ve etiket/değer
   çifti. İkisinde de `lineHeightPx: 40` yazıyor AMA metin kutuları farklı:
   düz listede 40px, çiftte etiket 20px + değer 18px (aralarında 6, çiftler
   arasında 16). Figma sabit yükseklikli metin kutusunda satır kutusunu değil
   KUTUYU baz alıyor; 40'ı çiftlere de uygulamak her çifti 36px şişiriyordu
   (masaüstü ve mobilde aynı hata). Ölçü referans PNG'den doğrulandı. */
.fabcard__rows { margin: 0; padding: 0 20px; width: 100%; text-align: center; }
.fabcard__rows dt {
  font-weight: 500; font-size: 14px; line-height: 20px; color: #9BCBEB;
}
.fabcard__rows dd {
  margin: 0; font-weight: 500; font-size: 18px; line-height: 40px; color: #fff;
}
.fabcard__rows dd + dd { margin-top: 1px; }    /* düz liste — Figma col gap 1 */
.fabcard__rows dt + dd { margin-top: 6px; line-height: 18px; }
.fabcard__rows dd + dt { margin-top: 16px; }   /* çiftler arası */

/* ---------- Tesis fotoğrafı — Figma: 1440x731, #041E42 %21 ---------- */
.fabphoto { position: relative; height: 731px; overflow: hidden; }
.fabphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fabphoto::after { content: ""; position: absolute; inset: 0; background: rgba(4, 30, 66, .21); }

/* ---------- Kapasite grafikleri — Figma: 1440x884 @ y=2893 ---------- */
.fabcap { padding: 60px 0 64px; }                        /* 2893 -> 2953, gövde 3713 -> 3777 */
.fabcap__title {
  margin: 0 0 48px; text-align: center;
  font-weight: 600; font-size: 36px; line-height: 43.88px; color: var(--color-navy);
}
.fabcap__row { display: flex; justify-content: space-between; gap: 48px; margin: 0; padding: 0; list-style: none; }
.fabcap__row li { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 46px; }
.fabcap__name {
  /* Figma: 275x48 — iki satır. Satır sonu tasarımdan geliyor (titleHtml). */
  min-height: 48px; text-align: center;
  font-weight: 500; font-size: 20px; line-height: 24.38px; color: var(--color-navy);
}
.fabchart { position: relative; width: 200px; height: 199px; }
/* Her yay kendi render kutusuyla dışa aktarıldı; konum ve ölçü satır içi
   stilden gelir (data/uretim.json). inset:0 ile esnetmek şekli bozuyordu. */
.fabchart img { position: absolute; }
.fabchart__center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  max-width: 72px; max-height: 72px; width: auto; height: auto;
}
.fabchart__lead { position: absolute; }
/* Değer etiketleri halka çerçevesine göre konumlanır (data/uretim.json). */
.fabchart__val {
  position: absolute; white-space: nowrap;
  font-weight: 600; font-size: 14px; line-height: 17.07px; color: var(--color-navy);
}
/* li aralığı 46 (ad -> halka); halka -> açıklama Figma'da 40, farkı burada kapatıyoruz. */
.fabcap__caps { margin: -6px 0 0; display: flex; flex-direction: column; gap: 12px; text-align: center; }
.fabcap__caps span { font-weight: 400; font-size: 14px; line-height: 17.07px; color: var(--color-navy); }
.fabcap__body { margin: 40px 0 0; font-weight: 400; font-size: 18px; line-height: 28px; color: var(--color-navy); }
.fabcap__body + .fabcap__body { margin-top: 28px; }

/* ---------- Video — Figma: 960x492 @ (239,3833) ---------- */
/* Üst/alt boşluk sayfaya göre değişiyor; satır içi stilden gelir (data/uretim.json). */
.fabvideo { padding: 56px 0 116px; }
.fabvideo__box {
  position: relative; width: 960px; height: 492px; margin-inline: auto;
  display: grid; place-items: center; background: #D9D9D9; border: 0; cursor: pointer;
}
.fabvideo__box::after {
  content: ""; width: 0; height: 0;
  border-left: 93px solid #B22020;
  border-top: 53px solid transparent; border-bottom: 53px solid transparent;
  transition: transform .18s ease;
}
.fabvideo__box:hover::after { transform: scale(1.06); }

/* ============================================================
   Mobil — Figma 520:8266 (Ağır Makina, 390x7833)
                520:8739 (Endüstriyel Ekipman, 390x7176)

     0     kahraman 390x845 (metin 359 @ y=251)
     845   Entegre Üretim — öğeler ALT ALTA, 188 geniş
             Ağır Makina  4 öğe, bölüm 697
             Endüstriyel  5 öğe, bölüm 779
     ...    gradyan bant + makine kartları (tek sütun 298 @ x=46, aralık 23)
             bandın bittiği yerde tesis fotoğrafı (731) başlar,
             kartlar masaüstündeki gibi fotoğrafın ÜSTÜNE biner
             bant yüksekliği sayfaya göre: --fab-band (data/uretim.json)
     +731   video 390x286
     ...    kapasite grafikleri — kartlar 275 geniş, alt alta
     ...    footer 390x964

   Mobilde video kapasite bölümünün ÜSTÜNDE (masaüstünde altında);
   sıra flex order ile tasarıma uyduruluyor.
   ============================================================ */
@media (max-width: 767px) {
  .fab-page main { display: flex; flex-direction: column; }
  .fabhero { order: 1; height: 845px; }
  .fabstrip { order: 2; }
  .fabmach { order: 3; }
  .fabphoto { order: 4; }
  .fabvideo { order: 5; }
  .fabcap { order: 6; }

  .fabhero__inner { left: 0; padding-top: 251px; }
  .fabhero__title { margin-bottom: 38px; font-size: 18px; line-height: 21.94px; }
  .fabhero__body { font-size: 16px; line-height: 19.5px; }
  .fabhero__body + .fabhero__body { margin-top: 19.5px; }

  /* Şerit kabuğunun dolgusu da çerçeveye göre değişiyor: Endüstriyel 39,
     Ağır Makina 32. Aşağıdaki .fab-fixed-boxes kuralları hep aynı ayrımı
     izliyor — o sınıf "bu sayfanın mobil çerçevesi bileşenlerin eski
     sürümünü kullanıyor" demek. */
  .fabstrip { padding: 39px 0; }                       /* 845 -> 884 */
  .fab-fixed-boxes .fabstrip { padding: 32px 0; }
  .fabstrip__panel { padding: 22px 0 24px; }
  .fabstrip__title { margin-bottom: 24px; font-size: 20px; line-height: 24.38px; }
  .fabstrip__row { flex-direction: column; align-items: center; gap: 24px; }
  .fabstrip__row li { flex: 0 0 auto; gap: 22px; }
  .fabstrip__icon { width: 48px; height: 48px; margin: 0; }
  /* Şerit bileşeninin iki sürümü var. Endüstriyel çerçevesinde etiket kutusu
     içeriğe göre büyüyor (öğe 97/107, aralık 24); Ağır Makina çerçevesinde
     57px'e sabitlenmiş (öğe 127, aralık 9). Sayfa bayrağıyla ayrılıyor —
     tek kurala indirgemek diğer sayfada 60-100px sapma üretiyor. */
  .fabstrip__label { min-height: 27px; }
  .fab-fixed-boxes .fabstrip__row { gap: 9px; }
  .fab-fixed-boxes .fabstrip__label { min-height: 57px; }

  /* Makine kartları tek sütun. Gradyan bandın yüksekliği --fab-band ile
     sayfadan geliyor; masaüstündeki 590px'in mobil karşılığı. Bandın altında
     731px'lik tesis fotoğrafı var ve kartlar üstüne biniyor.
     min-height:0 ŞART: main flex konteyner olduğu için otomatik en küçük
     boyut kuralı `height`i yok sayıp bandı içerik kadar uzatıyor. */
  .fabmach { height: var(--fab-band, auto); min-height: 0; }
  .fabmach__title {
    max-width: 298px; margin: 0 auto; padding-top: 48px;
    font-size: 20px; line-height: 24.38px;
  }
  /* 298 genişlik iki çerçevedeki satır sonunu da doğal olarak üretiyor:
     "Kaldırma ve Taşıma / Kapasitesi", "Makine ve Ekipman / Kapasitesi". */
  .fabmach__row { flex-direction: column; align-items: center; gap: 23px; margin-top: 37px; }
  /* Mobilde kart yüksekliği içeriğe göre. Ağır Makina çerçevesinde kartlar
     510'a sabitlenmiş ama Endüstriyel'de değil; sabitlersek ikincisi şişiyor. */
  .fabcard { flex: 0 0 auto; width: 298px; min-height: 0; }
  .fab-fixed-boxes .fabcard { min-height: 510px; }
  /* Kart başlığı mobilde ortalı (masaüstünde 31px soldan). */
  .fabcard__head { justify-content: center; padding: 0 16px; }
  .fabcard__name { font-size: 18px; line-height: 21.94px; }

  .fabphoto { flex: 0 0 auto; }                      /* 390x731, orta kırpma */
  .fabvideo { padding: 42px 0 43px !important; }     /* bölüm 390x286 */
  .fabvideo__box { width: min(358px, 100% - 32px); height: 201px; }
  .fabvideo__box::after { border-left-width: 48px; border-top-width: 27px; border-bottom-width: 27px; }

  .fabcap { padding: 30px 0; }
  /* Figma metni "Kapasite ve İmalat \nGücümüz" — satır sonu tasarımdan.
     max-width kırılmayı doğal olarak aynı yerde üretiyor. */
  .fabcap__title {
    max-width: 280px; margin: 0 auto 48px;
    font-weight: 500; font-size: 24px; line-height: 29.26px;
  }
  .fabcap__row { flex-direction: column; align-items: center; gap: 48px; }
  /* Ad -> halka boşluğu Figma'da her kartta farklı (46/44/41/39); ortalaması
     uygulandı. Halka -> açıklama dördünde de 40, o yüzden __caps'in negatif
     üst boşluğu da 46->42 değişimine göre düzeltildi. */
  .fabcap__row li { flex: 0 0 auto; width: 275px; gap: 42px; }
  .fabcap__caps { margin-top: -2px; }
  .fabcap__body { margin-top: 48px; font-size: 16px; line-height: 19.5px; }
  .fabcap__body + .fabcap__body { margin-top: 19.5px; }
}

/* ============================================================
   Tablet / ara genişlikler (768-1439) — Figma'da tasarlanmadı.
   Makine kartları (4 x 298 + 3 x 23 = 1261) ve grafik kartları
   1440 altında satıra sığmıyordu; sarmalı yapıldı.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1439px) {
  .fabhero { height: auto; min-height: 640px; }
  .fabhero__inner { left: 0; padding: 180px 0 60px; }

  .fabmach { height: auto; padding-bottom: 60px; }
  .fabmach__row { flex-wrap: wrap; justify-content: center; }
  .fabcard { flex: 0 1 298px; }
  .fabcard__rows { padding-inline: 12px; }

  .fabcap__row { flex-wrap: wrap; justify-content: center; gap: 48px 32px; }
  .fabcap__row li { flex: 0 1 275px; }
  .fabchart__val { position: static; display: none; }
  .fabchart__lead { display: none; }
  /* Değerler mutlak konumdan çıkınca halkanın altında liste olarak gösterilir */
  .fabcap__caps { margin-top: 24px; }

  .fabvideo__box { width: min(960px, 100% - 32px); height: auto; aspect-ratio: 960 / 492; }
  .fabstrip__row { flex-wrap: wrap; justify-content: center; gap: 24px; }
}