/*
  Telsiz DJ (Ek L2, KONSEPT 8): #dj kartı, kadrodaki Telsiz DJ öğesi ve mesajdaki "DJ'de çal" düğmesi.
  Geniş ekranda (1280 ve üstü) kart telsiz kartının solunda, alta hizalı bir sütundur. 1280 altında ve ekran
  paylaşımı sahnesi açıkken (K7.2) #dj.is-sheet-mode olur ve yalnızca kadrodaki öğeden açılan sayfada görünür
  (#dj.is-open: geniş ekranda sağdan yan sayfa, telefonda alt sayfa). Renkler yalnızca belirteçlerden gelir.
  YouTube oynatıcı alanı (.dj-yt) her zaman en az 200 x 200 CSS pikselidir (yazı boyutundan bağımsız) ve
  üstüne hiçbir öğe konmaz. Kart görünmezken veya üstünü bir katman örterken oynatıcı köşeye sabitlenir
  (#dj.is-docked, bölüm 9).
*/

/* ===== 1. Sütun ve sayfa kabuğu ===== */

.side-dj {
  min-width: 15rem;
}

.dj-sheet-head {
  display: none;
}

.dj-scroll {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.dj-card {
  display: flex;
  flex-direction: column;
  flex: none;
  min-width: calc(204px + 2rem);
  margin: auto 0 0;
  padding: 1rem;
}

/* Sayfa kipinde kart yalnızca açıkken görünür */
.side-dj.is-sheet-mode:not(.is-open) {
  display: none;
}

.side-dj.is-open {
  position: fixed;
  top: calc(var(--titlebar-h, 0px) + 0.75rem);
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 50;
  display: flex;
  flex-direction: column;
  width: var(--sheet-w);
  min-width: 0;
  max-width: calc(100% - 1.5rem);
  margin: 0;
  overflow: hidden;
  border: var(--border-width) solid var(--line-strong);
  border-radius: var(--radius-card);
  background-color: var(--surface-float);
  box-shadow: var(--shadow-pop);
  -webkit-animation: sheet-from-right var(--dur-med) var(--ease);
  animation: sheet-from-right var(--dur-med) var(--ease);
}

.side-dj.is-open .dj-sheet-head {
  display: flex;
}

.side-dj.is-open .dj-scroll {
  padding: 0 0.25rem 0.5rem;
}

/* Sayfanın içindeki kart kenarsız ve camsız (temaların .side-card kurallarından daha özgül) */
:root .side-dj.is-open .side-card.dj-card {
  margin: 0;
  border: 0;
  background-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.side-dj.is-open .dj-card > .dj-kicker {
  display: none;
}

/* DJ sütunu görünürken sağ sütundaki İstasyonlar listesinin yerini alır (frekans.css), sol sütun ve
   içindeki telsiz kartı yerinde kalır */

/* ===== 2. Üst etiket: LED, "Lobi · Telsiz DJ", bot etiketi, durum ===== */

.dj-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.dj-led {
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background-color: var(--text-3);
  flex: none;
}

.dj-card.is-playing .dj-led {
  background-color: var(--live);
  box-shadow: 0 0 6px 1px var(--halo-1);
}

.dj-kicker-text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dj-tag {
  margin-left: 0.5rem;
  padding: 0 0.375rem;
  border: 1px dashed var(--live);
  border-radius: var(--radius-small);
  color: var(--live);
  font-family: var(--font-body);
  letter-spacing: 0;
  text-transform: none;
}

.dj-state {
  margin-left: auto;
  padding-left: 0.5rem;
  color: var(--text-2);
  font-family: var(--font-body);
  letter-spacing: 0;
  text-transform: none;
}

/* ===== 3. Oynatıcı alanı ===== */

.dj-stage {
  position: relative;
  margin-top: 0.25rem;
}

/* Resmi gömülü oynatıcının yeri (TelsizYouTube çerçeveyi buraya ekler). Politika: en az 200 x 200 ve görünür. */
.dj-yt {
  position: relative;
  width: 100%;
  height: 12.5rem;
  /* Kenarlık dahil 202 piksel: içteki oynatıcı en az 200 x 200 kalır */
  min-width: 202px;
  min-height: 202px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background-color: var(--surface-3);
  overflow: hidden;
}

.dj-yt .dj-youtube-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Rıza kartı: oynatıcı alanıyla aynı yerde ve en az aynı boyutta */
.dj-consent,
.dj-blocked {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  min-height: 200px;
  padding: 1rem 0.75rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-card);
  background-color: var(--surface-sunken);
  text-align: center;
}

.dj-consent-icon,
.dj-blocked-icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--warn);
}

.dj-consent-title {
  margin: 0.375rem 0 0.25rem;
  color: var(--text-strong);
  font-weight: var(--weight-strong);
}

.dj-consent-text,
.dj-blocked-text {
  margin: 0 0 0.75rem;
  color: var(--text-2);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.dj-blocked-text {
  margin: 0.5rem 0 0;
  font-size: var(--text-sm);
}

.dj-consent-accept {
  width: 100%;
  padding: 0.5rem 0.75rem;
}

.dj-consent-decline {
  width: 100%;
  margin-top: 0.375rem;
}

/* Dosya parçası: dalga biçimi, çalınan kısım --live */
.dj-wave {
  display: flex;
  align-items: center;
  height: 6rem;
  padding: 0 0.75rem;
  border-radius: var(--radius-card);
  background-color: var(--surface-sunken);
  overflow: hidden;
}

.dj-wave-bars {
  display: flex;
  align-items: center;
  width: 100%;
  height: 4rem;
}

.dj-wave-bars i {
  margin-right: 3px;
  border-radius: 2px;
  background-color: var(--line-strong);
  flex: 1 1 0;
}

.dj-wave-bars i:last-child {
  margin-right: 0;
}

.dj-wave-bars i.is-played {
  background-color: var(--live);
}

/* Boş durum */
.dj-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 9rem;
  padding: 1rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-card);
  background-color: var(--surface-sunken);
  text-align: center;
}

.dj-empty-icon {
  width: 2rem;
  height: 2rem;
  color: var(--live);
}

.dj-empty-title {
  margin: 0.5rem 0 0.25rem;
  color: var(--text-strong);
  font-weight: var(--weight-strong);
}

.dj-empty-hint {
  margin: 0;
  color: var(--text-3);
  font-size: var(--text-xs);
}

/* Uyarı satırı (oynatıcının altında, üstüne binmez) */
.dj-alert {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-top: 0.5rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-control);
  background-color: var(--warn-bg);
}

.dj-alert.is-error {
  border-color: var(--danger-edge);
  background-color: var(--danger-bg);
}

.dj-alert-text {
  margin: 0 0 0.375rem;
  color: var(--text);
  font-size: var(--text-xs);
  line-height: 1.4;
}

.dj-alert-text[hidden] + .dj-alert-action {
  margin-top: 0;
}

.dj-alert-action.dj-tap {
  min-height: var(--target);
  font-size: var(--text-md);
}

.dj-alert:not(.is-error) .dj-alert-action.dj-tap {
  border-color: transparent;
}

/* ===== 4. Çalan parça, konum ve denetimler ===== */

.dj-title {
  margin: 0.75rem 0 0;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-lg);
  line-height: 1.2;
  word-wrap: break-word;
}

.dj-by {
  margin: 0.125rem 0 0;
  color: var(--text-3);
  font-size: var(--text-sm);
  word-wrap: break-word;
}

.dj-time {
  display: flex;
  align-items: center;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.dj-bar {
  position: relative;
  height: 0.375rem;
  margin: 0.75rem 0.625rem;
  border-radius: var(--radius-pill);
  background-color: var(--surface-3);
  flex: 1 1 auto;
}

.dj-bar-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: var(--radius-pill);
  background-color: var(--accent-text);
}

.dj-bar.is-unknown .dj-bar-fill {
  width: 100%;
  opacity: 0.25;
}

.dj-card.is-paused .dj-bar-fill {
  background-color: var(--text-3);
}

.dj-ctrl {
  display: flex;
}

.dj-ctrl .button {
  margin-right: 0.5rem;
  padding: 0.5rem 0.625rem;
  flex: 1 1 0;
}

.dj-ctrl .button:last-child {
  margin-right: 0;
}

.dj-last {
  margin: 0.5rem 0 0;
  color: var(--text-2);
  font-size: var(--text-xs);
  word-wrap: break-word;
}

/* ===== 5. Kişisel ses seviyesi ve susturma ===== */

.dj-vol {
  display: flex;
  align-items: center;
  margin-top: 0.5rem;
}

.dj-vol.is-muted {
  opacity: 0.5;
}

.dj-vol-icon {
  color: var(--text-3);
  flex: none;
}

.dj-vol-label {
  margin: 0 0.5rem;
  color: var(--text-2);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.dj-vol-range {
  min-width: 0;
  flex: 1 1 auto;
}

.dj-vol-value {
  min-width: 2.75rem;
  margin-left: 0.5rem;
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-align: right;
}

.dj-mute {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--target);
  margin-top: 0.5rem;
  padding: 0.375rem 0.625rem;
  border: var(--border-width) solid var(--line-strong);
  border-radius: var(--radius-card);
  background-color: var(--surface-alt);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.dj-mute:hover {
  background-color: var(--surface-hover);
}

.dj-mute-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.dj-mute-label {
  color: var(--text-strong);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
}

.dj-mute-hint {
  color: var(--text-3);
  font-size: var(--text-xs);
}

.dj-switch {
  position: relative;
  width: 3rem;
  height: 1.625rem;
  margin-left: 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background-color: var(--surface-3);
  flex: none;
}

.dj-switch i {
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: var(--radius-pill);
  background-color: var(--text-3);
}

.dj-mute[aria-checked="true"] .dj-switch {
  background-color: var(--accent-fill-a);
}

.dj-mute[aria-checked="true"] .dj-switch i {
  right: 0.1875rem;
  left: auto;
  background-color: var(--on-accent);
}

/* ===== 6. Kuyruk ve ipuçları ===== */

.dj-queue-title {
  margin: 0.875rem 0 0.25rem 0.25rem;
}

.dj-queue {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dj-queue-item {
  display: flex;
  align-items: center;
  min-height: var(--target);
  padding: 0.25rem 0 0.25rem 0.25rem;
  border-top: 1px solid var(--line);
}

.dj-queue-n {
  min-width: 1.5rem;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  flex: none;
}

.dj-queue-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.dj-queue-name {
  overflow: hidden;
  color: var(--text-strong);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dj-queue-by {
  overflow: hidden;
  color: var(--text-3);
  font-size: var(--text-xs);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dj-queue-remove {
  margin-left: 0.25rem;
}

.dj-hint {
  margin: 0.5rem 0 0;
  color: var(--text-3);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.dj-queue-empty {
  margin-left: 0.25rem;
}

/* ===== 7. Telsiz kartının araç satırındaki Telsiz DJ düğmesi (radio.css .radio-tool) ===== */

.crew-dj .dj-crew-button {
  border-color: var(--live);
  background-color: var(--live-bg);
  color: var(--live);
}

.crew-dj .dj-avatar {
  position: relative;
  display: inline-flex;
  flex: none;
}

.crew-dj.is-playing .dj-crew-button {
  border-style: solid;
  box-shadow: 0 0 6px 2px var(--halo-1);
}

.crew-dj.needs-tap .dj-crew-button {
  border-style: solid;
  -webkit-animation: band-pulse 1.6s var(--ease) infinite;
  animation: band-pulse 1.6s var(--ease) infinite;
}

.dj-crew-badge {
  color: var(--text-2);
}

/* Telsiz kartındaki YouTube rıza uyarısı (23-dj.js djSyncConsentWarn): odada YouTube parçası çalarken henüz
   izin vermemiş kişide kadronun altında durur. Telefonda kartın kendi satırını kaplar. */
.radio-dj-consent {
  flex: 1 1 100%;
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.625rem 0.125rem;
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-control);
  background-color: var(--warn-bg);
}

.radio-dj-consent[hidden] {
  display: none;
}

.radio-dj-consent-text {
  margin: 0 0 0.375rem;
  color: var(--text);
  font-size: var(--text-xs);
  line-height: 1.4;
}

.radio-dj-consent-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.radio-dj-consent-actions .button {
  margin: 0 0.375rem 0.375rem 0;
}

/* ===== 8. Mesajdaki ses dosyası kartının "DJ'de çal" düğmesi ===== */

.dj-file-actions {
  margin: 0.25rem 0 0.5rem;
}

.dj-play-file .icon {
  color: var(--live);
}

.app-view[data-dj="off"] .dj-file-actions {
  display: none;
}

/* ===== 9. Köşedeki oynatıcı ===== */

/* YouTube'un gömülü oynatıcı kuralları oynatıcının en az 200 x 200 ve görünür olmasını, üstüne hiçbir şey
   konmamasını ister. Oynatıcı görünmezse motor parçayı bu cihazda duraklatır (music.js syncPlayer). Kart
   görünmezken (sayfa kipinde sayfa kapalı), üstünü bir katman örterken (Ayarlar, başka bir sayfa, menü,
   pencere) veya Yüzen Oynatıcı açıkken 23-dj.js #dj'ye is-docked ve data-dock (tl, tr, bl, br) koyar: yüzen
   kutu (.dj-float: oynatıcı alanı veya dosya parçasının dalga biçimi ve altında başlık ve düğmelerin olduğu
   çubuk) o köşeye sabitlenir, kartın geri kalanı visibility ile gizlenir (Yüzen Oynatıcıda kart görünür kalır).
   Kutu çubuğundan sürüklenir, bırakınca en yakın köşeye oturur, Taşı düğmesi köşeleri dolaşır. Küçültülen
   kutuda yalnızca çubuk kalır. Çerçeve ve ataları DOM'da taşınmaz (taşınan çerçeve yeniden yüklenir). Atalarda
   transform, filter, backdrop-filter, contain ve will-change bulunmaz (position: fixed kutuyu onların içine
   hapsederdi), overflow visible olur (görünürlük ölçümü kırpan ataları sayar). Kutu her katmanın, Ayarlar'ın ve
   kısa bildirimlerin üstündedir, alt köşedeyken kısa bildirim ve güncelleme şeridi kutunun üstüne çıkar.
   23-dj.js gövdeye has-dj-dock koyar, üst köşelerde bandın, sohbet başlığının ve okunmamış şeridinin altını
   --dj-dock-top, alt köşelerde yazma alanının ve telsiz kartının üstünü --dj-dock-lift olarak yazar. Alt köşedeki
   kutu mesaj akışının altını örtüyorsa yeni mesaj kapsülü kutunun üstüne çıkar (--dj-dock-below). Kutu yer
   oldukça kartın düğmelerine inmez ve görünüm alanında kalır. Ana görünümü örten bir katman (Ayarlar, sayfalar,
   pencereler) açıkken kutu seçilen yandaki alt köşededir. */

body {
  --dj-dock-gap: 1rem;
  --dj-dock-lift: 1rem;
  --dj-dock-top: calc(var(--titlebar-h, 0px) + 1rem);
  --dj-dock-clear: calc(2rem + 202px + 3.25rem);
  --dj-dock-w: 22.25rem;
  --dj-dock-bar-h: 3.25rem;
}

.dj-dock {
  display: none;
}

/* #app-view kendi yığın bağlamını (z-index: 1) kurar, köşedeki kutu onun dışındaki Ayarlar'ın üstüne
   çıkabilsin diye bu süre içinde bağlam kalkar. İçerideki katmanların sırası değişmez: tam ekran yayın
   paneli dışarıdaki menülerin (65) altında kalır. */
body.has-dj-dock .app-view {
  z-index: auto;
}

body.has-dj-dock .cast-panel.is-full {
  z-index: 64;
}

.side-dj.is-docked {
  z-index: 110;
  overflow: visible;
  visibility: hidden;
  -webkit-animation: none;
  animation: none;
}

/* Yüzen Oynatıcı: kart yerinde ve görünür kalır */
.side-dj.is-docked.is-dock-float {
  visibility: visible;
}

/* Kapalı sayfa yer kaplamaz ama çizilir (display: none çerçeveyi de gizlerdi) */
.side-dj.is-sheet-mode.is-dock-only:not(.is-open) {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  min-width: 0;
  margin: 0;
}

.side-dj.is-docked .dj-scroll {
  overflow: visible;
}

:root .side-dj.is-docked .dj-card.side-card {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Sütundaki kart yerini korur, İstasyonlar listesi kaymaz. Yüzen Oynatıcıda oynatıcının yeri kapanır. */
.side-dj.is-docked .dj-stage {
  height: 12.5rem;
  min-height: 202px;
}

.side-dj.is-docked.is-dock-float .dj-stage {
  height: auto;
  min-height: 0;
}

.side-dj.is-docked .dj-float {
  position: fixed;
  right: var(--dj-dock-gap);
  bottom: var(--dj-dock-lift);
  z-index: 1;
  width: var(--dj-dock-w);
  max-width: calc(100% - 2rem);
  min-width: 202px;
  margin: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) 0;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-pop);
  visibility: visible;
}

.side-dj.is-docked[data-dock="tl"] .dj-float,
.side-dj.is-docked[data-dock="bl"] .dj-float {
  right: auto;
  left: var(--dj-dock-gap);
  margin-right: 0;
  margin-left: env(safe-area-inset-left);
}

.side-dj.is-docked[data-dock="tl"] .dj-float,
.side-dj.is-docked[data-dock="tr"] .dj-float {
  top: var(--dj-dock-top);
  bottom: auto;
  margin-bottom: 0;
}

/* Alt köşede yazma alanının veya telsiz kartının üstüne çıkınca güvenli alan ölçüye dahildir */
body.has-dj-dock-lift .side-dj.is-docked .dj-float {
  margin-bottom: 0;
}

/* Sürüklenirken kutu imleci izler (23-dj.js dockDrag satır içi left ve top yazar) */
.side-dj.is-docked .dj-float.is-dragging {
  -webkit-user-select: none;
  user-select: none;
}

/* Kenarlık dahil 202 piksel: çerçeve 200 x 200'ün altına inmez. Çubuk kutunun altındadır, üstüne binmez. */
.side-dj.is-docked .dj-yt {
  height: 202px;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.side-dj.is-docked .dj-wave {
  height: 4.5rem;
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background-color: var(--surface-float);
}

/* Küçültülen kutuda yalnızca çubuk kalır */
.side-dj.is-dock-min .dj-yt,
.side-dj.is-dock-min .dj-wave {
  display: none;
}

/* Çubuk sürükleme tutamağıdır: dokunmatik ekranda sürükleme sayfayı kaydırmaz */
.side-dj.is-docked .dj-dock {
  display: flex;
  align-items: center;
  height: var(--dj-dock-bar-h);
  padding: 0 0.25rem 0 0.75rem;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-top: 0;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  background-color: var(--surface-float);
  color: var(--text);
  cursor: move;
  touch-action: none;
}

.side-dj.is-dock-min .dj-dock {
  border-top: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
}

.dj-dock-title {
  min-width: 0;
  overflow: hidden;
  color: var(--text-strong);
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1 1 auto;
}

.dj-dock .icon-button {
  margin-left: 0.125rem;
  color: var(--text-2);
  cursor: pointer;
}

.dj-dock .icon-button:hover {
  background-color: var(--surface-hover);
  color: var(--text-strong);
}

.dj-dock.needs-tap .dj-dock-toggle {
  background-color: var(--accent-fill-a);
  color: var(--on-accent);
  -webkit-animation: band-pulse 1.6s var(--ease) infinite;
  animation: band-pulse 1.6s var(--ease) infinite;
}

/* Bu cihazda yerel bekletme var (medya tuşu, kilit ekranı veya küçültülmüş YouTube): lamba söner, düğme "Bu
   Cihazda Devam Et" olur ve öne çıkar (23-dj.js djRenderDock) */
.dj-dock.is-held .dj-led {
  background-color: var(--text-3);
  box-shadow: none;
}

.dj-dock.is-held .dj-dock-toggle {
  background-color: var(--accent-fill-a);
  color: var(--on-accent);
}

/* Kısa bildirim ve güncelleme şeridi alt köşedeki kutunun üstüne çıkar (oynatıcının üstüne binmez, onun altında
   da kalmaz) */
body.has-dj-dock-bottom .toast,
body.has-dj-dock-bottom .desktop-update-banner {
  bottom: var(--dj-dock-clear);
}

/* Yeni mesaj kapsülü (38-gezinme.js, convo.css) mesaj akışının altına yapışıktır. Alt köşedeki kutu akışın altını
   örtüyorsa (telefonda kutu yazma alanının hemen üstünde, neredeyse tam genişliktedir) kapsül kutunun üstüne
   çıkar: --dj-dock-below akışın alt kenarından kutunun üstüne kadarki uzaklıktır (23-dj.js djDockBelow). */
body.has-dj-dock-below .new-below {
  bottom: var(--dj-dock-below);
}

/* Köşedeki oynatıcı Ayarlar'ın son satırlarını örtmesin: içerik kutunun üstüne kaydırılabilir. Ayarlar açıkken
   kutu her zaman alt köşededir (23-dj.js djDockPlace). Seçici dar ekranın (.settings-view.is-narrow) dolgusunu
   da geçer. */
body.has-dj-dock-bottom .settings-view .settings-main-inner,
body.has-dj-dock-bottom .settings-view .settings-side {
  padding-bottom: calc(2rem + 202px + 3.25rem + 1rem);
}

/* ===== 10. Kesme noktaları ===== */

/* Televizyon (1800 ve üstü): daha geniş sütun ve oynatıcı */
@media (min-width: 1800px) {
  .side-dj:not(.is-sheet-mode) {
    width: calc(var(--side-w) + 4rem);
  }

  .dj-yt {
    height: 15rem;
  }

  .side-dj.is-docked .dj-stage {
    height: 15rem;
  }
}

/* Telefon (759 ve altı): alttan açılan sayfa */
@media (max-width: 759px) {
  .side-dj.is-open {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-width: none;
    max-height: 88%;
    border-bottom: 0;
    border-radius: 1.5rem 1.5rem 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    -webkit-animation: sheet-from-bottom var(--dur-med) var(--ease);
    animation: sheet-from-bottom var(--dur-med) var(--ease);
  }
}

@media (prefers-reduced-motion: reduce) {
  .side-dj.is-open,
  .crew-dj.needs-tap .dj-crew-button,
  .dj-dock.needs-tap .dj-dock-toggle {
    -webkit-animation: none;
    animation: none;
  }
}