/* ============================================================
   Excel ızgarası + "Excel'de dene" kutusu — Konsept C "Tavus kuşu"
   Kaynak tasarım: docs/excel-sinavi/prototip (gorev.html ızgara bölümü).
   Bileşen: resources/js/excel-sinavi/izgara · API: docs/excel-sinavi/izgara-api.md
   Kurallar: ham renk YOK (yalnız palet/site tokenları), gölge/gradyan/geçiş/animasyon YOK,
   hover yalnız kenarlık/zemin. Gece modu yalnız gri (html[data-theme="dark"] eşlemesi aşağıda).
   Yükleme sırası: tokens.css → utilities.css → site-bilesenleri.css → gece-site.css → bu dosya.
   Bütün seçiciler .xi (ızgara kökü) ya da .xd (kutu kökü) altında; dışarı sızmaz.
   ============================================================ */

/* ---------- Bileşen tokenları (palet değişkenlerine bağlı) ---------- */
.xi,
.xd {
    --xi-c: var(--c, var(--kat-beceri));
    --xi-c-acik: var(--c-acik, var(--kat-beceri-acik));
    --xi-yuzey: var(--site-yuzey);
    --xi-metin: var(--site-baslik);
    --xi-metin-soluk: var(--site-metin);
    --xi-cizgi: var(--slate-200);
    --xi-cizgi-guclu: var(--site-cizgi-guclu);
    --xi-baslik-zemin: var(--slate-100);
    --xi-secim-zemin: var(--slate-200);
    --xi-odak: var(--site-odak);
    --xi-dogru: var(--green-900);
    --xi-dogru-acik: var(--green-100);
    --xi-kismi: var(--clay-700);
    --xi-kismi-acik: var(--clay-100);
    --xi-yanlis: var(--wine-700);
    --xi-yanlis-acik: var(--wine-100);
    /* Başvuru renkleri (Excel "range finder"): yalnız palet koyuları; gece hepsi gri, ayrım çizgi türüyle */
    --xi-ref-0: var(--blue-800);
    --xi-tasma: var(--xi-ref-0);
    --xi-ref-1: var(--wine-700);
    --xi-ref-2: var(--green-900);
    --xi-ref-3: var(--plum-700);
    --xi-ref-4: var(--orange-700);
    --xi-ref-5: var(--teal-700);
    --xi-ref-6: var(--clay-700);
    --xi-ref-7: var(--slate-700);
    --xi-hucre-h: 36px;
    --xi-satirno-w: 48px;
    --xi-baslik-h: 32px;
    --xi-kaydir-h: 520px;
    --xi-kod: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

@media (max-width: 768px) {
    .xi,
    .xd {
        --xi-hucre-h: 40px;
        --xi-satirno-w: 40px;
        --xi-kaydir-h: 452px;
    }
}

html[data-theme="dark"]:not(.panel-html) :is(.xi, .xd) {
    --xi-cizgi: var(--g-4);
    --xi-baslik-zemin: var(--g-2);
    --xi-secim-zemin: var(--g-4);
    --xi-metin-soluk: var(--g-8);
    --xi-dogru: var(--g-9);
    --xi-dogru-acik: var(--g-3);
    --xi-kismi: var(--g-9);
    --xi-kismi-acik: var(--g-3);
    --xi-yanlis: var(--g-9);
    --xi-yanlis-acik: var(--g-3);
    --xi-ref-0: var(--g-9);
    --xi-ref-1: var(--g-9);
    --xi-ref-2: var(--g-9);
    --xi-ref-3: var(--g-9);
    --xi-ref-4: var(--g-9);
    --xi-ref-5: var(--g-9);
    --xi-ref-6: var(--g-9);
    --xi-ref-7: var(--g-9);
}

/* ---------- Kök ---------- */
.xi {
    position: relative; /* ekran okuyucu metinleri (position:absolute) kökte kalsın, kırpılan sekme şeridinden taşmasın */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    overflow: hidden;
    border: 2px solid var(--xi-cizgi);
    border-radius: var(--site-radius-kart);
    background: var(--xi-yuzey);
    color: var(--xi-metin);
    font-family: var(--site-font);
    font-variant-numeric: tabular-nums;
}
.xi *,
.xi *::before,
.xi *::after { box-sizing: border-box; }
.xi.xi--doldur { height: 100%; grid-template-rows: auto auto minmax(0, 1fr) auto auto auto; }

/* ---------- Formül çubuğu ---------- */
.xi .xi-cubuk {
    display: grid;
    grid-template-columns: 112px auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-bottom: 1px solid var(--xi-cizgi);
    background: var(--xi-yuzey);
}
.xi .xi-ad,
.xi .xi-formul {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: var(--site-kontrol-h);
    margin: 0;
    padding: 0 12px;
    border: 2px solid var(--xi-cizgi);
    border-radius: var(--site-radius-alan);
    background: var(--xi-yuzey);
    color: var(--xi-metin);
    font: 700 16px/1 var(--xi-kod);
}
.xi .xi-ad { text-align: center; font-family: var(--site-font); font-weight: 900; }
.xi .xi-ad:focus,
.xi .xi-formul:focus { border-color: var(--xi-c); }
.xi .xi-formul[readonly] { color: var(--xi-metin-soluk); }
/* Taşan hücre seçiliyken formül çubuğu kaynak formülü soluk gösterir (renkli kipte yazıyı ayna katmanı çizer) */
.xi .xi-formul.xi-formul--hayalet,
.xi .xi-formul-kap:has(.xi-formul--hayalet) .xi-ayna,
.xi .xi-formul-kap:has(.xi-formul--hayalet) .xi-ayna * { color: var(--xi-metin-soluk); }

/* ---------- Renkli başvuru aynası: girdi metni saydam, arkadaki ayna aynı yazı tipiyle renkli çizilir ---------- */
.xi .xi-formul-kap { position: relative; display: block; min-width: 0; }
.xi .xi-ayna {
    position: absolute;
    inset: 0;
    overflow: hidden;
    padding: 0 12px;
    border: 2px solid transparent;
    border-radius: var(--site-radius-alan);
    background: var(--xi-yuzey);
    color: var(--xi-metin);
    font: 700 16px/40px var(--xi-kod);
    white-space: pre;
    pointer-events: none;
    visibility: hidden;
}
.xi.xi--renkli .xi-ayna { visibility: visible; }
.xi.xi--renkli .xi-formul-kap .xi-formul { position: relative; background: transparent; color: transparent; caret-color: var(--xi-metin); }
.xi .xi-ayna--editor {
    inset: auto;
    z-index: 4;
    padding: 0 9px;
    border-radius: 0;
    font: 700 16px var(--site-font);
}
.xi .xi-ayna--editor[hidden] { display: none; }
.xi.xi--renkli .xi-editor { background: transparent; color: transparent; caret-color: var(--xi-metin); }
.xi .xi-ref { text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.xi .xi-ref--0 { color: var(--xi-ref-0); text-decoration-style: solid; }
.xi .xi-ref--1 { color: var(--xi-ref-1); text-decoration-style: dashed; }
.xi .xi-ref--2 { color: var(--xi-ref-2); text-decoration-style: dotted; }
.xi .xi-ref--3 { color: var(--xi-ref-3); text-decoration-style: double; }
.xi .xi-ref--4 { color: var(--xi-ref-4); text-decoration-style: wavy; }
.xi .xi-ref--5 { color: var(--xi-ref-5); text-decoration-style: dashed; text-decoration-thickness: 3px; }
.xi .xi-ref--6 { color: var(--xi-ref-6); text-decoration-style: dotted; text-decoration-thickness: 3px; }
.xi .xi-ref--7 { color: var(--xi-ref-7); text-decoration-style: solid; text-decoration-thickness: 3px; }
/* Parantez eşi: zemin + çizgi kalınlığı (genişlik değişmez, imleç kaymaz) */
.xi .xi-parantez-es { background: var(--xi-secim-zemin); -webkit-text-stroke: .7px currentColor; }

/* ---------- İşlev önerileri (otomatik tamamlama) ve argüman ipucu ---------- */
.xi .xi-tamamla,
.xi .xi-ipucu {
    position: absolute;
    z-index: 20;
    width: min(26rem, calc(100% - 16px));
    max-height: min(22rem, calc(100% - 16px));
    overflow: auto;
    border: 2px solid var(--xi-cizgi-guclu);
    border-radius: var(--site-radius-alan);
    background: var(--xi-yuzey);
    color: var(--xi-metin);
}
.xi :is(.xi-tamamla, .xi-ipucu)[hidden] { display: none; }
/* Kutular fare olaylarını yutmaz (altındaki hücre/başlık seçimi sürer); yalnız tıklanabilir iç öğeler alır */
.xi :is(.xi-tamamla, .xi-ipucu) { pointer-events: none; }
.xi :is(.xi-tamamla-oge, .xi-ipucu-ad, .xi-ipucu-arg, .xi-ipucu-aciklama, .xi-ipucu-tut, .xi-ipucu-satir) { pointer-events: auto; }
/* Excel gibi: ipucu kutusu her yerinden sürüklenir */
.xi .xi-ipucu-satir { cursor: move; }
.xi .xi-ipucu-arg { padding: 0; border: 0; border-radius: 4px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.xi .xi-ipucu-arg:hover { background: var(--xi-secim-zemin); text-decoration: underline; }
.xi .xi-ipucu-arg.xi-ipucu-etkin { font-weight: 900; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---------- Sonuç ipucu (seçili parçanın / formülün değeri) ---------- */
.xi .xi-sonuc {
    position: absolute;
    z-index: 21;
    max-width: min(28rem, calc(100% - 16px));
    padding: 3px 10px;
    border: 2px solid var(--xi-cizgi-guclu);
    border-radius: var(--site-radius-rozet);
    background: var(--xi-yuzey);
    color: var(--xi-metin);
    font: 700 13px/1.4 var(--xi-kod);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}
.xi .xi-sonuc[hidden] { display: none; }
.xi .xi-sonuc--secim { border-color: var(--xi-c); background: var(--xi-c-acik); }
.xi .xi-sonuc-etiket { color: var(--xi-metin-soluk); font-family: var(--site-font); font-weight: 700; }

/* ---------- fx: işlev listesi ---------- */
/* fx: Excel "İşlev Ekle" penceresi (kipli; perde + pencere) */
.xi .xi-islevler { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 16px; background: rgba(15, 23, 15, .38); }
.xi .xi-islevler[hidden] { display: none; }
.xi .xi-islev-pencere {
    width: min(36rem, 100%);
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    display: grid;
    grid-template-rows: auto auto auto auto minmax(7rem, 1fr) auto auto auto;
    gap: 8px;
    padding: 0 0 14px;
    border: 1px solid var(--xi-cizgi-guclu);
    border-radius: 10px;
    background: var(--xi-yuzey);
    color: var(--xi-metin);
    font: 500 14px/1.4 var(--site-font);
    box-sizing: border-box;
    overflow: hidden;
}
.xi .xi-islev-bas { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--xi-cizgi); background: var(--xi-baslik-zemin); }
.xi .xi-islev-baslik { margin: 0; font: 800 15px/1.2 var(--site-font); color: var(--xi-metin); }
.xi .xi-islev-kapat { width: 30px; height: 30px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--xi-metin); font: 900 20px/1 var(--site-font); cursor: pointer; }
.xi .xi-islev-kapat:hover { background: var(--xi-secim-zemin); }
.xi .xi-islev-satir { display: grid; gap: 4px; padding: 0 16px; }
.xi .xi-islev-etiket { padding: 0 16px; color: var(--xi-metin); font: 700 13px/1.3 var(--site-font); }
.xi .xi-islev-satir .xi-islev-etiket { padding: 0; }
.xi .xi-islev-ara-kutu { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.xi .xi-islev-ara { min-width: 0; height: var(--site-kontrol-h-sm); padding: 0 10px; border: 1px solid var(--xi-cizgi-guclu); border-radius: 6px; background: var(--xi-yuzey); color: var(--xi-metin); font: 600 14px var(--site-font); }
.xi .xi-islev-ara:focus, .xi .xi-islev-kategori-sec:focus, .xi .xi-islev-liste:focus { outline: none; border-color: var(--xi-c); box-shadow: none; }
.xi .xi-islev-ara::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.xi .xi-islev-git, .xi .xi-islev-tamam, .xi .xi-islev-iptal { min-width: 84px; height: var(--site-kontrol-h-sm); padding: 0 14px; border: 1px solid var(--xi-cizgi-guclu); border-radius: 6px; background: var(--xi-yuzey); color: var(--xi-metin); font: 800 13px var(--site-font); cursor: pointer; }
.xi .xi-islev-git:hover, .xi .xi-islev-iptal:hover { border-color: var(--xi-c); background: var(--xi-c-acik); }
.xi .xi-islev-tamam { border-color: var(--xi-c); background: var(--xi-c); color: #fff; }
.xi .xi-islev-tamam:hover { filter: none; background: var(--xi-metin); border-color: var(--xi-metin); }
.xi .xi-islev-kategori-sec { height: var(--site-kontrol-h-sm); padding: 0 8px; border: 1px solid var(--xi-cizgi-guclu); border-radius: 6px; background: var(--xi-yuzey); color: var(--xi-metin); font: 600 14px var(--site-font); }
.xi .xi-islev-liste { margin: 0 16px; padding: 3px; border: 1px solid var(--xi-cizgi-guclu); border-radius: 6px; background: var(--xi-yuzey); overflow: auto; min-height: 7rem; }
.xi .xi-islev-oge { padding: 5px 10px; border-radius: 4px; font: 700 14px/1.3 var(--xi-kod); color: var(--xi-metin); cursor: default; user-select: none; }
.xi .xi-islev-oge[hidden] { display: none; }
.xi .xi-islev-oge[data-durum="desteklenmiyor"] { color: var(--xi-metin-soluk); }
.xi .xi-islev-oge[data-durum="yasak"] { color: var(--xi-metin-soluk); text-decoration: line-through; }
.xi .xi-islev-oge:hover { background: var(--xi-secim-zemin); }
.xi .xi-islev-oge[aria-selected="true"] { background: var(--xi-c); color: #fff; }
.xi .xi-islev-bos { margin: 0; padding: 0 16px; color: var(--xi-metin-soluk); font-size: 13px; }
.xi .xi-islev-bos[hidden] { display: none; }
.xi .xi-islev-bilgi { min-height: 3.2rem; margin: 0 16px; display: grid; gap: 4px; }
.xi .xi-islev-soz { font: 800 14px/1.35 var(--xi-kod); color: var(--xi-metin); overflow-wrap: anywhere; }
.xi .xi-islev-aciklama { font: 500 13px/1.4 var(--site-font); color: var(--xi-metin-soluk); }
.xi .xi-islev-alt { display: flex; align-items: center; gap: 8px; padding: 8px 16px 0; border-top: 1px solid var(--xi-cizgi); }
.xi .xi-islev-yardim { margin-right: auto; color: var(--xi-c); font: 700 13px var(--site-font); text-decoration: underline; }
.xi .xi-islev-yardim[hidden] { display: none; }
@media (max-width: 640px) {
    .xi .xi-islevler { padding: 8px; align-items: end; }
    .xi .xi-islev-pencere { max-height: calc(100dvh - 16px); }
    .xi .xi-islev-alt { flex-wrap: wrap; }
    .xi .xi-islev-yardim { flex-basis: 100%; margin-right: 0; }
}
.xi .xi-tamamla { padding: 4px; }
.xi .xi-tamamla-oge {
    display: grid;
    gap: 2px;
    min-height: var(--site-kontrol-h);
    padding: 6px 10px;
    border: 2px solid transparent;
    border-radius: var(--site-radius-rozet);
    cursor: pointer;
}
.xi .xi-tamamla-oge[aria-selected="true"] { border-color: var(--xi-c); background: var(--xi-c-acik); }
.xi .xi-tamamla-ad { font: 800 15px/1.2 var(--xi-kod); }
.xi .xi-tamamla-alt { overflow: hidden; color: var(--xi-metin-soluk); font-size: 13px; font-weight: 600; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.xi .xi-tamamla-oge[aria-selected="true"] .xi-tamamla-alt { color: var(--xi-metin); }
.xi .xi-ipucu { padding: 4px 12px 8px; font-size: 14px; line-height: 1.45; }
/* Taşıma tutamacı (Excel'de ipucu kutusu sürüklenebilir) */
.xi .xi-ipucu-tut {
    display: block;
    width: 48px;
    height: 12px;
    margin: 0 auto 4px;
    padding: 0;
    border: 0;
    border-top: 3px double var(--xi-cizgi-guclu);
    background: transparent;
    cursor: move;
    touch-action: none;
}
.xi .xi-ipucu-tut:focus-visible { outline: 3px solid var(--xi-odak); outline-offset: 2px; }
.xi .xi-ipucu-satir { font-family: var(--xi-kod); overflow-wrap: anywhere; }
.xi .xi-ipucu-ad {
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--xi-c);
    font: 800 14px/1.45 var(--xi-kod);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.xi .xi-ipucu-etkin { font-weight: 900; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.xi .xi-ipucu-aciklama { margin: 6px 0 0; padding-top: 6px; border-top: 1px dashed var(--xi-cizgi-guclu); font-family: var(--site-font); color: var(--xi-metin-soluk); }
.xi .xi-fx {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: var(--site-kontrol-h);
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--site-radius-rozet);
    background: transparent;
    color: var(--xi-c);
    font: italic 900 18px var(--site-font);
    cursor: pointer;
}
.xi .xi-fx:hover, .xi .xi-fx:focus-visible { border-color: var(--xi-c); background: var(--xi-c-acik); outline: none; }

/* ---------- Öneri / uyarı satırı ---------- */
.xi .xi-oneri {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--xi-cizgi);
    background: var(--xi-kismi-acik);
    color: var(--xi-kismi);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
}
.xi .xi-oneri[hidden] { display: none; }
.xi .xi-oneri-metin { flex: 1 1 16rem; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.xi .xi-oneri-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; }

.xi .xi-dugme,
.xd .xi-dugme {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: var(--site-kontrol-h-sm);
    margin: 0;
    padding: 0 14px;
    border: 2px solid currentColor;
    border-radius: var(--site-radius-alan);
    background: transparent;
    color: inherit;
    font: 800 14px/1.1 var(--site-font);
    white-space: nowrap;
    cursor: pointer;
}
.xi .xi-dugme::after { content: ""; position: absolute; inset: -4px 0; }
.xi .xi-dugme[aria-pressed="true"],
.xi .xi-dugme--birincil { border-color: var(--xi-c); background: var(--xi-c); color: var(--xi-c-acik); }

/* ---------- Kaydırıcı ve tablo ---------- */
.xi .xi-kaydir {
    position: relative;
    min-height: 0;
    max-height: var(--xi-kaydir-h);
    overflow: auto;
    overscroll-behavior: contain;
    background: var(--xi-yuzey);
}
.xi.xi--doldur .xi-kaydir { max-height: none; }
.xi .xi-kaydir:has(td:focus-visible) { outline: 3px solid var(--xi-odak); outline-offset: -3px; }

.xi .xi-tablo {
    margin: 0;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    color: var(--xi-metin);
    font-size: 15px;
    line-height: 1.2;
    user-select: none;
    -webkit-user-select: none;
}
.xi .xi-col-no { width: var(--xi-satirno-w); }
.xi .xi-tablo th,
.xi .xi-tablo td {
    height: var(--xi-hucre-h);
    padding: 0 10px;
    border: 0;
    border-right: 1px solid var(--xi-cizgi);
    border-bottom: 1px solid var(--xi-cizgi);
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: pre;
    vertical-align: middle;
}
.xi .xi-tablo thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    height: var(--xi-baslik-h);
    padding: 0;
    background: var(--xi-baslik-zemin);
    color: var(--xi-metin-soluk);
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    cursor: s-resize;
}
.xi .xi-tablo thead th.xi-kose { left: 0; z-index: 6; cursor: cell; }
.xi .xi-tablo tbody th {
    position: sticky;
    left: 0;
    z-index: 3;
    padding: 0;
    background: var(--xi-baslik-zemin);
    color: var(--xi-metin-soluk);
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    cursor: e-resize;
}
.xi .xi-tablo td {
    position: relative;
    background: var(--xi-yuzey);
    cursor: cell;
}
.xi .xi-tablo td:focus { outline: none; }
/* Dolgu sütunu (kalan genişlik): hücre değil */
.xi .xi-tablo :is(th, td).xi-dolgu { padding: 0; border-right: 0; cursor: default; }
.xi .xi-tablo thead th.xi-dolgu { cursor: default; }
.xi .xi-tablo.xi-tablo--dondur tbody tr:first-child > * { position: sticky; top: var(--xi-baslik-h); z-index: 3; }
.xi .xi-tablo.xi-tablo--dondur tbody tr:first-child > th { z-index: 5; }
.xi .xi-tablo td.xi-dondur { font-size: 13.5px; font-weight: 900; border-bottom: 2px solid var(--xi-cizgi-guclu); }

.xi .xi-sutun-tutamac {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    touch-action: none;
}

/* Seçili satır/sütun başlığı */
.xi .xi-tablo thead th.xi-bas-sec { border-bottom: 3px solid var(--xi-c); color: var(--xi-metin); }
.xi .xi-tablo tbody th.xi-bas-sec { border-right: 3px solid var(--xi-c); color: var(--xi-metin); }
.xi .xi-tablo thead th.xi-sutun-cevap { background: var(--xi-c-acik); color: var(--xi-c); font-weight: 900; }
.xi .xi-tablo thead th.xi-sutun-cevap::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--xi-c);
    vertical-align: 1px;
}

/* ---------- Hücre durumları ---------- */
.xi .xi-tablo td.xi-sayi { text-align: right; }
.xi .xi-tablo td.xi-mantik,
.xi .xi-tablo td.xi-hata { text-align: center; }
.xi .xi-tablo td.xi-hata { font-weight: 900; }
.xi .xi-tablo td.xi-kilit { color: var(--xi-metin-soluk); }
.xi .xi-tablo td.xi-cevap { background: var(--xi-c-acik); color: var(--xi-c); font-weight: 700; }
/* Kullanılacak veri vurgusu (vurgula): senaryonun açık tonu dolgu + kalın koyu kenar katmanı */
.xi .xi-tablo td.xi-vurgulu { background: var(--xi-c-acik); color: var(--xi-metin); }
.xi .xi-tablo td.xi-sec { background: var(--xi-secim-zemin); color: var(--xi-metin); }
.xi .xi-tablo td.xi-sec.xi-etkin { background: var(--xi-yuzey); }
/* Dinamik dizi taşması: seçili taşma alanının çevresinde ince kenar (Excel'deki gibi); kenarlar ayrı sınıflardan birleşir */
.xi .xi-tablo td.xi-ta {
    --xi-ta-u: 0 0 transparent;
    --xi-ta-a: 0 0 transparent;
    --xi-ta-s: 0 0 transparent;
    --xi-ta-g: 0 0 transparent;
    box-shadow: var(--xi-ta-u), var(--xi-ta-a), var(--xi-ta-s), var(--xi-ta-g);
}
.xi .xi-tablo td.xi-ta-u { --xi-ta-u: inset 0 2px var(--xi-tasma); }
.xi .xi-tablo td.xi-ta-a { --xi-ta-a: inset 0 -2px var(--xi-tasma); }
.xi .xi-tablo td.xi-ta-s { --xi-ta-s: inset 2px 0 var(--xi-tasma); }
.xi .xi-tablo td.xi-ta-g { --xi-ta-g: inset -2px 0 var(--xi-tasma); }
/* Formül köşe işareti (senaryo renginde) */
.xi .xi-tablo td.xi-f::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-top: 8px solid var(--xi-c);
    border-right: 8px solid transparent;
}
/* Sayı metin olarak duruyor: alt sol köşe */
.xi .xi-tablo td.xi-metin-sayi::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom: 8px solid var(--xi-kismi);
    border-right: 8px solid transparent;
}
/* Pratik / demo işaretleri: renk + ikon (gece gri; ikon anlamı taşır) */
.xi .xi-tablo td:is(.xi-d-dogru, .xi-d-kismi, .xi-d-yanlis) { padding-right: 34px; font-weight: 700; }
.xi .xi-tablo td:is(.xi-d-dogru, .xi-d-kismi, .xi-d-yanlis)::after {
    position: absolute;
    top: 0;
    right: 6px;
    bottom: 0;
    display: grid;
    place-items: center;
    width: 22px;
    font-size: 14px;
    font-weight: 900;
}
.xi .xi-tablo td.xi-d-dogru { background: var(--xi-dogru-acik); color: var(--xi-dogru); }
.xi .xi-tablo td.xi-d-dogru::after { content: "\2713"; content: "\2713" / ""; color: var(--xi-dogru); }
.xi .xi-tablo td.xi-d-kismi { background: var(--xi-kismi-acik); color: var(--xi-kismi); }
.xi .xi-tablo td.xi-d-kismi::after { content: "\25D0"; content: "\25D0" / ""; color: var(--xi-kismi); }
.xi .xi-tablo td.xi-d-yanlis { background: var(--xi-yanlis-acik); color: var(--xi-yanlis); }
.xi .xi-tablo td.xi-d-yanlis::after { content: "\2717"; content: "\2717" / ""; color: var(--xi-yanlis); }
.xi .xi-tablo td:is(.xi-d-dogru, .xi-d-kismi, .xi-d-yanlis).xi-f::before { border-top-color: currentColor; }
.xi.xi--formuller .xi-tablo td.xi-f { font-family: var(--xi-kod); font-size: 13px; text-align: left; }
.xi.xi--salt .xi-tablo td { cursor: default; }

/* ---------- Katmanlar ---------- */
.xi :is(.xi-alan, .xi-secim, .xi-onizleme, .xi-basvuru, .xi-vurgu, .xi-pano) {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}
.xi :is(.xi-alan, .xi-secim, .xi-onizleme, .xi-basvuru, .xi-vurgu, .xi-pano)[hidden] { display: none; }
.xi .xi-alan { border: 2px dashed var(--xi-c); }
.xi .xi-secim { border: 2px solid var(--xi-c); }
.xi .xi-onizleme { border: 2px dashed var(--xi-cizgi-guclu); }
.xi .xi-pano { border: 2px dashed var(--xi-metin); }
.xi .xi-vurgu { border: 3px solid var(--xi-c); }
.xi .xi-basvuru { border: 2px solid var(--xi-ref-0); }
.xi .xi-basvuru--1 { border: 2px dashed var(--xi-ref-1); }
.xi .xi-basvuru--2 { border: 3px dotted var(--xi-ref-2); }
.xi .xi-basvuru--3 { border: 4px double var(--xi-ref-3); }
.xi .xi-basvuru--4 { border: 3px solid var(--xi-ref-4); }
.xi .xi-basvuru--5 { border: 3px dashed var(--xi-ref-5); }
.xi .xi-basvuru--6 { border: 2px dotted var(--xi-ref-6); }
.xi .xi-basvuru--7 { border: 6px double var(--xi-ref-7); }

.xi .xi-tutamac {
    position: absolute;
    z-index: 3;
    width: 14px;
    height: 14px;
    margin: 0;
    padding: 0;
    border: 2px solid var(--xi-yuzey);
    border-radius: 50%;
    background: var(--xi-c);
    cursor: crosshair;
    touch-action: none;
}
.xi .xi-tutamac[hidden] { display: none; }
.xi .xi-tutamac::after { content: ""; position: absolute; inset: -15px; }

.xi .xi-editor {
    position: absolute;
    z-index: 5;
    min-width: 0;
    margin: 0;
    padding: 0 9px;
    border: 2px solid var(--xi-c);
    border-radius: 0;
    background: var(--xi-yuzey);
    color: var(--xi-metin);
    font: 700 16px var(--site-font);
    outline: none;
}
.xi .xi-editor[hidden] { display: none; }

/* ---------- Sekmeler ve durum ---------- */
.xi .xi-alt {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    min-height: 48px;
    padding-inline: 8px 12px;
    border-top: 1px solid var(--xi-cizgi);
    background: var(--xi-baslik-zemin);
}
.xi .xi-sekmeler { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.xi .xi-sekme {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0 0 var(--site-radius-rozet) var(--site-radius-rozet);
    background: transparent;
    color: var(--xi-metin-soluk);
    font: 800 14px/1.1 var(--site-font);
    white-space: nowrap;
    cursor: pointer;
}
.xi .xi-sekme[aria-selected="true"] { border-bottom-color: var(--xi-c); background: var(--xi-yuzey); color: var(--xi-c); }
.xi .xi-sekme:focus-visible { outline: 3px solid var(--xi-odak); outline-offset: -3px; }
.xi .xi-ikon {
    flex: none;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.xi .xi-durum {
    display: flex;
    align-items: center;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--xi-metin-soluk);
    font-size: 13px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Dokunmatik düzenleme çubuğu ---------- */
.xi .xi-dokun {
    display: grid;
    gap: 8px;
    padding: 8px;
    border-top: 1px solid var(--xi-cizgi);
    background: var(--xi-yuzey);
    color: var(--xi-metin);
}
.xi .xi-dokun[hidden] { display: none; }
.xi .xi-dokun-satir { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.xi .xi-dokun-satir .xi-dugme { min-height: var(--site-kontrol-h); padding: 0 8px; white-space: normal; text-align: center; }
.xi .xi-dokun-semboller { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.xi .xi-dugme--sembol { min-height: var(--site-kontrol-h); padding: 0; font-family: var(--xi-kod); font-size: 17px; }

@media (max-width: 760px) {
    .xi .xi-cubuk { grid-template-columns: 84px auto minmax(0, 1fr); gap: 6px; }
    .xi .xi-fx { width: 22px; }
    .xi .xi-durum { display: none; }
    .xi .xi-alt { padding-inline: 4px; }
    .xi .xi-dokun-satir { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .xi .xi-dokun-satir .xi-dugme:last-child { grid-column: 1 / -1; }
    .xi .xi-dokun-semboller { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---------- Küçük (blog kutusu) ---------- */
.xi.xi--kucuk { --xi-kaydir-h: 24rem; }

/* ============================================================
   "Excel'de dene" kutusu (<x-excel-dene>) — iç içe kutu yok: kutu düz bölüm,
   yalnız ızgaranın kendi çerçevesi var; üstte kategori renginde çizgi.
   ============================================================ */
.xd {
    position: relative;
    display: grid;
    gap: 16px;
    min-width: 0;
    margin-block: var(--site-bosluk-blok);
    padding-top: 20px;
    border-top: 4px solid var(--xi-c);
    color: var(--site-metin);
}
.xd .xd-bas { display: grid; gap: 6px; min-width: 0; }
.xd .xd-kicker { margin: 0; color: var(--xi-c); }
.xd .xd-baslik { margin: 0; color: var(--site-baslik); font-size: clamp(22px, 2.4vw, 28px); font-weight: 900; line-height: 1.15; }
.xd .xd-aciklama { margin: 0; font-size: 17px; line-height: 1.55; }
.xd .xd-alan { min-width: 0; }
.xd .xd-statik-wrap { overflow-x: auto; border: 2px solid var(--xi-cizgi); border-radius: var(--site-radius-kart); background: var(--xi-yuzey); }
.xd .xd-statik { width: 100%; margin: 0; border-collapse: collapse; color: var(--site-baslik); font-size: 15px; }
.xd .xd-statik :is(th, td) {
    height: var(--xi-hucre-h);
    padding: 0 10px;
    border-right: 1px solid var(--xi-cizgi);
    border-bottom: 1px solid var(--xi-cizgi);
    text-align: left;
    white-space: pre;
}
.xd .xd-statik th { background: var(--xi-baslik-zemin); color: var(--xi-metin-soluk); font-size: 13px; font-weight: 800; text-align: center; }
.xd .xd-statik td.xd-statik-hedef { background: var(--xi-c-acik); color: var(--xi-c); }
.xd .xd-eylemler { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 10px; }
.xd .xd-eylemler[hidden] { display: none; }
.xd .xd-eylemler .oy-btn { min-width: 0; }
.xd .xd-yazim { display: flex; align-items: center; justify-content: flex-end; gap: 8px; justify-self: end; min-width: 0; width: min(100%, 26rem); }
.xd .xd-yazim-etiket { flex: none; font-size: 14px; font-weight: 800; color: var(--site-baslik); }
.xd .xd-yazim select { min-width: 0; }
.xd .xd-sonuc { margin: 0; color: var(--site-baslik); font-size: 16px; font-weight: 800; line-height: 1.5; }
.xd .xd-sonuc:empty { display: none; }
.xd .xd-sonuc.xd-sonuc--dogru { color: var(--xi-dogru); }
.xd .xd-sonuc.xd-sonuc--yanlis { color: var(--xi-yanlis); }
.xd .xd-not { margin: 0; border-top: 1px dashed var(--xi-c); }
.xd .xd-not-ozet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: var(--site-kontrol-h);
    color: var(--xi-c);
    font-size: 15px;
    font-weight: 900;
    list-style: none;
    cursor: pointer;
}
.xd .xd-not-ozet::-webkit-details-marker { display: none; }
.xd .xd-not-ozet::after { content: "+"; font-size: 22px; line-height: 1; }
.xd .xd-not[open] > .xd-not-ozet::after { content: "\2212"; }
.xd .xd-not > :not(summary) { margin: 0 0 12px; font-size: 16px; line-height: 1.55; }
.xd .xd-kod { display: inline-block; max-width: 100%; overflow-wrap: anywhere; color: var(--site-baslik); font-family: var(--xi-kod); font-size: 16px; font-weight: 700; }
.xd .xd-cozum-satir { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.xd .xd-cozum-satir .oy-btn[hidden] { display: none; }

@media (max-width: 760px) {
    .xd .xd-eylemler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .xd .xd-eylemler .oy-btn { width: 100%; white-space: normal; }
    .xd .xd-yazim { grid-column: 1 / -1; justify-self: stretch; width: 100%; flex-wrap: wrap; justify-content: flex-start; }
}