/* ==========================================================================
   SAHA HESAP ARAÇ ÇEKİRDEĞİ
   Bütün araçların ortak görünümü. Kök: .sh (yukle.js ekler). Kurallar yalnız .sh altındadır,
   barındıran sayfanın stillerine dokunmaz. Renkler aşağıdaki --sh-* değişkenlerinden gelir:
   site kendi paletine çekmek için yalnız bu değişkenleri ezer.
   Özel araçlar da bu sınıfları kullanır (sh-kart, sh-alan, sh-girdi, sh-dugme, sh-tablo…),
   kendi stillerini araclar/<kisa>/arac.css içinde, .sh-<kisa>-… önekiyle yazar.
   Satır içi stil yok, @import yok, url() yok, dış kaynak yok.
   ========================================================================== */

.sh {
  --sh-zemin: #f4f6fa;
  --sh-kart: #ffffff;
  --sh-kart-2: #f3f6fa;
  --sh-cizgi: #d6dce6;
  --sh-metin: #17202e;
  --sh-soluk: #566274;
  --sh-vurgu: #1d4ed8;
  --sh-vurgu-koyu: #173ea8;
  --sh-vurgu-zemin: rgba(29, 78, 216, 0.08);
  --sh-vurgu-ustu: #ffffff;
  --sh-uyari: #b45309;
  --sh-uyari-zemin: rgba(217, 119, 6, 0.1);
  --sh-iyi: #15803d;
  --sh-golge: 0 1px 2px rgba(20, 30, 45, 0.06), 0 8px 22px rgba(20, 30, 45, 0.06);
  /* çizimlerde parça renkleri (kesim planı, grafik serileri) */
  --sh-renk-0: #2563eb;
  --sh-renk-1: #d97706;
  --sh-renk-2: #059669;
  --sh-renk-3: #dc2626;
  --sh-renk-4: #7c3aed;
  --sh-renk-5: #0891b2;
  --sh-renk-6: #c026d3;
  --sh-renk-7: #65a30d;
  --sh-yazi: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --sh-mono: "JetBrains Mono TR", ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, Menlo, monospace;

  display: grid;
  gap: 16px;
  min-width: 0;
  color: var(--sh-metin);
  font: 500 16px/1.45 var(--sh-yazi);
  text-align: left;
  color-scheme: light;
}
.sh[data-tema="koyu"] {
  --sh-zemin: #14171c;
  --sh-kart: #1d2128;
  --sh-kart-2: #252a33;
  --sh-cizgi: #343b47;
  --sh-metin: #eef1f5;
  --sh-soluk: #9ca6b4;
  --sh-vurgu: #5aa9ff;
  --sh-vurgu-koyu: #2f7fe0;
  --sh-vurgu-zemin: rgba(90, 169, 255, 0.14);
  --sh-vurgu-ustu: #0b1220;
  --sh-uyari: #ff9a3c;
  --sh-uyari-zemin: rgba(255, 154, 60, 0.12);
  --sh-iyi: #4ade80;
  --sh-golge: 0 10px 28px rgba(0, 0, 0, 0.28);
  --sh-renk-0: #60a5fa;
  --sh-renk-1: #fbbf24;
  --sh-renk-2: #34d399;
  --sh-renk-3: #f87171;
  --sh-renk-4: #a78bfa;
  --sh-renk-5: #22d3ee;
  --sh-renk-6: #e879f9;
  --sh-renk-7: #a3e635;
  color-scheme: dark;
}
.sh *,
.sh *::before,
.sh *::after {
  box-sizing: border-box;
}
:where(.sh) :where(p, h2, h3, ul, ol, dl, dd, figure) {
  margin: 0;
  padding: 0;
}
.sh [hidden] {
  display: none !important;
}
.sh :focus-visible {
  outline: 2px solid var(--sh-vurgu);
  outline-offset: 2px;
  border-radius: 6px;
}
.sh-gizli {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sh-yukleniyor,
.sh-bos {
  padding: 18px;
  border: 1px dashed var(--sh-cizgi);
  border-radius: 10px;
  color: var(--sh-soluk);
  font-size: 0.93rem;
}
.sh-uyari {
  padding: 12px 14px;
  border: 1px solid var(--sh-uyari);
  border-left-width: 4px;
  border-radius: 8px;
  /* zemin opak: araç koyu, sayfa açıkken de (ya da tersi) uyarı okunur kalır */
  background: linear-gradient(var(--sh-uyari-zemin), var(--sh-uyari-zemin)), var(--sh-kart);
  color: var(--sh-metin);
  font-size: 0.92rem;
}
.sh-uyari strong {
  color: var(--sh-uyari);
}

/* --- kart ve ızgara -------------------------------------------------------- */
.sh-izgara {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 16px;
  align-items: start;
}
.sh-izgara--esit {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sh-kart {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--sh-cizgi);
  border-radius: 14px;
  background: var(--sh-kart);
  box-shadow: var(--sh-golge);
}
.sh-kart--sonuc {
  border-color: var(--sh-vurgu);
  background: linear-gradient(180deg, var(--sh-vurgu-zemin), transparent 50%), var(--sh-kart);
  position: sticky;
  top: 12px;
}
.sh-kart__baslik {
  margin-bottom: 14px;
  font: 700 0.8rem/1.2 var(--sh-yazi);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sh-soluk);
}
.sh-kart--sonuc .sh-kart__baslik {
  color: var(--sh-vurgu);
}
.sh-altbaslik {
  margin: 18px 0 8px;
  font: 700 0.92rem/1.3 var(--sh-yazi);
}
.sh-kucuk {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--sh-soluk);
}
.sh-sag {
  text-align: right;
}
.sh-mono {
  font-family: var(--sh-mono);
  font-size: 0.88em;
  font-variant-numeric: tabular-nums;
}
.sh-sembol {
  margin-left: 6px;
  font: 600 0.92em var(--sh-mono);
  color: var(--sh-vurgu);
}

/* --- hesap türü sekmeleri -------------------------------------------------- */
.sh-modlar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.sh-mod {
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid var(--sh-cizgi);
  border-radius: 8px;
  background: var(--sh-kart-2);
  color: var(--sh-metin);
  font: 600 0.88rem/1.15 var(--sh-yazi);
  cursor: pointer;
}
.sh-mod:hover {
  border-color: var(--sh-vurgu);
}
.sh-mod--secili {
  border-color: var(--sh-vurgu);
  background: var(--sh-vurgu);
  color: var(--sh-vurgu-ustu);
}

/* --- form ------------------------------------------------------------------ */
.sh-alanlar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.sh-alan {
  display: grid;
  gap: 5px;
  align-content: start;
  min-width: 0;
}
.sh-alan--genis {
  grid-column: 1 / -1;
}
.sh-alan__etiket {
  font: 600 0.82rem/1.25 var(--sh-yazi);
  color: var(--sh-soluk);
}
.sh-alan__satir {
  display: flex;
  gap: 6px;
  min-width: 0;
}
.sh-alan__satir > .sh-girdi:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.sh-alan__not {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--sh-soluk);
}
.sh-girdi {
  width: 100%;
  min-height: 42px;
  padding: 8px 11px;
  border: 1px solid var(--sh-cizgi);
  border-radius: 8px;
  background: var(--sh-kart-2);
  color: var(--sh-metin);
  font: 500 1rem/1.2 var(--sh-yazi);
}
.sh-girdi--sayi {
  font-family: var(--sh-mono);
  font-size: 0.96rem;
}
.sh-girdi--birim {
  width: auto;
  max-width: 8.5em;
  flex: 0 0 auto;
  min-height: 42px;
  padding-inline: 8px;
  font-family: var(--sh-mono);
  font-size: 0.85rem;
}
.sh-girdi:hover {
  border-color: var(--sh-soluk);
}
.sh-girdi:focus {
  outline: none;
  border-color: var(--sh-vurgu);
  box-shadow: 0 0 0 3px var(--sh-vurgu-zemin);
}
.sh-birim {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--sh-cizgi);
  border-radius: 8px;
  color: var(--sh-soluk);
  font: 500 0.84rem/1 var(--sh-mono);
  white-space: nowrap;
}

/* --- düğmeler --------------------------------------------------------------- */
.sh-dugmeler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.sh-dugmeler--ara {
  justify-content: space-between;
}
.sh-dugme {
  min-height: 42px;
  padding: 9px 16px;
  border: 1px solid var(--sh-cizgi);
  border-radius: 8px;
  background: var(--sh-kart-2);
  color: var(--sh-metin);
  font: 700 0.93rem/1.1 var(--sh-yazi);
  cursor: pointer;
}
.sh-dugme:hover {
  border-color: var(--sh-vurgu);
}
.sh-dugme[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.sh-dugme--ana {
  border-color: transparent;
  background: var(--sh-vurgu);
  color: var(--sh-vurgu-ustu);
}
.sh-dugme--ana:hover {
  background: var(--sh-vurgu-koyu);
}
.sh-dugme--yazi {
  min-height: 34px;
  padding: 6px 10px;
  border-color: transparent;
  background: transparent;
  color: var(--sh-vurgu);
  font-size: 0.86rem;
}
.sh-dugme--yazi:hover {
  background: var(--sh-vurgu-zemin);
}
.sh-dugme--sil {
  color: var(--sh-uyari);
}
.sh-satirici {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 0.8rem/1.2 var(--sh-yazi);
  color: var(--sh-soluk);
}
.sh-satirici .sh-girdi {
  min-height: 34px;
  padding-block: 4px;
}

/* --- hatalar ----------------------------------------------------------------- */
.sh-hatalar {
  display: none;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--sh-uyari);
  border-left-width: 4px;
  border-radius: 8px;
  background: var(--sh-uyari-zemin);
  font-size: 0.92rem;
}
.sh-hatalar--acik {
  display: block;
}
.sh-hatalar__baslik {
  margin-bottom: 4px;
  font-weight: 700;
  color: var(--sh-uyari);
}
.sh-hatalar ul {
  padding-left: 18px;
  list-style: disc;
}

/* --- sonuç ------------------------------------------------------------------- */
.sh-ana {
  padding: 14px 16px;
  border: 1px solid var(--sh-cizgi);
  border-radius: 10px;
  background: var(--sh-kart-2);
}
.sh-ana__ad {
  font: 600 0.88rem/1.3 var(--sh-yazi);
  color: var(--sh-soluk);
}
.sh-ana__deger {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.sh-ana__sayi {
  font: 800 clamp(1.9rem, 5.4vw, 2.7rem) / 1.05 var(--sh-mono);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.sh-ana__deger--bos .sh-ana__sayi {
  color: var(--sh-soluk);
}
.sh-ana__not {
  margin-top: 6px;
  font-size: 0.84rem;
  color: var(--sh-soluk);
}
.sh-liste {
  display: grid;
  margin-top: 8px;
}
.sh-liste__satir {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--sh-cizgi);
  font-size: 0.93rem;
}
.sh-liste__satir:last-child {
  border-bottom: 0;
}
.sh-liste__satir dt {
  min-width: 0;
  color: var(--sh-soluk);
}
.sh-liste__satir dd {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: right;
}
.sh-liste__sayi {
  font: 700 0.95rem var(--sh-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sh-liste__satir .sh-girdi--birim {
  min-height: 32px;
  padding-block: 3px;
}

/* --- formül, adımlar, varsayımlar ------------------------------------------- */
.sh-formuller {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
.sh-formul {
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid var(--sh-cizgi);
  border-left: 3px solid var(--sh-vurgu);
  border-radius: 8px;
  background: var(--sh-kart-2);
}
.sh-formul figcaption {
  margin-bottom: 3px;
  font-size: 0.78rem;
  color: var(--sh-soluk);
}
.sh-formul__ifade {
  font: 600 1.02rem/1.5 var(--sh-mono);
  overflow-x: auto;
  white-space: nowrap;
}
.sh sub,
.sh sup {
  font-size: 0.72em;
  line-height: 0;
}
.sh-adim-liste,
.sh-varsayim {
  display: grid;
  gap: 5px;
  padding-left: 20px;
  font-size: 0.92rem;
}
.sh-adim-liste li {
  font-family: var(--sh-mono);
  font-size: 0.88rem;
}
.sh-varsayim {
  list-style: disc;
  color: var(--sh-soluk);
}

/* --- tablo (özel araçlar) ---------------------------------------------------- */
.sh-tablo-sarma {
  overflow-x: auto;
  border: 1px solid var(--sh-cizgi);
  border-radius: 10px;
}
.sh-tablo {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
}
.sh-tablo th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--sh-cizgi);
  background: var(--sh-kart-2);
  font: 700 0.74rem/1.2 var(--sh-yazi);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sh-soluk);
  text-align: left;
  white-space: nowrap;
}
.sh-tablo td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--sh-cizgi);
  vertical-align: middle;
}
.sh-tablo tbody tr:last-child td {
  border-bottom: 0;
}
.sh-tablo .sh-sag {
  text-align: right;
}
.sh-toplam {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.sh-toplam__kutu {
  display: grid;
  gap: 3px;
  padding: 10px 14px;
  border: 1px solid var(--sh-cizgi);
  border-radius: 10px;
  background: var(--sh-kart-2);
}
.sh-toplam__kutu span {
  font: 600 0.72rem/1.2 var(--sh-yazi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sh-soluk);
}
.sh-toplam__kutu strong {
  font: 700 1.05rem/1.2 var(--sh-mono);
}
.sh-toplam__kutu--ana {
  margin-left: auto;
  border-color: var(--sh-vurgu);
  background: var(--sh-vurgu-zemin);
}

/* --- çizim alanı (özel araçlar): mühendislik kâğıdı zemini ------------------- */
.sh-cizim {
  overflow: hidden;
  border: 1px solid var(--sh-cizgi);
  border-radius: 10px;
  background-color: var(--sh-kart-2);
  background-image: linear-gradient(var(--sh-cizgi) 1px, transparent 1px), linear-gradient(90deg, var(--sh-cizgi) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: -1px -1px;
}
.sh-cizim svg {
  display: block;
  width: 100%;
  height: auto;
}

/* --- bildirim ---------------------------------------------------------------- */
.sh-bildirim {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 50;
  transform: translate(-50%, 20px);
  max-width: min(92vw, 520px);
  margin: 0;
  padding: 11px 18px;
  border: 1px solid #1d4ed8;
  border-radius: 10px;
  background: #0f1216;
  color: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  font: 500 0.93rem/1.4 system-ui, sans-serif;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.sh-bildirim--acik {
  opacity: 1;
  transform: translate(-50%, 0);
}
.sh-bildirim--uyari {
  border-color: #d97706;
}

/* --- dar ekran --------------------------------------------------------------- */
@media (max-width: 860px) {
  .sh-izgara,
  .sh-izgara--esit {
    grid-template-columns: minmax(0, 1fr);
  }
  .sh-kart--sonuc {
    position: static;
  }
}
@media (max-width: 520px) {
  .sh {
    gap: 12px;
  }
  .sh-kart {
    padding: 14px;
    border-radius: 12px;
  }
  .sh-alanlar {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sh *,
  .sh-bildirim {
    animation: none !important;
    transition: none !important;
  }
}
@media print {
  .sh-dugmeler,
  .sh-bildirim {
    display: none !important;
  }
  .sh-kart {
    box-shadow: none;
    break-inside: avoid;
  }
}

/* --- yazdırma föyü (arayuz.js: yazdir) -------------------------------------- */
.sh-foy {
  display: none;
}
@media print {
  html.sh-yazdir,
  html.sh-yazdir body {
    background: #fff !important;
    background-image: none !important;
    color: #111 !important;
    min-height: 0 !important;
    display: block !important;
  }
  html.sh-yazdir body > :not(.sh-foy) {
    display: none !important;
  }
  html.sh-yazdir .sh-foy {
    display: block;
    color: #111;
    font: 500 10.5pt/1.4 "Inter", "Segoe UI", system-ui, Arial, sans-serif;
  }
}