/* =========================== */
/* GENEL GÖRÜNÜM */
/* =========================== */

body {
  font-family: Arial, sans-serif;
  background: #f7f9fc;
  margin: 25px;
  font-size: 1.05em;
}

html {
  scrollbar-gutter: stable;
}

/* Başlık */
.header h1 {
  color: darkblue;
  font-size: 1.8em;
  margin: 5px;
  padding-left: 20px;
  line-height: 1.1;
}

/* Header sabit üstte */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #f7f9fc;
  z-index: 1000;
  padding: 0px 15px 5px;
  border-bottom: none;
}

/* Tab buton kapsayıcı */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 4px;
  padding-left: 20px;
  justify-content: flex-start;
}

/* Tab butonları */
.tab-button {
  padding: 6px 10px;
  border: 1px solid #ccc;
  background: #f2f2f2;
  cursor: pointer;
  font-size: 0.95em;
  font-weight: bold;
  border-radius: 12px;
  transition: background 0.2s ease;
  white-space: nowrap;
  text-align: left;
}
.tab-button:hover { background: #e6e6e6; }
.tab-button.active {
  background: #2d6cdf;
  color: white;
  border-color: #2d6cdf;
}

/* Tab içerikleri */
.tab-content {
  background: #fff;       /* arka plan beyaz */
  padding: 20px;          /* içeriden boşluk */
  width: 100%;            /* sayfanın tamamını kapla */
  box-sizing: border-box; /* padding dahil hesaplansın */
  margin: 0 auto;         /* ortalama */

  /* 🔥 sabit üst boşluk (her sekme için --tab-offset tanımlanıyor) */
  margin-top: var(--tab-offset, 100px);
  padding-top: 20px;
}

/* Başlık satırını solda H1, sağda link olacak şekilde düzenler */
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

/* İndirme linkinin görünümü */
.download-link{
  font-size:14px;        /* yazı boyutu */
  font-weight:600;       /* kalınlık */
  color:#061097;         /* metin rengi (açık mavi) */
  text-decoration:none;  /* alt çizgiyi kapat */
  padding:6px 10px;      /* iç boşluk */
  border-radius:8px;     /* köşe yumuşatma */
  border:none;   /* çerçeve */
  
  transition:background .15s, border-color .15s, transform .05s;
}
.download-link:hover{
  
  text-decoration:underline;               /* istersen hover’da alt çizgi */
}
.download-link:active{
  transform:translateY(1px);               /* tıklamada minik basılma efekti */
}

/* Mobilde yazı çok genişliyorsa biraz küçültüp padding azalt */
@media (max-width: 640px){
  .download-link{
    font-size:13px;
    padding:5px 8px;
  }
}



/* =========================== */
/* INPUT/STANDARDIZE */
/* =========================== */

input,
select,
button {
  height: 28px;
  padding: 2px 4px;
  font-size: 1em;
  line-height: 1.2;
  box-sizing: border-box;
}

/* =========================== */
/* SOIL PARAMETERS */
/* =========================== */

.soil-container { --tab-offset: 100px; }

.soil-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.soil-form { flex: 1; min-width: 500px; }
.soil-library { flex: 0 0 280px; border-left: 1px solid #ccc; padding-left: 20px; }

.soil-library-buttons {
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 10px;
}

/* ✅ Soil parameters butonları */
.add-btn {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  height: 38px;
}
.add-btn:hover { background-color: #3e9142; }

.delete-btn {
  background-color: #f44336;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  height: 38px;
}
.delete-btn:hover { background-color: #d32f2f; }

.save-btn {
  position: static;
  left: calc(100% - 140px); /* buton genişliği + boşluk kadar içeriden hizalar */
  background-color: #1e88e5;  /* aynı renk */
  color: #f3f3ef;
  border: none;
  padding: 8px 18px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  height: 38px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  transition: background 0.3s ease, transform 0.2s ease;
  margin-left: 500px;
}

.save-btn:hover {
  background-color: #1565c0;
  transform: scale(1.05);
}

/* Soil Library altındaki bilgi bloğu */
.soil-lib-image{
  margin-top:40px;
  text-align:center;
  max-width:100%;
  word-break:break-word;     /* uzun satırlar taşmasın */
}

/* Kırmızı telif satırı */
.soil-lib-note{
  font-size:14px;
  line-height:1.35;
  color:#111;
}
.soil-lib-note .copyright{
  color:#cc0000;             /* görseldeki kırmızı */
  font-weight:700;
}
.soil-lib-note .devnames{
  margin-top:2px;
}
.soil-lib-note .devnames strong{
  font-weight:700;           /* isimler kalın */
}
.soil-lib-note .ref{
  margin-top:8px;
}
.soil-lib-note .ref em{
  font-style:italic;         /* dergi adı italik */
}

/* DOI – açık mavi link, ortalı */
.soil-lib-caption{
  margin-top:8px;
  font-size:14px;
}
.soil-lib-caption a{
  color:#3b86f7;             /* açık mavi */
  text-decoration:none;
}
.soil-lib-caption a:hover{
  text-decoration:underline;
}


/* 🔹 Küçük ekranlar için (örneğin laptop ve tabletlerde) */
@media (max-width: 1000px) {
  .save-btn {
    left: calc(100% - 130px);
  }
}

/* 🔹 Daha dar ekranlar (mobil) için */
@media (max-width: 700px) {
  .save-btn {
    left: calc(100% - 120px);
    transform: scale(0.95);
  }
}


/* Soil Parameters list */
.soil-list { width: 240px; margin-bottom: 12px; font-size: 1.2em; height: 250px; }

.soil-form label, .form-section label {
  display: inline-block;
  width: 360px;
  margin-right: 60px;
  white-space: nowrap;
}

.soil-form div { display: flex; align-items: center; margin-bottom: 10px; }
.soil-form input, .form-section input { width: 100px; }



/* Daha geniş Identification alanı */
.soil-form input[name="soilname"],
#soilname {
  width: 180px !important;
}


.soil-form h3, .form-section h3 {
  font-size: 1.1em;
  font-weight: bold;
  margin-top: 30px;
  margin-bottom: 10px;
  border-bottom: 1px solid #ccc;
  /*width: 700px;*/
  
  width: 700px;                 /* ✅ kutuyu ~10px geçsin */
  max-width: calc(100% - 10px); /* ✅ container dışına taşmasın */

  padding-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* Color picker eski haline dönsün */
input[type="color"] {
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  cursor: pointer;
  background: none;
  padding: 0;
}
input[type="color"]::-webkit-color-swatch {
  border: 1px solid #0a0909;
  }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }

/* =========================== */
/* RESPONSIVE AYAR (Soil Parameters hizalama) */
/* =========================== */
@media (max-width: 1200px) {
  .soil-form label {
    width: 360px !important;
    display: inline-block;
  }

  .soil-form input[type="text"],
  .soil-form input[type="number"],
  .soil-form select {
    width: 100px !important;
    margin-left: 0;
  }

 

  .soil-form input[type="color"] {
    width: 28px !important;
    height: 28px !important;
    margin-left: 0;
    vertical-align: middle;
  }
}


/* =========================== */
/* END-BEARING PARAMETERS */
/* =========================== */

.end-bearing-container { --tab-offset: 100px; }


.end-bearing-container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 20px;
  flex-wrap: wrap;
  gap: 20px 80px;
}

.end-bearing-container h3 {
  font-size: 1.05em;
  font-weight: bold;
  margin: 10px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #ccc;
}

.end-bearing-container .form-section.left h3 { width: 380px; }
.end-bearing-container .form-section.right h3 { width: 600px; }

.end-bearing-container label { margin-right: 15px; white-space: nowrap; }
.end-bearing-container input { width: 100px; margin-left: 15px; }

/* Sol & sağ */
.end-bearing-container .form-section.left div {
  display: grid;
  grid-template-columns: 220px 100px;
  align-items: center;
  margin-bottom: 10px;
}
.end-bearing-container .form-section.right div {
  display: grid;
  grid-template-columns: 450px 100px;
  align-items: center;
  margin-bottom: 10px;
}

/* =========================== */
/* BOREHOLE */
/* =========================== */

.borehole-container { --tab-offset: 100px; }

.borehole-container {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 80px;
  max-width: 900px;
  background: #fff;
  padding: 5px;
  padding-top: 35px;
}

.borehole-left { display: flex; flex-direction: column; gap: 8px; }

.borehole-header {
  display: grid;
  grid-template-columns: 150px 110px 110px 70px 70px;
  gap: 8px;
  margin-bottom: 10px;
}
.borehole-header span { text-align: center; white-space: nowrap; font-weight: bold; }

.borehole-row {
  display: grid;
  grid-template-columns: 160px 100px 100px 70px 70px;
  gap: 14px;
  align-items: center;
}
.borehole-row select { width: 100%; }
.borehole-row input { width: 100px; }

.borehole-row button {
  padding: 0 10px;
  cursor: pointer;
  border: none;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.add2-btn { background: #4CAF50; }
.delete2-btn { background: #f44336; }

.add2-btn, .delete2-btn {
height: 30px;

}

#borehole .borehole-row:nth-child(n+3) {
  visibility: hidden;   /* görünmez ama yer kaplar */
}


.borehole-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 0;
}
.borehole-inputs {
  display: flex;
  justify-content: flex-start;
  gap: 30px;
  margin-bottom: 5px;
  margin-left: -110px;
}
.borehole-inputs label {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.borehole-inputs input { width: 80px; text-align: center; }

.borehole-right .graph-area {
  width: 340px;
  height: 450px;
  border: 1px solid #ccc;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1200px) {
  .borehole-container { flex-direction: column; gap: 25px; }
  .borehole-right { align-items: flex-start; margin-left: 100px; }
}




/* =========================== */
/* PILE PARAMETERS */
/* =========================== */

/* Varsayılan boşluk tanımı */
#pile-parameters .pile-container { 
  --tab-offset: 100px;  /* üst boşluk */
}

#pile-parameters .pile-container {
  display: flex;
  flex-direction: column;
  gap: 30px;              
  margin-top: 35px;
  padding: 0 4px;
  font-size: 1.0em;
  font-family: Arial, sans-serif;
}

/* 3 kolon düzeni (büyük ekranlarda) */
#pile-parameters .pile-inputs {
  display: grid;
  grid-template-columns: 2fr 3fr 3fr;  /* 3 kolon */
  column-gap: 20px;                    /* kolonlar arası boşluk */
}

#pile-parameters .inputs-col {
  display: grid;
  grid-template-rows: auto auto;
  row-gap: 12px; /* satırlar arası boşluk */
}

#pile-parameters .inputs-col div {
  display: flex;
  align-items: center;
}

/* Label ayarları */
#pile-parameters .inputs-col label { margin-right: 6px; }
#pile-parameters .col-1 label { width: 160px; }
#pile-parameters .col-2 label { width: 270px; }
#pile-parameters .col-3 label { width: 260px; }

/* Input ayarları */
#pile-parameters .col-1 input { width: 90px; }
#pile-parameters .col-2 input { width: 90px; }
#pile-parameters .col-3 input { width: 130px; }

#pile-parameters .inputs-col input {
  height: 28px;            /* tüm input kutuları normalize */
  padding: 2px 4px;
  font-size: 1em;
  box-sizing: border-box;
}

/* =========================== */
/* GRAFİK ALANI VE GÖRSEL */
/* =========================== */
#pile-parameters .pile-graphs {
  display: flex;
  justify-content: center;
  gap: 250px;           
  flex-wrap: wrap;
}

/* Her bir grafik veya görsel kutusu */
#pile-parameters .graph-wrapper { 
  min-width: 300px; 
  max-width: 300px; 
  position: relative; 
}

/* Sağdaki dinamik grafik alanı */
#pile-parameters .graph-area { 
  width: 100%; 
  height: 300px; 
  border: 1px solid #ccc; 
  background: #fafafa; 
  border-radius: 6px; 
}

/* Soldaki sabit görsel (LoLF.png) */
#pile-parameters img#LoLFImage {
  width: 330px;
  max-width: 330px;      /* Görselin maksimum genişliği */
  height: 330px;          /* Oranı korur */
  display: block;
  margin: 0 auto;
  border: none;          /* Çerçeve tamamen kaldırıldı */
  border-radius: 6px;    /* Köşeler çok hafif yumuşak */
  box-shadow: none;      /* Gölge de kaldırıldı */
  transition: transform 0.25s ease;
  margin-top: -10px;
}

/* Küçük ekran (mobil) için */
@media (max-width: 1200px) {
  #pile-parameters img#LoLFImage {
    max-width: 340px;    /* Daha dar ekranda küçülür */
  }
}

/* =========================== */
/* RESPONSIVE AYAR (küçük ekran) */
/* =========================== */
@media (max-width: 1200px) {
  /* Kolonlar alt alta */
  #pile-parameters .pile-inputs {
    grid-template-columns: 1fr;   /* tek kolon */
    row-gap: 18px;                /* kolonlar arası dikey boşluk */
  }

  /* Label genişliklerini sabitle → kutular hizalı olur */
  #pile-parameters .inputs-col label {
    width: 270px !important;      /* orta kolon genişliği referans alındı */
  }

  /* Grafikler alt alta */
  #pile-parameters .pile-graphs {
    flex-direction: column; 
    gap: 25px;                    /* grafikler arası boşluk */
  }

  /* Görsel boyutunu küçült */
  #pile-parameters img#LoLFImage {
    max-width: 320px;
  }
}
  
/* =========================== */
/* SETTLEMENT */
/* =========================== */

.settlement-container { 
  --tab-offset: 100px;        
  display: flex;              
  justify-content: flex-start;
  align-items: flex-start;    
  gap: 60px;                  
  flex-wrap: wrap;            
}

/* Sol taraf (girdi kısmı) */
.settlement-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 40px;
}

.settlement-left label {
  font-weight: normal;
  margin-left: 24px;
}

.settlement-left input {
  width: 80px;
  height: 28px;
  text-align: center;
  font-size: 1.0em;
  margin-left: 24px;
}

.calculate-btn {
  background: #6fcfec;
  color: rgb(20, 19, 19);
  padding: 6px 20px;
  font-size: 1.05em;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 4px;
  margin-top: 8px;
  height: 38px;
  width:  auto;
}
.calculate-btn:hover {
  background: #999;
}

/* Sağ taraf (2 bölüm) */
.settlement-right {
  display: flex;
  flex-direction: row;   /* Yan yana bölümler */
  gap: 60px;
  flex-wrap: wrap;       /* Küçük ekranda alta geçsin */
  margin-top: 20px;
  min-width: 420px;
}

/* Her bölüm */
.settlement-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 360px;      /* Minimum genişlik */
}

.settlement-section h3 {
  font-size: 1.05em;
  font-weight: bold;
  margin: 20px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #ccc;
}

.settlement-section div {
  display: grid;
  grid-template-columns: 250px 100px;
  align-items: center;
  gap: 25px;
}

.settlement-section label {
  white-space: nowrap;
}

.settlement-section input {
  width: 100px;
  height: 28px;
  text-align: center;
  font-size: 1em;
}

/* 📱 Küçük ekran: sadece 2. bölüm alta geçsin */
@media (max-width: 1200px) {
  .settlement-right {
    flex-direction: column;
    gap: 30px;
  }
  .settlement-section {
    min-width: unset;  /* esnek olsun */
  }
}


/* =========================== */
/* LOAD-SETTLEMENT CURVE */
/* =========================== */

.load-settlement-container { --tab-offset: 100px; }

#load-settlement-curve .curve-container {
  --tab-offset: 100px;   
    margin-top: 0 !important;               /* dış boşluğu kaldır */
  }

.table-wrapper {
  overflow-x: auto;        /* sağa kaydırılabilir */
  overflow-y: auto;        /* aşağı kaydırılabilir */
  max-height: 300px;       /* tablo yüksekliği (isteğe göre ayarlanabilir) */
  margin-top: 40px;
  margin-bottom: 10px;
  border-style: outset;
  padding-right: 0;
}

/* Tablo */
.results-table {
  border-collapse: collapse;
  min-width: 1200px;
  font-size: 0.95em;
    }

/* Başlıklar */
.results-table th,
.results-table td {
  border: 1px solid #ccc;
  padding: 6px 10px;
  text-align: center;
  white-space: nowrap;
  height: 16px;             /* minimum yükseklik */
  width: auto;
}

/* Başlık sabit kalsın */
.results-table thead th {
  position: sticky;
  top: 0;
  background: #f2f2f2;
  z-index: 2;
  font-weight: bold;
}

/* Zebra satır stili (bir satır açık, bir satır koyu) */
.results-table tbody tr:nth-child(even)
 {
  background-color: #f9f9f9;   /* açık gri */
}

.results-table tbody tr:nth-child(odd)
{
  background-color: #ffffff;   /* beyaz */
}



/* Buton grubu */
.table-buttons {
  margin-top: 10px;
  display: flex;
  justify-content: center;   /* sayfa ortasına hizala */
  gap: 40px;                 /* butonlar arası 40px boşluk */
  }

.calculate2-btn, .save2-btn, .plot-btn {
  padding: 10px 10px;
  font-size: 1.05em;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.2s ease;
  height: 38px;
  width: auto;
}


/* Özel renkler */
.calculate2-btn { background: #da9021; color: white; }
.calculate2-btn:hover { background: #f51707; }

.save2-btn { background: #4287f5; color: white; }
.save2-btn:hover { background: #3069c9; }

.plot-btn { background: #4CAF50; color: white; }
.plot-btn:hover { background: #3e9142; }

/* İlerleme çubuğu */
/* İlerleme çubuğu */
.progress-bar {
  position: relative; /* Metin katmanı için gereklidir */
  margin-top: 14px;
  width: 100%;
  height: 20px; /* Metnin sığması için biraz daha yüksek */
  background: #eee;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #ddd;
}

.progress {
  width: 0%;
  height: 100%;
  background: #2d6cdf;
  transition: width 0.1s ease-out; /* Daha akıcı geçiş */
}

.progress-text {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-weight: bold;
  font-size: 15px;
  
}



/* =========================== */
/* PLOT */
/* =========================== */
#plot .plot-container {  
  
  padding-top: 0px;
  margin-top: 20px;
  display: flex;
  justify-content: flex-start;   /* sola hizala */
  align-items: flex-start;
  gap: 15px;                     /* aralar biraz daraltıldı */
  flex-wrap: nowrap;             /* 🔥 alta geçmesin, yan yana kalsın */
  grid-template-columns: 500px auto;
}

/* Bölümler */
.axis-section,
.graph-section,
.table-section {
  flex: 0 0 auto;    /* sabit genişlik */
  margin-top: 15px;
}

/* 🔒 Başlangıçta kapalı (visibility) — JS 'Completed' olunca açacak */
.graph-section,
.table-section,
.curve-table thead {
  visibility: hidden;
}

/* Eksen seçimleri */
.axis-selection {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.95em;
}
.axis-selection select {
  width: 330px;       /* 🔧 daha dar */
  height: 160px;
  margin: 6px;
  margin-bottom: 12px;
  
}
.axis-selection label {
  font-size: 1.1em;
  font-weight: bold;
  margin-left: 20px;
  display: inline-block;
}

.curve-table th, .curve-table td {
  border: none;
  background: none;
  padding: 0px;
  text-align: center;
  vertical-align: middle;
}

/* Input & select */
.curve-table select,
.curve-table input[type="number"] {
  padding: 0px;
  box-sizing: border-box;
  font-size: 16px;
  text-align: left;
}

.curve-table input[type="number"] {
  text-align: center;
}

/* İstediğin ölçüleri buradan değiştir */
:root{
  --line-w:   70px;   /* Line select genişlik */
  --line-h:   22px;   /* Line select yükseklik */

  --marker-w: 70px;   /* Marker select genişlik */
  --marker-h: 22px;   /* Marker select yükseklik */

  --width-w:  50px;   /* Width input genişlik */
  --width-h:  22px;   /* Width input yükseklik */
  --field-fs: 14px;   /* Yazı boyutu */
}

/* Line */
.curve-line{
  width: var(--line-w);
  height: var(--line-h);
  font-size: var(--field-fs);
  padding: 0;
  gap:4px;
}

/* Marker */
.curve-marker{
  width: var(--marker-w);
  height: var(--marker-h);
  font-size: var(--field-fs);
  padding: 0;
  gap:4px;
}

/* Width (tam sayı kutusu) */
.curve-width{
  width: var(--width-w);
  height: var(--width-h);
  font-size: var(--field-fs);
  padding: 0;
  text-align: center;
  gap:4px;
}

/* Color picker */
.curve-table input[type="color"] {
  -webkit-appearance: none;
  border: none;
  cursor: pointer;
  padding: 0;
  background: none;
}

/* === Curve settings hizalama & boyutlar === */
.curve-table{
  border-collapse: separate;
  border-spacing: 0;               /* satırlar arası dikey aralık */
  --curve-row-h: 24px;             /* satır yüksekliği */
  --ctrl-h: 24px;                  /* kontrol (select/number/color) yüksekliği */
}

.curve-table tbody tr{ height: var(--curve-row-h); }

.curve-table td{
  padding: 0;
  vertical-align: middle;          /* hücre içeriğini düşey ortala */
  white-space: nowrap;
}

/* 1 sütunu (No) – yazı boyutu */
.curve-table td:first-child{
  font: 600 20px/1 "Segoe UI", Arial, sans-serif;  /* boyut & kalınlık */
  text-align: center;
}

/* Color kutusu – diğerleriyle aynı yükseklik ve ortalama */
.curve-table input[type="color"]{
  width: var(--ctrl-h);
  height: var(--ctrl-h);
  padding: 0;
  box-sizing: border-box;
  vertical-align: middle;
  display: inline-block;
}

/* Line / Marker select’leri – düşey ortalama ve aynı yükseklik */
.curve-table select{
  height: var(--ctrl-h);
  line-height: var(--ctrl-h);
  padding: 0;
  vertical-align: middle;
  box-sizing: border-box;
  display: inline-block;
  /* bazı tarayıcılarda minik aşağı kayma olur, çok az yukarı itiyoruz */
  position: relative;
  top: -0.5px;
}

/* Width kutusu – tam sayı kutusu hizası */
.curve-table input[type="number"]{
  height: var(--ctrl-h);
  line-height: var(--ctrl-h);
  padding: 0;
  box-sizing: border-box;
  vertical-align: middle;
}

/* Plot ayar tablosundaki select'lerin iç solu iyice yaklaştır */
.curve-table select {
  padding-left: 0px;              /* en sola yaklaştır */
  -webkit-padding-start: 2px;     /* Safari/Chrome */
  -moz-padding-start: 2px;        /* Firefox */
  text-indent: 0;
  text-align-last: left;          /* bazı tarayıcılar için */
  box-sizing: border-box;
}

.curve-settings { 
  margin-left: 40px;  /* grafik ↔ curve-table arası 40px */
}

/* Renk kutusu kareleri aynı baseline’da dursun */
.curve-table .color-swatch {
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  border-radius: 4px;
  margin-top: 20px;
  font-size: 1.0em;
  table-layout: fixed;
  table-layout: fixed; 
}

/* Hücre iç boşluklarını eşitle */
.curve-table { border-collapse: separate; border-spacing: 2px 2px; }


/* Grafik alanı sabit kalır */
.plot-right .graph-area {
  position: relative;           /* 🔹 sabit pozisyon */
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  width: 500px;
  height: 420px;
}

/* =========================== */
/* PLOT (responsive düzenleme) */
/* =========================== */
#plot .plot-container {  padding-top: 0px;

  margin-top: 20;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 15px;
  flex-wrap: nowrap;
}

/* 1️⃣ Normal: 3 bölüm yan yana */
#plot .axis-section,
#plot .graph-area,
#plot .curve-settings {
  flex: 0 0 auto;
}

/* 2️⃣ Ekran biraz daraldığında (örneğin 1250px): yalnızca 3. bölüm alta iner */
@media (max-width: 1250px) {
  #plot .plot-container {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  #plot .axis-section,
  #plot .graph-area {
    flex: 0 0 auto;
  }
  #plot .curve-settings {
    flex-basis: 100%;
    order: 3;            /* 3. bölüm alta iner */
  }
}

/* 3️⃣ Daha da dar ekranlarda (örneğin 950px): 2. bölüm de alta iner */
@media (max-width: 950px) {
  #plot .plot-container {
    flex-direction: column;
    align-items: flex-start;
  }
  #plot .graph-area {
    order: 2;
  }
  #plot .curve-settings {
    order: 3;
  }
}

/* 4️⃣ Mobil: hepsi alt alta */
@media (max-width: 700px) {
  #plot .plot-container {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* =========================== */
/* MEASURED DATA (Excel tarzı) */
/* =========================== */

.measured-container { 
  --tab-offset: 100px;
  margin-top: 40px;
}

.measured-container .table-wrapper {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 330px;
  margin-top: 40px;
  margin-bottom: 10px;
}

/* Measured Data hücrelerinde imleci gizle */
.measured-table td[contenteditable="true"] {
  caret-color: transparent; /* yazma imlecini gizle */
}


.measured-table {
  border-collapse: collapse;
  width: 100%;              
  table-layout: auto;       
  font-size: 0.95em;
}

.measured-table th, 
.measured-table td {
  border: 1px solid #ccc;
  padding: 6px 10px;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  height: 20px;
  width: auto;
  cursor: default; /* seçilebilir hücre hissi */
}

/* Zebra satır stili */
.measured-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}
.measured-table tbody tr:nth-child(odd) {
  background-color: #ffffff;
}

/* Kolon genişlikleri */
.measured-table th:nth-child(1),
.measured-table td:nth-child(1) { width: 60px; }
.measured-table th:nth-child(2),
.measured-table td:nth-child(2) { width: 60px; }
.measured-table th:nth-child(3),
.measured-table td:nth-child(3) { width: 90px; }
.measured-table th:nth-child(4),
.measured-table td:nth-child(4) { width: 140px; }
.measured-table th:nth-child(5),
.measured-table td:nth-child(5) { width: 66px; }

/* Başlık sabit */
.measured-table thead th {
  position: sticky;
  top: 0;
  background: #f2f2f2;
  z-index: 2;
  font-weight: bold;
}

.measured-table td.selected {
  background-color: rgba(140, 170, 255, 0.35);  /* bir ton koyu */
  outline: none !important;
  transition: background-color 0.1s ease-in-out;
}

.measured-table td:focus {
  background-color: rgba(100, 140, 255, 0.45);  /* aktif hücre biraz daha canlı */
  outline: none !important;
  box-shadow: inset 0 0 3px rgba(50, 90, 255, 0.4); /* hafif iç parıltı */
}



/* Buton grubu */
.measured-buttons {
  margin-top: 15px;
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  width: 100%;
  justify-content: center;
}

.measured-buttons button {
  padding: 10px;
  font-size: 1.1em;
  border: none;
  height: 40px;
  border-radius: 6px;
  cursor: pointer;
  color: white;
  transition: background 0.2s ease;
}

/* Yeni comparison düğmesi */
.plotcomp-btn {
  background-color: #d10f0f;
  color: rgb(24, 23, 23);
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.05em;
  font-weight: bold;
  height: 40px;
  transition: background 0.2s ease;
}
.plotcomp-btn:hover {
  background-color: #e0851c;
}

/* Buton grubunu ortala */
.measured-buttons {
  display: flex;
  justify-content: center; /* ortala */
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
  margin-top: 20px;
}


/* Renkli butonlar */

.clear-btn    { background: #f44336; }
.clear-btn:hover { background: #d32f2f; }

.add3-btn     { background: #2196F3; }
.add3-btn:hover { background: #1976d2; }

.delete3-btn  { background: #9c27b0; }
.delete3-btn:hover { background: #7b1fa2; }

.load-btn     { background: #ff9800; }
.load-btn:hover { background: #e68900; }

.download-btn    { background: #4CAF50; }
.download-btn:hover { background: #3e9142; }

.measured-buttons button:hover {
  opacity: 0.9;
}


/* =========================== */
/* COMPARISON — Plot görünümüne uygun */
/* =========================== */

#comparison .comparison-container {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 30px;
  padding-top: 0px;
  margin-top: 20px;
  margin-left: 6px;

}

#comparison .axis-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 250px;
}

#comparison .axis-section label {
  font-weight: 600;
  font-size: 18px;
}

#comparison .axis-section select {
  width: 250px;
  height: 34px;
  font-size: 15px;
  border-radius: 6px;
  padding-left: 0px;
  margin-bottom: 12px;
}

#comparison .plot-btn {
  margin-top: 15px;
  margin-left: 60px;
  background-color: #4CAF50;
  color: white;
  padding: 8px;
  font-size: 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  width: 110px;
  height: 50px;
}
#comparison .plot-btn:hover {
  background-color: #3d8b41;
}

/* Grafik + tablo hizası */
#comparison .plot-right {
  display: flex;
  align-items: flex-start;
  gap: 25px;
  margin-top: 0px;

}

#comparison-plot {
  width: 500px;
  height: 400px;
  background: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border-radius: 6px;
  
 }

 #comparison .curve-table td:first-child {
  font-size: 18px;     /* Küçük ve eşit */
  
}

/*
#comparison .curve-settings {
  background: #fafafa;
  border: none;
  border-radius: 6px;
  padding: 10px;
}

#comparison .curve-settings table {
  border-collapse: collapse;
}

#comparison .curve-settings th,
#comparison .curve-settings td {
  border-bottom: none;
  padding: 0;
  text-align: center;
}

#comparison .curve-settings th {
  font-weight: bold;
  background-color: #f3f3f3;
}

#comparison .curve-settings input[type="color"] {
  width: 40px;
  height: 25px;
  border: none;
}

#comparison .curve-settings select,
#comparison .curve-settings input[type="text"],
#comparison .curve-settings input[type="number"] {
  width: 70px;
  text-align: center;
}
*/


/* Başlangıçta gizleme */
#comparison .graph-area,
#comparison .curve-settings,
#comparison .curve-table thead {
  visibility: hidden !important;
}

/* Görünür hale gelince */
#comparison .graph-area.show-comp,
#comparison .curve-settings.show-comp,
#comparison .curve-table.show-comp thead {
  visibility: visible !important;
}


/* =========================== */
/* COMPARISON (responsive düzenleme) */
/* =========================== */
#comparison .comparison-container {  padding-top: 0px;

  margin-top: 20;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: nowrap;
}

/* 1️⃣ Normal: 3 bölüm yan yana */
#comparison .axis-section,
#comparison .graph-area,
#comparison .curve-settings {
  flex: 0 0 auto;
}

/* 2️⃣ Ekran daraldığında (örneğin 1250px): yalnızca tablo (3. bölüm) alta iner */
@media (max-width: 1250px) {
  #comparison .comparison-container {
    flex-wrap: wrap;
  }
  #comparison .axis-section,
  #comparison .graph-area {
    flex: 0 0 auto;
  }
  #comparison .curve-settings {
    flex-basis: 100%;
    order: 3;
  }
}

/* 3️⃣ Daha da dar (örneğin 950px): grafik de alta iner */
@media (max-width: 950px) {
  #comparison .comparison-container {
    flex-direction: column;
    align-items: flex-start;
  }
  #comparison .graph-area {
    order: 2;
  }
  #comparison .curve-settings {
    order: 3;
  }
}

/* 4️⃣ Mobil görünüm */
@media (max-width: 700px) {
  #comparison .comparison-container {
    flex-direction: column;
    align-items: flex-start;
  }
}

#plotresults, #comparison, .plot-wrapper, .plot-card {border:none !important; box-shadow:none !important;}


/* =========================== */
/* FIX: HEADER OVERLAP (AUTO OFFSET) */
/* =========================== */

:root{
  --tab-offset: 100px; /* JS bunu otomatik güncelleyecek */
}

/* tüm sekmelerin header altına girmesini engelle */
.tab-content{
  margin-top: var(--tab-offset) !important;
}

/* =========================== */
/* THERMAL (Stable layout)     */
/* =========================== */

/* NOT: Header offset artık JS ile :root üzerindeki --tab-offset değişkeninden geliyor.
   Thermal sekmesinde ayrıca --tab-offset override ETMİYORUZ.
   Sadece içerideki başlangıç boşluğunu (Tab-1 ile benzer görünüm) kontrol ediyoruz. */

#thermal .thermal-container{
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 630px;

  /* ✅ Tab-1 ile aynı “nefes” boşluğu: Thermal içerik üstten biraz daha aşağı başlasın */
  margin-top: 30px;

  box-sizing: border-box;
}

/* HER SATIR: solda label (esnek), sağda input (sabit genişlik) */
#thermal .thermal-container > div{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 75pt;
  column-gap: 16px;
  align-items: center;
}

/* Label: tek satır + sığmazsa ... */
#thermal .thermal-container > div > label{
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Input: sabit 75pt */
#thermal .thermal-container > div > input{
  width: 75pt !important;
  min-width: 75pt !important;
  max-width: 75pt !important;
  box-sizing: border-box;
  text-align: center;
  justify-self: end;
}