/* ============================================================
   Muhabbetci — Düet Yayını stilleri (duet.css)
   ============================================================ */

/* ============================================================
   DJ PANELİNDEKİ DÜET BÖLÜMÜ
   ============================================================ */
.duetBox {
  margin: 12px 12px 0;
  padding: 12px;
  border-radius: var(--r-md, 12px);
  background: linear-gradient(135deg, rgba(123,92,255,.08), rgba(79,140,255,.05));
  border: 1px solid rgba(123,92,255,.28);
}

.duetBox.duet-gizli { display: none; }

.duetHead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.duetIco { font-size: 15px; }
.duetTitle { font-size: 13px; font-weight: 800; flex: 1 1 auto; }

.duetState {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  background: var(--bg-3, #1a2130);
  border: 1px solid var(--line, #263044);
  color: var(--txt-mute, #8492a6);
}
.duetState.on {
  background: rgba(47,208,122,.16);
  border-color: rgba(47,208,122,.45);
  color: #7ee5a8;
}
.duetState.wait {
  background: rgba(255,176,32,.14);
  border-color: rgba(255,176,32,.45);
  color: #ffc266;
}

.duetNote {
  margin: 0 0 10px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--txt-mute, #8492a6);
}

.duetRow {
  display: flex;
  gap: 5px;
  flex-wrap: nowrap;
  align-items: center;
}

/* düet davet satırı — kompakt */
.duetInvite .duetRow {
  gap: 5px;
}
.duetInvite .duetBtn {
  padding: 6px 10px;
  font-size: 11px;
}


.duetBtn {
  padding: 9px 14px;
  border-radius: var(--r-sm, 10px);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  flex: 0 0 auto;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--line, #263044);
  color: var(--txt, #e8eefc);
  transition: filter .15s, background .15s, transform .1s;
}
.duetBtn:hover { filter: brightness(1.13); }
.duetBtn:active { transform: scale(.97); }

.duetBtn.go {
  background: linear-gradient(135deg, var(--accent, #4f8cff), var(--accent-2, #7b5cff));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(79,140,255,.3);
}
.duetBtn.danger {
  background: rgba(255,59,92,.13);
  border-color: rgba(255,59,92,.4);
  color: #ff8095;
}
.duetBtn.danger:hover { background: rgba(255,59,92,.24); color: #fff; }

.duetErr {
  margin: 8px 0 0;
  font-size: 11px;
  color: #ff8095;
  min-height: 14px;
  line-height: 1.4;
}

/* ---- ortak satırı ---- */
.duetPartner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: var(--r-sm, 10px);
  background: rgba(6,10,16,.5);
  border: 1px solid rgba(123,92,255,.3);
  margin-bottom: 9px;
}

.duetAv {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 800; color: #fff;
  flex: 0 0 auto;
  border: 2px solid rgba(255,255,255,.2);
}

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

/* konuşma dalgası */
.duetWave {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
  flex: 0 0 auto;
}
.duetWave i {
  width: 2.5px;
  background: #2fd07a;
  border-radius: 2px;
  animation: duetWave 1s ease-in-out infinite;
}
.duetWave i:nth-child(1) { height: 40%; animation-delay: 0s; }
.duetWave i:nth-child(2) { height: 75%; animation-delay: .15s; }
.duetWave i:nth-child(3) { height: 55%; animation-delay: .3s; }
.duetWave i:nth-child(4) { height: 85%; animation-delay: .45s; }

@keyframes duetWave {
  0%, 100% { transform: scaleY(.45); }
  50%      { transform: scaleY(1); }
}

/* bekliyor göstergesi */
.duetSpin {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255,176,32,.25);
  border-top-color: #ffb020;
  animation: duetSpin .8s linear infinite;
  flex: 0 0 auto;
}
@keyframes duetSpin { to { transform: rotate(360deg); } }

.duetLive.hidden,
.duetWait.hidden,
.duetInvite.hidden { display: none; }

/* ============================================================
   KULLANICIYA GELEN DÜET DAVETİ
   ============================================================ */
.duetAsk {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(380px, calc(100vw - 32px));
  padding: 20px 20px 22px;
  border-radius: var(--r-xl, 18px);
  background: linear-gradient(160deg, rgba(123,92,255,.18), rgba(79,140,255,.1) 60%, #121721);
  border: 1px solid rgba(123,92,255,.55);
  box-shadow: 0 26px 80px rgba(0,0,0,.7), 0 0 40px rgba(123,92,255,.25) inset;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 9998;
  overflow: hidden;
  animation: duetAskGir .32s cubic-bezier(.2,.9,.3,1);
}
.duetAsk.hidden { display: none; }

@keyframes duetAskGir {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.92); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.duetAskGlow {
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 140%;
  background: radial-gradient(circle at 50% 0%, rgba(123,92,255,.4), transparent 68%);
  pointer-events: none;
  animation: duetGlow 3s ease-in-out infinite;
}
@keyframes duetGlow {
  0%, 100% { opacity: .5; }
  50%      { opacity: .95; }
}

.duetAskHead {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.duetAskIco { font-size: 28px; flex: 0 0 auto; }
.duetAskTitle {
  font-size: 15.5px;
  font-weight: 800;
  background: linear-gradient(90deg, #c9b6ff, #9dc0ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.duetAskSub {
  font-size: 12px;
  color: var(--txt-dim, #a8b4c6);
  margin-top: 2px;
}
.duetAskSub b { color: var(--txt, #e8eefc); }

.duetAskNote {
  position: relative;
  margin: 0 0 16px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--txt-mute, #8492a6);
}

.duetAskBtns {
  position: relative;
  display: flex;
  gap: 9px;
}
.duetAskBtns .duetBtn { flex: 1 1 auto; padding: 11px 14px; font-size: 13px; }

/* ============================================================
   HAREKET AZALTMA
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .duetWave i, .duetSpin, .duetAskGlow { animation: none !important; }
}

/* ============================================================
   MOBİL
   ============================================================ */
@media (max-width: 620px) {
  .duetBox { margin: 10px 10px 0; padding: 11px; }
  .duetRow { flex-direction: column; }
  .duetSelect, .duetBtn { width: 100%; }
  .duetBtn { min-height: 44px; }
  .duetAsk { padding: 18px 17px 20px; }
  .duetAskBtns { flex-direction: column; }
  .duetAskBtns .duetBtn { min-height: 46px; }
}


/* ============================================================
   YAYINDAKİ DJ SATIRI — DJ panelinin en üstünde
   ============================================================ */
.djOnAir {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 12px 0;
  padding: 10px 12px;
  border-radius: var(--r-md, 12px);
  background: linear-gradient(120deg, rgba(47,208,122,.1), rgba(79,140,255,.06));
  border: 1px solid rgba(47,208,122,.34);
  animation: djOnAirGir .24s ease;
}
.djOnAir.gizli { display: none; }

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

.djOnAirDot {
  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: djOnAirNabiz 1.6s ease-in-out infinite;
}
@keyframes djOnAirNabiz {
  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); }
}

.djOnAirAv {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: #fff;
  flex: 0 0 auto;
  border: 2px solid rgba(255,255,255,.2);
}

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

.djOnAirLive {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .7px;
  padding: 3px 7px;
  border-radius: 10px;
  background: #ff3b5c;
  color: #fff;
  flex: 0 0 auto;
  animation: djLiveYanip 2s ease-in-out infinite;
}
@keyframes djLiveYanip {
  0%, 100% { opacity: 1; }
  50%      { opacity: .6; }
}

/* ============================================================
   DJ MİKROFON DÜĞMESİ — müzik devam ederken ses kesilir
   ============================================================ */
.djMicBtn.muted {
  background: rgba(255,59,92,.14);
  border-color: rgba(255,59,92,.42);
  color: #ff8095;
}

.djMicNote {
  flex: 1 1 100%;
  margin: 6px 0 0;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--txt-mute, #8492a6);
  text-align: center;
}
.djMicNote.off { color: #ffc266; }

/* ============================================================
   KULLANICI LİSTESİNDE YAYINDAKİ DJ ROZETİ
   ============================================================ */
.user-item.is-live-dj {
  border-color: rgba(255,59,92,.45);
  background: linear-gradient(90deg, rgba(255,59,92,.09), transparent);
}
.user-item.is-live-dj .user-name::after {
  content: 'CANLI';
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .5px;
  margin-left: 6px;
  padding: 2px 5px;
  border-radius: 8px;
  background: #ff3b5c;
  color: #fff;
  vertical-align: middle;
}
.user-item.is-live-dj .avatar-xs {
  box-shadow: 0 0 0 2px rgba(255,59,92,.5);
}

/* mobil */
@media (max-width: 620px) {
  .djOnAir { margin: 10px 10px 0; padding: 9px 11px; }
  .djOnAirAv { width: 29px; height: 29px; font-size: 11px; }
  .djMicNote { font-size: 10px; }
}

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


/* ============================================================
   DÜET NICK ARAMA — küçük ve kompakt
   ============================================================ */
.duetSearch {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  padding: 7px 10px;
  background: #0a0e16;
  border: 1px solid var(--line, #263044);
  border-radius: var(--r-sm, 10px);
  color: var(--txt, #e8eefc);
  font-size: 11px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.duetSearch:focus {
  border-color: var(--accent, #4f8cff);
  box-shadow: 0 0 0 3px rgba(79,140,255,.12);
}
.duetSearch::placeholder {
  color: var(--txt-mute, #8492a6);
  font-size: 10.5px;
}

/* sonuç listesi */
.duetSearchList {
  list-style: none;
  margin: 6px 0 0;
  padding: 4px;
  border-radius: var(--r-sm, 10px);
  background: #0d121c;
  border: 1px solid rgba(79,140,255,.4);
  box-shadow: 0 14px 36px rgba(0,0,0,.6);
  max-height: 148px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.duetSearchList.hidden { display: none; }

.duetSearchItem {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border-radius: 7px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .12s, border-color .12s;
}
.duetSearchItem:hover {
  background: rgba(79,140,255,.14);
  border-color: rgba(79,140,255,.36);
}

.duetSearchAv {
  width: 21px; height: 21px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 9px; font-weight: 800; color: #fff;
  flex: 0 0 auto;
}

.duetSearchName {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.duetSearchGo {
  font-size: 12px;
  opacity: .5;
  flex: 0 0 auto;
}
.duetSearchItem:hover .duetSearchGo { opacity: 1; color: #7ee5a8; }

.duetSearchEmpty {
  padding: 10px 8px;
  font-size: 10.5px;
  color: var(--txt-mute, #8492a6);
  text-align: center;
}

/* davet satırını kompakt tut */
.duetInvite .duetRow {
  display: flex;
  gap: 5px;
  align-items: center;
}

@media (max-width: 620px) {
  .duetSearch { max-width: 100%; font-size: 16px; padding: 8px 10px; }
  /* .duetSelect kaldırıldı — nick arama kullanılıyor */
  .duetInvite .duetBtn { min-height: 42px; }
  .duetSearchItem { min-height: 42px; }
}