/* Ödev Atölyesi - Öğretmenler Odası Network
   Tüm sınıflar "oonoa-" ile başlar; sitenin diğer bölümlerini etkilemez. */

/* ============================ Uygulama ekranı ============================ */
.oonoa-app {
  --ink: #1b2a41; --mute: #5b6b80; --line: #d8dfe8; --bg: #eef2f6; --card: #fff;
  --pri: #1f6f78; --pri-d: #175960; --acc: #f0b43c; --soft: #e6f1f2;
  box-sizing: border-box; max-width: 1280px; margin: 0 auto; padding: 18px 16px 40px;
  color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 15px; line-height: 1.45;
}
.oonoa-app *, .oonoa-app *::before, .oonoa-app *::after { box-sizing: border-box; }
.oonoa-top { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.oonoa-back { align-self: flex-start; color: var(--pri); font-weight: 600; text-decoration: none; padding: 4px 0; }
.oonoa-back::before { content: "\2190\00a0"; }
.oonoa-back:hover { text-decoration: underline; }
.oonoa-h1 { margin: 0; font-size: 30px; line-height: 1.15; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.oonoa-sub { margin: 4px 0 0; color: var(--mute); max-width: 62ch; }
.oonoa-admin { font-size: 12.5px; color: #6a4b00; background: #fff4d6; border: 1px solid #f0d28a; padding: 6px 10px; border-radius: 8px; margin-bottom: 14px; }

.oonoa-grid { display: grid; grid-template-columns: minmax(300px, 390px) minmax(0, 1fr); gap: 22px; align-items: start; }
.oonoa-panel { display: flex; flex-direction: column; gap: 14px; }
.oonoa-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.oonoa-h3 { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--ink); }
.oonoa-f { margin-bottom: 12px; }
.oonoa-l { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.oonoa-h { font-size: 12.5px; color: var(--mute); margin-top: 5px; line-height: 1.4; }
.oonoa-in { width: 100%; font: inherit; color: var(--ink); background: #fff; border: 1px solid #b9c4d1; border-radius: 8px; padding: 8px 10px; min-height: 40px; }
.oonoa-in-s { max-width: 110px; }
.oonoa-ta { min-height: 110px; resize: vertical; }
.oonoa-in:focus-visible, .oonoa-btn:focus-visible, .oonoa-seg-b:focus-visible, .oonoa-tab:focus-visible, .oonoa-ib:focus-visible, .oonoa-more summary:focus-visible, .oonoa-ck input:focus-visible {
  outline: 3px solid #f0b43c; outline-offset: 2px;
}
.oonoa-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.oonoa-seg-b { font: inherit; font-size: 14px; padding: 7px 12px; min-height: 38px; border-radius: 8px; border: 1px solid #b9c4d1; background: #fff; color: var(--ink); cursor: pointer; }
.oonoa-seg-b:hover { border-color: var(--pri); }
.oonoa-seg-b.on { background: var(--pri); border-color: var(--pri); color: #fff; font-weight: 600; }
.oonoa-cks { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.oonoa-ck { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: 14px; }
.oonoa-ck input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--pri); flex: 0 0 auto; }

.oonoa-secs { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.oonoa-sec { border: 1px solid var(--line); border-left: 4px solid var(--acc); border-radius: 10px; padding: 12px; background: #fbfcfd; }
.oonoa-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.oonoa-sec-n { font-weight: 700; font-size: 14px; }
.oonoa-sec-t { display: flex; gap: 4px; }
.oonoa-ib { font: inherit; font-size: 12px; padding: 4px 8px; border: 1px solid #c3ccd8; background: #fff; border-radius: 6px; cursor: pointer; color: var(--ink); }
.oonoa-ib:disabled { opacity: .4; cursor: default; }
.oonoa-ib-x { color: #9b2c2c; border-color: #e3b9b9; }
.oonoa-more { margin-top: 4px; }
.oonoa-more summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--pri); padding: 6px 0; }
.oonoa-more[open] summary { margin-bottom: 8px; }

.oonoa-btn { font: inherit; font-weight: 600; font-size: 14px; padding: 9px 14px; min-height: 42px; border-radius: 9px; border: 1px solid #b9c4d1; background: #fff; color: var(--ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.oonoa-btn:hover { border-color: var(--pri); color: var(--pri-d); }
.oonoa-btn-main { background: var(--pri); border-color: var(--pri); color: #fff; }
.oonoa-btn-main:hover { background: var(--pri-d); color: #fff; }
.oonoa-btn-ghost { width: 100%; border-style: dashed; }
.oonoa-coderow { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.oonoa-code { font-family: ui-monospace, Consolas, monospace; font-size: 19px; font-weight: 700; letter-spacing: .12em; background: var(--soft); padding: 6px 12px; border-radius: 8px; color: var(--pri-d); }
.oonoa-card .oonoa-btn-ghost { margin-bottom: 4px; }

.oonoa-stage { min-width: 0; }
.oonoa-bar { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--bg); padding: 8px 0 10px; }
.oonoa-tabs { display: flex; gap: 4px; background: #dde4ec; padding: 4px; border-radius: 10px; }
.oonoa-tab { font: inherit; font-size: 14px; font-weight: 600; padding: 8px 14px; border: 0; border-radius: 8px; background: transparent; color: var(--mute); cursor: pointer; }
.oonoa-tab.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(20,30,50,.15); }
.oonoa-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.oonoa-tip, .oonoa-lock { font-size: 13px; color: var(--mute); margin: 0 0 10px; }
.oonoa-lock { background: #fff4d6; border: 1px solid #f0d28a; color: #5a4000; padding: 8px 12px; border-radius: 8px; }
.oonoa-note { background: #eaf4ff; border: 1px solid #b7d6f3; color: #1d4569; font-size: 13.5px; padding: 8px 12px; border-radius: 8px; margin-bottom: 10px; }
.oonoa-err { background: #fdecec; border: 1px solid #efb9b9; color: #8a1f1f; padding: 12px 14px; border-radius: 8px; }
.oonoa-stage-body { background: #d9e0e8; border-radius: 12px; padding: 16px; overflow: hidden; display: flex; justify-content: center; }
.oonoa-preview { position: relative; max-width: 100%; }
.oonoa-preview .oonoa-pages { position: absolute; left: 0; top: 0; }

.oonoa-toast { position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 99999; max-width: 90vw; }
.oonoa-toast-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .oonoa-toast { transition: none; } }

@media (max-width: 920px) {
  .oonoa-grid { grid-template-columns: minmax(0, 1fr); }
  .oonoa-h1 { font-size: 25px; }
  .oonoa-stage { order: -1; }
  .oonoa-stage-body { padding: 8px; }
}

/* ============================ A4 sayfa (ekran + baskı) ============================ */
.oonoa-measure { position: absolute; left: -12000px; top: 0; width: 210mm; visibility: hidden; pointer-events: none; }
.oonoa-pages { display: flex; flex-direction: column; gap: 10mm; }
.oonoa-page {
  --k: 1; --ink: #14202f; --pri: #1f6f78; --acc: #f0b43c; --lt: #c4ccd6;
  box-sizing: border-box; width: 210mm; height: 296mm; padding: 10mm 11mm 7mm; background: #fff; color: #111;
  display: flex; flex-direction: column; position: relative; overflow: hidden; text-align: left; letter-spacing: 0;
  font-family: Verdana, "DejaVu Sans", Arial, sans-serif; line-height: 1.25;
  box-shadow: 0 1px 3px rgba(20,30,50,.18), 0 8px 26px rgba(20,30,50,.12);
}
.oonoa-page *, .oonoa-page *::before, .oonoa-page *::after { box-sizing: border-box; }
.oonoa-fs-big { --k: 1.15; }
.oonoa-fs-huge { --k: 1.3; }

.oonoa-ph { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: flex-start; gap: 8mm; padding-bottom: 3.5mm; margin-bottom: 4mm; border-bottom: .5mm solid var(--pri); }
.oonoa-ph-l { min-width: 0; flex: 1; }
.oonoa-brand { font-size: 7.5pt; font-weight: 700; color: var(--pri); }
.oonoa-ptitle { margin: 1mm 0 .6mm; padding: 0; font-size: 17pt; font-weight: 700; color: var(--ink); line-height: 1.15; border: 0; background: none; font-family: inherit; }
.oonoa-pmeta { font-size: 8.5pt; color: #4a5a6e; }
.oonoa-ph-r { flex: 0 0 66mm; display: flex; flex-direction: column; gap: 2.4mm; }
.oonoa-grp { align-self: flex-end; background: var(--acc); color: #2a1c00; font-weight: 700; font-size: 9pt; padding: .8mm 3mm; border-radius: 1mm; }
.oonoa-fld { display: flex; align-items: flex-end; gap: 2mm; font-size: 8.5pt; }
.oonoa-fl { white-space: nowrap; color: #333; }
.oonoa-fv { flex: 1; border-bottom: .3mm solid #222; font-weight: 700; font-size: 10pt; padding-bottom: .3mm; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.oonoa-fld-row { display: flex; gap: 4mm; align-items: flex-end; }
.oonoa-bl { display: inline-block; min-width: 20mm; height: 1.05em; border-bottom: .3mm solid #222; }
.oonoa-bl-f { flex: 1; height: 5mm; }
.oonoa-bl-d { min-width: 22mm; width: 22mm; height: 5mm; }
.oonoa-bl-s { min-width: 14mm; }
.oonoa-score { margin-left: auto; align-items: center; }
.oonoa-scb { display: inline-block; width: 16mm; height: 9mm; border: .4mm solid #222; border-radius: 1mm; }
.oonoa-ph-s { align-items: center; padding-bottom: 2mm; margin-bottom: 3mm; }
.oonoa-ptitle-s { font-size: 10pt; font-weight: 700; color: var(--ink); }
.oonoa-pwho { font-size: 9pt; font-weight: 700; }

.oonoa-pb { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.oonoa-st { flex: 0 0 auto; display: flex; align-items: baseline; gap: 4mm; margin: 1mm 0 1.5mm; padding: 1.6mm 3mm; background: #e6f1f2; border-left: 1.6mm solid var(--acc); border-radius: 0 1mm 1mm 0; }
.oonoa-st-t { font-weight: 700; font-size: 10.5pt; color: var(--ink); }
.oonoa-st-i { font-size: 8.5pt; color: #4a5a6e; }

.oonoa-row { flex: 0 0 auto; display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); }
.oonoa-fill .oonoa-row { flex: 1 0 auto; }
.oonoa-fill .oonoa-row-alt { max-height: 90mm; }
.oonoa-fill .oonoa-row-yan, .oonoa-fill .oonoa-row-tok { max-height: 32mm; }
.oonoa-fill .oonoa-row-prob { max-height: 70mm; }
.oonoa-fill.oonoa-nocap .oonoa-row { max-height: none; }
.oonoa-fill .oonoa-row-fig { max-height: 78mm; }
.oonoa-fill .oonoa-row-cmp { max-height: 34mm; }
.oonoa-fill .oonoa-row-ord { max-height: 46mm; }
.oonoa-key .oonoa-row { flex: 0 0 auto; }

.oonoa-q { display: flex; align-items: flex-start; gap: 1.6mm; padding: 2.4mm 2.6mm; border-bottom: .2mm dashed var(--lt); min-width: 0; }
.oonoa-q + .oonoa-q { border-left: .2mm dashed var(--lt); }
.oonoa-qn { flex: 0 0 auto; min-width: 5.5mm; font-size: 8pt; color: #6a7a8e; padding-top: .8mm; }
.oonoa-qb { flex: 1; min-width: 0; align-self: stretch; display: flex; flex-direction: column; }
.oonoa-k-tok, .oonoa-k-yan, .oonoa-k-cmp, .oonoa-k-ord { align-items: center; }
.oonoa-k-tok .oonoa-qb, .oonoa-k-yan .oonoa-qb, .oonoa-k-cmp .oonoa-qb, .oonoa-k-ord .oonoa-qb { justify-content: center; }
.oonoa-k-fig .oonoa-qb { justify-content: center; align-items: center; }

.oonoa-vt, .oonoa-vd, .oonoa-inl, .oonoa-dv { font-size: calc(14pt * var(--k)); font-variant-numeric: tabular-nums; }
.oonoa-vt { flex: 1 1 auto; display: flex; flex-direction: column; align-self: center; }
.oonoa-vr { display: flex; justify-content: space-between; align-items: baseline; gap: 2.5mm; line-height: 1.38; }
.oonoa-vs { width: 1.1em; font-weight: 700; text-align: left; }
.oonoa-vn { text-align: right; letter-spacing: .06em; }
.oonoa-vr-last { border-bottom: .45mm solid #111; padding-bottom: .5mm; }
.oonoa-vw { flex: 1 1 auto; min-height: 8mm; }
.oonoa-vw-m { min-height: 22mm; }

.oonoa-vd { flex: 1 1 auto; align-self: center; display: grid; grid-template-columns: auto auto; grid-template-rows: auto 1fr; }
.oonoa-vd-a { grid-row: 1 / 3; align-self: stretch; border-right: .45mm solid #111; padding: 0 3mm 0 1mm; letter-spacing: .06em; line-height: 1.38; min-height: 20mm; }
.oonoa-vd-b { padding: 0 4mm; border-bottom: .45mm solid #111; min-width: 13mm; letter-spacing: .06em; line-height: 1.38; }
.oonoa-vd-q { padding: 1mm 3mm; min-height: 9mm; font-size: 9pt; font-weight: 700; }

.oonoa-inl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1.5mm; letter-spacing: .04em; }
.oonoa-op { font-weight: 700; }
.oonoa-bx { display: inline-block; width: 1.15em; height: 1.15em; border: .35mm solid #222; border-radius: .6mm; vertical-align: -.16em; }
.oonoa-rl { font-size: 9pt; font-weight: 700; letter-spacing: 0; margin-left: 2mm; }
.oonoa-inl .oonoa-bl { min-width: 18mm; }

.oonoa-pr { flex: 1; display: flex; flex-direction: column; }
.oonoa-pt { font-size: calc(11pt * var(--k)); line-height: 1.4; }
.oonoa-pw { flex: 1 1 auto; margin-top: 2mm; min-height: 13mm; border: .25mm solid #b8c2ce; border-radius: 1mm; padding: 1.2mm 2mm; display: flex; flex-direction: column; justify-content: space-between; }
.oonoa-pw-l { font-size: 7pt; color: #7a8a9e; }
.oonoa-pa { display: flex; align-items: baseline; gap: 1.5mm; justify-content: flex-end; font-size: 9pt; }

.oonoa-pf { flex: 0 0 auto; display: grid; grid-template-columns: auto 1fr auto; gap: 3mm; margin-top: 3mm; padding-top: 1.6mm; border-top: .25mm solid #9aa7b6; font-size: 6.5pt; color: #5a6a7e; }
.oonoa-pf-l { white-space: nowrap; }
.oonoa-pf-c { text-align: center; }
.oonoa-pf-r { text-align: right; white-space: nowrap; }

.oonoa-kc { flex: 0 0 auto; border: .3mm solid #b8c2ce; border-radius: 1.5mm; padding: 3mm 4mm; margin-bottom: 3mm; }
.oonoa-kc-h { font-weight: 700; font-size: 10pt; margin-bottom: 1mm; }
.oonoa-kl-t { font-size: 8pt; color: #4a5a6e; margin-top: 1.6mm; }
.oonoa-kl-c { display: flex; flex-wrap: wrap; gap: 1mm 5mm; font-size: 10pt; font-variant-numeric: tabular-nums; margin-top: .6mm; }
.oonoa-kc-i b { color: #6a7a8e; font-weight: 600; }

.oonoa-eco .oonoa-st { background: none; border-left-color: #000; }
.oonoa-eco .oonoa-grp { background: none; border: .3mm solid #000; color: #000; }
.oonoa-eco .oonoa-ph { border-bottom-color: #000; }
.oonoa-eco .oonoa-brand { color: #000; }

/* ---- Saat ve kesir çizimleri ---- */
.oonoa-fg { display: flex; flex-direction: column; align-items: center; gap: 2.2mm; width: 100%; }
.oonoa-fg-l { display: flex; align-items: baseline; justify-content: center; gap: 1.5mm; font-size: calc(10pt * var(--k)); }
.oonoa-fg-top { align-items: center; }
.oonoa-rl-0 { margin-left: 0; }
.oonoa-bl-t { min-width: 8mm; width: 8mm; }
.oonoa-dd { font-weight: 700; }
.oonoa-dig { font-size: calc(14pt * var(--k)); font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.oonoa-clk { display: block; width: 36mm; height: 36mm; }
.oonoa-clk-f { fill: #fff; stroke: #111; stroke-width: 1.8; }
.oonoa-clk-h { stroke: #111; stroke-width: 1.6; }
.oonoa-clk-m { stroke: #555; stroke-width: .8; }
.oonoa-clk-n { font-family: Verdana, "DejaVu Sans", Arial, sans-serif; font-size: 10.5px; font-weight: 700; fill: #111; }
.oonoa-clk-hh { stroke: #111; stroke-width: 4.4; stroke-linecap: round; }
.oonoa-clk-mh { stroke: #1f6f78; stroke-width: 2.6; stroke-linecap: round; }
.oonoa-clk-c { fill: #111; }
.oonoa-eco .oonoa-clk-mh { stroke: #111; }
.oonoa-fig { display: block; }
.oonoa-fig-bar { width: 40mm; height: auto; }
.oonoa-fig-pie { width: 31mm; height: 31mm; }
.oonoa-fp { fill: #fff; stroke: #111; stroke-width: 1.4; stroke-linejoin: round; }
.oonoa-fp.on { fill: #9fcfd4; }
.oonoa-eco .oonoa-fp.on { fill: #bdbdbd; }
.oonoa-fr { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; font-size: calc(14pt * var(--k)); line-height: 1.15; font-variant-numeric: tabular-nums; }
.oonoa-fr-n { padding: 0 .5mm .5mm; text-align: center; min-width: 1.1em; }
.oonoa-fr-d { border-top: .45mm solid #111; padding: .5mm .5mm 0; text-align: center; min-width: 1.1em; }
.oonoa-fr-b { display: block; min-width: 9mm; min-height: 7mm; border: .3mm solid #222; border-radius: .6mm; }
.oonoa-fr-n.oonoa-fr-b { padding: 0; border-bottom: 0; border-radius: .6mm .6mm 0 0; }
.oonoa-fr-d.oonoa-fr-b { padding: 0; margin-top: 0; border-top: .45mm solid #222; border-radius: 0 0 .6mm .6mm; }
.oonoa-cmp { display: flex; align-items: center; justify-content: center; gap: 4mm; width: 100%; }
.oonoa-cmp-b { display: inline-block; flex: 0 0 auto; width: 10mm; height: 10mm; border: .35mm solid #222; border-radius: 50%; }

.oonoa-capnote { color: #8a5d00; background: #fff7df; border: 1px solid #f0d9a0; border-radius: 6px; padding: 5px 8px; margin-top: 4px; }

/* ---- Sayma, sayı doğrusu, çetele, rehber ---- */
.oonoa-co { display: block; width: 84mm; max-width: 100%; height: auto; }
.oonoa-cs { stroke: #111; stroke-width: .8; stroke-linejoin: round; }
.oonoa-cs0 { fill: #f4c542; } .oonoa-cs1 { fill: #7bbfc6; } .oonoa-cs2 { fill: #e58f7b; } .oonoa-cs3 { fill: #9ccc8f; }
.oonoa-eco .oonoa-cs { fill: #fff; }
.oonoa-nl { display: block; width: 88mm; max-width: 100%; height: auto; }
.oonoa-nl-l { stroke: #111; stroke-width: .9; }
.oonoa-nl-k { stroke: #111; stroke-width: .6; }
.oonoa-nl-t { font-family: Verdana, "DejaVu Sans", Arial, sans-serif; font-size: 5px; fill: #111; }
.oonoa-nl-m { fill: #c0392b; stroke: #7a1f14; stroke-width: .4; }
.oonoa-eco .oonoa-nl-m { fill: #222; }
.oonoa-nl-p { font-family: Verdana, "DejaVu Sans", Arial, sans-serif; font-size: 6px; font-weight: 700; fill: #111; }
.oonoa-tl { display: block; height: 5.2mm; width: auto; }
.oonoa-tl-v, .oonoa-tl-d { stroke: #111; stroke-width: .9; stroke-linecap: round; }
.oonoa-tbl-t { width: 82%; }
.oonoa-tbl-tl { text-align: left !important; padding: 1mm 2mm !important; }
.oonoa-gd { padding: 10px 12px; }
.oonoa-gd-s { cursor: pointer; font-weight: 700; }
.oonoa-gd-h { margin: 12px 0 4px; font-size: 13px; }
.oonoa-gd-l { margin: 0 0 6px 18px; padding: 0; font-size: 12.5px; line-height: 1.45; }
.oonoa-gd-g { margin: 3px 0; font-size: 12.5px; }
.oonoa-gd-g > summary { cursor: pointer; font-weight: 600; }
.oonoa-gd-p { margin: 4px 0 4px 10px; font-size: 12px; line-height: 1.4; }

/* ---- 7-8. sınıf: çizgi grafiği ---- */
.oonoa-ln { display: block; width: 100mm; max-width: 100%; height: auto; }
.oonoa-ln-h { font-family: Verdana, "DejaVu Sans", Arial, sans-serif; font-size: 6px; font-weight: 700; fill: #111; }
.oonoa-ln-u, .oonoa-ln-yl, .oonoa-ln-xl { font-family: Verdana, "DejaVu Sans", Arial, sans-serif; font-size: 5px; fill: #222; }
.oonoa-ln-g { stroke: #c9d3dd; stroke-width: .35; }
.oonoa-ln-ax { stroke: #111; stroke-width: .7; }
.oonoa-ln-l { stroke: #1f6f78; stroke-width: 1.1; stroke-linejoin: round; }
.oonoa-ln-p { fill: #fff; stroke: #1f6f78; stroke-width: 1; }
.oonoa-eco .oonoa-ln-l, .oonoa-eco .oonoa-ln-p { stroke: #111; }

/* ---- 5-6. sınıf: daire grafiği ---- */
.oonoa-pie { display: block; width: 92mm; max-width: 100%; height: auto; }
.oonoa-pie-s { stroke: #111; stroke-width: .7; stroke-linejoin: round; }
.oonoa-pie-s0 { fill: #f4c542; } .oonoa-pie-s1 { fill: #7bbfc6; } .oonoa-pie-s2 { fill: #e58f7b; } .oonoa-pie-s3 { fill: #9ccc8f; } .oonoa-pie-s4 { fill: #b9a3d9; }
.oonoa-eco .oonoa-pie-s { fill: #fff; }
.oonoa-pie-t { font-family: Verdana, "DejaVu Sans", Arial, sans-serif; font-size: 5.6px; font-weight: 700; fill: #111; }

/* ---- İlkokul 2: sıra, para ---- */
.oonoa-or { display: block; height: auto; max-width: 100%; }
.oonoa-mny { display: block; width: 78mm; max-width: 100%; height: auto; }
.oonoa-mn { stroke: #111; stroke-width: .6; }
.oonoa-mn1 { fill: #f1d27a; } .oonoa-mn5 { fill: #d9c1a3; } .oonoa-mn10 { fill: #eba8a0; } .oonoa-mn20 { fill: #a9d4a4; } .oonoa-mn50 { fill: #f2c48d; } .oonoa-mn100 { fill: #9cc3e8; } .oonoa-mn200 { fill: #e6a6c8; }
.oonoa-eco .oonoa-mn { fill: #fff; }
.oonoa-mn-c { font-size: 4.6px !important; }
.oonoa-mn-c3 { font-size: 5.2px !important; }
.oonoa-mn-t { font-family: Verdana, "DejaVu Sans", Arial, sans-serif; font-size: 6.2px; font-weight: 700; fill: #111; }

/* ---- Üslü ve köklü sayılar ---- */
.oonoa-up { display: inline-flex; align-items: flex-start; }
.oonoa-ps { font-size: .62em; line-height: 1; margin-left: .06em; align-self: flex-start; position: relative; top: .1em; vertical-align: top; }
.oonoa-upe { font-size: .62em; line-height: 1; margin-left: .06em; position: relative; top: -.12em; }
.oonoa-sqw { display: inline-flex; align-items: flex-end; }
.oonoa-sqs { font-size: 1.12em; line-height: 1; }
.oonoa-sqv { border-top: .38mm solid currentColor; padding: .15mm .7mm 0 .5mm; margin-left: -.15mm; line-height: 1.05; }

/* ---- Geometri şekilleri ve veri grafikleri ---- */
.oonoa-geo { display: block; width: 46mm; height: auto; }
.oonoa-geo-p { fill: #e6f1f2; stroke: #111; stroke-width: 1.3; stroke-linejoin: round; }
.oonoa-geo-g { stroke: #7fa7ae; stroke-width: .45; }
.oonoa-geo-d { stroke: #111; stroke-width: .7; }
.oonoa-geo-l { stroke: #111; stroke-width: 1.3; stroke-linecap: round; }
.oonoa-geo-a { fill: none; stroke: #111; stroke-width: .8; }
.oonoa-geo-r { stroke: #111; stroke-width: .7; }
.oonoa-geo-dot { fill: #111; }
.oonoa-geo-e { stroke: #777; stroke-width: .4; stroke-dasharray: 1.2 1.2; }
.oonoa-geo-t { font-family: Verdana, "DejaVu Sans", Arial, sans-serif; font-size: 7.2px; font-weight: 700; fill: #111; paint-order: stroke fill; stroke: #fff; stroke-width: 2.2px; stroke-linejoin: round; }
.oonoa-eco .oonoa-geo-p { fill: #fff; }
.oonoa-gcap { flex-wrap: wrap; justify-content: center; text-align: center; line-height: 1.3; }
.oonoa-gct { font-size: calc(8.6pt * var(--k)); }
.oonoa-dc { gap: 1.6mm; }
.oonoa-dt { font-weight: 700; font-size: calc(9pt * var(--k)); text-align: center; }
.oonoa-dq { align-self: flex-start; font-size: calc(10pt * var(--k)); line-height: 1.35; }
.oonoa-da { align-self: flex-end; }
.oonoa-bl-l2 { min-width: 30mm; }
.oonoa-chart { display: block; width: 84mm; height: auto; }
.oonoa-ch-g { stroke: #c9d1da; stroke-width: .4; }
.oonoa-ch-ax { stroke: #111; stroke-width: .8; }
.oonoa-ch-b { fill: #7bbfc6; stroke: #1f6f78; stroke-width: .6; }
.oonoa-eco .oonoa-ch-b { fill: #bdbdbd; stroke: #222; }
.oonoa-ch-t { font-family: Verdana, "DejaVu Sans", Arial, sans-serif; font-size: 4.4px; fill: #222; }
.oonoa-ch-v { font-family: Verdana, "DejaVu Sans", Arial, sans-serif; font-size: 4.8px; font-weight: 700; fill: #111; }
.oonoa-ch-c { font-family: Verdana, "DejaVu Sans", Arial, sans-serif; font-size: 4.3px; fill: #111; }
.oonoa-tbl { border-collapse: collapse; font-size: calc(9.5pt * var(--k)); width: 72%; }
.oonoa-tbl-c { text-align: left !important; font-weight: 600; }
.oonoa-tbl th, .oonoa-tbl td { border: .3mm solid #222; padding: 1.3mm 2mm; text-align: center; }
.oonoa-tbl th { background: #e6f1f2; font-weight: 700; }
.oonoa-eco .oonoa-tbl th { background: #fff; }

/* ---- Ondalık sayılar ve kesirlerle işlemler ---- */
.oonoa-inl-f { align-items: center; }
.oonoa-mx { display: inline-flex; align-items: center; gap: 1.4mm; }
.oonoa-dv { flex: 1 1 auto; align-self: center; display: grid; grid-template-columns: auto auto auto auto; align-content: start; line-height: 1.38; letter-spacing: .06em; }
.oonoa-dv-s { font-weight: 700; padding-right: 2.2mm; text-align: left; }
.oonoa-dv-i { text-align: right; }
.oonoa-dv-c { font-weight: 700; }
.oonoa-dv-f { text-align: left; min-width: 3.2ch; }
.oonoa-dv-line { grid-column: 1 / -1; border-top: .45mm solid #111; margin-top: .6mm; }
.oonoa-dv-w { grid-column: 1 / -1; min-height: 9mm; }

/* ---- Sayı alıştırmaları ---- */
.oonoa-wd { font-size: calc(12pt * var(--k)); font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.oonoa-lbl { flex: 1 0 100%; font-size: 8.5pt; color: #4a5a6e; letter-spacing: 0; }
.oonoa-opt { display: inline-flex; align-items: center; gap: 1.2mm; margin-left: 3mm; font-size: calc(10pt * var(--k)); letter-spacing: 0; }
.oonoa-opt::before { content: ""; width: 3.8mm; height: 3.8mm; border: .35mm solid #222; border-radius: 50%; }
.oonoa-bl-l { flex: 1 0 100%; height: 9mm; min-width: 0; }
.oonoa-u { text-decoration: underline; text-decoration-thickness: .45mm; text-underline-offset: .2em; }
.oonoa-cmp-n { font-size: calc(14pt * var(--k)); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.oonoa-ord { display: flex; flex-direction: column; gap: 2.2mm; width: 100%; }
.oonoa-ord-p { font-size: 8.5pt; color: #4a5a6e; }
.oonoa-ord-n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1mm 2.5mm; font-size: calc(13pt * var(--k)); font-variant-numeric: tabular-nums; }
.oonoa-ord-b { display: flex; flex-wrap: wrap; align-items: center; gap: 1mm 2.5mm; font-size: calc(13pt * var(--k)); }
.oonoa-bx-w { height: 1.4em; }

/* ---- İpucu kutusu, motivasyon, veli notu ---- */
.oonoa-hint { flex: 0 0 auto; margin: 0 0 2mm; padding: 1.8mm 3mm 2mm; border: .3mm dashed #1f6f78; border-radius: 1.2mm; background: #f4fafa; font-size: 8.3pt; line-height: 1.4; }
.oonoa-hint-t { font-weight: 700; font-size: 8.6pt; color: #1f6f78; }
.oonoa-hint-q { font-weight: 700; font-size: 10pt; margin: .5mm 0 .8mm; font-variant-numeric: tabular-nums; }
.oonoa-hint-l { color: #222; }
.oonoa-hint-l > div { break-inside: avoid; font-variant-numeric: tabular-nums; }
.oonoa-hint-l { columns: 2; column-gap: 6mm; }
.oonoa-hint-1 { columns: auto; }
.oonoa-eco .oonoa-hint { background: none; border-color: #555; }
.oonoa-eco .oonoa-hint-t { color: #000; }
.oonoa-end { flex: 0 0 auto; margin-top: auto; padding-top: 3mm; display: flex; flex-direction: column; gap: 2.4mm; }
.oonoa-mot { display: flex; justify-content: space-between; align-items: center; gap: 6mm; padding: 2mm 3mm; border: .3mm solid #c4ccd6; border-radius: 1.2mm; font-size: 9.5pt; }
.oonoa-mot-g { flex: 1; display: flex; align-items: flex-end; gap: 2mm; min-width: 0; }
.oonoa-stars { display: flex; gap: 1.6mm; flex: 0 0 auto; }
.oonoa-star { width: 7.4mm; height: 7.4mm; fill: none; stroke: #c98a00; stroke-width: 1.4; stroke-linejoin: round; }
.oonoa-eco .oonoa-star { stroke: #222; }
.oonoa-par { padding: 2mm 3mm 2.6mm; border: .3mm solid #c4ccd6; border-radius: 1.2mm; font-size: 8.8pt; }
.oonoa-par-t { line-height: 1.4; color: #333; margin-bottom: 2.2mm; }
.oonoa-par-r { display: flex; align-items: flex-end; gap: 2mm; margin-top: 2.6mm; }
.oonoa-par-r .oonoa-bl-f { flex: 1; }

/* ---- Adım adım çözümlü cevap anahtarı ---- */
.oonoa-kh { flex: 0 0 auto; margin: 0 0 1.5mm; padding-bottom: 1mm; border-bottom: .3mm solid #9aa7b6; font-size: 11pt; font-weight: 700; color: var(--ink); }
.oonoa-key .oonoa-kl { margin: 1mm 0 3mm; }
.oonoa-sr { flex: 0 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 4mm; margin-bottom: 2.4mm; }
.oonoa-sb { min-width: 0; padding: 1.8mm 2.4mm; border: .25mm solid #c4ccd6; border-radius: 1.2mm; font-size: 8.4pt; line-height: 1.38; }
.oonoa-sb-e { border-color: transparent; }
.oonoa-sb-h { font-size: 10.5pt; font-weight: 700; color: var(--ink); }
.oonoa-sb-h b { color: #6a7a8e; font-weight: 600; }
.oonoa-sb-q { color: #4a5a6e; margin-bottom: .8mm; font-variant-numeric: tabular-nums; }
.oonoa-sl { color: #222; padding-left: 2.2mm; text-indent: -2.2mm; font-variant-numeric: tabular-nums; }
.oonoa-sl::before { content: "\2022\00a0"; color: #1f6f78; }
.oonoa-sl-k { color: #5a6a7e; }

/* ---- Hatalı soru bildir ---- */
.oonoa-page .oonoa-q { position: relative; }
.oonoa-rpt { position: absolute; top: 7.2mm; left: 1.2mm; width: 5mm; height: 5mm; padding: 0; border: .3mm solid #c98a00; border-radius: 50%; background: #fff7df; color: #8a5d00; font: 700 7.5pt/1 Verdana, Arial, sans-serif; cursor: pointer; opacity: 0; transition: opacity .15s; }
.oonoa-q:hover .oonoa-rpt, .oonoa-q:focus-within .oonoa-rpt, .oonoa-rpt:focus-visible { opacity: 1; }
@media (hover: none) { .oonoa-rpt { opacity: .55; } }
@media (max-width: 920px) { .oonoa-rpt { width: 6.5mm; height: 6.5mm; font-size: 9pt; } .oonoa-rpt::after { content: ''; position: absolute; inset: -14px; border-radius: 50%; } }
.oonoa-rpt:focus-visible { outline: 3px solid #f0b43c; outline-offset: 1px; }
.oonoa-ov { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 25, 40, .55); box-sizing: border-box;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 15px; line-height: 1.45; color: #1b2a41; }
.oonoa-ov *, .oonoa-ov *::before, .oonoa-ov *::after { box-sizing: border-box; }
.oonoa-dlg { background: #fff; border-radius: 14px; max-width: 470px; width: 100%; max-height: 92vh; overflow: auto; padding: 20px; box-shadow: 0 12px 40px rgba(0, 0, 0, .3); }
.oonoa-dlg-t { margin: 0 0 12px; font-size: 18px; font-weight: 800; }
.oonoa-dlg-q { background: #eef2f6; border-radius: 9px; padding: 10px 12px; margin-bottom: 12px; font-size: 14px; word-break: break-word; }
.oonoa-dlg-qa { color: #5b6b80; margin-top: 4px; }
.oonoa-dlg-fs { border: 0; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.oonoa-dlg-fs legend { padding: 0; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.oonoa-ov .oonoa-ck { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: 14px; }
.oonoa-ov .oonoa-ck input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: #1f6f78; flex: 0 0 auto; }
.oonoa-ov .oonoa-in { width: 100%; font: inherit; color: #1b2a41; background: #fff; border: 1px solid #b9c4d1; border-radius: 8px; padding: 8px 10px; }
.oonoa-ov .oonoa-ta { min-height: 76px; resize: vertical; }
.oonoa-dlg-m { min-height: 22px; font-size: 13.5px; color: #8a1f1f; margin: 6px 0; }
.oonoa-dlg-b { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.oonoa-ov .oonoa-btn { font: inherit; font-weight: 600; font-size: 14px; padding: 9px 14px; min-height: 42px; border-radius: 9px; border: 1px solid #b9c4d1; background: #fff; color: #1b2a41; cursor: pointer; }
.oonoa-ov .oonoa-btn-main { background: #1f6f78; border-color: #1f6f78; color: #fff; }
.oonoa-ov .oonoa-btn:disabled { opacity: .45; cursor: default; }
.oonoa-ov input:focus-visible, .oonoa-ov textarea:focus-visible, .oonoa-ov button:focus-visible { outline: 3px solid #f0b43c; outline-offset: 2px; }

/* ============================ Yazdırma ============================ */
#oonoa-print-root { display: none; }
@media print {
  @page { size: A4 portrait; margin: 0; }
  html, body.oonoa-printing { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  body.oonoa-printing > *:not(#oonoa-print-root) { display: none !important; }
  body.oonoa-printing #oonoa-print-root { display: block !important; }
  #oonoa-print-root .oonoa-page {
    box-shadow: none; margin: 0; page-break-after: always; break-after: page; overflow: hidden;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  #oonoa-print-root .oonoa-page:last-child { page-break-after: auto; break-after: auto; }
  .oonoa-rpt, .oonoa-ov { display: none !important; }
}

/* ---- Üyelik hakları ---- */
.oonoa-hak { border: 1px solid #b9d9dd; background: #f3fafb; }
.oonoa-hak-p { margin: 4px 0 8px; font-size: 13px; line-height: 1.5; color: #28434a; }
.oonoa-hak-l { margin: 0 0 8px; padding-left: 18px; font-size: 13px; line-height: 1.6; color: #28434a; }
.oonoa-hak-b { display: inline-block; margin-top: 4px; text-decoration: none; }
.oonoa-hakline { margin-top: 6px; }
.oonoa-lnk { color: #1f6f78; font-weight: 700; }
@media print { .oonoa-hak, .oonoa-hakline { display: none !important; } }

/* ---- Network panelinin içinde (üst çubuk ve sol menü yanında) ---- */
.oonoa-app.oonoa-embedded { max-width: none; padding: 0 0 28px; }
.oonoa-embedded .oonoa-top { margin-bottom: 12px; }
.oonoa-embedded .oonoa-h1 { font-size: 26px; }
@media (max-width: 1240px) {
  .oonoa-embedded .oonoa-grid { grid-template-columns: minmax(0, 1fr); }
  .oonoa-embedded .oonoa-stage { order: -1; }
}

/* ---- Türkçe dersi soruları ---- */
.oonoa-tq { flex: 1; display: flex; flex-direction: column; gap: 1.2mm; }
.oonoa-tq-s { font-size: calc(11pt * var(--k)); line-height: 1.4; }
.oonoa-tq-l1 { font-weight: 600; }
.oonoa-tq-l2 { margin-top: .6mm; font-weight: 700; letter-spacing: .01em; }
.oonoa-tq-o { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1mm 5mm; font-size: calc(11pt * var(--k)); line-height: 1.35; }
.oonoa-tq-o1 { grid-template-columns: minmax(0, 1fr); }
.oonoa-tq-op b { margin-right: .6mm; }
.oonoa-tq-a { margin-top: auto; }
.oonoa-tq-p { font-size: calc(10.5pt * var(--k)); line-height: 1.45; padding: 1.4mm 2.2mm; margin-bottom: .6mm; border-left: .8mm solid #9fb4c8; background: #f3f6f9; border-radius: 0 1mm 1mm 0; }
/* ---- Soru biçimleri: doğru-yanlış, boşluk doldurma, eşleştirme ---- */
.oonoa-tq-dy { display: flex; gap: 8mm; font-size: calc(11pt * var(--k)); margin-top: auto; }
.oonoa-dy-b { white-space: nowrap; }
.oonoa-tq-bank { font-size: calc(10.5pt * var(--k)); color: #2b3a4c; font-style: italic; }
.oonoa-tq .oonoa-bl-l { min-width: 26mm; }
.oonoa-es { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2mm 8mm; font-size: calc(11pt * var(--k)); line-height: 1.4; }
.oonoa-es-l, .oonoa-es-r { display: flex; flex-direction: column; gap: 1.6mm; }
.oonoa-es-li { display: flex; gap: 1.6mm; align-items: baseline; }
.oonoa-es-bx { flex: 0 0 auto; width: 1.6em; }
.oonoa-es-ri { padding-left: 2mm; border-left: .4mm dashed #9fb4c8; }
.oonoa-solve .oonoa-es-bx { display: none; }
.oonoa-sv-es { display: flex; flex-direction: column; gap: 8px; }
.oonoa-sv-es-r { display: flex; gap: 8px; align-items: center; font-size: calc(11pt * var(--k)); }
.oonoa-sv-es-s { flex: 1 1 auto; min-height: 44px; font-size: calc(10.5pt * var(--k)); }
.oonoa-sv-es-s.oonoa-sv-good { border-color: #1b7f3b; background: #dff3e5; } .oonoa-sv-es-s.oonoa-sv-wrong { border-color: #b3261e; background: #fadbd8; }
@media (max-width: 640px) { .oonoa-solve .oonoa-es { grid-template-columns: minmax(0, 1fr); } }
.oonoa-sr-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1mm 5mm; font-size: calc(11pt * var(--k)); line-height: 1.35; }
.oonoa-sr-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5mm; margin-top: auto; }
.oonoa-sr-bx { width: 1.6em; height: 1.6em; }
.oonoa-sr-ar { color: #5b6b80; }
.oonoa-sv-srl { font-size: calc(11pt * var(--k)); font-weight: 600; }

/* ---- Tam ekran ve ekranda çözme ---- */
#oonoa-root.oonoa-full { position: fixed; inset: 0; z-index: 2147483000; overflow: auto; background: #fff; padding: 10px; box-sizing: border-box; }
#oonoa-root:fullscreen { overflow: auto; background: #fff; padding: 10px; box-sizing: border-box; }
#oonoa-root:-webkit-full-screen { overflow: auto; background: #fff; padding: 10px; box-sizing: border-box; }
.oonoa-btn-solve { background: #0e7a5f; border-color: #0e7a5f; color: #fff; }
.oonoa-btn-solve:hover { background: #0b6650; }
.oonoa-solve, .oonoa-solve * { box-sizing: border-box; }
.oonoa-solve { z-index: 2147483000 !important; overscroll-behavior: contain; --ink: #1b2a41; --mute: #5b6b80; --line: #d8dfe8; --bg: #eef2f6; --card: #fff; --pri: #1f6f78; --pri-d: #175960; --acc: #f0b43c; --soft: #e6f1f2; --lt: #c4ccd6; --k: 1.2; position: fixed; inset: 0; z-index: 5; overflow: auto; background: #eef2f6; color: #1b2430; font-family: inherit; }
.oonoa-solve.oonoa-sz-big { --k: 1.6; } .oonoa-solve.oonoa-sz-huge { --k: 2.1; }
.oonoa-sv-bar { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 16px; background: #fff; border-bottom: 2px solid #0e7a5f; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.oonoa-sv-t { font-weight: 700; font-size: 1.15rem; }
.oonoa-sv-p { font-size: 1rem; color: #3c4a5a; flex: 1 1 auto; }
.oonoa-sv-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.oonoa-sv-sel { max-width: 14rem; }
.oonoa-sv-body { padding: 14px 16px 60px; max-width: 1500px; margin: 0 auto; }
.oonoa-sv-sec { margin: 18px 0 8px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; border-left: 6px solid #f1b24a; padding: 6px 12px; background: #fff; border-radius: 0 8px 8px 0; }
.oonoa-sv-sec-t { font-weight: 700; font-size: 1.1rem; } .oonoa-sv-sec-i { color: #5a6877; font-size: .95rem; }
.oonoa-sv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap: 14px; }
.oonoa-sz-big .oonoa-sv-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 32rem), 1fr)); }
.oonoa-sz-huge .oonoa-sv-grid { grid-template-columns: minmax(0, 1fr); }
.oonoa-svc { background: #fff; border: 2px solid #d3dce6; border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.oonoa-svc-ok { border-color: #1b7f3b; background: #f1faf4; } .oonoa-svc-bad { border-color: #b3261e; background: #fdf3f2; }
.oonoa-solve .oonoa-pw, .oonoa-solve .oonoa-pa, .oonoa-solve .oonoa-tq-a, .oonoa-solve .oonoa-rpt { display: none !important; }
.oonoa-solve .oonoa-q { display: block; border: 0; padding: 0; min-height: 0; }
.oonoa-solve .oonoa-qn { font-weight: 700; margin-right: 6px; font-size: calc(11pt * var(--k)); }
.oonoa-solve .oonoa-qb { display: inline-block; vertical-align: top; max-width: 100%; }
.oonoa-sv-opts { display: grid; gap: 8px; margin-top: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.oonoa-sv-opt { text-align: left; font: inherit; font-size: calc(11pt * var(--k)); padding: 10px 12px; border: 2px solid #b8c4d2; border-radius: 10px; background: #fff; color: inherit; cursor: pointer; min-height: 44px; }
.oonoa-sv-opt:hover:not(:disabled) { border-color: #0e7a5f; background: #f1f8f6; }
.oonoa-sv-opt:disabled { cursor: default; opacity: 1; }
.oonoa-sv-opt.oonoa-sv-good { border-color: #1b7f3b; background: #dff3e5; font-weight: 700; }
.oonoa-sv-opt.oonoa-sv-wrong { border-color: #b3261e; background: #fadbd8; }
.oonoa-sv-row { display: flex; gap: 8px; flex-wrap: wrap; }
.oonoa-sv-in { flex: 1 1 10rem; font-size: calc(11pt * var(--k)); min-height: 44px; }
.oonoa-svc-m { font-size: calc(10.5pt * var(--k)); min-height: 1.2em; }
.oonoa-svc-ok .oonoa-svc-m b { color: #1b7f3b; } .oonoa-svc-bad .oonoa-svc-m b { color: #b3261e; }
.oonoa-sv-sum { position: fixed; inset: 0; z-index: 10; background: rgba(20,30,45,.55); display: flex; align-items: center; justify-content: center; padding: 14px; }
.oonoa-sv-sumb { background: #fff; border-radius: 14px; padding: 18px 22px; max-width: 760px; width: 100%; max-height: 90vh; overflow: auto; font-size: 1.05rem; }
.oonoa-sv-sumh { margin: 0 0 8px; font-size: 1.4rem; } .oonoa-sv-sumh2 { margin: 14px 0 6px; font-size: 1.1rem; }
.oonoa-sv-sums { display: flex; flex-wrap: wrap; gap: 10px; }
.oonoa-sv-n { background: #eef2f6; border-radius: 999px; padding: 6px 14px; font-weight: 700; } .oonoa-sv-n-ok { background: #dff3e5; color: #1b7f3b; } .oonoa-sv-n-bad { background: #fadbd8; color: #b3261e; }
.oonoa-sv-note { margin: 10px 0 0; color: #3c4a5a; }
.oonoa-sv-wl { margin: 0; padding-left: 1.2rem; display: grid; gap: 8px; } .oonoa-sv-w1 { color: #b3261e; } .oonoa-sv-w2 { color: #1b7f3b; font-weight: 700; }
.oonoa-sv-sumacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
@media (max-width: 600px) { .oonoa-sv-bar { padding: 8px 10px; } .oonoa-sv-body { padding: 10px 8px 60px; } .oonoa-solve.oonoa-sz-big { --k: 1.35; } .oonoa-solve.oonoa-sz-huge { --k: 1.6; } }
@media print { .oonoa-solve { display: none !important; } }
.oonoa-solve .oonoa-btn:disabled { display: none; }
.oonoa-solve .oonoa-btn { font-size: 1rem; min-height: 40px; }
@media (min-width: 700px) {
  .oonoa-solve.oonoa-sz-big .oonoa-qb svg, .oonoa-solve.oonoa-sz-big .oonoa-qb table { zoom: 1.35; }
  .oonoa-solve.oonoa-sz-huge .oonoa-qb svg, .oonoa-solve.oonoa-sz-huge .oonoa-qb table { zoom: 1.8; }
}
.oonoa-sv-sum { z-index: 2147483001; }
/* ============================ Nebula görünümü ============================
   Yalnızca ".oonoa-nb" sınıfı varken geçerlidir (ayarlardaki "Nebula görünümü" anahtarı).
   A4 kâğıt (.oonoa-page), çözme ekranı ve diyaloglar kendi renk değişkenlerini taşır; bu blok onlara dokunmaz. */
.oonoa-app.oonoa-nb {
  --ink: #16213b; --mute: #4f5d7c; --line: rgba(40, 60, 110, .16); --bg: #f1f4fb; --card: #fff;
  --pri: #4b57dc; --pri-d: #3a45c0; --acc: #f0b43c; --soft: #e9edff;
  --nb-brand: linear-gradient(125deg, #4b57dc 0%, #2a74b8 100%);
  --nb-shadow: 0 10px 30px rgba(32, 48, 100, .10);
  --nb-field: #fff; --nb-fieldline: #b7c2de; --nb-tabs: #e3e8f6; --nb-stage: #dde4f4; --nb-sec: #f7f9ff;
}
.oonoa-nb .oonoa-h1 { font-size: 32px; letter-spacing: -0.02em; }
.oonoa-nb .oonoa-top { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 10px 18px; }
.oonoa-nb .oonoa-back { flex: 1 0 100%; }
.oonoa-nb .oonoa-top-t { flex: 1 1 300px; }
.oonoa-modes { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.oonoa-mode { font: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; min-height: 38px; border-radius: 999px; border: 1px solid var(--nb-fieldline); background: var(--nb-field); color: var(--ink); cursor: pointer; }
.oonoa-mode:hover { border-color: var(--pri); }
.oonoa-mode[aria-pressed="true"] { background: var(--nb-brand); border-color: transparent; color: #fff; }
.oonoa-mode:focus-visible { outline: 3px solid #f0b43c; outline-offset: 2px; }

.oonoa-nb .oonoa-card { border-radius: 18px; border-color: var(--line); box-shadow: var(--nb-shadow); background: var(--card); }
.oonoa-nb .oonoa-h3 { font-size: 17px; letter-spacing: -0.01em; }
.oonoa-nb .oonoa-in { border-radius: 12px; background: var(--nb-field); border-color: var(--nb-fieldline); color: var(--ink); }
.oonoa-nb .oonoa-seg-b { border-radius: 999px; background: var(--nb-field); border-color: var(--nb-fieldline); color: var(--ink); }
.oonoa-nb .oonoa-seg-b:hover { border-color: var(--pri); }
.oonoa-nb .oonoa-seg-b.on { background: var(--nb-brand); border-color: transparent; color: #fff; }
.oonoa-nb .oonoa-sec { border-radius: 14px; background: var(--nb-sec); border-color: var(--line); }
.oonoa-nb .oonoa-ib { background: var(--nb-field); border-color: var(--nb-fieldline); color: var(--ink); border-radius: 8px; }
.oonoa-nb .oonoa-btn { border-radius: 12px; background: var(--nb-field); border-color: var(--nb-fieldline); color: var(--ink); }
.oonoa-nb .oonoa-btn:hover { border-color: var(--pri); color: var(--pri-d); }
.oonoa-nb .oonoa-btn-main { background: var(--nb-brand); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(58, 69, 192, .28); }
.oonoa-nb .oonoa-btn-main:hover { background: var(--nb-brand); color: #fff; filter: brightness(1.08); }
.oonoa-nb .oonoa-btn-solve { background: #0e7a5f; border-color: #0e7a5f; color: #fff; }
.oonoa-nb .oonoa-btn-solve:hover { background: #0b6650; color: #fff; }
.oonoa-nb .oonoa-code { background: var(--soft); color: var(--ink); }
.oonoa-nb .oonoa-tabs { background: var(--nb-tabs); border-radius: 14px; }
.oonoa-nb .oonoa-tab { border-radius: 10px; }
.oonoa-nb .oonoa-tab.on { background: var(--card); color: var(--ink); }
.oonoa-nb .oonoa-bar { background: var(--bg); }
.oonoa-nb .oonoa-stage-body { background: var(--nb-stage); border-radius: 18px; box-shadow: inset 0 2px 10px rgba(32, 48, 100, .08); }

/* ---- Koyu tema ---- */
.oonoa-app.oonoa-nb.oonoa-dark {
  --ink: #eef2ff; --mute: #a9b7d8; --line: rgba(200, 215, 255, .18); --bg: #0b1326; --card: #131e36;
  --pri: #a5adff; --pri-d: #c9ceff; --soft: #1f2e52;
  --nb-shadow: 0 10px 30px rgba(0, 3, 18, .40);
  --nb-field: #0e1a31; --nb-fieldline: #3a4d7a; --nb-tabs: #0e1a31; --nb-stage: #0a1121; --nb-sec: #162540;
  background: var(--bg); border-radius: 24px;
}
.oonoa-dark .oonoa-btn-main, .oonoa-dark .oonoa-seg-b.on, .oonoa-dark .oonoa-mode[aria-pressed="true"] { color: #fff; }
.oonoa-dark .oonoa-ib-x { color: #ffb4b4; border-color: #7b3030; }
.oonoa-dark .oonoa-lock, .oonoa-dark .oonoa-admin { background: #3a2e0f; border-color: #6b5517; color: #ffe7a8; }
.oonoa-dark .oonoa-note { background: #13304a; border-color: #24557f; color: #cfe6ff; }
.oonoa-dark .oonoa-err { background: #4a1a1a; border-color: #7b3030; color: #ffd0d0; }
.oonoa-dark .oonoa-hak { background: #12303a; border-color: #25535f; }
.oonoa-dark .oonoa-hak-p, .oonoa-dark .oonoa-hak-l { color: #cfe6ea; }
.oonoa-dark .oonoa-lnk { color: #8ad7e6; }
.oonoa-dark .oonoa-toast { background: #2a3a63; color: #fff; }
.oonoa-dark .oonoa-back, .oonoa-dark .oonoa-more summary { color: var(--pri); }

/* ---- Büyük yazı (1-4. sınıf için kolay okuma) ve akıllı tahta ---- */
.oonoa-nb.oonoa-big, .oonoa-nb.oonoa-board { font-size: 17px; }
.oonoa-nb.oonoa-big .oonoa-btn, .oonoa-nb.oonoa-board .oonoa-btn { font-size: 16px; min-height: 48px; }
.oonoa-nb.oonoa-big .oonoa-seg-b, .oonoa-nb.oonoa-board .oonoa-seg-b { font-size: 16px; min-height: 46px; padding: 8px 15px; }
.oonoa-nb.oonoa-big .oonoa-in, .oonoa-nb.oonoa-board .oonoa-in { font-size: 16px; min-height: 48px; }
.oonoa-nb.oonoa-big .oonoa-l, .oonoa-nb.oonoa-board .oonoa-l { font-size: 15px; }
.oonoa-nb.oonoa-big .oonoa-h, .oonoa-nb.oonoa-board .oonoa-h { font-size: 14px; }
.oonoa-nb.oonoa-big .oonoa-h3, .oonoa-nb.oonoa-board .oonoa-h3 { font-size: 19px; }
.oonoa-nb.oonoa-big .oonoa-tab, .oonoa-nb.oonoa-board .oonoa-tab { font-size: 16px; padding: 10px 16px; }
.oonoa-nb.oonoa-big .oonoa-ck, .oonoa-nb.oonoa-board .oonoa-ck { font-size: 16px; }
.oonoa-nb.oonoa-big .oonoa-mode, .oonoa-nb.oonoa-board .oonoa-mode { font-size: 15px; min-height: 44px; }
.oonoa-nb.oonoa-board { max-width: none; }
.oonoa-nb.oonoa-board .oonoa-grid { grid-template-columns: minmax(0, 1fr); }
.oonoa-nb.oonoa-board .oonoa-stage { order: -1; }
.oonoa-nb.oonoa-board .oonoa-btn { min-height: 54px; font-size: 17px; }
@media (max-width: 600px) { .oonoa-nb .oonoa-h1 { font-size: 26px; } .oonoa-modes { margin-left: 0; } }

/* Kalem (Ekranda çöz) */
.oonoa-ink { position: fixed; left: 0; top: 0; z-index: 2; touch-action: none; cursor: crosshair; pointer-events: none; }
.oonoa-ink-tb { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 4; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 14px; max-width: calc(100% - 20px); padding: 10px 14px; background: #fff; border: 2px solid #1f6f78; border-radius: 16px; box-shadow: 0 6px 22px rgba(0,0,0,.28); }
.oonoa-ink-g { display: flex; align-items: center; gap: 6px; }
.oonoa-ink-b { font: inherit; font-weight: 700; font-size: 15px; min-height: 44px; padding: 8px 14px; border-radius: 10px; border: 2px solid #b9c4d1; background: #fff; color: #1b2a41; cursor: pointer; }
.oonoa-ink-b.oonoa-ink-act { background: #1f6f78; border-color: #1f6f78; color: #fff; }
.oonoa-ink-b.oonoa-ink-off { border-color: #c0392b; color: #c0392b; }
.oonoa-ink-c { width: 40px; height: 40px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #b9c4d1; cursor: pointer; padding: 0; }
.oonoa-ink-c.oonoa-ink-act { box-shadow: 0 0 0 4px #1f6f78; }
.oonoa-solve.oonoa-ink-on .oonoa-sv-body { padding-bottom: 130px; }
@media (max-width: 600px) { .oonoa-ink-b { font-size: 13px; padding: 6px 9px; min-height: 40px; } .oonoa-ink-c { width: 34px; height: 34px; } }

/* Telefonda önce ders ve sınıf seçimi, önizleme altta (anahtar: mobilsecim) */
.oonoa-gostr { display: none; width: 100%; margin-top: 14px; }
@media (max-width: 920px) {
  .oonoa-mobsec .oonoa-stage { order: 0; }
  .oonoa-mobsec .oonoa-gostr { display: inline-flex; }
}

/* 1. sınıf İlk Okuma Yazma: MEB TTKB Dik Temel Abece yazı tipi */
@font-face { font-family: 'TTKB Body'; src: url('fonts/ttkb-body.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'TTKB Body'; src: url('fonts/ttkb-bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'TTKB Dot'; src: url('fonts/ttkb-dot.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
.oonoa-oy, .oonoa-oy .oonoa-tq-s, .oonoa-oy .oonoa-tq-op, .oonoa-oy .oonoa-tq-p, .oonoa-oy .oonoa-rl { font-family: 'TTKB Body', Verdana, sans-serif; }
.oonoa-oy .oonoa-tq-s, .oonoa-oy .oonoa-tq-op { font-size: calc(13pt * var(--k)); }
.oonoa-oy .oonoa-tq-l1 { font-weight: 700; }
.oonoa-oy .oonoa-tq-p { font-size: calc(14pt * var(--k)); line-height: 1.6; }
.oonoa-oy-dot { font-family: 'TTKB Dot', 'TTKB Body', sans-serif; font-size: calc(30pt * var(--k)); line-height: 1.35; letter-spacing: .05em; padding: .5mm 2mm; word-spacing: .3em; }
.oonoa-oy-ex { font-family: 'TTKB Body', Verdana, sans-serif; font-size: calc(26pt * var(--k)); line-height: 1.35; letter-spacing: .05em; padding: .5mm 2mm; }