/* ═══════════════════════════════════════════════════════════════════════
   MXGrid — Excel gibi tablo (Matris modülü, 13.10.2026)
   Bileşen: js/mxgrid.js · sözleşme CLAUDE_MD/MATRIS.md → "MXGrid".
   Renkler YALNIZ token satırlarında; koyu tema `:root[data-theme="dark"] .mxg`.
   Yazı ile zemin ayrı token (koyu temada zemin koyu kalırken yazı açılır).
   Kap yüksekliğini EKRAN verir (ör. `.mxEkran .mxg{height:…}`); bileşen
   yalnız en az yüksekliği koyar.
   Katmanlar: .mxgUst (3) > .mxgDon (2) > .mxgGov (0) · kaplama 1-3 · düzenleyici 6.
   ═══════════════════════════════════════════════════════════════════════ */
.mxg{
  --mxg-zemin:var(--surface);
  --mxg-yazi:var(--ink);
  --mxg-cizgi:var(--line);
  --mxg-basZemin:var(--surface2);
  --mxg-basYazi:var(--ink2);
  --mxg-sbYazi:var(--muted-aa);
  --mxg-donCizgi:#b7c0cc;
  --mxg-secim:#1e7145;
  --mxg-secimPasif:#98a3b1;
  --mxg-secimZemin:color-mix(in srgb, var(--mxg-secim) 13%, transparent);
  --mxg-basSecZemin:#d6ebdf;
  --mxg-basSecYazi:#0f4d2c;
  --mxg-panelZemin:#f1f4f8;
  --mxg-panelYazi:var(--ink2);
  --mxg-etiketYazi:var(--ink);
  --mxg-saltYazi:var(--ink2);
  --mxg-duzenZemin:var(--surface);
  --mxg-hata:var(--no);
  --mxg-kopya:#1e7145;
  --mxg-onizle:#5b6573;
  --mxg-tasiCizgi:#1f5fae;
}
:root[data-theme="dark"] .mxg{
  --mxg-donCizgi:#3f4d63;
  --mxg-secim:#4ec27f;
  --mxg-secimPasif:#5d6c82;
  --mxg-basSecZemin:#1d4433;
  --mxg-basSecYazi:#cdeedb;
  --mxg-panelZemin:#1a2433;
  --mxg-kopya:#4ec27f;
  --mxg-onizle:#a3b0c2;
  --mxg-tasiCizgi:#8fb8f0;
}

.mxg{
  position:relative; overflow:hidden; min-height:160px;
  background:var(--mxg-zemin); color:var(--mxg-yazi);
  font-size:12.5px; line-height:1.2;
  -webkit-user-select:none; user-select:none;
  contain:content;
}
.mxgKay{position:absolute; inset:0; overflow:auto; overscroll-behavior:contain}
.mxgAlan{position:relative}

/* ---- üst bant: panel satırları + başlık ---- */
.mxgUst{position:sticky; top:0; z-index:3; background:var(--mxg-basZemin)}
.mxgUstDon{position:sticky; left:0; z-index:2; background:var(--mxg-basZemin)}
.mxgUstGov{position:absolute; top:0; z-index:1}
.mxgUstSatir,.mxgBasSatir{position:absolute; left:0}
.mxgUstSatir{height:var(--mxg-h)}
.mxgBasSatir{height:var(--mxg-bh)}
.mxg.mxgDonuk .mxgUstDon{box-shadow:1px 0 0 var(--mxg-donCizgi)}

/* ---- gövde bölmeleri ---- */
.mxgDon{position:sticky; left:0; z-index:2; background:var(--mxg-zemin); cursor:cell}
.mxg.mxgDonuk .mxgDon{box-shadow:1px 0 0 var(--mxg-donCizgi)}
.mxgGov{position:absolute; z-index:0; cursor:cell}
.mxgSatir{position:absolute; left:0; top:0; height:var(--mxg-h)}

/* ---- hücre ---- */
.mxgH{
  position:absolute; top:0; height:var(--mxg-h); box-sizing:border-box;
  padding:0 6px; line-height:calc(var(--mxg-h) - 1px);
  border-right:1px solid var(--mxg-cizgi); border-bottom:1px solid var(--mxg-cizgi);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mxgSayi{font-variant-numeric:tabular-nums}
.mxgHizaSag{text-align:right}
.mxgHizaOrta{text-align:center}
.mxgHizaSol{text-align:left}
.mxgSalt{color:var(--mxg-saltYazi)}

/* satır başı (numara) */
.mxgSb{
  background:var(--mxg-basZemin); color:var(--mxg-sbYazi);
  text-align:right; font-size:11px; font-variant-numeric:tabular-nums; cursor:pointer;
}
.mxgSb.mxgSecili{background:var(--mxg-basSecZemin); color:var(--mxg-basSecYazi); font-weight:600}

/* sütun başlığı */
.mxgBas{
  position:absolute; top:0; height:var(--mxg-bh); box-sizing:border-box;
  display:flex; align-items:center; gap:2px; padding:2px 6px;
  border-right:1px solid var(--mxg-cizgi); border-bottom:1px solid var(--mxg-donCizgi);
  background:var(--mxg-basZemin); color:var(--mxg-basYazi);
  font-size:11.5px; font-weight:600; line-height:1.15; cursor:pointer; overflow:hidden;
}
.mxgBas.mxgHizaSag{justify-content:flex-end; text-align:right}
.mxgBas.mxgHizaOrta{justify-content:center; text-align:center}
.mxgBasYazi{
  min-width:0; overflow:hidden; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
}
.mxgBas.mxgSecili{background:var(--mxg-basSecZemin); color:var(--mxg-basSecYazi)}
.mxgHuni{
  display:none; flex:none; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:3px; cursor:pointer;
  color:var(--muted-aa); font-size:11px;
}
.mxgBas.mxgHuniVar .mxgHuni{display:inline-flex}
.mxgBas.mxgHuniAktif .mxgHuni{color:var(--mxg-secim); background:var(--mxg-secimZemin)}
.mxgHuni:hover{background:var(--mxg-secimZemin)}

/* sütun taşıma: tutamaç (yalnız `tasinir` kolonda, üstüne gelince belirir) +
   sürüklenen başlığın hayaleti + bırakma çizgisi (`mxgrid.js > tasiAdim`) */
.mxgTut{
  display:none; position:absolute; left:0; top:0; bottom:0; width:12px;
  align-items:center; justify-content:center; cursor:grab;
  color:var(--muted-aa); font-size:10px; letter-spacing:-2px; opacity:0;
}
.mxgBas.mxgTasinir{padding-left:13px}
.mxgBas.mxgTasinir .mxgTut{display:flex}
.mxgBas.mxgTasinir:hover .mxgTut,.mxgTut:focus-visible{opacity:1}
.mxgTut:hover{color:var(--mxg-secim); background:var(--mxg-secimZemin)}
.mxgTasiHayalet{
  position:absolute; z-index:7; pointer-events:none; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center; padding:2px 6px;
  background:var(--mxg-basSecZemin); color:var(--mxg-basSecYazi);
  border:1px solid var(--mxg-secim); border-radius:3px; box-shadow:var(--shadow);
  font-size:11.5px; font-weight:600; opacity:.92; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.mxgTasiCizgi{position:absolute; z-index:7; width:3px; pointer-events:none; background:var(--mxg-tasiCizgi)}
.mxg.mxgTasiyor,.mxg.mxgTasiyor *{cursor:grabbing !important}

/* köşe: tümünü seç */
.mxgKose{
  position:absolute; left:0; height:var(--mxg-bh); box-sizing:border-box; cursor:cell;
  border-right:1px solid var(--mxg-cizgi); border-bottom:1px solid var(--mxg-donCizgi);
  background:linear-gradient(135deg, transparent 62%, var(--mxg-donCizgi) 62%);
}

/* panel satırları (sabit, salt-okunur) */
.mxgPanel{background:var(--mxg-panelZemin); color:var(--mxg-panelYazi); font-variant-numeric:tabular-nums}
.mxgEtiket{
  position:absolute; left:0; height:var(--mxg-h); box-sizing:border-box; padding:0 8px;
  line-height:calc(var(--mxg-h) - 1px); text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  border-bottom:1px solid var(--mxg-cizgi); background:var(--mxg-panelZemin);
  color:var(--mxg-etiketYazi); font-weight:600; font-size:11.5px;
}

/* ---- kaplama: seçim · kopya çerçevesi · doldurma önizlemesi ---- */
.mxgSecimZemin,.mxgSecim,.mxgKopya,.mxgOnizle{position:absolute; pointer-events:none; box-sizing:border-box}
.mxgSecimZemin{z-index:1; background:var(--mxg-secimZemin)}
.mxgSecim{z-index:2; border:2px solid var(--mxg-secim)}
.mxgSecim.mxgKesSag{border-right:0}
.mxgSecim.mxgKesSol{border-left:0}
.mxg.mxgOdakYok .mxgSecim{border-color:var(--mxg-secimPasif)}
.mxgOnizle{z-index:2; border:1px dashed var(--mxg-onizle)}
.mxgOnizle.mxgKesSag{border-right:0}
.mxgOnizle.mxgKesSol{border-left:0}
.mxgKopya{
  z-index:2;
  background-image:
    linear-gradient(90deg, var(--mxg-kopya) 50%, transparent 50%),
    linear-gradient(90deg, var(--mxg-kopya) 50%, transparent 50%),
    linear-gradient(0deg, var(--mxg-kopya) 50%, transparent 50%),
    linear-gradient(0deg, var(--mxg-kopya) 50%, transparent 50%);
  background-size:8px 2px, 8px 2px, 2px 8px, 2px 8px;
  background-position:0 0, 0 100%, 0 0, 100% 0;
  background-repeat:repeat-x, repeat-x, repeat-y, repeat-y;
  animation:mxgKarinca .5s linear infinite;
}
.mxgKopya.mxgKesSag{background-size:8px 2px, 8px 2px, 2px 8px, 0 0}
.mxgKopya.mxgKesSol{background-size:8px 2px, 8px 2px, 0 0, 2px 8px}
@keyframes mxgKarinca{to{background-position:8px 0, -8px 100%, 0 -8px, 100% 8px}}
@media (prefers-reduced-motion:reduce){.mxgKopya{animation:none}}

.mxgTutamac{
  position:absolute; z-index:3; width:7px; height:7px; box-sizing:border-box;
  background:var(--mxg-secim); border:1px solid var(--mxg-zemin); cursor:crosshair;
}
.mxg.mxgOdakYok .mxgTutamac{background:var(--mxg-secimPasif)}

/* ---- odak tutucu / düzenleyici ----
   Boştayken görünmez ve tıklamayı geçirir; düzenlerken hücrenin üstünde durur. */
.mxgGiris{
  position:absolute; left:0; top:0; z-index:6; margin:0; padding:0 6px;
  box-sizing:border-box; border:0; outline:0; resize:none; overflow:hidden;
  white-space:pre; font:inherit; line-height:calc(var(--mxg-h) - 2px);
  color:var(--mxg-yazi); background:transparent;
  opacity:0; pointer-events:none; -webkit-user-select:text; user-select:text;
}
.mxgGiris.mxgDuzen{
  opacity:1; pointer-events:auto; padding:0 5px;
  background:var(--mxg-duzenZemin); border:2px solid var(--mxg-secim);
  box-shadow:var(--shadow); line-height:calc(var(--mxg-h) - 4px);
}
.mxgGiris.mxgHatali{border-color:var(--mxg-hata)}