/* Muzik sayfasi (/muzik). Renkler stil.css'teki degiskenlerden; acik tema
   kendiliginden calisiyor. */

.muzik-calar {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.muzik-kapak {
  flex: 0 0 112px;
  height: 112px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--pembe), var(--mor));
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2.6rem;
  overflow: hidden;
}
.muzik-kapak.resimli span { display: none; }
.muzik-calar-govde { flex: 1; min-width: 0; }
.muzik-oda-satir { font-size: .9rem; color: var(--yazi-soluk); }
.muzik-parca {
  font-size: 1.2rem;
  font-weight: 700;
  margin: .2rem 0 .1rem;
  overflow-wrap: anywhere;
}
.muzik-alt-bilgi { font-size: .9rem; color: var(--yazi-soluk); min-height: 1.4em; }
.muzik-ilerleme {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .8rem;
  color: var(--yazi-soluk);
  font-variant-numeric: tabular-nums;
  margin-top: .5rem;
}
.muzik-cubuk {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--cizgi);
  overflow: hidden;
}
.muzik-cubuk > div {
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--pembe), var(--mor));
}
.muzik-denetim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-top: .7rem;
}
.muzik-denetim .dugme { margin: 0; }
.muzik-ses {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
}
.muzik-ses input { width: 120px; accent-color: var(--mor); }
.muzik-canli {
  display: inline-block;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--kirmizi);
  margin-right: .35rem;
  vertical-align: middle;
}

.muzik-soz {
  max-height: 16rem;
  overflow-y: auto;
  text-align: center;
  scroll-behavior: smooth;
  position: relative;
}
.muzik-soz-satir {
  margin: .25rem 0;
  color: var(--yazi-soluk);
  transition: color .2s, font-size .2s;
}
.muzik-soz-satir.simdi {
  color: var(--yazi);
  font-weight: 700;
  font-size: 1.1rem;
}
.muzik-soz-duz {
  white-space: pre-wrap;
  font-family: inherit;
  color: var(--yazi);
  margin: 0;
}
.muzik-soz-kaynak { font-size: .75rem; }

.muzik-oyunda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .8rem;
  padding: .7rem 1rem;
  border-left: 3px solid var(--mor);
}
.muzik-oyunda .dugme { margin: 0 0 0 auto; padding: .45rem 1rem; }

.muzik-bolum { margin-top: .6rem; }
.muzik-liste { display: flex; flex-direction: column; gap: .5rem; }
.muzik-satir {
  display: flex;
  align-items: center;
  gap: .8rem;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: 10px;
  padding: .6rem .8rem;
}
.muzik-satir.secili { border-color: var(--mor); }
.muzik-satir img, .muzik-satir .muzik-kucuk-kapak {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--kart-acik);
}
.muzik-satir-govde { flex: 1; min-width: 0; }
.muzik-satir-ad { font-weight: 600; overflow-wrap: anywhere; }
.muzik-satir-alt { font-size: .85rem; color: var(--yazi-soluk); overflow-wrap: anywhere; }
.muzik-satir .dugme {
  margin: 0;
  padding: .4rem .9rem;
  font-size: .9rem;
  white-space: nowrap;
}
.muzik-no {
  flex: 0 0 1.6rem;
  text-align: right;
  color: var(--yazi-soluk);
  font-variant-numeric: tabular-nums;
}

.muzik-kategori { margin: 1rem 0 .4rem; font-size: 1rem; color: var(--yazi-soluk); }
.muzik-radyolar { display: flex; flex-wrap: wrap; gap: .45rem; }
.muzik-radyo {
  padding: .4rem .8rem;
  border-radius: 20px;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  color: var(--yazi);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
}
.muzik-radyo:hover { border-color: var(--mor); }
.muzik-radyo.secili {
  background: linear-gradient(90deg, var(--pembe), var(--mor));
  border-color: transparent;
  color: #fff;
}
.muzik-radyo small { color: inherit; opacity: .75; margin-left: .3rem; }

.muzik-ara { display: flex; gap: .5rem; flex-wrap: wrap; }
.muzik-ara .muzik-aktar-ad { flex: 0 1 14rem; }
.muzik-ara input { flex: 1; }
.muzik-ara .dugme { margin: 0; }

.muzik-hafta h3 { margin: 0 0 .5rem; font-size: 1rem; }
.muzik-hafta ol { margin: 0; padding-left: 1.3rem; font-size: .9rem; }
.muzik-hafta li { overflow-wrap: anywhere; }
.muzik-hafta li span { color: var(--yazi-soluk); }

.muzik-dipnot { margin-top: 2rem; }

/* Sesli sohbet penceresindeki "Muzik" sekmesi (?gomulu=1). */
.muzik-gomulu .ust, .muzik-gomulu .alt, .muzik-gomulu .serit-bant,
.muzik-gomulu .duyuru-bandi, .muzik-gomulu .muzik-dipnot { display: none; }
.muzik-gomulu .govde { padding: .6rem .7rem 1.5rem; }

@media (max-width: 560px) {
  .muzik-calar { flex-direction: column; align-items: stretch; }
  .muzik-kapak { flex-basis: auto; height: 160px; }
  .muzik-ses input { width: 100px; }
  .muzik-satir { flex-wrap: wrap; }
  .muzik-satir .dugme { margin-left: auto; }
}
.muzik-denetim .dugme[aria-pressed="true"] { border-color: var(--mor); color: var(--mor); }