/* Metni sesli oku — UYG 3. tur 41, 0.3.10 (23.10.2026; js/sesli_oku.js). Renkler yalnız tema değişkenlerinden. */
.so-p { margin: 0; }
.so-etiket { display: block; margin: 0 0 6px; }
.so-alan { display: block; min-height: 180px; max-height: 55vh; resize: vertical; line-height: 1.55; font-size: 16px; overflow-wrap: anywhere; color-scheme: light dark; }
.so-alan:focus, .so-ses:focus { outline: 2px solid var(--ac); outline-offset: 1px; }
.so-araclar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.so-dugme { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 8px 12px; font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap; }
.secim.so-dugme:disabled { opacity: .45; cursor: default; }
.so-sayac { margin-top: 8px; min-height: 1em; }
.so-oku { display: flex; align-items: center; justify-content: center; gap: 8px; max-width: none; margin: 12px 0 0; min-height: 52px; }
.so-oku:disabled { opacity: .5; cursor: default; }
.so-ikon { width: 22px; height: 22px; flex: none; display: block; }

/* Okuma görünümü */
.so-ust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.so-ust .so-dugme { flex: 0 1 auto; }
.so-ilerleme { margin-left: auto; white-space: nowrap; }
.so-ipucu { margin: 8px 0 10px; }
.so-metin { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 17px; line-height: 1.75; color: var(--tx); }
.so-c { cursor: pointer; border-radius: 6px; padding: 2px 0; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-color .2s ease; -webkit-tap-highlight-color: transparent; }
.so-c:active { background: color-mix(in srgb, var(--ac) 10%, transparent); }
.so-c.so-etkin { background: color-mix(in srgb, var(--ac) 14%, transparent); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--ac) 55%, transparent); }
.so-calisiyor .so-c.so-etkin { background: color-mix(in srgb, var(--ac) 24%, transparent); box-shadow: inset 0 -2px 0 var(--ac); }
.so-kelime { background: var(--ac); color: var(--onac); border-radius: 4px; padding: 0 1px; }
:root[data-hareket="hic"] .so-c { transition: none; }

/* Denetim çubuğu — alt çubuğun hemen üstünde yapışık */
.so-cubuk { position: sticky; bottom: calc(var(--alt-yukseklik, 64px) + env(safe-area-inset-bottom, 0px) + 10px); z-index: 5;
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px 52px; gap: 8px; align-items: center;
  margin: 0 0 12px; padding: 8px; border: 1px solid var(--ln); border-radius: 20px;
  background: color-mix(in srgb, var(--sf) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12); }
.so-tus { height: 52px; min-width: 0; border: 1px solid var(--ln); border-radius: 14px; background: var(--sf); color: var(--tx);
  display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; font: inherit; font-size: 16px; font-weight: 600; padding: 0 8px; }
.so-tus:disabled { opacity: .4; cursor: default; }
.so-tus.so-ana { background: var(--ac); color: var(--onac); border-color: var(--ac); }
.so-tus.so-ana span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-tus:focus-visible, .so-c:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }

/* Ses ayarları */
.so-ses { min-height: 48px; font-size: 15px; margin-bottom: 6px; }
.so-ses:disabled { opacity: .6; }
.so-kaydir { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 12px; }
.so-kaydir label { font-size: 15px; }
.so-kaydir .sayi { font-weight: 600; }
.so-hiz, .so-ton { display: block; width: 100%; min-height: 36px; margin: 2px 0 0; accent-color: var(--ac); }
.so-onay { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0 4px; min-height: 44px; cursor: pointer; line-height: 1.35; }
.so-onay input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--ac); }
.so-not { margin: 4px 4px 12px; }

/* Ses yok / Türkçe yok bilgisi */
.so-bilgi { border-color: color-mix(in srgb, var(--ac) 45%, var(--ln)); }
.so-bilgi .so-p + .so-p { margin-top: 6px; }
.so-adim { margin: 10px 0 8px; padding-left: 22px; font-size: 14px; line-height: 1.45; }
.so-adim li + li { margin-top: 4px; }