/* ============================================================
   Muhabbetci — Kapatma (×) Düğmeleri — BÜYÜK ölçek
   Tüm pencerelerin kapatma işaretleri tek yerde büyütülür.
   En son yüklenir, diğer stilleri geçersiz kılar.
   ============================================================ */

/* --- kütüphane penceresi --- */
#libCloseX {
  width: 56px !important;
  height: 56px !important;
  font-size: 40px !important;
  line-height: 1 !important;
  border-radius: 13px !important;
  display: grid !important;
  place-items: center !important;
}

/* --- DJ paneli --- */
#djClose,
.radioDjPanel #djClose {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  font-size: 32px !important;
  line-height: 1 !important;
  border-radius: 11px !important;
  display: grid !important;
  place-items: center !important;
}

/* --- yönetim paneli --- */
#adminClose {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  font-size: 32px !important;
  line-height: 1 !important;
  border-radius: 11px !important;
  display: grid !important;
  place-items: center !important;
}

/* --- kamera penceresi --- */
#camViewClose {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  font-size: 30px !important;
  line-height: 1 !important;
  border-radius: 10px !important;
  display: grid !important;
  place-items: center !important;
}

/* --- çoklu kamera ızgarası --- */
#camGridClose,
.camGridCloseBtn {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  font-size: 32px !important;
  line-height: 1 !important;
  border-radius: 11px !important;
  display: grid !important;
  place-items: center !important;
}

/* --- özel sohbet --- */
#pmClose {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  font-size: 30px !important;
  line-height: 1 !important;
  border-radius: 10px !important;
  display: grid !important;
  place-items: center !important;
}

/* --- efekt paneli --- */
#fxClose {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  font-size: 30px !important;
  line-height: 1 !important;
  border-radius: 10px !important;
  display: grid !important;
  place-items: center !important;
}

/* --- kullanıcı işlem menüsü --- */
#modClose,
.webmenu-x {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  font-size: 28px !important;
  line-height: 1 !important;
  border-radius: 10px !important;
  display: grid !important;
  place-items: center !important;
}

/* --- uyarı kartları --- */
#micPermitHide {
  font-size: 22px !important;
  min-width: 34px !important;
  min-height: 34px !important;
}

#otoSerit .otoSeritBtn {
  font-size: 15px !important;
}

/* --- ortak hover --- */
#libCloseX:hover,
#djClose:hover,
#adminClose:hover,
#camViewClose:hover,
#camGridClose:hover,
#pmClose:hover,
#fxClose:hover,
#modClose:hover,
.webmenu-x:hover {
  background: rgba(255, 59, 92, .24) !important;
  color: #fff !important;
}

/* --- mobil: daha da büyük --- */
@media (max-width: 760px) {
  #libCloseX { width: 62px !important; height: 62px !important; font-size: 46px !important; }
  #djClose,
  #adminClose,
  #camGridClose,
  .camGridCloseBtn { width: 52px !important; height: 52px !important; font-size: 36px !important; }
  #camViewClose,
  #pmClose,
  #fxClose { width: 50px !important; height: 50px !important; font-size: 34px !important; }
}

/* dokunmatik cihazlarda ekstra pay */
@media (hover: none) and (pointer: coarse) {
  #libCloseX,
  #djClose,
  #adminClose,
  #camViewClose,
  #camGridClose,
  #pmClose,
  #fxClose,
  #modClose,
  .webmenu-x { min-width: 48px !important; min-height: 48px !important; }
}


/* ============================================================
   DJ PANELİ — AŞAĞI YUKARI KAYDIRMA KONSOLU
   Bölümleri görmek için panel içinde kaydırma.
   ============================================================ */

/* panel: sabit yükseklik + dikey düzen */
.radioDjPanel {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  height: min(760px, calc(100vh - 32px)) !important;
  max-height: calc(100vh - 32px) !important;
}

/* başlık sabit */
.radioDjPanel .djHead {
  flex: 0 0 auto !important;
  position: relative;
  z-index: 2;
}

/* gövde: kaydırılabilir alan — panelin kalanını tamamen kaplar */
.djScroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(79,140,255,.55) rgba(255,255,255,.05);
  padding: 0 0 22px;
  scroll-behavior: smooth;
}

/* --- belirgin kaydırma şeridi --- */
.djScroll::-webkit-scrollbar {
  width: 12px;
}
.djScroll::-webkit-scrollbar-track {
  background: rgba(255,255,255,.05);
  border-radius: 6px;
}
.djScroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(79,140,255,.7), rgba(123,92,255,.6));
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
  min-height: 50px;
}
.djScroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(79,140,255,1), rgba(123,92,255,.9));
  background-clip: content-box;
}

/* --- alta doğru kaydırma ipucu (panel içinde sabit görünür) --- */
.radioDjPanel .djScroll::after {
  content: '';
  display: block;
  height: 14px;
}

/* çalma listesi kendi içinde kaydırmasın — tek konsol */
.djListWrap {
  overflow: visible !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  padding-bottom: 6px;
}

/* bölümler arası ayırıcı çizgi — kaydırırken nereye geldiğin belli olsun */
.djScroll > .djOnAir,
.djScroll > .djNow,
.djScroll > .djControls,
.djScroll > .duetBox,
.djScroll > .djMp3,
.djScroll > .djListHead {
  scroll-margin-top: 8px;
}

/* --- kısa ekranlar: konsol yine tam çalışsın --- */
@media (max-height: 640px) {
  .radioDjPanel {
    height: calc(100vh - 20px) !important;
    max-height: calc(100vh - 20px) !important;
  }
  .djScroll { padding-bottom: 16px; }
}

/* --- masaüstü geniş ekran: panel daha yüksek --- */
@media (min-width: 1100px) and (min-height: 800px) {
  .radioDjPanel {
    height: min(820px, calc(100vh - 48px)) !important;
    max-height: calc(100vh - 48px) !important;
  }
}

/* --- mobil: tam ekran, şerit ince --- */
@media (max-width: 760px) {
  .radioDjPanel {
    height: 100% !important;
    max-height: 100% !important;
  }
  .djScroll {
    overflow-y: auto !important;
    padding-bottom: 40px;
  }
  .djScroll::-webkit-scrollbar { width: 7px; }
  .djScroll::-webkit-scrollbar-thumb { min-height: 40px; }
}

/* hareket azaltma */
@media (prefers-reduced-motion: reduce) {
  .djScroll { scroll-behavior: auto; }
}


/* ============================================================
   DJ PANELİ KAYDIRMA — KESİN ÇÖZÜM
   Fare tekerleği, dokunmatik ve şerit sürükleme hepsi çalışır.
   ============================================================ */
.radioDjPanel {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  max-height: calc(100vh - 28px) !important;
}

/* başlık sabit yükseklik */
.radioDjPanel > .djHead {
  flex: 0 0 auto !important;
}

/* kaydırılabilir gövde — panelin kalan yüksekliğini TAM kaplar */
.radioDjPanel > .djScroll {
  flex: 1 1 auto !important;
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
  padding: 0 6px 26px 0 !important;
  scrollbar-width: thin !important;
  scrollbar-color: #4f8cff rgba(255,255,255,.07) !important;
}

/* şerit */
.radioDjPanel > .djScroll::-webkit-scrollbar {
  width: 13px !important;
}
.radioDjPanel > .djScroll::-webkit-scrollbar-track {
  background: rgba(255,255,255,.07) !important;
  border-radius: 7px !important;
}
.radioDjPanel > .djScroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #4f8cff, #7b5cff) !important;
  border-radius: 7px !important;
  border: 3px solid transparent !important;
  background-clip: content-box !important;
  min-height: 56px !important;
}
.radioDjPanel > .djScroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #7fb0ff, #a88bff) !important;
  background-clip: content-box !important;
}

/* içerik kutuları taşmasın */
.radioDjPanel > .djScroll > * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* kütüphane bölümü her koşulda görünür */
#djMp3 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#libOpenBtn {
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
}

/* liste kendi içinde kaydırmasın */
.radioDjPanel .djListWrap {
  overflow: visible !important;
  max-height: none !important;
}


/* ============================================================
   DJ PANELİ — "DEVAMI AŞAĞIDA" GÖSTERGESİ
   ============================================================ */
.djScrollHint {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  padding: 5px 13px;
  border-radius: 14px;
  font-size: 10.5px;
  font-weight: 700;
  color: #cfe0ff;
  background: linear-gradient(135deg, rgba(79,140,255,.85), rgba(123,92,255,.8));
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 5;
  white-space: nowrap;
}
.djScrollHint.on {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}
.djScrollHint span { display: inline-block; animation: djHintNabiz 1.6s ease-in-out infinite; }
@keyframes djHintNabiz {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

/* panel konumlandırma referansı */
.radioDjPanel { position: fixed !important; }

@media (prefers-reduced-motion: reduce) {
  .djScrollHint, .djScrollHint span { animation: none !important; transition: none !important; }
}