/*
 * METSAN hesaplayıcı — ortak tema. TEK KAYNAK.
 * Tekil hesaplayıcı (public/index.html) ve toplu hesap (public/toplu/index.html)
 * bu dosyayı kullanır; iki sayfa aynı görünmelidir.
 *
 * TASARIM YÖNÜ: teknik çizim paftası.
 * Bu araç bir pazarlama sayfası değil, bir ölçü aleti — akrabası teknik föy ve
 * imalat resmi. Buradan gelen kararlar:
 *   - Sayfa bir pafta: ince çerçeve, numaralı bölgeler, sonda antet bloğu.
 *   - Kart yok: gölge yok, yuvarlatma yok. Bölgeler ince kural çizgisiyle ayrılır.
 *   - Renk malzemeden gelir: beton zemin, çelik metin. Marka yeşili SADECE sonuçta.
 *   - Rakamlar tabular; ölçü etiketleri (d₀, hₑf) çizimdeki gibi küçük ve seyrek.
 *   - ETA bir damgadır, bir etiket değil.
 * Ayrıntı: docs/kararlar/2026-09-24-arayuz-tasarimi.md
 */

/* IBM Plex Sans: teknik iletişim için tasarlanmış bir gövde yüzü, tabular rakamları
   sağlam. Ulaşılamazsa sistem yüzüne düşer — şantiyede bağlantı zayıf olabilir. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Sans+Condensed:wght@500&display=swap");

:root {
  /* malzeme paleti */
  --beton: #efeeea;
  --beton-koyu: #e3e1db;
  --kagit: #ffffff;
  --celik: #2b2f33;
  --celik-acik: #6b7176;
  --cizgi: #c9c6bf;
  --cizgi-ince: #e0ded8;
  --metsan: #8cce41;   /* marka — yalnız sonuç değeri */
  --eta: #b3261e;      /* damga */

  /* eski değişken adları (geriye dönük) */
  --brand-green: var(--metsan);
  --page-bg: var(--beton);
  --card-bg: var(--kagit);

  --yuz: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --yuz-olcu: "IBM Plex Sans Condensed", "IBM Plex Sans", "Segoe UI", sans-serif;
}

body {
  background: var(--beton);
  color: var(--celik);
  font-family: var(--yuz);
  font-variant-numeric: tabular-nums;
  margin-bottom: 60px;
  -webkit-font-smoothing: antialiased;
}

/* ---- pafta ---- */
.sheet {
  background: var(--kagit);
  border: 1px solid var(--celik);
  max-width: 1000px;
  margin: 28px auto 0;
  padding: 0 !important;
}

.indexmor-calc { padding: 0; }

/* ---- pafta başlığı: logo solda, gezinme sağda ---- */
.logo-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 26px;
  border-bottom: 1px solid var(--celik);
  margin: 0;
  text-align: left;
}

/* Marka bloğu: logo tek başına 34 px'te bir tırnak kadar kalıyordu; işareti
   büyüttük ve yanına sayfanın ne olduğunu söyleyen antet başlığını koyduk. */
.marka { display: flex; align-items: center; gap: 14px; min-width: 0; }
.marka img { max-height: 58px; width: auto; flex: none; }

.marka-yazi { min-width: 0; padding-left: 4px; border-left: 1px solid var(--cizgi); }

/* Logonun kendi METSAN yazısı var; yanına ad değil, sayfanın ne olduğu yazılır. */
.marka-alt {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--celik);
  line-height: 1.25;
  padding-left: 12px;
}

.logo-container img { max-height: 58px; }

/* ---- sayfa sekmeleri ---- */
.app-tabs { display: inline-flex; gap: 0; margin: 0; background: none; box-shadow: none; padding: 0; }

.app-tab {
  display: inline-block;
  padding: 5px 16px;
  border: 1px solid var(--cizgi);
  border-radius: 0;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--celik-acik);
  text-decoration: none;
  background: var(--kagit);
  transition: color 0.12s ease, background-color 0.12s ease;
}

.app-tab + .app-tab { border-left: 0; }
.app-tab:hover { color: var(--celik); text-decoration: none; }

.app-tab.is-active {
  background: var(--celik);
  border-color: var(--celik);
  color: #fff;
}

/* ---- bölge (eski .item-shadow: kart değil, paftanın bir bölgesi) ---- */
.item-shadow {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  border-top: 1px solid var(--cizgi-ince);
  margin: 0;
  padding: 22px 26px;
}

.row > [class*="col-"] > .item-shadow:first-child,
.container > .item-shadow:first-of-type { border-top: 0; }

.item-title {
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* bölge numarası: dolu yeşil daire değil, çizimdeki gibi kare bölge işareti.
   Numara meşru — içerik gerçekten bir sıra (ürün → eleman → ölçü → adet → koşul). */
.item-title .order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--celik);
  border-radius: 0;
  background: none;
  color: var(--celik);
  font-family: var(--yuz-olcu);
  font-size: 0.78rem;
  line-height: 1;
  margin: 0;
}

.item-subtitle {
  font-size: 0.84rem;
  font-weight: 400;
  color: var(--celik-acik);
  margin-bottom: 8px;
}

/* ---- ölçü etiketi: çizimdeki kota yazısı ---- */
.olcu-etiket {
  font-family: var(--yuz-olcu);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--celik-acik);
}

/* ---- antet bloğu: sonucun durduğu yer ---- */
/* Antet bloğu teknik resimde sayfaya yayılmaz; dar hücrelerden oluşan bir blok.
   max-width olmadan yeşil sonuç hücresi geniş ekranda yarım sayfalık bir slaba
   dönüşüyor ve "cesaret tek yerde" kuralını eziyordu. Dar kolonda (tekil sayfanın
   özet sütunu) sınır devreye girmez, düzen değişmez. */
.antet {
  border-top: 1px solid var(--celik);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  max-width: 470px;
}

.antet > div {
  padding: 14px 18px;
  border-left: 1px solid var(--cizgi-ince);
}

.antet > div:first-child { border-left: 0; }

.antet .baslik {
  font-family: var(--yuz-olcu);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--celik-acik);
  margin-bottom: 4px;
}

.antet .deger { font-size: 1.15rem; font-weight: 500; line-height: 1.2; }
.antet .deger .birim { font-size: 0.8rem; color: var(--celik-acik); margin-left: 3px; }

/* sayfadaki tek cesur hamle: asıl sonuç */
.antet .vurgu {
  background: var(--metsan);
  border-left-color: var(--metsan);
}

.antet .vurgu .baslik { color: #2f4d12; }
.antet .vurgu .deger { font-size: 1.7rem; font-weight: 600; }

/* ---- tablolar: föy tablosu ---- */
table { font-variant-numeric: tabular-nums; }

.table thead th {
  border-top: 0;
  border-bottom: 1px solid var(--celik);
  font-family: var(--yuz-olcu);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  color: var(--celik-acik);
  vertical-align: bottom;
}

.table td, .table th { border-color: var(--cizgi-ince); }
.table-sm td, .table-sm th { padding: 0.45rem 0.5rem; }

/* ---- form öğeleri: çizgili, kutulu değil ---- */
.form-control {
  border-radius: 0;
  border-color: var(--cizgi);
  color: var(--celik);
  font-variant-numeric: tabular-nums;
}

.form-control:focus {
  border-color: var(--celik);
  box-shadow: none;
}

select.form-control { background-color: var(--kagit); }

/* ---- düğmeler ---- */
.btn { border-radius: 0; font-weight: 500; }

.btn-brand, .btn-success, .report-button {
  background: var(--celik);
  border-color: var(--celik);
  color: #fff;
}

.btn-brand:hover, .btn-success:hover, .report-button:hover {
  background: #1b1e21;
  border-color: #1b1e21;
  color: #fff;
  filter: none;
}

.btn-outline-secondary {
  border-color: var(--cizgi);
  color: var(--celik);
}

.btn-outline-secondary:hover { background: var(--beton-koyu); color: var(--celik); border-color: var(--celik); }

/* seçim düğmeleri (eleman tipi) */
.btn-brand-toggle {
  background: var(--kagit);
  border: 1px solid var(--cizgi);
  color: var(--celik-acik);
  font-weight: 500;
}

.btn-brand-toggle:hover { color: var(--celik); }

.btn-brand-toggle.active,
.btn-brand-toggle:active,
.btn-group > .btn-brand-toggle.active {
  background: var(--celik);
  border-color: var(--celik);
  color: #fff;
}

/* ---- dil seçici ---- */
/* Dil seçici paftanın üstünde yüzen bir rozet değil, antetin parçası:
   sayfa çerçevesini kesmesin diye başlık bandına alındı. */
.ust-sag { display: flex; align-items: center; gap: 14px; }

.lang-switcher { display: inline-flex; }

.lang-switcher .btn-group .btn {
  padding: 3px 11px;
  font-family: var(--yuz-olcu);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  border: 1px solid var(--cizgi);
  border-radius: 0;
  background: var(--kagit);
  color: var(--celik-acik);
}

.lang-switcher .btn-group .btn + .btn { border-left: 0; }

.lang-switcher .btn-group .btn.active {
  background: var(--celik);
  border-color: var(--celik);
  color: #fff;
  font-weight: 500;
}

.lang-switcher .btn-group .btn:not(.active):hover { color: var(--celik); }

/* ---- ETA: etiket değil, damga ---- */
.eta-label { font-weight: 500; margin-left: 6px; }

.eta-approved:not(.eta-toggle), .eta-ok {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid var(--metsan);
  color: #4a7818;
  font-family: var(--yuz-olcu);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.eta-notapproved:not(.eta-toggle), .eta-no {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid var(--eta);
  color: var(--eta);
  font-family: var(--yuz-olcu);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

/* ---- delik kesiti: girdiyi gösteren çizim ---- */
.kesit { display: block; width: 100%; max-width: 260px; height: auto; }
.kesit .beton-dolgu { fill: var(--beton-koyu); }
.kesit .celik-dolgu { fill: var(--celik-acik); }
.kesit .recine { fill: var(--metsan); fill-opacity: 0.35; }
.kesit .kota { stroke: var(--celik); stroke-width: 0.8; }
.kesit text { font-family: var(--yuz-olcu); font-size: 9px; fill: var(--celik); }

.muted { color: var(--celik-acik); font-size: 0.82rem; }

/* Paftanın alt şeridi: hangi sürümün yayında olduğu sayfadan okunabilsin.
   "Ne yüklü" sorusu okunarak değil ölçülerek cevaplanır; ölçüm ucu /api/saglik. */
.pafta-alt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--celik);
  padding: 8px 26px;
  font-family: var(--yuz-olcu);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--celik-acik);
}
.pafta-alt .surum { font-variant-numeric: tabular-nums; }

/* Sessizce düzeltilen satır da yanıltır: düzeltme söylenir. Kırmızı hata değil,
   ETA damgasıyla aynı dilde bir uyarı şeridi. */
.uyari {
  font-size: 0.82rem;
  color: #8a5a00;
  border-left: 3px solid #d79a00;
  background: #fdf6e3;
  padding: 7px 11px;
}
[dir="rtl"] .uyari { border-left: 0; border-right: 3px solid #d79a00; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* İki satırlı tablo başlığı: üstte birim bir kez, altta marka adları. */
.grup-basligi {
  text-align: center !important;
  border-bottom: 1px solid var(--cizgi-ince) !important;
}

/* RTL (Arapça) ayna düzeltmeleri */
[dir="rtl"] .marka-yazi { border-left: 0; border-right: 1px solid var(--cizgi); }
[dir="rtl"] .marka-alt { padding-left: 0; padding-right: 12px; }
[dir="rtl"] .eta-label { margin-left: 0; margin-right: 6px; }
[dir="rtl"] .antet > div { border-left: 0; border-right: 1px solid var(--cizgi-ince); }
[dir="rtl"] .antet > div:first-child { border-right: 0; }

/* ---- rapor / PDF: aynı pafta dili ---- */
#printReport, #report { display: none; }

#printReport.pdf-export,
#report.pdf-export {
  display: block;
  padding: 26px;
  width: 794px;
  background: #fff;
  color: var(--celik);
  font-family: var(--yuz);
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--celik);
}

#report.pdf-export { position: fixed; left: -10000px; top: 0; }

#printReport.pdf-export .report-header,
#report.pdf-export .report-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--celik);
  margin-bottom: 16px;
}

/* Logonun kendi METSAN yazısı 34 px'te okunmuyordu; PDF başlığı müşteriye giden
   yüz olduğu için ekranla aynı oranda büyütüldü. */
#printReport.pdf-export .report-logo,
#report.pdf-export .report-logo { max-height: 50px; }

#printReport.pdf-export .report-title,
#report.pdf-export .report-title { font-size: 16px; font-weight: 600; }

#printReport.pdf-export .report-meta,
#report.pdf-export .report-meta {
  font-family: var(--yuz-olcu);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--celik-acik);
}

#printReport.pdf-export .report-card,
#report.pdf-export .report-card {
  border: 0;
  border-top: 1px solid var(--cizgi-ince);
  box-shadow: none;
  padding: 12px 0 0;
  margin-bottom: 14px;
}

#printReport.pdf-export table,
#report.pdf-export table { width: 100%; border-collapse: collapse; }

#printReport.pdf-export th, #printReport.pdf-export td,
#report.pdf-export th, #report.pdf-export td {
  border-bottom: 1px solid var(--cizgi-ince);
  padding: 5px 4px;
  text-align: left;
  font-size: 11px;
}

#printReport.pdf-export th,
#report.pdf-export th {
  font-family: var(--yuz-olcu);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--celik-acik);
  border-bottom: 1px solid var(--celik);
}

#report.pdf-export .report-section {
  font-weight: 600;
  font-size: 12px;
  margin: 0 0 6px;
}

#report.pdf-export .report-note {
  font-size: 8.5px;
  color: var(--celik-acik);
  margin-top: 8px;
  line-height: 1.5;
}

@media (max-width: 600px) {
  .sheet { margin: 0; border-left: 0; border-right: 0; }
  .logo-container { flex-wrap: wrap; padding: 14px 16px; }
  .item-shadow { padding: 18px 16px; }
}

/* ================= MOBİL / TABLET (yalnız ekran) =================
   Kararlar ve önce/sonra ölçümleri: docs/kararlar/2026-09-27-mobil-uyum.md
   Yeni kuralların hepsi @media screen içinde; form ve düğme kuralları .sheet
   altında (#report / #printReport .sheet dışında: PDF etkilenmez). Kenar boşlukları
   mantıksal özellikle yazılır, mevcut [dir="rtl"] kurallarını ezmez. */

/* Başlık bandı: 1. satır logo + dil seçici, 2. satır sayfa başlığı, 3. satır yarı yarıya
   iki sekme. DOM ve id'ler aynı; .marka ve .ust-sag display:contents ile ızgaraya açılır.
   Eski .lang-switcher{padding:10px 16px 0} yüzen rozet döneminden kalmaydı ve 32 px
   yiyordu; .ust-sag da sarmadığı için 320 px'te 38 px yatay taşma vardı (ölçüldü).
   ≤767: ilk hâli ≤600'dü; 601–740 px'te (iPhone SE/8 yatay) tek satırlı bantta sekmeler
   başlığı 12–30 px'e sıkıştırıyor, "Расчёт расхода…" sekmenin altına giriyordu (ölçüldü). */
@media screen and (max-width: 767.98px) {
  .logo-container {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "logo dil" "baslik baslik" "sekme sekme";
    gap: 8px 12px;
    padding: 10px 16px;
    align-items: center;
  }
  .marka, .ust-sag { display: contents; }
  .marka img, .logo-container img { grid-area: logo; max-height: 40px; }
  .marka-yazi { grid-area: baslik; border: 0; padding: 0; }
  .marka-alt { font-size: .85rem; padding: 0; }
  [dir="rtl"] .marka-yazi { border: 0; }
  [dir="rtl"] .marka-alt { padding: 0; }
  .lang-switcher { grid-area: dil; justify-self: end; padding: 0; }
  .lang-switcher .btn-group .btn { min-width: 44px; min-height: 44px; padding: 0 6px; }
  .app-tabs { grid-area: sekme; display: flex; }
  .app-tab { flex: 1 1 0; text-align: center; white-space: nowrap; padding: 11px 8px; }
}
/* 768–991 px: sekme yazısı kutunun içinde ikiye bölünüyordu (768'de 53 px, ölçüldü). */
@media screen and (min-width: 768px) and (max-width: 991.98px) {
  .app-tab { white-space: nowrap; }
}

/* Telefonda dokunma hedefi en az 44×44, yazı girilen alan en az 16 px (iOS odakta sayfayı
   yakınlaştırmasın). Yalnız .sheet altında: rapor elemanları etkilenmez. Kenar boşlukları
   mantıksal özellikle yazıldı, Arapçada da doğru tarafa düşer. !important zorunlu:
   Bootstrap'in mr-1, ml-1, p-0 sınıfları !important; aynı kural içinde fiziksel sıfırlamadan
   sonra gelen mantıksal değer, eşlendiği kenarda kazanır. column-gap: flex, "Hilti" ile
   "— Adhesive…" span'ları arasındaki boşluğu yutuyordu.
   pointer: coarse — iPhone yatay (844 px) ve iPad de dokunmatik; iOS 16 px altı alanda
   genişlikten bağımsız yakınlaştırır. Fareli masaüstü (pointer: fine) etkilenmez. */
@media screen and (max-width: 600px), screen and (pointer: coarse) {
  .sheet .form-control, .sheet .form-control-sm { font-size: 16px; }
  .sheet input.form-control, .sheet select.form-control, .sheet .input-number { min-height: 44px; }
  .sheet .input-number { width: 110px; }
  .sheet .btn, .sheet label.btn { min-height: 44px; }
  .sheet label.btn { display: inline-flex; align-items: center; justify-content: center; }
  .sheet #anchorContainer .eta-toggle { min-width: 44px; min-height: 44px; margin: 0 0 8px 0 !important; margin-inline-end: 8px !important; }
  .sheet #btnLoadProject, .sheet #btnSaveProject, .sheet #btnDeleteProject { min-width: 44px; min-height: 44px; }
  .sheet #btnLoadProject, .sheet #btnSaveProject { margin-right: 0 !important; margin-inline-end: 8px !important; }
  .sheet #btnDeleteProject { padding: 0 12px !important; margin-left: 0 !important; margin-inline-start: 8px !important; }
  .sheet .custom-control-label, .sheet summary.cmp-toggle { min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; column-gap: .3em; }
  .sheet .custom-control-label::before, .sheet .custom-control-label::after { top: 50%; transform: translateY(-50%); }
  /* 601 px üstünde başlık bandı tek satır kalır; yalnız hedefler büyür. Satır silme (×)
     tablo görünümünde 10 px genişti; sütunu 26 px olduğundan 44 px düğme hücreden taşıp
     tabloyu 11–22 px kaydırıyordu (iPad yatay, ölçüldü) — sütun da 44 + 2×5 px olur.
     col üzerindeki satır içi width yüzünden !important. */
  .sheet .lang-switcher .btn-group .btn { min-width: 44px; }
  .sheet .app-tab { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .sheet #rowsBody button[data-del] { min-width: 44px; }
  .sheet .rows-table > colgroup > col:last-child { width: 54px !important; }
  /* Satır ekle / temizle ve PDF / CSV: Bootstrap ml-2 fiziksel; Arapçada boşluk dış kenara
     düşüp düğmeler arası 3,8 px kalıyordu. Dar ekranda sarınca alt alta 0 px, alttaki 8 px
     içeri kayıktı (ölçüldü). Boşluk ilk düğmenin mantıksal sonunda: sarınca iz bırakmaz. */
  .sheet #addRow, .sheet #btnPdf { margin-inline-end: 8px; margin-bottom: 8px; }
  .sheet #clearRows, .sheet #btnCsv { margin-left: 0 !important; margin-bottom: 8px; }
  /* Kaydırıcı: 16 px yüksek kutu parmakla tutulmuyordu. Kutu 44 px, iz ortada kalır;
     balon aynı mesafede dursun diye 14 px aşağı iner ve dokunmayı kaydırıcıya bırakır. */
  .sheet input[type="range"] { min-height: 44px; }
  .sheet .rangeBubble { top: -12px; pointer-events: none; }
}

/* Telefonda 12 px altı metin kalmasın (ölçüldü: antet başlıkları, ETA damgaları, sürüm
   satırı 11,5 px; kesit etiketleri 11,7 px). Yeşil sonuç hücresindeki gri birimin kontrastı
   2,59:1'di (ölçüldü) → başlıkla aynı koyu yeşil. Yalnız ≤600: masaüstü görüntüsü değişmesin
   diye; masaüstündeki 2,59:1 ayrı karar (docs/kararlar/2026-09-27-mobil-uyum.md). */
@media screen and (max-width: 600px) {
  .sheet .antet .baslik { font-size: .8rem; }
  .sheet .table thead th, .sheet table.rows-table th { font-size: .8rem; }
  .sheet .kesit text { font-size: 10.5px; }
  .sheet .eta-ok, .sheet .eta-no,
  .sheet .eta-approved:not(.eta-toggle), .sheet .eta-notapproved:not(.eta-toggle) { font-size: .8rem; }
  .sheet .pafta-alt { font-size: .8rem; }
  .sheet .item-subtitle sub, .sheet label sub { font-size: .85em; }
  .sheet .antet .vurgu .birim { color: #2f4d12; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}