/*
 * Subaru Boxer Motorları — etkileşimli anlatım (Bilgi Bankası aracı).
 * ÜRETİLMİŞ DOSYA: kaynak kullanıcının hazırlattığı tek sayfalık HTML;
 * her kural #boxer-kok altına kapatıldı ki sitenin başlığına ve diğer
 * sayfalara sızmasın. Karanlık mod çıkarıldı (site tek temalı).
 *
 * Buradaki hex değerler tokens.css kuralının BİLİNÇLİ İSTİSNASI: canvas
 * çizimlerinin teknik paleti (emme mavisi, yanma turuncusu, yağ…); betik
 * bunları --değişken olarak okuyup çiziyor. Zemin, metin, çizgi, vurgu
 * ve yazı tipleri ise sitenin belirteçlerine bağlandı (dosyanın sonu).
 */
#boxer-kok img {max-width:100%}
#boxer-kok [hidden]:not([hidden=until-found i]) {display:none!important}
#boxer-kok {
  --bg: #EDF1F5;
  --surface: #FFFFFF;
  --ink: #15202B;
  --muted: #566573;
  --line: #CBD3DC;
  --steel: #8B98A6;
  --metal: #D5DCE3;
  --metal2: #A9B4BF;
  --iron: #6E7279;
  --ceramic: #FAF8F2;
  --copper: #B8733A;
  --accent: #1F4FA6;
  --intake: #1689B5;
  --compress: #5B4FC9;
  --fire: #E0661B;
  --spark: #E8A900;
  --smoke: #8A7765;
  --fuel: #2E9A5A;
  --oil: #C08A1E;
  --danger: #D2382C;
  --font-display: "Saira Condensed", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
#boxer-kok * { box-sizing: border-box; }
#boxer-kok {
  background: var(--bg); color: var(--ink);
  font: 400 16px/1.6 var(--font-body);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 28px 0;
}
#boxer-kok .wrap { max-width: 1080px; margin: 0 auto; display: grid; gap: 64px; }
#boxer-kok .baslikMotor, #boxer-kok h2, #boxer-kok h3 { font-family: var(--font-display); text-wrap: balance; margin: 0; line-height: 1.05; }
#boxer-kok .baslikMotor { font-size: clamp(56px, 11vw, 112px); font-weight: 700; letter-spacing: -0.01em; }
#boxer-kok h2 { font-size: clamp(30px, 4.6vw, 42px); font-weight: 600; }
#boxer-kok h3 { font-size: 22px; font-weight: 600; }
#boxer-kok p { margin: 0; }
#boxer-kok .eyebrow { font: 500 12px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
#boxer-kok .lede { font-size: 19px; color: var(--muted); max-width: 62ch; }
#boxer-kok .prose { max-width: 66ch; display: grid; gap: 14px; }
#boxer-kok header { display: grid; gap: 14px; }
#boxer-kok header .meta { display: flex; flex-wrap: wrap; gap: 8px 22px; font: 500 13px/1.3 var(--font-mono); color: var(--muted); }
#boxer-kok header .meta b { color: var(--ink); font-weight: 500; }
#boxer-kok .stage { display: grid; gap: 14px; }
#boxer-kok .board { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
#boxer-kok canvas { display: block; width: 100%; height: auto; max-width: 100%; }
#boxer-kok #engine { aspect-ratio: 1000 / 670; }
#boxer-kok #timeline { aspect-ratio: 1000 / 168; border-top: 1px solid var(--line); }
#boxer-kok #closeup { aspect-ratio: 1000 / 700; }
#boxer-kok #avcs { aspect-ratio: 1000 / 560; }
#boxer-kok #dash { aspect-ratio: 1000 / 380; }
#boxer-kok #bearing { aspect-ratio: 1000 / 440; }
#boxer-kok .btn.ghost[aria-pressed="true"] { background: var(--danger); border-color: var(--danger); color: var(--surface); }
#boxer-kok .scn-ctl { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
#boxer-kok .btn:disabled { opacity: 0.45; cursor: default; }
#boxer-kok .phases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; }
#boxer-kok .phases button {
  width: 100%; height: 100%; text-align: left; display: grid; gap: 4px; align-content: start;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; font: inherit; cursor: pointer;
}
#boxer-kok .phases button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#boxer-kok .phases button[aria-current="step"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
#boxer-kok .phases .n { font: 500 12px/1.3 var(--font-mono); color: var(--muted); letter-spacing: 0.06em; }
#boxer-kok .phases b { font: 600 19px/1.15 var(--font-display); }
#boxer-kok .phases .d { font-size: 14px; color: var(--muted); line-height: 1.5; }
#boxer-kok .avcs-ctl { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: end; }
#boxer-kok .avcs-ctl .slider { flex: 0 1 280px; }
#boxer-kok .readouts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; font: 500 13px/1.4 var(--font-mono); color: var(--muted); }
#boxer-kok .readouts div { display: grid; gap: 0; }
#boxer-kok .readouts dd { margin: 0; font: 600 24px/1.1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
#boxer-kok .duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; }
#boxer-kok .hud { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
#boxer-kok .hud div { background: var(--surface); padding: 12px 14px; display: grid; gap: 2px; }
#boxer-kok .hud span { font-size: 12px; color: var(--muted); }
#boxer-kok .hud strong { font: 600 28px/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
#boxer-kok .hud small { font: 500 11px/1.3 var(--font-mono); color: var(--muted); }
#boxer-kok .status { font: 500 14px/1.5 var(--font-mono); color: var(--muted); min-height: 3em; }
#boxer-kok .status b { color: var(--ink); font-weight: 500; }
#boxer-kok .note { font-size: 13px; color: var(--muted); max-width: 90ch; }
#boxer-kok .legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--muted); }
#boxer-kok .legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
#boxer-kok section { display: grid; gap: 22px; }
#boxer-kok .strokes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
#boxer-kok .stroke { border-top: 4px solid var(--c); padding-top: 12px; display: grid; gap: 8px; align-content: start; min-width: 0; }
#boxer-kok .stroke .n { font: 500 12px/1 var(--font-mono); color: var(--muted); letter-spacing: 0.1em; }
#boxer-kok .stroke p { font-size: 15px; color: var(--muted); }
#boxer-kok .parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px; }
#boxer-kok .part { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: grid; align-content: start; min-width: 0; }
#boxer-kok .part canvas { aspect-ratio: 600 / 400; border-bottom: 1px solid var(--line); }
#boxer-kok .part .txt { padding: 16px 18px 18px; display: grid; gap: 8px; }
#boxer-kok .part p { font-size: 15px; color: var(--muted); }
#boxer-kok ol.path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 32px; counter-reset: p; }
#boxer-kok ol.path li { counter-increment: p; display: grid; grid-template-columns: 40px 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); min-width: 0; }
#boxer-kok ol.path li::before { content: counter(p, decimal-leading-zero); font: 500 13px/1.6 var(--font-mono); color: var(--c, var(--intake)); }
#boxer-kok ol.path li.ex { --c: var(--fire); }
#boxer-kok ol.path b { font-weight: 600; }
#boxer-kok ol.path p { font-size: 15px; color: var(--muted); }
#boxer-kok .ecu { display: grid; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
#boxer-kok .ecu .row { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 2fr) minmax(170px, 1.2fr); gap: 16px; padding: 14px 18px; border-top: 1px solid var(--line); align-items: start; }
#boxer-kok .ecu .row:first-child { border-top: 0; }
#boxer-kok .ecu .head { font: 500 12px/1.3 var(--font-mono); color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; background: var(--bg); }
#boxer-kok .ecu .row > * { min-width: 0; }
#boxer-kok .ecu code { font: 500 13px/1.5 var(--font-mono); color: var(--accent); display: block; overflow-wrap: anywhere; }
#boxer-kok .ecu p { font-size: 15px; color: var(--muted); }
@media (max-width: 720px) {
#boxer-kok .ecu .row { grid-template-columns: 1fr; gap: 6px; }
#boxer-kok .ecu .head { display: none; }
}
#boxer-kok .tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
#boxer-kok table.cmp { width: 100%; min-width: 820px; border-collapse: collapse; font-size: 15px; }
#boxer-kok table.cmp th, #boxer-kok table.cmp td { padding: 10px 14px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
#boxer-kok table.cmp thead th { border-top: 0; font: 600 18px/1.2 var(--font-display); background: var(--bg); }
#boxer-kok table.cmp thead th small { display: block; font: 500 11px/1.4 var(--font-mono); color: var(--muted); letter-spacing: 0.04em; }
#boxer-kok table.cmp tbody th { color: var(--muted); font-weight: 400; white-space: nowrap; }
#boxer-kok table.cmp td { font: 500 14px/1.5 var(--font-mono); font-variant-numeric: tabular-nums; }
#boxer-kok table.cmp td.na { color: var(--muted); font-family: var(--font-body); font-weight: 400; }
#boxer-kok table.cmp th.sel, #boxer-kok table.cmp td.sel { background: color-mix(in srgb, var(--accent) 9%, transparent); }
#boxer-kok .engsel { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
#boxer-kok .engsel .seg button { padding: 10px 12px; }
#boxer-kok .specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 32px; margin: 0; }
#boxer-kok .specs div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
#boxer-kok .specs dt { color: var(--muted); font-size: 15px; }
#boxer-kok .specs dd { margin: 0; font: 500 14px/1.6 var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }
#boxer-kok footer { font-size: 13px; color: var(--muted); max-width: 80ch; }
#boxer-kok footer a { color: var(--accent); }
#boxer-kok .dock {
  position: sticky; bottom: 0; z-index: 20;
  background: var(--surface); border-top: 1px solid var(--line);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 10px calc(10px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.08);
}
#boxer-kok .dock .inner { max-width: 1080px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
#boxer-kok .btn { font: 600 15px/1 var(--font-body); color: var(--surface); background: var(--accent); border: 0; border-radius: 8px; padding: 11px 14px; cursor: pointer; min-width: 92px; }
#boxer-kok .btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); min-width: 0; }
#boxer-kok .btn:focus-visible, #boxer-kok input:focus-visible, #boxer-kok .seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#boxer-kok .slider { display: grid; gap: 2px; flex: 1 1 180px; min-width: 140px; }
#boxer-kok .slider label { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); }
#boxer-kok .slider output { font: 500 13px/1.4 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
#boxer-kok input[type=range] { width: 100%; accent-color: var(--accent); margin: 0; }
#boxer-kok input[type=range]:disabled { opacity: 0.45; }
#boxer-kok .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
#boxer-kok .seg button { font: 500 13px/1 var(--font-mono); background: transparent; color: var(--muted); border: 0; padding: 10px 11px; cursor: pointer; }
#boxer-kok .seg button[aria-pressed="true"] { background: var(--accent); color: var(--surface); }
@media (max-width: 560px) {
#boxer-kok .dock .inner { gap: 6px 12px; }
#boxer-kok .btn { padding: 9px 12px; font-size: 14px; }
}

/* Sitenin belirteçleri — betik getComputedStyle ile çözülmüş değeri okur */
#boxer-kok {
  --bg: var(--color-void);
  --surface: var(--color-night);
  --ink: var(--color-star);
  --muted: var(--color-muted);
  --line: var(--color-line-soft);
  --accent: var(--color-wrb);
  --font-display: var(--font-serif);
  --font-body: var(--font-sans);
  --font-mono: inherit;
}