/* BilArena — devre kartı teması */
@font-face { font-family: 'Baloo 2'; font-weight: 600; font-display: swap; src: url(/fonts/baloo-2-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: 'Baloo 2'; font-weight: 600; font-display: swap; src: url(/fonts/baloo-2-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: 'Baloo 2'; font-weight: 800; font-display: swap; src: url(/fonts/baloo-2-latin-800-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: 'Baloo 2'; font-weight: 800; font-display: swap; src: url(/fonts/baloo-2-latin-ext-800-normal.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: 'Atkinson'; font-weight: 400; font-display: swap; src: url(/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: 'Atkinson'; font-weight: 400; font-display: swap; src: url(/fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF; }
@font-face { font-family: 'Atkinson'; font-weight: 700; font-display: swap; src: url(/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: 'Atkinson'; font-weight: 700; font-display: swap; src: url(/fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF; }

:root {
  --pcb: #0f5a44;        /* lehim maskesi yeşili */
  --pcb-deep: #093d2f;
  --pcb-line: #2c7a60;   /* bakır olmayan iz */
  --copper: #d8a23d;     /* bakır ped */
  --copper-dark: #a8781f;
  --silk: #f3f6ef;       /* serigrafi beyazı */
  --desk: #e9efec;       /* öğretmen masası */
  --ink: #12332a;
  --muted: #557268;
  --a0: #e5484d; --a1: #2f6feb; --a2: #e8a800; --a3: #8e4ec6; /* cevap renkleri */
  --ok: #2fbf71; --bad: #e5484d;
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px;
  --display: 'Baloo 2', ui-rounded, system-ui, sans-serif;
  --text: 'Atkinson', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 400 1rem/1.5 var(--text); color: var(--ink); background: var(--desk); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.1; margin: 0 0 .5em; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--copper); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Oyun yüzeyi (devre kartı) ---------- */
body.board {
  background-color: var(--pcb);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.07) 1px, transparent 0),
    linear-gradient(var(--pcb), var(--pcb-deep));
  background-size: 22px 22px, 100% 100%;
  color: var(--silk);
  min-height: 100dvh;
}
.board a:not(.btn) { color: var(--copper); }
a.btn { text-decoration: none; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  border: 0; border-radius: var(--r-md); padding: .75em 1.4em; cursor: pointer;
  font-family: var(--display); font-weight: 800; font-size: 1.1rem; letter-spacing: .01em;
  background: var(--copper); color: #2b1d02; box-shadow: 0 4px 0 var(--copper-dark);
  transition: transform .08s, box-shadow .08s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--copper-dark); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.btn.small { font-size: .95rem; padding: .45em .9em; }
.btn.danger { background: var(--bad); color: #fff; box-shadow: 0 4px 0 #9e2b2f; }
.btn.dark { background: var(--ink); color: var(--silk); box-shadow: 0 4px 0 #06150f; }

/* Çip: PIN ve önemli sayılar bir entegre devre gibi gösterilir */
.chip {
  position: relative; display: inline-block; background: #17181a; color: var(--silk);
  border-radius: var(--r-sm); padding: .35em .8em; font-family: var(--display); font-weight: 800;
  letter-spacing: .08em; box-shadow: 0 6px 0 #000a;
}
.chip::before, .chip::after {
  content: ''; position: absolute; left: 10%; right: 10%; height: 8px;
  background: repeating-linear-gradient(90deg, var(--copper) 0 10px, transparent 10px 22px);
}
.chip::before { top: -8px; } .chip::after { bottom: -8px; }

.field { display: grid; gap: .35rem; }
.field label { font-weight: 700; font-size: .95rem; }
.input {
  width: 100%; border: 2px solid #c6d4ce; border-radius: var(--r-md); padding: .7em .9em; background: #fff; color: var(--ink);
}
.board .input { border-color: transparent; }
.input:focus { border-color: var(--copper); outline: none; }

/* ---------- Öğrenci giriş ---------- */
.join { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.join-card { width: min(420px, 100%); text-align: center; }
.logo { font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem, 9vw, 3.6rem); line-height: 1; margin-bottom: .2em; }
.logo span { color: var(--copper); }
.join-card p { color: #cfe3da; margin: 0 0 1.6rem; }
.pin-input { font-family: var(--display); font-weight: 800; font-size: 2rem; text-align: center; letter-spacing: .25em; padding: .4em; }
.join-card form { display: grid; gap: 14px; }
.msg { min-height: 1.5em; font-weight: 700; color: #ffd0d1; }
.foot { margin-top: 2rem; font-size: .9rem; color: #a9c8bc; }

/* ---------- Öğrenci oyun ekranı ---------- */
.play { min-height: 100dvh; display: flex; flex-direction: column; }
.play-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; background: #0007; font-weight: 700; }
.play-top .score { font-family: var(--display); font-size: 1.3rem; color: var(--copper); }
.play-main { flex: 1; display: flex; flex-direction: column; padding: 16px; gap: 16px; max-width: 900px; width: 100%; margin: 0 auto; }
.center-msg { flex: 1; display: grid; place-content: center; text-align: center; gap: 12px; }
.center-msg h2 { font-size: clamp(1.8rem, 6vw, 2.6rem); }
.q-text { font-family: var(--display); font-weight: 600; font-size: clamp(1.25rem, 4.5vw, 1.8rem); line-height: 1.25; background: var(--silk); color: var(--ink); padding: 16px 18px; border-radius: var(--r-md); }
.answers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1; min-height: 50vh; }
@media (max-width: 560px) { .answers { grid-template-columns: 1fr; min-height: auto; } }
.ans {
  border: 0; border-radius: var(--r-md); color: #fff; padding: 16px; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 14px; font-weight: 700; font-size: clamp(1.05rem, 3.6vw, 1.35rem);
  min-height: 72px; box-shadow: 0 5px 0 #0006; transition: transform .08s, opacity .2s;
}
.ans:active { transform: translateY(3px); box-shadow: 0 2px 0 #0006; }
.ans:disabled { cursor: default; }
.ans .shape { flex: 0 0 34px; height: 34px; background: #fff; }
.ans0 { background: var(--a0); } .ans0 .shape { clip-path: polygon(50% 5%, 95% 92%, 5% 92%); }
.ans1 { background: var(--a1); } .ans1 .shape { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.ans2 { background: var(--a2); color: #2a1e00; } .ans2 .shape { border-radius: 50%; background: #2a1e00; }
.ans3 { background: var(--a3); } .ans3 .shape { border-radius: 4px; transform: scale(.85); }
.ans.dim { opacity: .35; }
.ans.right { outline: 5px solid #fff; }

.timer { height: 10px; border-radius: 10px; background: #0005; overflow: hidden; }
.timer > i { display: block; height: 100%; background: var(--copper); transform-origin: left; }

.result { border-radius: var(--r-lg); padding: 28px 20px; text-align: center; }
.result.good { background: var(--ok); color: #05301a; }
.result.bad { background: var(--bad); color: #fff; }
.result h2 { font-size: 2.2rem; margin-bottom: .2em; }
.result p { margin: .2em 0; font-size: 1.1rem; }

.toast { position: fixed; left: 50%; top: 16px; transform: translateX(-50%); background: #17181a; color: var(--silk); padding: 12px 18px; border-radius: var(--r-md); font-weight: 700; z-index: 50; box-shadow: 0 8px 20px #0006; max-width: calc(100% - 32px); }

/* Altın avı sandıkları: bkz. dosya sonu (Canlı görseller) */
/* Yarış: devre yolu */
.track { display: grid; gap: 10px; }
.lane { position: relative; height: 34px; }
.lane::before { content: ''; position: absolute; left: 0; right: 28px; top: 50%; height: 6px; transform: translateY(-50%); background: var(--copper-dark); border-radius: 3px; }
.lane::after { content: ''; position: absolute; right: 0; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); background: var(--copper); border-radius: 50%; box-shadow: 0 0 0 5px #0f5a44, 0 0 0 7px var(--copper); }
.lane .sig {
  position: absolute; top: 50%; transform: translateY(-50%); transition: left .6s cubic-bezier(.3,1.4,.5,1); max-width: 130px; overflow: hidden; text-overflow: ellipsis;
  background: var(--silk); color: var(--ink); border-radius: 999px; padding: 2px 10px; font-weight: 700; font-size: .85rem; white-space: nowrap; z-index: 1;
}
.lane .sig.me { background: var(--copper); color: #2b1d02; }
.lane .sig.frozen { background: #8fb0ff; }
.lane .sig.done { background: var(--ok); }
@media (prefers-reduced-motion: reduce) { .lane .sig, .ans, .btn { transition: none; } }

/* ---------- Öğretmen sunum ekranı ---------- */
.host { min-height: 100dvh; display: flex; flex-direction: column; }
.host-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 20px; background: #0007; flex-wrap: wrap; }
.host-bar .title { font-family: var(--display); font-weight: 800; font-size: 1.2rem; }
.host-bar .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.host-main { flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 1400px; margin: 0 auto; }
.lobby { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; text-align: center; justify-items: center; padding-top: 2vh; }
.lobby .how { font-size: clamp(1.1rem, 2.4vw, 1.6rem); }
.lobby .how b { color: var(--copper); }
.lobby .pin { font-size: clamp(3.5rem, 13vw, 9rem); line-height: 1; padding: .2em .6em; }
.roster { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 1100px; }
.roster .p { background: var(--silk); color: var(--ink); padding: .35em .9em; border-radius: 999px; font-weight: 700; border: 0; cursor: pointer; font-size: 1.05rem; }
.roster .p.off { opacity: .45; }
.roster .p:hover { background: #ffd0d1; text-decoration: line-through; }
.count { font-family: var(--display); font-size: 1.4rem; }
.host-q { font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem, 3.4vw, 3rem); text-align: center; background: var(--silk); color: var(--ink); border-radius: var(--r-lg); padding: 24px 28px; }
.host-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.big-timer { width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 3rem; background: #17181a; border: 6px solid var(--copper); }
.host .answers { min-height: 32vh; }
.host .ans { font-size: clamp(1.2rem, 2.2vw, 1.8rem); cursor: default; }
.ans .cnt { margin-left: auto; font-family: var(--display); font-size: 1.6rem; }
.explain { background: #0006; border-radius: var(--r-md); padding: 12px 16px; font-size: 1.15rem; }
.board-list { list-style: none; padding: 0; margin: 0 auto; width: min(760px, 100%); display: grid; gap: 8px; counter-reset: r; }
.board-list li { display: flex; align-items: center; gap: 14px; background: var(--silk); color: var(--ink); border-radius: var(--r-md); padding: 10px 16px; font-weight: 700; font-size: 1.25rem; }
.board-list li .rk { font-family: var(--display); font-weight: 800; width: 2ch; color: var(--muted); }
.board-list li .sc { margin-left: auto; font-family: var(--display); font-weight: 800; }
.board-list li:nth-child(1) { background: var(--copper); }
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 14px; margin-top: 2vh; }
.podium .step { width: min(220px, 30vw); text-align: center; }
.podium .step .name { font-family: var(--display); font-weight: 800; font-size: clamp(1.1rem, 2.5vw, 1.8rem); }
.podium .step .block { background: var(--silk); color: var(--ink); border-radius: var(--r-md) var(--r-md) 0 0; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 3rem; }
.podium .s1 .block { height: 220px; background: var(--copper); } .podium .s2 .block { height: 160px; } .podium .s3 .block { height: 120px; }
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 1.05rem; }
.feed li { background: #0006; padding: 6px 12px; border-radius: var(--r-sm); }
.split { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* ---------- Öğretmen paneli (açık zemin) ---------- */
.desk-top { background: var(--pcb); color: var(--silk); }
.desk-top .in { max-width: 1100px; margin: 0 auto; padding: 14px 16px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.desk-top .logo { font-size: 1.8rem; margin: 0; }
.tabs { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.tab { border: 0; background: transparent; color: #cfe3da; padding: .5em .9em; border-radius: var(--r-sm); cursor: pointer; font-weight: 700; }
.tab[aria-current="page"] { background: var(--silk); color: var(--ink); }
.tab { text-decoration: none; }
.who { font-size: .95rem; display: flex; gap: 10px; align-items: center; }
.who button { background: none; border: 0; color: var(--copper); cursor: pointer; font-weight: 700; padding: 0; }
.page { max-width: 1100px; margin: 0 auto; padding: 24px 16px 60px; }
.page h1 { font-size: 2rem; }
.page a:not(.btn) { color: var(--pcb); font-weight: 700; }
.lead { color: var(--muted); max-width: 65ch; margin-top: -.3em; }
.panel { background: #fff; border-radius: var(--r-lg); padding: 22px; border: 1px solid #d3dfda; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .grid2 { grid-template-columns: 1fr; } }
.seg { display: inline-flex; background: var(--desk); border-radius: var(--r-md); padding: 4px; gap: 4px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; padding: .45em 1em; border-radius: var(--r-sm); cursor: pointer; font-weight: 700; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--silk); }
.outcomes { display: grid; gap: 8px; }
.outcome { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-md); border: 2px solid #d3dfda; cursor: pointer; }
.outcome:has(input:checked) { border-color: var(--pcb); background: #eef6f2; }
.outcome input { margin-top: .3em; accent-color: var(--pcb); width: 18px; height: 18px; }
.code { font-weight: 700; color: var(--pcb); white-space: nowrap; }
.stack { display: grid; gap: 18px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.quiz-list { display: grid; gap: 10px; }
.quiz-item { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; background: #fff; border: 1px solid #d3dfda; border-radius: var(--r-md); padding: 14px 16px; }
.quiz-item h3 { font-size: 1.2rem; margin: 0 0 .15em; }
.meta { color: var(--muted); font-size: .92rem; }
.empty { text-align: center; padding: 40px 16px; color: var(--muted); }
.empty .btn { margin-top: 12px; }
.status { padding: 12px 14px; border-radius: var(--r-md); font-weight: 700; }
.status.err { background: #fde3e4; color: #8b1d22; }
.status.info { background: #e3efe9; color: var(--ink); }

/* Soru düzenleyici */
.qedit { border: 1px solid #d3dfda; border-radius: var(--r-md); padding: 14px; display: grid; gap: 10px; background: #fff; }
.qedit .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 640px) { .qedit .opts { grid-template-columns: 1fr; } }
.opt { display: flex; gap: 8px; align-items: center; }
.opt input[type="radio"] { accent-color: var(--ok); width: 20px; height: 20px; flex: 0 0 auto; }
.opt .sw { width: 14px; height: 14px; border-radius: 3px; flex: 0 0 auto; }
textarea.input { resize: vertical; min-height: 64px; }

/* Modal */
dialog { border: 0; border-radius: var(--r-lg); padding: 0; width: min(520px, calc(100% - 32px)); }
dialog::backdrop { background: #082a20cc; }
dialog .in { padding: 24px; display: grid; gap: 16px; }

/* Rapor */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #e1e9e5; vertical-align: top; }
th { font-size: .9rem; color: var(--muted); font-weight: 700; }
.bar { height: 10px; background: #e1e9e5; border-radius: 10px; overflow: hidden; min-width: 80px; }
.bar > i { display: block; height: 100%; background: var(--pcb); }
.pct { font-weight: 700; }
.low { color: #b3261e; }
.scroll { overflow-x: auto; }

/* Giriş sayfası (öğretmen) */
.auth { min-height: 100dvh; display: grid; grid-template-columns: 1fr 1fr; }
.auth .side { background: var(--pcb); color: var(--silk); padding: 48px; display: flex; flex-direction: column; justify-content: space-between; }
.auth .side p { color: #cfe3da; max-width: 40ch; font-size: 1.1rem; }
.auth .form { display: grid; place-items: center; padding: 32px 16px; }
.auth form { width: min(380px, 100%); display: grid; gap: 14px; }
@media (max-width: 760px) { .auth { grid-template-columns: 1fr; } .auth .side { padding: 28px 16px; } }
.copper-link { color: var(--copper); }
a.plain { color: inherit; text-decoration: none; }
.lbl { font-weight: 700; }

/* ---------- Kumanda ---------- */
.how.small { font-size: clamp(1rem, 1.6vw, 1.2rem); color: #cfe3da; margin-top: -18px; }
.roster .p .rid { display: inline-block; background: var(--ink); color: var(--silk); border-radius: 6px; font-size: .8em; padding: 0 .4em; margin-right: .4em; }
.roster .p .low { color: #b3261e; font-size: .85em; }
.ans .key { margin-left: auto; flex: 0 0 auto; width: 1.8em; height: 1.8em; border-radius: 50%; display: grid; place-items: center; background: #fff3; font-family: var(--display); font-weight: 800; }
.ans .cnt + .key { margin-left: 12px; }
.rx-on { box-shadow: inset 0 0 0 2px var(--ok) !important; color: #b9f3d3 !important; }
.sim { position: fixed; right: 0; bottom: 0; left: 0; max-height: 52vh; overflow: auto; background: #0b2c22f2; border-top: 3px solid var(--copper); padding: 12px 16px; z-index: 40; color: var(--silk); }
.sim-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.sim-head .meta { color: #a9c8bc; flex: 1; }
.sim-list { display: flex; gap: 14px; flex-wrap: wrap; }
.remote { background: #23262b; border-radius: 22px; padding: 12px; width: 260px; box-shadow: 0 6px 0 #000a; }
.remote-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: .9rem; }
.remote-top .linkish { margin-left: auto; background: none; border: 0; color: #a9c8bc; cursor: pointer; }
.led { width: 12px; height: 12px; border-radius: 50%; background: #333; box-shadow: 0 0 8px currentColor; }
.oled { background: #000; color: #e9f2ff; font: 13px/1.25 ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace; padding: 6px 8px; border-radius: 4px; min-height: 92px; white-space: pre; overflow: hidden; }
.oled .oh { display: flex; justify-content: space-between; background: #e9f2ff; color: #000; margin: -2px -4px 3px; padding: 0 4px; }
.remote-ctl { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.joy { display: grid; grid-template-columns: repeat(3, 30px); grid-template-rows: repeat(3, 30px); gap: 2px; }
.jbtn { border: 0; border-radius: 6px; background: #3a3f46; color: #ddd; cursor: pointer; font-size: .8rem; }
.ju { grid-area: 1 / 2; } .jl { grid-area: 2 / 1; } .jc { grid-area: 2 / 2; border-radius: 50%; } .jr { grid-area: 2 / 3; } .jd { grid-area: 3 / 2; }
.keys { display: grid; grid-template-columns: repeat(2, 48px); gap: 8px; }
.kbtn { border: 0; height: 44px; border-radius: 50%; color: #fff; font-family: var(--display); font-weight: 800; font-size: 1.1rem; cursor: pointer; box-shadow: 0 3px 0 #0008; }
.kbtn:active { transform: translateY(2px); box-shadow: none; }
.kbtn.ans2 { color: #2a1e00; }

/* ---- Soru görselleri ---- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.q-img { display: block; max-width: 100%; max-height: 32vh; margin: 0 auto; border-radius: var(--r-md); background: #fff; object-fit: contain; }
.host-img { display: block; max-width: min(100%, 900px); max-height: 38vh; margin: 0 auto; border-radius: var(--r-lg); background: #fff; object-fit: contain; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.qimg-box { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 2px dashed var(--line, #c9d3cf); border-radius: var(--r-md); }
.qimg-box.has { border-style: solid; }
.qimg-box.drag { border-color: var(--a1); background: rgba(47,111,235,.06); }
.qimg-box label.btn { cursor: pointer; }
.qimg-box label.btn:focus-within { outline: 3px solid var(--a1); outline-offset: 2px; }
.qimg { max-height: 140px; max-width: 260px; border-radius: 8px; background: #fff; object-fit: contain; }
.rep-img { display: block; max-height: 56px; max-width: 100px; margin-bottom: 4px; border-radius: 6px; }
/* Görselli soruda tahta tek ekrana sığsın */
.host-main:has(.host-img) { gap: 12px; padding-top: 12px; }
.host-main:has(.host-img) .host-q { font-size: clamp(1.2rem, 2.4vw, 2rem); padding: 12px 20px; }
.host-main:has(.host-img) .host-img { max-height: 30vh; }
.host-main:has(.host-img) .answers { min-height: 0; }
.host-main:has(.host-img) .ans { min-height: 64px; padding-top: 10px; padding-bottom: 10px; }
.host-main:has(.host-img) .big-timer { transform: scale(.8); }

/* ---- PDF'ten içe aktarma ---- */
.src-tabs { margin: 4px 0 12px; }
.src-tabs a { text-decoration: none; }
.src-tabs a[aria-current="page"] { background: var(--ink, #12352b); color: #fff; }
.imp-bar { position: sticky; top: 0; z-index: 2; }
.imp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; margin: 14px 0 90px; }
.imp-card { background: #fff; border: 2px solid var(--line, #d5dfdb); border-radius: var(--r-md); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.imp-card.todo { border-color: #e8a800; }
.imp-img { width: 100%; max-height: 420px; object-fit: contain; background: #fff; border: 1px solid #eee; border-radius: 8px; }
.imp-ans { display: flex; align-items: center; gap: 8px; }
.kpick { width: 46px; height: 40px; border-radius: 10px; border: 2px solid #c9d3cf; background: #fff; font-weight: 800; font-size: 1.05rem; cursor: pointer; }
.kpick[aria-pressed="true"] { color: #fff; border-color: transparent; }
.kpick.ans0[aria-pressed="true"] { background: var(--a0); } .kpick.ans1[aria-pressed="true"] { background: var(--a1); }
.kpick.ans2[aria-pressed="true"] { background: var(--a2); color: #2a2100; } .kpick.ans3[aria-pressed="true"] { background: var(--a3); }
.kpick:focus-visible { outline: 3px solid var(--a1); outline-offset: 2px; }
.src.ailow { color: #b54708; font-weight: 700; }
.src.ai { color: #8a5a00; }
.src.key, .src.me { color: #1f7a4d; }
.sticky-actions { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: flex-end; align-items: center; gap: 14px; padding: 12px max(16px, calc((100vw - 1100px) / 2)); background: rgba(255,255,255,.96); border-top: 1px solid #dde5e2; z-index: 3; }
.box-dlg { width: min(96vw, 1000px); max-height: 94vh; padding: 0; border: 0; border-radius: 14px; }
.box-dlg::backdrop { background: rgba(0,0,0,.55); }
.box-head { position: sticky; top: 0; background: #fff; padding: 12px 14px; border-bottom: 1px solid #e3e9e6; z-index: 1; gap: 10px; flex-wrap: wrap; }
.box-stage { position: relative; cursor: crosshair; user-select: none; touch-action: none; }
.box-stage img { display: block; width: 100%; height: auto; }
.box-rect { position: absolute; border: 3px solid #2f6feb; background: rgba(47,111,235,.12); pointer-events: none; }
/* Sadece görselden oluşan soru (PDF'ten): görsel büyük, şıklar tek sıra */
.host-main.img-only .host-img { max-height: 56vh; max-width: min(100%, 1200px); }
.host-main.img-only .answers { grid-template-columns: repeat(4, 1fr); min-height: 0; }
.host-main.img-only .ans { min-height: 72px; justify-content: center; font-size: 2rem; }
.answers.compact { grid-template-columns: 1fr 1fr; }
.answers.compact .ans { min-height: 110px; font-size: 1.6rem; justify-content: center; }
.src-tabs a { padding: .45em 1em; border-radius: 999px; font-weight: 700; color: var(--ink, #12352b); }
.host-main.img-only .host-img { width: min(100%, 1100px); height: auto; }
.host-main.img-only .answers, .answers.compact { flex: 0 0 auto; min-height: 0; }
.play-main:has(.answers.compact) .q-img { width: 100%; height: auto; max-height: 55vh; }
.keybox { border: 1px dashed #c9d3cf; border-radius: var(--r-md); padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.keybox legend { font-weight: 700; padding: 0 4px; }
.pick-dlg { width: min(94vw, 560px); border: 0; border-radius: 14px; padding: 0; }
.pick-dlg::backdrop { background: rgba(0,0,0,.5); }
.pick-dlg .btn { text-align: left; justify-content: flex-start; }

/* Paragraflı (uzun) sorular */
.host-q.long { font-size: clamp(1.15rem, 2vw, 1.7rem); font-weight: 600; text-align: left; line-height: 1.4; }
.q-text.long { font-size: clamp(1rem, 3.6vw, 1.25rem); font-weight: 500; line-height: 1.4; }

/* Gerçek zorluk ve soru değiştirme */
.qstat { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.dbadge { display: inline-block; border-radius: 999px; padding: 1px 10px; font-weight: 700; font-size: .8rem; }
.dbadge.kolay { background: #d8f5e5; color: #0d5a32; }
.dbadge.orta { background: #fdf0c8; color: #6b4d00; }
.dbadge.zor { background: #fde0e0; color: #8f1d22; }
.qwarn { color: #8f1d22; font-weight: 700; }
.qsummary { background: #fff; border: 1px solid #d3dfda; border-left: 4px solid var(--a2); border-radius: var(--r-md); padding: 10px 14px; }
.qsummary p { margin: .3em 0 0; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--a1); text-decoration: underline; cursor: pointer; font: inherit; }

/* Konu yazarak quiz */
.topic-ex { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.tchip { border: 1px solid #c6d4ce; background: #fff; color: var(--ink); border-radius: 999px; padding: .25em .8em; font: inherit; font-size: .9rem; cursor: pointer; }
.tchip:hover, .tchip:focus-visible { border-color: var(--ink); }
.src-tabs { flex-wrap: wrap; }

/* ================= Canlı görseller: karakterler, sandıklar, yarış ================= */
.ava { display: inline-block; flex: 0 0 auto; width: 40px; height: 40px; line-height: 0; }
.ava svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 0 rgba(0,0,0,.25)); }
.ava.sm { width: 32px; height: 32px; } .ava.md { width: 60px; height: 60px; } .ava.lg { width: 100px; height: 100px; } .ava.xl { width: 150px; height: 150px; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes shake { 0%, 100% { transform: translateX(0) rotate(0); } 20% { transform: translateX(-6px) rotate(-6deg); } 40% { transform: translateX(6px) rotate(6deg); } 60% { transform: translateX(-4px) rotate(-3deg); } 80% { transform: translateX(4px) rotate(3deg); } }
@keyframes arrive { 0% { transform: translateY(30px) scale(.5); opacity: 0; } 70% { transform: translateY(-6px) scale(1.08); opacity: 1; } 100% { transform: none; } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,224,102,.0); } 50% { box-shadow: 0 0 32px 6px rgba(255,224,102,.55); } }
.bob { animation: bob 2.6s ease-in-out infinite; }
.pop { animation: pop .45s cubic-bezier(.3,1.5,.5,1) both; }

/* Katılma: karakter seçimi */
.join-card.wide { width: min(560px, 100%); }
.ava-hero { position: relative; display: flex; justify-content: center; margin: 0 auto 6px; min-height: 150px; }
.step-title { font-family: var(--display); font-weight: 800; font-size: 1.3rem; color: var(--silk) !important; margin: 0 0 .6rem !important; }
.ava-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 18px; }
@media (max-width: 380px) { .ava-grid { grid-template-columns: repeat(4, 1fr); } }
.ava-pick { border: 0; background: rgba(255,255,255,.1); border-radius: 14px; padding: 6px; cursor: pointer; transition: transform .12s, background .12s; aspect-ratio: 1; display: grid; place-items: center; }
.ava-pick .ava { width: 100%; height: 100%; }
.ava-pick:hover { transform: translateY(-2px); background: rgba(255,255,255,.18); }
.ava-pick[aria-checked="true"] { background: var(--silk); box-shadow: 0 0 0 4px var(--copper); transform: scale(1.06); }
.rand-note { background: rgba(0,0,0,.25); border-radius: var(--r-md); padding: 10px 14px; margin: 0 !important; }

/* Öğrenci üst çubuğu ve lobi */
.play-top .me { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.play-top .score { display: inline-flex; align-items: center; gap: 6px; }
.lobby-me { align-items: center; text-align: center; justify-content: center; }
.my-name { font-size: clamp(1.8rem, 7vw, 2.6rem); margin: 0; }
.lobby-wait { color: #cfe3da; max-width: 36ch; margin: 0 auto; }
.ava-change { width: min(560px, 100%); background: rgba(0,0,0,.2); border-radius: var(--r-md); padding: 10px 12px; }
.ava-change summary { cursor: pointer; font-weight: 700; color: var(--copper); list-style-position: inside; }
.ava-change .ava-grid { margin: 12px 0 4px; }
.medal { position: absolute; right: calc(50% - 90px); bottom: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 1.5rem; color: #2b1d02; border: 3px solid #12332a; animation: pop .5s .3s both; }
.medal.m1 { background: #ffd43b; } .medal.m2 { background: #dee2e6; } .medal.m3 { background: #e8a87c; }

/* Sonuç kartları */
.result { position: relative; }
.result.meh { background: #dee2e6; color: var(--ink); }
.streak { position: absolute; top: -14px; right: 14px; background: var(--copper); color: #2b1d02; font-family: var(--display); font-weight: 800; padding: 2px 12px; border-radius: 999px; border: 3px solid #12332a; transform: rotate(4deg); }

/* Hazine sandıkları */
.chests { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.chest { position: relative; border: 0; background: radial-gradient(circle at 50% 60%, rgba(255,224,102,.25), transparent 65%); border-radius: var(--r-lg); padding: 4px; cursor: pointer; display: grid; place-items: center; aspect-ratio: 1; color: var(--silk); }
button.chest { animation: wobble 1.6s ease-in-out infinite; }
button.chest:hover:not(:disabled) { transform: translateY(-4px) scale(1.04); animation: none; }
button.chest:disabled { cursor: default; animation: none; }
.chest.shake { animation: shake .5s ease-in-out infinite !important; }
.chest-art { display: block; width: 100%; height: 100%; line-height: 0; }
.chest-art svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 0 rgba(0,0,0,.3)); }
.chest.opened { animation: pop .45s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes popOther { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(.82); opacity: .55; } }
@keyframes popPicked { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1.1); opacity: 1; } }
.chest.opened.other { animation: popOther .45s .25s ease-out both; }
.chest.opened.picked { animation: popPicked .5s cubic-bezier(.3,1.5,.5,1) both, glow 1.6s .5s ease-in-out infinite; border-radius: 50%; z-index: 1; }
.chest-label { position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%); background: #17181a; color: var(--silk); font-family: var(--display); font-weight: 800; font-size: clamp(.95rem, 4vw, 1.3rem); padding: 2px 12px; border-radius: 999px; white-space: nowrap; border: 2px solid var(--copper); }
.chest.picked .chest-label { background: var(--copper); color: #2b1d02; border-color: #12332a; }
.kind-lose25 .chest-label, .kind-lose50 .chest-label { border-color: var(--bad); }
.coin { display: inline-block; width: 1.2em; height: 1.2em; line-height: 0; vertical-align: -.2em; }
.coin svg { width: 100%; height: 100%; }
.coin.inline { width: 1.1em; height: 1.1em; }
@keyframes coinfly { 0% { transform: translate(-50%, -50%) scale(.4); opacity: 1; } 100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1); opacity: 0; } }
.coin.fly { position: absolute; left: 50%; top: 45%; width: 30px; height: 30px; animation: coinfly 1.1s ease-out both; pointer-events: none; z-index: 2; }

/* Yarış: koşucular */
.track { gap: 12px; }
.lane { height: 44px; }
.lane.mine::before { background: var(--copper); }
.runner { position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 6px; transition: left .6s cubic-bezier(.3,1.4,.5,1); z-index: 1; max-width: 150px; }
.runner .rname { background: var(--silk); color: var(--ink); border-radius: 999px; padding: 1px 9px; font-weight: 700; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.runner.me .rname { background: var(--copper); color: #2b1d02; }
.runner.done .rname { background: var(--ok); }
.runner.frozen .ava { filter: grayscale(1) brightness(1.2) drop-shadow(0 0 6px #8fb0ff); }
.runner.frozen .rname { background: #8fb0ff; }
.track.big .lane { height: 52px; }
.track.big .runner { max-width: 190px; }
.track.big .runner .ava { width: 44px; height: 44px; }
.track.big .runner .rname { font-size: 1.05rem; }

/* Tahta: lobi kartları */
.lobby-mode { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 800; font-size: 1.6rem; color: var(--copper); }
.lobby-mode .mode-art { width: 110px; }
.roster.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; width: min(1200px, 100%); }
.roster.cards .p { display: flex; flex-direction: column; align-items: center; gap: 4px; border-radius: var(--r-md); padding: 10px 6px 8px; position: relative; font-size: 1rem; }
.roster.cards .p .pn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster.cards .p .rid { position: absolute; top: 6px; left: 6px; margin: 0; }
.roster.cards .p .low { font-size: .75rem; }
.roster.cards .p.arrive { animation: arrive .55s cubic-bezier(.3,1.5,.5,1) both; }
.roster.cards .p:hover { text-decoration: line-through; }
.board-list li .ava { margin-right: -4px; }
.host-main .board-list li .ava { width: 44px; height: 44px; }
.board-list li .bn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-list li .sc { display: inline-flex; align-items: center; gap: 6px; }
.mode-title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 2.2rem; }
.title-art { width: 64px; height: 64px; }
.title-art.wide { width: 100px; height: auto; }
.podium .step .ava { display: block; margin: 0 auto 4px; }
.podium .s1 .ava { width: 130px; height: 130px; }

/* Konfeti */
.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 60; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 2px; animation: fall linear both; }
@keyframes fall { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), 110vh) rotate(var(--rot)); opacity: .9; } }

/* Öğretmen paneli: oyun modu kartları */
.start-dlg { width: min(680px, calc(100% - 32px)); }
.mode-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 620px) { .mode-cards { grid-template-columns: 1fr 1fr; } }
.mode-card { border: 3px solid #d3dfda; background: linear-gradient(180deg, #0f5a44, #093d2f); border-radius: var(--r-lg); padding: 10px 10px 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--silk); transition: transform .12s, border-color .12s, box-shadow .12s; }
.mode-card:hover { transform: translateY(-3px); }
.mode-card[aria-checked="true"] { border-color: var(--copper); box-shadow: 0 6px 0 var(--copper-dark), 0 0 0 4px rgba(216,162,61,.3); transform: translateY(-3px); }
.mode-card .mc-name { font-family: var(--display); font-weight: 800; font-size: 1.25rem; }
.mode-art { display: block; width: 100%; line-height: 0; }
.mode-art svg { width: 100%; height: auto; overflow: visible; }
.mode-card[aria-checked="true"] .mode-art { animation: pop .4s cubic-bezier(.3,1.5,.5,1); }
.mode-desc { min-height: 3em; margin: -4px 0 0; }

@media (prefers-reduced-motion: reduce) {
  .bob, .pop, button.chest, .chest.shake, .chest.opened, .chest.opened.other, .chest.opened.picked, .roster.cards .p.arrive, .medal, .mode-card[aria-checked="true"] .mode-art { animation: none !important; }
  .runner { transition: none; }
}
.rank-line { font-family: var(--display); font-weight: 800; font-size: 1.5rem; margin: 0; }

/* ================= Lobi sahneleri ================= */
.lobby-scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; line-height: 0; }
.lobby-scene svg { width: 100%; height: 100%; }
.lobby-main { position: relative; z-index: 1; }
.host-bar { position: relative; z-index: 2; }
.lobby .pin, .lobby .roster.cards .p { box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.lobby .how { text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.lobby-mode { background: rgba(0,0,0,.35); padding: 4px 18px; border-radius: 999px; }
.scene-cyber ~ .lobby-main .lobby-mode { color: #63e6be; }

/* ================= Siber mod ================= */
.play-main.cyber { position: relative; }
.cy-banners { display: grid; gap: 6px; }
.cy-banner { border-radius: var(--r-md); padding: 8px 12px; font-weight: 700; font-size: .95rem; text-align: center; }
.cy-banner.shield { background: #1c7ed6; color: #fff; }
.cy-banner.bad { background: #2b0d10; color: #ffc9c9; border: 2px solid #e5484d; }
.cy-card { background: #0b1f19; border: 3px solid #63e6be; border-radius: var(--r-lg); padding: 18px; text-align: center; display: grid; justify-items: center; gap: 6px; box-shadow: 0 0 0 4px rgba(99,230,190,.15), 0 0 30px rgba(99,230,190,.15); }
.cy-card h2 { margin: 0; color: #63e6be; font-size: clamp(1.4rem, 5vw, 2rem); }
.cy-card p { margin: 0; color: #cfe3da; }
.cy-card.hack { border-color: #ff6b6b; box-shadow: 0 0 0 4px rgba(255,107,107,.15), 0 0 30px rgba(255,107,107,.2); }
.cy-card.hack h2 { color: #ffa8a8; }
.cy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 560px) { .cy-grid { grid-template-columns: 1fr; } }
.cy-pick { border: 3px solid #63e6be; background: #0b1f19; color: #e6fcf5; border-radius: var(--r-md); padding: 18px 10px; cursor: pointer; font: 800 1.35rem/1.1 ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace; letter-spacing: .06em; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: transform .1s, background .1s; box-shadow: 0 5px 0 #063d2c; }
.cy-pick:hover:not(:disabled) { transform: translateY(-2px); background: #10342a; }
.cy-pick:disabled { cursor: default; opacity: .5; }
.cy-pick.chosen { opacity: 1; background: #63e6be; color: #0b1f19; }
.cy-pick .lock { font-size: 1.4rem; }
.cy-pick.target { font-family: var(--display); letter-spacing: 0; font-size: 1.15rem; border-color: #ff8787; box-shadow: 0 5px 0 #5c1a1d; }
.cy-pick.target .ts { font-size: .85rem; font-weight: 700; color: #ffc9c9; }
.cy-pick.target.chosen { background: #ff8787; color: #2b0d10; }
.cy-pick.target.shielded { border-color: #4dabf7; box-shadow: 0 5px 0 #0b3a63; }
.cy-pick.fx { font-family: var(--text); letter-spacing: 0; font-size: 1.05rem; text-align: center; border-color: #b197fc; box-shadow: 0 5px 0 #3b2a6b; }
.cy-pick.fx small { font-weight: 400; font-size: .85rem; color: #d0bfff; }
.cy-pick.fx.chosen { background: #b197fc; color: #1e1340; }
.cy-pick.fx.chosen small { color: #1e1340; }
.cy-grid.effects { grid-template-columns: 1fr 1fr; }
.cy-sub { text-align: center; margin: 0; color: #cfe3da; font-weight: 700; }
.chests.small { max-width: 320px; margin: 0 auto; }
.chests.small .chest-label { font-size: .8rem; }
.chest.packet { background: radial-gradient(circle at 50% 60%, rgba(99,230,190,.25), transparent 65%); }
/* Glitch: yalnızca kenarlar ve arka plan; soru ve şıklar net kalır */
@keyframes glitchShift { 0% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(4px); } 100% { transform: translateX(0); } }
@keyframes scan { 0% { background-position: 0 0; } 100% { background-position: 0 40px; } }
.play.fx-glitch { position: relative; }
.play.fx-glitch::before, .play.fx-glitch::after { content: ''; position: fixed; top: 0; bottom: 0; width: 7vw; min-width: 22px; pointer-events: none; z-index: 30;
  background: repeating-linear-gradient(0deg, rgba(255,107,107,.55) 0 3px, rgba(99,230,190,.45) 3px 6px, transparent 6px 10px); animation: scan .4s linear infinite, glitchShift .3s steps(2) infinite; }
.play.fx-glitch::before { left: 0; } .play.fx-glitch::after { right: 0; }
.play.fx-glitch .play-top { animation: glitchShift .25s steps(2) infinite; }
/* Tahta: siber olaylar */
.board-list li .tag { font-size: .75rem; font-weight: 800; padding: 1px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .03em; }
.board-list li .tag.shield { background: #1c7ed6; color: #fff; }
.board-list li .tag.frozen { background: #74c0fc; color: #0b3a63; }
.board-list li.scrambled .bn { font-family: ui-monospace, Menlo, Consolas, monospace; color: #c92a2a; letter-spacing: .1em; }
.cy-feed li { border-left: 4px solid #63e6be; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .98rem; }
@media (prefers-reduced-motion: reduce) { .play.fx-glitch::before, .play.fx-glitch::after, .play.fx-glitch .play-top { animation: none; } }

/* Sınıflar ve kumanda numaraları */
.cls-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.cls-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 96px; padding: .45em .9em; border: 2px solid #c6d4ce; border-radius: var(--r-md); background: #fff; cursor: pointer; text-align: left; line-height: 1.2; }
.cls-chip b { font-family: var(--display); font-size: 1.15rem; }
.cls-chip span { font-size: .8rem; color: var(--muted); }
.cls-chip:hover { border-color: var(--ink); }
.cls-chip[aria-selected="true"] { background: var(--pcb); border-color: var(--pcb); color: var(--silk); }
.cls-chip[aria-selected="true"] span { color: #bfe0d3; }
.cls-chip.add { justify-content: center; border-style: dashed; color: var(--pcb); font-weight: 700; }
.cls-head { justify-content: space-between; }
.cls-title { max-width: 220px; font-family: var(--display); font-size: 1.4rem; font-weight: 800; }
.save-state { flex: 1; min-width: 120px; }
.save-state.err { color: var(--bad); font-weight: 700; }
.gap-s { gap: 6px; }
.btn.del-txt { color: var(--bad); border-color: var(--bad); }
.stu-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px 14px; }
.stu-row { display: flex; align-items: center; gap: 8px; }
.stu-row .input { flex: 1; min-width: 0; padding-block: .35em; }
.stu-no { flex: none; width: 2.4em; height: 2.4em; display: grid; place-items: center; border-radius: 50%; background: var(--copper); color: var(--ink); font-family: var(--display); font-weight: 800; font-size: 1rem; }
.icon-btn { flex: none; width: 2em; height: 2em; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.icon-btn:hover, .icon-btn:focus-visible { background: #f6dede; color: var(--bad); }
.empty-cls { text-align: center; padding: 28px 18px; }
@media (max-width: 520px) { .stu-list { grid-template-columns: 1fr; } .cls-title { max-width: 100%; } }

/* ================= Boss'a Karşı ================= */
.mode-cards { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 620px) { .mode-cards { grid-template-columns: 1fr 1fr; } }
.mode-card .mc-name { font-size: 1.05rem; text-align: center; line-height: 1.1; }
.mc-boss { background: linear-gradient(180deg, #3b2a6b, #1a1230); }
.boss-art { display: inline-block; line-height: 0; }
.boss-art svg { width: 100%; height: auto; overflow: visible; }
.boss-art.sm { width: 54px; } .boss-art.md { width: 120px; } .boss-art.lg { width: 170px; } .boss-art.xl { width: min(340px, 60%); }
.boss-hp { position: relative; flex: 1; height: 22px; border-radius: 999px; background: #2b2140; border: 3px solid var(--ink); overflow: hidden; }
.boss-hp-fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #e5484d, #ff8787); transition: width .5s ease; }
.boss-hp span { position: relative; display: block; text-align: center; font-weight: 800; font-size: .8rem; line-height: 16px; color: #fff; text-shadow: 0 1px 2px #000; }
.boss-hp.big { width: 100%; height: 40px; }
.boss-hp.big span { font-size: 1.2rem; line-height: 34px; }
.boss-mini { display: flex; align-items: center; gap: 10px; background: #1a1230; border-radius: var(--r-md); padding: 6px 12px; }
.boss-task { background: #ffd43b; color: var(--ink); border-radius: var(--r-md); padding: 6px 12px; text-align: center; font-weight: 700; animation: pulse 1.2s ease-in-out infinite; }
.boss-task.big { display: grid; gap: 6px; font-size: 1.3rem; margin-top: 10px; }
.task-bar { height: 14px; background: rgba(0,0,0,.2); border-radius: 999px; overflow: hidden; }
.task-bar div { height: 100%; background: var(--pcb); transition: width .4s; }
@keyframes pulse { 50% { transform: scale(1.03); } }
.result .dmg { font-family: var(--display); font-size: 3rem; font-weight: 800; margin: 0; color: #c92a2a; }
.result.crit h2 { color: #e8590c; }
.boss-stage { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: start; }
.boss-arena { background: radial-gradient(ellipse at 50% 70%, #3b2a6b, #1a1230 70%); border-radius: var(--r-lg); padding: 18px; text-align: center; border: 3px solid #000; }
.boss-arena.ph3 { box-shadow: 0 0 0 4px #e5484d inset; }
.boss-body { margin: 10px 0; }
.boss-body .boss-art { animation: bossIdle 2.4s ease-in-out infinite; }
.boss-body.hit .boss-art { animation: bossHit .45s ease; }
.boss-phase { font-family: var(--display); font-size: 1.6rem; font-weight: 800; color: #ffd43b; margin: 0; }
.boss-end { text-align: center; margin-bottom: 10px; }
.boss-end h2 { font-size: 2.4rem; margin: 6px 0; }
@keyframes bossIdle { 50% { transform: translateY(-8px) scale(1.02); } }
@keyframes bossHit { 0% { transform: translateX(0); filter: brightness(2); } 25% { transform: translateX(-14px) rotate(-4deg); } 50% { transform: translateX(12px) rotate(3deg); } 100% { transform: none; filter: none; } }
@media (max-width: 900px) { .boss-stage { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .boss-body .boss-art, .boss-body.hit .boss-art, .boss-task { animation: none !important; } }

/* ================= Kule Yarışı ================= */
.ava.xs { width: 24px; height: 24px; }
.mode-cards { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 620px) { .mode-cards { grid-template-columns: 1fr 1fr; } }
.mc-tower { background: linear-gradient(180deg, #1c4f8a, #0d2c52); }
.mc-potato { background: linear-gradient(180deg, #a8501f, #5c2a0c); }
.towers { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 16px; align-items: end; }
.towers.big { min-height: 58vh; }
.tower { display: grid; grid-template-rows: 1fr auto auto; gap: 6px; height: 100%; text-align: center; }
.towers:not(.big) .tower { height: 220px; }
.tw-col { position: relative; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.18); border-radius: var(--r-md) var(--r-md) 0 0; border-bottom: 6px solid var(--ink); min-height: 120px; }
.towers.big .tw-col { min-height: 46vh; }
.tw-stack { width: 64%; display: flex; flex-direction: column-reverse; gap: 2px; transition: height .5s ease; overflow: hidden; }
.tw-stack i { flex: 1 1 0; min-height: 3px; max-height: 26px; background: var(--tc); border: 2px solid rgba(0,0,0,.35); border-radius: 3px; }
.tower.lead .tw-stack i.top { box-shadow: 0 0 0 3px #ffd43b; }
.tower.lead .tw-label b::after { content: ' ★'; color: #ffd43b; }
.tw-label b { display: block; font-family: var(--display); font-size: 1.5rem; color: var(--tc); text-shadow: 0 1px 0 #000; filter: brightness(1.25); }
.tw-label span { font-size: .9rem; color: #cfe3da; }
.tw-label small { display: block; font-size: .78rem; color: #9fc3b5; }
.tw-members { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; min-height: 26px; }
.team-strip { display: flex; align-items: center; gap: 12px; background: var(--tc); color: #fff; border-radius: var(--r-md); padding: 8px 12px; }
.team-badge { display: grid; font-family: var(--display); font-weight: 800; font-size: 1.15rem; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.team-badge span { font-family: var(--text); font-weight: 700; font-size: .85rem; opacity: .9; }
.mini-towers { flex: 1; display: flex; gap: 6px; align-items: flex-end; height: 48px; justify-content: flex-end; }
.mini-towers .mt { width: 22px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; font-size: .7rem; font-weight: 800; }
.mini-towers .mt-bar { width: 100%; border: 2px solid rgba(0,0,0,.4); border-radius: 3px 3px 0 0; transition: height .4s; }
.mini-towers .mt.mine .mt-bar { box-shadow: 0 0 0 2px #fff; }
.mini-towers.big { height: 160px; justify-content: center; gap: 18px; margin: 12px 0; }
.mini-towers.big .mt { width: 56px; font-size: .85rem; }
.play.has-team .play-top { box-shadow: inset 0 -5px 0 var(--tc); }

/* ================= Sıcak Patates ================= */
.potato-art { display: inline-block; line-height: 0; }
.potato-art svg { width: 100%; height: auto; overflow: visible; }
.potato-art.sm { width: 54px; flex: none; }
.potato-art.wobble svg { animation: wobble .5s ease-in-out infinite; }
@keyframes wobble { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg) translateY(-3px); } }
.potato-banner { display: flex; align-items: center; gap: 12px; background: #ffd8a8; color: var(--ink); border: 3px solid #e8590c; border-radius: var(--r-md); padding: 8px 12px; }
.potato-banner > div { display: grid; }
.potato-banner small { font-size: .85rem; }
.potato-banner.hot { background: #ff8787; border-color: #c92a2a; animation: pulse .6s ease-in-out infinite; }
.potato-banner.burned { background: #343a40; color: #fff; border-color: #000; }
.play.potato-hot .play-top { background: #c92a2a; }
.potato-field { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.pf { position: relative; background: var(--silk); color: var(--ink); border-radius: var(--r-md); padding: 10px 6px 8px; display: grid; justify-items: center; gap: 2px; box-shadow: 0 4px 0 rgba(0,0,0,.25); transition: transform .2s; }
.pf .pn { font-weight: 800; font-size: .95rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf .ps { font-size: .8rem; color: var(--muted); }
.pf.has { background: #ffd8a8; transform: scale(1.06); box-shadow: 0 0 0 4px #e8590c, 0 6px 0 rgba(0,0,0,.25); }
.pf.hot { background: #ff8787; box-shadow: 0 0 0 4px #c92a2a, 0 0 24px #ff6b6b; }
.pf.burned { background: #495057; color: #fff; }
.pf.off { opacity: .45; }
.pf .potato-art.on { position: absolute; top: -18px; right: -10px; width: 52px; }
.burn-tag { position: absolute; top: -10px; right: -6px; background: #000; color: #ffd43b; font-weight: 800; font-size: .8rem; padding: 2px 8px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .potato-art.wobble svg, .potato-banner.hot { animation: none !important; } }

/* Kendim yazacağım: hızlı yazım */
.input.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95rem; line-height: 1.45; }
.quick-prev .ok { color: var(--pcb); font-weight: 700; }
.quick-err { margin: 4px 0 0; padding-left: 1.2em; color: var(--bad); font-size: .9rem; }

/* Duraklatma */
.pause-veil { position: fixed; inset: 75px 0 0 0; z-index: 50; display: grid; place-items: center; background: rgba(9, 61, 47, .82); backdrop-filter: blur(3px); color: var(--silk); text-align: center; }
.pause-veil h2 { font-size: 3rem; margin: 12px 0 6px; }
.pause-veil p { font-size: 1.2rem; margin: 0 0 18px; }
.pause-icon { display: inline-flex; gap: 10px; }
.pause-icon i { display: block; width: 16px; height: 48px; border-radius: 4px; background: var(--copper); }
.pause-icon.big i { width: 30px; height: 96px; border-radius: 8px; }
.paused-msg .pause-icon { margin: 0 auto 8px; justify-content: center; }
.paused-msg { text-align: center; }

/* ================= Soru tipleri ================= */
.answers.tf { grid-template-columns: 1fr 1fr; }
.answers.tf .ans { justify-content: center; font-size: 1.8rem; }
@media (max-width: 560px) { .answers.tf { grid-template-columns: 1fr 1fr; } .answers.tf .ans { min-height: 140px; } }
.num-form { display: grid; gap: 12px; margin-top: 8px; }
.num-row { display: flex; align-items: center; gap: 10px; }
.num-in { font-size: 2rem; text-align: center; font-family: var(--display); font-weight: 800; letter-spacing: .04em; }
.num-unit { font-size: 1.4rem; font-weight: 800; color: var(--silk); }
.order-box { display: grid; gap: 10px; margin-top: 6px; }
.order-hint { margin: 0; font-weight: 700; color: var(--silk); }
.order-list { display: grid; gap: 8px; }
.order-item { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border: 3px solid #c6d4ce; border-radius: var(--r-md); background: var(--silk); color: var(--ink); font: inherit; font-size: 1.1rem; font-weight: 700; text-align: left; cursor: pointer; }
.order-item.on { border-color: var(--copper); background: #fff3d6; }
.order-no { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #e3ebe7; font-family: var(--display); font-weight: 800; }
.order-item.on .order-no { background: var(--copper); color: var(--ink); }
.order-list.host .order-item { cursor: default; font-size: 1.6rem; min-height: 70px; }
.host-num, .host-order { display: grid; justify-items: center; gap: 10px; padding: 18px; background: rgba(0,0,0,.2); border-radius: var(--r-lg); font-size: 1.4rem; color: var(--silk); }
.host-num b { font-family: var(--display); font-size: 4rem; color: #ffd43b; }
.host-order { justify-items: stretch; }
.order-correct { margin: 0; padding-left: 1.6em; font-size: 2rem; font-weight: 800; line-height: 1.5; }
.order-correct li::marker { color: #ffd43b; }
.qtype-seg { align-self: flex-start; }
.qtype-seg button { font-size: .85rem; padding: .35em .8em; }
.tf-opts { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.num-edit { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; }
.num-edit .field { gap: 2px; }
@media (max-width: 620px) { .num-edit { grid-template-columns: 1fr; } }
.order-edit { display: grid; gap: 6px; }
.order-edit .order-no { background: var(--copper); }
.host-order, .order-list.host { align-content: start; }
.host-main .host-order { flex: 0 0 auto; }
.order-list.host .order-item { min-height: 0; height: auto; }

/* Düzenleyici: yeni soru ekleme kartı */
.add-q { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 84px; margin: 6px 0 4px; border: 3px dashed #b5c7c0; border-radius: var(--r-lg); background: rgba(255,255,255,.5); color: var(--pcb); font: inherit; font-family: var(--display); font-size: 1.3rem; font-weight: 800; cursor: pointer; transition: background .15s, border-color .15s; }
.add-q:hover, .add-q:focus-visible { background: #fff; border-color: var(--pcb); }
.add-q .plus { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--pcb); color: var(--silk); font-size: 2rem; line-height: 1; }
.quick-details { border: 1px solid #d3dfda; border-radius: var(--r-md); padding: 10px 14px; background: #f7faf8; }
.quick-details summary { cursor: pointer; font-weight: 700; color: var(--pcb); }
.quick-details[open] summary { margin-bottom: 10px; }
.quick-details textarea { margin-bottom: 6px; }

/* ================= Yönetim ================= */
.adm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.adm-stats .stat { background: #fff; border-radius: var(--r-md); padding: 12px 14px; display: grid; box-shadow: 0 2px 0 rgba(0,0,0,.05); }
.adm-stats .stat b { font-family: var(--display); font-size: 1.8rem; line-height: 1.1; color: var(--pcb); }
.adm-stats .stat span { font-size: .85rem; color: var(--muted); }
@media (max-width: 620px) { .adm-stats { grid-template-columns: 1fr 1fr; } }
.adm-add { align-items: flex-end; }
.adm-filter { margin: 10px 0; }
.adm-filter .input { max-width: 300px; }
.table-wrap { overflow-x: auto; background: #fff; border-radius: var(--r-md); }
.adm-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.adm-table th { text-align: left; font-size: .8rem; color: var(--muted); font-weight: 700; padding: 10px; border-bottom: 2px solid #e3ebe7; white-space: nowrap; }
.adm-table td { padding: 8px 10px; border-bottom: 1px solid #edf2ef; vertical-align: middle; }
.adm-table tr.off td { opacity: .55; }
.adm-table .input.inline { padding: .3em .5em; min-width: 160px; }
.adm-actions { white-space: nowrap; }
.adm-actions .btn { margin: 2px; }
.code-chip { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 800; letter-spacing: .06em; background: #fff3d6; border: 1px solid var(--copper); border-radius: 6px; padding: 2px 8px; margin-right: 6px; }
.tag-adm, .tag-off { display: inline-block; margin-left: 6px; font-size: .72rem; font-weight: 800; padding: 1px 7px; border-radius: 999px; vertical-align: middle; }
.tag-adm { background: var(--pcb); color: var(--silk); }
.tag-off { background: #495057; color: #fff; }
.pw-dlg { border: 0; border-radius: var(--r-lg); padding: 22px 24px; width: min(420px, calc(100% - 32px)); }
.pw-big { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.8rem; font-weight: 800; letter-spacing: .08em; text-align: center; background: #fff3d6; border: 2px solid var(--copper); border-radius: var(--r-md); padding: 12px; margin: 8px 0; user-select: all; }
.code-ok { color: var(--pcb) !important; font-weight: 800; }
.code-bad { color: var(--bad) !important; }
.opt-warn { color: #b35c00; margin: 4px 0 0; } .opt-warn:empty { display: none; }

/* ---------- Kod Arenası ---------- */
.kod-map { display: block; width: 100%; height: auto; }
.kod-map .km-cell { fill: #ffffff17; }
.kod-map .km-wall { fill: #a9bdb4; stroke: #5f7d72; stroke-width: .05; }
.kod-map .km-wall-top { fill: #d3e0da; }
.panel .kod-map .km-cell { fill: #e3ece8; }
.panel .kod-map .km-wall { fill: #5f7d72; stroke: none; }
.panel .kod-map .km-wall-top { fill: #8aa69b; }
.kod-map .km-gold { transition: opacity .3s ease; }
.kod-map .km-gold.taken { opacity: 0; }
.kod-map .kr { transition: transform .38s ease, opacity .4s ease; }
.kod-map .kr-turn { transition: transform .3s ease; }
.kod-map .kr.done { opacity: 0; transition: transform .38s ease, opacity .5s ease .35s; }
.kod-map .kr.ghost { opacity: .22; }
.kod-map .kr.bump .kr-body { animation: kr-bump .36s ease; }
@keyframes kr-bump { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(0, -.14px); } 50% { transform: translate(-.08px, 0); } 75% { transform: translate(.08px, 0); } }
.kod-map .kr.me .kr-ring { animation: kr-ring 2s linear infinite; }
@keyframes kr-ring { to { stroke-dashoffset: -.8; } }

.kod-round { font-family: var(--display); }
.kod-plan { flex: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; padding: 16px; width: 100%; max-width: 1240px; margin: 0 auto; align-items: start; }
@media (max-width: 860px) { .kod-plan { grid-template-columns: 1fr; padding: 10px; } }
.kod-left, .kod-right { background: #0006; border-radius: var(--r-lg); padding: 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.kod-maphead { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.kod-maphead b { font-family: var(--display); font-size: 1.3rem; }
.kod-maphead span { color: #cfe3da; font-size: .9rem; }
.kod-mapwrap svg { max-height: 58vh; }
.kod-legend { display: grid; gap: 6px; }
.kl { display: flex; align-items: center; gap: 8px; background: #ffffff10; border-radius: var(--r-md); padding: 4px 10px; }
.kl.me { background: #ffffff26; font-weight: 700; }
.kl.off { opacity: .55; }
.kl-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl-s { font-size: .85rem; color: #cfe3da; white-space: nowrap; }
.kl-s.ok { color: #8ce99a; font-weight: 700; }
.kdot { width: 14px; height: 14px; border-radius: 4px; flex: none; box-shadow: 0 0 0 2px #12332a; }

.kod-palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.kp { display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: var(--r-md); padding: 12px 8px; font-weight: 700; color: #fff; cursor: pointer; box-shadow: 0 4px 0 #0006; }
.kp:active { transform: translateY(2px); box-shadow: 0 2px 0 #0006; }
.kp:disabled { opacity: .45; cursor: not-allowed; }
.kb-ic { display: inline-flex; }
.kb-ic svg { width: 1.15em; height: 1.15em; }
.kp .kb-ic svg { width: 1.35em; height: 1.35em; }
.kb-F { background: #2b8a3e; } .kb-L, .kb-R { background: #1c6dd0; } .kb-W { background: #5c6b66; } .kp-loop { background: #7048b6; }
.kb { display: inline-flex; align-items: center; gap: 5px; border-radius: 9px; padding: 5px 10px; color: #fff; font-weight: 700; font-size: .95rem; transition: transform .15s ease, box-shadow .15s ease; }
.kb.on, .kloop.on > .kloop-head { box-shadow: 0 0 0 3px var(--copper), 0 0 14px var(--copper); transform: scale(1.06); }
.kprog { display: flex; flex-direction: column; gap: 6px; }
.kod-progwrap { background: #00000038; border-radius: var(--r-md); padding: 10px; min-height: 120px; max-height: 46vh; overflow: auto; }
.krow { display: flex; align-items: center; gap: 6px; }
.kno { width: 2ch; text-align: right; color: #9fc2b5; font-size: .85rem; flex: none; }
.kb-x { border: 0; background: #ffffff22; color: #fff; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 1rem; line-height: 1; flex: none; }
.kb-x:hover { background: var(--bad); }
.kloop { flex: 1; border: 2px dashed #b197fc; border-radius: var(--r-md); padding: 6px 8px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.kloop.sel { border-style: solid; border-color: var(--copper); background: #d8a23d1c; }
.kloop-head { display: flex; align-items: center; gap: 6px; font-weight: 700; color: #d0bfff; border-radius: 8px; padding: 2px 4px; }
.kloop-head .kb-x { margin-left: auto; }
.kn { border: 0; width: 28px; height: 28px; border-radius: 8px; background: #7048b6; color: #fff; font-weight: 800; cursor: pointer; }
.kn:disabled { opacity: .4; cursor: default; }
.kr-n { font-family: var(--display); font-size: 1.2rem; min-width: 1.2ch; text-align: center; color: #fff; }
.kloop-body { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 8px; }
.kin { display: inline-flex; align-items: center; gap: 2px; }
.kloop-hint { color: #cfe3da; font-size: .85rem; font-style: italic; }
.kloop-hint.sel { color: var(--copper); font-style: normal; }
.kprog-empty { color: #cfe3da; margin: 0; }
.kprog.locked { opacity: .75; }
.kod-count { display: flex; justify-content: space-between; font-weight: 700; }
.kod-count .over { color: #ff8787; }
.kod-par { color: #cfe3da; } .kod-par.ok { color: #ffd43b; }
.kod-tools { gap: 8px; }
.kod-status { font-size: .92rem; color: #e3efe9; }
.kod-lock { width: 100%; font-size: 1.15rem; }
.kod-result { background: var(--silk); color: var(--ink); border-radius: var(--r-lg); padding: 16px; text-align: center; display: grid; gap: 6px; }
.kod-result.win { background: #fff3bf; }
.kod-pts { font-family: var(--display); font-weight: 800; font-size: 2.6rem; line-height: 1; }
.kod-break { list-style: none; padding: 0; margin: 4px 0; text-align: left; display: grid; gap: 3px; font-size: .95rem; }
.kprog.ro { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
.kprog.ro .kloop { flex: none; cursor: default; padding: 4px 6px; }
.kprog.compact .kb { padding: 2px 6px; font-size: .78rem; gap: 3px; }
.kprog.compact .kb .kb-tx { display: none; }
.kprog.compact .kloop { border-width: 1.5px; padding: 2px 4px; gap: 3px; }
.kprog.compact .kloop-head { font-size: .75rem; padding: 0 2px; }
.kprog.compact .kloop-body { padding-left: 2px; gap: 3px; }

/* tahta */
.kod-host { max-width: 1600px; gap: 14px; }
.kh-info { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; font-size: 1.1rem; }
.kh-phase { font-weight: 700; }
.kh-clock .clock { font-family: var(--display); font-size: 1.8rem; color: var(--copper); }
.kh-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .kh-layout { grid-template-columns: 1fr; } }
.kh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.kh-arena { background: #0006; border-radius: var(--r-lg); padding: 12px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; border: 2px solid transparent; }
.kh-arena:hover, .kh-arena:focus-visible { border-color: var(--copper); }
.kh-arena.big { cursor: default; border: 0; }
.kh-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.kh-head b { font-family: var(--display); font-size: 1.15rem; }
.kh-head span { color: #cfe3da; flex: 1; }
.kh-body { display: flex; flex-direction: column; gap: 8px; }
.kh-arena.big .kh-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.kh-arena.big .kh-mapwrap svg { max-height: 70vh; }
.kh-robots { display: grid; gap: 6px; }
.kh-r { background: #ffffff10; border-radius: var(--r-md); padding: 6px 10px; display: grid; gap: 4px; }
.kh-r.off { opacity: .55; }
.kh-rh { display: flex; align-items: center; gap: 8px; }
.kh-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.kh-res { font-size: .85rem; color: #cfe3da; }
.kh-robots.big .kh-r { padding: 10px 12px; }
.kh-board { background: #0006; border-radius: var(--r-lg); padding: 14px; display: grid; gap: 10px; }
.kh-board h3 { margin: 0; }
.kh-lb { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kh-lb li { display: flex; align-items: center; gap: 8px; background: #ffffff12; border-radius: var(--r-md); padding: 4px 10px; }
.kh-lb li:first-child { background: var(--copper); color: var(--ink); }
.kh-lb .rk { font-family: var(--display); font-weight: 800; width: 2ch; }
.kh-log { background: #ffffff12; border-radius: var(--r-md); padding: 8px 12px; display: grid; gap: 2px; }
.kh-tip { color: #cfe3da; margin: 0; }

/* panel */
.kc-list { display: grid; gap: 10px; }
.kc { display: flex; gap: 14px; text-align: left; background: #f6faf8; border: 2px solid #d3dfda; border-radius: var(--r-lg); padding: 14px; cursor: pointer; align-items: flex-start; }
.kc[aria-checked="true"] { border-color: var(--pcb); background: #e6f4ee; box-shadow: 0 0 0 2px var(--pcb); }
.kc.soon { opacity: .6; cursor: default; }
.kc p { margin: 2px 0 8px; }
.kc-no { font-family: var(--display); font-weight: 800; font-size: 1.6rem; width: 44px; height: 44px; border-radius: 12px; background: var(--pcb); color: var(--silk); display: grid; place-items: center; flex: none; }
.kc-maps { display: flex; gap: 12px; flex-wrap: wrap; }
.kc-maps figure { margin: 0; width: 130px; }
.kc-maps figcaption { font-size: .8rem; color: var(--muted); text-align: center; }
.soon-tag { margin-left: 8px; font-size: .75rem; background: var(--copper); color: var(--ink); border-radius: 999px; padding: 1px 8px; font-family: var(--text); }
.kc-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.kc-how { display: grid; gap: 6px; padding-left: 1.3em; margin: 0 0 16px; }

/* Kod Arenası v2: temalar, kapılar, engeller, iç içe editör */
.kod-map .kg.closed .kg-open, .kod-map .kg:not(.closed) .kg-closed { display: none; }
.kod-map .kg-laser { animation: kg-laser .6s ease-in-out infinite alternate; }
@keyframes kg-laser { from { opacity: .65; } to { opacity: 1; } }
.kod-map .km-lava { animation: km-lava 2.4s ease-in-out infinite alternate; }
@keyframes km-lava { from { opacity: .85; } to { opacity: 1; } }
.kod-map .km-mv { transition: transform .38s ease; }
.kod-map .km-mv-turn { transition: transform .25s ease; }
.kod-tip { margin: 0; font-size: .92rem; color: #ffe8a3; background: #0004; border-radius: var(--r-md); padding: 6px 10px; }
.kh-maptip { margin: 0; font-size: .9rem; color: #ffe8a3; }
.kp-until { background: #0b7285; } .kp-if { background: #c2410c; } .kb-P { background: #9c36b5; }
.kod-where { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: .92rem; color: #e3efe9; min-height: 1.4em; }
.linkish { background: none; border: 0; color: var(--copper); text-decoration: underline; cursor: pointer; padding: 0; }
.kz-title { font-weight: 700; color: #cfe3da; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: 6px; }
.kz-title small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.kzone { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; padding: 6px; border-radius: var(--r-md); border: 2px dashed transparent; min-height: 40px; cursor: pointer; }
.kzone.sel { border-color: var(--copper); background: #d8a23d1c; }
.kzone.kmain { min-height: 70px; }
.kprog.edit { gap: 8px; }
.kprog.edit .kloop, .kprog.edit .kif { flex: 1 1 100%; cursor: default; }
.kif { border: 2px dashed #ffa94d; border-radius: var(--r-md); padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; }
.kloop.until { border-color: #66d9e8; }
.kloop.until > .kloop-head { color: #99e9f2; }
.kif > .kloop-head { color: #ffc078; }
.kif-arm { display: flex; gap: 6px; align-items: flex-start; }
.kif-arm .kzone, .kif-arm .kloop-body { flex: 1; }
.kif-l { font-size: .8rem; font-weight: 700; color: #ffc078; min-width: 4.2em; padding-top: 10px; }
.kcond { border: 0; border-radius: 8px; background: #c2410c; color: #fff; font-weight: 700; padding: 3px 10px; cursor: pointer; }
.kcond:disabled { opacity: .7; cursor: default; }
.kfn { border: 2px solid #9c36b5; border-radius: var(--r-md); padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; background: #9c36b51a; }
.kfn.on, .kif.on, .kloop.on { box-shadow: 0 0 0 2px var(--copper); }
.kprog.ro .kif, .kprog.ro .kfn { flex: none; }
.kprog.ro .kif-l { padding-top: 4px; }
.kprog.compact .kif-l { font-size: .65rem; min-width: 3em; padding-top: 2px; }
.kprog.compact .kif, .kprog.compact .kfn { border-width: 1.5px; padding: 2px 4px; gap: 2px; }
.kprog.compact .kcond { font-size: .7rem; }

/* Kod Arenası v3: tahmin, Python görünümü */
.kod-map.pickable { cursor: crosshair; }
.kod-map .km-mark rect { stroke: #fff; }
.kod-map .km-mark circle { fill: #fff; }
.kod-map .km-mark.guess rect { stroke: #ffd43b; stroke-dasharray: .14 .08; animation: kr-ring 2s linear infinite; }
.kod-map .km-mark.guess circle { fill: #ffd43b; }
.kod-map .km-mark.ok rect { stroke: #8ce99a; }
.kod-map .km-mark.bad rect { stroke: #ff8787; stroke-dasharray: .1 .08; }
.kpy { margin: 0; background: #0b1a14; color: #e3efe9; border-radius: var(--r-md); padding: 10px 12px; font: 600 .95rem/1.55 ui-monospace, 'Cascadia Code', Consolas, monospace; overflow: auto; white-space: pre; }
.kpy.compact { font-size: .75rem; padding: 6px 8px; }
.kpy-l { border-radius: 4px; padding: 0 4px; }
.kpy-l.on { background: #d8a23d55; box-shadow: inset 3px 0 0 var(--copper); }
.kpy-n { display: inline-block; width: 2.2ch; color: #5f7d72; margin-right: 10px; text-align: right; user-select: none; }
.py-kw { color: #ff9e64; } .py-num { color: #9ece6a; } .py-cm { color: #7a8f87; font-style: italic; }
.kod-view { display: inline-flex; background: #0005; border-radius: 999px; padding: 3px; gap: 2px; align-self: flex-start; }
.kod-view button { border: 0; background: none; color: #cfe3da; border-radius: 999px; padding: 4px 12px; font-weight: 700; cursor: pointer; font-size: .85rem; }
.kod-view button[aria-pressed="true"] { background: var(--copper); color: var(--ink); }
.kg-q { display: grid; gap: 8px; }
.kg-q h3 { margin: 0; font-size: 1.15rem; }
.kg-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.kg-opt { display: flex; align-items: center; gap: 8px; border: 2px solid #ffffff30; background: #ffffff12; color: inherit; border-radius: var(--r-md); padding: 8px 10px; font-weight: 700; cursor: pointer; text-align: left; }
.kg-opt[aria-pressed="true"] { border-color: var(--copper); background: #d8a23d33; }
.kg-progs { display: grid; gap: 8px; }
.kg-prog { background: #ffffff10; border-radius: var(--r-md); padding: 8px 10px; display: grid; gap: 6px; }
.kg-done { color: #8ce99a; font-weight: 700; }
.kod-guessres { background: #ffffff14; border-radius: var(--r-md); padding: 8px 12px; display: grid; gap: 2px; font-size: .95rem; }
.kod-guessres .ok { color: #8ce99a; } .kod-guessres .bad { color: #ff8787; }
.kod-result .kod-guessres { background: #12332a12; }
.kod-result .kod-guessres .ok { color: #2b8a3e; } .kod-result .kod-guessres .bad { color: #c92a2a; }
.kh-g { font-size: .8rem; color: #cfe3da; }
.kc-notes { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.dbar { display: flex; gap: 3px; border-radius: var(--r-md); overflow: hidden; min-height: 34px; }
.dseg { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: .85rem; padding: 0 8px; white-space: nowrap; overflow: hidden; }
.d-ok { background: #2b8a3e; } .d-collision { background: #e8590c; } .d-lr { background: #7048b6; } .d-algo { background: #c92a2a; } .d-empty { background: #868e96; }
.dtag, .ctag { display: inline-block; border-radius: 999px; padding: 1px 8px; font-size: .78rem; font-weight: 700; margin: 1px 3px 1px 0; color: #fff; }
.ctag { background: var(--pcb); }

.kc-est { color: var(--ink); font-weight: 700; }

.rep-list .ck { width: 34px; }
.rep-list .act { text-align: right; width: 70px; }
.rep-list tr.picked td { background: #fff4e0; }
.rep-list input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }

/* Kod Arenası v4: düğme, şalter, takım */
.kod-map .km-plate .kp-ring { fill: #00000040; stroke: #ffd43b; stroke-width: .05; stroke-dasharray: .1 .07; }
.kod-map .km-plate .kp-top { fill: #c9a227; stroke: #6b5413; stroke-width: .04; transition: fill .2s, transform .2s; }
.kod-map .km-plate.on .kp-top { fill: #ffe066; transform: scale(.82); filter: drop-shadow(0 0 .12px #ffe066); }
.kod-map .km-plate.on .kp-ring { stroke-dasharray: none; stroke: #ffe066; }
.kod-map .km-lever .kl-arm { transform: rotate(-35deg); transition: transform .25s; }
.kod-map .km-lever .kl-knob { fill: #e5484d; }
.kod-map .km-lever.on .kl-arm { transform: rotate(35deg); }
.kod-map .km-lever.on .kl-knob { fill: #2fbf71; }
.kod-mission { display: grid; gap: 2px; background: linear-gradient(90deg, #7048b6, #1c6dd0); color: #fff; border-radius: var(--r-md); padding: 8px 12px; }
.kod-mission b { font-family: var(--display); font-size: 1.05rem; }
.kod-mission span { font-size: .88rem; opacity: .95; }
.kod-team { display: grid; gap: 8px; }
.kod-team h4 { margin: 0; font-size: .95rem; color: #cfe3da; }
.kod-teamres { border-radius: var(--r-md); padding: 10px 14px; font-weight: 700; text-align: center; font-size: 1.1rem; }
.kod-teamres.ok { background: #2b8a3e; color: #fff; }
.kod-teamres.bad { background: #c92a2a; color: #fff; }
.kh-team { font-size: .85rem; font-weight: 700; border-radius: 999px; padding: 2px 10px; }
.kh-team.ok { background: #2b8a3e; } .kh-team.bad { background: #c92a2a; }
.kh-mission { font-size: .8rem; background: #7048b6; color: #fff; border-radius: 999px; padding: 2px 10px; }
.d-team { background: #1c6dd0; }

/* Kod Arenası v5: çarpışmasız mod, görev tanıtımı */
.kod-map.ghostmode .kr { opacity: .9; }
.ki-open { margin-top: 4px; justify-self: start; border: 0; border-radius: 999px; background: #fff; color: #4527a0; font-weight: 800; padding: 4px 12px; cursor: pointer; }
.ki-veil { position: fixed; inset: 0; z-index: 60; background: #061a13d9; display: grid; place-items: center; padding: 16px; overflow: auto; }
.ki-box { width: min(1080px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: #0d3b2e; color: var(--silk); border-radius: var(--r-lg); box-shadow: 0 20px 60px #000a; border: 2px solid #ffffff22; display: flex; flex-direction: column; }
.ki-head { padding: 18px 22px 8px; background: linear-gradient(90deg, #4527a0, #1c6dd0); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.ki-head h2 { margin: 4px 0; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.ki-tag { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; opacity: .9; }
.ki-goal { margin: 0 0 6px; font-size: 1.15rem; font-weight: 700; }
.ki-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; padding: 18px 22px; }
@media (max-width: 760px) { .ki-body { grid-template-columns: 1fr; } }
.ki-demo { display: grid; gap: 8px; align-content: start; }
.ki-mapwrap { background: #0006; border-radius: var(--r-md); padding: 8px; }
.ki-cap { margin: 0; min-height: 3em; font-weight: 700; font-size: 1.05rem; color: #ffe8a3; }
.ki-legend { display: flex; gap: 12px; font-size: .85rem; color: #cfe3da; }
.ki-legend span { display: inline-flex; gap: 6px; align-items: center; }
.ki-note { margin: 0; font-size: .8rem; color: #9fc2b5; }
.ki-text h3 { margin: 4px 0 6px; font-size: 1.1rem; color: #ffd8a8; }
.ki-text ol, .ki-text ul { margin: 0 0 10px; padding-left: 1.3em; display: grid; gap: 6px; }
.ki-pts { background: #ffffff14; border-radius: var(--r-md); padding: 8px 12px; margin: 6px 0 0; font-size: .92rem; }
.ki-foot { display: flex; justify-content: space-between; gap: 10px; padding: 12px 22px 18px; flex-wrap: wrap; }
.ki-veil.board .ki-box { width: min(1400px, 100%); }
.ki-veil.board .ki-goal { font-size: 1.5rem; }
.ki-veil.board .ki-text { font-size: 1.2rem; }
.ki-veil.board .ki-cap { font-size: 1.35rem; }

/* Kod Arenası: Blockly sürükle-bırak editörü */
.kod-progwrap.bl { padding: 0; overflow: hidden; max-height: none; background: none; }
.kod-bl { position: relative; height: clamp(380px, 56vh, 620px); border-radius: var(--r-md); overflow: hidden; border: 2px solid #ffffff1f; }
.kbl-lock { position: absolute; inset: 0; z-index: 80; background: #061a13b3; color: #fff; display: grid; place-items: center; text-align: center; padding: 20px; font-weight: 700; cursor: not-allowed; }
.kbl-help { color: #cfe3da; font-size: .88rem; }
.kod-bl .blocklyMainBackground { stroke: none; }
.kod-bl .blocklyFlyoutBackground { fill: #143a2d; }
.kod-bl .blocklyText { font-family: 'Atkinson', system-ui, sans-serif; }

/* ---------- Kod Arenası seçimi (panel) ---------- */
.kh-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 8px; }
.kh-card { font-weight: 400; display: flex; flex-direction: column; gap: 8px; background: #fff; border: 2px solid #d3dfda; border-radius: var(--r-lg); padding: 22px; color: inherit; text-decoration: none; transition: transform .15s ease, border-color .15s ease; }
.kh-card:hover, .kh-card:focus-visible { transform: translateY(-2px); border-color: var(--copper); }
.kh-card h2 { margin: 0; font-size: 1.6rem; }
.kh-card ul { margin: 0 0 6px; padding-left: 1.2em; color: var(--muted); }
.kh-card .btn { align-self: flex-start; margin-top: auto; }
.kh-art { height: 120px; border-radius: var(--r-md); background-color: var(--pcb); background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.09) 1px, transparent 0); background-size: 14px 14px; position: relative; overflow: hidden; }
.kh-card.edu .kh-art::after { content: ''; position: absolute; inset: 26px 40px; border: 3px dashed #ffffff55; border-radius: 10px; }
.kh-card.edu .kh-art::before { content: ''; position: absolute; left: 34px; top: 20px; width: 26px; height: 26px; border-radius: 7px; background: #e03131; box-shadow: 150px 50px 0 #1c7ed6; }
.kh-card.tour .kh-art { background-color: #141a17; background-image: linear-gradient(#f1f3f5 0 0), linear-gradient(#f1f3f5 0 0), linear-gradient(#f1f3f5 0 0), linear-gradient(#f1f3f5 0 0); background-size: 4px 70px, 90px 4px, 4px 50px, 70px 4px; background-position: 60px 10px, 60px 80px, 180px 40px, 180px 40px; background-repeat: no-repeat; }
.kh-card.tour .kh-art::after { content: ''; position: absolute; right: 50px; top: 50px; width: 24px; height: 24px; border-radius: 50%; background: #d8a23d; box-shadow: -170px 30px 0 -2px #e03131; }

/* ---------- Robot Ligi: öğrenci ---------- */
.rb-play .play-main { max-width: none; }
.rb-lanes { align-items: center; text-align: center; }
.rb-lanes .lead { color: #cfe3da; margin: 0 auto; }
.rb-lane-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 340px)); gap: 18px; justify-content: center; width: 100%; }
.rb-lane { background: #0006; color: #fff; border: 3px solid #ffffff2e; border-radius: var(--r-lg); padding: 20px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; align-items: center; transition: transform .15s ease, border-color .15s ease; }
.rb-lane:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--copper); }
.rb-lane:disabled { opacity: .55; cursor: not-allowed; }
.rb-lane h3 { margin: 0; font-size: 1.6rem; display: flex; gap: 8px; align-items: center; }
.rb-lane p { margin: 0; color: #cfe3da; }
.rb-lane .rb-lim { font-size: .9rem; color: #ffd8a8; }
.rb-lane-art svg { width: 110px; height: 110px; }
.rb-soon { font: 700 .8rem var(--text); background: #ffd43b; color: #3b2f00; border-radius: 999px; padding: 2px 8px; }

.rb-prep { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 14px; align-items: start; max-width: 1500px !important; }
@media (max-width: 980px) { .rb-prep { grid-template-columns: 1fr; } }
.rb-stage, .rb-work, .rb-side { background: #0006; border-radius: var(--r-lg); padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; color: #fff; }
.rb-stage { position: sticky; top: 8px; }
.rb-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.rb-tabs button { border: 0; border-radius: 999px; padding: 7px 14px; font-weight: 700; background: #ffffff1a; color: #fff; cursor: pointer; }
.rb-tabs button[aria-selected="true"] { background: var(--copper); color: #2b1d00; }
.rb-view { position: relative; height: clamp(300px, 52vh, 620px); border-radius: var(--r-md); overflow: hidden; background: #0b1a14; border: 2px solid #ffffff1f; }
.rb-view.big { height: clamp(360px, 66vh, 820px); }
.rb-view.huge { height: clamp(420px, 74vh, 980px); }
.rb-view .r3-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.rb-view-msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; color: #cfe3da; }
.rb-stagebar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rb-stagebar .meta { color: #cfe3da; }
.rb-stageinfo { min-height: 1.5em; color: #e9f5ef; }
.rb-good { color: #8ce99a; font-weight: 700; }
.rb-bad { color: #ffa8a8; font-weight: 700; }
.rb-seg { display: inline-flex; background: #ffffff14; border-radius: 999px; padding: 3px; gap: 2px; }
.rb-seg button { border: 0; background: none; color: #fff; padding: 5px 11px; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: .9rem; }
.rb-seg button[aria-checked="true"] { background: #fff; color: var(--ink); }
.rb-seg button:disabled { opacity: .35; cursor: not-allowed; }
.rb-stagewrap { position: relative; }
.rb-count { position: absolute; inset: 0; display: grid; place-items: center; font: 800 6rem var(--display); color: #fff; text-shadow: 0 6px 24px #000a; pointer-events: none; }
.rb-count.big { font-size: 9rem; }

.rb-pane { display: flex; flex-direction: column; gap: 12px; }
.rb-garage { max-height: 62vh; overflow: auto; padding-right: 4px; }
.rb-meters { display: grid; gap: 6px; background: #00000038; border-radius: var(--r-md); padding: 10px; position: sticky; top: 0; z-index: 2; backdrop-filter: blur(4px); }
.rb-meter { display: grid; grid-template-columns: 6.5em 1fr auto; gap: 10px; align-items: center; }
.rb-meter .bar { height: 12px; background: #ffffff1f; border-radius: 99px; overflow: hidden; }
.rb-meter .bar i { display: block; height: 100%; background: var(--ok); border-radius: 99px; transition: width .2s ease; }
.rb-meter.over .bar i { background: var(--bad); }
.rb-meter.over b { color: #ffa8a8; }
.rb-stats { display: flex; gap: 14px; flex-wrap: wrap; font-size: .9rem; color: #cfe3da; }
.rb-stats b { color: #fff; }
.rb-stats .warn { color: #ffd8a8; }
.rb-group { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.rb-group legend { font-family: var(--display); font-weight: 800; font-size: 1.1rem; margin-bottom: 4px; }
.rb-group .meta { color: #cfe3da; margin: 0; font-size: .88rem; }
.rb-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.rb-opt { display: grid; gap: 2px; text-align: left; border: 2px solid #ffffff26; background: #ffffff0d; color: #fff; border-radius: var(--r-md); padding: 8px 10px; cursor: pointer; }
.rb-opt[aria-checked="true"] { border-color: var(--copper); background: #d8a23d26; }
.rb-opt:disabled { cursor: not-allowed; opacity: .7; }
.rb-opt small { color: #cfe3da; font-size: .8rem; line-height: 1.25; }
.rb-mass { font-size: .8rem; color: #ffd8a8; }
.rb-srow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rb-sname { width: 5.5em; font-weight: 700; }
.rb-check { display: flex; gap: 10px; align-items: flex-start; background: #ffffff0d; border-radius: var(--r-md); padding: 8px 10px; cursor: pointer; }
.rb-check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--copper); }
.rb-check span { display: grid; gap: 2px; }
.rb-check small { color: #cfe3da; }

.rb-prog .rb-bl { height: clamp(380px, 58vh, 700px); }
.rb-ptools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rb-ptools .kbl-help { flex: 1 1 14em; }
/* Kod alanı tam ekran */
.rb-prog.rb-full { position: fixed; inset: 0; z-index: 60; background: #0b231b; padding: 12px 16px; gap: 10px; }
.rb-prog.rb-full .rb-bl { height: 0; flex: 1 1 0; min-height: 0; }
.btn.rb-run.stop { background: #e03131; border-color: #e03131; color: #fff; }
.rb-fullbtn[aria-pressed="true"] { background: #ffd43b; color: #1b1b1b; }
body.rb-noscroll { overflow: hidden; }
.rb-pwarn .rb-perr { margin: 0; color: #ffd8a8; }
.blocklyFlyoutLabelText, .rbl-label .blocklyFlyoutLabelText { fill: #cfe3da !important; font-weight: 700; }

.rb-foot { display: grid; gap: 8px; border-top: 1px solid #ffffff1f; padding-top: 10px; }
.rb-issues { margin: 0; padding-left: 1.2em; color: #ffd8a8; }
.rb-ok { margin: 0; color: #8ce99a; font-weight: 700; }
.rb-ready { width: 100%; }
.rb-ready:disabled { opacity: .5; cursor: not-allowed; }
.rb-readyinfo { margin: 0; color: #cfe3da; font-size: .92rem; }
.rb-heat summary { cursor: pointer; font-weight: 700; }
.rb-heatlist, .rb-live { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.rb-heatlist li, .rb-live li { display: flex; align-items: center; gap: 8px; background: #ffffff10; border-radius: var(--r-md); padding: 5px 10px; }
.rb-heatlist li span, .rb-live li .rb-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.rb-live li small.why { color: #ffd8a8; font-weight: 400; text-align: right; max-width: 55%; }
.rb-live li small { color: #8ce99a; font-weight: 700; min-width: 3em; text-align: right; }
.rb-heatlist li.me, .rb-live li.me { background: #ffd43b33; font-weight: 700; }
.rb-live li.fin b { color: #8ce99a; }
.rb-live.wide { width: 100%; max-width: 640px; margin: 0 auto; }
.rb-live.big li { font-size: 1.15rem; padding: 8px 12px; }
.rb-pl { width: 2.2em; font-family: var(--display); font-weight: 800; color: #ffd8a8; }

.rb-run { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; max-width: 1500px !important; align-items: start; }
@media (max-width: 980px) { .rb-run { grid-template-columns: 1fr; } }
.rb-side h3 { margin: 0; }
.rb-side .meta { color: #cfe3da; }
.rb-result { align-items: center; text-align: center; color: #fff; }
.rb-result .result .big { font: 800 2rem var(--display); }

/* ---------- Robot Ligi: tahta ---------- */
.rb-host { min-height: 100dvh; display: flex; flex-direction: column; }
.rb-hprep, .rb-hrun, .rb-hres { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); gap: 18px; align-items: start; color: #fff; }
.rb-hleft, .rb-hright { background: #0006; border-radius: var(--r-lg); padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rb-hleft h2, .rb-hright h2 { margin: 0; }
.rb-hcol { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.rb-hinfo { margin: 0; font-size: 1.15rem; color: #e9f5ef; }
.rb-hgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.rb-hcard { background: #ffffff10; border-radius: var(--r-md); padding: 8px 10px; display: grid; gap: 2px; border: 2px solid transparent; }
.rb-hcard.ok { border-color: #8ce99a; }
.rb-hcard.off { opacity: .5; }
.rb-hcard .meta { color: #cfe3da; font-size: .82rem; }
.rb-hh { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rb-hh b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-hs { font-size: .9rem; color: #ffd8a8; }
.rb-hcard.ok .rb-hs { color: #8ce99a; font-weight: 700; }
@media (max-width: 1100px) { .rb-hprep, .rb-hrun, .rb-hres { grid-template-columns: 1fr; } }
.input.upper { text-transform: uppercase; }

.dtag.rc { background: #e6f2ec; color: #12332a; margin: 0 4px 4px 0; display: inline-block; }
.rb-hint { margin: 0; color: #ffe066; font-weight: 700; }
.rb-stageinfo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rb-sense { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; }
.rb-sense-t { font-weight: 700; align-self: center; margin-right: 4px; }
.rb-sv { display: grid; grid-template-columns: auto auto; gap: 0 8px; align-items: baseline; background: #ffffff12; border: 2px solid transparent; border-radius: var(--r-md); padding: 5px 9px; min-width: 112px; }
.rb-sv span { color: #cfe3da; font-size: .85rem; }
.rb-sv b { font-variant-numeric: tabular-nums; text-align: right; }
.rb-sv small { grid-column: 1 / -1; color: #9fc2b5; font-size: .75rem; }
.rb-sbar { grid-column: 1 / -1; height: 5px; background: #ffffff1a; border-radius: 9px; overflow: hidden; margin: 3px 0 1px; }
.rb-sbar i { display: block; height: 100%; background: #4dabf7; }
.rb-sv.hot { border-color: #ff6b6b; }
.rb-sv.hot b { color: #ffa8a8; }
.rb-sv.hot .rb-sbar i { background: #ff6b6b; }
.rb-sv.head { border-color: #ffffff26; }
.rb-sv.var { border-color: #c2255c88; }
.rb-sv.var b { color: #ffc9de; }
.rb-sv.var.flash { animation: rb-varflash .6s ease-out; }
@keyframes rb-varflash { from { background: #c2255c99; } to { background: #ffffff12; } }
@media (prefers-reduced-motion: reduce) { .rb-sv.var.flash { animation: none; } }
.rb-score { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); background: #000a; color: #fff; font: 800 1.15rem var(--display); padding: 6px 16px; border-radius: 999px; pointer-events: none; white-space: nowrap; max-width: 96%; overflow: hidden; text-overflow: ellipsis; }
.rb-score:empty { display: none; }
.rb-step { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.rb-step button { width: 30px; height: 30px; border-radius: 8px; border: 0; background: #ffffff26; color: #fff; font-weight: 800; cursor: pointer; }
.rb-step button:disabled { opacity: .35; cursor: not-allowed; }
.rb-step b { min-width: 1.2em; text-align: center; }
.rb-sv.line.hot { border-color: #f8f9fa; }
.rb-sv.line.hot b { color: #fff; }
.rb-sv.line.hot .rb-sbar i { background: #f8f9fa; }
.rb-lanetabs { display: flex; gap: 6px; }
.rb-mlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rb-mlist li button { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 8px; align-items: center; text-align: left; background: #ffffff10; color: #fff; border: 2px solid transparent; border-radius: var(--r-md); padding: 8px 10px; cursor: pointer; font-size: 1.05rem; }
.rb-mlist li button[aria-pressed="true"] { border-color: var(--copper); background: #d8a23d22; }
.rb-mlist .vs { color: #ffd8a8; font-weight: 800; }
.rb-mlist .r { text-align: right; }
.rb-mlist small { color: #cfe3da; }
.rb-mlist .kdot { display: inline-block; vertical-align: middle; width: 12px; height: 12px; }

/* ---- Kod Arenası bireysel bölüm: karakterler, atıklar, kutular ---- */
.kod-map .kr.kc.done { opacity: 1; }
.kod-map .kr.kc.other { opacity: .6; }
.kod-map .kr.kc.me { opacity: 1; }
.kod-map .kc .kc-bag, .kod-map .kc .kc-tick { display: none; }
.kod-map .kc.carry .kc-bag { display: inline; }
.kod-map .kc.done .kc-tick { display: inline; }
.kod-map .kc .kc-bagn { font-weight: 700; font-family: Atkinson, system-ui, sans-serif; }
.kod-map .kc .kr-turn { transition: transform .3s ease; }
.kod-map .km-item { transition: opacity .3s ease; }
.kod-map .km-item.taken { opacity: 0; }
.kod-mission.solo { background: #1f5b3a; }
.kbin { display: inline-block; width: .8em; height: .9em; border-radius: 2px; vertical-align: -1px; border: 1px solid #12332a; }
.kbin.y { background: #f5c518; }
.kbin.m { background: #1c7ed6; }
.kod-fact { background: #e6f4ea; color: #12332a; border-radius: var(--r-md); padding: 10px 12px; margin-top: 8px; }
.kod-fact b { display: block; margin-bottom: 4px; }
.kod-fact p { margin: 0 0 4px; }
.kod-fact small { color: #4b5d55; }
.kh-robots.solo { max-height: 60vh; overflow: auto; }
.kh-kaz { color: #cfe3da; font-size: .85rem; }
.kh-kaz ul { margin: 6px 0 0; padding-left: 18px; }
.kc-concept { font-weight: 400; color: var(--muted, #5c6b66); }
.kc-kaz { margin: 4px 0 6px; padding-left: 18px; font-size: .85rem; color: #3d5c50; }
.kod-map .km-item.panel.taken { opacity: 1; }
.kod-map .km-item .kp-dust { transition: opacity .3s ease; }
.kod-map .km-item.taken .kp-dust { opacity: 0; }
/* Kod Arenası 3-5. bölümler: ayıklama, fidan, enerji, sayaç */
.kb-Y { background: #c99a06; } .kb-M { background: #1971c2; } .kb-Z { background: #2f9e44; }
.kb-I { background: #5c940d; } .kb-H { background: #1864ab; } .kb-K, .kb-J { background: #a61e4d; }
.kbin.z { background: #2f9e44; }
.kod-map .km-item.maybe { opacity: .7; }
.kod-map .km-tree { opacity: 0; transition: opacity .3s ease; }
.kod-map .km-soil.stone rect { display: none; }
.kod-hud { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; background: #10261e; color: #e6f4ea; border-radius: var(--r-md); padding: 6px 10px; margin-top: 6px; font-size: .9rem; }
.kod-hud[hidden] { display: none; }
.kod-hud b { color: #ffd43b; }
.kod-hud .kh-e.low b { color: #ff8787; }
.kod-hud .kh-bar { display: inline-block; width: 60px; height: 8px; background: #2c4a3e; border-radius: 4px; margin-left: 6px; vertical-align: middle; overflow: hidden; }
.kod-hud .kh-bar i { display: block; height: 100%; background: #ffd43b; transition: width .25s ease; }
.qsource { background: #f1f7f3; border-left: 3px solid #2f9e44; padding: 6px 10px; border-radius: 4px; margin: 0; }

/* Mod kartında kumanda etiketi */
.mode-card .mc-tag { font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; line-height: 1.3; }
.mode-card .mc-tag.rc { background: #d3f9d8; color: #1b5e20; }
.mode-card .mc-tag.norc { background: #ffe8cc; color: #8a4b00; }
/* Mancınık */
.cat-main { gap: 10px; }
.cat-aim { width: 100%; max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.cat-canvas { width: 100%; height: auto; aspect-ratio: 1000 / 520; border-radius: 14px; border: 3px solid #12332a; background: #e6f8ff; touch-action: none; cursor: grab; display: block; }
.cat-canvas:active { cursor: grabbing; }
.cat-help { margin: 0; font-size: .9rem; opacity: .85; text-align: center; }
.cat-ctrl { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: center; }
.cat-ctrl label { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.cat-ctrl input[type=range] { width: 160px; accent-color: #d8a23d; }
.cat-ctrl b { min-width: 3.2em; display: inline-block; }
.cat-banner { margin: 0 auto; padding: 8px 18px; }
.cat-banner h2 { margin: 0; font-size: 1.3rem; }
.cat-banner p { margin: 2px 0 0; }
.cat-result { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 110px; }
.cat-host { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .cat-host { grid-template-columns: 1fr; } }
.cat-replay h3 { margin: 0 0 6px; }
.cat-replay .meta { color: #cfe3da; }
.board-list .lv { font-size: .8rem; opacity: .8; margin-left: 6px; }
/* ---- Python Atölyesi ---- */
.kh-card.py .kh-art { background-color: #1e2a24; }
.kh-card.py .kh-art::before { content: '>>> print("Merhaba")'; position: absolute; left: 22px; top: 26px; font: 700 18px ui-monospace, Menlo, Consolas, monospace; color: #ffd43b; }
.kh-card.py .kh-art::after { content: 'Merhaba'; position: absolute; left: 22px; top: 62px; font: 600 16px ui-monospace, Menlo, Consolas, monospace; color: #63e6be; }
.py-topics { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.py-tp { display: flex; gap: 10px; align-items: flex-start; border: 2px solid #d3dfda; border-radius: var(--r-md); padding: 10px 12px; background: #fff; cursor: pointer; }
.py-tp.on { border-color: var(--copper); background: #fffaf0; }
.py-tp small { color: var(--muted); }
.py-tp details { margin-top: 4px; font-size: .9rem; }
.py-tp ol { margin: 4px 0 0; padding-left: 1.2em; }
.py-sol { background: #f4f1e8; padding: 6px 8px; border-radius: 6px; font-size: .82rem; white-space: pre-wrap; margin: 4px 0; }
.py-play { min-height: 100vh; }
.py-main { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px; padding: 12px 14px 20px; align-items: start; }
@media (max-width: 860px) { .py-main { grid-template-columns: 1fr; } }
.py-tasks { background: rgba(0,0,0,.18); border-radius: 14px; padding: 10px; max-height: calc(100vh - 90px); overflow: auto; position: sticky; top: 8px; }
.py-prog { color: #e6f4ea; margin: 2px 4px 8px; }
.py-topic h4 { color: #cfe3da; margin: 10px 4px 4px; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.py-ti { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: transparent; border: 0; color: #f1f3ef; padding: 6px 8px; border-radius: 8px; cursor: pointer; font: inherit; }
.py-ti:hover { background: rgba(255,255,255,.08); }
.py-ti.on { background: #d8a23d; color: #12332a; font-weight: 700; }
.py-ti small { margin-left: auto; opacity: .7; }
.py-ti .py-tick { width: 1.2em; text-align: center; }
.py-ti.done .py-tick { color: #69db7c; font-weight: 800; }
.py-ti.on.done .py-tick { color: #1b5e20; }
.py-work { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.py-task { background: #fffdf7; color: #12332a; border-radius: 14px; padding: 12px 16px; }
.py-th { display: flex; align-items: center; gap: 12px; }
.py-th h2 { margin: 0; font-size: 1.35rem; }
.py-pts { margin-left: auto; font-weight: 800; background: #f1ede2; padding: 2px 10px; border-radius: 999px; }
.py-pts.ok { background: #d3f9d8; color: #1b5e20; }
.py-text { white-space: pre-wrap; margin: 8px 0 0; font-size: 1.02rem; line-height: 1.5; }
.py-hint { background: #fff3bf; border-radius: 8px; padding: 8px 10px; margin: 8px 0 0; }
.py-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.py-spacer { flex: 1; }
.py-editor { color: #1d2b24; height: 340px; border-radius: 12px; overflow: hidden; border: 3px solid #12332a; background: #fffdf7; }
.py-editor .cm-editor { height: 100%; }
.py-inbox { display: flex; flex-direction: column; gap: 4px; color: #e6f4ea; }
.py-io { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.py-out { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.py-out-h { display: flex; justify-content: space-between; align-items: center; color: #e6f4ea; }
.py-status { font-size: .85rem; opacity: .9; }
.py-status.loading::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #ffd43b; border-right-color: transparent; margin-right: 6px; animation: spin 1s linear infinite; vertical-align: -1px; }
.py-status.error { color: #ffa8a8; }
@keyframes spin { to { transform: rotate(360deg); } }
.py-console { background: #10221b; color: #e6f4ea; font: 15px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; min-height: 120px; max-height: 320px; overflow: auto; margin: 0; padding: 10px 12px; border-radius: 12px; white-space: pre-wrap; word-break: break-word; }
.py-inline .py-in { background: transparent; border: 0; border-bottom: 2px solid #ffd43b; color: #ffd43b; font: inherit; outline: none; min-width: 12ch; }
.py-error { background: #fff0f0; color: #7a1c1c; border-left: 5px solid #e5484d; border-radius: 10px; padding: 8px 12px; }
.py-error p { margin: 4px 0; font-weight: 600; }
.py-error code { display: block; font-size: .85rem; opacity: .8; margin-bottom: 4px; }
.py-check { background: #fffdf7; color: #12332a; border-radius: 12px; padding: 8px 12px; }
.py-check ul { margin: 4px 0; padding-left: 1.1em; list-style: none; }
.py-check li { margin: 4px 0; }
.py-check li.ok b { color: #2b8a3e; }
.py-check li.bad b { color: #c92a2a; }
.py-why { font-size: .9rem; color: #495057; margin: 2px 0 0 1.4em; }
.py-must { color: #c92a2a; font-weight: 700; margin: 4px 0; }
.py-win { color: #2b8a3e; font-weight: 800; font-size: 1.1rem; margin: 4px 0; }
.py-turtle-wrap { flex: 0 1 380px; }
.py-turtle { width: 100%; max-width: 380px; aspect-ratio: 1; border-radius: 12px; border: 3px solid #12332a; background: #fff; display: block; }
.py-paused { position: fixed; inset: 0; z-index: 50; background: rgba(9,40,30,.82); display: grid; place-items: center; color: #fff; text-align: center; }
.py-paused[hidden] { display: none; }
/* tahta */
.py-hostgrid { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(260px, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1000px) { .py-hostgrid { grid-template-columns: 1fr; } }
.py-gridwrap { overflow: auto; }
.py-grid { border-collapse: separate; border-spacing: 3px; color: #e6f4ea; font-size: .9rem; }
.py-grid th { font-weight: 700; color: #cfe3da; padding: 2px 4px; }
.py-grid td { padding: 0 4px; }
.py-gn { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.py-grid tr.off .py-gn { opacity: .5; }
.py-cell { width: 30px; height: 28px; text-align: center; background: rgba(255,255,255,.08); border-radius: 6px; cursor: pointer; font-weight: 800; }
.py-cell.ok { background: #2f9e44; color: #fff; }
.py-cell.try { background: #e8a800; color: #2a1e00; }
.py-cell.cur { outline: 3px solid #fff; }
.py-grid tfoot td { color: #cfe3da; text-align: center; }
.py-legend { columns: 2; color: #cfe3da; font-size: .85rem; padding-left: 2.4em; }
.py-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.py-gallery figure { margin: 0; background: #fff; border-radius: 10px; padding: 4px; cursor: pointer; }
.py-gallery img { width: 100%; aspect-ratio: 1; display: block; border-radius: 6px; }
.py-gallery figcaption { display: flex; align-items: center; gap: 4px; font-size: .78rem; color: #12332a; padding: 2px; }
.py-peek { max-width: min(860px, 94vw); border: 0; border-radius: 14px; padding: 16px 18px; }
.py-peek::backdrop { background: rgba(0,0,0,.5); }
.py-peek-code { background: #10221b; color: #e6f4ea; padding: 10px 12px; border-radius: 10px; max-height: 60vh; overflow: auto; font: 15px/1.45 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; }
.py-peek-img { max-width: 320px; display: block; margin: 6px 0; border-radius: 8px; border: 1px solid #ddd; }
.side-links { margin: 0; color: #cfe3da; }

/* ---------- Robotik Atölye ---------- */
.status.warn { background: #fff3d6; color: #6b4a00; }
.ra-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.ra-head h1 { margin: 0 0 4px; }
.ra-head .meta { max-width: 70ch; margin: 0; }
.ra-sec { margin-bottom: 16px; }
.ra-h2 { display: flex; align-items: center; gap: 10px; font-size: 1.35rem; margin: 0 0 14px; }
.ra-no { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--pcb); color: #fff; font-size: 1rem; }
.ra-boards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ra-board { text-align: left; border: 2px solid #d3dfda; background: #f7faf8; border-radius: 12px; padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; font: inherit; color: var(--ink); }
.ra-board b { font-family: var(--display); font-size: 1.08rem; }
.ra-board span { color: var(--muted); font-size: .88rem; }
.ra-board small { color: #8b1d22; font-size: .78rem; }
.ra-board[aria-checked="true"] { border-color: var(--pcb); background: #e3f1ea; box-shadow: inset 0 0 0 1px var(--pcb); }
.ra-board.esp32[aria-checked="true"] { border-color: #1c2b36; background: #e6edf2; box-shadow: inset 0 0 0 1px #1c2b36; }
@media (max-width: 800px) { .ra-boards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ra-parts { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .ra-parts { grid-template-columns: 1fr; } }
.ra-catgrp h3, .ra-selected h3 { font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 12px 0 6px; }
.ra-catgrp:first-child h3 { margin-top: 0; }
.ra-tiles { display: flex; flex-wrap: wrap; gap: 6px; }
.ra-tile { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; border: 1px solid #c9d6d0; background: #fff; font: inherit; font-size: .9rem; color: var(--ink); cursor: pointer; }
.ra-tile:hover { border-color: var(--pcb); background: #f0f7f3; }
.ra-tile.on { border-color: var(--pcb); background: #e3f1ea; }
.ra-tile i, .ra-selected li i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--ink); flex: none; }
.ra-tile em { font-style: normal; font-weight: 800; color: var(--pcb); }
.ra-tile b { color: var(--pcb); }
.ra-selected { background: #f4f8f6; border-radius: 12px; padding: 4px 14px 14px; position: sticky; top: 76px; }
.ra-selected ul { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 4px; }
.ra-selected li { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 8px; padding: 5px 6px 5px 10px; border: 1px solid #dbe5e1; }
.ra-inst { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem; font-weight: 700; color: var(--pcb); min-width: 72px; }
.ra-lbl { flex: 1; font-size: .9rem; min-width: 0; }
.ra-selected select.input.small { width: auto; padding: 3px 6px; min-height: 0; font-size: .85rem; }
.ra-x { border: 0; background: transparent; font-size: 1.3rem; line-height: 1; color: #8b1d22; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.ra-x:hover { background: #fde3e4; }
.ra-suggest { border-top: 1px dashed #c9d6d0; padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.ra-suggest label { font-weight: 700; font-size: .9rem; }
.ra-sgres { background: #fff; border-radius: 10px; padding: 10px 12px; border: 1px solid #c9d6d0; }
.ra-sgres p { margin: 0 0 6px; }
.ra-sgres ul { margin: 0 0 8px; padding-left: 20px; }
.ra-warn { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; }
.ra-warn li { padding: 8px 12px 8px 34px; border-radius: 10px; position: relative; font-size: .93rem; }
.ra-warn li::before { position: absolute; left: 11px; top: 8px; font-weight: 800; }
.ra-warn li.error { background: #fde3e4; color: #8b1d22; } .ra-warn li.error::before { content: '✗'; }
.ra-warn li.warn { background: #fff3d6; color: #6b4a00; } .ra-warn li.warn::before { content: '!'; left: 14px; }
.ra-warn li.info { background: #e6f0fb; color: #173f6b; } .ra-warn li.info::before { content: 'i'; left: 14px; font-style: italic; }
.ra-svgwrap { overflow-x: auto; border: 1px solid #d3dfda; border-radius: 12px; background: #fbfcfa; }
.ra-svg { display: block; width: 100%; min-width: 760px; height: auto; font-family: var(--text); }
.ra-svg .ra-bname { font-family: var(--display); font-weight: 800; font-size: 20px; fill: #fff; }
.ra-svg .ra-bpin { font-size: 12px; fill: #b9cfd8; font-family: ui-monospace, Menlo, Consolas, monospace; }
.ra-svg .ra-bpin.on { fill: #fff; font-weight: 700; }
.ra-svg .ra-bpin.res { fill: #7f8f96; text-decoration: line-through; }
.ra-svg .ra-pname { font-family: var(--display); font-weight: 700; font-size: 13px; }
.ra-svg .ra-ppin { font-size: 12px; fill: #12332a; }
.ra-svg .ra-ppin.nc { fill: #98a8a2; font-style: italic; }
.ra-svg .ra-tag { font-size: 11px; font-weight: 700; font-family: ui-monospace, Menlo, Consolas, monospace; }
.ra-svg .ra-res { font-size: 11px; font-weight: 700; fill: #5c3d00; font-family: ui-monospace, Menlo, Consolas, monospace; }
.ra-svg .ra-legend { font-size: 13px; fill: #557268; }
.ra-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; margin-top: 16px; }
@media (max-width: 900px) { .ra-cols { grid-template-columns: 1fr; } }
.ra-cols h3 { font-size: 1.05rem; margin: 0 0 8px; }
.ra-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ra-table th { text-align: left; color: var(--muted); font-size: .8rem; border-bottom: 1px solid #d3dfda; padding: 6px; }
.ra-table td { border-bottom: 1px solid #edf2ef; padding: 6px; vertical-align: top; }
.ra-table tr.nc td { color: #98a8a2; }
.ra-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; border: 1px solid rgba(0, 0, 0, .3); vertical-align: -1px; }
.ra-via { display: inline-block; background: #f3e3c3; border: 1px solid #a8781f; border-radius: 5px; padding: 0 5px; font-size: .78rem; font-weight: 700; color: #5c3d00; white-space: nowrap; }
.ra-mat { margin: 0 0 12px; padding-left: 20px; }
.ra-print-title { display: none; }
.ra-ideas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 12px 0; }
.ra-idea { text-align: left; border: 1px solid #c9d6d0; border-radius: 12px; background: #fff; padding: 12px; font: inherit; color: var(--ink); cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.ra-idea:hover { border-color: var(--pcb); box-shadow: 0 4px 14px rgba(18, 51, 42, .1); }
.ra-idea b { font-family: var(--display); font-size: 1.05rem; }
.ra-idea span:not(.lvl) { font-size: .9rem; color: var(--muted); }
.ra-idea small { font-size: .78rem; color: var(--pcb); }
.ra-idea .lvl { align-self: flex-start; font-size: .75rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: #e3f1ea; color: var(--pcb); }
.ra-idea.Orta .lvl { background: #fff3d6; color: #6b4a00; }
.ra-idea.Zor .lvl { background: #fde3e4; color: #8b1d22; }
#rbGoal { width: 100%; }
.ra-stage { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 700; }
.ra-spin { width: 16px; height: 16px; border-radius: 50%; border: 3px solid #c9d6d0; border-top-color: var(--pcb); animation: raspin .8s linear infinite; }
@keyframes raspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ra-spin { animation-duration: 2.5s; } }
.ra-result { margin-top: 18px; border-top: 1px solid #d3dfda; padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.ra-result p { margin: 0; }
.ra-result h4 { margin: 6px 0 4px; }
.ra-result ol { margin: 0; padding-left: 22px; }
.ra-result .row .input { flex: 1; min-width: 180px; }
.ra-rhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ra-rhead h3 { margin: 0; font-size: 1.3rem; }
.ra-badge { font-size: .85rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.ra-badge.ok { background: #d3f9e0; color: #0b5d2c; }
.ra-badge.bad { background: #fde3e4; color: #8b1d22; }
.ra-badge.skip { background: #eef1f0; color: #557268; }
.ra-code { background: #10231d; color: #e3efe9; border-radius: 12px; padding: 14px 0; overflow: auto; max-height: 560px; font-size: .86rem; line-height: 1.5; counter-reset: ln; margin: 0; }
.ra-code code { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ra-code span { display: block; padding: 0 16px 0 58px; position: relative; white-space: pre; }
.ra-code span::before { counter-increment: ln; content: counter(ln); position: absolute; left: 0; width: 42px; text-align: right; color: #5d7a70; }
.ra-code span.err { background: rgba(229, 72, 77, .28); }
.ra-dialog { border: 0; border-radius: 16px; padding: 22px; width: min(720px, 94vw); }
.ra-dialog::backdrop { background: rgba(9, 61, 47, .5); }
.ra-dialog h2 { margin-top: 0; }
@media print {
  body.ra-printing .desk-top, body.ra-printing .ra-noprint, body.ra-printing .toast { display: none !important; }
  body.ra-printing { background: #fff; }
  body.ra-printing .page { padding: 0; max-width: none; }
  body.ra-printing .panel { border: 0; padding: 0; break-inside: auto; }
  body.ra-printing .ra-h2 { display: none; }
  body.ra-printing .ra-print-title { display: block; margin-bottom: 8px; }
  body.ra-printing .ra-print-title h2 { margin: 0; }
  body.ra-printing .ra-svgwrap { border: 0; overflow: visible; }
  body.ra-printing .ra-svg { min-width: 0; }
  body.ra-printing .ra-code { max-height: none; overflow: visible; background: #fff; color: #000; border: 1px solid #999; }
  body.ra-printing .ra-code span { white-space: pre-wrap; }
  body.ra-printing .ra-code span::before { color: #777; }
}
/* Robotik Atölye · düzenleyici, öğrenci ve tahta */
.ra-edit { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88rem; line-height: 1.45; background: #10231d; color: #e3efe9; border: 2px solid var(--copper); border-radius: 12px; padding: 12px 14px; tab-size: 2; white-space: pre; overflow: auto; resize: vertical; }
.ra-edit:focus { outline: 3px solid rgba(216, 162, 61, .5); outline-offset: 1px; }
.ra-errs ul { margin: 6px 0 0; padding-left: 18px; font-weight: 400; }
.ra-errs li { margin-bottom: 6px; }
.ra-hint { font-weight: 700; color: #5c1418; margin-top: 2px; }
.ra-lnk { border: 0; background: none; padding: 0; font: inherit; font-weight: 800; color: #8b1d22; text-decoration: underline; cursor: pointer; }
.ra-chk { display: inline-flex; align-items: center; gap: 6px; margin: 2px 14px 2px 0; font-weight: 400; }
.ra-chks { display: flex; flex-wrap: wrap; gap: 2px 6px; }
.ra-form3 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
@media (max-width: 600px) { .ra-form3 { grid-template-columns: 1fr; } }
.ra-dialog .field { margin-bottom: 12px; }
.ra-dialog .lbl { display: block; font-weight: 700; margin-bottom: 4px; }
.ra-student { min-height: 100vh; background: var(--desk); color: var(--ink); }
.ra-student .play-top .score { display: none; }
.ra-spage { max-width: 1240px; margin: 0 auto; padding: 16px; }
.ra-student .panel { color: var(--ink); }
.ra-task { margin-bottom: 14px; background: #fff7e3; border-color: #f0d9a6; font-size: 1.05rem; }
.ra-veil { position: fixed; inset: 0; background: rgba(9, 61, 47, .88); color: #fff; display: grid; place-items: center; text-align: center; z-index: 50; }
.ra-veil[hidden] { display: none; }
.ra-host .ra-hsum { color: #e3efe9; margin: 6px 0 14px; }
.ra-host .ra-hsum p { margin: 0 0 6px; }
.ra-hstats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ra-st { padding: 4px 12px; border-radius: 999px; font-weight: 700; background: rgba(255, 255, 255, .1); color: #e3efe9; }
.ra-st.ok { background: #2fbf71; color: #05301a; } .ra-st.bad { background: #e5484d; color: #fff; } .ra-st.kod { background: #f5c518; color: #2a1e00; } .ra-st.sema { background: #4dabf7; color: #072b4a; }
.ra-hgrid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr); gap: 20px; }
@media (max-width: 1000px) { .ra-hgrid { grid-template-columns: 1fr; } }
.ra-hgrid h3 { color: #fff; }
.ra-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.ra-card { text-align: left; border: 0; border-left: 8px solid #6c8a80; border-radius: 12px; background: #f3f6ef; color: var(--ink); padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; font: inherit; }
.ra-card:hover { box-shadow: 0 0 0 3px var(--copper); }
.ra-card.ok { border-left-color: #2fbf71; } .ra-card.bad { border-left-color: #e5484d; } .ra-card.kod { border-left-color: #f5c518; } .ra-card.sema { border-left-color: #4dabf7; }
.ra-card.offline { opacity: .55; }
.ra-cname { display: flex; align-items: center; gap: 6px; }
.ra-cst { font-weight: 800; font-size: .9rem; }
.ra-card small { color: var(--muted); }
.ra-ctitle { font-style: italic; }
.ra-peek { border: 0; border-radius: 16px; padding: 20px; width: min(1200px, 96vw); max-height: 92vh; overflow: auto; color: var(--ink); }
.ra-peek::backdrop { background: rgba(9, 61, 47, .6); }
.ra-peek h3 { margin: 0; }
.ra-peek .ra-badge { display: inline-block; }
.ra-student .play-top { background: var(--pcb-deep); color: #fff; }
.ra-sec .row + .field, .ra-sec .ra-ideas + .field { margin-top: 14px; }
/* Kod Arenası ana sayfası: dört kart 2×2 */
@media (min-width: 900px) { .kh-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kh-card.ra .kh-art { background-color: #0f6b8e; background-image: radial-gradient(#ffffff33 1.5px, transparent 1.6px); background-size: 14px 14px; }
.kh-card.ra .kh-art::before { content: ''; position: absolute; left: 50%; top: 50%; width: 86px; height: 54px; transform: translate(-50%, -50%); border-radius: 6px; background: #1c2b36; box-shadow: 0 0 0 3px #12332a, -46px 0 0 -18px #ffd43b, 46px 0 0 -18px #ffd43b; }
.kh-card.ra .kh-art::after { content: ''; position: absolute; left: calc(50% - 120px); top: calc(50% - 8px); width: 16px; height: 16px; border-radius: 50%; background: #e5484d; box-shadow: 0 0 12px #ff8787, 224px 0 0 #2fbf71, 224px 0 12px #8ce99a; }

/* ---------- Yapay Zekâ Atölyesi ---------- */
.kh-card.yz .kh-art { background-color: #3b2a6b; background-image: radial-gradient(#ffffff26 1.5px, transparent 1.6px); background-size: 14px 14px; }
.kh-card.yz .kh-art::before { content: ''; position: absolute; left: 50%; top: 50%; width: 70px; height: 52px; transform: translate(-50%, -50%); border-radius: 10px; background: #f3f6ef; box-shadow: inset 0 0 0 10px #f3f6ef, inset 0 0 0 30px #2f6feb, -70px -14px 0 -16px #ffd43b, -70px 18px 0 -16px #e5484d, 70px 2px 0 -16px #2fbf71; }
.kh-card.yz .kh-art::after { content: ''; position: absolute; left: calc(50% - 56px); top: calc(50% - 1px); width: 112px; height: 2px; background: #ffffff55; }
.yz-load b { font-variant-numeric: tabular-nums; }
.yz-data { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 10px; }
.yz-videowrap { aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; background: #1c2b36; display: grid; place-items: center; color: #c9d6d0; position: sticky; top: 12px; }
.yz-video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.yz-draw { width: 100%; max-width: 340px; aspect-ratio: 1; height: auto; border: 2px solid #d3dfda; border-radius: var(--r-md); background: #fff; touch-action: none; cursor: crosshair; display: block; margin-bottom: 8px; }
.yz-classes { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.yz-class { width: 100%; border: 1px solid #d3dfda; background: #f7faf8; border-radius: var(--r-md); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.yz-chead { display: flex; align-items: center; gap: 10px; }
.yz-name { max-width: 220px; font-weight: 700; }
.yz-count { color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; margin-right: auto; }
.yz-thumbs { display: flex; gap: 4px; min-height: 44px; overflow: hidden; }
.yz-thumbs img { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; flex: none; background: #e2ebe7; }
.yz-thumbs:empty::before { content: 'Henüz örnek yok'; color: var(--muted); font-size: .85rem; align-self: center; }
.yz-class .btn { user-select: none; -webkit-user-select: none; touch-action: none; }
.yz-result { margin-top: 12px; display: flex; flex-direction: column; gap: 14px; }
.yz-acc { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.yz-acc b { font-family: var(--display); font-size: 2.6rem; line-height: 1; color: var(--pcb); }
.yz-acc small { color: var(--muted); flex-basis: 100%; }
.yz-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.yz-cols h3 { font-size: 1.05rem; }
.yz-bars, .yz-pred { display: flex; flex-direction: column; gap: 6px; }
.yz-bar { display: grid; grid-template-columns: minmax(80px, 140px) 1fr 48px; gap: 8px; align-items: center; }
.yz-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yz-bar > div { height: 14px; border-radius: 7px; background: #e2ebe7; overflow: hidden; }
.yz-bar i { display: block; height: 100%; background: #8fb3a5; border-radius: 7px; transition: width .15s; }
.yz-bar.on i, .yz-bar.static i { background: var(--pcb); }
.yz-bar.low i { background: #e8a800; }
.yz-bar em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.yz-top { font-family: var(--display); font-size: 1.6rem; font-weight: 800; margin: 6px 0; }
.yz-conf { border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .92rem; }
.yz-conf th, .yz-conf td { border: 1px solid #d3dfda; padding: 4px 8px; text-align: center; }
.yz-conf thead th { font-size: .8rem; color: var(--muted); font-weight: 600; }
.yz-conf tbody th { text-align: left; font-weight: 600; }
.yz-conf td.diag { background: #e3f1ea; font-weight: 700; }
.yz-conf td.miss { background: #fdecd0; color: #7a4b00; font-weight: 700; }
.yz-why { margin-top: 12px; }
.yz-why summary { cursor: pointer; font-weight: 700; }
@media (max-width: 720px) { .yz-data { grid-template-columns: 1fr; } .yz-videowrap { position: static; max-width: 340px; } }
/* Tahta: öğrenci kartları */
.yzh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.yzh-card { background: #ffffff14; border: 1px solid #ffffff2a; border-radius: 12px; padding: 12px; color: var(--silk); display: flex; flex-direction: column; gap: 6px; }
.yzh-card h3 { margin: 0; font-size: 1.1rem; display: flex; justify-content: space-between; gap: 8px; }
.yzh-card h3 b { color: var(--copper); font-variant-numeric: tabular-nums; }
.yzh-cls { display: flex; flex-wrap: wrap; gap: 4px; font-size: .85rem; }
.yzh-cls span { background: #ffffff1c; border-radius: 6px; padding: 1px 6px; }
.yzh-cls span.few { background: #e8a80055; }
.yzh-st { font-size: .85rem; opacity: .8; }
/* Yapay Zekâ Atölyesi · Robotu yönet */
.yzr-top { display: grid; grid-template-columns: 250px minmax(0, 1fr) 220px; gap: 14px; align-items: start; }
.yzr-ctrl { display: flex; flex-direction: column; gap: 10px; }
.yzr-cam { display: flex; flex-direction: column; gap: 8px; }
.yzr-preview, .yzr-pad { width: 100%; max-width: 250px; aspect-ratio: 1; height: auto; border-radius: var(--r-md); background: #1c2b36; display: block; }
.yzr-pad { background: #fff; border: 2px solid #d3dfda; touch-action: none; cursor: crosshair; }
.yzr-pn { margin: 0; font-size: .95rem; }
.yzr-pn b { font-variant-numeric: tabular-nums; }
.yzr-hold { height: 10px; border-radius: 5px; background: #e2ebe7; overflow: hidden; }
.yzr-hold i { display: block; height: 100%; width: 0; background: var(--pcb); transition: width .12s; }
.yzr-hold.wait i { background: #8fb3a5; }
.yzr-thr { display: flex; align-items: center; gap: 6px; font-size: .9rem; }
.yzr-thr input { flex: 1; min-width: 0; }
.yzr-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.yzr-chip { font: inherit; font-size: .82rem; border: 1px solid #c7d6cf; background: #f7faf8; border-radius: 999px; padding: 2px 10px; cursor: pointer; color: var(--ink); }
.yzr-chip:hover { background: #e3f1ea; }
.yzr-stage { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.yzr-goal { margin: 0; }
.yzr-view { position: relative; height: 380px; border-radius: var(--r-md); overflow: hidden; background: #cfe3d8; }
.yzr-canvas { width: 100%; height: 100%; display: block; }
.yzr-msg { min-height: 1.5em; font-weight: 700; }
.yzr-msg.bad { color: #b3261e; }
.yzr-msg.ok { color: var(--pcb); }
.yzr-side h3 { font-size: 1rem; margin: 0 0 6px; }
.yzr-maps { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.yzr-map { font: inherit; text-align: left; border: 2px solid #d3dfda; background: #f7faf8; border-radius: 10px; padding: 6px 10px; cursor: pointer; color: var(--ink); display: grid; grid-template-columns: 1fr auto; gap: 0 6px; }
.yzr-map b { font-size: .92rem; }
.yzr-map span { grid-column: 1; font-size: .8rem; color: var(--muted); }
.yzr-map em { grid-column: 2; grid-row: 1 / 3; align-self: center; font-style: normal; color: var(--pcb); font-weight: 800; font-size: 1.2rem; }
.yzr-map.on { border-color: var(--pcb); background: #e3f1ea; }
.yzr-map.done { background: #eef8f2; }
.yzr-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: .85rem; }
.yzr-log li { background: #f3f7f5; border-radius: 6px; padding: 3px 8px; }
.yzr-log li.muted { color: var(--muted); }
.yzr-h3 { font-size: 1.05rem; margin: 16px 0 8px; }
.yzr-blocks { height: 340px; border-radius: var(--r-md); overflow: hidden; }
.yzr-mapchk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; }
.yzh-robot { font-size: .85rem; color: #ffe8a3; }
@media (max-width: 1100px) { .yzr-top { grid-template-columns: 220px minmax(0, 1fr); } .yzr-side { grid-column: 1 / -1; } .yzr-maps { flex-direction: row; flex-wrap: wrap; } }
@media (max-width: 720px) { .yzr-top { grid-template-columns: 1fr; } .yzr-view { height: 300px; } }

/* ---------- Kod Doğası ---------- */
.kh-card.dg .kh-art { background: linear-gradient(#bfe3f2 0 55%, #4aa3d8 55%); }
.kh-card.dg .kh-art::before { content: ''; position: absolute; left: 50%; top: 58%; width: 180px; height: 46px; transform: translate(-50%, -50%); border-radius: 50%; background: #86c06c; box-shadow: 0 6px 0 #e8d6a0; }
.kh-card.dg .kh-art::after { content: '🐰  🌿  🦊'; position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); font-size: 1.6rem; letter-spacing: 4px; }
.dg-design { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
.dg-left .ra-boards.dg-kinds { grid-template-columns: 1fr 1fr; }
.dg-left h3 { font-size: 1rem; margin: 12px 0 4px; }
.dg-colors { display: flex; flex-wrap: wrap; gap: 6px; }
.dg-sw { width: 26px; height: 26px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px #c7d6cf; cursor: pointer; padding: 0; }
.dg-sw[aria-checked="true"] { box-shadow: 0 0 0 3px var(--ink); }
.dg-genes { display: flex; flex-direction: column; gap: 6px; }
.dg-gene { display: grid; grid-template-columns: 64px auto auto auto; gap: 6px; align-items: center; }
.dg-gene small { grid-column: 1 / -1; color: var(--muted); font-size: .78rem; margin-top: -4px; }
.dg-gene .btn.small { padding: 2px 10px; min-width: 32px; }
.dg-dots { display: inline-flex; gap: 4px; }
.dg-dots i { width: 16px; height: 16px; border-radius: 4px; background: #e2ebe7; display: inline-block; }
.dg-dots i.on { background: var(--pcb); }
.dg-blocks { height: 440px; border-radius: var(--r-md); overflow: hidden; margin: 8px 0 10px; }
.dg-status { font-size: .9rem; color: var(--muted); }
.dg-status.ok { color: var(--pcb); font-weight: 700; }
.dg-status.err { color: #b3261e; font-weight: 700; }
.dg-test { margin-top: 16px; }
.dg-viewer { display: flex; flex-direction: column; gap: 8px; }
.dg-stagewrap { position: relative; }
.dg-stage { height: 440px; border-radius: var(--r-md); overflow: hidden; background: #bfe3f2; }
.dg-canvas { width: 100%; height: 100%; display: block; }
.dg-hud { color: var(--ink); position: absolute; left: 10px; top: 10px; display: flex; gap: 10px; flex-wrap: wrap; background: #ffffffd9; border-radius: 10px; padding: 4px 10px; font-variant-numeric: tabular-nums; font-size: .92rem; pointer-events: none; }
.dg-hud .mine { color: #8a6100; font-weight: 700; }
.dg-note { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); background: #12332ae6; color: #fff; border-radius: 10px; padding: 6px 12px; font-size: .9rem; }
.dg-ctrl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dg-speed { width: auto; padding: 4px 8px; }
.dg-seek { flex: 1; min-width: 120px; }
.dg-chart { width: 100%; height: 120px; display: block; background: #f7faf8; border-radius: 10px; }
.dg-results { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.dg-mine { background: #fff8e1; border: 1px solid #f1d27a; border-radius: 12px; padding: 10px 14px; }
.dg-mine h3 { margin: 0 0 4px; }
.dg-mine p { margin: 2px 0; }
.dg-tips { margin: 6px 0 0; padding-left: 18px; }
.dg-ranks { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.dg-rank h3 { font-size: 1rem; margin: 0 0 4px; }
.dg-rank ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 3px; }
.dg-rank li { display: grid; grid-template-columns: 12px 1fr auto; gap: 6px; align-items: center; }
.dg-rank li i, .dg-card i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dg-rank li.me { font-weight: 800; background: #fff3bf; border-radius: 6px; }
.dg-rank li.npc { color: var(--muted); }
.dg-tabs { margin: 10px 0; }
.dg-prog { margin: 8px 0 0; padding-left: 22px; font-family: ui-monospace, monospace; font-size: .92rem; }
/* tahta */
.dg-host .dg-hgrid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
.dg-host .dg-stage { height: 56vh; min-height: 360px; }
.dg-host .dg-chart { background: #ffffff14; }
.dg-hside { color: var(--silk); display: flex; flex-direction: column; gap: 8px; }
.dg-hside .field label { color: #cfe3da; }
.dg-hside .meta, .dg-hbelow .meta { color: #cfe3da; }
.dg-ready b { font-size: 1.8rem; color: var(--copper); }
.dg-hbelow { color: var(--silk); margin-top: 14px; }
.dg-hres { background: #ffffff; color: var(--ink); border-radius: 14px; padding: 12px 16px; margin-bottom: 14px; }
.dg-hres .meta { color: var(--muted); }
.dg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.dg-card { font: inherit; text-align: left; background: #ffffff14; border: 1px solid #ffffff2a; border-radius: 10px; padding: 8px 10px; color: var(--silk); cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.dg-card.wait { opacity: .65; }
.dg-card span { display: flex; align-items: center; gap: 6px; }
.dg-card small { opacity: .8; }
@media (max-width: 980px) { .dg-design { grid-template-columns: 1fr; } .dg-host .dg-hgrid { grid-template-columns: 1fr; } }

/* ---------- Roket Yarışı ---------- */
.mc-rocket .mode-art { background: #0b1030; }
.rk-main { max-width: 1180px; width: 100%; }
.rk-builder { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; text-align: left; }
.rk-slots { display: flex; flex-direction: column; gap: 10px; }
.rk-slot h3 { margin: 0 0 4px; font-size: 1rem; color: var(--silk); }
.rk-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.rk-opt { font: inherit; text-align: left; border: 2px solid #d3dfda; background: #fff; border-radius: 10px; padding: 6px 9px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; color: var(--ink); }
.rk-opt b { font-size: .92rem; }
.rk-opt span { font-size: .78rem; color: var(--muted); }
.rk-opt small { font-size: .78rem; color: #8a6100; font-weight: 700; }
.rk-opt.on { border-color: var(--pcb); background: #e3f1ea; box-shadow: inset 0 0 0 1px var(--pcb); }
.rk-opt:disabled { opacity: .45; cursor: not-allowed; }
.rk-side { color: var(--ink); position: sticky; top: 8px; background: #fff; border: 1px solid #d3dfda; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.rk-coins b { font-family: var(--display); font-size: 1.8rem; color: #8a6100; }
.rk-preview { height: 200px; display: flex; justify-content: center; background: linear-gradient(#bfe3f2, #e8f4ec); border-radius: 10px; }
.rk-preview svg { height: 100%; }
.rk-colors { display: flex; gap: 6px; flex-wrap: wrap; }
.rk-gauge { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; font-size: .86rem; }
.rk-gauge .rk-bar { grid-column: 1 / -1; position: relative; height: 12px; background: #e2ebe7; border-radius: 6px; overflow: visible; }
.rk-gauge .rk-bar i { display: block; height: 100%; border-radius: 6px; }
.rk-gauge .rk-bar i.ok { background: var(--pcb); } .rk-gauge .rk-bar i.warn { background: #e8a800; } .rk-gauge .rk-bar i.bad { background: #e5484d; }
.rk-gauge .rk-bar em { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); }
.rk-gauge b { grid-row: 1; grid-column: 2; font-variant-numeric: tabular-nums; }
.rk-warn { margin: 0; padding-left: 18px; font-size: .86rem; color: #8b1d22; }
.rk-status { font-size: .88rem; color: var(--muted); }
.rk-status.ok { color: var(--pcb); font-weight: 700; } .rk-status.err { color: #b3261e; font-weight: 700; }
.rk-launch { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 12px; width: 100%; }
.rk-stage { position: relative; height: 60vh; min-height: 340px; border-radius: 14px; overflow: hidden; background: #9fd3f0; }
.rk-host .rk-stage { height: 70vh; }
.rk-canvas { width: 100%; height: 100%; display: block; }
.rk-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.rk-label { position: absolute; left: 0; top: 0; background: #ffffffe6; color: var(--ink); border-radius: 8px; padding: 1px 7px; font-size: .78rem; white-space: nowrap; display: flex; gap: 6px; box-shadow: 0 1px 3px #0003; }
.rk-label.me { background: #ffd43b; font-weight: 800; }
.rk-tick { position: absolute; left: 0; top: 0; color: #fff; font-size: .75rem; font-weight: 700; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.rk-boardwrap { background: #ffffff; border-radius: 14px; padding: 10px; color: var(--ink); text-align: left; }
.rk-boardwrap h3 { margin: 0 0 6px; font-size: 1rem; }
.rk-board { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; font-size: .9rem; }
.rk-board li { display: grid; grid-template-columns: 22px 1fr auto; gap: 6px; padding: 2px 4px; border-radius: 6px; }
.rk-board li.me { background: #fff3bf; font-weight: 800; }
.rk-board .rk { color: var(--muted); }
.rk-board b { font-variant-numeric: tabular-nums; }
.rk-summary { background: #fff8e1; border: 1px solid #f1d27a; border-radius: 12px; padding: 10px 14px; margin-top: 10px; color: var(--ink); text-align: left; }
.rk-summary h3 { margin: 0 0 4px; }
.rk-hint { color: #cfe3da; font-size: 1.1rem; }
.rk-hint b { color: var(--copper); font-size: 1.6rem; }
.rk-hgrid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; color: var(--silk); }
@media (max-width: 860px) { .rk-builder, .rk-launch, .rk-hgrid { grid-template-columns: 1fr; } .rk-side { position: static; } }