/* === HaberDestek Ses Oynatıcı — Tam CSS ===
   Gri çizgili arka plan + mavi çizgili dolum (SVG ile)  */

/* Genel kutu */
.news-audio{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
  font:14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:#111;

  --na-h:22px;     /* çubuk yüksekliği */
  --na-tile:160px; /* dalga uzunluğu */

  border-top:4px solid #dc2626;        /* kırmızı şerit */
  border-top-left-radius:10px;         /* şerit köşeleri yuvarlak */
  border-top-right-radius:10px;
}


/* Play/Pause butonu (ikon CSS ile) */
.na-play{
  width:36px;height:36px;border-radius:50%; cursor:pointer;
  border:1px solid #d1d5db;background:#fff;color:#111;
  position:relative;display:grid;place-items:center; font-size:0; line-height:0;
}
.na-play::before{ /* PLAY üçgeni */
  content:""; width:0;height:0; display:block;
  border-left:12px solid currentColor;
  border-top:8px solid transparent; border-bottom:8px solid transparent;
  margin-left:2px;
}
/* PAUSE ikonuna dönüş */
.news-audio.is-playing .na-play::before{
  content:""; position:absolute; left:50%; top:50%;
  width:4px;height:14px;background:currentColor;border:none;border-radius:1px;
  transform:translate(-6px,-7px);
}
.news-audio.is-playing .na-play::after{
  content:""; position:absolute; left:50%; top:50%;
  width:4px;height:14px;background:currentColor;border-radius:1px;
  transform:translate(2px,-7px);
}

/* İlerleme çubuğu: gri çizgili zemin */
.na-progress{
  position:relative; flex:1; height:var(--na-h);
  border-radius:999px; cursor:pointer; overflow:hidden; outline:none;
   background:
    #f8fafc
    url("https://digime.tr/statics/na-wave-gray.svg")
    repeat-x center/var(--na-tile) 100%;
}

/* Dolu kısım: mavi çizgiler (arka planı mavi blok DEĞİL; sadece çizgi dokusu) */
.na-fill{
  position:absolute; left:0; top:0; height:100%; width:0%;
  border-radius:999px; overflow:hidden;
  background:
    url("https://digime.tr/statics/na-wave-blue.svg")
    repeat-x center/var(--na-tile) 100%;
}

/* Zaman ve hız alanları */
.na-time{ font-size:12px; color:#6b7280; white-space:nowrap; }
.na-speed{ font-size:12px; padding:2px 4px; border:1px solid #d1d5db; border-radius:8px; background:#fff; }

/* Mobil uyum */
@media (max-width:480px){
  .na-progress{ max-width:50vw; }
  .news-audio{ --na-h:16px; --na-tile:120px; }
}

/* PLAY ikonunu tam ortaya al (PAUSE ile aynı hizalama mantığı) */
.na-play::before{
  position:absolute; left:50%; top:50%;
  width:0; height:0;                 /* üçgen çizimi için */
  border-left:12px solid currentColor;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  transform: translate(-40%, -50%);  /* optik merkez: -35%…-45% arasında ince ayar yapılabilir */
  margin:0;                          /* eski margin-left iptal */
}
.na-label{
  font-size:14px;
  font-weight:500;
  color:#dc2626;   /* kırmızı dikkat çekici */
  margin-right:8px;
}

/* Hareket kısıtlaması olanlar için (ileride animasyon eklersen) animasyonu kapat
@media (prefers-reduced-motion: reduce){
  .news-audio.is-playing .na-progress,
  .news-audio.is-playing .na-fill{ animation:none; }
}
*/