/* ================================
   PLYR CINEMA VIDEO PLAYER STYLES
   YouTube-Style Control Bar
   - Bottom gradient scrim, full width
   - Thin red progress line on top
   - Boxless white icons, plain time text
   ================================ */

:root {
  --plyr-color-main: #10b981;
  --plyr-video-control-color: #ffffff;
  --plyr-video-control-color-hover: #ffffff;
  --plyr-video-control-background-hover: rgba(255, 255, 255, 0.15);
  --plyr-video-progress-buffered-background: rgba(255, 255, 255, 0.35);
  --plyr-range-track-height: 5px;
  --plyr-range-thumb-height: 16px;
  --plyr-range-thumb-width: 16px;
  --plyr-range-thumb-background: #10b981;
  --plyr-control-spacing: 4px;
  --plyr-font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.cinema-player-wrapper .plyr {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  border-radius: 14px;
  overflow: hidden;
  background: #000000;
}

.cinema-player-wrapper .plyr__video-wrapper {
  background: #000000;
  width: 100% !important;
  height: 100% !important;
}

.cinema-player-wrapper .plyr__video-wrapper video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

/* Bottom gradient scrim, full width (YouTube style) */
.cinema-player-wrapper .plyr__controls {
  position: absolute !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 2px 4px !important;
  padding: 30px 12px 6px !important;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.45) 55%, transparent 100%) !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 0 14px 14px !important;
  box-shadow: none !important;
  transition: opacity 0.25s ease !important;
}

/* Progress row: full-width thin line above the buttons */
.cinema-player-wrapper .plyr__controls .plyr__progress__container {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  order: -1 !important;
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
  left: 0 !important;
  cursor: pointer !important;
  position: relative !important;
}

.cinema-player-wrapper .plyr__controls .plyr__progress {
  width: 100% !important;
  left: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  height: 20px !important;
}

.cinema-player-wrapper .plyr--full-ui input[type='range'] {
  color: #10b981 !important;
  background: transparent !important;
  height: 20px !important;
  padding: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 2 !important;
  cursor: pointer !important;
  border-radius: 100px !important;
}

.cinema-player-wrapper .plyr__progress input[type='range']::-webkit-slider-runnable-track {
  height: 5px !important;
  border-radius: 100px !important;
  border: none !important;
  background-color: transparent !important;
}

.cinema-player-wrapper .plyr__progress:hover input[type='range']::-webkit-slider-runnable-track {
  height: 5px !important;
  border-radius: 100px !important;
}

/* Yükleme / Buffer Çubuğu ve Boş Hat: Progress bar ile birebir aynı yükseklik (5px), border ve dikey eksen */
.cinema-player-wrapper .plyr__progress__buffer {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  transform: translateY(-50%) !important;
  width: 100% !important;
  height: 5px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 100px !important;
  overflow: hidden !important;
  color: rgba(255, 255, 255, 0.4) !important;
  background: rgba(255, 255, 255, 0.2) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.cinema-player-wrapper .plyr__progress:hover .plyr__progress__buffer {
  height: 5px !important;
  border-radius: 100px !important;
}

.cinema-player-wrapper .plyr__progress__buffer::-webkit-progress-bar {
  background: transparent !important;
  border-radius: 100px !important;
  height: 5px !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.cinema-player-wrapper .plyr__progress__buffer::-webkit-progress-value {
  background: rgba(255, 255, 255, 0.4) !important;
  border-radius: 100px !important;
  height: 5px !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: width 0.15s ease !important;
}

.cinema-player-wrapper .plyr__progress__buffer::-moz-progress-bar {
  background: rgba(255, 255, 255, 0.4) !important;
  border-radius: 100px !important;
  height: 5px !important;
}

.cinema-player-wrapper input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  background: #10b981 !important;
  border: none !important;
  border-radius: 50% !important;
  width: 16px !important;
  height: 16px !important;
  margin-top: -5.5px !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.75) !important;
  opacity: 0 !important;
  transform: scale(0.6) !important;
  transition: opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
}

.cinema-player-wrapper .plyr__progress:hover input[type='range']::-webkit-slider-thumb,
.cinema-player-wrapper .plyr__progress input[type='range']:active::-webkit-slider-thumb,
.cinema-player-wrapper .plyr__progress input[type='range']:focus-visible::-webkit-slider-thumb {
  opacity: 1 !important;
  transform: scale(1) !important;
  margin-top: -5.5px !important;
}

.cinema-player-wrapper input[type='range']::-moz-range-track {
  background: transparent !important;
  height: 5px !important;
  border: none !important;
  border-radius: 100px !important;
}

.cinema-player-wrapper .plyr__progress:hover input[type='range']::-moz-range-track {
  height: 5px !important;
  border-radius: 100px !important;
}

.cinema-player-wrapper input[type='range']::-moz-range-progress {
  background: #10b981 !important;
  height: 5px !important;
  border-radius: 100px !important;
}

.cinema-player-wrapper .plyr__progress:hover input[type='range']::-moz-range-progress {
  height: 5px !important;
  border-radius: 100px !important;
}

.cinema-player-wrapper input[type='range']::-moz-range-thumb {
  background: #10b981 !important;
  border: none !important;
  width: 16px !important;
  height: 16px !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.75) !important;
  opacity: 0 !important;
}

.cinema-player-wrapper .plyr__progress:hover input[type='range']::-moz-range-thumb {
  opacity: 1 !important;
}

/* Buttons: boxless white icons (YouTube style) */
.cinema-player-wrapper .plyr__controls .plyr__control {
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  padding: 7px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  opacity: 0.92 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  transition: background 0.15s ease, opacity 0.15s ease, transform 0.1s ease !important;
  cursor: pointer !important;
}

.cinema-player-wrapper .plyr__controls .plyr__control:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
}

.cinema-player-wrapper .plyr__controls .plyr__control:active {
  transform: scale(0.92) !important;
}

.cinema-player-wrapper .plyr__controls .plyr__control:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8) !important;
  outline-offset: 1px !important;
}

.cinema-player-wrapper .plyr__controls .plyr__control svg {
  width: 100% !important;
  height: 100% !important;
}

/* Play button keeps the same plain style */
.cinema-player-wrapper .plyr__controls button[data-plyr='play'] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.cinema-player-wrapper .plyr__controls button[data-plyr='play']:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border: none !important;
  box-shadow: none !important;
}

/* Time readout: plain white text, no boxes */
.cinema-player-wrapper .plyr__time {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 4px !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
  line-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.cinema-player-wrapper .plyr__time--current {
  color: #ffffff !important;
  padding-right: 0 !important;
}

.cinema-player-wrapper .plyr__time--current::after {
  display: none !important;
  content: none !important;
}

.cinema-player-wrapper .plyr__time + .plyr__time::before {
  content: '/' !important;
  margin: 0 5px !important;
  color: rgba(255, 255, 255, 0.6) !important;
}

.cinema-player-wrapper .plyr__time--duration {
  display: inline-block !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Push right controls (settings, pip, fullscreen) to the far right like YouTube */
.cinema-player-wrapper .plyr__controls .plyr__menu {
  margin-left: auto !important;
}

/* Volume slider: thin white line */
.cinema-player-wrapper .plyr__volume {
  max-width: 84px !important;
  min-width: 52px !important;
  margin-left: 2px !important;
}

.cinema-player-wrapper .plyr__volume input[type='range'] {
  color: #ffffff !important;
}

.cinema-player-wrapper .plyr__volume input[type='range']::-webkit-slider-runnable-track {
  background-color: rgba(255, 255, 255, 0.35) !important;
  height: 3px !important;
  border-radius: 2px !important;
  border: none !important;
}

.cinema-player-wrapper .plyr__volume input[type='range']::-webkit-slider-thumb {
  background: #ffffff !important;
  width: 11px !important;
  height: 11px !important;
  margin-top: -4px !important;
  border: none !important;
  opacity: 1 !important;
  transform: none !important;
  box-shadow: none !important;
}

.cinema-player-wrapper .plyr__volume input[type='range']::-moz-range-track {
  background: rgba(255, 255, 255, 0.35) !important;
  height: 3px !important;
  border-radius: 2px !important;
}

.cinema-player-wrapper .plyr__volume input[type='range']::-moz-range-progress {
  background: #ffffff !important;
  height: 3px !important;
  border-radius: 2px !important;
}

.cinema-player-wrapper .plyr__volume input[type='range']::-moz-range-thumb {
  background: #ffffff !important;
  width: 11px !important;
  height: 11px !important;
  border: none !important;
  opacity: 1 !important;
}

/* Big center play button: dark circle, red on hover */
.cinema-player-wrapper .plyr__control--overlaid {
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  box-shadow: none !important;
  width: 68px !important;
  height: 68px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
}

.cinema-player-wrapper .plyr.plyr--playing .plyr__control--overlaid {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.cinema-player-wrapper .plyr:not(.plyr--playing) .plyr__control--overlaid {
  display: flex !important;
}

.cinema-player-wrapper .plyr__control--overlaid:hover {
  transform: translate(-50%, -50%) scale(1.06) !important;
  background: rgba(0, 0, 0, 0.8) !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

.cinema-player-wrapper .plyr__control--overlaid svg {
  width: 28px !important;
  height: 28px !important;
  fill: #ffffff !important;
  margin-left: 4px !important; /* Optik dengeleme: Play üçgeninin geometrik kütle merkezini dengeler */
  display: block !important;
}

/* Settings popup: Minimal, animasyonsuz ve sade koyu panel */
.cinema-player-wrapper .plyr__menu__container {
  animation: none !important;
  transition: none !important;
  background: rgba(18, 18, 18, 0.98) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65) !important;
  color: #ffffff !important;
  padding: 4px 0 !important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  min-width: 150px !important;
  bottom: calc(100% + 8px) !important;
  margin-bottom: 0 !important;
  right: 0 !important;
  z-index: 30 !important;
}

/* Küçük ok üçgenini kaldır (sade ve düz hizalı olsun) */
.cinema-player-wrapper .plyr__menu__container::after {
  display: none !important;
}

/* Yükseklik animasyonunu ve taşmaları iptal et, tüm hız seçenekleri eksiksiz görünsün */
.cinema-player-wrapper .plyr__menu__container > div {
  animation: none !important;
  transition: none !important;
  height: auto !important;
  max-height: 280px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.cinema-player-wrapper .plyr__menu__container [role="menu"] {
  padding: 2px 0 !important;
  animation: none !important;
  transition: none !important;
}

/* Menü satırları genel stili */
.cinema-player-wrapper .plyr__menu__container .plyr__control {
  animation: none !important;
  transition: background 0.08s ease !important;
  transform: none !important;
  width: 100% !important;
  height: 32px !important;
  min-height: 32px !important;
  border-radius: 0 !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  opacity: 1 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.cinema-player-wrapper .plyr__menu__container .plyr__control:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
  transform: none !important;
}

/* Oynatma Hızı başlığı (Geri butonu) */
.cinema-player-wrapper .plyr__menu__container .plyr__control--back {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  padding: 7px 12px 7px 26px !important;
  margin: 0 0 2px 0 !important;
  position: relative !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
  width: 100% !important;
}

/* Başlık altındaki kaba çizgiyi kaldır */
.cinema-player-wrapper .plyr__menu__container .plyr__control--back::before {
  display: none !important;
  content: none !important;
}

.cinema-player-wrapper .plyr__menu__container .plyr__control--back::after {
  left: 10px !important;
  border-right-color: rgba(255, 255, 255, 0.7) !important;
}

/* Sade Hız Seçenekleri: Kaba kırmızı daireler kaldırıldı, seçiliye beyaz onay tiki (✓) */
.cinema-player-wrapper .plyr__menu__container .plyr__control[role="menuitemradio"] {
  position: relative !important;
  padding: 6px 14px 6px 30px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  margin: 0 !important;
}

.cinema-player-wrapper .plyr__menu__container .plyr__control[role="menuitemradio"]:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

.cinema-player-wrapper .plyr__menu__container .plyr__control[role="menuitemradio"][aria-checked="true"] {
  color: #ffffff !important;
  font-weight: 600 !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

/* Kaba radio buton halkalarını kaldır */
.cinema-player-wrapper .plyr__menu__container .plyr__control[role="menuitemradio"]::before {
  display: none !important;
  content: none !important;
}

/* Seçili öğe için sade beyaz onay tiki (✓) */
.cinema-player-wrapper .plyr__menu__container .plyr__control[role="menuitemradio"]::after {
  content: '' !important;
  display: none !important;
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  width: 4px !important;
  height: 8px !important;
  border: solid #ffffff !important;
  border-width: 0 2px 2px 0 !important;
  transform: translateY(-60%) rotate(45deg) !important;
  background: transparent !important;
  border-radius: 0 !important;
  opacity: 0 !important;
}

.cinema-player-wrapper .plyr__menu__container .plyr__control[role="menuitemradio"][aria-checked="true"]::after {
  display: block !important;
  opacity: 1 !important;
}

/* Ana menü ileri ok ve değer göstergesi */
.cinema-player-wrapper .plyr__menu__container .plyr__control--forward {
  padding-right: 26px !important;
}

.cinema-player-wrapper .plyr__menu__container .plyr__control--forward::after {
  border-left-color: rgba(255, 255, 255, 0.5) !important;
  right: 12px !important;
}

.cinema-player-wrapper .plyr__menu__container .plyr__menu__value {
  margin-left: auto !important;
  padding-right: 12px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 12px !important;
}

/* Tooltip: dark bubble (oynatma çizgisinin üstünde ferah konumlandırma) */
.cinema-player-wrapper .plyr__tooltip {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  background: rgba(10, 10, 10, 0.94) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 20 !important;
}

/* Kontrol butonlarındaki tooltip'ler (Oynat, Sesi Kapat vb.) ilerleme çizgisinin üstünde görünsün */
.cinema-player-wrapper .plyr__controls .plyr__control .plyr__tooltip {
  margin-bottom: 22px !important;
}

.cinema-player-wrapper .plyr__tooltip::before {
  border-top-color: rgba(10, 10, 10, 0.94) !important;
}

/* Small screens & Touch Devices */
@media (max-width: 768px) {
  .cinema-player-wrapper .plyr__controls {
    padding: 22px 8px 4px !important;
    gap: 2px 2px !important;
  }

  /* Dokunmatik cihazlarda progress bar dokunma alanını genişlet (30px) */
  .cinema-player-wrapper .plyr__controls .plyr__progress {
    height: 30px !important;
  }

  .cinema-player-wrapper .plyr--full-ui input[type='range'] {
    height: 30px !important;
  }

  /* Dokunmatik ekranda thumb her zaman belirgin ve dokunulabilir */
  .cinema-player-wrapper input[type='range']::-webkit-slider-thumb {
    opacity: 1 !important;
    transform: scale(0.95) !important;
  }

  .cinema-player-wrapper input[type='range']::-moz-range-thumb {
    opacity: 1 !important;
  }

  /* Kontrol butonları dokunma hedefi */
  .cinema-player-wrapper .plyr__controls .plyr__control {
    width: 36px !important;
    height: 36px !important;
    padding: 6px !important;
  }

  /* Süre göstergesi */
  .cinema-player-wrapper .plyr__time {
    font-size: 11.5px !important;
    line-height: 36px !important;
    margin: 0 2px !important;
  }

  .cinema-player-wrapper .plyr__volume {
    display: none !important;
  }

  /* Merkez oynatma butonu orantısı */
  .cinema-player-wrapper .plyr__control--overlaid {
    width: 56px !important;
    height: 56px !important;
  }

  .cinema-player-wrapper .plyr__control--overlaid svg {
    width: 24px !important;
    height: 24px !important;
    margin-left: 3px !important;
  }

  /* Ayarlar menüsü taşma koruması (Player içine tam sığdırma) */
  .cinema-player-wrapper .plyr__menu__container {
    max-height: calc(100% - 46px) !important;
    min-width: 135px !important;
    right: 4px !important;
    bottom: calc(100% + 4px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .cinema-player-wrapper .plyr__menu__container > div {
    max-height: min(210px, calc(100% - 8px)) !important;
    overflow-y: auto !important;
  }

  .cinema-player-wrapper .plyr__menu__container .plyr__control {
    height: 30px !important;
    min-height: 30px !important;
    font-size: 12px !important;
    padding: 4px 12px !important;
  }
}

/* Çok Küçük Ekranlar (≤360px) */
@media (max-width: 360px) {
  .cinema-player-wrapper .plyr__controls {
    padding: 18px 4px 2px !important;
  }

  .cinema-player-wrapper .plyr__controls .plyr__control {
    width: 32px !important;
    height: 32px !important;
    padding: 5px !important;
  }

  .cinema-player-wrapper .plyr__time {
    font-size: 10.5px !important;
    margin: 0 1px !important;
  }

  .cinema-player-wrapper .plyr__time + .plyr__time::before {
    margin: 0 3px !important;
  }
}

/* Dokunmatik cihazlarda asılı kalan tooltip'leri gizle */
@media (hover: none) {
  .cinema-player-wrapper .plyr__tooltip {
    display: none !important;
  }
}