/* Araç sayfaları (masaüstü) çalışma alanı düzeni, sürüm 4.2.
   Yazı boyutları değişmez; geniş ekranda yalnızca yerleşim genişler:
   - Sayfa ekran genişliğine yayılır (en çok 1880 px).
   - Sol panel ekranın yaklaşık %38'i olur; girdiler sığdığı kadar yan yana sütunlara dizilir.
   - Sağ panel genişse kartlar iki sütuna dağılır; çizim, özet ve tablo kartları tam genişlikte kalır.
   Dar ekranda (≤ 1000 px) bu dosyanın kuralları devreye girmez. */

@media (min-width: 1001px) {
  /* ---- Sayfa genişliği: araç sayfalarında üst menü ve içerik aynı genişlikte ---- */
  body:has(.view.split:not([hidden])) .site-main,
  body:has(.view.split:not([hidden])) .site-bar,
  body:has(.view.split:not([hidden])) .nav-row { max-width: 1880px; }

  /* ---- Başlık bloğu: daha az dikey yer ---- */
  .view.split > .top { margin-bottom: 12px; gap: 10px 20px; align-items: center; }
  .view.split > .top h1 { font-size: 28px; margin: 0; }
  .view.split > .top .sub { margin: 4px 0 0; }

  /* ---- İki panel oranı ---- */
  .view.split > .grid { gap: 18px; }
}

/* Çizimler (dişli şeması ve canlı modeller) ekran yüksekliğinin en çok ~%46'sını kaplar; sonuçlar aşağıda kaybolmaz.
   Genişlik yetmezse çizim ortalanır, oranı (çözünürlüğü) bozulmaz. */
@media (min-width: 1001px) {
  .view.split .mesh-box svg.mesh { max-height: 46vh; width: 100%; }
  .view.split .vz-svg { max-height: 46vh; }
}

@media (min-width: 1280px) {
  .view.split > .grid { grid-template-columns: minmax(340px, 38fr) minmax(0, 62fr); }
}

/* ---- Sol panel: girdileri sütunlara dağıt (panel genişliğine göre, kapsayıcı sorgusu) ---- */
/* Kapsayıcı sorgusu kutunun kendisini değil içini biçimlendirir: sol panel kendi içi için, sağ panel ise
   iki paneli içeren ızgaranın genişliğine göre ayarlanır. */
@media (min-width: 1001px) {
  .view.split > .grid > .side { container-type: inline-size; container-name: side; }
  .view.split { container-type: inline-size; container-name: work; }
}

@container side (min-width: 470px) {
  /* Hazır örnek düğmeleri tek satırda kalsın */
  .pchips, .chips { flex-wrap: wrap; }
}

/* ---- Sağ panel: kartları iki sütuna dağıt (sağ panel ≈ %62, yani çalışma alanı ≥ 1450 px iken ≈ 880 px) ---- */
@container work (min-width: 1450px) {
  .view.split .main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row dense;
    align-items: start;
  }
  /* İkili kart grupları çözülür; içindeki kartlar doğrudan ızgaraya yerleşir */
  .view.split .main > .pair { display: contents; }
  /* Tam genişlik kalanlar: çizim ve özet, hata kutusu, tablolu kartlar, hesap adımları, notlar */
  .view.split .main > .print-only,
  .view.split .main > .errors,
  .view.split .main > .vz-card,
  .view.split .main > .card.hero,
  .view.split .main > details,
  .view.split .main > .formula-link,
  .view.split .main > .scope,
  .view.split .main > datalist,
  .view.split .main > .card:has(.tbl-scroll),
  .view.split .main > .card:has(.stage-table),
  .view.split .main > section:has(> .gauge-box) { grid-column: 1 / -1; }
}

/* ---- Girdi alanları (tüm ekran boyutları) ----
   Her alan dört satırdır: etiket, açıklama, değer kutusu, kaydırıcı. Grup bir ızgaradır; alanlar 4 satır kaplar ve
   satırları subgrid ile paylaşır. Böylece yan yana alanlarda etiketler, kutular ve kaydırıcılar aynı çizgidedir;
   sayı ve seçim kutuları aynı genişliktedir, aralarında boşluk kalmaz. Tek sütunda alanlar art arda dizilir. */
.form .group { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 22px; }
.form .group > .group-title, .form .group > .note { grid-column: 1 / -1; }
.form .group > .field {
  display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; align-content: start;
  padding: 10px 0; border-top: 1px dashed var(--line); min-width: 0;
}
.form .field > label { display: block; font-weight: 800; align-self: end; line-height: 1.25; }
.form .field > small { display: block; color: var(--muted); font-size: 14.5px; font-weight: 600; margin-top: 2px; line-height: 1.35; }
.form .field > .ctl { margin-top: 8px; align-self: end; min-width: 0; }
/* Sayı ve seçim kutuları aynı yükseklikte (seçim kutusu tarayıcıda 2 px daha yüksek çiziliyordu) */
.form .field > .ctl > .num { width: 100%; height: 40px; box-sizing: border-box; justify-content: flex-end; gap: 6px; padding: 0 10px; }
.form .field > .ctl > .num > input, .form .field > .ctl > .num > select { flex: 1 1 auto; width: auto; min-width: 0; height: 100%; padding-top: 0; padding-bottom: 0; box-sizing: border-box; }
.form .field > .ctl > .num > select { cursor: pointer; text-align: right; text-align-last: right; }
/* Birim sabit genişlikte bir yuvada: rakamların sağ kenarı tüm kutularda alt alta gelir. Birimsiz kutuda yuva boş kalır. */
.form .field > .ctl > .num > span { flex: 0 0 3.75em; width: 3.75em; text-align: left; overflow: hidden; text-overflow: ellipsis; }
.form .field > .ctl > .num:not(:has(> span))::after { content: ""; flex: 0 0 3.75em; }
/* Birimsiz seçim kutuları (malzeme, yöntem vb.) uzun metin taşır: sola yaslı, birim yuvası yok */
.form .field.sel > .ctl > .num:not(:has(> span))::after { content: none; }
.form .field.sel > .ctl > .num:not(:has(> span)) > select { text-align: left; text-align-last: left; }
/* Kaydırıcı satırı: kaydırıcısız alanlarda boş kalır, yan yana alanlarda aynı yükseklikte durur. */
.form .field > .rng > input[type="range"] { margin: 10px 0 0; padding: 0; }
.form .field > .ctl > .us-eq { display: block; text-align: right; margin: 2px 2px 0; }
/* Sol panel yeterince genişse alanlar yan yana sütunlara dizilir (temel kuraldan sonra gelmeli). */
@container side (min-width: 470px) {
  .form .group { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* Duvar örgüsü (js/masonry.js): 4 px'lik satırlar, kartlar arası boşluk alt kenar boşluğuyla verilir */
@media (min-width: 1001px) {
  .view.split .main.masonry { grid-auto-rows: 4px; row-gap: 0; }
  .view.split .main.masonry > *,
  .view.split .main.masonry > .pair > * { margin-bottom: 20px; }
  .view.split .main.masonry > .formula-link { margin-top: 0; }
}

@media print {
  .view.split .main { display: block !important; }
  .view.split .main > *, .view.split .main > .pair > * { grid-row-end: auto !important; margin-bottom: 16px !important; }
  .view.split .main > .pair { display: grid !important; }
}