/* ============================================================
   Muhabbetci — Oto Yayın stilleri (oto.css)
   ============================================================ */

.otoSerit {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 12px 0;
  padding: 9px 12px;
  border-radius: var(--r-md, 12px);
  background: linear-gradient(120deg, rgba(47,208,122,.11), rgba(79,140,255,.06));
  border: 1px solid rgba(47,208,122,.36);
  animation: otoGir .24s ease;
}
.otoSerit.hidden { display: none; }

@keyframes otoGir {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.otoSeritDot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #2fd07a;
  box-shadow: 0 0 0 4px rgba(47,208,122,.18);
  flex: 0 0 auto;
  animation: otoNabiz 1.6s ease-in-out infinite;
}
@keyframes otoNabiz {
  0%, 100% { box-shadow: 0 0 0 4px rgba(47,208,122,.18); }
  50%      { box-shadow: 0 0 0 7px rgba(47,208,122,.05); }
}

.otoSeritMeta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.otoSeritTitle {
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.otoSeritSub {
  font-size: 10.5px;
  color: var(--txt-mute, #8492a6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.otoSeritBtn {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 13px;
  cursor: pointer;
  flex: 0 0 auto;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line, #263044);
  transition: background .14s, border-color .14s;
}
.otoSeritBtn:hover { background: rgba(255,255,255,.13); }
.otoSeritBtn.on {
  background: rgba(47,208,122,.18);
  border-color: rgba(47,208,122,.5);
  color: #7ee5a8;
}

/* radyo çubuğundaki oto yayın rozeti */
.otoRozet {
  display: none;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .6px;
  padding: 3px 7px;
  border-radius: 10px;
  background: rgba(47,208,122,.18);
  border: 1px solid rgba(47,208,122,.45);
  color: #7ee5a8;
  flex: 0 0 auto;
}
.otoRozet.on { display: inline-block; }

/* ---- mobil ---- */
@media (max-width: 620px) {
  .otoSerit { margin: 7px 10px 0; padding: 8px 10px; gap: 8px; }
  .otoSeritTitle { font-size: 12px; }
  .otoSeritSub { font-size: 10px; }
  .otoSeritBtn { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .otoSeritDot { animation: none !important; }
}