/* Simpleks Çözücü — arayüz stilleri */

:root {
  --zemin: #eef1f6;
  --kart: #ffffff;
  --metin: #17202e;
  --soluk: #64748b;
  --cizgi: #dde3ec;
  --vurgu: #4338ca;
  --vurgu-acik: #eef0ff;
  --koyu: #1c2333;
  --koyu-2: #262f42;
  --tus: #333d54;
  --tus-ust: #414d68;
  --yesil: #047857;
  --yesil-zemin: #e7f6f0;
  --kirmizi: #b91c1c;
  --kirmizi-zemin: #fdeaea;
  --sari: #92600b;
  --sari-zemin: #fdf3e0;
  --golge: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .07);
  --yuvarlak: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

button, select { touch-action: manipulation; }

.alt-bilgi {
  max-width: 1320px; margin: 8px auto 32px; padding: 16px 24px 0;
  border-top: 1px solid var(--cizgi);
  font-size: 12.5px; color: var(--soluk); text-align: center;
}
.alt-bilgi p { margin: 0; }

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; }

/* ---------- üst şerit ---------- */
.ust {
  background: var(--koyu);
  color: #fff;
  padding: 18px 0;
  border-bottom: 1px solid #0f1420;
}
.ust-ic {
  max-width: 1320px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.marka { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.logo {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(140deg, #6366f1, #4338ca);
  display: grid; place-items: center; font-size: 24px; font-weight: 700;
}
.ust h1 { font-size: 19px; }
.ust p { margin: 2px 0 0; font-size: 13px; color: #9fabc4; }
.ust-sag { display: flex; gap: 18px; }
.anahtar { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #c6cfe0; cursor: pointer; user-select: none; }
.anahtar input { accent-color: #818cf8; width: 16px; height: 16px; cursor: pointer; }

/* ---------- yerleşim ---------- */
.duzen {
  max-width: 1220px; margin: 24px auto; padding: 0 24px;
  display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 22px; align-items: start;
}

.kart {
  background: var(--kart); border-radius: var(--yuvarlak);
  box-shadow: var(--golge); overflow: hidden;
}
.kart-baslik {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--cizgi);
}
.kart-baslik h2 { font-size: 15px; }
.kart-baslik.koyu { background: var(--koyu-2); color: #fff; border-bottom-color: #0f1420; }
.ipucu { font-size: 12.5px; color: var(--soluk); }

/* ---------- model satırları ---------- */
.satirlar { padding: 8px; min-height: 120px; }

.satir {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 10px; cursor: pointer;
  border: 1.5px solid transparent; transition: background .12s, border-color .12s;
}
.satir.aktif { background: var(--vurgu-acik); border-color: #c7cbfb; }

.satir-etiket {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--soluk); min-width: 74px;
}
.satir.aktif .satir-etiket { color: var(--vurgu); }

.yon-secim { display: flex; background: #e8ecf3; border-radius: 8px; padding: 2px; }
.yon-secim button {
  border: 0; background: transparent; padding: 4px 12px; border-radius: 6px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--soluk); cursor: pointer;
}
.yon-secim button.secili { background: #fff; color: var(--vurgu); box-shadow: 0 1px 2px rgba(0,0,0,.12); }

.satir-metin {
  flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 16px; letter-spacing: .01em; overflow-x: auto; white-space: nowrap;
  padding: 2px 0; scrollbar-width: thin;
}
.satir.aktif .satir-metin { cursor: text; }
.satir-metin .bos { color: #a6b0c2; font-style: italic; letter-spacing: 0; }

/* imleç: hem model satırında hem önizleme şeridinde kullanılır */
.imlec {
  display: inline-block; width: 2px; height: 1.05em; background: var(--vurgu);
  vertical-align: -.18em; margin: 0 1px; animation: yanip 1.05s steps(2, start) infinite;
}
@keyframes yanip { to { visibility: hidden; } }

.satir-sil {
  flex: 0 0 auto; border: 0; background: transparent; color: #b6bfd0;
  font-size: 17px; line-height: 1; cursor: pointer; padding: 4px 6px; border-radius: 6px;
}

.satir-uyari { font-size: 11.5px; color: var(--sari); white-space: nowrap; }

.model-alt {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 20px; border-top: 1px solid var(--cizgi); background: #fafbfd;
}
.alt-satir { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.ornek-kutu { border-top: 1px solid var(--cizgi); padding-top: 10px; }
.ornek-kutu > summary {
  cursor: pointer; font-size: 12.5px; color: var(--soluk); font-weight: 600;
  list-style: none; display: flex; align-items: center; gap: 8px; padding: 2px 0;
}
.ornek-kutu > summary::-webkit-details-marker { display: none; }
.ornek-kutu > summary::before { content: "▸"; font-size: 10px; }
.ornek-kutu[open] > summary::before { content: "▾"; }
.ornek-kutu > summary .sayi {
  background: #e8ecf3; color: var(--soluk); border-radius: 20px;
  padding: 1px 8px; font-size: 11.5px;
}
.ornek-satiri {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 9px;
}
.ornek-etiket {
  font-size: 11px; color: var(--soluk); text-transform: uppercase;
  letter-spacing: .05em; font-weight: 650; flex: 0 0 auto;
}
/* Kaynak sitenin bağlantısı; imleç üzerinde beklerken title ipucu çıkar. */
.ahm-bag {
  color: inherit; text-decoration: none;
  border-bottom: 1px dotted currentColor; cursor: pointer;
}

.cip {
  border: 1px solid var(--cizgi); background: #fff; color: var(--metin);
  padding: 6px 12px; border-radius: 20px; font: inherit; font-size: 12.5px;
  cursor: pointer; transition: background .12s, border-color .12s;
}
.cip.secili { background: var(--vurgu-acik); border-color: #a5abf7; color: var(--vurgu); font-weight: 650; }

/* ---------- düğmeler ---------- */
.dugme {
  border: 1px solid var(--cizgi); background: #fff; color: var(--metin);
  padding: 8px 14px; border-radius: 9px; font: inherit; font-size: 13.5px; font-weight: 550;
  cursor: pointer; transition: background .12s, border-color .12s;
}
.dugme.birincil { background: var(--vurgu); border-color: var(--vurgu); color: #fff; }
.dugme:disabled { opacity: .5; cursor: not-allowed; }
.dugme.tehlike { color: var(--kirmizi); }
select.dugme { padding-right: 8px; }

/* ---------- metin modu ---------- */
.metin-alan { padding: 16px 20px; border-top: 1px solid var(--cizgi); }
.metin-alan .ayar-grup { margin-bottom: 12px; }
.metin-alan .alt-satir { margin-top: 10px; }
#gruplandirmaSinifTablo .hucre { border-color: #e3e6ee; }
#gruplandirmaSinifTablo .hucre::placeholder { color: #b6bfd0; }
.metin-alan textarea {
  width: 100%; border: 1px solid var(--cizgi); border-radius: 10px; padding: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; resize: vertical;
}
.metin-alan textarea:focus { outline: 2px solid #c7cbfb; border-color: var(--vurgu); }
.metin-alan input[type="text"] {
  width: 100%; border: 1px solid var(--cizgi); border-radius: 10px; padding: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px;
}
.metin-alan input[type="text"]:focus { outline: 2px solid #c7cbfb; border-color: var(--vurgu); }
.metin-dugmeler { display: flex; gap: 10px; margin-top: 10px; }

/* ---------- tuş takımı ---------- */
.tus-kart { background: var(--koyu); }
.degisken-sayaci { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #b9c3d6; }
.degisken-sayaci span { font-weight: 700; color: #fff; }
.mini {
  width: 24px; height: 24px; border-radius: 7px; border: 1px solid #46536e;
  background: #33405c; color: #fff; font-size: 15px; line-height: 1; cursor: pointer;
}

.tus-govde { padding: 16px; display: flex; flex-direction: column; gap: 16px; }

/* düzenlenen satırın tuşların hemen üstündeki önizlemesi (mobil) */
.onizleme { display: none; }
.onizleme-etiket {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: #8b98b3; font-weight: 700; white-space: nowrap; flex: 0 0 auto;
}
.onizleme-metin {
  flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 17px; color: #fff; scrollbar-width: none;
}
.onizleme-metin::-webkit-scrollbar { display: none; }
.onizleme-metin .bos { color: #6b7893; font-style: italic; font-family: inherit; font-size: 13px; }
.onizleme .imlec { background: #a5b4fc; }
.onizleme-uyari {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 650; color: #fca5a5;
  background: #4a2530; padding: 3px 8px; border-radius: 20px; white-space: nowrap;
}
.grup-ad {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: #7f8ca6; margin-bottom: 8px; font-weight: 650;
}
.tus-alt { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.degisken-tuslari {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  max-height: 168px; overflow-y: auto;
}

.tus, .degisken-tus {
  border: 0; border-radius: 11px; background: var(--tus); color: #fff;
  font: inherit; font-size: 17px; font-weight: 600; padding: 13px 0;
  cursor: pointer; box-shadow: inset 0 -2px 0 rgba(0,0,0,.28);
  transition: background .1s, transform .06s;
}
.tus:active, .degisken-tus:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 rgba(0,0,0,.28); }

.degisken-tus { font-size: 15px; padding: 11px 0; background: #3b4a68; }

.izgara-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tus.kesir { background: #45507a; }
.tus.islem { background: #45507a; }
.tus.iliski { background: #2f5a63; font-size: 18px; }
.tus.duzelt { background: #55344a; font-size: 15px; }
.tus.ok { background: #3d4661; font-size: 13px; }

.coz-dugme {
  width: 100%; border: 0; border-radius: 12px; padding: 16px;
  background: linear-gradient(140deg, #6366f1, #4338ca); color: #fff;
  font: inherit; font-size: 16px; font-weight: 700; letter-spacing: .06em;
  cursor: pointer; box-shadow: 0 6px 18px rgba(67, 56, 202, .38);
}
.coz-dugme:active { transform: translateY(1px); }

.klavye-ipucu { margin: 0; font-size: 11.5px; color: #7f8ca6; text-align: center; line-height: 1.7; }
kbd {
  background: #33405c; border-radius: 5px; padding: 1px 5px;
  font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: #d3dbe9;
}

/* ---------- sonuç ---------- */
.sonuc-alan { max-width: 1320px; margin: 0 auto 48px; padding: 0 24px; display: grid; gap: 20px; }

.durum-serit {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 20px; border-radius: var(--yuvarlak); box-shadow: var(--golge);
  background: var(--kart); border-left: 5px solid var(--soluk);
}
.durum-serit.optimal { border-left-color: var(--yesil); background: var(--yesil-zemin); }
.durum-serit.hata { border-left-color: var(--kirmizi); background: var(--kirmizi-zemin); }
.durum-serit.uyari { border-left-color: var(--sari); background: var(--sari-zemin); }
.durum-serit h2 { font-size: 16px; }
.durum-serit p { margin: 0; font-size: 13.5px; color: #44506a; }

.z-kutu {
  margin-left: auto; text-align: right; font-family: ui-monospace, Menlo, monospace;
}
.z-kutu .etiket { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--soluk); font-family: inherit; }
.z-kutu .deger { font-size: 26px; font-weight: 700; color: var(--yesil); }
/* Sayi, seridin durumunu izlemeli: uyari/hata seridinde yesil bir sayi yanlis
   sinyal veriyordu (AHP'de "tutarsiz", VZA'da "etkin degil" seritlerinde). */
.durum-serit.uyari .z-kutu .deger { color: #9a6b08; }
.durum-serit.hata .z-kutu .deger { color: var(--kirmizi); }
.z-kutu .alt { font-size: 12.5px; color: var(--soluk); }

/* Kısa özet hesap kutusu: EVPI/EVSI gibi birkaç satırlık ara değer +
   sonuç zinciri (Risk Altında Karar Verme, Karar Ağaçları). */
.hesap { padding: 4px 20px 18px; display: flex; flex-direction: column; gap: 2px; }
.hesap .satir {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; padding: 6px 0; font-size: 13.5px; cursor: default;
  border-radius: 0;
}
.hesap .satir span { color: #44506a; }
.hesap .satir b { font-family: ui-monospace, Menlo, monospace; font-weight: 700; }
.hesap .cizgi { border-top: 1px solid var(--cizgi); margin: 4px 0; }
.hesap .satir.sonuc { font-size: 14.5px; }
.hesap .satir.sonuc span, .hesap .satir.sonuc b { color: var(--vurgu); font-weight: 700; }

.cozum-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 18px 20px; }
.cozum-kutu { border: 1px solid var(--cizgi); border-radius: 10px; padding: 10px 12px; background: #fbfcfe; }
.cozum-kutu.karar { border-color: #c7cbfb; background: var(--vurgu-acik); }
.cozum-kutu .ad { font-weight: 700; font-size: 13px; color: var(--vurgu); }
.cozum-kutu .kesir { font-family: ui-monospace, Menlo, monospace; font-size: 15px; margin-top: 2px; }
.cozum-kutu .ondalik { font-size: 12px; color: var(--soluk); font-family: ui-monospace, Menlo, monospace; }
.cozum-kutu.sifir { opacity: .55; }
.cozum-kutu.sifir .ad { color: var(--soluk); }

/* grafik kartı */
.grafik-kutu { padding: 10px 16px 0; }
/* SVG kart genişliğine yayılınca (~1240 px) yükseklik 830 pikseli buluyor ve
   grafiğin tamamını görmek için sayfayı kaydırmak gerekiyordu. Üst sınır
   koyulup çizim ortalanır; dar ekranda yine %100'e düşer. */
.grafik-kutu svg {
  display: block; width: 100%; height: auto; max-width: 820px; margin: 0 auto;
}
.grafik-not {
  margin: 0; padding: 10px 20px 18px; font-size: 12.5px;
  color: var(--soluk); line-height: 1.6;
}

.bilgi-notu {
  margin: 0; padding: 12px 20px; background: var(--vurgu-acik);
  border-bottom: 1px solid #d6daf9; font-size: 13px; line-height: 1.65; color: #3d4170;
}
.bilgi-notu b { color: var(--vurgu); }
.bilgi-notu code {
  background: #fff; border: 1px solid #d6daf9; border-radius: 5px; padding: 0 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
}

.adim-listesi { display: grid; gap: 10px; padding: 4px 20px 20px; }
details.adim {
  border: 1px solid var(--cizgi); border-radius: 11px; background: #fff; overflow: hidden;
}
details.adim > summary {
  padding: 12px 16px; cursor: pointer; display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; font-size: 13.5px; list-style: none; background: #fafbfd;
}
details.adim > summary::-webkit-details-marker { display: none; }
details.adim > summary::before { content: "▸"; color: var(--soluk); font-size: 11px; }
details.adim[open] > summary::before { content: "▾"; }
details.adim[open] > summary { border-bottom: 1px solid var(--cizgi); }
.adim-ad { font-weight: 650; }
.rozet {
  font-size: 11.5px; padding: 2px 9px; border-radius: 20px; font-weight: 600;
  font-family: ui-monospace, Menlo, monospace;
}
.rozet.giren { background: var(--yesil-zemin); color: var(--yesil); }
.rozet.cikan { background: var(--kirmizi-zemin); color: var(--kirmizi); }
.rozet.son { background: var(--vurgu-acik); color: var(--vurgu); }

/* tablo başlığının sağ ucundaki "HTML kodu al" düğmesi */
.html-al {
  margin-left: auto; flex: 0 0 auto;
  border: 1px solid var(--cizgi); background: #fff; color: var(--soluk);
  padding: 4px 10px; border-radius: 7px; font: inherit; font-size: 11.5px;
  font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.html-al.tamam { background: var(--yesil-zemin); border-color: #b6e2d3; color: var(--yesil); }

/* pano API'si yoksa açılan elle kopyalama penceresi */
/* Sayfa içi pencere (modal) — hem elle kopyalama hem yöntem açıklamaları. */
.katman {
  position: fixed; inset: 0; background: rgba(16, 24, 40, .55);
  display: grid; place-items: center; padding: 20px; z-index: 60;
}
.katman-kutu {
  background: var(--kart); border-radius: var(--yuvarlak); box-shadow: var(--golge);
  width: min(680px, 100%); max-height: 86vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.katman-baslik {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--cizgi); flex: none;
}
.katman-baslik h3 { font-size: 15px; margin: 0; }
.katman-kapat {
  border: 0; background: transparent; color: var(--soluk); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 6px 8px; border-radius: 8px;
}
/* Gövde kaydırılır; uzun açıklamalar mobilde de okunabilsin. */
.katman-govde {
  padding: 18px 20px 20px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
}
.katman-govde p { margin: 0; font-size: 13.5px; color: #46506b; line-height: 1.7; }
.katman-govde textarea {
  flex: 1; min-height: 220px; border: 1px solid var(--cizgi); border-radius: 10px;
  padding: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; resize: vertical;
}

/* ---------- tablo ---------- */
.tablo-sar { overflow-x: auto; }
table.simpleks {
  border-collapse: separate; border-spacing: 0; font-size: 12.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; width: max-content; min-width: 100%;
}
table.simpleks th, table.simpleks td {
  padding: 6px 10px; text-align: right; white-space: nowrap; border-bottom: 1px solid #eef1f6;
}
table.simpleks thead th {
  position: sticky; top: 0; background: #f3f5f9; text-align: right;
  font-weight: 650; color: #44506a; border-bottom: 1px solid var(--cizgi); z-index: 2;
}
table.simpleks th.satir-basi, table.simpleks td.satir-basi {
  position: sticky; left: 0; background: #fff; text-align: left;
  font-weight: 650; z-index: 1; border-right: 1px solid var(--cizgi);
}
table.simpleks thead th.satir-basi { background: #f3f5f9; z-index: 3; }
table.simpleks tr.cj td, table.simpleks tr.cj th { background: #f8f9fc; color: #44506a; }
table.simpleks tr.zj td, table.simpleks tr.cjzj td,
table.simpleks tr.zj th, table.simpleks tr.cjzj th { background: #f8f9fc; font-weight: 600; }
table.simpleks tr.zj td, table.simpleks tr.zj th { border-top: 2px solid var(--cizgi); }
table.simpleks td.sifir { color: #c2cad8; }
table.simpleks td.pivot-sutun { background: #eef7f3; }
table.simpleks tr.pivot-satir td, table.simpleks tr.pivot-satir th.satir-basi { background: #fdf3e0; }
table.simpleks td.pivot { background: #4338ca; color: #fff; font-weight: 700; }
table.simpleks th.pivot-basi { background: #e7f6f0; color: var(--yesil); }
table.simpleks tr.yapay th.satir-basi { color: var(--kirmizi); }

.oran-satiri { padding: 10px 16px; font-size: 12.5px; color: var(--soluk); background: #fafbfd; border-top: 1px solid var(--cizgi); }
.oran-satiri b { color: var(--metin); font-family: ui-monospace, Menlo, monospace; }

.mesaj-listesi { margin: 0; padding: 0 20px 18px; list-style: none; display: grid; gap: 8px; }
.mesaj-listesi li {
  padding: 10px 14px; border-radius: 9px; background: var(--sari-zemin);
  color: var(--sari); font-size: 13.5px;
}

.gizli { display: none !important; }

.yukleniyor {
  position: fixed; inset: 0; background: rgba(238, 241, 246, .82); backdrop-filter: blur(2px);
  display: grid; place-content: center; justify-items: center; gap: 14px;
  font-size: 14px; color: var(--soluk); z-index: 50;
}
.donen {
  width: 34px; height: 34px; border: 3px solid #cfd6e4; border-top-color: var(--vurgu);
  border-radius: 50%; animation: don .8s linear infinite;
}
@keyframes don { to { transform: rotate(360deg); } }

/* ================================================================
   DUYARLI YERLEŞİM
   ================================================================ */

/* --- dar masaüstü / tablet: her şey alt alta --- */
@media (max-width: 1100px) {
  .duzen { grid-template-columns: 1fr; }
  .tus-kart { max-width: 560px; width: 100%; }
}

/* --- telefon --- */
@media (max-width: 760px) {
  .ust { padding: 13px 0; }
  .ust-ic { padding: 0 14px; gap: 10px; }
  .logo { width: 38px; height: 38px; font-size: 21px; border-radius: 10px; }
  .ust h1 { font-size: 16.5px; }
  .ust p { font-size: 11.5px; }
  .ust-sag { width: 100%; gap: 16px; }

  .duzen { margin: 14px auto; padding: 0 12px; gap: 14px; }
  .tus-kart { max-width: none; }
  .sonuc-alan { margin-bottom: 32px; padding: 0 12px; gap: 14px; }
  .kart-baslik { padding: 13px 15px; }
  .kart-baslik h2 { font-size: 14.5px; }

  /* Satır: etiket + Max/Min üstte, ifade tam genişlikte altta.
     Liste kaydırılmaz — model bütün hâlinde alt alta görünür; düzenlenen satır
     zaten tuşların üstündeki önizleme şeridinde duruyor. */
  .satirlar { padding: 5px; min-height: 0; }
  .satir { flex-wrap: wrap; gap: 3px 8px; padding: 7px 10px; }
  .satir-etiket { min-width: 0; font-size: 10px; line-height: 1.3; }
  .satir-metin { flex-basis: 100%; order: 5; font-size: 17px; line-height: 1.3; padding: 0; }
  /* Uyarı önizleme şeridinde zaten var; burada görünseydi satır yüksekliğini
     değiştirip altındaki tuş takımını oynatırdı. */
  .satir-uyari { display: none; }
  .satir-sil { margin-left: auto; font-size: 19px; padding: 0 6px; }
  .yon-secim button { padding: 3px 11px; }

  .model-alt { padding: 12px 14px; gap: 8px; }
  .dugme { padding: 9px 12px; font-size: 13px; }
  .ornek-satiri { gap: 5px; margin-top: 8px; }
  .cip { padding: 6px 10px; font-size: 12px; }
  .ornek-etiket { flex-basis: 100%; margin-bottom: -2px; }
  .metin-alan { padding: 14px; }

  /* tuş takımı: dokunma hedefi ~44 px'te tutulur, fazlası yer israfı */
  .tus-govde { padding: 12px; gap: 12px; }
  .grup-ad { font-size: 10.5px; margin-bottom: 6px; }

  /* düzenlenen satır tuşların hemen üstünde görünsün */
  .onizleme {
    display: flex; align-items: center; gap: 10px;
    background: #161d2c; border: 1px solid #38445f; border-radius: 10px;
    padding: 9px 12px; min-height: 42px;
  }
  .tus-alt { grid-template-columns: 1.15fr 1fr; gap: 9px; }
  .izgara-3, .degisken-tuslari { gap: 6px; }
  .tus { padding: 10px 0; font-size: 16.5px; border-radius: 10px; }
  .tus.iliski { font-size: 17px; }
  .tus.ok { font-size: 12px; }
  .degisken-tus { padding: 10px 0; font-size: 14.5px; border-radius: 10px; }
  .degisken-tuslari { max-height: 150px; }
  .coz-dugme { padding: 14px; font-size: 16px; border-radius: 11px; }
  .klavye-ipucu { display: none; }

  /* seçenek anahtarları ÇÖZ tuşunun altına taşınır */
  #seceneklerMobil:not(:empty) { border-top: 1px solid #313c54; padding-top: 14px; }
  #seceneklerMobil .ust-sag { width: 100%; justify-content: center; gap: 22px; }
  #seceneklerMobil .anahtar { font-size: 14px; }
  #seceneklerMobil .anahtar input { width: 18px; height: 18px; }

  /* sonuç */
  .durum-serit { padding: 14px 15px; gap: 10px; }
  .durum-serit h2 { font-size: 15px; }
  .z-kutu { margin-left: 0; text-align: left; flex-basis: 100%; }
  .z-kutu .deger { font-size: 22px; }
  .cozum-izgara {
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    padding: 14px; gap: 8px;
  }
  .cozum-kutu { padding: 8px 10px; }
  .bilgi-notu { padding: 12px 14px; font-size: 12.5px; }
  .adim-listesi { padding: 4px 14px 14px; }
  details.adim > summary { padding: 11px 13px; gap: 8px; font-size: 13px; }
  .html-al { padding: 4px 8px; font-size: 11px; }
  .katman { padding: 10px; }
  .katman-baslik { padding: 13px 15px; }
  .katman-govde { padding: 14px 15px 16px; }
  .katman-govde textarea { min-height: 180px; font-size: 12px; }
  .mesaj-listesi { padding: 0 14px 14px; }

  table.simpleks { font-size: 11.5px; }
  table.simpleks th, table.simpleks td { padding: 5px 7px; }
}

/* --- küçük telefon --- */
@media (max-width: 420px) {
  /* Bloklar yan yana kalır (alt alta koymak tuş takımını iki katına çıkarıyordu);
     iki blok da 3 sütun olduğu için eşit paylaşmaları yeterli. */
  .tus-alt { grid-template-columns: 1fr 1fr; gap: 8px; }
  .izgara-3, .degisken-tuslari { gap: 5px; }
  .degisken-tuslari { grid-template-columns: repeat(3, 1fr); max-height: 170px; }
  .ust-sag { flex-wrap: wrap; gap: 10px 16px; }
  .satir-metin { font-size: 16px; }
}

/* --- çok dar ekran (≤360 px) --- */
@media (max-width: 360px) {
  .duzen, .sonuc-alan { padding: 0 8px; }
  .tus-govde { padding: 10px; }
  .tus { font-size: 15.5px; }
}


/* ================================================================
   MENÜ — yöntemler arası gezinme
   ================================================================ */
.menu { border-top: 1px solid #2b3348; background: #161c2a; }
.menu-ic {
  max-width: 1220px; margin: 0 auto; padding: 8px 24px;
  display: flex; align-items: center; gap: 8px;
  overflow-x: auto; scrollbar-width: none;   /* telefonda yatay kaydırılır */
}
.menu-ic::-webkit-scrollbar { display: none; }
.menu-aile { text-decoration: none;
  flex: 0 0 auto; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .07em; color: #6f7c96; font-weight: 700; padding: 0 4px 0 10px;
}
.menu-aile:first-child { padding-left: 0; }
.menu-aile.secili { color: #fff; }
.menu-bag {
  flex: 0 0 auto; padding: 6px 13px; border-radius: 20px; font-size: 13px;
  color: #c6cfe0; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent;
}
.menu-bag.secili { background: #3730a3; color: #fff; font-weight: 600; }
.menu-bag.yakinda { color: #5d6a7a; opacity: .5; cursor: default; }

/* ================================================================
   GİRİŞ ve AİLE SAYFALARI
   ================================================================ */
.giris { max-width: 1220px; margin: 26px auto 60px; padding: 0 24px; }
.giris-ozet { margin: 0 0 24px; font-size: 15px; color: var(--soluk); line-height: 1.7; }
.giris-ozet b { color: var(--metin); }

.hata-404 {
  min-height: 46vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; gap: 12px; padding: 60px 20px;
}
.hata-404-simge { font-size: 52px; line-height: 1; }
.hata-404 h1 { font-size: 32px; margin: 4px 0 0; }
.hata-404 p { margin: 0; max-width: 30rem; font-size: 15px; color: var(--soluk); line-height: 1.6; }
.hata-404-don {
  margin-top: 10px; color: var(--vurgu); font-weight: 650; font-size: 14px;
  text-decoration: none;
}
.hata-404-don:hover { text-decoration: underline; }

/* --- aile kartları (giriş sayfası) --- */
.aile-izgara {
  display: grid; gap: 18px; align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.aile-kart {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--kart); border-radius: var(--yuvarlak); box-shadow: var(--golge);
  padding: 22px; text-decoration: none; color: inherit;
  border: 1.5px solid transparent; transition: border-color .14s, transform .14s;
}
.aile-simge {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--vurgu-acik); color: var(--vurgu); font-size: 23px; font-weight: 700;
}
.aile-simge.buyuk { width: 56px; height: 56px; font-size: 28px; border-radius: 14px; }
.aile-kart h2 { font-size: 17px; }
.aile-ozet { margin: 0; font-size: 13.5px; color: var(--soluk); line-height: 1.6; }
.aile-ok {
  margin-top: auto; padding-top: 8px;
  font-size: 13px; font-weight: 650; color: var(--vurgu);
}

/* --- aile sayfası başlığı ve iz sürü --- */
.izsuru {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--soluk); margin-bottom: 16px;
}
.izsuru a { color: var(--vurgu); text-decoration: none; font-weight: 600; }
.izsuru .simdiki { color: var(--metin); font-weight: 600; }

.aile-baslik { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.aile-baslik h1 { font-size: 22px; margin-bottom: 4px; }
.aile-baslik p { margin: 0; font-size: 14px; color: var(--soluk); line-height: 1.6; }

/* --- yöntem kartları (aile sayfası) --- */
.kart-izgara {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.yontem-kart {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--kart); border-radius: var(--yuvarlak); box-shadow: var(--golge);
  padding: 20px; text-decoration: none; color: inherit;
  border: 1.5px solid transparent; transition: border-color .14s, transform .14s;
}
.kart-simge {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: var(--vurgu-acik); color: var(--vurgu); font-size: 20px; font-weight: 700;
}
.yontem-kart h3 { font-size: 16px; }
.yontem-kart p { margin: 0; font-size: 13.5px; color: var(--soluk); line-height: 1.6; }
.kart-ok { font-size: 13px; font-weight: 650; color: var(--vurgu); margin-top: auto; }

/* ================================================================
   SAYFA NOTU ve YÖNLENDİRME
   ================================================================ */
.sayfa-not {
  max-width: 1220px; margin: 20px auto -4px; padding: 0 24px;
  font-size: 13.5px; color: var(--soluk); line-height: 1.7;
}
.sayfa-not a { color: var(--vurgu); font-weight: 600; }
.yonlendirme {
  background: var(--vurgu-acik); border-radius: var(--yuvarlak);
  padding: 14px 20px; font-size: 13.5px; color: #3d4170;
  border-left: 5px solid var(--vurgu);
}
.yonlendirme a { color: var(--vurgu); font-weight: 650; }

/* ================================================================
   KÖŞE / Z TABLOSU (grafik yöntemi)
   ================================================================ */
table.kose-tablo {
  width: 100%; border-collapse: collapse; font-size: 13.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
table.kose-tablo th, table.kose-tablo td {
  padding: 8px 20px; text-align: left; border-bottom: 1px solid #eef1f6;
  white-space: nowrap;
}
table.kose-tablo thead th {
  background: #f3f5f9; color: #44506a; font-weight: 650; font-size: 12px;
}
/* ================================================================
   Basit Seri — olcu tablolari, denetim satiri, siklik cubugu
   ================================================================ */

/* Sayi sutunlari: sagda hizali ve tabular-nums. Ilk surumde hepsi sola
   hizaliydi ve basamaklar birbirini tutmuyordu. */
table.olcu-tablo td.sayi, table.olcu-tablo th.sayi {
  text-align: right; font-variant-numeric: tabular-nums;
}
table.olcu-tablo tbody tr.vurgu-satir { background: #eef2ff; }
table.olcu-tablo tbody tr.vurgu-satir td { font-weight: 600; }

/* Siralanmis seri tablosu: konum formulunun isaret ettigi gozlem(ler)
   vurgulanir — konum tam sayi degilse KOMSU IKI gozlem birden. */
table.seri-tablo td.vurgu { background: #eef2ff; font-weight: 700; }
table.seri-tablo td.konum-etiket {
  font-size: 11px; color: #4338ca; text-align: center; padding-top: 0;
}

/* Olculer arasindaki iliskiyi (H<=G<=x̄<=K, Σ sapma = 0) ekranda dogrulayan
   serit. Yesil = saglaniyor, kirmizi = saglanmiyor ya da tanimsiz. */
.denetim-satiri {
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
  margin: 10px 0 4px; padding: 9px 13px; border-radius: 9px;
  border: 1px solid transparent; font-size: 13.5px;
}
.denetim-satiri.tamam { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.denetim-satiri.bozuk { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.denetim-satiri span { font-size: 12.5px; opacity: .85; }

/* Siklik dagilimi cubugu — modun NEDEN o deger oldugu goze gorunsun diye. */
/* DIKKAT: sinif adi ".cubuk-hucre" DEGIL — o ad zaten AHP, TOPSIS, VIKOR ve
   agirlik sayfalarinda kullaniliyor ve 760 px altinda gizleniyor (satir
   ~1104). Once o ad secilmisti; hem buradaki cubuk mobilde hic gorunmedi
   hem de "td.cubuk-hucre" kurali (daha ozgul oldugu icin) o bes sayfanin
   hucrelerini daraltiyordu.
   Cubuk genisligi JS'te piksel olarak verilir (bkz. basit_merkezi.js
   CUBUK_EN); burada yalnizca hucrenin daralmamasi saglanir. */
td.siklik-hucre { width: 1%; white-space: nowrap; padding-right: 14px; }
.siklik-cubuk {
  display: block; height: 9px; border-radius: 5px; background: #818cf8; min-width: 3px;
}
tr.vurgu-satir .siklik-cubuk { background: #4338ca; }

/* Hesaplanamayan olcu: uydurma sayi yerine sebep (bkz. basit_seri.py). */
.olcu-yok { color: #6b7280; }
.olcu-yok small { font-size: 11.5px; }

/* Bolum altindaki formul serdi. Ilk surumde sayfanin en altinda tek bir
   buyuk liste vardi; bolumlere ayrilinca formul ait oldugu tablonun altina
   tasindi. */
.formul-serit { margin-top: 14px; }
.formul-serit .formul { margin: 6px 0; }

@media (max-width: 620px) {
  /* Dar ekranda cubuk sutunu once daralir, sigmazsa kalkar — sayi
     sutunlari (Deger, Siklik) her zaman kalir. */
  td.siklik-hucre { padding-right: 8px; }
  .denetim-satiri { font-size: 12.5px; padding: 8px 11px; }
}

/* Basit Seri olcu tablolarinin "Formul" sutunu. Formuller UC yerde durur:
   burada (degerin yaninda), sonuc altindaki "Hesaplama formulleri" bolumunde
   ve "?" penceresinde. Dar ekranda UC sutun sigmiyor ve tasan sutun tam da
   en gerekli olan "Deger" oluyordu — bu yuzden 620 px altinda YALNIZCA bu
   sutun gizlenir. Bilgi kaybolmaz: formul bolumu her genislikte gorunur.
   (Kural 2: kirilma davranisi sinifin hemen altina yazilir.) */
td.formul-hucre, th.formul-hucre { color: var(--soluk, #6b7280); white-space: nowrap; }
@media (max-width: 620px) {
  /* YALNIZCA .formul-hucre sinifli hucreler. Once nth-child(2) yazilmisti;
     o secici BUTUN .kose-tablo tablolarinin ikinci sutununu gizlerdi
     (Gruplandirilmis Seri dahil) — sinifa baglamak sart. */
  table.kose-tablo td.formul-hucre,
  table.kose-tablo th.formul-hucre { display: none; }
}

table.kose-tablo tr.optimal td {
  background: var(--vurgu-acik); color: var(--vurgu); font-weight: 700;
}

@media (max-width: 760px) {
  .menu-ic { padding: 7px 12px; }
  .giris { margin: 18px auto 40px; padding: 0 12px; }
  .giris-ozet { font-size: 14px; margin-bottom: 20px; }
  .hata-404 { min-height: 38vh; padding: 40px 16px; }
  .hata-404-simge { font-size: 42px; }
  .hata-404 h1 { font-size: 24px; }
  .hata-404 p { font-size: 14px; }
  .aile-izgara, .kart-izgara { grid-template-columns: 1fr; gap: 12px; }
  .aile-kart, .yontem-kart { padding: 16px; }
  .aile-simge { width: 40px; height: 40px; font-size: 20px; }
  .aile-simge.buyuk { width: 46px; height: 46px; font-size: 23px; }
  .aile-baslik { gap: 12px; margin-bottom: 16px; }
  .aile-baslik h1 { font-size: 19px; }
  .aile-baslik p { font-size: 13px; }
  .sayfa-not { padding: 0 12px; margin: 14px auto -2px; font-size: 13px; }
  .yonlendirme { padding: 13px 15px; font-size: 13px; }
  table.kose-tablo th, table.kose-tablo td { padding: 7px 14px; font-size: 12.5px; }
}


/* ================================================================
   VZA — veri tablosu ve model ayarları
   ================================================================ */
.vza-duzen, .ahp-duzen, .topsis-duzen, .electre-duzen, .vikor-duzen,
.agirlik-duzen, .atama-duzen, .ulastirma-duzen {
  max-width: 1220px; margin: 20px auto; padding: 0 24px;
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px;
  align-items: start;
}
@media (max-width: 1100px) {
  .vza-duzen, .ahp-duzen, .topsis-duzen, .electre-duzen, .vikor-duzen,
  .agirlik-duzen, .atama-duzen, .ulastirma-duzen { grid-template-columns: 1fr; }
}

table.veri-tablo {
  border-collapse: separate; border-spacing: 0; width: 100%;
  font-size: 13.5px;
}
table.veri-tablo th, table.veri-tablo td {
  padding: 5px 6px; border-bottom: 1px solid #eef1f6; text-align: left;
}
table.veri-tablo thead th { background: #f3f5f9; white-space: nowrap; }
table.veri-tablo th.girdi { background: #eef4fb; }
table.veri-tablo th.cikti { background: #eaf6f1; }
table.veri-tablo td.girdi { background: #f8fbfe; }
table.veri-tablo td.cikti { background: #f7fcfa; }
table.veri-tablo tr.tur-satiri th {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--soluk); font-weight: 650; padding: 2px 6px;
}
.baslik-girdi, .hucre {
  width: 100%; min-width: 74px; border: 1px solid transparent; border-radius: 7px;
  padding: 6px 8px; font: inherit; font-size: 13.5px; background: transparent;
}
.hucre {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right;
}
.baslik-girdi { font-weight: 650; min-width: 88px; }
.baslik-girdi:focus, .hucre:focus {
  outline: none; border-color: var(--vurgu); background: #fff;
}
.sut-sil {
  border: 0; background: transparent; color: #b6bfd0; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 3px 5px; border-radius: 6px;
}
table.veri-tablo th.kose, table.veri-tablo td.kose { width: 1%; }

.ayar-govde { padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.ayar-grup { display: flex; flex-direction: column; gap: 7px; }
.ayar-ad {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: #7f8ca6; font-weight: 650;
}
.ayar-not { margin: 0; font-size: 11.5px; color: #8b98b3; line-height: 1.5; }
.ayar-not code { color: #5c6a86; font-weight: 600; }
.secim { display: flex; background: #232c40; border-radius: 9px; padding: 3px; gap: 3px; }
.secim button {
  flex: 1; border: 0; background: transparent; color: #c6cfe0; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; padding: 7px 8px;
  border-radius: 7px;
  /* nowrap YOK — dar ekranda uzun etiketler (ör. "Varyans ve Standart
     Sapma") 4 düğme sığmazsa 2 satıra sarılsın; kart overflow:hidden
     olduğu için taşan düğme aksi hâlde görünmez/tıklanamaz oluyordu. */
}
.secim button.secili { background: var(--vurgu); color: #fff; }
.ayar-govde select.dugme { width: 100%; }
.ayar-dugmeler { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }

.model-metni {
  margin: 0; padding: 16px 20px; background: #f8f9fc; border-radius: 0 0 var(--yuvarlak) var(--yuvarlak);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px;
  line-height: 1.7; white-space: pre; overflow-x: auto;
}

@media (max-width: 760px) {
  .vza-duzen, .ahp-duzen, .topsis-duzen, .electre-duzen, .vikor-duzen,
  .agirlik-duzen, .atama-duzen, .ulastirma-duzen { margin: 14px auto; padding: 0 12px; gap: 14px; }
  .ayar-govde { padding: 13px; gap: 14px; }
  table.veri-tablo { font-size: 12.5px; }
  .baslik-girdi, .hucre { min-width: 64px; font-size: 12.5px; padding: 6px; }
  .model-metni { padding: 13px 15px; font-size: 12.5px; }
  .secim button { font-size: 12.5px; padding: 8px 6px; }
}

/* ================================================================
   AHP — ikili karşılaştırma matrisi, ölçek listesi, ağırlık çubuğu
   ================================================================ */
.ahp-duzen { grid-template-columns: minmax(0, 1fr) 320px; }

table.ahp-tablo th.sutun-ad {
  background: #f3f5f9; text-align: center; font-size: 12px; font-weight: 650;
  color: #44506a; padding: 7px 6px; max-width: 110px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
table.ahp-tablo td { text-align: center; }
table.ahp-tablo td .hucre { text-align: center; min-width: 62px; }
/* Köşegen sabittir; alt üçgen üst üçgenden türetilir. İkisi de düzenlenemez —
   soluk zemin bunu tek bakışta anlatıyor. */
table.ahp-tablo td.kosegen {
  background: #eef1f6; color: #97a2b8; font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
table.ahp-tablo td.alt { background: #fafbfd; }
table.ahp-tablo td.alt .turetilmis {
  color: #97a2b8; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
}
table.ahp-tablo td.ust { background: #fff; }
table.ahp-tablo th.kvb-ad { background: #f8f9fc; }

.olcek-listesi { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.olcek-listesi li {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 12px; color: #4a5670;
}
.olcek-listesi b {
  flex: 0 0 22px; text-align: center; background: #232c40; border-radius: 6px;
  padding: 2px 0; color: #fff; font-size: 12px;
}
.olcek-listesi span { line-height: 1.45; }

.cubuk-hucre { width: 34%; min-width: 90px; }
.cubuk {
  display: block; height: 9px; border-radius: 5px; background: var(--vurgu);
  min-width: 3px;
}
table.kose-tablo tr.optimal .cubuk { background: var(--vurgu); }

table.adim-tablo th, table.adim-tablo td { padding: 6px 12px; font-size: 12.5px; }
table.adim-tablo tr.toplam-satiri td, table.adim-tablo tr.toplam-satiri th {
  background: #f3f5f9; font-weight: 700; border-top: 2px solid #dfe4ec;
}
table.adim-tablo td.agirlik-sutun {
  background: var(--vurgu-acik); color: var(--vurgu); font-weight: 700;
}

@media (max-width: 1100px) { .ahp-duzen { grid-template-columns: 1fr; } }

/* ------------------------------------------------- hiyerarşik AHP
   Düzen kuralının hemen ardından kendi media query'si gelir: paylaşılan
   1100px bloğu bu sınıfı tanımıyor, sonradan gelen tek sütunlu kural olmazsa
   mobilde iki sütun kalır (TOPSIS'te bir kez yaşandı). */
.ahp-h-duzen { grid-template-columns: minmax(0, 1fr) 320px; }
@media (max-width: 1100px) { .ahp-h-duzen { grid-template-columns: 1fr; } }
.ahp-h-sol { display: grid; gap: 22px; align-content: start; min-width: 0; }
@media (max-width: 760px) { .ahp-h-sol { gap: 14px; } }

.hiyerarsi-sar { padding: 6px 16px 14px; }
#hiyerarsiCizim { width: 100%; height: auto; display: block; }

/* ------------------------------------------------- kesikli tesadüfi değişkenler
   Diğer -duzen sınıflarından farklı: yan panel yok, üç bağımsız hesaplayıcı
   tek sütunda alt alta durur. Kural 2 gereği medya sorgusu hemen altında. */
.istatistik-duzen {
  max-width: 900px; margin: 20px auto; padding: 0 24px;
  display: grid; gap: 22px;
}
@media (max-width: 760px) {
  .istatistik-duzen { margin: 14px auto; padding: 0 12px; gap: 14px; }
}

/* Binom sonucu: tablo solda, histogram hemen sağında. Kural 2 gereği
   medya sorgusu hemen altında. */
.binom-sonuc {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
  gap: 18px; align-items: start; margin-top: 16px;
}
@media (max-width: 760px) {
  .binom-sonuc { grid-template-columns: 1fr; margin-top: 12px; }
}
.histogram-kutu { padding: 4px 0; }
.histogram-kutu svg { width: 100%; height: auto; display: block; }

/* Gruplandırılmış Seri — Grafikler bölümü: pasta solda (sabit-ölçekli
   kutu), lejant sağında (esnek liste). Binom'un tablo/histogram ikilisiyle
   AYNI ilke (Kural 2 gereği medya sorgusu hemen altında) ama oranlar ters —
   burada dar öge sabit, geniş öge esnek liste. */
.pasta-duzen {
  display: grid; grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
  gap: 18px; align-items: center; margin: 4px 0 16px; padding: 0 20px;
}
@media (max-width: 760px) {
  .pasta-duzen { grid-template-columns: 1fr; }
}
.pasta-lejant { display: flex; flex-direction: column; gap: 8px; }
.pasta-lejant .gosterge-oge { font-size: 13px; color: #44506a; }
.pasta-lejant .gosterge-kutu { width: 12px; height: 12px; flex: 0 0 auto; }
.pasta-lejant b { color: var(--metin); font-weight: 650; }

/* Grafikler bölümünde (Gruplandırılmış Seri) histogram/pasta grafiği
   ayıran hafif bir alt başlık — .kart-baslik'in aksine kart KENARINA değil,
   kart İÇERİĞİNE gömülü olduğu için border/negatif kenar boşluğu yok. */
.grafik-alt-baslik {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 18px 20px 6px; flex-wrap: wrap;
}
.grafik-alt-baslik h3 { margin: 0; font-size: 14px; }

.h-kenar { stroke-width: 1.6; fill: none; }
.h-kenar.vurgulu { stroke: #3f6fd8; stroke-width: 2.2; }
.h-kenar.soluk { stroke: #d7dcE6; }

.h-dugum rect {
  fill: #fff; stroke: #c8d0de; stroke-width: 1.6;
  transition: fill .12s, stroke .12s;
}
.h-dugum[data-dugum] { cursor: pointer; }
.h-dugum[data-dugum]:hover rect { stroke: #3f6fd8; fill: #f4f7fd; }
.h-dugum[data-dugum]:focus { outline: none; }
.h-dugum[data-dugum]:focus rect { stroke: #3f6fd8; stroke-width: 2.6; }
.h-dugum.secili rect { fill: #eaf0fc; stroke: #3f6fd8; stroke-width: 2.6; }
.h-dugum.amac rect { fill: #232c40; stroke: #232c40; }
.h-dugum.amac.secili rect { fill: #33405e; stroke: #6f8fd8; stroke-width: 2.6; }
.h-dugum.amac .h-ad { fill: #fff; }
.h-dugum.amac .h-alt { fill: #b8c4dc; }
.h-dugum.yaprak rect { fill: #f6f8fb; stroke: #dbe1ec; }
.h-dugum.kazanan rect { fill: #eaf6f1; stroke: #2f9e7a; stroke-width: 2.2; }
.h-dugum.eksik rect { stroke-dasharray: 4 3; }
.h-dugum.cr-kotu rect { stroke: #c0504d; }
.h-dugum.cr-kotu.secili rect { stroke: #c0504d; stroke-width: 2.6; }

.h-ad {
  font: 650 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  fill: #2b3448;
}
.h-alt {
  font: 500 10.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  fill: #7b869c;
}
/* SVG viewBox ile olceklendigi icin buradaki px SVG kullanici birimidir:
   dar ekranda cizim kuculurken yazi orantili kalsin diye BUYUTULUR. */
@media (max-width: 760px) {
  .h-ad { font-size: 15px; }
  .h-alt { font-size: 12px; }
  .hiyerarsi-sar { padding: 4px 8px 10px; }
}

/* ---- Karar Ağaçları: AHP'nin .h-dugum/.h-kenar primitiflerinin üstüne
   yalnızca YENİ düğüm/kenar türleri (şans=elips, kapalı=budanmış özet,
   dal etiketi) eklenir; kare düğüm/kenar/metin stilleri yukarıdakiyle
   AYNIDIR, tekrar tanımlanmaz. */
.agac-sar { overflow-x: auto; }
#agacCizim { width: 100%; height: auto; display: block; min-width: 560px; }
.h-dugum.sans ellipse {
  fill: #fff; stroke: #c8d0de; stroke-width: 1.6; transition: fill .12s, stroke .12s;
}
.h-dugum.kapali rect { fill: #f6f8fb; stroke: #c8d0de; stroke-width: 1.4; stroke-dasharray: 4 3; }
.h-dugum.kapali .h-alt { fill: #9aa4bb; }
.h-kenar.budanmis { stroke: #d7dce6; stroke-dasharray: 4 3; }
.dal-etiket rect { fill: #fbfcfe; stroke: none; }
.h-alt.vurgulu { fill: var(--vurgu); font-weight: 650; }
.h-alt.budanmis { fill: #a6b0c2; }
@media (max-width: 760px) {
  #agacCizim { min-width: 640px; }
}

/* Yığılmış katkı çubuğu: skorun hangi ölçütten geldiğini gösterir. */
.yigin-alan { padding: 0 20px 18px; }
.yigin-gosterge {
  display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px;
  font-size: 12px; color: #4a5670;
}
.gosterge-oge { display: inline-flex; align-items: center; gap: 6px; }
/* display:inline-block ŞART: flex olmayan bir ebeveynde (ör. düz bir
   <td> içinde, Gruplandırılmış Seri'nin sınıf tablosunda) width/height
   satır-içi (inline) bir <span>'de yoksayılır — yalnızca .gosterge-oge
   gibi bir flex kapsayıcı içindeyken "blockify" olup çalışırdı. */
.gosterge-kutu { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: middle; }
.yigin-tablo { width: 100%; border-collapse: collapse; }
.yigin-tablo th {
  text-align: left; font-size: 12.5px; font-weight: 650; color: #2b3448;
  padding: 4px 10px 4px 0; white-space: nowrap;
}
.yigin-tablo td { padding: 4px 0; }
.yigin-tablo td.yigin-deger {
  text-align: right; padding-left: 12px; font-size: 12.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #4a5670;
}
.yigin {
  display: flex; height: 18px; border-radius: 5px; overflow: hidden;
  background: #eef1f6; width: 100%;
}
.yigin-parca { display: block; height: 100%; }

/* Tutarsız yargı onarım ipucu — CR'nin yüksek olduğunu söylemek yetmiyor,
   nereye bakılacağı da yazılıyor. */
/* Grafik kartı başlığındaki araçlar: görünüm anahtarı + SVG kopyalama. */
.baslik-araclar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gorunum-secim button { font-size: 11.5px; padding: 5px 12px; }
/* .anahtar koyu üst şerit için tasarlandı; kart başlığı açık zeminde. */
.kart-anahtar { font-size: 12px; color: #4a5670; }
.kart-anahtar input { width: 14px; height: 14px; }
@media (max-width: 760px) {
  .baslik-araclar { gap: 7px; }
  .gorunum-secim button { font-size: 11px; padding: 5px 10px; }
}

/* Köşe tablosundaki harf sütunu — sade çizimdeki etiketlerin karşılığı. */
table.kose-tablo td.kose-harf {
  font-weight: 700; color: #b93030; text-align: center; width: 34px;
}

.onarim {
  margin-top: 4px; font-size: 11.5px; font-weight: 500; color: #a5442f;
  line-height: 1.5;
}
@media (max-width: 760px) {
  table.ahp-tablo td .hucre { min-width: 48px; padding: 6px 3px; }
  table.ahp-tablo th.sutun-ad { font-size: 11px; max-width: 76px; }
  .baslik-girdi { min-width: 72px; }
  .cubuk-hucre { display: none; }
  table.adim-tablo th, table.adim-tablo td { padding: 5px 9px; font-size: 11.5px; }
}

/* ================================================================
   AÇIKLAMA PENCERELERİ ve "?" düğmesi
   ================================================================ */
.ne-dir {
  border: 1px solid var(--cizgi); background: #fff; color: var(--soluk);
  cursor: pointer; font: inherit; font-size: 11px; font-weight: 700;
  width: 18px; height: 18px; line-height: 1; padding: 0; border-radius: 50%;
  vertical-align: middle; margin-left: 5px; flex: none;
}
.kart-baslik .ne-dir { font-size: 11.5px; width: 19px; height: 19px; }

/* Pencere içeriği: matematik Unicode + HTML ile yazılır (MathJax yok). */
.aciklama { display: flex; flex-direction: column; gap: 11px; }
.aciklama h4 {
  margin: 7px 0 0; font-size: 13.5px; color: var(--koyu-2);
}
.aciklama p { margin: 0; font-size: 13.5px; color: #46506b; line-height: 1.75; }
.formul {
  background: #f5f7fb; border-left: 4px solid var(--vurgu); border-radius: 8px;
  padding: 11px 14px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13.5px; color: #2c3550; line-height: 1.8; overflow-x: auto;
}

/* Türev Hesaplayıcı — gerçek üst-alt kesir (MathJax yok, .formul'ün
   içine <sup> ile aynı ilkeyle gömülür). Kutunun kendisi pay/paydayı
   görsel olarak ayırdığı için turev.py hiç ek parantez eklemiyor. */
.turev-kesir {
  display: inline-flex; flex-direction: column; align-items: center;
  vertical-align: middle; text-align: center; margin: 0 2px;
  line-height: 1.25; font-size: .94em;
}
.turev-kesir-pay { padding: 0 3px 1px; }
.turev-kesir-payda { padding: 2px 3px 0; border-top: 1.2px solid currentColor; }
.aciklama .uyari {
  background: var(--sari-zemin, #fff8e6); border-radius: 8px; padding: 11px 14px;
  border-left: 4px solid #e0a020;
}
.etiket-varsayilan {
  margin-left: 8px; vertical-align: middle; font-size: 10.5px; font-weight: 650; text-transform: uppercase;
  letter-spacing: .05em; background: var(--vurgu-acik); color: var(--vurgu);
  border-radius: 20px; padding: 2px 8px;
}

/* ================================================================
   AHP — çözüm yöntemi anahtarı ve güç iterasyonu tablosu
   ================================================================ */
.secim.ucul button { font-size: 12px; padding: 7px 4px; }
.serit-yol {
  display: inline-block; margin-left: 6px; font-size: 11.5px; font-weight: 650;
  background: rgba(255, 255, 255, .55); border-radius: 20px; padding: 1px 9px;
}
.ilk-adim { font-size: 11.5px; color: var(--vurgu); font-weight: 600; }
.kisa-kesir { border-bottom: 1px dotted #b6bfd0; cursor: help; }

@media (max-width: 760px) {
  .secim.ucul button { font-size: 11px; padding: 8px 3px; }
  .aciklama p, .aciklama h4 { font-size: 13px; }
  .formul { font-size: 12.5px; padding: 10px 12px; }
  .turev-kesir { font-size: .9em; }
}

/* ================================================================
   TOPSIS — karar matrisi, ölçüt yönü, ideal satırları
   ================================================================ */
.topsis-duzen { grid-template-columns: minmax(0, 1fr) 330px; }
@media (max-width: 1100px) { .topsis-duzen { grid-template-columns: 1fr; } }

table.topsis-tablo th.fayda, table.kose-tablo th.fayda { background: #eaf6f1; }
table.topsis-tablo th.maliyet, table.kose-tablo th.maliyet { background: #fdf1ee; }
table.topsis-tablo td.fayda { background: #f7fcfa; }
table.topsis-tablo td.maliyet { background: #fefaf8; }
table.topsis-tablo td { text-align: right; }
table.kose-tablo th.oncelik, table.kose-tablo td.oncelik { background: #eef4fb; }
table.topsis-tablo th.kvb-ad { min-width: 132px; }
table.topsis-tablo th.kvb-ad .baslik-girdi { min-width: 120px; }
.yon-not { margin-left: 5px; font-weight: 700; }

/* Yön düğmesi: basınca fayda <-> maliyet. Renk, sütun zeminiyle aynı aileden. */
.yon-dugme {
  width: 100%; border: 1px solid transparent; cursor: pointer; font: inherit;
  font-size: 11px; font-weight: 700; padding: 4px 6px; border-radius: 7px;
  text-transform: lowercase; letter-spacing: .02em;
}
.yon-dugme.fayda { background: #d7efe5; color: #0d6b4b; border-color: #b7e2d2; }
.yon-dugme.maliyet { background: #fbdfd7; color: #a4402a; border-color: #f2c8bc; }

table.topsis-tablo tr.agirlik-satiri th { padding-top: 2px; }
table.topsis-tablo tr.agirlik-satiri > th:first-child,
table.topsis-tablo tr.tur-satiri > th:first-child {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--soluk); font-weight: 650; white-space: nowrap;
}
.agirlik-toplam { display: block; font-size: 10px; color: #9aa4bb; letter-spacing: 0; }
/* Toplam 1 degilse gorunur uyari: sunucu normallestirecek, sessiz kalmasin. */
table.topsis-tablo tr.agirlik-satiri.uyumsuz .agirlik-toplam { color: var(--sari); }
table.topsis-tablo tr.agirlik-satiri.uyumsuz .agirlik { color: var(--sari); }

/* Karar Ağaçları — bilgi kaynağı tablosu: durum başlıkları salt-okunur
   (ödül matrisinden gelir, burada silinemez), Toplam satırı hesaplanmış
   sütun toplamlarını gösterir (satır değil SÜTUN bazında — bkz. agac.js
   bilgiToplamNotu()). Toplam 1 değilse tek tek hücre vurgulanır. */
table.topsis-tablo td.salt-baslik {
  background: #f8f9fc; color: var(--soluk); font-weight: 650; text-align: center;
}
table.topsis-tablo td.salt-baslik.uyumsuz-hucre { background: var(--sari-zemin); color: #9a6b08; }

table.adim-tablo tr.ideal-satiri td, table.adim-tablo tr.ideal-satiri th {
  background: #eaf6f1; font-weight: 700; border-top: 2px solid #cfe7dd;
}
table.adim-tablo tr.negatif-satiri td, table.adim-tablo tr.negatif-satiri th {
  background: #fdf1ee; font-weight: 700;
}

@media (max-width: 760px) {
  table.topsis-tablo .hucre { min-width: 56px; }
  table.topsis-tablo th.kvb-ad { min-width: 104px; }
  table.topsis-tablo th.kvb-ad .baslik-girdi { min-width: 94px; }
  .yon-dugme { font-size: 10px; padding: 4px 2px; }
}

/* ================================================================
   ELECTRE I — eşikler, üstünlük çizgesi, 0/1 matrisleri
   ================================================================ */
.electre-duzen { grid-template-columns: minmax(0, 1fr) 330px; }
/* Bu sorgu kuralın HEMEN ALTINA yazılmalı: dosyanın yukarısındaki 1100px
   bloğu daha önce geldiği için tek başına yetmez, sonra gelen kazanır. */
@media (max-width: 1100px) { .electre-duzen { grid-template-columns: 1fr; } }

.esik-satiri { display: flex; gap: 8px; }
.esik-satiri label {
  flex: 1; display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; color: #7f8ca6; font-weight: 650;
}
.esik-girdi {
  border: 1px solid var(--cizgi); background: #fff; text-align: left;
  min-width: 0; border-radius: 8px; padding: 7px 9px;
}
.kip {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; border-radius: 20px; padding: 1px 7px; margin-left: 5px;
}
.kip.ortalama { background: #eef1f6; color: #6b7794; }
.kip.elle { background: var(--yesil-zemin); color: var(--yesil); }

.grafik-sar { padding: 8px 20px 20px; overflow-x: auto; }
.electre-svg { width: 100%; min-width: 480px; height: auto; display: block; }
.electre-svg .ok { fill: none; stroke: #7c86a8; stroke-width: 1.8; }
.electre-svg marker path { fill: #7c86a8; }
.electre-svg .dugum rect {
  fill: #f3f5f9; stroke: #cdd5e3; stroke-width: 1.5;
}
.electre-svg .dugum text {
  text-anchor: middle; font-size: 12.5px; font-weight: 650; fill: #38415c;
  font-family: inherit;
}
/* Çekirdek: hiçbir seçeneğin üstün gelmediği düğümler. */
.electre-svg .dugum.cekirdek rect {
  fill: var(--yesil-zemin); stroke: var(--yesil); stroke-width: 2.5;
}
.electre-svg .dugum.cekirdek text { fill: var(--yesil); }

table.electre-matris td { text-align: center; font-weight: 600; }
table.electre-matris td.kosegen { background: #eef1f6; color: #b6bfd0; }
table.electre-matris td.gecti { background: var(--vurgu-acik); color: var(--vurgu); }
table.electre-matris td.bir { background: var(--yesil-zemin); color: var(--yesil); font-weight: 800; }
table.electre-matris td.sifir { color: #b6bfd0; }

.cift-listesi { margin: 0; padding: 0 4px 6px; font-size: 13px; color: #46506b; line-height: 1.9; }
.madde-listesi { margin: 0; padding-left: 20px; font-size: 13.5px; color: #46506b; line-height: 1.75; }
.madde-listesi li { margin-bottom: 6px; }

@media (max-width: 760px) {
  .electre-svg { min-width: 420px; }
  .grafik-sar { padding: 6px 12px 14px; }
  .esik-satiri { flex-direction: column; }
}

/* ================================================================
   VIKOR — strateji ağırlığı, S/R sıraları, uzlaşık çözüm koşulları
   ================================================================ */
.vikor-duzen { grid-template-columns: minmax(0, 1fr) 330px; }
/* Sorgu kuralın HEMEN ALTINDA olmalı; yukarıdaki 1100px bloğu daha önce gelir. */
@media (max-width: 1100px) { .vikor-duzen { grid-template-columns: 1fr; } }

.v-elle { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #7f8ca6; }
.v-elle .esik-girdi { flex: 1; min-width: 0; }
/* Q kucuk olan iyi; cubuk uzunlugu Q'yu gosterir, o yuzden KISA cubuk iyidir.
   Rengi vurgudan ayirmak icin daha soluk. */
.cubuk.ters { background: #9aa3c8; }
tr.optimal .cubuk.ters { background: var(--vurgu); }
.uzlasik-im { color: var(--yesil); font-size: 12px; }
.mini-sira {
  display: inline-block; margin-left: 6px; font-size: 10.5px; color: #9aa4bb;
  vertical-align: super;
}
.soluk-not { color: #9aa4bb; font-size: 11.5px; }

.kosul-listesi { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.kosul {
  border: 1px solid var(--cizgi); border-left-width: 5px; border-radius: 10px;
  padding: 12px 14px;
}
.kosul.tamam { border-left-color: var(--yesil); background: var(--yesil-zemin); }
.kosul.eksik { border-left-color: var(--sari); background: var(--sari-zemin); }
.kosul-bas { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin-bottom: 4px; }
.kosul p { margin: 0; font-size: 13px; color: #46506b; line-height: 1.7; }

@media (max-width: 760px) {
  .kosul-listesi { padding: 13px 15px 16px; }
  .kosul-bas { flex-wrap: wrap; font-size: 13px; }
}

/* ================================================================
   NESNEL AĞIRLIKLANDIRMA — CRITIC ve Standart Sapma
   ================================================================ */
.agirlik-duzen { grid-template-columns: minmax(0, 1fr) 330px; }
/* Sorgu kuralın HEMEN ALTINDA olmalı; yukarıdaki 1100px bloğu daha önce gelir. */
@media (max-width: 1100px) { .agirlik-duzen { grid-template-columns: 1fr; } }

/* Karsilastirma sutunu: obur yontemin agirligi. Asil sonuctan ayrilsin diye
   soluk ve sol cizgili. */
.diger-agirlik {
  color: #8b98b3; border-left: 1px dashed var(--cizgi); font-style: italic;
}
table.kose-tablo th.diger-agirlik { font-style: normal; }
.kart-alt-not {
  margin: 0; padding: 0 20px 18px; font-size: 12.5px; color: var(--soluk);
  line-height: 1.7;
}
/* Guclu korelasyon: CRITIC'in agirligi kirdigi yer gorunur olsun. */
table.electre-matris td.guclu { background: var(--sari-zemin); color: #8a5a06; }

@media (max-width: 760px) {
  .kart-alt-not { padding: 0 15px 14px; font-size: 12px; }
}

/* ================================================================
   ATAMA PROBLEMİ — adım matrisleri, örtme çizgileri, indirgeme kenarları
   ================================================================ */
.atama-duzen { grid-template-columns: minmax(0, 1fr) 330px; }
/* Sorgu kuralın HEMEN ALTINDA olmalı; yukarıdaki 1100px bloğu daha önce gelir. */
@media (max-width: 1100px) { .atama-duzen { grid-template-columns: 1fr; } }

table.atama-tablo td { text-align: right; }
table.atama-tablo th.kose { width: 1%; white-space: nowrap; }

/* --- adım matrisleri --- */
table.atama-adim td { text-align: center; font-weight: 600; min-width: 46px; }
table.atama-adim th { white-space: nowrap; }
/* Sifirlar algoritmanin para birimi: her adimda hemen gorunmeliler. */
table.atama-adim td.sifir { color: var(--vurgu); font-weight: 800; background: var(--vurgu-acik); }
/* Ortme "cizgisi": satir/sutun taranir, kesisim koyulasir. */
table.atama-adim tr.kapali-satir th { color: var(--sari); }
table.atama-adim th.kapali-sutun { color: var(--sari); }
table.atama-adim td.kapali { background: var(--sari-zemin); }
table.atama-adim td.kapali.sifir { background: #f7e9c9; }
table.atama-adim td.kesisim { background: #f3dca6; font-style: italic; }
/* Son matriste secilen atama hucreleri. */
table.atama-adim td.atandi {
  outline: 2px solid var(--yesil); outline-offset: -2px;
  background: var(--yesil-zemin); color: var(--yesil); font-weight: 800;
}
table.atama-adim td.indirgeme, table.atama-adim tr.indirgeme-satiri td {
  color: var(--soluk); font-weight: 650; background: #f8f9fc; font-style: italic;
}
table.atama-adim th.indirgeme-bas, table.atama-adim tr.indirgeme-satiri th {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--soluk);
}
tr.kukla-satir td { color: var(--soluk); font-style: italic; background: #fafbfd; }

.adim-aciklama {
  margin: 0; padding: 2px 20px 12px; font-size: 13px; color: #46506b;
  line-height: 1.7;
}
.adim-rozet {
  margin-left: 8px; font-size: 10.5px; font-weight: 700; border-radius: 20px;
  padding: 2px 9px; letter-spacing: .02em;
}
.adim-rozet.tamam { background: var(--yesil-zemin); color: var(--yesil); }
.adim-rozet.eksik { background: var(--sari-zemin); color: var(--sari); }
.adim-rozet.k { background: var(--vurgu-acik); color: var(--vurgu); }

@media (max-width: 760px) {
  table.atama-adim td { min-width: 38px; font-size: 12px; }
  .adim-aciklama { padding: 2px 15px 10px; font-size: 12.5px; }
  .adim-rozet { display: inline-block; margin: 4px 0 0 6px; }
}

/* ================================================================
   ULAŞTIRMA — arz/talep kenarları, adım tabloları, MODI ve döngü
   ================================================================ */
.ulastirma-duzen { grid-template-columns: minmax(0, 1fr) 330px; }
@media (max-width: 1100px) { .ulastirma-duzen { grid-template-columns: 1fr; } }

table.ulastirma-tablo td { text-align: right; }
table.ulastirma-tablo th.arz-bas, table.ulastirma-tablo td.arz-hucre {
  background: #eef4fb; border-left: 2px solid #d6e3f3;
}
table.ulastirma-tablo tr.talep-satiri th, table.ulastirma-tablo tr.talep-satiri td {
  background: #eaf6f1; border-top: 2px solid #cfe7dd;
}
table.ulastirma-tablo tr.talep-satiri > th:first-child {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--soluk); font-weight: 650;
}
.denge-notu { font-size: 12px; font-weight: 650; margin-left: 4px; }
.denge-notu.dengeli { color: var(--yesil); }
.denge-notu.dengesiz { color: var(--sari); }

/* --- adım tabloları --- */
table.ulastirma-adim td {
  text-align: center; min-width: 62px; padding: 5px 8px; position: relative;
}
/* Her hucre iki sayi tasir: sol ustte birim maliyet, ortada tasinan miktar. */
table.ulastirma-adim .maliyet {
  display: block; font-size: 10px; color: #98a3ba; text-align: left;
  line-height: 1.2;
}
table.ulastirma-adim .tahsis { font-weight: 800; color: var(--koyu-2); }
table.ulastirma-adim .firsat { color: #9aa4bb; font-style: italic; }
table.ulastirma-adim td.temel { background: var(--vurgu-acik); }
table.ulastirma-adim td.temel .tahsis { color: var(--vurgu); }
table.ulastirma-adim td.secilen { outline: 2px solid var(--vurgu); outline-offset: -2px; }
table.ulastirma-adim td.secilen .firsat { color: var(--vurgu); font-weight: 800; font-style: normal; }
/* Kapali dongu: arti ve eksi konumlar. */
table.ulastirma-adim td.dongu-arti { background: var(--yesil-zemin); }
table.ulastirma-adim td.dongu-eksi { background: var(--kirmizi-zemin); }
.dongu-im {
  position: absolute; top: 2px; right: 4px; font-size: 12px; font-weight: 800;
}
td.dongu-arti .dongu-im { color: var(--yesil); }
td.dongu-eksi .dongu-im { color: var(--kirmizi); }
/* Kenar sutun/satirlari: u-v, ceza, kalan arz/talep. */
table.ulastirma-adim td.uv, table.ulastirma-adim tr.uv-satiri td {
  background: #f3f5f9; font-weight: 700; color: #44506a;
}
table.ulastirma-adim td.ceza, table.ulastirma-adim tr.ceza-satiri td {
  background: var(--sari-zemin); font-weight: 700; color: #8a5a06;
}
table.ulastirma-adim td.kalan, table.ulastirma-adim tr.kalan-satiri td {
  background: #f8f9fc; color: var(--soluk); font-style: italic;
}
table.ulastirma-adim th.uv-bas, table.ulastirma-adim th.ceza-bas,
table.ulastirma-adim th.kalan-bas,
table.ulastirma-adim tr.uv-satiri th, table.ulastirma-adim tr.ceza-satiri th,
table.ulastirma-adim tr.kalan-satiri th {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--soluk);
}

@media (max-width: 760px) {
  table.ulastirma-adim td { min-width: 50px; padding: 4px 5px; font-size: 12px; }
  table.ulastirma-adim .maliyet { font-size: 9px; }
  .denge-notu { flex-basis: 100%; margin: 2px 0 0; }
}

/* ================================================================
   DEVREDİLEN MODEL — başka bir yöntem sayfasından gelen kilitli model
   ================================================================ */
/* Kilitli kipte düzenleme yolları tamamen kapanır: değişkenler Xij biçiminde
   olduğu için X1…Xn varsayan tuş takımı ve satır düzenleyici tutarsız olurdu. */
.model-kart.kilitli .model-alt,
.model-kart.kilitli .metin-alan,
.model-kart.kilitli .kart-baslik .ipucu,
.tus-kart.kilitli .kart-baslik,
.tus-kart.kilitli .onizleme,
.tus-kart.kilitli .tus-grup,
.tus-kart.kilitli .tus-alt,
.tus-kart.kilitli .klavye-ipucu { display: none; }

.model-kart.kilitli .satirlar { pointer-events: none; }
.model-kart.kilitli .satir { cursor: default; background: #fbfcfe; }
/* Kilitli kipte kullanici satiri kaydiramaz; uzun amac fonksiyonu kesilmesin
   diye metin sarilir. Duzenlenebilir kipte tek satir kalmasi gerekir (imlec
   konumlandirmasi ona gore calisir), bu yuzden yalnizca kilitte. */
.model-kart.kilitli .satir-metin {
  white-space: normal; overflow: visible; word-break: break-word;
  line-height: 1.8;
}
.model-kart.kilitli .satir-sil { display: none; }
/* ÇÖZ düğmesi ve seçenek anahtarları kalır: ondalık/Bland değiştirilip
   yeniden çözülebilsin. */
.tus-kart.kilitli .tus-govde { padding-top: 16px; }

.devir-serit {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  margin: 0 20px 14px; padding: 12px 15px;
  background: var(--vurgu-acik); border-radius: 10px;
  border-left: 5px solid var(--vurgu);
  font-size: 13px; color: #3d4170; line-height: 1.6;
}
.devir-baglar { display: flex; align-items: center; gap: 10px; flex: none; }
.devir-baglar a { color: var(--vurgu); font-weight: 650; white-space: nowrap; }

/* Yöntem sayfalarındaki "Simpleks ile çöz" düğmesi ve model boyutu notu. */
.model-devret {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 0 20px 20px;
}
.model-olcu { font-size: 12.5px; color: var(--soluk); }

@media (max-width: 760px) {
  .devir-serit { margin: 0 15px 12px; padding: 11px 13px; font-size: 12.5px; }
  .model-devret { padding: 0 15px 16px; }
}

/* ================================================================
   PİŞTİ — kart oyunu (Oyunlar ailesi)
   Diğer -duzen sınıflarından farklı: matris/tablo yok, tek sütunlu oyun
   tahtası. Kural 2 gereği medya sorgusu hemen altında.
   ================================================================ */
.pisti-duzen {
  max-width: 640px; margin: 20px auto; padding: 0 24px;
  display: grid; gap: 22px;
}
@media (max-width: 760px) {
  .pisti-duzen { margin: 14px auto; padding: 0 12px; gap: 14px; }
}

.pisti-mod-secim { padding: 0 20px 20px; }

.pisti-skor {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 20px 16px; padding: 10px 14px;
  background: #f8f9fc; border-radius: 10px;
}
.pisti-oyuncu { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--soluk); }
.pisti-oyuncu .ad { font-size: 13.5px; font-weight: 700; color: var(--metin); }
.pisti-oyuncu.sirada .ad { color: var(--vurgu); }
.pisti-oyuncu.sirada .ad::after { content: " ·"; }
@media (max-width: 420px) {
  .pisti-skor { flex-direction: column; align-items: stretch; gap: 8px; }
}

.pisti-masa-alan {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 0 20px 20px;
}
.pisti-el { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 92px; }
.pisti-el.rakip { opacity: .85; }
.pisti-masa-yigin { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pisti-masa-sayi { font-size: 11.5px; color: var(--soluk); }
.pisti-deste-not { margin: -8px 20px 4px; font-size: 12px; color: var(--soluk); text-align: center; }

.pisti-kart {
  width: 58px; height: 82px; border-radius: 8px; background: #fff;
  border: 1px solid var(--cizgi); box-shadow: 0 1px 2px rgba(16,24,40,.1);
  position: relative; font-weight: 700; flex: none;
  transition: transform .12s, box-shadow .12s;
}
.pisti-kart.kirmizi { color: var(--kirmizi); }
.pisti-kart.siyah { color: var(--koyu); }
.pisti-rakam { position: absolute; font-size: 12.5px; line-height: 1; }
.pisti-rakam.ust { top: 5px; left: 6px; }
.pisti-rakam.alt { bottom: 5px; right: 6px; transform: rotate(180deg); }
.pisti-sembol { position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; }
.pisti-kart.kapali {
  background: repeating-linear-gradient(45deg, #3730a3, #3730a3 6px, #4338ca 6px, #4338ca 12px);
  border-color: #2c2680;
}
.pisti-kart.oynanabilir { cursor: pointer; }
.pisti-masa-yigin .pisti-kart, .pisti-masa-bos { width: 78px; height: 110px; }
.pisti-masa-yigin .pisti-sembol { font-size: 30px; }
.pisti-masa-yigin .pisti-rakam { font-size: 15px; }
.pisti-masa-bos {
  border: 1.5px dashed var(--cizgi); border-radius: 8px;
  display: grid; place-items: center; font-size: 11.5px; color: var(--soluk);
}
@media (max-width: 420px) {
  .pisti-kart { width: 48px; height: 68px; }
  .pisti-rakam { font-size: 11px; }
  .pisti-sembol { font-size: 18px; }
  .pisti-masa-yigin .pisti-kart, .pisti-masa-bos { width: 66px; height: 94px; }
  .pisti-masa-yigin .pisti-sembol { font-size: 25px; }
}

.pisti-eylemler { display: flex; gap: 10px; flex-wrap: wrap; padding: 0 20px 20px; }

.pisti-gecis-katman {
  /* TAM opak olmali — bu ekranin tek isi rakip eli tamamen gizlemek,
     yarim saydamlik (onceki: rgba(...,.94)) kartlarin sizmasina yol acardi. */
  position: fixed; inset: 0; z-index: 70; background: #0a0e1a;
  display: grid; place-items: center; padding: 20px;
}
.pisti-gecis-kutu {
  max-width: 360px; text-align: center; display: flex; flex-direction: column; gap: 14px;
}
.pisti-gecis-baslik { margin: 0; font-size: 20px; font-weight: 700; color: #fff; }
.pisti-gecis-not { margin: 0; font-size: 13.5px; color: #b9c3d6; line-height: 1.6; }

@media (max-width: 760px) {
  .pisti-mod-secim { padding: 0 15px 16px; }
  .pisti-skor { margin: 0 15px 14px; padding: 9px 12px; }
  .pisti-masa-alan { padding: 0 15px 16px; gap: 13px; }
  .pisti-eylemler { padding: 0 15px 16px; }
}

/* ================================================================
   KAPILAR OYUNU — Monty Hall (Oyunlar ailesi)
   Kural 2 gereği medya sorgusu hemen altında.
   ================================================================ */
.kapi-duzen {
  max-width: 640px; margin: 20px auto; padding: 0 24px;
  display: grid; gap: 22px;
}
@media (max-width: 760px) {
  .kapi-duzen { margin: 14px auto; padding: 0 12px; gap: 14px; }
}

.kapi-istatistik { padding: 20px 20px 0; }
.kapi-grafik { padding: 16px 20px 0; }
.kapi-grafik svg { width: 100%; height: auto; display: block; }
.kapi-grafik-not { margin: 6px 0 0; font-size: 11.5px; color: var(--soluk); }
/* Alt boşluk (20px) bilerek var — Rulet'te bu, sayfanın GERÇEK son öğesi;
   Kapılar Oyunu'nda ardından kapı bölümü geldiği için fark edilmiyordu ama
   Rulet'te kart alt kenarına yapışık bitiyordu (mobilde "kesilmiş" hissi). */
.kapi-toplu-alan { padding: 16px 20px 20px; }
.kapi-toplu-dugmeler { display: flex; gap: 8px; flex-wrap: wrap; }

.kapi-sira { display: flex; justify-content: center; gap: 16px; padding: 24px 20px; }
.kapi {
  width: 96px; height: 132px; border: 0; border-radius: 10px; cursor: pointer;
  background: linear-gradient(160deg, #6366f1, #4338ca); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; font: inherit; flex: none;
  transition: transform .12s, box-shadow .12s;
  box-shadow: 0 3px 10px rgba(67, 56, 202, .35);
}
.kapi:disabled { cursor: default; }
.kapi .kapi-ic { font-size: 34px; line-height: 1; }
.kapi .kapi-no {
  font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, .18);
  border-radius: 20px; padding: 2px 10px;
}
.kapi.acik {
  background: #eef1f6; color: var(--koyu); box-shadow: none;
  border: 1.5px dashed #c9d2e0;
}
.kapi.acik .kapi-no { background: #dde3ee; color: var(--soluk); }
.kapi.secili { outline: 3px solid #fbbf24; outline-offset: 2px; }

.kapi-yonerge { margin: 0 20px; text-align: center; color: var(--soluk); font-size: 13.5px; }
.kapi-karar-dugmeler {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  padding: 4px 20px 20px;
}
.kapi-tur-alani #btnYeniTur { display: block; margin: 0 auto 20px; }

@media (max-width: 420px) {
  .kapi { width: 78px; height: 108px; }
  .kapi .kapi-ic { font-size: 28px; }
  .kapi-sira { gap: 10px; padding: 20px 12px; }
}

/* ================================================================
   RULET — Masa Her Zaman Kazanır (Oyunlar ailesi)
   Kural 2 gereği medya sorgusu hemen altında.
   ================================================================ */
.rulet-duzen {
  max-width: 640px; margin: 20px auto; padding: 0 24px;
  display: grid; gap: 22px;
}
@media (max-width: 760px) {
  .rulet-duzen { margin: 14px auto; padding: 0 12px; gap: 14px; }
}

.rulet-cark-alan { position: relative; display: flex; justify-content: center; padding: 24px 20px 6px; }
.rulet-cark-govde {
  width: 260px; height: 260px;
  transition: transform 3.8s cubic-bezier(.12, .72, .15, 1);
  will-change: transform;
}
.rulet-cark-govde svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .25)); }
.rulet-isaretci {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent;
  border-top: 16px solid #fbbf24; z-index: 2; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}
.rulet-bahis-dugmeler { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; padding: 10px 20px; }
.rulet-sonuc { padding: 0 20px; min-height: 20px; }
.rulet-sonuc .kapi-yonerge { text-align: center; color: var(--soluk); font-size: 13.5px; margin: 4px 0; }

@media (max-width: 420px) {
  .rulet-cark-govde { width: 200px; height: 200px; }
}

/* ================================================================
   YATAY TELEFON, KISA YÜKSEKLİK — projedeki genişlik tabanlı kırılma
   noktalarından (1100/760/420/360) BİLEREK ayrı, tek yükseklik tabanlı
   kırılma noktası. Döndürülmüş bir telefon genişlikte masaüstü eşiğini
   (760px) kolayca aşıyor ama boyu hâlâ ~400px civarında — düzen "masaüstü"
   moduna geçip üst şerit + sayfa-not + kart başlığı tek başına ekranı
   dolduruyor, oyun tahtası (Pişti/Kapılar Oyunu/Rulet) hiç görünmeden
   kaydırma gerektiriyordu. Yalnızca üst şerit/menü/sayfa-not/kart başlığı
   gibi PAYLAŞILAN, geniş kapsamlı seçicilere dokunuyor — her ailenin kendi
   `-duzen` sınıfına tek tek girmiyor (kapsam kasıtlı olarak dar tutuldu).
   ================================================================ */
@media (max-height: 480px) and (orientation: landscape) {
  .sayfa-not { display: none; }
  .ust { padding: 8px 0; }
  .ust-ic { gap: 10px; }
  .logo { width: 34px; height: 34px; font-size: 18px; }
  .ust h1 { font-size: 15px; }
  .ust p { display: none; }
  .menu-ic { padding: 4px 24px; }
  .menu-bag { padding: 4px 11px; font-size: 12px; }
  .kart-baslik { padding: 10px 16px; }
}

/* ================================================================
   FARE ÜZERİ (:hover) — yalnızca gerçek imleci olan cihazlarda
   Dokunmatik tarayıcılar bir öğeye dokunulduğunda :hover durumunu uygular ve
   başka bir yere dokunulana kadar ÜZERİNDE BIRAKIR; menü düğmesi seçili
   kalmış gibi görünüyordu. @media (hover: hover) bunu tamamen önler.
   ================================================================ */
@media (hover: hover) {
  .satir:hover { background: #f7f9fc; }
  .satir-sil:hover { background: var(--kirmizi-zemin); color: var(--kirmizi); }
  .ahm-bag:hover { color: var(--vurgu); border-bottom-style: solid; }
  .cip:hover { background: #f2f5fa; border-color: #c9d2e0; }
  .dugme:hover { background: #f2f5fa; border-color: #c9d2e0; }
  .dugme.birincil:hover { background: #3730a3; }
  .dugme.tehlike:hover { background: var(--kirmizi-zemin); border-color: #f0c2c2; }
  .mini:hover { background: #435273; }
  .tus:hover, .degisken-tus:hover { background: var(--tus-ust); }
  .degisken-tus:hover { background: #4a5b7d; }
  .tus.kesir:hover { background: #55608c; }
  .tus.islem:hover { background: #55608c; }
  .tus.iliski:hover { background: #3a6d78; }
  .tus.duzelt:hover { background: #67405a; }
  .tus.ok:hover { background: #4c5677; }
  .coz-dugme:hover { filter: brightness(1.08); }
  .html-al:hover { background: var(--vurgu-acik); border-color: #c7cbfb; color: var(--vurgu); }
  .menu-bag:hover { background: #232c40; }
  .aile-kart:hover { border-color: #a5abf7; transform: translateY(-2px); }
  .izsuru a:hover { text-decoration: underline; }
  a.yontem-kart:hover { border-color: #a5abf7; transform: translateY(-2px); }
  .sut-sil:hover { background: var(--kirmizi-zemin); color: var(--kirmizi); }
  .secim button:hover { background: #2e3850; }
  table.ahp-tablo td.ust:hover { background: #f7f9fe; }
  .ne-dir:hover { border-color: var(--vurgu); color: var(--vurgu); }
  .yon-dugme.fayda:hover { background: #c6e8da; }
  .yon-dugme.maliyet:hover { background: #f8d1c5; }
  .pisti-kart.oynanabilir:hover { transform: translateY(-4px); box-shadow: 0 4px 10px rgba(16,24,40,.18); }
  .kapi.tiklanabilir:hover { transform: translateY(-4px); box-shadow: 0 6px 16px rgba(67,56,202,.45); }
  .katman-kapat:hover { background: #f2f5fa; color: var(--koyu-2); }
}