/* Ortak erişilebilirlik modları (shared/a11y-modes.js). <html data-fs data-cb data-motion data-contrast>. tokens.css ve components.css'ten SONRA yüklenir. */

/* ---- yazı ölçeği: tüm font-size bildirimleri calc(Npx * var(--fs, 1)) biçimindedir; zoom kullanılmaz ---- */
html { --fs: 1; }
html[data-fs="125"] { --fs: 1.25; }
html[data-fs="150"] { --fs: 1.5; }
html[data-fs="125"] .stage, html[data-fs="150"] .stage { overflow-wrap: anywhere; }

/* ---- hareket azalt (elle; işletim sistemi tercihi components.css'te) ---- */
html[data-motion="1"] *, html[data-motion="1"] *::before, html[data-motion="1"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

/* ---- yüksek kontrast: metin, kenarlık ve yüzey ayrımı ---- */
html[data-contrast="1"] { --fg: #000; --mut: #2e3d4b; --line: #5a6b7b; --edge: #000; --surface-2: #fff; }
html[data-contrast="1"][data-theme="dark"] { --fg: #fff; --mut: #d4e3ef; --line: #8fb2cc; --edge: #cfe4f3; --surface-2: #12263a; }
html[data-contrast="1"]:not([data-cb]) { --ok: #0b6b36; --ok-soft: #d2eddd; --warn: #7a4f00; --warn-soft: #f8e9c8; --bad: #b01f1a; --bad-soft: #fadbd8; --accent: #005a8c; }
html[data-contrast="1"]:not([data-cb])[data-theme="dark"] { --ok: #6fe0a0; --ok-soft: #123b27; --warn: #f5c76a; --warn-soft: #3b2e12; --bad: #ff8d86; --bad-soft: #432021; --accent: #5bb8ec; }
html[data-contrast="1"] :focus-visible { outline-width: 3px; }

/* ---- renk körlüğü paletleri: durum (ok/warn/bad), vurgu ve harita renkleri; metin kontrastı >= 4.5:1 ---- */
/* Kırmızı-yeşil (protan-deutan): yeşil/kırmızı yerine mavi / amber / turuncu-kırmızı, parlaklık farklı. */
html[data-cb="rg"] { --ok: #00609c; --ok-soft: #d6e9f5; --warn: #6b5200; --warn-soft: #f6ebc4; --bad: #a8300a; --bad-soft: #fadfd3;
  --map-route: #0072b2; --map-zone: #e8b800; --map-zone-ink: #5c4300; --map-pin-from: #56b4e9; --map-pin-to: #003a5c; --map-car: #0072b2; }
html[data-cb="rg"][data-theme="dark"] { --ok: #62b8f0; --ok-soft: #0f3350; --warn: #e6c34a; --warn-soft: #3a3210; --bad: #ff9a5c; --bad-soft: #44230f;
  --map-zone: #f2c200; --map-zone-ink: #f2c200; }
/* Mavi-sarı (tritan): mavi yerine nötr koyu vurgu; ok yeşil, warn kahverengi-turuncu, bad kırmızı. */
html[data-cb="by"] { --accent: #2b3a4a; --accent-fg: #fff; --accent-soft: #e1e6ec; --ok: #0a7a3b; --ok-soft: #d7f0e0; --warn: #8a4a00; --warn-soft: #fbe8d0; --bad: #c0141b; --bad-soft: #fbdcdc;
  --map-route: #c2410c; --map-zone: #d6336c; --map-zone-ink: #7a0f2e; --map-pin-from: #c2410c; --map-pin-to: #17212b; --map-car: #c2410c; }
html[data-cb="by"][data-theme="dark"] { --accent: #cbd5e1; --accent-fg: #0b1824; --accent-soft: #2a3644; --ok: #4ccf86; --ok-soft: #123b27; --warn: #f0a24a; --warn-soft: #402a10; --bad: #ff7078; --bad-soft: #4a1f22;
  --map-zone: #ff7aa8; --map-zone-ink: #ff7aa8; }
/* Tek renk: gri tonlar (parlaklık basamakları) + süzgeç; resim ve haritadaki sabit renkler de griye düşer. */
html[data-cb="mono"] { filter: grayscale(1);
  --accent: #3a3a3a; --accent-fg: #fff; --accent-soft: #e4e4e4; --ok: #4a4a4a; --ok-soft: #e6e6e6; --warn: #666; --warn-soft: #f0f0f0; --bad: #000; --bad-soft: #d9d9d9;
  --map-bg: #ececec; --map-block: #f6f6f6; --map-road: #fff; --map-water: #c8c8c8;
  --map-route: #555; --map-zone: #888; --map-zone-ink: #000; --map-pin-from: #aaa; --map-pin-to: #222; --map-car: #555; }
html[data-cb="mono"][data-theme="dark"] { --accent: #e0e0e0; --accent-fg: #111; --accent-soft: #333; --ok: #cfcfcf; --ok-soft: #2a2a2a; --warn: #a8a8a8; --warn-soft: #222; --bad: #fff; --bad-soft: #353535;
  --map-bg: #1a1a1a; --map-block: #242424; --map-road: #3a3a3a; --map-water: #101010; --map-zone: #bbb; --map-zone-ink: #fff; --map-pin-from: #ddd; --map-pin-to: #777; }

/* ---- Erişilebilirlik bölümü (her uygulamada aynı; kendi sınıflarıyla, uygulama CSS'ine bağlı değil) ---- */
.a11y-card { display: flex; flex-direction: column; gap: 12px; }
.a11y-card h2 { font-size: calc(15px * var(--fs, 1)); display: flex; align-items: center; gap: 8px; margin: 0; }
.a11y-card h2 svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.a11y-row { display: flex; flex-direction: column; gap: 6px; }
.a11y-sub { font-size: calc(13px * var(--fs, 1)); color: var(--mut); }
.a11y-seg { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface-2); border: 2px solid var(--line); }
.a11y-seg button { flex: 1; min-height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--fg); font: inherit; font-weight: 700; cursor: pointer; }
.a11y-seg button[aria-checked="true"] { background: var(--accent); color: var(--accent-fg); }
.a11y-sel { min-height: 44px; width: 100%; padding: 0 12px; border-radius: 12px; border: 2px solid var(--edge); background: var(--surface); color: var(--fg); font: inherit; font-weight: 600; }
.a11y-line { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.a11y-grow { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.a11y-sw { position: relative; width: 52px; height: 30px; padding: 0; appearance: none; border-radius: 15px; border: 2px solid var(--edge); background: var(--line); cursor: pointer; flex: none; }
.a11y-sw::before { content: ""; position: absolute; inset: -9px -4px; }
.a11y-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--fg); transition: transform 0.2s; }
.a11y-sw[aria-checked="true"] { background: var(--accent); }
.a11y-sw[aria-checked="true"]::after { transform: translateX(22px); background: var(--accent-fg); }
.a11y-seg button:focus-visible, .a11y-sel:focus-visible, .a11y-sw:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Renk körlüğü seçici: palet önizlemeli kartlar (seçili olan vurgulu, onay işaretli). */
.cb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cb-opt { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 84px; padding: 12px 12px 12px; text-align: left; border: 2px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--fg); font: inherit; cursor: pointer; box-shadow: 0 3px 0 var(--line); transition: transform 0.12s var(--ease), border-color 0.15s, box-shadow 0.15s, background 0.15s; }
.cb-opt:active { transform: translateY(3px); box-shadow: 0 0 0 var(--line); }
.cb-opt b { font-size: calc(13px * var(--fs, 1)); line-height: 1.25; padding-right: 22px; }
.cb-dots { display: inline-flex; gap: 6px; padding: 5px 8px; border-radius: 999px; background: var(--surface-2); border: 1.5px solid var(--line); }
.cb-dots i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(23, 33, 43, 0.25); }
.cb-off .cb-dots i:nth-child(1) { background: #1a8f4c; } .cb-off .cb-dots i:nth-child(2) { background: #e0a020; } .cb-off .cb-dots i:nth-child(3) { background: #d1332e; }
.cb-rg .cb-dots i:nth-child(1) { background: #00609c; } .cb-rg .cb-dots i:nth-child(2) { background: #e6c34a; } .cb-rg .cb-dots i:nth-child(3) { background: #ff7a3c; }
.cb-by .cb-dots i:nth-child(1) { background: #0a7a3b; } .cb-by .cb-dots i:nth-child(2) { background: #e07a00; } .cb-by .cb-dots i:nth-child(3) { background: #c0141b; }
.cb-mono .cb-dots i:nth-child(1) { background: #e6e6e6; } .cb-mono .cb-dots i:nth-child(2) { background: #8f8f8f; } .cb-mono .cb-dots i:nth-child(3) { background: #3a3a3a; }
.cb-tick { position: absolute; right: 10px; top: 12px; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--accent); fill: none; stroke: var(--accent-fg); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(0.4); transition: opacity 0.15s, transform 0.2s var(--ease); }
.cb-opt[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 3px 0 var(--accent); }
.cb-opt[aria-checked="true"] .cb-tick { opacity: 1; transform: none; }
.cb-opt:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .cb-opt, .cb-tick { transition: none; } }
select.a11y-sel.vh { width: 1px !important; min-height: 0 !important; height: 1px !important; padding: 0 !important; border: 0 !important; }