/* Tasarım değişkenleri: sitede ve oynatıcılarda ortak. */
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF; }

:root {
  color-scheme: light;
  --murekkep: #0B2438;
  --ikincil: #465C6C;
  --cizgi: #CBD6DD;
  --cerceve: #8DA2B0;
  --zemin: #F4F6F7;
  --yuzey: #FFFFFF;
  --sahne: #D6DFE4;
  --vurgu: #005F9A;
  --vurgu-koyu: #002E4D;
  --secili: #E2EEF6;
  --pasif: #E3E9ED;
  --pasif-metin: #5A6D7A;
  --dogru: #0B6B4F;
  --dogru-z: #E4F3ED;
  --yanlis: #A23A12;
  --yanlis-z: #FBEDE6;
  --uyari: #6B4E00;
  --uyari-z: #FFF6DC;
  --yazi: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --yazi-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --kose: 6px;
  --kose-buyuk: 8px;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--zemin); color: var(--murekkep); font-family: var(--yazi); font-size: 16px; line-height: 1.5; }
a { color: var(--vurgu); }
a:hover { color: var(--vurgu-koyu); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid var(--vurgu-koyu); outline-offset: 2px; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
input[type="range"], input[type="checkbox"] { accent-color: var(--vurgu); }

.dugme, .dugme-ikincil { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: var(--kose); font-weight: 600; text-decoration: none; }
.dugme { background: var(--vurgu); color: #fff; border: 0; }
.dugme:hover { background: var(--vurgu-koyu); color: #fff; }
.dugme-ikincil { background: var(--yuzey); color: var(--murekkep); border: 1px solid var(--cerceve); font-weight: 500; }
.dugme-ikincil:hover { background: var(--secili); color: var(--murekkep); }
.dugme:disabled, .dugme-ikincil:disabled { background: var(--pasif); color: var(--pasif-metin); border-color: transparent; }

.powered { display: inline-flex; align-items: center; gap: 10px; color: var(--ikincil); font-size: 14px; }
.powered a { display: inline-flex; align-items: center; min-height: 44px; }
.powered img { display: block; height: 24px; width: auto; }
.mono { font-family: var(--yazi-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ikincil); }

/* Modeldeki etiketler */
.etiket { position: absolute; left: 0; top: 0; width: 0; height: 0; --ton: var(--murekkep); }
.etiket[data-ton="yanlis"] { --ton: var(--yanlis); }
.etiket[data-ton="dogru"] { --ton: var(--dogru); }
.etiket::after { content: ""; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--ton); }
.etiket::before { content: ""; position: absolute; left: -.5px; bottom: 0; width: 1px; height: calc(10px + var(--kay, 0px)); background: var(--ton); }
.etiket span { position: absolute; left: 0; bottom: calc(10px + var(--kay, 0px)); transform: translateX(-50%); white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; background: var(--yuzey); color: var(--ton); border: 1px solid var(--ton); border-radius: 4px; padding: 2px 8px; font-size: 13px; line-height: 1.45; font-weight: 600; }
.etiket.alt span { bottom: auto; top: 10px; }
.etiket.alt::before { bottom: auto; top: 0; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }