/* ═══════════════════════════════════════════════════════════════════════
   OKUMA ŞERİDİ (yapışkan) · SESLİ DİNLEME · SLIDER GÖSTERGESİ
   Beyribey Bilişim
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════ 1) YAPIŞKAN OKUMA ŞERİDİ ═══════════
   Yazı boyutu ve sesli dinleme denetimleri sayfa kaydıkça üstte kalır;
   uzun bir yazının ortasındayken sesi durdurmak ya da puntoyu değiştirmek
   için başa dönmek gerekmesin. Ana menü zaten top:0'da yapışık olduğu için
   şerit onun ALTINA oturur (menü yüksekliği ~46 px). */
.araclar {
  position: sticky;
  top: 50px;   /* ana menü 49 px — şerit tam altına oturur */
  z-index: 60;
  background: var(--sayfa);
  border-bottom: 1px solid var(--cizgi);
  /* kâğıt zemin şeridin altından sızmasın diye kapsayıcı dolgusu kadar taşır */
  margin-inline: -6px;
  padding: 10px 6px;
  gap: 6px;
}
/* yapışıp içeriğin üstüne bindiğinde ayrışsın */
.araclar[data-yapisik] {
  box-shadow: 0 6px 18px -12px rgba(20, 18, 15, .5);
  border-bottom-color: var(--cizgi-guclu);
}

.ses-grup { display: inline-flex; align-items: center; gap: 6px; }
.ses-ayrac { width: 1px; height: 22px; background: var(--cizgi); margin-inline: 2px; }
.arac--ses { padding-inline: 10px; }
.arac--ses svg { width: 13px; height: 13px; }
.ses-hiz { font-variant-numeric: tabular-nums; min-width: 46px; }

/* ═══════════ 2) OKUNAN CÜMLE ═══════════
   Vurgu ZEMİN + ALT ÇİZGİ birlikte: yalnız renk kullanmak renk körü
   okuyucuda görünmez, yalnız alt çizgi bağlantı sanılır. */
.ss { display: inline; }
.ss--okunan {
  background: linear-gradient(transparent 8%, var(--ss-zemin, #f6e6bd) 8%,
                              var(--ss-zemin, #f6e6bd) 92%, transparent 92%);
  box-shadow: 0 2px 0 0 var(--vurgu);
  color: var(--murekkep);
  border-radius: 2px;
  transition: background .12s linear;
}
:root[data-tema="koyu"] .ss--okunan { --ss-zemin: #3a2f14; color: #fff8e6; }

/* ═══════════ 3) MANŞET SLIDER GÖSTERGESİ ═══════════
   Eskiden geniş bir çubuk kayıyordu; artık haber sayısı kadar KÜÇÜK NOKTA
   var, üzerinde olunan koyulaşıyor. 10 slaytta bile yer kaplamıyor. */
.manset__nokta { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.manset__nokta button {
  /* TUZAK: genel kuralda *{box-sizing:border-box} var. Border-box'ta
     height:9px + padding:18px içerik kutusunu SIFIRLAR; background-clip
     content-box olduğu için nokta hiç boyanmaz ve yükseklik 36px'e şişer.
     content-box'ta 9px İÇERİK + 18px dolgu = 45px dokunma alanı, görünen
     nokta yine 9px kalır. */
  box-sizing: content-box;
  width: 9px; height: 9px; padding: 18px 5px;
  border: 0; cursor: pointer; border-radius: 50%;
  background-color: var(--cizgi);
  background-clip: content-box;
  transition: background-color .18s, transform .18s;
}
.manset__nokta button:hover { background-color: var(--cok-soluk); }
.manset__nokta button[aria-selected="true"] {
  background-color: var(--murekkep);           /* etkin olan KOYULAŞIR */
  transform: scale(1.3);
}

@media (max-width: 640px) {
  .araclar { top: 0; margin-inline: -4px; padding: 9px 4px; gap: 5px; }
  .arac--ses { padding-inline: 8px; min-width: 44px; }
  .ses-hiz { min-width: 44px; }
  /* şeritte yer açmak için "Sıfırla" ve "Yazdır" mobilde gizlenir */
  .araclar [data-yb="sifirla"], .araclar [data-pay="yazdir"] { display: none; }
  .manset__nokta button { width: 8px; height: 8px; padding: 18px 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .ss--okunan, .manset__nokta button { transition: none; }
}

@media print {
  .araclar { display: none !important; }
  .ss--okunan { background: none; box-shadow: none; }
}