* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #eef6fb;
  color: #263746;
  font-family: Arial, sans-serif;
}

.topbar {
  height: 64px;
  background: white;
  border-bottom: 1px solid #dce9f2;
  padding: 0 16px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand small {
  display: block;
  color: #8395a3;
  margin-top: 2px;
}

.logo {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #2997d6;
  color: white;
  display: grid;
  place-items: center;
  font-weight: bold;
  font-size: 21px;
}

.back {
  text-decoration: none;
  color: #2997d6;
  font-size: 13px;
  font-weight: bold;
}

.container {
  width: min(720px, calc(100% - 24px));
  margin: 20px auto 50px;
}

.card {
  background: white;
  border: 1px solid #dce9f2;
  border-radius: 16px;
  box-shadow: 0 5px 20px rgba(60,100,130,.06);
}

.login-card {
  max-width: 440px;
  margin: 50px auto;
  padding: 26px;
}

.mic-icon {
  width: 64px;
  height: 64px;
  margin: auto;
  border-radius: 50%;
  background: #e8f5fc;
  display: grid;
  place-items: center;
  font-size: 30px;
}

.login-card h1 {
  text-align: center;
  margin: 15px 0 6px;
  font-size: 21px;
}

.sub {
  text-align: center;
  color: #80919e;
  font-size: 13px;
  margin-bottom: 25px;
}

.login-card > label {
  display: block;
  font-size: 12px;
  font-weight: bold;
  margin: 15px 0 7px;
}

input,
select {
  width: 100%;
  height: 45px;
  border: 1px solid #ccdce7;
  border-radius: 10px;
  padding: 0 12px;
  background: white;
  outline: none;
  font-size: 14px;
}

input:focus,
select:focus {
  border-color: #2997d6;
}

.option {
  margin: 18px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.option input {
  width: 17px;
  height: 17px;
}

.option label {
  font-size: 13px;
}

button {
  cursor: pointer;
}

.primary {
  border: 0;
  border-radius: 10px;
  background: #2997d6;
  color: white;
  height: 44px;
  padding: 0 18px;
  font-weight: bold;
}

.login-card .primary {
  width: 100%;
}

.secondary {
  height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  background: white;
  color: #2997d6;
  border: 1px solid #2997d6;
  font-weight: bold;
}

.message {
  text-align: center;
  margin-top: 14px;
  font-size: 13px;
  min-height: 16px;
  color: #e14b4b;
}

.hidden {
  display: none;
}

.live-card {
  padding: 17px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.live-card small {
  color: #e34a4a;
  font-weight: bold;
  font-size: 10px;
}

.live-card h2 {
  margin: 4px 0;
  font-size: 19px;
}

#connectionStatus {
  color: #76909f;
  font-size: 12px;
}

.live-dot {
  width: 15px;
  height: 15px;
  background: #e94242;
  border-radius: 50%;
  box-shadow: 0 0 0 7px #ffe7e7;
}

.section {
  padding: 18px;
  margin-top: 12px;
}

.section h3 {
  margin: 0 0 15px;
  font-size: 15px;
}

.button-row {
  display: flex;
  gap: 8px;
  margin-top: 9px;
}

.button-row button {
  flex: 1;
}

.mic-button {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 11px;
  background: #eef6fb;
  color: #247eaf;
  font-weight: bold;
}

.meter {
  height: 7px;
  background: #e4edf3;
  border-radius: 10px;
  margin: 12px 0 20px;
  overflow: hidden;
}

#micMeter {
  width: 0;
  height: 100%;
  background: #2997d6;
}

.slider-row {
  display: grid;
  grid-template-columns: 70px 1fr 45px;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 12px;
}

.slider-row input {
  height: auto;
  padding: 0;
  accent-color: #2997d6;
}

.jingles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.jingles button {
  height: 43px;
  border: 1px solid #d5e4ee;
  border-radius: 9px;
  background: #f7fbfd;
  color: #476474;
}

.empty-queue {
  padding: 18px;
  background: #f7fafc;
  border-radius: 10px;
  text-align: center;
  color: #899aa5;
  font-size: 12px;
}

.leave {
  width: 100%;
  height: 46px;
  margin-top: 15px;
  background: white;
  border: 1px solid #e15a5a;
  color: #e15a5a;
  border-radius: 11px;
  font-weight: bold;
}

@media (max-width: 520px) {
  .container {
    margin-top: 12px;
  }

  .login-card {
    margin-top: 20px;
    padding: 20px;
  }

  .topbar {
    height: 58px;
    padding: 0 11px;
  }

  .logo {
    width: 36px;
    height: 36px;
  }

  .section {
    padding: 14px;
  }

  .button-row {
    flex-direction: column;
  }

  .jingles {
    grid-template-columns: 1fr;
  }
}


.youtube-message {
  margin-top: 10px;
  min-height: 17px;
  font-size: 12px;
  color: #557383;
  text-align: center;
}

/* AUTO DJ */
.autodj-button {
  width: 100%;
  height: 48px;
  margin-top: 15px;
  border: 1px solid #2997d6;
  border-radius: 11px;
  background: #eaf6fd;
  color: #247eaf;
  font-weight: bold;
}

.autodj-button:hover {
  background: #dff1fb;
}

.autodj-button:disabled {
  opacity: .6;
  cursor: not-allowed;
}

.autodj-status {
  margin-top: 15px;
  padding: 12px 14px;
  border: 1px solid #dce9f2;
  border-radius: 11px;
  background: #f7fbfd;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.autodj-status.hidden {
  display: none;
}

#queueList.queue-list {
  padding: 0;
  background: transparent;
  text-align: left;
}

.queue-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  margin-top: 7px;
  border: 1px solid #e1edf4;
  border-radius: 9px;
  background: #f8fbfd;
}

.queue-item:first-child {
  margin-top: 0;
}

.queue-item-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #476474;
}

.queue-item-remove {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #e15a5a;
  font-weight: bold;
}


/* ==================================================
   AUTO DJ DURUM BUTONU
   ================================================== */

.autodj-button {
  width: 100%;
  height: 48px;
  margin-top: 15px;
  border-radius: 11px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .2px;
  cursor: pointer;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .12s ease,
    box-shadow .18s ease;
}

/* Auto DJ devre dışı */
.autodj-button.autodj-off {
  border: 1px solid #e25252;
  background: #fff0f0;
  color: #c93f3f;
}

.autodj-button.autodj-off:hover {
  background: #ffe5e5;
  border-color: #d94343;
  box-shadow: 0 4px 12px rgba(210, 67, 67, .12);
}

/* Auto DJ yayında */
.autodj-button.autodj-on {
  border: 1px solid #38a965;
  background: #eaf9f0;
  color: #21884b;
}

.autodj-button.autodj-on:hover {
  background: #e1f6e9;
}

.autodj-button:active {
  transform: scale(.99);
}

.autodj-button:disabled {
  opacity: .65;
  cursor: not-allowed;
  transform: none;
}


/* ==================================================
   AUTO DJ MODAL
   ================================================== */

.autodj-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.autodj-modal.hidden {
  display: none;
}

.autodj-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 42, 55, .48);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.autodj-modal-box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  padding: 24px 22px 20px;
  border: 1px solid #d9e9f3;
  border-radius: 18px;
  background: #ffffff;
  box-shadow:
    0 18px 50px rgba(22, 58, 78, .22);

  text-align: center;

  animation:
    autoDjModalOpen .18s ease-out;
}

.autodj-modal-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 13px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  background: #eaf6fd;

  font-size: 25px;
}

.autodj-modal-box h3 {
  margin: 0 0 9px;
  color: #263f4d;
  font-size: 18px;
}

.autodj-modal-box p {
  margin: 0;
  color: #425e6d;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}

.autodj-modal-box small {
  display: block;
  margin-top: 9px;

  color: #718994;
  font-size: 12px;
  line-height: 1.5;
}

.autodj-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 21px;
}

.autodj-modal-actions button {
  height: 44px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  transition: .15s ease;
}

.autodj-modal-no {
  border: 1px solid #dce6eb;
  background: #f3f7f9;
  color: #5c707b;
}

.autodj-modal-no:hover {
  background: #e9f0f3;
}

.autodj-modal-yes {
  border: 1px solid #2997d6;
  background: #2997d6;
  color: #fff;
}

.autodj-modal-yes:hover {
  background: #2189c3;
}

@keyframes autoDjModalOpen {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 480px) {
  .autodj-modal {
    padding: 15px;
  }

  .autodj-modal-box {
    max-width: 340px;
    padding: 21px 17px 17px;
    border-radius: 16px;
  }

  .autodj-modal-actions button {
    height: 43px;
  }
}


/* ==================================================
   RDX NOW PLAYING CONSOLE
   ================================================== */

.now-playing-console {
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
  padding: 17px;
  border: 1px solid #cfe7f5;
  border-radius: 17px;
  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f1f9fe 55%,
      #e7f5fd 100%
    );
  box-shadow:
    0 8px 24px rgba(35, 118, 165, .10);
}

.now-playing-console::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -60px;
  top: -75px;
  border-radius: 50%;
  background: rgba(41, 151, 214, .08);
}

.now-playing-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.live-badge {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .5px;
}

.live-badge.idle {
  background: #edf2f5;
  color: #778b95;
}

.live-badge.live {
  background: #e7f8ed;
  color: #239150;
  box-shadow:
    0 0 0 3px rgba(49, 174, 99, .08);
}

.now-playing-source {
  color: #7291a2;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .5px;
}

.now-playing-main {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 15px;
}

.now-playing-disc {
  flex: 0 0 55px;
  width: 55px;
  height: 55px;
  padding: 8px;
  border-radius: 50%;
  background:
    repeating-radial-gradient(
      circle,
      #253945 0,
      #253945 3px,
      #344d5a 4px,
      #344d5a 6px
    );
  box-shadow:
    0 5px 14px rgba(20, 55, 75, .20);
}

.now-playing-console.playing .now-playing-disc {
  animation:
    rdxDiscSpin 4s linear infinite;
}

.disc-center {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 5px solid #f7fbfd;
  border-radius: 50%;
  background: #2997d6;
  color: #fff;
  font-size: 14px;
}

.now-playing-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.now-playing-label {
  color: #2997d6;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
}

.now-playing-info strong {
  overflow: hidden;
  color: #294553;
  font-size: 14px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.now-playing-info > span:last-child {
  color: #7a929f;
  font-size: 10px;
  font-weight: 700;
}


/* EQUALIZER */

.radio-equalizer {
  position: relative;
  z-index: 1;
  height: 32px;
  margin-top: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
}

.radio-equalizer i {
  display: block;
  width: 4px;
  height: 7px;
  border-radius: 4px;
  background: #2997d6;
  transform-origin: bottom;
  animation:
    rdxEq .75s ease-in-out infinite alternate;
}

.radio-equalizer i:nth-child(2n) {
  animation-duration: .48s;
}

.radio-equalizer i:nth-child(3n) {
  animation-duration: .92s;
}

.radio-equalizer i:nth-child(4n) {
  animation-duration: .62s;
}

.radio-equalizer i:nth-child(5n) {
  animation-duration: 1.05s;
}

.radio-equalizer.paused i {
  animation-play-state: paused;
  height: 4px;
  opacity: .35;
}


/* ==================================================
   DEVICE MUSIC
   ================================================== */

.local-music-card {
  overflow: hidden;
}

.local-music-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.local-music-heading h3 {
  margin-bottom: 5px;
}

.device-music-badge {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 20px;
  background: #e9f6fd;
  color: #2788bd;
  font-size: 9px;
  font-weight: 900;
}

.hidden-file-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.music-picker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 14px;
}

.music-picker-button {
  min-width: 0;
  min-height: 68px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #d7e9f3;
  border-radius: 12px;
  background: #f8fcfe;
  color: #375a6c;
  text-align: left;
  cursor: pointer;
  transition: .16s ease;
}

.music-picker-button:hover {
  transform: translateY(-1px);
  border-color: #a9d5ed;
  background: #eff9fe;
  box-shadow:
    0 5px 14px rgba(35, 126, 178, .09);
}

.picker-icon {
  flex: 0 0 35px;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #e5f4fc;
  font-size: 18px;
}

.music-picker-button strong,
.music-picker-button small {
  display: block;
}

.music-picker-button strong {
  font-size: 11px;
}

.music-picker-button small {
  margin-top: 3px;
  color: #8297a2;
  font-size: 9px;
  font-weight: 500;
}

.selected-music-summary {
  margin-top: 12px;
  color: #557383;
  font-size: 11px;
  font-weight: 700;
}

.selected-music-list {
  max-height: 215px;
  margin-top: 9px;
  overflow-y: auto;
  border: 1px solid #e0edf4;
  border-radius: 11px;
  background: #fbfdfe;
}

.selected-music-list.empty {
  padding: 18px 10px;
}

.selected-music-empty {
  color: #8ba0aa;
  font-size: 10px;
  text-align: center;
}

.selected-track-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-bottom: 1px solid #edf3f6;
  cursor: pointer;
  transition: .12s ease;
}

.selected-track-row:last-child {
  border-bottom: 0;
}

.selected-track-row:hover {
  background: #f0f8fc;
}

.selected-track-row.active {
  background: #e7f5fd;
}

.selected-track-number {
  flex: 0 0 24px;
  color: #8aa2af;
  font-size: 9px;
  font-weight: 800;
  text-align: center;
}

.selected-track-info {
  min-width: 0;
  flex: 1;
}

.selected-track-info strong {
  display: block;
  overflow: hidden;
  color: #415f6f;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selected-track-info small {
  display: block;
  margin-top: 2px;
  color: #91a3ac;
  font-size: 8px;
}

.selected-track-play {
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  border: 0;
  border-radius: 50%;
  background: #e4f4fc;
  color: #248bc4;
  font-size: 10px;
  cursor: pointer;
}

.local-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 11px;
}

.local-action {
  height: 43px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.local-action.play {
  border: 1px solid #2997d6;
  background: #2997d6;
  color: #fff;
}

.local-action.queue {
  border: 1px solid #b9dcec;
  background: #edf8fd;
  color: #277fae;
}

.folder-sequential-button {
  width: 100%;
  height: 44px;
  margin-top: 9px;
  border: 1px solid #3ca567;
  border-radius: 10px;
  background: #ebf9f0;
  color: #27894e;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.local-action:disabled,
.folder-sequential-button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

@keyframes rdxEq {
  0% {
    height: 5px;
    opacity: .55;
  }

  100% {
    height: 29px;
    opacity: 1;
  }
}

@keyframes rdxDiscSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 430px) {

  .now-playing-console {
    padding: 14px;
    border-radius: 14px;
  }

  .now-playing-disc {
    flex-basis: 49px;
    width: 49px;
    height: 49px;
  }

  .radio-equalizer {
    gap: 2px;
  }

  .radio-equalizer i {
    width: 3px;
  }

  .music-picker-button {
    min-height: 63px;
    padding: 8px;
  }

  .picker-icon {
    flex-basis: 31px;
    width: 31px;
    height: 31px;
    font-size: 15px;
  }

  .music-picker-button strong {
    font-size: 9px;
  }

  .music-picker-button small {
    font-size: 8px;
  }

}


/* ==================================================
   LOCAL MP3 UPLOAD PROGRESS
   ================================================== */

.local-upload-progress {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(41, 151, 214, 0.08);
  border: 1px solid rgba(41, 151, 214, 0.18);
}

.local-upload-progress[hidden] {
  display: none !important;
}

.upload-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
}

.upload-progress-head strong {
  font-size: 13px;
}

.upload-progress-track {
  width: 100%;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
}

.upload-progress-bar {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    #2997d6,
    #51b9f3
  );
  transition: width .15s linear;
}

.local-upload-progress.complete
.upload-progress-bar {
  background: linear-gradient(
    90deg,
    #22a45d,
    #4ed889
  );
}


/* ==================================================
   RDX UPLOAD - PREMIUM DURUM EFEKTLERI
   ================================================== */

.local-upload-progress {
  position: relative;
  overflow: hidden;
  margin-top: 14px;
  padding: 13px 15px;
  border-radius: 15px;

  background:
    linear-gradient(
      135deg,
      rgba(41, 151, 214, .10),
      rgba(255, 255, 255, .75)
    );

  border:
    1px solid rgba(41, 151, 214, .20);

  box-shadow:
    0 5px 18px rgba(41, 151, 214, .08);
}


.upload-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 9px;

  font-size: 11px;
  font-weight: 800;

  color: #39738f;

  letter-spacing: .45px;
}


.upload-progress-head strong {
  min-width: 42px;

  text-align: right;

  color: #1687c8;

  font-size: 14px;
  font-weight: 900;
}


.upload-progress-track {
  position: relative;

  width: 100%;
  height: 11px;

  overflow: hidden;

  border-radius: 999px;

  background:
    rgba(27, 92, 126, .10);

  box-shadow:
    inset 0 1px 3px
    rgba(0, 0, 0, .10);
}


.upload-progress-bar {
  position: relative;

  width: 0%;
  height: 100%;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      #218ed0,
      #42b6f5,
      #218ed0
    );

  background-size:
    200% 100%;

  box-shadow:
    0 0 10px
    rgba(41, 151, 214, .45);

  transition:
    width .15s ease;

  animation:
    rdxUploadGlow
    1.2s linear
    infinite;
}


.upload-progress-bar::after {
  content: '';

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      110deg,
      transparent 20%,
      rgba(255,255,255,.55) 45%,
      transparent 70%
    );

  transform:
    translateX(-100%);

  animation:
    rdxUploadShine
    1.3s ease-in-out
    infinite;
}


.local-upload-progress.complete {
  border-color:
    rgba(31, 174, 98, .28);

  background:
    linear-gradient(
      135deg,
      rgba(38, 190, 108, .10),
      rgba(255,255,255,.80)
    );
}


.local-upload-progress.complete
.upload-progress-head {
  color: #258754;
}


.local-upload-progress.complete
.upload-progress-head strong {
  color: #19944f;
}


.local-upload-progress.complete
.upload-progress-bar {
  background:
    linear-gradient(
      90deg,
      #1eaa5d,
      #55dc91
    );

  box-shadow:
    0 0 10px
    rgba(34, 174, 94, .35);

  animation: none;
}


.local-upload-progress.error {
  border-color:
    rgba(220, 60, 60, .30);
}


.local-upload-progress.error
.upload-progress-bar {
  background:
    linear-gradient(
      90deg,
      #d84242,
      #f16b6b
    );

  animation: none;
}


@keyframes rdxUploadGlow {

  0% {
    background-position:
      0% 50%;
  }

  100% {
    background-position:
      200% 50%;
  }

}


@keyframes rdxUploadShine {

  0% {
    transform:
      translateX(-100%);
  }

  100% {
    transform:
      translateX(200%);
  }

}


@media (max-width: 600px) {

  .local-upload-progress {
    padding:
      11px 12px;

    border-radius:
      13px;
  }

  .upload-progress-track {
    height:
      9px;
  }

}


/* ==================================================
   RDX MP3 LIBRARY
   ================================================== */

.library-upload-button {
  width: 100%;
  height: 43px;
  margin-top: 11px;
  border: 1px solid #2997d6;
  border-radius: 11px;
  background: #2997d6;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .2px;
  cursor: pointer;
  transition: .16s ease;
}

.library-upload-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    0 5px 15px rgba(41, 151, 214, .18);
}

.library-upload-button:disabled {
  opacity: .45;
  cursor: not-allowed;
}


.library-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 17px;
  padding: 4px;
  border: 1px solid #dcecf4;
  border-radius: 12px;
  background: #f5fafc;
}

.library-tab {
  min-width: 0;
  height: 39px;
  padding: 0 7px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #688391;
  font-size: 9px;
  font-weight: 900;
  cursor: pointer;
  transition: .15s ease;
}

.library-tab.active {
  background: #fff;
  color: #238cc8;
  box-shadow:
    0 2px 9px rgba(31, 111, 155, .12);
}


.library-search-wrap {
  position: relative;
  margin-top: 11px;
}

.library-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  pointer-events: none;
}

.library-search {
  width: 100%;
  height: 42px;
  padding: 0 12px 0 36px;
  outline: none;
  border: 1px solid #d9eaf3;
  border-radius: 11px;
  background: #fbfdfe;
  color: #3f5f70;
  font-size: 11px;
  font-weight: 600;
  transition: .15s ease;
}

.library-search:focus {
  border-color: #8dc9e8;
  background: #fff;
  box-shadow:
    0 0 0 3px rgba(41, 151, 214, .08);
}


.library-list {
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid #dfedf4;
  border-radius: 12px;
  background: #fff;
}

.library-empty {
  padding: 22px 12px;
  color: #8ba0aa;
  font-size: 10px;
  text-align: center;
}


.library-item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  border-bottom: 1px solid #edf3f6;
  cursor: pointer;
  transition: .13s ease;
}

.library-item:last-child {
  border-bottom: 0;
}

.library-item:hover {
  background: #f4fafe;
}

.library-item.active {
  background: #e8f6fd;
}


.library-radio {
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #b6cfdb;
  border-radius: 50%;
}

.library-item.active .library-radio {
  border-color: #2997d6;
}

.library-item.active .library-radio::after {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2997d6;
}


.library-item-info {
  flex: 1;
  min-width: 0;
}

.library-item-title {
  display: block;
  overflow: hidden;
  color: #405f70;
  font-size: 10px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-item-meta {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #8ba0aa;
  font-size: 8px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.library-pagination {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.library-pagination button {
  height: 34px;
  border: 1px solid #d5e8f2;
  border-radius: 9px;
  background: #f5fbfe;
  color: #2788bd;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.library-pagination button:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.library-pagination span {
  color: #718a97;
  font-size: 9px;
  font-weight: 800;
  text-align: center;
}


.library-selected-info {
  margin-top: 11px;
  padding: 9px 10px;
  overflow: hidden;
  border: 1px solid #e0edf4;
  border-radius: 10px;
  background: #f9fcfd;
  color: #65808e;
  font-size: 9px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.library-delete-button {
  width: 100%;
  height: 39px;
  margin-top: 9px;
  border: 1px solid #efcaca;
  border-radius: 10px;
  background: #fff6f6;
  color: #c94a4a;
  font-size: 9px;
  font-weight: 900;
  cursor: pointer;
}

.library-delete-button:hover:not(:disabled) {
  background: #ffeded;
}

.library-delete-button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.library-delete-button[hidden] {
  display: none !important;
}


@media (max-width: 430px) {

  .library-tab {
    height: 37px;
    font-size: 8px;
  }

  .library-item {
    padding: 9px 8px;
  }

  .library-item-title {
    font-size: 9px;
  }

  .library-search {
    height: 40px;
    font-size: 10px;
  }

  .library-upload-button {
    height: 41px;
  }

}

/* ==========================================================
   KALICI DJ SIRASI
   ========================================================== */

.persistent-queue-card {
  overflow: hidden;
}

.persistent-queue-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.persistent-queue-header h3 {
  margin: 0 0 4px;
}

.persistent-queue-header small {
  display: block;
  opacity: .7;
  line-height: 1.35;
}

.persistent-queue-count {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef8ff;
  border: 1px solid #cfe9fb;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.queue-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.queue-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #dbeaf4;
  border-radius: 12px;
  background: #fff;
  box-sizing: border-box;
}

.queue-item-number {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #eef8ff;
  font-size: 12px;
  font-weight: 800;
}

.queue-item-info {
  flex: 1 1 auto;
  min-width: 0;
}

.queue-item-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.queue-item-meta {
  display: block;
  margin-top: 2px;
  opacity: .62;
  font-size: 11px;
}

.queue-item-controls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.queue-item-control {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 9px;
  border: 1px solid #d5e8f5;
  background: #f5fbff;
  cursor: pointer;
  font-weight: 800;
}

.queue-item-control:disabled {
  opacity: .35;
  cursor: default;
}

.queue-item-control.remove {
  background: #fff5f5;
  border-color: #f0d4d4;
}

.persistent-queue-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.persistent-queue-play,
.persistent-queue-clear {
  min-height: 42px;
  border-radius: 11px;
  font-weight: 800;
}

.persistent-queue-message {
  min-height: 18px;
  margin-top: 8px;
  font-size: 12px;
  text-align: center;
}

@media (max-width: 520px) {
  .queue-item {
    gap: 6px;
    padding: 8px;
  }

  .queue-item-number {
    flex-basis: 24px;
    width: 24px;
    height: 24px;
  }

  .queue-item-control {
    width: 29px;
    height: 29px;
  }

  .persistent-queue-actions {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   SIRADAKİLER - PREMIUM KONTROLLER
   ========================================================== */

.queue-item {
  position: relative;
  min-height: 54px;
  padding: 9px 10px;
  border: 1px solid rgba(119, 184, 224, .34);
  border-radius: 14px;
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f8fcff 100%
    );
  box-shadow:
    0 3px 10px rgba(44, 119, 165, .055);
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.queue-item:hover {
  border-color: rgba(72, 161, 215, .58);
  box-shadow:
    0 5px 16px rgba(44, 119, 165, .10);
}

.queue-item-number {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border: 1px solid #cae8fa;
  background:
    linear-gradient(
      180deg,
      #f3fbff,
      #e6f5ff
    );
  color: #2478aa;
  font-size: 12px;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9);
}

.queue-item-controls {
  display: grid;
  grid-template-columns:
    repeat(4, 32px);
  gap: 5px;
}

.queue-item-control {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #cce5f5;
  border-radius: 9px;
  background:
    linear-gradient(
      180deg,
      #ffffff,
      #edf8ff
    );
  color: #317ca9;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  box-shadow:
    0 2px 5px rgba(43, 117, 162, .07);
  cursor: pointer;
  transition:
    transform .12s ease,
    background .12s ease,
    border-color .12s ease;
}

.queue-item-control:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: #8fcbed;
  background: #e9f7ff;
}

.queue-item-control:active:not(:disabled) {
  transform: translateY(0);
}

.queue-item-control.position {
  background:
    linear-gradient(
      180deg,
      #58b8ee,
      #369bd4
    );
  border-color: #3194cc;
  color: #fff;
  font-size: 14px;
  text-shadow:
    0 1px 1px rgba(0,0,0,.10);
}

.queue-item-control.position:hover {
  background:
    linear-gradient(
      180deg,
      #4aafe7,
      #298dc6
    );
}

.queue-item-control.remove {
  background:
    linear-gradient(
      180deg,
      #fffafa,
      #fff0f0
    );
  border-color: #f0cece;
  color: #c95757;
}

.queue-item-control.remove:hover {
  background: #ffeaea;
  border-color: #e7adad;
}

.queue-position-editor {
  flex: 0 0 100%;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #cbe7f7;
  border-radius: 11px;
  background: #f1f9fe;
}

.queue-position-editor span {
  flex: 1 1 auto;
  color: #397493;
  font-size: 12px;
  font-weight: 700;
}

.queue-position-editor input {
  width: 62px;
  height: 34px;
  box-sizing: border-box;
  border: 1px solid #a9d6ef;
  border-radius: 8px;
  outline: none;
  background: #fff;
  color: #225f82;
  text-align: center;
  font-size: 14px;
  font-weight: 900;
}

.queue-position-editor input:focus {
  border-color: #50afe4;
  box-shadow:
    0 0 0 3px rgba(80, 175, 228, .13);
}

.queue-position-apply,
.queue-position-cancel {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 900;
}

.queue-position-apply {
  border: 1px solid #3ca3dc;
  background: #45ace5;
  color: #fff;
}

.queue-position-cancel {
  border: 1px solid #e9c8c8;
  background: #fff;
  color: #c25b5b;
}

@media (max-width: 520px) {

  .queue-item {
    flex-wrap: wrap;
    padding: 8px;
  }

  .queue-item-info {
    /*
     * numara + kontroller için alan bırak.
     */
    width: calc(100% - 172px);
  }

  .queue-item-controls {
    grid-template-columns:
      repeat(4, 29px);
    gap: 4px;
  }

  .queue-item-control {
    width: 29px;
    height: 29px;
    border-radius: 8px;
    font-size: 13px;
  }

  .queue-position-editor {
    margin-top: 2px;
  }

  .queue-position-editor span {
    font-size: 11px;
  }

  .queue-position-editor input {
    width: 54px;
  }
}

/* =========================================================
   PERSISTENT QUEUE - YOUTUBE / PLAY
   ========================================================= */

.queue-item-meta.youtube {
  color: #d92d20;
  font-weight: 700;
}

.queue-item-meta.mp3 {
  color: #52708f;
}

.queue-item-control.play {
  font-weight: 900;
  color: #0878d1;
  background: #eef8ff;
  border-color: #b9ddf8;
}

.queue-item-control.play:hover {
  background: #dcefff;
}

.queue-item-failed {
  display: block;
  margin-top: 3px;
  color: #b42318;
  font-weight: 700;
}

@media (max-width: 600px) {
  .queue-item-controls {
    gap: 4px;
  }

  .queue-item-control {
    min-width: 30px;
  }
}

/* =========================================================
   SIRADAKİLER - GENİŞ / TEK SATIR KONTROLLER
   ========================================================= */

.persistent-queue-card {
  width: 100%;
}

.queue-list {
  width: 100%;
}

.queue-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;

  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
}

.queue-item-info {
  min-width: 0;
}

.queue-item-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-item-controls {
  display: flex;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;

  /* ↑ ↓ # ▶ ✕ için yeterli alan */
  min-width: 174px;
  flex-shrink: 0;
}

.queue-item-control {
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 30px;
}


/* Telefon */
@media (max-width: 600px) {

  .queue-item {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    column-gap: 6px;
    padding: 9px 8px;
  }

  .queue-item-controls {
    min-width: 154px;
    gap: 3px;
  }

  .queue-item-control {
    width: 28px;
    min-width: 28px;
    height: 28px;
    flex-basis: 28px;
  }
}

/* =========================================================
   SIRADAKİLER - MOBİL DÜZELTME
   ========================================================= */

@media (max-width: 600px) {

  /*
   * Satır:
   * [No] [Şarkı bilgisi]
   *      [kontroller]
   *
   * Uzun şarkı isimleri artık kaybolmaz.
   */
  .queue-item {
    display: grid !important;

    grid-template-columns:
      32px minmax(0, 1fr) !important;

    grid-template-areas:
      "number info"
      "number controls";

    gap: 5px 8px !important;

    align-items: center !important;

    padding: 10px 9px !important;

    min-height: 82px;
  }


  .queue-item-number {
    grid-area: number;

    align-self: center;
  }


  .queue-item-info {
    grid-area: info;

    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    min-width: 0 !important;

    overflow: visible !important;
  }


  /*
   * ŞARKI ADI
   */
  .queue-item-title {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 0 2px 0 !important;

    font-size: 13px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;

    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;

    overflow-wrap: anywhere;
    word-break: normal;
  }


  .queue-item-meta {
    display: block !important;

    font-size: 11px !important;
    line-height: 1.2 !important;
  }


  /*
   * ↑ ↓ # ▶ ✕
   */
  .queue-item-controls {
    grid-area: controls;

    display: flex !important;
    flex-wrap: nowrap !important;

    justify-content: flex-end !important;
    align-items: center !important;

    width: 100% !important;
    min-width: 0 !important;

    gap: 5px !important;
  }


  .queue-item-control {
    width: 29px !important;
    min-width: 29px !important;
    height: 29px !important;

    flex: 0 0 29px !important;

    padding: 0 !important;
  }

}


/* =========================================================
   SIRAYI ÇAL + SIRAYI TEMİZLE
   ========================================================= */

.persistent-queue-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 10px;

  margin-top: 12px;
}


#persistentQueuePlayButton,
#persistentQueueClearButton {
  width: 100%;

  min-height: 44px;

  border-radius: 12px;

  font-size: 13px;
  font-weight: 800;

  cursor: pointer;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    background .15s ease;
}


/* SIRAYI ÇAL */
#persistentQueuePlayButton {
  color: #ffffff;

  border: 1px solid #199be6;

  background:
    linear-gradient(
      135deg,
      #32b4f4,
      #168ed8
    );

  box-shadow:
    0 5px 14px rgba(22, 142, 216, .20);
}


/* SIRAYI TEMİZLE */
#persistentQueueClearButton {
  color: #d74747;

  border: 1px solid #ffd0d0;

  background:
    linear-gradient(
      135deg,
      #fffafa,
      #fff1f1
    );

  box-shadow:
    0 5px 14px rgba(215, 71, 71, .08);
}


#persistentQueuePlayButton:hover:not(:disabled),
#persistentQueueClearButton:hover:not(:disabled) {
  transform: translateY(-1px);
}


#persistentQueuePlayButton:disabled,
#persistentQueueClearButton:disabled {
  opacity: .48;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}


/*
 * Çok dar telefonlarda bile yan yana kalsın.
 */
@media (max-width: 600px) {

  .persistent-queue-actions {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    gap: 7px;
  }


  #persistentQueuePlayButton,
  #persistentQueueClearButton {
    min-width: 0;
    min-height: 42px;

    padding: 8px 5px;

    font-size: 11px;
  }

}

/* =========================================================
   MOBİL SIRADAKİLER - SON TASARIM
   ========================================================= */

@media (max-width: 600px) {

  .queue-item {
    display: grid !important;

    grid-template-columns: 32px minmax(0, 1fr) !important;

    grid-template-areas:
      "number info"
      "number controls";

    column-gap: 8px !important;
    row-gap: 5px !important;

    padding: 10px 9px !important;

    min-height: 82px !important;
  }


  .queue-item-number {
    grid-area: number !important;

    align-self: center !important;
  }


  .queue-item-info {
    grid-area: info !important;

    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    overflow: visible !important;
  }


  /* ŞARKI İSMİ */
  .queue-item-title {
    display: block !important;

    width: 100% !important;

    margin: 0 0 3px 0 !important;

    font-size: 13px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;

    white-space: normal !important;

    overflow: visible !important;
    text-overflow: unset !important;

    overflow-wrap: anywhere !important;
  }


  /* MP3 / YOUTUBE BİLGİSİ */
  .queue-item-meta {
    display: block !important;

    font-size: 11px !important;
    line-height: 1.25 !important;

    white-space: normal !important;
  }


  /* KONTROLLER */
  .queue-item-controls {
    grid-area: controls !important;

    display: flex !important;

    width: 100% !important;
    min-width: 0 !important;

    justify-content: flex-end !important;
    align-items: center !important;

    gap: 5px !important;

    flex-wrap: nowrap !important;
  }


  .queue-item-control {
    width: 29px !important;
    min-width: 29px !important;
    height: 29px !important;

    flex: 0 0 29px !important;

    padding: 0 !important;
  }


  /* ==========================================
     SIRAYI ÇAL / TEMİZLE
     ========================================== */

  .persistent-queue-actions {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;

    gap: 8px !important;

    width: 100% !important;

    margin-top: 12px !important;
  }


  .persistent-queue-actions button {
    width: 100% !important;

    min-width: 0 !important;
    height: 44px !important;

    border-radius: 12px !important;

    font-size: 11px !important;
    font-weight: 800 !important;

    padding: 0 5px !important;

    box-sizing: border-box !important;
  }


  .persistent-queue-play {
    color: #fff !important;

    border: 1px solid #1595dc !important;

    background:
      linear-gradient(
        135deg,
        #35b7f2,
        #168bd4
      ) !important;

    box-shadow:
      0 4px 12px
      rgba(22, 139, 212, .22) !important;
  }


  .persistent-queue-clear {
    color: #d64545 !important;

    border: 1px solid #ffcaca !important;

    background:
      linear-gradient(
        135deg,
        #fffafa,
        #fff0f0
      ) !important;

    box-shadow:
      0 4px 12px
      rgba(214, 69, 69, .10) !important;
  }


  .persistent-queue-actions button:not(:disabled):active {
    transform: scale(.97);
  }

}

/* =========================================================
   AKTİF SIRA PARÇASI - EQUALIZER
   ========================================================= */

.queue-item-control.play.playing {
  position: relative;

  color: #fff !important;

  border-color: #168fd4 !important;

  background:
    linear-gradient(
      135deg,
      #31b6f2,
      #087fc5
    ) !important;

  box-shadow:
    0 0 0 2px rgba(24, 153, 218, .10),
    0 4px 12px rgba(24, 153, 218, .28) !important;

  cursor: default;
}


/* Küçük hareketli ekolayzır */

.queue-equalizer {
  display: inline-flex;

  align-items: flex-end;
  justify-content: center;

  gap: 2px;

  width: 15px;
  height: 16px;
}


.queue-equalizer i {
  display: block;

  width: 3px;
  height: 5px;

  border-radius: 2px;

  background: #fff;

  animation:
    queueEqualizer
    .75s
    ease-in-out
    infinite alternate;
}


.queue-equalizer i:nth-child(1) {
  animation-delay: -.55s;
}

.queue-equalizer i:nth-child(2) {
  animation-delay: -.25s;
}

.queue-equalizer i:nth-child(3) {
  animation-delay: -.70s;
}

.queue-equalizer i:nth-child(4) {
  animation-delay: -.40s;
}


@keyframes queueEqualizer {

  0% {
    height: 4px;
  }

  35% {
    height: 9px;
  }

  70% {
    height: 14px;
  }

  100% {
    height: 7px;
  }

}


/* Aktif satırı da hafif belirginleştir */

.queue-item:has(
  .queue-item-control.play.playing
) {
  border-color: #8bd2f7 !important;

  box-shadow:
    0 3px 14px
    rgba(23, 147, 211, .12) !important;
}


@media (max-width: 600px) {

  .queue-item-control.play.playing {
    box-shadow:
      0 0 0 2px rgba(24, 153, 218, .10),
      0 3px 9px rgba(24, 153, 218, .25) !important;
  }

  .queue-equalizer {
    width: 14px;
    height: 15px;
  }

  .queue-equalizer i {
    width: 3px;
  }

}



/* =========================================================
   DJ PASSWORD UI
   ========================================================= */

/* DJ ŞİFRE KARTI */

.dj-password-card {
  overflow: hidden;
}

.dj-password-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dj-password-heading h3 {
  margin: 0;
}

.dj-password-heading .sub {
  margin-top: 5px;
}


.dj-password-button {
  width: 100%;

  min-height: 46px;

  margin-top: 14px;

  border: 1px solid #168fd3;
  border-radius: 12px;

  color: #fff;

  background:
    linear-gradient(
      135deg,
      #35b8f3,
      #138bd1
    );

  font-size: 13px;
  font-weight: 800;

  cursor: pointer;

  box-shadow:
    0 5px 15px
    rgba(19, 139, 209, .20);

  transition:
    transform .15s ease,
    box-shadow .15s ease;
}

.dj-password-button:hover {
  transform: translateY(-1px);

  box-shadow:
    0 7px 18px
    rgba(19, 139, 209, .27);
}

.dj-password-button:active {
  transform: scale(.98);
}


.dj-password-message {
  margin-top: 8px;

  font-size: 12px;
  text-align: center;
}


/* MODAL */

.dj-password-modal {
  position: fixed;

  inset: 0;

  z-index: 99999;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 18px;
}

.dj-password-modal.hidden {
  display: none;
}


.dj-password-modal-backdrop {
  position: absolute;

  inset: 0;

  background:
    rgba(0, 0, 0, .55);

  backdrop-filter:
    blur(4px);
}


.dj-password-dialog {
  position: relative;

  z-index: 1;

  width: min(
    430px,
    100%
  );

  box-sizing: border-box;

  border-radius: 18px;

  background: #fff;

  box-shadow:
    0 25px 70px
    rgba(0, 0, 0, .28);

  overflow: hidden;
}


.dj-password-dialog-header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 17px 18px;

  border-bottom:
    1px solid #edf0f3;
}


.dj-password-dialog-header strong {
  display: block;

  font-size: 16px;
}


.dj-password-dialog-header small {
  display: block;

  margin-top: 3px;

  color: #7c8792;

  font-size: 11px;
}


.dj-password-close {
  width: 34px;
  height: 34px;

  border: 0;
  border-radius: 9px;

  background: #f3f5f7;

  color: #59636d;

  font-size: 15px;

  cursor: pointer;
}


.dj-password-form {
  padding: 18px;
}


.dj-password-form label {
  display: block;

  margin-bottom: 13px;

  color: #3c4650;

  font-size: 12px;
  font-weight: 700;
}


.dj-password-form input {
  display: block;

  width: 100%;

  box-sizing: border-box;

  height: 44px;

  margin-top: 6px;

  padding: 0 12px;

  border:
    1px solid #dfe4e8;

  border-radius: 10px;

  background: #fafbfc;

  outline: none;

  font-size: 14px;

  transition:
    border-color .15s ease,
    box-shadow .15s ease;
}


.dj-password-form input:focus {
  border-color: #1599df;

  box-shadow:
    0 0 0 3px
    rgba(21, 153, 223, .10);

  background: #fff;
}


.dj-password-modal-message {
  min-height: 20px;

  margin: 5px 0 12px;

  color: #d34a4a;

  font-size: 12px;

  text-align: center;
}


.dj-password-actions {
  display: grid;

  grid-template-columns:
    1fr 1.35fr;

  gap: 8px;
}


.dj-password-actions button {
  min-height: 43px;

  border-radius: 11px;

  font-size: 11px;
  font-weight: 800;

  cursor: pointer;
}


.dj-password-cancel {
  border:
    1px solid #dfe3e7;

  background: #f6f7f8;

  color: #59636d;
}


.dj-password-save {
  border:
    1px solid #148dd2;

  background:
    linear-gradient(
      135deg,
      #35b8f3,
      #138bd1
    );

  color: #fff;
}


.dj-password-actions button:disabled {
  opacity: .55;

  cursor: not-allowed;
}


@media (max-width: 600px) {

  .dj-password-modal {
    padding: 12px;
  }

  .dj-password-dialog {
    border-radius: 16px;
  }

  .dj-password-form {
    padding: 15px;
  }

  .dj-password-actions {
    grid-template-columns:
      1fr 1.25fr;
  }

}



/* =========================================================
   RDX_PUBLIC_RADIO_PLAYER_V2
   ========================================================= */

.public-radio-card {
  position: relative;
  overflow: hidden;

  margin-bottom: 16px;
  padding: 16px;

  border: 1px solid #d6eaf6;
  border-radius: 16px;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f4fbff
    );

  box-shadow:
    0 8px 24px
    rgba(32, 119, 169, .09);
}


.public-radio-card::before {
  content: '';

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 3px;

  background:
    linear-gradient(
      90deg,
      #39baf2,
      #1189cf
    );
}


.public-radio-header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 10px;
}


.public-radio-live-area {
  display: flex;

  align-items: center;

  min-width: 0;

  gap: 10px;
}


.public-radio-live-area > div {
  min-width: 0;
}


.public-radio-dot {
  width: 10px;
  height: 10px;

  flex: 0 0 10px;

  border-radius: 50%;

  background: #aab4bc;
}


.public-radio-dot.live {
  background: #ef3f48;

  box-shadow:
    0 0 0 5px
    rgba(239, 63, 72, .10);

  animation:
    rdxRadioLivePulse
    1.3s
    ease-in-out
    infinite;
}


@keyframes rdxRadioLivePulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .55;
    transform: scale(.78);
  }

}


#publicRadioStatus {
  display: block;

  color: #203746;

  font-size: 13px;
  font-weight: 900;
}


#publicRadioDJ {
  display: block;

  margin-top: 3px;

  color: #788894;

  font-size: 10px;
}


.public-radio-badge {
  flex: 0 0 auto;

  padding: 5px 9px;

  border-radius: 999px;

  color: #77848e;

  background: #edf2f5;

  font-size: 9px;
  font-weight: 900;
}


.public-radio-badge.live {
  color: #df343d;

  background: #fff0f1;
}


/* ŞARKI */

.public-radio-song {
  display: flex;

  align-items: center;

  gap: 11px;

  margin-top: 14px;
  padding: 11px;

  border: 1px solid #e0eef6;
  border-radius: 13px;

  background:
    rgba(255,255,255,.88);
}


.public-radio-song-icon {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  border-radius: 11px;

  color: white;

  background:
    linear-gradient(
      135deg,
      #3dbbf2,
      #1088cf
    );

  font-size: 22px;
  font-weight: 900;

  box-shadow:
    0 5px 12px
    rgba(16,136,207,.18);
}


.public-radio-song-info {
  min-width: 0;
}


.public-radio-song-info small {
  display: block;

  margin-bottom: 3px;

  color: #87949e;

  font-size: 9px;
  font-weight: 800;

  letter-spacing: .6px;
}


#publicRadioTrack {
  display: block;

  color: #263b49;

  font-size: 13px;
  font-weight: 800;

  line-height: 1.35;

  white-space: normal;
  overflow-wrap: anywhere;
}


/* PLAYER */

.public-radio-audio-box {
  margin-top: 11px;

  padding: 6px;

  border: 1px solid #dbeaf3;
  border-radius: 13px;

  background: #f8fcff;
}


#publicRadioAudio {
  display: block;

  width: 100%;
  height: 40px;
}


.public-radio-message {
  margin-top: 6px;

  color: #82909a;

  font-size: 10px;

  text-align: center;
}


/* DJ GELİNCE ÜST ÇİZGİYİ BİRAZ CANLANDIR */

.public-radio-card.dj-online::before {
  background:
    linear-gradient(
      90deg,
      #ef4444,
      #ff7379,
      #168fd4
    );
}


@media (max-width: 600px) {

  .public-radio-card {
    margin-bottom: 12px;

    padding: 13px;

    border-radius: 14px;
  }


  #publicRadioStatus {
    font-size: 11px;
  }


  #publicRadioDJ {
    font-size: 9px;
  }


  .public-radio-song {
    margin-top: 11px;

    padding: 9px;
  }


  .public-radio-song-icon {
    width: 34px;
    height: 34px;

    flex-basis: 34px;

    font-size: 19px;
  }


  #publicRadioTrack {
    font-size: 12px;
  }


  #publicRadioAudio {
    height: 38px;
  }

}



/* =========================================================
   RDX_CUSTOM_RADIO_PLAYER_V1
   ========================================================= */


/* ---------------------------------------------------------
   PC: PLAYER + LOGIN AYNI HİZADA / AYNI GENİŞLİK
   --------------------------------------------------------- */

@media (min-width: 701px) {

  #publicRadioCard,
  #loginPanel {
    width: 100% !important;
    max-width: 440px !important;

    box-sizing: border-box;

    margin-left: auto !important;
    margin-right: auto !important;
  }


  #publicRadioCard {
    margin-bottom: 18px !important;
  }

}


/* ---------------------------------------------------------
   PLAYER
   --------------------------------------------------------- */

.rdx-radio-player {
  display: grid;

  grid-template-columns:
    48px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 12px;

  margin-top: 12px;

  padding: 10px 12px;

  border:
    1px solid #d7eaf5;

  border-radius: 14px;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f4faff
    );

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.9),
    0 4px 14px
    rgba(27,118,169,.07);
}


/* Gerçek HTML5 audio motor olarak kalıyor */

#publicRadioAudio {
  display: none !important;
}


/* ---------------------------------------------------------
   PLAY
   --------------------------------------------------------- */

.rdx-radio-play {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 46px;
  height: 46px;

  padding: 0;

  border: 0;
  border-radius: 50%;

  color: #fff;

  background:
    linear-gradient(
      135deg,
      #41bdf3,
      #138bd0
    );

  box-shadow:
    0 6px 15px
    rgba(19,139,208,.25);

  font-size: 17px;
  font-weight: 900;

  cursor: pointer;

  transition:
    transform .15s ease,
    box-shadow .15s ease;
}


.rdx-radio-play:hover {
  transform: scale(1.05);

  box-shadow:
    0 7px 18px
    rgba(19,139,208,.32);
}


.rdx-radio-play:active {
  transform: scale(.94);
}


.rdx-radio-play.playing {
  background:
    linear-gradient(
      135deg,
      #159bdc,
      #0878ba
    );
}


/* ---------------------------------------------------------
   ORTA ALAN
   --------------------------------------------------------- */

.rdx-player-middle {
  min-width: 0;
}


.rdx-player-line {
  display: flex;

  align-items: center;

  gap: 9px;
}


.rdx-player-live-text {
  min-width: 0;
}


.rdx-player-live-text strong {
  display: block;

  color: #237cae;

  font-size: 10px;
  font-weight: 900;

  letter-spacing: .45px;
}


.rdx-player-live-text small {
  display: block;

  margin-top: 2px;

  color: #7c8c97;

  font-size: 9px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ---------------------------------------------------------
   EQUALIZER
   --------------------------------------------------------- */

.rdx-player-equalizer {
  display: flex;

  align-items: flex-end;
  justify-content: center;

  gap: 2px;

  width: 25px;
  height: 20px;

  flex: 0 0 25px;
}


.rdx-player-equalizer i {
  display: block;

  width: 3px;

  border-radius: 3px;

  background:
    linear-gradient(
      to top,
      #168fd3,
      #50c4f5
    );

  animation:
    rdxPlayerEq
    .72s
    ease-in-out
    infinite alternate;
}


.rdx-player-equalizer i:nth-child(1) {
  height: 7px;
  animation-delay: -.4s;
}

.rdx-player-equalizer i:nth-child(2) {
  height: 15px;
  animation-delay: -.7s;
}

.rdx-player-equalizer i:nth-child(3) {
  height: 10px;
  animation-delay: -.2s;
}

.rdx-player-equalizer i:nth-child(4) {
  height: 18px;
  animation-delay: -.6s;
}

.rdx-player-equalizer i:nth-child(5) {
  height: 8px;
  animation-delay: -.3s;
}


.rdx-player-equalizer.paused i {
  animation-play-state: paused;

  height: 4px !important;

  opacity: .45;
}


@keyframes rdxPlayerEq {

  0% {
    height: 4px;
  }

  35% {
    height: 10px;
  }

  70% {
    height: 19px;
  }

  100% {
    height: 7px;
  }

}


/* ---------------------------------------------------------
   CANLI AKIŞ ÇİZGİSİ
   --------------------------------------------------------- */

.rdx-live-track {
  position: relative;

  height: 3px;

  margin-top: 7px;

  overflow: hidden;

  border-radius: 999px;

  background: #dcebf3;
}


.rdx-live-track span {
  position: absolute;

  top: 0;
  bottom: 0;

  width: 42%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      transparent,
      #23a9e7,
      #5ac8f4,
      transparent
    );

  animation:
    rdxLiveTrack
    1.7s
    linear
    infinite;
}


@keyframes rdxLiveTrack {

  from {
    left: -45%;
  }

  to {
    left: 105%;
  }

}


/* ---------------------------------------------------------
   SES
   --------------------------------------------------------- */

.rdx-volume {
  display: flex;

  align-items: center;

  gap: 6px;
}


.rdx-volume-icon {
  font-size: 13px;
}


.rdx-volume input {
  width: 72px;

  accent-color: #1598dc;

  cursor: pointer;
}


/* ---------------------------------------------------------
   ÜSTTEKİ ŞARKI ALANI
   --------------------------------------------------------- */

#publicRadioTrack {
  color: #18384b !important;

  font-size: 13px !important;

  font-weight: 900 !important;
}


/* ---------------------------------------------------------
   MOBİL
   --------------------------------------------------------- */

@media (max-width: 700px) {

  #publicRadioCard,
  #loginPanel {
    width: 100% !important;

    max-width: none !important;

    box-sizing: border-box;
  }


  .rdx-radio-player {
    grid-template-columns:
      43px
      minmax(0,1fr)
      auto;

    gap: 9px;

    padding: 9px;
  }


  .rdx-radio-play {
    width: 41px;
    height: 41px;

    font-size: 15px;
  }


  .rdx-volume input {
    width: 52px;
  }


  .rdx-volume-icon {
    display: none;
  }


  .rdx-player-equalizer {
    width: 21px;

    flex-basis: 21px;
  }


  .rdx-player-live-text strong {
    font-size: 9px;
  }


  .rdx-player-live-text small {
    max-width: 125px;
  }

}


/* Çok dar telefon */

@media (max-width: 390px) {

  .rdx-volume input {
    width: 42px;
  }


  .rdx-player-live-text small {
    max-width: 100px;
  }

}



/* ============================================================
   RDX_YOUTUBE_PREVIEW_V1
   ============================================================ */

.youtube-preview {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(49, 132, 253, .18);
  border-radius: 16px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 8px 24px rgba(37,99,235,.07);
  display: flex;
  gap: 13px;
  align-items: stretch;
}

.youtube-preview[hidden] {
  display: none !important;
}

.youtube-thumbnail {
  width: 145px;
  min-width: 145px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
  background: #eef5ff;
  align-self: center;
}

.youtube-preview-body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
}

.youtube-preview-badge {
  font-size: 11px;
  font-weight: 800;
  color: #dc2626;
}

.youtube-preview-title {
  display: block;
  width: 100%;
  font-size: 14px;
  line-height: 1.35;
  color: #172033;
  overflow-wrap: anywhere;
}

.youtube-preview-status {
  min-height: 17px;
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
}

.youtube-preview-play {
  margin-top: 3px;
  min-height: 36px;
  padding: 8px 15px;
  font-size: 12px;
}

@media (max-width: 560px) {

  .youtube-preview {
    align-items: flex-start;
  }

  .youtube-thumbnail {
    width: 112px;
    min-width: 112px;
  }

  .youtube-preview-title {
    font-size: 13px;
  }

  .youtube-preview-play {
    width: 100%;
  }

}

@media (max-width: 390px) {

  .youtube-preview {
    flex-direction: column;
  }

  .youtube-thumbnail {
    width: 100%;
    min-width: 0;
  }

}



/* ============================================================
   RDX_YOUTUBE_GETIR_V1
   ============================================================ */

.youtube-fetch-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}

.youtube-fetch-row #youtubeUrl {
  flex: 1;
  min-width: 0;
}

.youtube-fetch-button {
  flex: 0 0 auto;
  min-width: 82px;
  padding-left: 16px;
  padding-right: 16px;
  white-space: nowrap;
}

@media (max-width: 480px) {

  .youtube-fetch-row {
    gap: 6px;
  }

  .youtube-fetch-button {
    min-width: 72px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 12px;
  }

}



/* ============================================================
   RDX_YOUTUBE_QUOTA_V1
   ============================================================ */

.youtube-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.youtube-section-head h3 {
  margin: 0;
}

.youtube-quota-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 27px;
  padding: 5px 10px;
  border-radius: 999px;

  background: #eef7ff;
  border: 1px solid #cfe8fb;

  color: #1677b8;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.youtube-quota-badge.unlimited {
  background: #eefbf5;
  border-color: #cceede;
  color: #16845b;
}

.youtube-quota-badge.full {
  background: #fff1f2;
  border-color: #ffd3d8;
  color: #d9364f;
}

@media (max-width: 480px) {

  .youtube-section-head {
    gap: 8px;
  }

  .youtube-quota-badge {
    padding: 5px 8px;
    font-size: 10px;
  }

}



/* ============================================================
   RDX RADIO PLAYER WIDE + VOLUME PERCENT FINAL
   ============================================================ */

/*
 * PC:
 * Üst radyo kartı artık 440px'e kilitlenmez.
 * Ana container / alttaki büyük panel ile aynı genişliktedir.
 */
@media (min-width: 701px) {

  #publicRadioCard {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 18px !important;

    box-sizing: border-box;
  }

  .rdx-radio-player {
    grid-template-columns:
      48px
      minmax(0, 1fr)
      205px;
  }


  .rdx-volume {
    width: 205px;

    display: grid;

    grid-template-columns:
      18px
      minmax(0, 1fr)
      42px;

    align-items: center;

    gap: 7px;
  }


  .rdx-volume input {
    width: 100% !important;
    min-width: 0;
  }

}


/* Yüzde değeri */
.rdx-volume-value {
  min-width: 38px;

  color: #527183;

  font-size: 10px;
  font-weight: 800;

  text-align: right;

  white-space: nowrap;
}


/*
 * Slider'ın tamamı kullanılabilir.
 */
#rdxVolume {
  display: block;

  width: 100%;

  margin: 0;
  padding: 0;

  cursor: pointer;

  accent-color: #1598dc;
}


/* MOBIL */
@media (max-width: 700px) {

  .rdx-volume {
    display: grid;

    grid-template-columns:
      minmax(45px, 1fr)
      34px;

    align-items: center;

    gap: 5px;
  }


  /*
   * Mobilde eski kural hoparlör ikonunu zaten gizliyor.
   */
  .rdx-volume input {
    width: 100% !important;
    min-width: 45px;
  }


  .rdx-volume-value {
    min-width: 31px;

    font-size: 9px;
  }

}


/* Çok dar telefon */
@media (max-width: 390px) {

  .rdx-volume {
    grid-template-columns:
      minmax(38px, 1fr)
      31px;
  }


  .rdx-volume input {
    width: 100% !important;
    min-width: 38px;
  }

}



/* ============================================================
   RDX PC WIDTH FINAL
   Player + DJ giris karti ana container ile ayni genislikte
   ============================================================ */

@media (min-width: 701px) {

  #publicRadioCard,
  #loginPanel {
    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box;
  }

  #publicRadioCard {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
  }

  #loginPanel {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
  }

}



/* RDX_MOBILE_MIC_PANEL_V1 */

.mobile-mic-fab,
.mobile-mic-overlay {
  display: none;
}


@media (max-width: 768px) {

  .mobile-mic-fab {

    position: fixed;

    right: 12px;
    top: 50%;

    transform:
      translateY(-50%);

    z-index: 9000;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    padding: 0;

    border:
      2px solid
      rgba(255,255,255,.92);

    border-radius: 50%;

    background:
      linear-gradient(
        145deg,
        #269eea,
        #0875c5
      );

    box-shadow:
      0 12px 30px
      rgba(0,91,157,.30);

    cursor: pointer;

    -webkit-tap-highlight-color:
      transparent;
  }


  .mobile-mic-fab-icon {

    font-size: 27px;

    line-height: 1;
  }


  .mobile-mic-fab-dot {

    position: absolute;

    right: 1px;
    top: 1px;

    width: 12px;
    height: 12px;

    border:
      2px solid #fff;

    border-radius: 50%;

    background:
      #aab6be;
  }


  .mobile-mic-fab.is-live
  .mobile-mic-fab-dot {

    background:
      #22ca6b;

    box-shadow:
      0 0 0 5px
      rgba(34,202,107,.17);
  }


  .mobile-mic-overlay {

    position: fixed;

    inset: 0;

    z-index: 9100;

    align-items: flex-end;
    justify-content: center;

    background:
      rgba(9,30,45,.45);

    backdrop-filter:
      blur(4px);

    -webkit-backdrop-filter:
      blur(4px);
  }


  .mobile-mic-overlay:not([hidden]) {

    display: flex;
  }


  .mobile-mic-sheet {

    width: 100%;
    max-width: 520px;

    box-sizing: border-box;

    padding:
      9px
      18px
      calc(
        20px +
        env(safe-area-inset-bottom)
      );

    border-radius:
      24px
      24px
      0
      0;

    background:
      linear-gradient(
        180deg,
        #fff,
        #f1f8fc
      );

    box-shadow:
      0 -16px 45px
      rgba(0,50,84,.24);

    animation:
      rdxMobileMicIn
      .22s ease-out;
  }


  @keyframes rdxMobileMicIn {

    from {

      transform:
        translateY(100%);
    }

    to {

      transform:
        translateY(0);
    }
  }


  .mobile-mic-grabber {

    width: 44px;
    height: 5px;

    margin:
      0 auto 14px;

    border-radius:
      20px;

    background:
      #d2dce3;
  }


  .mobile-mic-header {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;
  }


  .mobile-mic-header small {

    display: block;

    margin-bottom: 3px;

    color:
      #1685d0;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1.5px;
  }


  .mobile-mic-header h3 {

    margin: 0;

    color:
      #173b52;

    font-size: 20px;
  }


  .mobile-mic-close {

    width: 39px;
    height: 39px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background:
      #e9f2f8;

    color:
      #42657c;

    font-size: 27px;

    cursor: pointer;
  }


  .mobile-mic-status {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 19px;

    padding:
      11px 12px;

    border:
      1px solid
      #d9e9f3;

    border-radius:
      12px;

    background:
      #f9fcfe;

    color:
      #647f91;

    font-size: 13px;
    font-weight: 800;
  }


  .mobile-mic-status i {

    width: 9px;
    height: 9px;

    flex: 0 0 9px;

    border-radius: 50%;

    background:
      #adb9c1;
  }


  .mobile-mic-status.is-live {

    color:
      #16814a;

    border-color:
      rgba(34,202,107,.27);

    background:
      rgba(34,202,107,.08);
  }


  .mobile-mic-status.is-live i {

    background:
      #22ca6b;

    box-shadow:
      0 0 0 5px
      rgba(34,202,107,.12);
  }


  .mobile-mic-level-title {

    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-top: 19px;
    margin-bottom: 8px;

    color:
      #698293;

    font-size: 11px;
    font-weight: 900;
  }


  .mobile-mic-meter {

    height: 14px;

    overflow: hidden;

    border-radius:
      20px;

    background:
      #dce8ef;

    box-shadow:
      inset 0 1px 3px
      rgba(0,0,0,.08);
  }


  #mobileMicMeter {

    width: 0%;
    height: 100%;

    border-radius:
      inherit;

    background:
      linear-gradient(
        90deg,
        #39b9f2,
        #168be0
      );

    transition:
      width .07s linear;
  }


  .mobile-mic-toggle {

    width: 100%;

    min-height: 55px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    margin-top: 21px;

    border: 0;

    border-radius:
      15px;

    background:
      linear-gradient(
        135deg,
        #1a94e5,
        #0874c5
      );

    color: #fff;

    box-shadow:
      0 9px 22px
      rgba(8,116,197,.23);

    font-size: 15px;

    cursor: pointer;
  }


  .mobile-mic-toggle.is-live {

    background:
      linear-gradient(
        135deg,
        #ef5252,
        #d83434
      );

    box-shadow:
      0 9px 22px
      rgba(216,52,52,.23);
  }


  .mobile-mic-toggle:disabled {

    opacity: .60;
  }


  .mobile-mic-help {

    margin:
      13px 4px 0;

    text-align: center;

    color:
      #7c909d;

    font-size: 11px;

    line-height: 1.45;
  }

}



/* ==========================================================
   RDX_SIDE_BROADCAST_CONTROLS_V1
   PC + MOBIL SABIT YAYIN KONTROLLERI
   ========================================================== */

.rdx-side-controls {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1250;

  display: flex;
  flex-direction: column;
  gap: 10px;

  padding: 9px;

  border: 1px solid rgba(72, 145, 210, .24);
  border-radius: 20px;

  background: rgba(255, 255, 255, .94);
  box-shadow:
    0 14px 38px rgba(32, 84, 128, .16),
    0 3px 10px rgba(32, 84, 128, .08);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.rdx-side-control {
  width: 74px;
  min-height: 62px;

  border: 1px solid #d7e8f7;
  border-radius: 15px;

  background: #f7fbff;
  color: #245d8c;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;

  cursor: pointer;

  font-family: inherit;
  font-weight: 700;

  box-shadow: 0 4px 12px rgba(39, 103, 157, .08);

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background .16s ease,
    border-color .16s ease;
}

.rdx-side-control:hover {
  transform: translateY(-2px);
  border-color: #a9d2f2;
  background: #edf7ff;
  box-shadow: 0 7px 17px rgba(39, 103, 157, .14);
}

.rdx-side-control:active {
  transform: scale(.97);
}

.rdx-side-icon {
  font-size: 23px;
  line-height: 1;
}

.rdx-side-label {
  font-size: 11px;
  line-height: 1.15;
}

.rdx-side-mic.is-live {
  color: #b92727;
  border-color: #f2baba;
  background: #fff1f1;
  box-shadow:
    0 0 0 4px rgba(217, 67, 67, .08),
    0 7px 18px rgba(184, 45, 45, .13);
}

.rdx-side-autodj.is-active {
  color: #176b43;
  border-color: #a9dfc4;
  background: #ecfbf3;
  box-shadow:
    0 0 0 4px rgba(44, 163, 105, .08),
    0 7px 18px rgba(36, 126, 82, .13);
}

.rdx-side-leave {
  color: #a93636;
  border-color: #f0d1d1;
  background: #fff8f8;
}

.rdx-side-leave:hover {
  border-color: #efb5b5;
  background: #fff0f0;
}


/* Mobil */
@media (max-width: 768px) {

  .rdx-side-controls {
    right: 8px;
    top: 50%;
    gap: 7px;
    padding: 6px;
    border-radius: 17px;
  }

  .rdx-side-control {
    width: 52px;
    min-height: 52px;
    border-radius: 13px;
    padding: 4px 2px;
  }

  .rdx-side-icon {
    font-size: 20px;
  }

  .rdx-side-label {
    font-size: 8.5px;
  }

  /*
   * Eski alt mikrofon/AutoDJ/cikis kontrolleri
   * JS tarafinda mevcut kalir; sag panel ayni motorlari
   * tetikler. Layouttaki mevcut kartlara dokunmuyoruz.
   */
}


/* Dar telefon */
@media (max-width: 390px) {

  .rdx-side-controls {
    right: 5px;
  }

  .rdx-side-control {
    width: 48px;
    min-height: 49px;
  }

  .rdx-side-label {
    font-size: 8px;
  }
}



/* ==========================================================
   RDX_BROADCAST_CONNECT_V2
   ========================================================== */

.rdx-broadcast-connect {
  width: 100%;
  margin: 10px 0;
  padding: 14px 16px;
  border: 0;
  border-radius: 12px;
  font-weight: 800;
  cursor: pointer;
  background: #e7f5ff;
  color: #075985;
  box-shadow:
    inset 0 0 0 1px rgba(14, 165, 233, .24);
}

.rdx-broadcast-connect:hover {
  filter: brightness(.98);
}

.rdx-broadcast-connect.is-live {
  background: #dcfce7;
  color: #166534;
  cursor: default;
}

.rdx-broadcast-connect:disabled {
  opacity: .82;
  cursor: default;
}


/* ==========================================================
   RDX_BROADCAST_MODAL_V2
   ========================================================== */

.rdx-broadcast-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: 18px;
}

.rdx-broadcast-modal.hidden {
  display: none;
}

.rdx-broadcast-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .48);
  backdrop-filter: blur(3px);
}

.rdx-broadcast-modal-box {
  position: relative;
  width: min(92vw, 390px);
  background: #fff;
  border-radius: 18px;
  padding: 22px;
  text-align: center;
  box-shadow:
    0 24px 70px rgba(15, 23, 42, .25);
}

.rdx-broadcast-modal-icon {
  font-size: 34px;
  margin-bottom: 6px;
}

.rdx-broadcast-modal-box h3 {
  margin: 0 0 10px;
}

.rdx-broadcast-modal-box p {
  margin: 0;
  line-height: 1.55;
  color: #475569;
}

.rdx-broadcast-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.rdx-broadcast-modal-actions button {
  flex: 1;
  border: 0;
  border-radius: 10px;
  padding: 12px;
  font-weight: 800;
  cursor: pointer;
}

.rdx-broadcast-modal-no {
  background: #eef2f7;
  color: #334155;
}

.rdx-broadcast-modal-yes {
  background: #0ea5e9;
  color: #fff;
}

@media (max-width: 520px) {

  .rdx-broadcast-modal-box {
    width: min(94vw, 360px);
    padding: 20px 16px;
  }

}



/* ==========================================================
   RDX_TOP_BROADCAST_STATE_V1
   ========================================================== */

.public-radio-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.public-radio-takeover {
  border: 1px solid rgba(14, 165, 233, .25);
  border-radius: 999px;

  padding: 6px 11px;

  background: #eaf7ff;
  color: #0879b8;

  font-size: 9px;
  font-weight: 900;

  cursor: pointer;
  white-space: nowrap;

  transition:
    transform .15s ease,
    background .15s ease;
}

.public-radio-takeover:hover {
  transform: translateY(-1px);
  background: #dff3ff;
}

.public-radio-takeover.is-live {
  border-color: rgba(34, 197, 94, .22);
  background: #eafaf0;
  color: #16803b;
  cursor: default;
}

.public-radio-takeover.hidden {
  display: none;
}

@media (max-width: 520px) {

  .public-radio-header {
    gap: 6px;
  }

  .public-radio-header-actions {
    gap: 5px;
  }

  .public-radio-takeover {
    padding: 6px 8px;
    font-size: 8px;
  }

  .public-radio-badge {
    padding: 5px 7px;
  }

}



/* ==========================================================
   RDX_SIDE_FINAL_V3
   ========================================================== */

/* DJ paneline girilmeden sag menu gorunmez */
#rdxSideControls.rdx-session-hidden {
  display: none !important;
}

/* Mikrofon KAPALI */
.rdx-side-mic.is-off {
  background: #fff0f0 !important;
  border-color: #efaaaa !important;
  color: #b42323 !important;
  box-shadow:
    0 7px 18px rgba(180, 35, 35, .14) !important;
}

/* Mikrofon ACIK */
.rdx-side-mic.is-live {
  background: #eafaf1 !important;
  border-color: #99d9b8 !important;
  color: #147a45 !important;
  box-shadow:
    0 7px 18px rgba(20, 122, 69, .16) !important;
}

/* Sag YAYINA BAGLAN */
.rdx-side-takeover {
  background: #eff9ff;
  border-color: #b7dff5;
  color: #0875ad;
}

.rdx-side-takeover:hover {
  background: #e2f5ff;
}

.rdx-side-takeover.is-live {
  background: #eafaf1;
  border-color: #99d9b8;
  color: #147a45;
  cursor: default;
}

.rdx-side-takeover:disabled {
  opacity: .95;
}




/* ==========================================================
   RDX_DJ_LEFT_DOCK_V1
   ========================================================== */


/* Eski DJ TestDJ / Panel oturumu aktif kartı */
.rdx-old-live-card-hidden {
  display: none !important;
}


/* Büyük ekolayzırlı yayın kartı artık en üstte */
#djPanel > #nowPlayingConsole.rdx-now-playing-top {
  margin-top: 0;
  margin-bottom: 14px;
}


/* ==========================================================
   SOL DUGMELER
   ========================================================== */

.rdx-dj-left-dock {
  position: fixed;

  left: 8px;
  top: 50%;

  transform: translateY(-50%);

  z-index: 15020;

  display: flex;
  flex-direction: column;

  gap: 8px;
}


.rdx-dj-left-dock.rdx-session-hidden {
  display: none !important;
}


.rdx-left-dock-button {
  width: 58px;
  min-height: 60px;

  padding: 7px 4px;

  border: 1px solid #b8dff4;
  border-radius: 16px;

  background: rgba(247, 252, 255, .98);
  color: #0877ae;

  box-shadow:
    0 8px 24px rgba(16, 82, 118, .15);

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 4px;

  cursor: pointer;

  font-family: inherit;

  transition:
    transform .18s ease,
    background .18s ease,
    border-color .18s ease;
}


.rdx-left-dock-button:hover {
  transform: translateX(2px);
}


.rdx-left-dock-button.is-active {
  background: #e7f7ff;
  border-color: #55b9eb;
}


.rdx-left-dock-icon {
  width: 30px;
  height: 30px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #2ca7df;
  color: #fff;

  font-size: 14px;

  box-shadow:
    0 4px 12px rgba(44, 167, 223, .25);
}


.rdx-left-dock-text {
  font-size: 9px;
  line-height: 1;

  font-weight: 800;
}


/* YouTube düğmesi kırmızı */
.rdx-left-youtube-button {
  color: #c52222;
  border-color: #f0b5b5;
  background: rgba(255, 248, 248, .98);
}


.rdx-left-youtube-button:hover,
.rdx-left-youtube-button.is-active {
  background: #fff0f0;
  border-color: #ea8585;
}


.rdx-left-youtube-button .rdx-left-dock-icon {
  background: #f12626;

  box-shadow:
    0 4px 12px rgba(220, 30, 30, .22);
}


/* ==========================================================
   SOL KAYAN PENCERE
   ========================================================== */

.rdx-left-drawer {
  position: fixed;

  left: 74px;
  top: 50%;

  width: min(390px, calc(100vw - 96px));
  max-height: calc(100vh - 30px);

  z-index: 15010;

  background: #f8fcff;

  border: 1px solid #b8dff4;
  border-radius: 20px;

  box-shadow:
    0 18px 55px rgba(17, 68, 97, .23);

  overflow: hidden;

  opacity: 0;
  visibility: hidden;

  /*
   * Kapalıyken sola çekilmiş.
   */
  transform:
    translate(-28px, -50%)
    scale(.98);

  pointer-events: none;

  transition:
    transform .24s ease,
    opacity .20s ease,
    visibility .20s ease;
}


/*
 * Açılırken sağa doğru gelir.
 */
.rdx-left-drawer.is-open {
  opacity: 1;
  visibility: visible;

  transform:
    translate(0, -50%)
    scale(1);

  pointer-events: auto;
}


.rdx-left-drawer-head {
  min-height: 52px;

  padding: 9px 11px 9px 15px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  background:
    linear-gradient(
      135deg,
      #eef9ff,
      #ffffff
    );

  border-bottom:
    1px solid #d7ebf6;
}


.rdx-left-drawer-head > div {
  min-width: 0;
}


.rdx-left-drawer-head small {
  display: block;

  margin-bottom: 1px;

  color: #7b98a8;

  font-size: 8px;
  font-weight: 800;

  letter-spacing: .08em;
}


.rdx-left-drawer-head strong {
  display: block;

  color: #143b51;

  font-size: 13px;
}


.rdx-youtube-drawer-head strong {
  color: #c52222;
}


.rdx-left-drawer-hide {
  flex: 0 0 auto;

  border: 1px solid #c9e4f3;
  border-radius: 999px;

  padding: 6px 10px;

  background: #fff;
  color: #327a9f;

  font-family: inherit;
  font-size: 10px;
  font-weight: 800;

  cursor: pointer;
}


.rdx-left-drawer-hide:hover {
  background: #edf8fe;
}


.rdx-left-drawer-body {
  max-height: calc(100vh - 95px);

  overflow-x: hidden;
  overflow-y: auto;

  padding: 10px;
}


/* ==========================================================
   PLAYER CEKMECESI
   ========================================================== */

#publicRadioCard.rdx-drawer-public-radio {
  margin: 0 !important;

  width: 100% !important;
  max-width: none !important;

  border-radius: 14px !important;

  box-shadow: none !important;
}


#publicRadioCard.rdx-drawer-public-radio
.public-radio-header {
  margin-bottom: 8px;
}


#publicRadioCard.rdx-drawer-public-radio
.public-radio-song {
  margin-bottom: 8px;
}


/* ==========================================================
   YOUTUBE CEKMECESI
   ========================================================== */

.rdx-drawer-youtube-card {
  width: 100% !important;

  margin: 0 !important;

  box-shadow: none !important;

  border-radius: 14px !important;
}


.rdx-drawer-youtube-card
.youtube-fetch-row {
  grid-template-columns:
    minmax(0, 1fr)
    auto;
}


.rdx-drawer-youtube-card
.youtube-preview {
  margin-top: 10px;
}


/* ==========================================================
   MOBIL
   ========================================================== */

@media (max-width: 700px) {

  .rdx-dj-left-dock {
    left: 5px;

    gap: 6px;
  }


  .rdx-left-dock-button {
    width: 48px;
    min-height: 52px;

    border-radius: 14px;

    padding: 5px 3px;
  }


  .rdx-left-dock-icon {
    width: 27px;
    height: 27px;

    font-size: 12px;
  }


  .rdx-left-dock-text {
    font-size: 8px;
  }


  .rdx-left-drawer {
    left: 58px;

    width:
      calc(100vw - 66px);

    max-height:
      calc(100dvh - 18px);

    border-radius: 16px;
  }


  .rdx-left-drawer-body {
    max-height:
      calc(100dvh - 76px);

    padding: 7px;
  }


  .rdx-left-drawer-head {
    min-height: 48px;

    padding:
      7px
      8px
      7px
      11px;
  }


  /*
   * Mobil player biraz daha kompakt.
   */
  #publicRadioCard.rdx-drawer-public-radio {
    padding: 10px !important;
  }


  #publicRadioCard.rdx-drawer-public-radio
  .public-radio-header {
    gap: 5px;
  }


  #publicRadioCard.rdx-drawer-public-radio
  .public-radio-song {
    padding: 8px;
  }


  #publicRadioCard.rdx-drawer-public-radio
  .rdx-radio-player {
    padding: 8px;
  }


  /*
   * YouTube URL + GETİR mobilde de tek satır.
   */
  .rdx-drawer-youtube-card
  .youtube-fetch-row {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      auto !important;

    gap: 6px;
  }


  .rdx-drawer-youtube-card
  #youtubeUrl {
    min-width: 0;
  }


  .rdx-drawer-youtube-card
  .youtube-fetch-button {
    width: auto !important;

    padding-left: 11px;
    padding-right: 11px;
  }


  .rdx-drawer-youtube-card
  .youtube-thumbnail {
    max-width: 100%;
  }

}


/* Çok dar telefon */
@media (max-width: 390px) {

  .rdx-left-dock-button {
    width: 44px;
  }


  .rdx-left-drawer {
    left: 53px;

    width:
      calc(100vw - 59px);
  }


  .rdx-left-dock-text {
    font-size: 7px;
  }

}




/* ==========================================================
   RDX_PLAYLIST_MIC_UI_V1
   ========================================================== */


/* ----------------------------------------------------------
   ÇALMA LİSTESİ DAHA KOMPAKT
   ---------------------------------------------------------- */

.persistent-queue-card {
  padding: 14px !important;
}


.persistent-queue-header {
  margin-bottom: 9px !important;
}


.persistent-queue-header h3 {
  font-size: 15px !important;
  margin: 0 !important;
}


.persistent-queue-header small {
  font-size: 10px !important;
}


.queue-list {
  gap: 5px !important;
}


.queue-item {
  min-height: 44px !important;

  padding:
    6px
    7px !important;

  gap: 7px !important;

  border-radius: 10px !important;
}


.queue-item-number {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;

  font-size: 10px !important;
}


.queue-item-info {
  min-width: 0 !important;
}


.queue-item-title {
  display: block !important;

  font-size: 11px !important;
  line-height: 1.25 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  max-width: 100% !important;
}


.queue-item-info small,
.queue-item-meta {
  font-size: 8px !important;
  line-height: 1.15 !important;
}


.queue-item button {
  min-width: 28px !important;
  min-height: 28px !important;

  padding: 4px 6px !important;

  font-size: 10px !important;

  border-radius: 8px !important;
}


/* Sayfalama nedeniyle gizlenen parçalar */
.queue-item.rdx-page-hidden {
  display: none !important;
}


/* ----------------------------------------------------------
   ÇALMA LİSTESİ SAYFALAMA
   ---------------------------------------------------------- */

.rdx-queue-pager {
  margin-top: 10px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 5px;
}


.rdx-queue-pager[hidden] {
  display: none !important;
}


.rdx-queue-page-arrow,
.rdx-queue-page-number {
  width: 30px;
  height: 30px;

  padding: 0;

  border:
    1px solid #c8e4f3;

  border-radius: 9px;

  background: #f5fbff;
  color: #24779f;

  font-size: 11px;
  font-weight: 800;

  cursor: pointer;
}


.rdx-queue-page-arrow {
  font-size: 18px;
}


.rdx-queue-page-number.is-active {
  background: #269fd7;
  border-color: #269fd7;
  color: #fff;
}


.rdx-queue-page-arrow:disabled {
  opacity: .35;
  cursor: default;
}


/* ----------------------------------------------------------
   UST CANLI YAYIN DURUMU
   ---------------------------------------------------------- */

#djPanel > .public-radio-header.rdx-public-header-top {
  width: 100%;

  box-sizing: border-box;

  margin:
    0
    0
    8px !important;

  padding:
    9px
    11px !important;

  border:
    1px solid #cfe8f5;

  border-top:
    3px solid #269fd7;

  border-radius:
    15px;

  background:
    rgba(250, 253, 255, .98);

  box-shadow:
    0 6px 18px rgba(25, 91, 126, .07);
}


/*
 * Artık player çekmecesindeki publicRadioCard'ın
 * üst header'ı dışarıda olduğu için player daha kompakt.
 */
#publicRadioCard.rdx-drawer-public-radio {
  padding-top: 10px !important;
}


/* ----------------------------------------------------------
   ALT ESKI MIKROFON KARTI
   ---------------------------------------------------------- */

.rdx-old-mic-section-hidden {
  display: none !important;
}


/* ----------------------------------------------------------
   YENI KONUS POPUP
   ---------------------------------------------------------- */

.rdx-talk-overlay .mobile-mic-panel {
  width:
    min(
      360px,
      calc(100vw - 28px)
    ) !important;

  border-radius:
    24px !important;

  padding:
    18px !important;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #f3faff
    ) !important;

  border:
    1px solid #cbe6f4 !important;

  box-shadow:
    0 24px 70px
    rgba(19, 66, 91, .25) !important;
}


/*
 * Eski "Mikrofonu Aç" butonu artık
 * yuvarlak mikrofon kontrolü.
 */
.rdx-talk-toggle {
  width:
    118px !important;

  height:
    118px !important;

  min-width:
    118px !important;

  margin:
    18px auto 10px !important;

  padding:
    0 !important;

  border-radius:
    50% !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    4px !important;

  border:
    4px solid
    rgba(255,255,255,.9) !important;

  cursor:
    pointer !important;

  transition:
    transform .16s ease,
    background .18s ease,
    box-shadow .18s ease !important;
}


.rdx-talk-toggle:hover {
  transform:
    scale(1.035);
}


/* KAPALI = KIRMIZI */
.rdx-talk-toggle.is-stopped {
  background:
    linear-gradient(
      145deg,
      #ff6868,
      #df3131
    ) !important;

  color:
    #fff !important;

  box-shadow:
    0 0 0 7px
      rgba(222, 49, 49, .10),
    0 13px 30px
      rgba(184, 36, 36, .27) !important;
}


/* AÇIK = YEŞİL */
.rdx-talk-toggle.is-talking {
  background:
    linear-gradient(
      145deg,
      #43d17e,
      #179652
    ) !important;

  color:
    #fff !important;

  box-shadow:
    0 0 0 8px
      rgba(28, 169, 89, .12),
    0 13px 32px
      rgba(22, 135, 71, .29) !important;
}


.rdx-talk-mic-icon {
  display:
    block;

  font-size:
    39px;

  line-height:
    1;
}


.rdx-talk-label {
  display:
    block;

  font-size:
    12px;

  line-height:
    1;

  font-weight:
    900;

  letter-spacing:
    .02em;
}


#mobileMicStatus {
  text-align:
    center;

  color:
    #c03a3a;

  font-size:
    11px;

  font-weight:
    800;
}


#mobileMicStatus.is-live {
  color:
    #16894c;
}


/*
 * Meter kısmını biraz modernleştir.
 */
.rdx-talk-overlay .mobile-mic-meter,
.rdx-talk-overlay #mobileMicMeter {
  border-radius:
    999px !important;

  overflow:
    hidden !important;
}


/* ==========================================================
   MOBIL
   ========================================================== */

@media (max-width: 700px) {

  .persistent-queue-card {
    padding:
      11px !important;
  }


  .queue-item {
    min-height:
      40px !important;

    padding:
      5px
      6px !important;
  }


  .queue-item-title {
    font-size:
      10px !important;
  }


  .queue-item-info small,
  .queue-item-meta {
    font-size:
      7.5px !important;
  }


  .rdx-queue-page-arrow,
  .rdx-queue-page-number {
    width:
      28px;

    height:
      28px;
  }


  #djPanel >
  .public-radio-header.rdx-public-header-top {
    padding:
      8px
      9px !important;

    margin-bottom:
      7px !important;

    border-radius:
      13px;
  }


  .rdx-talk-overlay
  .mobile-mic-panel {
    width:
      calc(100vw - 24px) !important;

    padding:
      15px !important;

    border-radius:
      21px !important;
  }


  .rdx-talk-toggle {
    width:
      104px !important;

    height:
      104px !important;

    min-width:
      104px !important;
  }


  .rdx-talk-mic-icon {
    font-size:
      34px;
  }

}



/* RDX_SIDE_CONTROLS_HIDE_V1 */


/* ==========================================================
   YOUTUBE PLAY = KIRMIZI / BEYAZ
   ========================================================== */

/*
 * YouTube çekmecesindeki oynatma düğmeleri.
 * Mevcut tema kurallarının üstüne yazılır.
 */
.rdx-drawer-youtube-card
.youtube-play-button,

.rdx-drawer-youtube-card
.youtube-preview-play,

.rdx-drawer-youtube-card
.youtube-play,

.rdx-drawer-youtube-card
button[data-action="play"] {

  background:
    #e52323 !important;

  border-color:
    #e52323 !important;

  color:
    #ffffff !important;

  box-shadow:
    0 5px 14px
    rgba(205, 24, 24, .22) !important;
}


.rdx-drawer-youtube-card
.youtube-play-button:hover,

.rdx-drawer-youtube-card
.youtube-preview-play:hover,

.rdx-drawer-youtube-card
.youtube-play:hover,

.rdx-drawer-youtube-card
button[data-action="play"]:hover {

  background:
    #c91818 !important;

  border-color:
    #c91818 !important;

  color:
    #ffffff !important;
}


/*
 * İçindeki ikon/SVG de mutlaka beyaz.
 */
.rdx-drawer-youtube-card
.youtube-play-button svg,

.rdx-drawer-youtube-card
.youtube-preview-play svg,

.rdx-drawer-youtube-card
.youtube-play svg,

.rdx-drawer-youtube-card
button[data-action="play"] svg {

  fill:
    #ffffff !important;

  color:
    #ffffff !important;
}


/* ==========================================================
   GİZLE
   ========================================================== */

.rdx-controls-hide-button {

  color:
    #5d7180 !important;

  background:
    rgba(
      248,
      251,
      253,
      .98
    ) !important;

  border-color:
    #cfdde5 !important;
}


.rdx-controls-hide-button
.rdx-left-dock-icon {

  background:
    #718896 !important;

  color:
    #fff !important;

  font-size:
    23px !important;

  line-height:
    1 !important;
}


/*
 * Gizle basıldığında sol ve sağ
 * kontrol gruplarının tamamı gider.
 */
body.rdx-controls-hidden
.rdx-dj-left-dock,

body.rdx-controls-hidden
#rdxSideControls {

  display:
    none !important;
}


/*
 * Açık Player / YouTube çekmecesi de
 * görünmez.
 */
body.rdx-controls-hidden
.rdx-left-drawer {

  display:
    none !important;
}


/* ==========================================================
   GÖSTER
   ========================================================== */

.rdx-controls-show-button {

  position:
    fixed;

  left:
    5px;

  top:
    50%;

  transform:
    translateY(-50%);

  z-index:
    16050;

  width:
    48px;

  min-height:
    54px;

  padding:
    5px 3px;

  border:
    1px solid #b9ddeb;

  border-radius:
    14px;

  background:
    rgba(
      255,
      255,
      255,
      .97
    );

  color:
    #277fa8;

  box-shadow:
    0 8px 24px
    rgba(
      16,
      82,
      118,
      .17
    );

  font-family:
    inherit;

  font-weight:
    800;

  cursor:
    pointer;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    2px;
}


.rdx-controls-show-button:not([hidden]) {

  display:
    flex;
}


.rdx-controls-show-button[hidden] {

  display:
    none !important;
}


.rdx-controls-show-button > span {

  width:
    28px;

  height:
    28px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    50%;

  background:
    #269fd7;

  color:
    #fff;

  font-size:
    22px;

  line-height:
    1;
}


.rdx-controls-show-button > small {

  font-size:
    8px;

  font-weight:
    800;

  line-height:
    1;
}


@media (min-width: 701px) {

  .rdx-controls-show-button {

    left:
      8px;

    width:
      56px;

    min-height:
      58px;
  }
}



/*
 * ============================================================
 * RDX_QUEUE_ACTIVE_MOVED_STYLE_V1
 * ============================================================
 */


/*
 * O AN YAYINDA OLAN SATIR
 */
.queue-item.rdx-queue-active {
  background: #080808 !important;
  border-color: #000 !important;
  color: #fff !important;
  box-shadow:
    0 4px 14px
    rgba(0, 0, 0, .20);
}


.queue-item.rdx-queue-active
.queue-item-number,

.queue-item.rdx-queue-active
.queue-item-title,

.queue-item.rdx-queue-active
.queue-item-info,

.queue-item.rdx-queue-active
.queue-item-meta,

.queue-item.rdx-queue-active
.queue-item-meta.mp3,

.queue-item.rdx-queue-active
.queue-item-meta.youtube,

.queue-item.rdx-queue-active
.queue-item-failed {
  color: #fff !important;
}


.queue-item.rdx-queue-active
.queue-item-meta {
  opacity: .82;
}


/*
 * AKTIF SATIRDA KONTROL BUTONLARI
 */
.queue-item.rdx-queue-active
.queue-item-control {
  background: #252525 !important;
  border-color: #555 !important;
  color: #fff !important;
}


.queue-item.rdx-queue-active
.queue-item-control:hover {
  background: #3b3b3b !important;
  border-color: #777 !important;
}


.queue-item.rdx-queue-active
.queue-item-control:disabled {
  background: #171717 !important;
  border-color: #333 !important;
  color: #777 !important;
  opacity: 1 !important;
}


.queue-item.rdx-queue-active
.queue-item-control.play {
  background: #fff !important;
  border-color: #fff !important;
  color: #080808 !important;
}


.queue-item.rdx-queue-active
.queue-item-control.remove {
  background: #43151b !important;
  border-color: #7f1d1d !important;
  color: #fecaca !important;
}


/*
 * EQUALIZER AKTIF SATIRDA
 */
.queue-item.rdx-queue-active
.queue-equalizer i {
  background: currentColor;
}


/*
 * ------------------------------------------------------------
 * TASINDIKTAN SONRA KISA YESIL FLASH
 * ------------------------------------------------------------
 *
 * Bu kural active'den SONRA oldugu icin,
 * çalan parça bile taşınırsa önce yeşil olur,
 * sonra sınıf kalkınca tekrar siyaha döner.
 */
.queue-item.rdx-queue-moved {
  background: #22c55e !important;
  border-color: #16a34a !important;
  color: #052e16 !important;
  box-shadow:
    0 0 0 2px
    rgba(34, 197, 94, .18),
    0 5px 16px
    rgba(22, 163, 74, .20);

  transition:
    background .28s ease,
    border-color .28s ease,
    color .28s ease,
    box-shadow .28s ease;
}


.queue-item.rdx-queue-moved
.queue-item-number,

.queue-item.rdx-queue-moved
.queue-item-title,

.queue-item.rdx-queue-moved
.queue-item-info,

.queue-item.rdx-queue-moved
.queue-item-meta,

.queue-item.rdx-queue-moved
.queue-item-meta.mp3,

.queue-item.rdx-queue-moved
.queue-item-meta.youtube {
  color: #052e16 !important;
}


.queue-item.rdx-queue-moved
.queue-item-control {
  background: #dcfce7 !important;
  border-color: #15803d !important;
  color: #14532d !important;
}


.queue-item.rdx-queue-moved
.queue-item-control:hover {
  background: #bbf7d0 !important;
}


.queue-item.rdx-queue-moved
.queue-item-control.remove {
  background: #fff !important;
  border-color: #b91c1c !important;
  color: #b91c1c !important;
}


@media (max-width: 600px) {

  .queue-item.rdx-queue-active,
  .queue-item.rdx-queue-moved {
    transition:
      background .22s ease,
      border-color .22s ease,
      color .22s ease;
  }
}




/*
 * ============================================================
 * RDX_TAKEOVER_SUCCESS_NOTICE_V1
 * ============================================================
 */

.rdx-takeover-success-notice {
  position: fixed;

  z-index: 150000;

  top: 18px;
  left: 50%;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 9px;

  min-width: 220px;

  max-width:
    calc(100vw - 30px);

  padding:
    12px 18px;

  border:
    1px solid #22c55e;

  border-radius:
    13px;

  background:
    #16a34a;

  color:
    #fff;

  font-size:
    14px;

  font-weight:
    900;

  letter-spacing:
    .15px;

  box-shadow:
    0 10px 30px
    rgba(22, 163, 74, .28);

  opacity: 0;

  pointer-events: none;

  transform:
    translate(
      -50%,
      -25px
    );

  transition:
    opacity .25s ease,
    transform .25s ease;
}


.rdx-takeover-success-notice.show {
  opacity: 1;

  transform:
    translate(
      -50%,
      0
    );
}


.rdx-takeover-success-icon {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 23px;
  height: 23px;

  flex:
    0 0 23px;

  border-radius:
    50%;

  background:
    #fff;

  color:
    #15803d;

  font-size:
    14px;

  font-weight:
    950;
}


@media (max-width: 600px) {

  .rdx-takeover-success-notice {
    top: 10px;

    min-width: 0;

    width:
      calc(100vw - 28px);

    box-sizing:
      border-box;

    padding:
      11px 14px;

    font-size:
      13px;
  }
}



/*
 * ============================================================
 * RDX_ACTIVE_PLAYING_LIVE_DOT_V1
 * ============================================================
 *
 * Aktif çalan siyah satırın solundaki sıra yuvarlağı
 * kırmızı canlı yayın lambasına dönüşür.
 */

.queue-item.rdx-queue-active
.queue-item-number {
  position: relative;

  background: #ef4444 !important;
  border-color: #ef4444 !important;

  color: #fff !important;

  box-shadow:
    0 0 0 0
    rgba(239, 68, 68, .65);

  animation:
    rdxPlayingLivePulse
    1.15s
    ease-in-out
    infinite;
}


/*
 * İçte daha parlak merkez noktası.
 */
.queue-item.rdx-queue-active
.queue-item-number::after {
  content: "";

  position: absolute;

  width: 6px;
  height: 6px;

  top: 50%;
  left: 50%;

  border-radius: 50%;

  background: #fff;

  transform:
    translate(
      -50%,
      -50%
    );

  opacity: .88;

  animation:
    rdxPlayingLiveCore
    1.15s
    ease-in-out
    infinite;
}


/*
 * Dış kırmızı yayılma.
 */
@keyframes rdxPlayingLivePulse {

  0% {
    background: #b91c1c;
    box-shadow:
      0 0 0 0
      rgba(239, 68, 68, .70);
  }

  50% {
    background: #ff3030;
    box-shadow:
      0 0 0 7px
      rgba(239, 68, 68, .08);
  }

  100% {
    background: #b91c1c;
    box-shadow:
      0 0 0 0
      rgba(239, 68, 68, 0);
  }
}


@keyframes rdxPlayingLiveCore {

  0%,
  100% {
    opacity: .45;
    transform:
      translate(
        -50%,
        -50%
      )
      scale(.7);
  }

  50% {
    opacity: 1;
    transform:
      translate(
        -50%,
        -50%
      )
      scale(1);
  }
}


/*
 * Yeşil taşıma flash'ı sırasında kırmızı canlı lambayı
 * kısa süre gizle. Flash bitince otomatik geri gelir.
 */
.queue-item.rdx-queue-active.rdx-queue-moved
.queue-item-number {
  background: #dcfce7 !important;
  border-color: #15803d !important;
  color: #14532d !important;
  animation: none !important;
  box-shadow: none !important;
}

.queue-item.rdx-queue-active.rdx-queue-moved
.queue-item-number::after {
  display: none;
}



/*
 * ============================================================
 * RDX_YOUTUBE_RED_PLAYER_COMPACT_V1
 * ============================================================
 */


/*
 * ------------------------------------------------------------
 * SOL YOUTUBE BUTONU
 * ------------------------------------------------------------
 * Play simgesi kesin beyaz, yuvarlak kesin kirmizi.
 */

.rdx-left-youtube-button
.rdx-left-dock-icon {
  background: #ef1b1b !important;
  color: #ffffff !important;

  border:
    1px solid
    #d90f0f !important;

  box-shadow:
    0 4px 12px
    rgba(220, 20, 20, .28) !important;
}


/*
 * İçeride span/svg/icon gibi ek eleman varsa
 * maviyi tamamen ez.
 */
.rdx-left-youtube-button
.rdx-left-dock-icon * {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}


/*
 * Hover ve aktifken de maviye dönmesin.
 */
.rdx-left-youtube-button:hover
.rdx-left-dock-icon,

.rdx-left-youtube-button.is-active
.rdx-left-dock-icon {
  background: #d90f0f !important;
  color: #ffffff !important;

  border-color:
    #bd0c0c !important;
}


/*
 * ------------------------------------------------------------
 * ÜST PLAYER
 * ------------------------------------------------------------
 */

.rdx-radio-player {
  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto !important;

  column-gap:
    8px !important;
}


/*
 * Orta alan mümkün olduğunca genişlesin.
 */
.rdx-player-middle {
  min-width: 0 !important;
  width: 100% !important;
}


.rdx-player-line {
  min-width: 0 !important;
}


.rdx-player-live-text {
  min-width: 0 !important;
  width: 100% !important;
}


/*
 * TEST FM / radyo adı tam görünsün.
 */
.rdx-player-live-text
strong,
#rdxPlayerState {
  display: block !important;

  max-width: none !important;

  overflow: visible !important;
  text-overflow: clip !important;

  white-space: nowrap !important;

  line-height: 1.15 !important;
}


/*
 * CANLI YAYIN / durum yazısı da kırpılmasın.
 */
.rdx-player-live-text
small,
#publicRadioMessage {
  display: block !important;

  max-width: none !important;

  overflow: visible !important;
  text-overflow: clip !important;

  white-space: nowrap !important;

  line-height: 1.15 !important;
}


/*
 * SES BÖLÜMÜNÜ DARALT
 */
.rdx-volume {
  flex:
    0 0 auto !important;

  width:
    auto !important;

  min-width:
    0 !important;

  gap:
    4px !important;
}


/*
 * Slider artık daha kısa.
 */
.rdx-volume input,
#rdxVolume {
  width:
    62px !important;

  min-width:
    62px !important;

  max-width:
    62px !important;
}


/*
 * Yüzde yazısı varsa gereksiz genişlik kaplamasın.
 */
.rdx-volume-value,
#rdxVolumeValue {
  min-width:
    29px !important;

  width:
    29px !important;

  font-size:
    9px !important;

  text-align:
    right !important;
}


/*
 * Hoparlör ikonu da biraz küçülsün.
 */
.rdx-volume-icon {
  font-size:
    13px !important;
}


/*
 * ------------------------------------------------------------
 * MOBİL
 * ------------------------------------------------------------
 */

@media (max-width: 700px) {

  .rdx-radio-player {
    grid-template-columns:
      40px
      minmax(0, 1fr)
      auto !important;

    gap:
      6px !important;
  }


  .rdx-radio-play {
    width:
      38px !important;

    height:
      38px !important;
  }


  /*
   * Telefonda slider daha da kısa.
   */
  .rdx-volume input,
  #rdxVolume {
    width:
      42px !important;

    min-width:
      42px !important;

    max-width:
      42px !important;
  }


  /*
   * Mobilde hoparlör zaten gereksiz yer kaplıyor.
   */
  .rdx-volume-icon {
    display:
      none !important;
  }


  .rdx-volume-value,
  #rdxVolumeValue {
    min-width:
      25px !important;

    width:
      25px !important;

    font-size:
      8px !important;
  }


  #rdxPlayerState {
    font-size:
      10px !important;
  }


  #publicRadioMessage {
    font-size:
      9px !important;
  }
}


/*
 * Çok dar telefon.
 */
@media (max-width: 390px) {

  .rdx-volume input,
  #rdxVolume {
    width:
      34px !important;

    min-width:
      34px !important;

    max-width:
      34px !important;
  }


  .rdx-volume-value,
  #rdxVolumeValue {
    display:
      none !important;
  }


  #rdxPlayerState {
    font-size:
      9px !important;
  }


  #publicRadioMessage {
    font-size:
      8px !important;
  }
}




/*
 * ============================================================
 * RDX_YOUTUBE_FORCE_RED_V2
 * ============================================================
 *
 * Sol YouTube butonundaki PLAY simgesinde herhangi bir
 * eski mavi stil kalmasin.
 */

button.rdx-left-youtube-button
.rdx-left-dock-icon,

.rdx-left-youtube-button
.rdx-left-dock-icon,

.rdx-left-youtube-button:hover
.rdx-left-dock-icon,

.rdx-left-youtube-button:focus
.rdx-left-dock-icon,

.rdx-left-youtube-button:active
.rdx-left-dock-icon,

.rdx-left-youtube-button.is-active
.rdx-left-dock-icon {
  background:
    #ff0000 !important;

  background-color:
    #ff0000 !important;

  background-image:
    none !important;

  color:
    #ffffff !important;

  -webkit-text-fill-color:
    #ffffff !important;

  border-color:
    #d90000 !important;

  box-shadow:
    0 4px 12px
    rgba(220, 0, 0, .30) !important;
}


/*
 * PLAY karakteri span/i/svg ile geliyorsa da beyaz.
 */
.rdx-left-youtube-button
.rdx-left-dock-icon span,

.rdx-left-youtube-button
.rdx-left-dock-icon i,

.rdx-left-youtube-button
.rdx-left-dock-icon b,

.rdx-left-youtube-button
.rdx-left-dock-icon strong {
  color:
    #ffffff !important;

  -webkit-text-fill-color:
    #ffffff !important;

  background:
    transparent !important;
}


/*
 * SVG kullaniliyorsa.
 */
.rdx-left-youtube-button
.rdx-left-dock-icon svg {
  color:
    #ffffff !important;

  fill:
    #ffffff !important;

  stroke:
    #ffffff !important;
}


.rdx-left-youtube-button
.rdx-left-dock-icon svg path,

.rdx-left-youtube-button
.rdx-left-dock-icon svg polygon,

.rdx-left-youtube-button
.rdx-left-dock-icon svg circle {
  fill:
    #ffffff !important;

  stroke:
    #ffffff !important;
}


/*
 * Pseudo-element ile PLAY çizilmişse.
 */
.rdx-left-youtube-button
.rdx-left-dock-icon::before,

.rdx-left-youtube-button
.rdx-left-dock-icon::after {
  color:
    #ffffff !important;

  -webkit-text-fill-color:
    #ffffff !important;
}


/*
 * YouTube butonunun dış rengi.
 */
.rdx-left-youtube-button {
  color:
    #d90000 !important;

  border-color:
    #f3aaaa !important;

  background:
    #fff7f7 !important;
}


.rdx-left-youtube-button:hover,
.rdx-left-youtube-button.is-active {
  color:
    #bb0000 !important;

  border-color:
    #e45c5c !important;

  background:
    #fff0f0 !important;
}



/*
 * ============================================================
 * RDX_DESKTOP_MIC_MODAL_V1
 * ============================================================
 *
 * Mevcut mobileMicOverlay PC'de de kullanilsin.
 * Mobil davranis bozulmaz.
 */


/*
 * Hidden attribute her yerde kesin gizlesin.
 */
#mobileMicOverlay[hidden] {
  display:
    none !important;
}


/*
 * PC / genel overlay.
 */
#mobileMicOverlay:not([hidden]) {
  position:
    fixed !important;

  inset:
    0 !important;

  z-index:
    25000 !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  padding:
    20px !important;

  box-sizing:
    border-box !important;

  background:
    rgba(9,30,45,.52) !important;

  backdrop-filter:
    blur(5px);

  -webkit-backdrop-filter:
    blur(5px);
}


/*
 * PC'de ortada pencere.
 */
#mobileMicOverlay
.mobile-mic-sheet {
  width:
    min(460px, calc(100vw - 40px)) !important;

  max-width:
    460px !important;

  max-height:
    calc(100vh - 50px) !important;

  overflow-y:
    auto !important;

  box-sizing:
    border-box !important;

  padding:
    18px !important;

  border:
    1px solid #cfe7f4 !important;

  border-radius:
    20px !important;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #f2f9fd
    ) !important;

  box-shadow:
    0 24px 70px
    rgba(5,40,65,.28) !important;
}


/*
 * PC'de alttan cekme cubuguna gerek yok.
 */
#mobileMicOverlay
.mobile-mic-grabber {
  display:
    none;
}


/*
 * Header düzeni.
 */
#mobileMicOverlay
.mobile-mic-header {
  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    space-between !important;

  gap:
    12px !important;

  margin-bottom:
    14px !important;
}


/*
 * Kapat butonu PC'de belirgin olsun.
 */
#mobileMicOverlay
.mobile-mic-close {
  flex:
    0 0 auto;

  width:
    34px !important;

  height:
    34px !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  border:
    1px solid #cfe3ee !important;

  border-radius:
    50% !important;

  background:
    #ffffff !important;

  color:
    #35657f !important;

  font-size:
    22px !important;

  line-height:
    1 !important;

  cursor:
    pointer !important;
}


/*
 * Mobilde eski bottom-sheet görünümü aynen devam etsin.
 */
@media (max-width: 700px) {

  #mobileMicOverlay:not([hidden]) {
    align-items:
      flex-end !important;

    justify-content:
      center !important;

    padding:
      0 !important;
  }


  #mobileMicOverlay
  .mobile-mic-sheet {
    width:
      100% !important;

    max-width:
      520px !important;

    max-height:
      calc(100dvh - 18px) !important;

    padding:
      9px
      18px
      calc(
        20px +
        env(safe-area-inset-bottom)
      ) !important;

    border-radius:
      24px
      24px
      0
      0 !important;
  }


  #mobileMicOverlay
  .mobile-mic-grabber {
    display:
      block !important;
  }

}