/* =====================================================================
   deck.css — sade slayt düzeni + oyun temalı bölüm geçişleri
   Açık / koyu tema: :root[data-theme="light" | "dark"]
   ===================================================================== */
:root {
  color-scheme: light;
  --bg: #fbfaf6; --card: #ffffff; --card-2: #f2f0e8; --ink: #1d1d1f; --ink-2: #4a4a55; --muted: #85858f; --rule: #e2dfd5;
  --red: #c8102e; --blue: #1f5fbf; --green: #16834a; --amber: #c27c00; --purple: #6d3bd6; --teal: #0f8a84; --pink: #c23a82;
  --bar: #3c4a66; --bar-final: #c9ccd3; --bar-sorted: #74a2e0; --bar-cmp: #f2a900; --bar-swap: #d62828; --bar-min: #e0533d;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
  --code-bg: #f6f4ee; --code-ink: #1d1d1f; --code-ln: #a8a598; --code-hl: rgba(255, 210, 0, 0.28);
  --tk-kw: #0b4fa8; --tk-str: #b5361b; --tk-num: #0f7d6b; --tk-com: #8a8778; --tk-fn: #7a2fc0; --tk-ty: #0f7d6b;
  --shadow: 0 6px 24px rgba(30, 30, 50, 0.10);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121218; --card: #1b1b25; --card-2: #22222e; --ink: #ececf2; --ink-2: #bdbdcc; --muted: #8a8aa0; --rule: #30303e;
  --red: #ff6b6b; --blue: #6ea8ff; --green: #4fd68c; --amber: #ffc24a; --purple: #b592ff; --teal: #45d6cb; --pink: #ff80bf;
  --bar: #8e9bbb; --bar-final: #3d4155; --bar-sorted: #3f74c4; --bar-cmp: #ffc233; --bar-swap: #ff5c5c; --bar-min: #ff7a5c;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
  --code-bg: #191922; --code-ink: #e8e8f0; --code-ln: #5d5d75; --code-hl: rgba(255, 200, 0, 0.18);
  --tk-kw: #ff7ab8; --tk-str: #ffd27a; --tk-num: #9be38c; --tk-com: #7b7b93; --tk-fn: #7ac7ff; --tk-ty: #67e0d2;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

html, body, .reveal-viewport { background: var(--bg); color: var(--ink); }
.reveal { font-family: "Source Sans 3", "Segoe UI", sans-serif; font-size: 30px; color: var(--ink); }
.reveal .slides { text-align: left; }
.reveal .slides section { height: 100%; }
.reveal h1, .reveal h2, .reveal h3, .reveal h4 { font-family: "Source Sans 3", sans-serif; color: var(--ink); text-transform: none; letter-spacing: -0.01em; margin: 0 0 18px; line-height: 1.12; }
.reveal h1 { font-size: 2.3em; font-weight: 900; }
.reveal h2 { font-size: 1.45em; font-weight: 700; padding-bottom: 10px; border-bottom: 2px solid var(--rule); }
.reveal h3 { font-size: 1.05em; font-weight: 700; }
.reveal p { margin: 0 0 14px; line-height: 1.35; }
.reveal ul, .reveal ol { margin: 0 0 0 1.1em; }
.reveal li { margin: 8px 0; line-height: 1.3; }
.reveal a { color: var(--blue); text-decoration: none; border-bottom: 1px dotted currentColor; }
.reveal a:hover { color: var(--red); }
.reveal strong, .reveal b { font-weight: 700; }
.reveal small, .mini { font-size: 0.62em; color: var(--muted); }
.reveal .slide-number { background: transparent; color: var(--muted); font-family: "JetBrains Mono"; font-size: 13px; }
.reveal .controls { color: var(--blue); }
.reveal .progress { color: var(--red); height: 4px; }

/* ---------- küçük bölüm etiketi (sağ üst; tema düğmesinin solunda, kırpılmadan) ---------- */
.reveal section[data-sec]::before {
  content: attr(data-sec); position: absolute; top: -15px; right: 62px;
  font: 600 12px "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}

/* ---------- renk sınıfları ---------- */
.c-red { color: var(--red) !important; } .c-blue { color: var(--blue) !important; } .c-green { color: var(--green) !important; }
.c-amber { color: var(--amber) !important; } .c-purple { color: var(--purple) !important; } .c-teal { color: var(--teal) !important; }
.c-muted { color: var(--muted) !important; } .c-pink { color: var(--pink) !important; }

/* İngilizce terim etiketi */
.en { display: inline-block; font: italic 600 0.62em "Source Sans 3"; color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 35%, transparent); border-radius: 999px; padding: 1px 10px; vertical-align: middle; margin-left: 4px; }

/* ---------- yerleşim ---------- */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
.cols.c64 { grid-template-columns: 1.5fr 1fr; } .cols.c46 { grid-template-columns: 1fr 1.5fr; }
.cols.c3 { grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
.center { text-align: center; } .vcenter { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.big { font-size: 1.5em; font-weight: 700; line-height: 1.2; }
.huge { font-size: 2.6em; font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; }
.lead { font-size: 1.12em; color: var(--ink-2); }
.spacer { height: 18px; }

/* ---------- kutular ---------- */
.box { background: var(--card); border: 1px solid var(--rule); border-left: 6px solid var(--blue); border-radius: 10px; padding: 14px 20px; margin: 12px 0; box-shadow: var(--shadow); font-size: .86em; }
.box > :last-child { margin-bottom: 0; }
.box .bt { display: block; font-weight: 800; margin-bottom: 4px; font-size: .86em; letter-spacing: .02em; }
.box.prop { border-left-color: var(--blue); }     .box.prop .bt { color: var(--blue); }
.box.proof { border-left-color: var(--muted); background: var(--card-2); box-shadow: none; } .box.proof .bt { color: var(--ink-2); }
.box.game { border-left-color: var(--green); }    .box.game .bt { color: var(--green); }
.box.low { border-left-color: var(--purple); }    .box.low .bt { color: var(--purple); }
.box.story { border-left-color: var(--amber); }   .box.story .bt { color: var(--amber); }
.box.warn { border-left-color: var(--red); }      .box.warn .bt { color: var(--red); }
.box.ask { border-left-color: var(--pink); }      .box.ask .bt { color: var(--pink); }

/* ---------- oyun temalı bölüm (LEVEL) slaytları ---------- */
.reveal section.level { color: #f3f0ff; }
.reveal section.level h1, .reveal section.level h2 { color: #fff; border: none; }
.level .lv { font: 18px "Press Start 2P", monospace; color: #ffd84d; letter-spacing: .06em; text-shadow: 0 0 12px rgba(255, 216, 77, .6); }
.level .ttl { font: 64px/1.05 "Bungee", sans-serif; color: #fff; margin: 22px 0 6px; text-shadow: 0 0 22px rgba(170, 120, 255, .7); }
.level .sub { font-size: 1.05em; color: #c9c2ff; }
.agenda { list-style: none; margin: 36px 0 0 !important; padding: 0; font-size: .9em; }
.agenda li { color: rgba(255, 255, 255, .42); margin: 6px 0; font-weight: 600; }
.agenda li::before { content: "‣ "; }
.agenda li.on { color: #fff; font-weight: 800; }
.agenda li.on::before { content: "▶ "; color: #ffd84d; }
.agenda li.done { color: rgba(255, 255, 255, .62); }
.agenda li.done::before { content: "✔ "; color: #5ff0a0; }
.hp { display: inline-block; font: 12px "Press Start 2P"; color: #5ff0a0; border: 2px solid #5ff0a0; padding: 6px 10px; border-radius: 4px; margin-top: 28px; }

/* başlık slaytı */
.title-bars { position: absolute; left: -40px; right: -40px; bottom: -40px; opacity: .9; pointer-events: none; }
.title-badge { font: 14px "Press Start 2P"; color: #ffd84d; }

/* ---------- butonlar & kontroller ---------- */
.btn { font: 600 18px "Source Sans 3", sans-serif; color: var(--ink); background: var(--card); border: 1.5px solid var(--rule); border-radius: 8px; padding: 6px 14px; cursor: pointer; transition: transform .08s, background .15s; }
.btn:hover { border-color: var(--blue); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn.ghost { background: transparent; }
.sv-controls { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 4px 0 8px; font-size: 18px; }
.ctl { display: inline-flex; align-items: center; gap: 6px; font-size: 18px; color: var(--ink-2); }
.ctl input[type=range] { width: 150px; accent-color: var(--blue); }
.ctl select, .sv-controls select { font: 18px "Source Sans 3"; background: var(--card); color: var(--ink); border: 1.5px solid var(--rule); border-radius: 6px; padding: 4px 6px; }
.sv-transport { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.sv-counters { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; font-size: 18px; }
.cnt { background: var(--card-2); border-radius: 6px; padding: 3px 10px; color: var(--ink-2); }
.cnt i { font-size: .8em; color: var(--muted); }
.cnt.cmp b { color: var(--amber); } .cnt.swp b { color: var(--red); } .cnt.wr b { color: var(--purple); }
.cnt.ok { color: var(--green); font-weight: 600; } .cnt.swp { }
.sv-note { font: 18px "JetBrains Mono", monospace; color: var(--ink-2); min-height: 20px; }
.sv canvas, .race canvas, .codelab canvas, .demo canvas { display: block; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; max-width: 100%; }
.legend-bar { display: flex; gap: 18px; font-size: 17px; color: var(--ink-2); flex-wrap: wrap; }
.legend-bar span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--c); }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

/* yarış */
.race-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.race-cell .sv-counters { font-size: 15px; }
.race-title { font-weight: 700; font-size: 19px; margin-bottom: 4px; }
.medal { margin-left: 8px; }

/* ---------- iz tablosu (Sedgewick trace) ---------- */
.trace-t { border-collapse: collapse; font: 600 22px "JetBrains Mono", monospace; margin: 0 auto; }
.trace-t th { font-size: 13px; color: var(--muted); font-weight: 600; padding: 2px 8px; }
.trace-t thead .arr-h { text-align: center; border-bottom: 1px solid var(--rule); }
.trace-t td { padding: 1px 9px; text-align: center; }
.trace-t td:nth-child(-n+2) { color: var(--muted); font-size: 16px; }
.trace-t .blk { color: var(--ink); } .trace-t .gry { color: var(--bar-final); } .trace-t .red { color: var(--red); font-weight: 800; }
:root[data-theme="dark"] .trace-t .gry { color: #555a70; }
.trace-t tr.final td { border-top: 2px solid var(--rule); padding-top: 4px; }
.trace-legend { font-size: 15px; color: var(--ink-2); text-align: center; margin-top: 10px; }
.trace-legend b.g { color: var(--bar-final); } .trace-legend b.r { color: var(--red); }

/* ---------- quiz ---------- */
.quiz .qhead { font: 600 15px "JetBrains Mono"; color: var(--pink); letter-spacing: .06em; text-transform: uppercase; }
.quiz .q { font-size: 1.05em; font-weight: 600; margin: 8px 0 18px; }
.quiz .opts { display: grid; gap: 10px; }
.quiz [data-opt] { display: flex; gap: 14px; align-items: center; text-align: left; font: 500 24px "Source Sans 3"; color: var(--ink); background: var(--card); border: 2px solid var(--rule); border-radius: 12px; padding: 10px 16px; cursor: pointer; transition: all .15s; }
.quiz [data-opt]::before { content: attr(data-opt); font: 700 18px "JetBrains Mono"; color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.quiz [data-opt]:hover { border-color: var(--blue); }
.quiz [data-opt].right { border-color: var(--green); background: color-mix(in srgb, var(--green) 14%, var(--card)); }
.quiz [data-opt].right::after { content: "✔"; margin-left: auto; color: var(--green); font-weight: 800; }
.quiz [data-opt].wrong { border-color: var(--red); animation: shake .35s; }
.quiz [data-opt].wrong::after { content: "✘"; margin-left: auto; color: var(--red); font-weight: 800; }
.quiz .explain { display: none; margin-top: 14px; font-size: .8em; background: var(--card-2); border-radius: 10px; padding: 12px 16px; }
.quiz .explain.show { display: block; animation: fadein .3s; }
.quiz .reveal-ans { margin-top: 12px; font-size: 13px; opacity: .6; }
.quiz code { font-size: .9em; }
@keyframes shake { 0%,100% { transform: translateX(0) } 25% { transform: translateX(-6px) } 75% { transform: translateX(6px) } }
@keyframes fadein { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }

/* ---------- kod blokları (satır numaralı) ---------- */
.reveal pre { position: relative; width: 100%; margin: 8px 0; box-shadow: none; font-size: 0.7em; border-radius: 10px; }
.reveal pre code { background: var(--code-bg); color: var(--code-ink); border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; max-height: 560px; font-family: "JetBrains Mono", monospace; line-height: 1.45; }
.reveal :not(pre) > code { font-family: "JetBrains Mono", monospace; font-size: .86em; background: var(--card-2); color: var(--ink); padding: 1px 6px; border-radius: 5px; }
.reveal .hljs-ln-numbers { color: var(--code-ln); padding-right: 14px !important; user-select: none; text-align: right; }
.reveal .hljs-ln td { padding: 0; }
.reveal .hljs-ln-code { padding-left: 4px !important; }
.reveal .hljs.has-highlights tr:not(.highlight-line) { opacity: 0.35; }
.reveal .hljs.has-highlights tr.highlight-line td.hljs-ln-code { background: var(--code-hl); }
.hljs-keyword, .hljs-built_in.hljs-keyword, .hljs-literal { color: var(--tk-kw); font-weight: 600; }
.hljs-string, .hljs-template-string { color: var(--tk-str); }
.hljs-number { color: var(--tk-num); }
.hljs-comment { color: var(--tk-com); font-style: italic; }
.hljs-title, .hljs-title.function_, .hljs-function .hljs-title { color: var(--tk-fn); }
.hljs-type, .hljs-built_in, .hljs-title.class_ { color: var(--tk-ty); }
.hljs-params, .hljs-variable, .hljs-attr, .hljs-property { color: inherit; }
.hljs-meta { color: var(--tk-com); }
.zoom-btn { position: absolute; top: 8px; right: 8px; z-index: 5; font-size: 16px; line-height: 1; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--rule); background: var(--card); color: var(--ink); cursor: pointer; opacity: .55; transition: opacity .15s, transform .15s; }
.zoom-btn:hover { opacity: 1; transform: scale(1.1); }
.reveal pre.has-zoom > code { padding-right: 46px; }   /* 🔍 düğmesi ilk satırın sonunu örtmesin */

/* kod büyüteci (modal) */
.cz-modal { position: fixed; inset: 0; z-index: 1000; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(4px); display: none; flex-direction: column; outline: none; }
.cz-modal.open { display: flex; }
.cz-bar { display: flex; gap: 10px; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--rule); background: var(--card); color: var(--ink); font-family: "Source Sans 3"; }
.cz-sp { flex: 1; }
.cz-body { flex: 1; overflow: auto; padding: 24px 40px; font-family: "JetBrains Mono", monospace; }
.cz-table { border-collapse: collapse; background: var(--code-bg); color: var(--code-ink); border-radius: 12px; margin: 0 auto; min-width: 60%; }
.cz-table td { padding: 0 16px; line-height: 1.5; white-space: pre; }
.cz-ln { color: var(--code-ln); text-align: right; user-select: none; border-right: 1px solid var(--rule); }
.cz-table tr:first-child td { padding-top: 14px; } .cz-table tr:last-child td { padding-bottom: 14px; }

/* sekmeler */
.tabs .tab { display: none; } .tabs .tab.on { display: block; }
.tab-head { display: flex; gap: 4px; }
.tab-btn { font: 600 15px "Source Sans 3"; padding: 5px 14px; border: 1px solid var(--rule); border-bottom: none; border-radius: 8px 8px 0 0; background: var(--card-2); color: var(--muted); cursor: pointer; }
.tab-btn.on { background: var(--code-bg); color: var(--ink); }
.tabs pre { margin-top: 0; }

/* ---------- canlı kod laboratuvarı ---------- */
.codelab { font-size: 18px; }
.lab-body { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 16px; }
.lab-bar { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.lab-lang { margin-left: auto; font: 600 13px "JetBrains Mono"; color: var(--muted); }
.lab-editor .CodeMirror { height: 430px; border: 1px solid var(--rule); border-radius: 10px; font-family: "JetBrains Mono", monospace; line-height: 1.45; }
.lab-msg { font-size: 18px; margin: 6px 0; min-height: 22px; }
.lab-msg.ok { color: var(--green); } .lab-msg.err { color: var(--red); }
.lab-out { display: none; font: 13px "JetBrains Mono"; background: var(--card-2); border-radius: 8px; padding: 6px 10px; max-height: 90px; overflow: auto; margin: 0; box-shadow: none; }
.lab-tasks { font-size: 19px; margin-top: 6px; color: var(--ink-2); }
.lab-tasks ol { margin-top: 2px; } .lab-tasks li { margin: 2px 0; }
.codelab.fullscreen { position: fixed; inset: 0; z-index: 900; background: var(--bg); padding: 18px 26px; overflow: auto; }
.codelab.fullscreen .lab-editor .CodeMirror { height: calc(100vh - 160px); }
.codelab.fullscreen .lab-tasks { font-size: 18px; }
/* CodeMirror teması (tema değişkenlerinden) */
.cm-s-lab.CodeMirror { background: var(--code-bg); color: var(--code-ink); }
.cm-s-lab .CodeMirror-gutters { background: var(--code-bg); border-right: 1px solid var(--rule); }
.cm-s-lab .CodeMirror-linenumber { color: var(--code-ln); }
.cm-s-lab .CodeMirror-cursor { border-left: 2px solid var(--red); }
.cm-s-lab .CodeMirror-selected, .cm-s-lab.CodeMirror-focused .CodeMirror-selected { background: var(--code-hl); }
.cm-s-lab .cm-keyword { color: var(--tk-kw); font-weight: 600; }
.cm-s-lab .cm-string { color: var(--tk-str); }
.cm-s-lab .cm-number { color: var(--tk-num); }
.cm-s-lab .cm-comment { color: var(--tk-com); font-style: italic; }
.cm-s-lab .cm-def { color: var(--tk-fn); }
.cm-s-lab .cm-builtin, .cm-s-lab .cm-atom { color: var(--tk-ty); }
.cm-s-lab .cm-variable-2, .cm-s-lab .cm-property { color: var(--code-ink); }
.cm-s-lab .CodeMirror-matchingbracket { color: var(--green) !important; }

/* ---------- demolar ---------- */
.demo { font-size: 18px; }
.mem-row { display: flex; gap: 0; margin: 20px 0 10px; border: 2px solid var(--ink-2); border-radius: 8px; overflow: hidden; }
.mem-cell { border-right: 1px solid var(--rule); padding: 10px 4px; text-align: center; transition: flex .4s, background .2s; min-width: 0; }
.mem-cell:last-child { border-right: none; }
.mem-cell.on { background: color-mix(in srgb, var(--blue) 18%, transparent); }
.mem-val { font: 700 22px "JetBrains Mono"; } .mem-idx { font: 14px "JetBrains Mono"; color: var(--blue); } .mem-addr { font: 12px "JetBrains Mono"; color: var(--muted); }
.mem-formula { font: 20px "JetBrains Mono"; margin-top: 10px; }

.cups { display: flex; gap: 60px; justify-content: center; margin: 10px 0; }
.cup-wrap { text-align: center; }
.cup { width: 110px; height: 140px; border: 4px solid var(--ink-2); border-top: none; border-radius: 0 0 26px 26px; position: relative; overflow: hidden; --liq: transparent; }
.cup::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 75%; background: var(--liq); transition: background .5s; }
.cup span { position: absolute; z-index: 2; left: 0; right: 0; top: 50%; text-align: center; font-weight: 700; color: #888; mix-blend-mode: difference; }
.cup.temp { border-style: dashed; }
.cup-name { font: 700 22px "JetBrains Mono"; margin-top: 6px; }
.mini-code { font: 20px "JetBrains Mono" !important; background: var(--code-bg); border-radius: 10px; padding: 10px 16px; width: auto !important; display: inline-block; margin: 10px 0; }
.mini-code div { opacity: .45; } .mini-code .done { opacity: 1; color: var(--green); } .mini-code .next { opacity: 1; color: var(--ink); font-weight: 700; }
.mini-code .next::after { content: "  ◀"; color: var(--red); }

.gauss { display: flex; gap: 24px; align-items: flex-start; }
.gauss-info { font-size: 19px; line-height: 1.6; } .gauss-info .k { font: 15px "JetBrains Mono"; color: var(--muted); max-width: 520px; }

.inv-svg { width: 100%; height: auto; max-height: 300px; }

.card-table { position: relative; height: 200px; margin: 26px auto 10px; }
.pcard { position: absolute; top: 30px; width: 110px; height: 156px; background: #fff; border-radius: 12px; border: 1.5px solid #c9c5b8; box-shadow: 0 4px 12px rgba(0,0,0,.18); color: #111; transition: left .45s ease, transform .3s ease, box-shadow .3s; font-family: "Source Sans 3"; }
.pcard.red { color: #c8102e; }
.pcard.lift { transform: translateY(-30px); box-shadow: 0 16px 28px rgba(0,0,0,.3); z-index: 3; }
.pcard .tl { position: absolute; top: 6px; left: 10px; font-weight: 800; font-size: 22px; }
.pcard .br { position: absolute; bottom: 6px; right: 10px; font-weight: 800; font-size: 22px; transform: rotate(180deg); }
.pcard .mid { position: absolute; inset: 0; display: grid; place-items: center; font-size: 56px; }
.card-msg { text-align: center; font-size: 22px; min-height: 30px; }

.hs-view { display: flex; gap: 6px; justify-content: center; margin: 14px 0; flex-wrap: wrap; }
.hs-cell { width: 52px; height: 66px; border: 3px solid; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--card); }
.hs-cell b { font: 700 24px "JetBrains Mono"; } .hs-cell i { font: 12px "JetBrains Mono"; color: var(--muted); font-style: normal; }
.hs-groups { font: 18px "JetBrains Mono"; columns: 2; }
.hs-grp { margin: 2px 0; }

.growth { display: flex; gap: 20px; align-items: flex-start; }
.growth-t, .dbl-t { border-collapse: collapse; font-size: 22px; }
.growth-t td, .growth-t th, .dbl-t td, .dbl-t th { padding: 9px 12px; border-bottom: 1px solid var(--rule); text-align: left; }
.growth-t th, .dbl-t th { color: var(--muted); font-weight: 600; }
.dbl-t { font-size: 21px; margin-top: 8px; }

.tilde { font-size: 22px; } .tilde-row { margin: 10px 0; } .tilde-row.big { font-size: 26px; }
.tilde-bar { display: flex; height: 40px; border-radius: 8px; overflow: hidden; margin: 12px 0; }
.tilde-bar .b1 { background: var(--s1); color: #fff; display: grid; place-items: center; font-weight: 700; transition: width .3s; }
.tilde-bar .b2 { background: var(--red); transition: width .3s; }

.inv-grid { position: relative; margin: 14px 0; }
.item { position: absolute; width: 136px; height: 108px; border-radius: 12px; border: 3px solid; background: var(--card); text-align: center; transition: left .6s cubic-bezier(.5,0,.2,1), top .6s cubic-bezier(.5,0,.2,1); }
.item .ic { font-size: 34px; margin-top: 6px; } .item .nm { font-weight: 700; font-size: 19px; } .item .rr { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.item.common { border-color: #9a9a9a; } .item.common .rr { color: #8a8a8a; }
.item.rare { border-color: #2f7bf5; } .item.rare .rr { color: #2f7bf5; }
.item.epic { border-color: #a335ee; } .item.epic .rr { color: #a335ee; }
.item.legend { border-color: #ff8000; box-shadow: 0 0 14px rgba(255,128,0,.35); } .item.legend .rr { color: #ff8000; }

.shuf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.shuf-svg { width: 100%; }

.tet-wrap { font-size: 16px; } .tet-cap { font-size: 17px; color: var(--ink-2); margin-bottom: 10px; }
.tet-row { display: flex; flex-wrap: wrap; gap: 3px; margin: 4px 0 6px; }
.tet { width: 31px; height: 31px; border-radius: 4px; display: grid; place-items: center; font: 700 13px "JetBrains Mono"; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.4); }
.tet.bag { margin-left: 8px; }

.cache-wrap { display: flex; gap: 20px; align-items: flex-start; }
.mem-grid { display: grid; grid-template-columns: repeat(8, 70px); gap: 3px; }
.mem-grid .mcell { height: 34px; border-radius: 5px; background: var(--card-2); font: 12px "JetBrains Mono"; display: grid; place-items: center; color: var(--muted); transition: background .2s; }
.mem-grid .mcell:nth-child(8n+1) { box-shadow: inset 3px 0 0 var(--rule); }
.mem-grid .mcell.used { background: color-mix(in srgb, var(--blue) 22%, var(--card)); color: var(--ink); }
.mem-grid .mcell.cached { outline: 2px solid var(--green); }
.mem-grid .mcell.cur { background: var(--amber); color: #000; font-weight: 700; }
.cache-box { font-size: 16px; background: var(--card); border: 2px solid var(--green); border-radius: 10px; padding: 10px 14px; min-width: 190px; line-height: 1.8; }
.cline { display: block; font: 15px "JetBrains Mono"; background: var(--card-2); border-radius: 5px; padding: 2px 8px; margin: 3px 0; }

/* gecikme tablosu */
.lat { width: 100%; border-collapse: collapse; font-size: 22px; }
.lat td { padding: 6px 10px; border-bottom: 1px solid var(--rule); }
.lat td:nth-child(2) { font-family: "JetBrains Mono"; text-align: right; color: var(--ink-2); }
.lat td:nth-child(3) { font-weight: 700; }
.lat .barcell { width: 32%; } .lat .lb { height: 14px; border-radius: 4px; background: var(--purple); }

/* özet tablo */
.sum-t { border-collapse: collapse; width: 100%; font-size: 21px; }
.sum-t th, .sum-t td { padding: 7px 10px; border-bottom: 1px solid var(--rule); text-align: center; }
.sum-t th { color: var(--muted); font-size: 16px; font-weight: 600; }
.sum-t td:first-child { text-align: left; font-weight: 700; }
.yes { color: var(--green); font-weight: 800; } .no { color: var(--red); font-weight: 800; }

/* sözlük */
.gloss { border-collapse: collapse; width: 100%; font-size: 22px; }
.gloss td { padding: 7px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.gloss td:first-child { font: italic 600 21px "Source Sans 3"; color: var(--blue); white-space: nowrap; }
.gloss td:nth-child(2) { font-weight: 700; white-space: nowrap; }
.gloss td:nth-child(3) { color: var(--ink-2); font-size: 19px; }

/* ikon ızgarası */
.icons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.icon-card { background: var(--card); border: 1px solid var(--rule); border-radius: 14px; padding: 16px; box-shadow: var(--shadow); font-size: 19px; }
.icon-card .ic { font-size: 40px; }
.icon-card b { display: block; font-size: 21px; margin: 4px 0; }

/* video / kaynak kartları */
.vids { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.vid { display: block; border: none !important; background: var(--card); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); color: var(--ink) !important; font-size: 15px; }
.vid img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.vid span { display: block; padding: 6px 10px 10px; line-height: 1.25; }
.vid:hover { outline: 2px solid var(--blue); }
.reflist { font-size: 20px; } .reflist li { margin: 6px 0; }

/* invariant çizimi */
.inv-pic { display: flex; height: 70px; border: 2px solid var(--ink-2); border-radius: 6px; overflow: hidden; font-weight: 700; font-size: 19px; margin: 8px 0 4px; }
.inv-pic > div { display: grid; place-items: center; text-align: center; padding: 0 8px; }
.inv-pic .fin { background: var(--bar-final); color: var(--ink); }
.inv-pic .srt { background: color-mix(in srgb, var(--bar-sorted) 60%, var(--card)); color: var(--ink); }
.inv-pic .unk { background: var(--card); color: var(--ink-2); }
.inv-arrow { font: 700 18px "JetBrains Mono"; color: var(--blue); }

/* tema düğmesi */
.theme-toggle { position: fixed; top: 12px; right: 14px; z-index: 50; font-size: 20px; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--rule); background: var(--card); cursor: pointer; box-shadow: var(--shadow); }
.theme-toggle:hover { transform: scale(1.08); }
.help-chip { position: fixed; bottom: 10px; left: 14px; z-index: 50; font: 12px "JetBrains Mono"; color: var(--muted); opacity: .7; }

/* fragment vurgusu */
.reveal .fragment.highlight-current-red.current-fragment { color: var(--red); }
.reveal .fragment.pop { transform: scale(.8); } .reveal .fragment.pop.visible { transform: none; transition: all .3s cubic-bezier(.3,1.6,.6,1); }

/* yazdırma (PDF) */
@media print { .theme-toggle, .help-chip, .zoom-btn { display: none !important; } }

/* düzeltmeler */
.reveal sup { vertical-align: super; font-size: .65em; } .reveal sub { vertical-align: sub; font-size: .65em; }
.reveal pre code, .CodeMirror, .cz-body, .mini-code, .trace-t { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
.formula { font-size: .9em; white-space: nowrap; margin: 6px 0 10px; }
.vid.sm { max-width: 330px; }
.codelab { font-family: "Source Sans 3", sans-serif; color: var(--ink); }
.codelab :not(pre) > code { font-family: "JetBrains Mono", monospace; font-size: .86em; background: var(--card-2); padding: 1px 6px; border-radius: 5px; }
.codelab.fullscreen .lab-body { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.cz-table { max-width: 100%; }
code, .CodeMirror pre { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }

/* ---- v2 eklemeleri ---- */
.reveal .katex { white-space: nowrap; }
.name-chain { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 14px; font-size: .95em; }
.name-chain span { background: var(--card); border: 2px solid var(--rule); border-radius: 10px; padding: 6px 14px; font-weight: 700; }
.name-chain span small { font-weight: 400; color: var(--muted); font-size: .7em; }
.name-chain span.on { border-color: var(--red); color: var(--red); }
.name-chain i { color: var(--muted); font-style: normal; font-size: 1.2em; }
.sv-transport .btn { min-width: 46px; }

/* ---- ağaç bileşenleri ---- */
.bst-main { display: flex; gap: 14px; align-items: stretch; }
.bstviz canvas, .travviz canvas, .treelab canvas, .demo canvas { display: block; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; max-width: 100%; }
.stack-panel { flex: 1; min-width: 220px; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px; font: 15px "JetBrains Mono", monospace; display: flex; flex-direction: column; justify-content: flex-end; }
.sp-title { font: 700 15px "Source Sans 3"; color: var(--purple); margin-bottom: auto; padding-bottom: 8px; }
.sp-item { background: var(--card-2); border: 1.5px solid var(--rule); border-radius: 6px; padding: 4px 8px; margin: 3px 0; color: var(--ink-2); }
.sp-item.top { border-color: var(--purple); color: var(--ink); font-weight: 700; background: color-mix(in srgb, var(--purple) 14%, var(--card)); }
.sp-floor { border-top: 3px solid var(--ink-2); margin-top: 4px; padding-top: 2px; font: 11px "Source Sans 3"; color: var(--muted); text-align: center; }
.sp-empty { color: var(--muted); text-align: center; padding: 10px; }
.sp-queue { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: auto; }
.sp-queue span { background: color-mix(in srgb, var(--teal) 18%, var(--card)); border: 1.5px solid var(--teal); border-radius: 6px; padding: 3px 9px; font-weight: 700; }
.tree-note { min-height: 24px; margin-top: 4px; }
.tree-out { font: 18px "JetBrains Mono", monospace; min-height: 4px; color: var(--ink-2); }
.tree-out b { color: var(--blue); letter-spacing: .08em; }
.key-in, .keys-in { font: 18px "JetBrains Mono", monospace; background: var(--card); color: var(--ink); border: 1.5px solid var(--rule); border-radius: 6px; padding: 4px 8px; }
.keys-in { width: 230px; }
.key-in:focus, .keys-in:focus { outline: 2px solid var(--blue); }

/* terimler / hiyerarşi paneli */
.terms { display: grid; grid-template-columns: 210px 700px 1fr; gap: 14px; align-items: start; }
.hier { background: #2b2b2b; color: #ddd; border-radius: 8px; font: 15px "Source Sans 3"; padding-bottom: 6px; overflow: hidden; }
.hier-title { background: #3c3c3c; color: #ccc; padding: 4px 10px; font-weight: 700; font-size: 13px; }
.hier-row { padding: 3px 10px; cursor: pointer; white-space: nowrap; }
.hier-row:hover { background: #3a3a3a; }
.hier-row.on { background: #2c5d87; color: #fff; }
.term-info { font-size: 17px; line-height: 1.55; }
.term-info .en { font-size: .7em; }
.tank { display: grid; grid-template-columns: 640px 1fr; gap: 16px; align-items: start; }
.tank-info { background: #2b2b2b; color: #ddd; border-radius: 8px; font-size: 16px; padding-bottom: 10px; overflow: hidden; }
.tank-info p { padding: 0 12px; margin: 6px 0; }
.tank-info .mini { color: #aaa; }

/* davranış ağacı */
.bt-bubble { margin-left: auto; background: var(--card); border: 2px solid var(--amber); border-radius: 18px; padding: 4px 14px; font-size: 18px; }

/* ikili arama */
.bs-row { display: flex; gap: 6px; justify-content: center; margin: 18px 0 8px; }
.bs-cell { width: 62px; height: 92px; border: 2.5px solid var(--blue); border-radius: 10px; background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 8px; transition: all .25s; }
.bs-cell b { font: 700 24px "JetBrains Mono"; } .bs-cell i { font: 12px "JetBrains Mono"; color: var(--muted); font-style: normal; }
.bs-cell u { text-decoration: none; font: 700 13px "JetBrains Mono"; color: var(--purple); margin-top: 4px; }
.bs-cell.out { opacity: .22; } .bs-cell.seen { background: var(--card-2); }
.bs-cell.mid { background: var(--amber); border-color: var(--amber); color: #111; transform: translateY(-6px); }
.bs-cell.mid i, .bs-cell.mid u { color: #333; }
.bs-cell.found { background: var(--green); border-color: var(--green); color: #fff; transform: translateY(-6px); }

/* tahmin oyunu */
.guess-msg { font-size: 26px; margin: 14px 0; min-height: 40px; }
.guess-bar { position: relative; height: 38px; background: var(--card-2); border-radius: 8px; margin: 26px 10px 10px; }
.gb-range { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--blue) 35%, transparent); border: 2px solid var(--blue); border-radius: 8px; transition: all .3s; }
.gb-mark { position: absolute; top: -8px; bottom: -8px; width: 3px; background: var(--red); border-radius: 2px; }
.gb-l, .gb-r { position: absolute; top: 42px; font: 13px "JetBrains Mono"; color: var(--muted); } .gb-l { left: 0; } .gb-r { right: 0; }

/* log zinciri */
.log-out { font-size: 20px; }
.log-chain { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 14px 0; }
.log-chain span { background: var(--card); border: 1.5px solid var(--blue); border-radius: 6px; padding: 2px 8px; font: 14px "JetBrains Mono"; }
.log-chain i { color: var(--muted); font-size: 11px; font-style: normal; }

.shape-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.shape-info { margin-top: 6px; font-size: 15px; color: var(--ink-2); }
.title-bars canvas { background: transparent !important; border: none !important; }
.cols > *, .cols.c64 > *, .cols.c46 > * { min-width: 0; }
.reveal .cols pre { font-size: .6em; }
.cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cols.c64 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.cols.c46 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.cols.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.reveal pre code { overflow-x: auto; }

/* ---- arama bileşenleri ---- */
.bs-cell.sent { border-style: dashed; border-color: var(--purple); }
.xp-row .bs-cell, .lab-row .bs-cell { width: 54px; height: 84px; }
.xp-row .bs-cell b { font-size: 17px; }
.lab-row { flex-wrap: wrap; margin: 10px 0 4px; }
.lab-row .bs-cell { width: 30px; height: 64px; padding-top: 4px; border-width: 2px; }
.lab-row .bs-cell b { font-size: 14px; } .lab-row .bs-cell i { font-size: 10px; } .lab-row .bs-cell u { font-size: 11px; }
.loot-bar { position: relative; display: flex; height: 44px; border-radius: 10px; overflow: visible; margin: 34px 0 6px; }
.loot-bar > div:not(.loot-r) { display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; min-width: 0; overflow: hidden; }
.loot-bar > div:first-child { border-radius: 10px 0 0 10px; } .loot-bar > div:nth-child(4) { border-radius: 0 10px 10px 0; }
.loot-r { position: absolute; top: -10px; bottom: -10px; width: 3px; background: var(--red); }
.loot-r span { position: absolute; top: -24px; left: -30px; width: 80px; text-align: center; font: 700 14px "JetBrains Mono"; color: var(--red); }
.loot-hist { font-size: 16px; margin-top: 6px; }
.lh-row { display: grid; grid-template-columns: 140px 1fr 70px 130px; gap: 8px; align-items: center; margin: 3px 0; }
.lh-bar { height: 14px; background: var(--card-2); border-radius: 6px; overflow: hidden; } .lh-bar div { height: 100%; }
.lh-row i { color: var(--muted); font-size: 14px; font-style: normal; }
.vs-out { font-size: 20px; }
.vs-row { display: grid; grid-template-columns: 240px 1fr 120px 90px; gap: 12px; align-items: center; margin: 12px 0; }
.vs-row > div { height: 26px; border-radius: 6px; transition: width .3s; }
.vs-row i { color: var(--muted); font-style: normal; font-size: 16px; }
.box.bgk { border-left-color: var(--teal); } .box.bgk .bt { color: var(--teal); }
.trace-t.bt3 td:nth-child(3) { color: var(--muted); font-size: 16px; }

/* ---- liste bileşenleri ---- */
.ll-svg { width: 100%; height: auto; max-height: 322px; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; }
.ll-main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; }
.ll-code { font-size: 16px !important; margin: 0 !important; }
.ll-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 0 10px; font: 16px "JetBrains Mono", monospace; }
.ll-chip { border: 2px solid var(--blue); border-radius: 8px; padding: 3px 10px; background: var(--card); font-weight: 700; }
.ll-chip.head { border-color: var(--green); color: var(--green); }
.ll-chips i { color: var(--muted); font-style: normal; }
.ll-null { color: var(--muted); font-size: 14px; }
.ll-lab-view { font-size: 17px; }
.bs-cell.empty { border-style: dashed; opacity: .55; }
.bs-cell.del { background: var(--red); border-color: var(--red); color: #fff; }
.dyn-boxes { display: flex; flex-wrap: wrap; gap: 3px; margin: 14px 0; min-height: 70px; }
.dyn-cell { width: 26px; height: 30px; border: 1.5px dashed var(--rule); border-radius: 4px; font: 11px "JetBrains Mono"; display: grid; place-items: center; color: var(--muted); }
.dyn-cell.full { border: 1.5px solid var(--blue); background: color-mix(in srgb, var(--blue) 18%, var(--card)); color: var(--ink); }
.dyn-cell.last { background: var(--green); border-color: var(--green); color: #fff; }
.dyn-cell.copy { background: var(--amber); border-color: var(--amber); color: #111; }
.snake-chips { font-size: 13px; }
.uno-svg { width: 100%; max-height: 380px; }
.pool-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin-top: 14px; }
.pool-cell { border: 2px solid var(--rule); border-radius: 10px; text-align: center; padding: 6px 2px; background: var(--card); }
.pool-cell span { font-size: 26px; display: block; } .pool-cell i { display: block; font: 12px "JetBrains Mono"; color: var(--muted); font-style: normal; }
.pool-cell u { text-decoration: none; font: 12px "JetBrains Mono"; color: var(--teal); }
.pool-cell.on { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 15%, var(--card)); } .pool-cell.on u { color: var(--amber); }
.pool-cell.head { box-shadow: 0 0 0 3px var(--teal); }
.pool-svg { width: 100%; height: 70px; }
.sr-row .bs-cell { width: 80px; } .sr-row .bs-cell b { font-size: 28px; } .sr-row .bs-cell u { color: var(--ink-2); font-weight: 600; }
.reveal pre code { display: block; }
.tabs.short pre code { max-height: 455px; }

/* ---- yığın / kuyruk bileşenleri ---- */
.sq-view { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 20px; align-items: start; margin-top: 8px; }
.sq-stack { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 10px 14px; min-width: 200px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 200px; }
.sq-plate { position: relative; background: var(--card-2); border: 2px solid var(--rule); border-radius: 8px; padding: 4px 10px; margin: 3px auto; width: 80%; text-align: center; font: 700 20px "JetBrains Mono"; }
.sq-plate.top { border-color: var(--purple); background: color-mix(in srgb, var(--purple) 14%, var(--card)); }
.sq-plate.hi { animation: fadein .35s; }
.sq-plate i { position: absolute; left: 100%; margin-left: 8px; top: 50%; transform: translateY(-50%); font: 12px "Source Sans 3"; color: var(--purple); white-space: nowrap; font-style: normal; }
.sq-queue { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 10px 14px; }
.sq-lane { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 60px; }
.sq-item { border: 2px solid var(--teal); border-radius: 8px; padding: 6px 12px; font: 700 20px "JetBrains Mono"; background: var(--card-2); }
.sq-item.front { border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 30%, transparent); }
.sq-item.hi { animation: fadein .35s; }
.sq-end { font: 13px "Source Sans 3"; color: var(--muted); }
.sq-out { font-size: 18px; margin: 8px 0; } .sq-out b { letter-spacing: .1em; }
.br-view { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; align-items: end; margin-top: 10px; }
.br-str { font: 700 32px "JetBrains Mono"; letter-spacing: .05em; padding: 14px; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; word-break: break-all; }
.br-str span { padding: 0 2px; border-radius: 4px; } .br-str .done { color: var(--muted); } .br-str .cur { background: var(--amber); color: #111; }
.ts-view .br-str { font-size: 24px; margin: 10px 0; }
.ts-stacks { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ring-wrap { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 20px; align-items: start; }
.ring-svg { width: 100%; }
.ring-side { font-size: 18px; } .combo-row { font: 16px "JetBrains Mono"; margin: 2px 0; }
.btn.pad { font-size: 22px; min-width: 52px; }
.cs-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: end; }
.undo-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: start; }
.undo-board { display: grid; gap: 2px; background: var(--rule); border-radius: 8px; overflow: hidden; width: max-content; }
.undo-cell { width: 46px; height: 46px; background: var(--card); display: grid; place-items: center; font-size: 26px; }
.undo-stacks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rts-wrap { display: grid; grid-template-columns: 760px minmax(0, 1fr); gap: 14px; align-items: start; }
.rts-side { font-size: 16px; }
.sq-plate i { position: static; transform: none; margin-left: 8px; }
.mini-code, .mini-code * { font-variant-ligatures: none !important; font-feature-settings: "liga" 0, "calt" 0 !important; }

/* ---- union–find bileşenleri ---- */
.uf-arr { font: 21px "JetBrains Mono", monospace; margin: 8px 0; line-height: 2; white-space: nowrap; }
.uf-lab { display: inline-block; width: 70px; color: var(--muted); font-size: 15px; }
.uf-idx { display: inline-block; box-sizing: border-box; width: 52px; margin-right: 5px; text-align: center; color: var(--muted); font-size: 15px; }
.uf-cell { display: inline-block; box-sizing: border-box; width: 52px; margin-right: 5px; text-align: center; border: 2px solid var(--rule); border-radius: 6px; background: var(--card); font-weight: 700; }
.uf-cell.p { border-color: var(--blue); } .uf-cell.q { border-color: var(--pink); }
.uf-cell.root { border-color: var(--green); background: color-mix(in srgb, var(--green) 20%, var(--card)); }
.uf-cell.path { border-color: var(--amber); } .uf-cell.link { background: var(--amber); border-color: var(--amber); color: #111; }
.uf-cell.sz { border-style: dashed; font-weight: 400; color: var(--ink-2); }
.uf-forest { width: 100%; height: auto; max-height: 250px; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; }
.cn-svg { width: 100%; max-width: 1000px; max-height: 420px; display: block; margin: 0 auto; }
.perc-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; }
.perc-side { font-size: 17px; }
.go-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; }
.go-side { font-size: 19px; } .go-side .mini { font-size: 17px; margin: 8px 0 4px; } .go-grp { border-left: 6px solid; padding: 2px 10px; margin: 3px 0; background: var(--card); border-radius: 6px; }
.lgd { font-size: 18px; margin: 10px 0; line-height: 1.7; } .lgd i { display: inline-block; width: 18px; height: 18px; border-radius: 4px; vertical-align: -3px; margin-right: 6px; } .lgd i.rb { background: linear-gradient(90deg, hsl(0,70%,62%), hsl(120,70%,62%), hsl(240,70%,62%)); }
.perc-how { font-size: 18px; color: var(--ink-2); margin: 8px 0; } .perc-side .sv-note { font-size: 17px; min-height: 76px; } .perc-side .sv-note:empty { min-height: 0; }

/* ---- analiz bileşenleri ---- */
.sw-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 18px; align-items: start; }
.freq-t { border-collapse: collapse; width: 100%; font-size: 23px; }
.freq-t td, .freq-t th { padding: 11px 10px; border-bottom: 1px solid var(--rule); text-align: left; }
.freq-t th { color: var(--muted); font-weight: 600; }
.freq-bar { height: 22px; background: var(--s1); border-radius: 4px; }
.pairs-wrap { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 20px; align-items: center; }
.pairs-info { font-size: 19px; } .pairs-info .big { margin: 4px 0; }
.mem-l { display: grid; grid-template-columns: 380px minmax(0, 1fr) 110px; gap: 14px; align-items: center; margin: 16px 0; font-size: 21px; }
.mem-lbar { height: 30px; background: var(--card-2); border-radius: 6px; overflow: hidden; } .mem-lbar div { height: 100%; border-radius: 6px; }

/* ---- mergesort bileşenleri ---- */
.mp-view { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 16px; margin: 6px 0; }
.mp-col { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 8px 12px; font-size: 18px; }
.mp-row { padding: 3px 8px; margin: 3px 0; border-radius: 6px; display: flex; justify-content: space-between; }
.mp-row.used { opacity: .3; } .mp-row.top { background: var(--amber); color: #111; font-weight: 700; }
.mp-row.eu { border-left: 5px solid var(--s1); } .mp-row.as { border-left: 5px solid var(--s2); }
.mp-row.new { background: color-mix(in srgb, var(--green) 20%, var(--card)); font-weight: 700; }
.rt-wrap { display: grid; grid-template-columns: 760px minmax(0, 1fr); gap: 16px; align-items: center; }
.rt-info { font-size: 19px; }

/* ---- quicksort bileşenleri ---- */
.trace-t .ex { color: var(--blue); font-weight: 800; }
.al-row .bs-cell { width: 70px; } .al-row .bs-cell b { font-size: 30px; }
.bs-cell.al.on { border-color: var(--green); background: color-mix(in srgb, var(--green) 14%, var(--card)); }
.bs-cell.al.off { border-color: var(--muted); background: var(--card-2); filter: grayscale(1); }
.bs-cell.jj { box-shadow: 0 0 0 3px var(--pink); }
.lf-wrap { display: grid; grid-template-columns: 760px minmax(0, 1fr); gap: 16px; align-items: start; }
.lf-info { font-size: 18px; } .lf-info .big { margin: 4px 0; }

/* ---------- dengeli ağaçlar ---------- */
.t23-svg { display: block; width: 100%; height: auto; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; }
.node23 { display: inline-flex; border: 2px solid var(--ink-2); border-radius: 8px; overflow: hidden; font: 700 20px "JetBrains Mono", monospace; vertical-align: middle; }
.node23 > span { padding: 2px 10px; background: var(--card); }
.node23 > span + span { border-left: 1.5px solid var(--rule); }
.node23.hot > span { background: var(--red); color: #fff; }
.node23.ok > span { background: var(--green); color: #fff; }
.redlink { color: var(--red); font-weight: 800; }

/* ---------- geometrik uygulamalar ---------- */
.geo-row { display: flex; gap: 12px; align-items: flex-start; }
.geo-row > canvas { flex: none; }
.geo-side { flex: 1; min-width: 0; font-size: 20px; }
.geo-side .mini { font-size: 16px; }
.ll-chip.hit { background: var(--green); color: #fff; border-color: var(--green); }

/* ---------- öncelik kuyrukları ---------- */
.hp-arr { display: flex; gap: 4px; flex-wrap: wrap; margin: 6px 0; font-family: "JetBrains Mono", monospace; }
.hp-cell { min-width: 46px; text-align: center; border: 2px solid var(--rule); border-radius: 8px; background: var(--card); padding: 5px 6px 6px; line-height: 1.15; }
.hp-cell i { display: block; font-style: normal; font-size: 10px; line-height: 1; margin-bottom: 4px; color: var(--muted); }
.hp-cell b { font-size: 18px; }
.hp-cell.zero { opacity: .4; }
.hp-cell.sorted { background: var(--green); border-color: var(--green); color: #fff; }
.hp-cell.sorted i { color: #fff; }
.hp-cell.cur { background: var(--amber); border-color: var(--amber); color: #111; }
.hp-cell.new, .hp-cell.found { border-color: var(--green); box-shadow: 0 0 0 2px var(--green) inset; }
.hp-cell.del { border-color: var(--red); box-shadow: 0 0 0 2px var(--red) inset; }
.hp-cell.cand { border-color: var(--purple); border-style: dashed; }
.hp-stream { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0 8px; }
.hp-stream .ll-chip { font-size: 15px; padding: 1px 7px; }
.hp-stream .ll-chip.cur { background: var(--amber); border-color: var(--amber); color: #111; }
.hp-stream .ll-chip.past { opacity: .4; }
.tm-log { flex: 1; min-width: 0; font-size: 17px; line-height: 1.5; }

/* ---------- hash tabloları ---------- */
.ch-view { display: flex; flex-direction: column; gap: 4px; font-family: "JetBrains Mono", monospace; font-size: 16px; margin: 6px 0; }
.ch-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 2px 6px; border-radius: 8px; }
.ch-row.on { background: color-mix(in srgb, var(--amber) 18%, transparent); }
.ch-idx { display: inline-block; min-width: 34px; text-align: center; font-weight: 700; border: 2px solid var(--ink-2); border-radius: 6px; background: var(--card); }
.ch-arrow, .ch-link { color: var(--muted); }
.ch-view .ll-chip { font-size: 15px; padding: 1px 8px; }
.ll-chip.cur { background: var(--amber); border-color: var(--amber); color: #111; }
.ll-chip.past { opacity: .45; }
.lp-view { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 3px; margin: 8px 0; font-family: "JetBrains Mono", monospace; }
.lp-view.small { grid-template-columns: repeat(8, minmax(0, 1fr)); font-size: 12px; }
.lp-cell { border: 2px solid var(--rule); border-radius: 6px; text-align: center; min-height: 46px; background: var(--card); overflow: hidden; }
.lp-cell i { display: block; font-style: normal; font-size: 11px; color: var(--muted); }
.lp-cell b { font-size: 12px; word-break: break-all; }
.lp-view.lp-big { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.lp-big .lp-cell { min-height: 84px; border-radius: 10px; display: flex; flex-direction: column; justify-content: flex-start; padding: 4px 4px 8px; }
.lp-big .lp-cell i { font-size: 14px; margin-bottom: 8px; }
.lp-big .lp-cell b { font-size: 20px; word-break: normal; overflow-wrap: anywhere; line-height: 1.1; }
.lp-cell.cl0 { background: color-mix(in srgb, var(--blue) 22%, var(--card)); }
.lp-cell.cl1 { background: color-mix(in srgb, var(--purple) 22%, var(--card)); }
.lp-cell.cl2 { background: color-mix(in srgb, var(--teal) 22%, var(--card)); }
.lp-cell.cur { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber) inset; }
.lp-cell.past { opacity: .55; }
.lp-cell.found { border-color: var(--green); box-shadow: 0 0 0 3px var(--green) inset; }
.lp-cell.miss { border-color: var(--red); box-shadow: 0 0 0 3px var(--red) inset; }

/* ---------- sembol tablosu uygulamaları ---------- */
.st-text { width: 100%; box-sizing: border-box; font: 16px/1.4 "Source Sans 3", sans-serif; background: var(--card); color: var(--ink); border: 1.5px solid var(--rule); border-radius: 8px; padding: 6px 10px; resize: vertical; }
.st-csv th.k, .st-csv td.k { background: color-mix(in srgb, var(--amber) 25%, transparent); }
.st-csv th.v, .st-csv td.v { background: color-mix(in srgb, var(--green) 22%, transparent); }
.st-csv td, .st-csv th { padding: 3px 6px; }
.st-idx td { padding: 3px 6px; text-align: left !important; }
.st-idx tr.on td { background: color-mix(in srgb, var(--amber) 22%, transparent); }
.mk-out { font-size: 24px; line-height: 1.5; min-height: 80px; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 8px 14px; margin: 6px 0; }
.mk-out .mk-key { background: color-mix(in srgb, var(--amber) 30%, transparent); border-radius: 4px; padding: 0 3px; }
.mk-out .mk-new { background: var(--green); color: #fff; }

/* ---------- graflar ---------- */
.gv-row { display: flex; gap: 14px; align-items: flex-start; }
.gv-wrap { flex: 1.15; min-width: 0; }
.gv-side { flex: 1; min-width: 0; font-size: 17px; }
.gv-svg { display: block; width: 100%; height: auto; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; }
.g-trace { border-collapse: collapse; font-family: "JetBrains Mono", monospace; font-size: 15px; width: 100%; }
.g-trace th, .g-trace td { border-bottom: 1px solid var(--rule); padding: 1px 8px; text-align: center; }
.g-trace th { color: var(--muted); font-size: 13px; }
.g-trace tr.on td { background: color-mix(in srgb, var(--amber) 28%, transparent); }
.g-adj { font-family: "JetBrains Mono", monospace; font-size: 16px; line-height: 1.55; }
.g-adj > div.on { background: color-mix(in srgb, var(--amber) 25%, transparent); border-radius: 5px; }
.g-adj span.nb { color: var(--blue); font-weight: 700; }
.g-mat { border-collapse: collapse; font-family: "JetBrains Mono", monospace; font-size: 12px; }
.g-mat th, .g-mat td { padding: 1px 5px; text-align: center; border: 1px solid var(--rule); }
.g-mat td.one { background: color-mix(in srgb, var(--blue) 30%, transparent); font-weight: 700; }
.g-mat tr.on td, .g-mat tr.on th { outline: 2px solid var(--amber); }
.g-dq { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0 8px; font-family: "JetBrains Mono", monospace; }
.g-dq span { border: 2px solid var(--purple); border-radius: 7px; padding: 1px 8px; background: var(--card); font-weight: 700; }
.g-dq span:last-child { background: color-mix(in srgb, var(--purple) 25%, var(--card)); }
.g-grid { font-family: "JetBrains Mono", monospace; font-size: 16px; line-height: 1.1; margin: 4px 0; }
.g-dq.post span { border-color: var(--green); }
.g-dq span.on { background: var(--amber); border-color: var(--amber); color: #111; }
.g-order { margin: 4px 0 0 1.2em; font-size: 16px; line-height: 1.35; }
.mst-list > div { padding: 0 6px; border-radius: 5px; }
.mst-list > div.in { color: var(--green); font-weight: 700; }
.mst-list > div.out { color: var(--muted); text-decoration: line-through; }
.mst-list > div.cur { background: color-mix(in srgb, var(--amber) 30%, transparent); }

/* ---------- oyun YZ’si: dünya simülasyonu ---------- */
.world-canvas { display: block; max-width: 100%; height: auto !important; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; }
.simlab-world canvas { display: block; max-width: 100%; height: auto !important; border: 1px solid var(--rule); border-radius: 10px; }
.simlab-world .sv-transport { margin-top: 4px; }
.prereq { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
.prereq a, .prereq span { border: 2px solid var(--green); border-radius: 999px; padding: 3px 12px; font-weight: 700; font-size: 17px; text-decoration: none; color: var(--ink); background: var(--card); }
.prereq .opt { border-style: dashed; border-color: var(--muted); }
.libtable td:first-child { white-space: nowrap; }
.paper { border-left: 4px solid var(--purple); padding: 4px 10px; margin: 6px 0; background: color-mix(in srgb, var(--purple) 8%, var(--card)); border-radius: 0 8px 8px 0; font-size: .82em; }
.paper b { color: var(--purple); }
.vec-info.below { font-size: 16px; display: flex; flex-wrap: wrap; gap: 0 18px; }
.vec-info.below p { margin: 4px 0; }
.pac-side { font-size: 16px; }
.pac-rule { margin: 4px 0; line-height: 1.3; }
.fsm-diag { min-height: 200px; }
.fsm-log { font: 13px/1.5 "JetBrains Mono", monospace; color: var(--ink-2); margin-top: 6px; }
.pd-stack { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; max-width: 260px; }
.pd-stack > div { border: 2px solid var(--purple); border-radius: 8px; padding: 6px 12px; font-weight: 700; background: var(--card); text-align: center; }
.pd-stack > div.top { background: var(--purple); color: #fff; }
/* davranış ağacı diyagramı */
.bt-diag { min-height: 120px; }
.btd-sc .btn { font-size: 17px; padding: 6px 12px; } .btd-sc { gap: 6px 8px; }
.btd-story { font-size: 19px; background: color-mix(in srgb, var(--amber) 14%, var(--card)); border-left: 5px solid var(--amber); border-radius: 8px; padding: 6px 12px; margin: 4px 0 6px; }
.btd-wrap { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.btd-log { font-size: 17.5px; line-height: 1.32; } .btd-log div { padding: 2px 6px; border-radius: 6px; } .btd-log span { display: inline-block; width: 20px; font-weight: 900; }
.btd-log .l-ok span { color: var(--green); } .btd-log .l-no span { color: var(--red); } .btd-log .l-no { color: var(--red); } .btd-log .now { background: color-mix(in srgb, var(--blue) 14%, var(--card)); } .btd-log .hint { color: var(--muted); }
.btd-moral { font-size: 17px; margin-top: 6px; color: var(--ink-2); } .btd-own { font-size: 14px; color: var(--muted); } .btd-own .ctl { margin-left: 8px; }
.bt-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; color: var(--muted); margin: 2px 0 6px; }
.bt-legend span[style]::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--c); margin-right: 5px; vertical-align: -1px; }
.tree-note { min-height: 1.6em; }
/* davranış ağacı: girintili (dikey) görünüm ve yol satırı */
.bt-outline { font: 600 15px/1.25 "Source Sans 3", sans-serif; }
.bto-row { margin: 2px 0; white-space: nowrap; }
.bto-pill { display: inline-block; border: 2px solid var(--rule); border-radius: 6px; padding: 0 8px; background: var(--card); color: var(--ink); }
.bto-pill.cond { border-color: var(--blue); border-radius: 12px; }
.bto-pill.act { border-color: var(--purple); }
.bto-st { font: 700 12px "JetBrains Mono", monospace; margin-left: 8px; }
.bt-path { font: 600 14px/1.6 "Source Sans 3", sans-serif; min-height: 2.2em; }
.bt-path span { display: inline-block; border-radius: 6px; padding: 0 6px; margin: 1px 2px; color: #fff; }
/* utility AI: puan çubukları */
.ctl-col { display: flex; flex-direction: column; gap: 6px; font-size: 16px; }
.ubar { display: inline-block; width: 90px; height: 10px; border-radius: 5px; background: var(--rule); overflow: hidden; vertical-align: middle; }
.ubar.wide { width: 150px; }
.ubar > i { display: block; height: 100%; border-radius: 5px; background: var(--blue); }
.unum { font: 600 12px "JetBrains Mono", monospace; margin-left: 6px; }
.ucons { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.5; }
.ulab { width: 110px; color: var(--muted); }
.ut-table { font-size: 15px; }
.ut-table td { vertical-align: middle; padding: 4px 8px; }
.ut-table tr.ut-best td { background: color-mix(in srgb, var(--green) 14%, transparent); }
.uneed, .uscore { display: grid; grid-template-columns: 120px 150px 44px; align-items: center; gap: 8px; font-size: 14px; line-height: 1.55; }
.uneed b, .uscore b { font: 600 12px "JetBrains Mono", monospace; text-align: right; }
.uscore .ubar > i { background: var(--purple); }
.uscore.on { font-weight: 800; color: var(--green); }
.uscore.on .ubar > i { background: var(--green); }
.uneed-row { display: flex; gap: 12px; font-size: 15px; margin-top: 4px; }
.mono { font-family: "JetBrains Mono", monospace; }
/* GOAP / HTN */
.gchip { display: inline-block; border: 1.5px solid var(--green); color: var(--ink); border-radius: 12px; padding: 0 8px; margin: 2px 3px; font-size: 14px; background: var(--card); }
.gchip.off { border-color: var(--rule); color: var(--muted); }
.gplan { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 15px; margin: 4px 0; }
.gcard { display: inline-flex; flex-direction: column; border: 2px solid var(--blue); border-radius: 8px; padding: 2px 10px; background: var(--card); font-weight: 700; line-height: 1.2; }
.gcard small { font-weight: 400; color: var(--muted); font-size: 11px; }
.gcard.on { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 22%, var(--card)); }
.gcard.done { border-color: var(--green); opacity: .7; }
.gcard.fail { border-color: var(--red); background: color-mix(in srgb, var(--red) 25%, var(--card)); }
.garrow { color: var(--muted); }
.gfacts .ctl { font-size: 15px; }
.gfacts-view { line-height: 1.9; }
.htn-row { font-size: 15px; line-height: 1.55; white-space: nowrap; }
.htn-t { display: inline-block; border-radius: 6px; padding: 0 8px; border: 1.5px solid var(--rule); background: var(--card); font-weight: 700; }
.htn-t.compound { border-color: var(--purple); }
.htn-t.primitive { border-color: var(--blue); }
.htn-t.on { background: var(--amber); color: #111; border-color: var(--amber); }
.htn-m { font-size: 13px; color: var(--muted); font-style: italic; }
/* oyun ağaçları: XOX ve Dört Bir Arada */
.ttt { display: grid; grid-template-columns: repeat(3, 110px); gap: 8px; flex: none; }
.ttt-c { position: relative; width: 110px; height: 110px; font: 800 64px "Source Sans 3", sans-serif; border: 2px solid var(--rule); border-radius: 12px; background: var(--card); color: var(--ink); cursor: pointer; }
.ttt-c.x { color: var(--red); } .ttt-c.o { color: var(--blue); }
.ttt-c[data-v]:not([data-v=""])::after { content: "değer " attr(data-v); position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font: 700 15px "JetBrains Mono", monospace; opacity: .9; }
.ttt-c.good::after { color: var(--blue); } .ttt-c.bad::after { color: var(--red); } .ttt-c.draw::after { color: var(--muted); }
.c4stats { margin-top: 6px; }
.cmp4 { display: grid; grid-template-columns: repeat(2, auto); gap: 6px 18px; justify-content: start; font-size: 15px; }
.cmp4 canvas { display: block; border: 1px solid var(--rule); border-radius: 6px; }

/* ---- Y14 LLM: mini dil modeli, hafıza, denetim hattı, maliyet ---- */
.lm-out { font-size: 22px; line-height: 1.6; padding: 12px 16px; background: var(--card-2); border-radius: 10px; min-height: 120px; }
.lm-out .lm-new { background: color-mix(in srgb, var(--pink) 35%, transparent); border-radius: 4px; padding: 0 3px; }
.lm-bars { font-size: 15px; }
.lm-ctx { margin-bottom: 6px; color: var(--muted); }
.lm-row { display: grid; grid-template-columns: 110px 1fr 120px; gap: 8px; align-items: center; margin: 3px 0; }
.lm-w { font-family: 'JetBrains Mono', monospace; font-weight: 700; text-align: right; }
.lm-bar { height: 14px; background: var(--card-2); border-radius: 7px; overflow: hidden; }
.lm-bar > span { display: block; height: 100%; background: var(--purple); }
.lm-p { font-family: 'JetBrains Mono', monospace; font-size: 13px; }
.mem-t { font-size: 13px; border-collapse: collapse; width: 100%; table-layout: fixed; }
.mem-t th:first-child { width: 30px; } .mem-t th:nth-child(n+3) { width: 48px; }
.reveal .mem-t th, .reveal .mem-t td { padding: 2px 4px; border-bottom: 1px solid var(--rule); text-align: left; }
.mem-t td:nth-child(n+3) { font-family: 'JetBrains Mono', monospace; text-align: right; }
.mem-t tr.mem-top td { background: color-mix(in srgb, var(--green) 22%, transparent); }
.mem-prompt { font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--card-2); padding: 10px; border-radius: 8px; margin: 0; max-height: 330px; overflow: auto; }
.mem-q { font-size: 15px; padding: 4px 8px; width: 240px; border: 1px solid var(--rule); border-radius: 6px; background: var(--card); color: var(--ink); }
.pl-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 18px; font-size: 16px; }
.pl-h { font-weight: 700; margin: 6px 0 4px; }
.pl-box { background: var(--card-2); padding: 8px 10px; border-radius: 8px; }
.pl-raw { font-size: 14.5px; white-space: pre-wrap; background: var(--card-2); padding: 8px 10px; border-radius: 8px; margin: 0; }
.pl-step { padding: 6px 10px; margin: 5px 0; border-radius: 8px; border-left: 5px solid var(--rule); background: var(--card-2); }
.pl-ok { border-left-color: var(--green); }
.pl-bad { border-left-color: var(--red); }
.pl-fb { padding: 6px 10px; margin: 5px 0; border-radius: 8px; background: color-mix(in srgb, var(--amber) 18%, transparent); }
.cc-out { margin-top: 8px; }
.cc-big { font-size: 20px; margin: 6px 0; }

/* ---- Y16 üretken YZ: Markov melodi, gömme listesi ---- */
.mk-out { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; padding: 12px; background: var(--card-2); border-radius: 10px; min-height: 110px; }
.mk-n { font-family: 'JetBrains Mono', monospace; font-weight: 700; padding: 4px 10px; border-radius: 6px; background: color-mix(in srgb, var(--purple) 25%, transparent); }
.reveal .mk-tab { font-size: 14px; border-collapse: collapse; width: 100%; }
.reveal .mk-tab th, .reveal .mk-tab td { padding: 3px 6px; border-bottom: 1px solid var(--rule); text-align: left; }
.em-list { margin: 8px 0; font-size: 16px; }
.em-row { display: grid; grid-template-columns: 200px 1fr 70px; gap: 10px; align-items: center; margin: 4px 0; padding: 2px 6px; border-radius: 6px; }
.em-row.em-top { background: color-mix(in srgb, var(--green) 18%, transparent); }
.em-n { font-weight: 700; }
.em-s { font-family: 'JetBrains Mono', monospace; text-align: right; }

/* laboratuvar sonuç paneli: test açıklaması okunabilir boyutta */
.reveal .ll-lab-view .mini { font-size: 17px; line-height: 1.4; margin: 4px 0 8px; opacity: 1; }
.reveal .ll-lab-view .mini b { font-family: "JetBrains Mono", monospace; font-size: .95em; }

/* demo denetim çubuklarındaki ipucu yazıları: projeksiyonda okunabilir boyut */
.reveal .sv-controls .mini, .reveal .demo > .mini, .reveal .demo .gv-row + .mini { font-size: 16px; opacity: .9; line-height: 1.35; }

/* kısaltma sözlüğü satırı (core.js üretir) */
.reveal .abbr-foot { position: absolute; left: 0; right: 0; top: 646px; font-size: 15px; line-height: 1.3; color: var(--muted); border-top: 1px dashed var(--rule); padding-top: 4px; text-align: left; }
.reveal .abbr-foot b { color: var(--ink-2); }

.lf-how { font-size: 18px; color: var(--ink-2); margin: 8px 0 0; line-height: 1.35; }

.btd-wrap.doors { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.bd-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 8px 0; }
.bd-card { background: var(--card); border: 2.5px solid var(--rule); border-radius: 12px; padding: 10px 14px; font-size: 18px; line-height: 1.45; }
.bd-card.now { border-color: var(--amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 30%, transparent); }
.bd-nm { font-size: 24px; font-weight: 800; } .bd-bar { height: 14px; background: var(--code-bg); border-radius: 7px; overflow: hidden; margin: 4px 0 6px; } .bd-bar i { display: block; height: 100%; background: var(--blue); }
.bd-ucb { color: var(--purple); font: 15px "JetBrains Mono", monospace; } .bd-true { color: var(--muted); font-size: 15px; }

.btd-wrap.fs { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.fs-now { font-size: 18px; margin: 2px 0 8px; padding: 6px 10px; background: var(--card); border: 1px solid var(--rule); border-radius: 8px; } .fs-lab { font-size: 16px; color: var(--muted); }
.fs-ev .btn { font-size: 16px; padding: 5px 10px; }

.ev-bars { margin: 8px 0; } .ev-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) 64px minmax(0, 1.1fr); gap: 12px; align-items: center; font-size: 19px; padding: 5px 8px; border-radius: 8px; border: 2px solid transparent; }
.ev-row.win { border-color: var(--green); background: color-mix(in srgb, var(--green) 10%, var(--card)); } .ev-nm { font-weight: 700; }
.ev-bar { height: 22px; background: var(--code-bg); border-radius: 11px; overflow: hidden; } .ev-bar i { display: block; height: 100%; background: var(--blue); transition: width .35s; } .ev-row.win .ev-bar i { background: var(--green); }
.ev-sc { font: 700 20px "JetBrains Mono", monospace; text-align: right; } .ev-why { font: 16px "JetBrains Mono", monospace; color: var(--ink-2); }
.ev-rule { font-size: 18px; padding: 6px 10px; background: var(--card); border: 1px solid var(--rule); border-radius: 8px; margin: 4px 0; } .ev-sl { font-size: 16px; gap: 6px 22px; }

.al-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 6px 0; }
.al-card { background: var(--card); border: 2.5px solid var(--rule); border-radius: 10px; padding: 7px 10px; font-size: 15.5px; line-height: 1.35; opacity: .62; }
.al-card.used { border-color: var(--green); opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 22%, transparent); }
.al-nm { font-size: 18px; font-weight: 800; margin-bottom: 2px; } .al-nm span { display: block; font: 13px "JetBrains Mono", monospace; color: var(--muted); font-weight: 400; }
.al-plan { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 6px; font-size: 20px; }
.al-step { background: var(--green); color: #fff; font-weight: 800; padding: 6px 14px; border-radius: 10px; } .al-step small { margin-left: 8px; opacity: .85; font: 14px "JetBrains Mono", monospace; }
.al-st { padding: 6px 12px; border-radius: 10px; border: 2px solid var(--rule); background: var(--card); } .al-st.ok { border-color: var(--green); } .al-arrow { color: var(--muted); font-weight: 900; } .al-tot { margin-left: 14px; font-size: 18px; color: var(--ink-2); }
.btd-wrap.al { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }

.btd-wrap.ah { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } .ah-leg { font-size: 16px; color: var(--ink-2); line-height: 1.35; margin-bottom: 8px; }
.ah-open { font-size: 18px; } .ah-open div { font: 17px "JetBrains Mono", monospace; padding: 2px 8px; border-radius: 6px; } .ah-open .first { background: color-mix(in srgb, var(--amber) 28%, var(--card)); font-weight: 700; }
.ah-note { font-size: 16.5px; min-height: 44px; }

.btd-wrap.sh { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.sh-tbl { font-size: 18px; line-height: 1.35; } .sh-tbl > div { margin: 5px 0; } .sh-tbl i { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; }
.sh-tbl span { color: var(--ink-2); font-size: 16px; } .sh-k { font: 700 20px "JetBrains Mono", monospace; } .sh-next { color: var(--muted); font-size: 16px; }

.ev-side { font-size: 17px; } .ev-big { font-size: 24px; font-weight: 800; margin-bottom: 6px; } .ev-big span { color: var(--blue); }
.ev-h { display: grid; grid-template-columns: 26px 1fr 70px; align-items: center; gap: 6px; font: 15px "JetBrains Mono", monospace; margin: 3px 0; } .ev-h i { display: block; height: 12px; background: var(--green); border-radius: 6px; }
.lnks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .lnks:has(> .lnk:nth-child(5)) { grid-template-columns: repeat(3, 1fr); }
.lnk { display: block; background: var(--card); border: 1.5px solid var(--rule) !important; border-radius: 12px; padding: 16px 18px; color: var(--ink) !important; text-decoration: none !important; box-shadow: var(--shadow); }
.lnk:hover { border-color: var(--blue) !important; } .lnk-t { font-size: 22px; font-weight: 800; color: var(--blue); line-height: 1.25; } .lnk-s { font-size: 15px; color: var(--muted); margin: 3px 0 8px; } .lnk-w { font-size: 18px; line-height: 1.4; color: var(--ink-2); } .lnks:has(> .lnk:nth-child(5)) .lnk-w { font-size: 16px; }

.demo-help { display: none; }
.dh-bar { position: relative; display: flex; justify-content: flex-end; gap: 8px; margin: -6px 0 4px; z-index: 20; }
.dh-btn { font-size: 15px !important; padding: 4px 12px !important; }
.dh-panel { position: absolute; right: 0; top: 38px; width: min(620px, 96%); max-height: 520px; overflow: auto; background: var(--card); border: 2.5px solid var(--blue); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.25); padding: 12px 20px 14px; font-size: 18px; line-height: 1.42; text-align: left; }
.dh-panel .dh-h { font-size: 21px; font-weight: 800; margin: 0 26px 6px 0; color: var(--blue); } .dh-panel ol, .dh-panel ul { margin: 4px 0 4px 1.1em; padding: 0; } .dh-panel li { margin: 4px 0; }
.dh-x { position: absolute; right: 10px; top: 8px; border: none; background: none; font-size: 20px; cursor: pointer; color: var(--muted); }

/* okunurluk: kutu ve paneller içinde ferah satır aralığı */
.box { line-height: 1.42; } .box li { margin: .22em 0; } .box p { margin: .35em 0; }
/* yardım düğmeleri demonun sağ üst köşesine biner; yer kaplamaz */
.dh-bar { margin: 0 0 6px; justify-content: flex-end; align-items: center; }
.dh-bar.in-tr { margin: 0 0 0 auto; gap: 6px; } .dh-bar.in-tr .dh-panel { top: auto; bottom: 46px; }

.tight .box { line-height: 1.28; } .tight .box li { margin: .08em 0; } .tight .box p { margin: .2em 0; }

.rad { white-space: nowrap; } .rad > span { display: inline-block; border-top: .07em solid currentColor; line-height: 1.02; padding: .06em .1em 0 .08em; margin-left: -.04em; }
/* demoların altındaki satırlar arasında nefes payı (oynatma çubuğu, açıklama, sayaçlar) */
.sv-transport { margin: 10px 0 8px; } .sv-note { margin: 8px 0 4px; line-height: 1.42; } .sv-counters { margin: 8px 0 6px; gap: 10px; }
.demo + p.mini, .demo + .legend-bar, .sortviz + .legend-bar, .bstviz + p.mini { margin-top: 12px; }
.sv-controls { margin-bottom: 10px; }
.dh-bar.in-tr .dh-panel { max-height: 400px; z-index: 40; }

.dh-bar.in-h2 { position: absolute; top: 18px; right: 66px; margin: 0; z-index: 30; } .dh-bar.in-h2 .dh-panel { top: 40px; }
/* davranış ağacı “Çizimle” slaytları (yz-davranis-agaclari D.btfig) */
.btfig { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.btfig-p { flex: 1 1 300px; min-width: 0; background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 8px 10px; }
.btfig-t { font-weight: 800; font-size: 17px; margin-bottom: 2px; }
.btfig-c { font-size: 15px; color: var(--ink-2); line-height: 1.35; margin-top: 2px; }
.btfig .bt-legend { flex-basis: 100%; }
/* dairesel tampon yan paneli: yazılar okunur boyda (önceden çok küçüktü) */
.ring-side { font-size: 18px; line-height: 1.4; } .ring-side .mini { font-size: 16px; } .ring-side .sv-note { font-size: 17px; }
.ring-side .ll-chip { font-size: 17px; } .ring-side .combo-row { font-size: 16px; } .ring-side code { font-size: 15px; }
.sum-t.iz-t th, .sum-t.iz-t td { padding: 4px 7px; line-height: 1.25; }
/* 🎮 Bu sunumdaki oyunlar (araclar/oyunref.py) */
.oyun-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.oyun-kart { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 9px 12px; font-size: 17px; line-height: 1.3; }
.oyun-kart .ok-bas b { font-size: 18px; }
.oyun-kart .ok-bas span { color: var(--muted); font-size: 14px; white-space: nowrap; }
.oyun-kart .ok-oz { margin: 4px 0 6px; color: var(--ink-2, var(--ink)); }
.oyun-kart .ok-bag { font-size: 15px; }
.oyun-kart .ok-bag a { white-space: nowrap; }
.oy-vid-kutu { position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, .72); display: flex; align-items: center; justify-content: center; }
.oy-vid-kutu .ovk-ic { position: relative; width: min(88vw, 150vh); }
.oy-vid-kutu iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; background: #000; display: block; }
.oy-vid-kutu .ovk-x { position: absolute; top: -40px; right: 0; background: none; border: 0; color: #fff; font-size: 26px; cursor: pointer; }
.oy-vid-kutu .ovk-alt { color: #ddd; font: 15px/1.4 'Source Sans 3', sans-serif; margin-top: 8px; }
.oy-vid-kutu .ovk-alt a { color: #9cf; }
.cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.dh-bar.in-h2 .dh-panel, .dh-bar.in-tr .dh-panel { width: 620px; }   /* çubuk yalnızca düğme kadar geniş: yüzde genişlik paneli daraltıyordu */
.hale text:not([fill="#fff"]):not([fill="#111"]) { stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; paint-order: stroke; }   /* üstünden çizgi geçen etiketler okunur kalsın */