/* ============================================================
   Makale "Dinle" çubuğu — makale-detay.php, yöneten: assets/js/dinle.js
   Ayrı dosya ve sürüm ekiyle (?v=): style.css tarayıcıda bir ay saklanıyor.
   Betik çalışmazsa yalnızca tarayıcının kendi ses oynatıcısı görünür.
   ============================================================ */
.dinle{display:flex; align-items:center; gap:14px; margin:0 0 26px; padding:10px 16px 10px 10px;
  background:var(--card-2); border:1px solid var(--line); border-radius:var(--pill)}
.dinle[hidden]{display:none}                      /* flex, [hidden]'ı ezmesin */
.dinle:not(.hazir){padding:10px; border-radius:var(--r-md)}
.dinle:not(.hazir) > :not(audio){display:none}    /* betik yoksa: yalnız yerel oynatıcı */
.dinle audio{width:100%; display:block}
.dinle.hazir audio{display:none}

.dinle__oynat{flex:none; width:48px; height:48px; border-radius:50%; border:0; background:var(--olive); color:#fff;
  display:grid; place-items:center; cursor:pointer; transition:background .25s var(--ease), transform .25s var(--ease)}
.dinle__oynat:hover{background:var(--olive-lt); transform:scale(1.05)}
.dinle__oynat svg{grid-area:1/1}
.dinle__ic-oynat{margin-left:2px}                 /* üçgen gözle ortalansın */
.dinle__ic-dur{display:none}
.dinle.caliyor .dinle__ic-oynat{display:none}
.dinle.caliyor .dinle__ic-dur{display:block}

.dinle__orta{flex:1; min-width:0}
.dinle__ust{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:2px}
.dinle__baslik{font-family:var(--disp); font-weight:600; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--olive); white-space:nowrap}
.dinle__sure{font-size:12.5px; color:var(--mut); font-variant-numeric:tabular-nums; white-space:nowrap}
.dinle__cubuk{display:block; width:100%; height:24px; margin:0; accent-color:var(--olive); cursor:pointer; background:transparent}

.dinle__hiz{flex:none; min-width:54px; height:36px; padding:0 10px; border-radius:var(--pill); border:1px solid var(--line); background:var(--card);
  font-family:var(--disp); font-weight:600; font-size:12.5px; color:var(--ink); cursor:pointer; font-variant-numeric:tabular-nums; transition:background .2s}
.dinle__hiz:hover{background:#EDEBE4}
.dinle :focus-visible{outline:2px solid var(--olive); outline-offset:2px}

/* Tarayıcı sesiyle okurken okunan bölüm hafifçe vurgulanır */
.okunuyor{background:rgba(169,179,148,.24); box-shadow:0 0 0 8px rgba(169,179,148,.24); border-radius:4px;
  transition:background .3s, box-shadow .3s}

@media(max-width:520px){
  .dinle{gap:10px; padding:8px 12px 8px 8px}
  .dinle__oynat{width:44px; height:44px}
  .dinle__hiz{min-width:48px}
  /* Dar ekranda başlık + süre yan yana sığmazsa alt alta geçer (çubuk kartın dışına taşmasın) */
  .dinle__ust{flex-wrap:wrap; gap:0 8px; line-height:1.4}
  .dinle__baslik{font-size:9.5px; letter-spacing:.05em}
  .dinle__sure{font-size:12px}
}
@media(prefers-reduced-motion:reduce){ .dinle__oynat, .okunuyor{transition:none} }