/* Listen & Read: sayfa oynatıcısı. Read oynatıcısıyla aynı dünya (kâğıt zemin, mavi oynat), tek satır, sade.
   Oynatıcı uzun sayfa resmi kaydırılırken üstte kalır (sticky). */
.lp {
  --lp-canvas: #efe9dd;
  --lp-track: #dccfb6;
  --lp-ink: #1c1915;
  --lp-ink-2: #5b5246;
  --lp-accent: #1d4ed8;
  --lp-accent-ink: #1e3fae;
  --lp-accent-wash: #e8eefc;
  --lp-p: 0%;          /* çalınan */
  --lp-b: 0%;          /* yüklenen */
  position: sticky; top: .75rem; z-index: 30;
  display: flex; align-items: center; gap: .85rem;
  margin: 0 0 1.25rem;
  padding: .4rem 1rem .4rem .4rem;
  background: var(--lp-canvas);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(28, 25, 21, .06), 0 8px 20px -14px rgba(28, 25, 21, .45);
  color: var(--lp-ink);
}
.lp :focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 3px; }

/* Oynat / durdur */
.lp-play {
  flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--lp-accent); color: #fff;
  transition: background .15s ease-out, transform .1s ease-out;
}
.lp-play:hover { background: var(--lp-accent-ink); }
.lp-play:active { transform: scale(.94); }
.lp-play svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.lp-play .lp-i-pause, .lp.is-playing .lp-play .lp-i-play { display: none; }
.lp.is-playing .lp-play .lp-i-pause { display: block; }
.lp.is-loading .lp-play svg { animation: lp-pulse 1s ease-in-out infinite; }
@keyframes lp-pulse { 50% { opacity: .35; } }

/* İlerleme çubuğu: yerel range (sürükleme, dokunma ve klavye tarayıcının kendisinden) */
.lp-seek {
  flex: 1 1 auto; min-width: 0; height: 28px; margin: 0; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.lp-seek::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--lp-accent) var(--lp-p), #ccd6f1 var(--lp-p), #ccd6f1 var(--lp-b), var(--lp-track) var(--lp-b));
}
.lp-seek::-moz-range-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--lp-accent) var(--lp-p), #ccd6f1 var(--lp-p), #ccd6f1 var(--lp-b), var(--lp-track) var(--lp-b));
}
.lp-seek::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5px; border-radius: 50%;
  background: #fff; border: 2px solid var(--lp-accent);
  box-shadow: 0 1px 3px rgba(28, 25, 21, .25);
  transition: transform .12s ease-out;
}
.lp-seek::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 2px solid var(--lp-accent);
  box-shadow: 0 1px 3px rgba(28, 25, 21, .25);
}
.lp-seek:hover::-webkit-slider-thumb, .lp-seek:active::-webkit-slider-thumb { transform: scale(1.2); }
.lp-seek:focus-visible { outline-offset: 0; border-radius: 4px; }
.lp-seek:disabled { cursor: default; opacity: .6; }

.lp-time {
  flex: none; font-size: .82rem; color: var(--lp-ink-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lp-time b { font-weight: 600; color: var(--lp-ink); }

/* Hata: süre yerine kısa mesaj ve yeniden dene */
.lp-err { display: none; flex: none; font-size: .82rem; color: #a1281c; white-space: nowrap; }
.lp-err button { font: inherit; color: var(--lp-accent-ink); background: none; border: 0; padding: 0 0 0 .35rem; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.lp.is-error .lp-err { display: inline; }
.lp.is-error .lp-time { display: none; }

/* Sayfa resmi: çalan sayfa belirgin */
.listen-main table.lesson td { transition: box-shadow .15s ease-out, border-color .15s ease-out; }
.listen-main table.lesson td.playing { border-color: var(--lp-accent, #1d4ed8); box-shadow: 0 0 0 3px #e8eefc; }

@media (max-width: 575.98px) {
  .lp { gap: .6rem; padding-right: .8rem; top: .5rem; }
  .lp-time { font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lp *, .lp { transition: none !important; animation: none !important; }
}