:root {

  --bg: #07080c;

  --panel: #101218;

  --elev: #171a22;

  --line: rgba(255, 255, 255, 0.08);

  --text: #f5f7fb;

  --text-2: #b8c0d0;

  --muted: #8a93a6;

  --accent: #ff4d4d;

  --accent-2: #ff7a45;

  --accent-soft: rgba(255, 77, 77, 0.14);

  --danger: #ff7b7b;

  --ok: #3dd68c;

  --shell: #05060a;

  --yt-crop: 72px;

  --ratio: 16 / 9;

  --font: "Outfit", system-ui, sans-serif;

  --display: "Syne", "Outfit", sans-serif;

}



* { box-sizing: border-box; margin: 0; padding: 0; }



body {

  font-family: var(--font);

  color: var(--text);

  background: var(--bg);

}



button, input, select { font: inherit; color: inherit; }



.plyr {

  --plyr-color-main: var(--accent);

  --plyr-video-background: #000;

  --plyr-control-spacing: 12px;

  --plyr-control-radius: 2px;

  --plyr-font-family: inherit;

}



.player-shell {

  position: relative;

  width: 100%;

  background: var(--shell);

  border: 1px solid var(--line);

  overflow: hidden;

}



#player-wrap {

  position: relative;

  width: 100%;

  aspect-ratio: var(--ratio);

  background: #000;

  overflow: hidden;

}



#player-wrap > .plyr,

#player-wrap > video,

#player-wrap > #player {

  position: absolute !important;

  inset: 0;

  width: 100% !important;

  height: 100% !important;

}



#player-wrap .plyr,

#player-wrap .plyr__video-wrapper,

#player-wrap .plyr__video-embed,

#player-wrap video {

  width: 100% !important;

  height: 100% !important;

  max-height: none !important;

}



#player-wrap .plyr__video-embed { padding-bottom: 0 !important; }

#player-wrap:not(.is-youtube) video { object-fit: contain; background: #000; }



#player-wrap .yt-offline-fallback {

  position: absolute;

  inset: 0;

  z-index: 6;

  display: grid;

  place-content: center;

  gap: 0.35rem;

  padding: 1.25rem;

  background: #05060a;

  color: #fff;

  text-align: center;

}



#player-wrap .yt-offline-fallback strong {

  font-size: 1.15rem;

  letter-spacing: -0.02em;

}



#player-wrap .yt-offline-fallback span {

  color: rgba(255, 255, 255, 0.72);

  font-size: 0.92rem;

}



#player-wrap.is-iframe {

  background: #000;

  position: relative;

}



#player-wrap.is-iframe .embed-frame {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  border: 0;

  background: #000;

  pointer-events: none;

}



#player-wrap.is-youtube-live .yt-live-frame {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  border: 0;

  background: #000;

  pointer-events: auto;

}



/* iPhone/Android: play tuşuna dokunabilmek için iframe etkileşimli */

#player-wrap.is-iframe.is-iframe-touch .embed-frame {

  pointer-events: auto;

  -webkit-touch-callout: default;

}



/* Embed içindeki reklama / linke tıklamayı engeller (masaüstü) */

#player-wrap.is-iframe .embed-click-shield {

  position: absolute;

  inset: 0;

  z-index: 5;

  background: transparent;

  cursor: default;

  touch-action: none;

  -webkit-user-select: none;

  user-select: none;

}



#player-wrap.is-iframe.is-iframe-touch .embed-click-shield {

  display: none;

}



.plyr--youtube .plyr__video-wrapper,

.plyr--youtube .plyr__video-embed { overflow: hidden !important; }



.plyr--youtube .plyr__video-embed iframe {

  pointer-events: none !important;

  top: calc(var(--yt-crop) * -1) !important;

  height: calc(100% + var(--yt-crop) * 2) !important;

  width: 100% !important;

  left: 0 !important;

  transform: scale(1.12);

  transform-origin: center center;

}



.plyr--youtube .plyr__video-wrapper::before,

.plyr--youtube .plyr__video-wrapper::after {

  content: "";

  position: absolute;

  left: 0;

  right: 0;

  z-index: 3;

  pointer-events: none;

  background: #000;

}



.plyr--youtube .plyr__video-wrapper::before { top: 0; height: 48px; }

.plyr--youtube .plyr__video-wrapper::after { bottom: 0; height: 54px; }

.plyr--youtube:not(.plyr--hide-controls) .plyr__video-wrapper::after { height: 8px; }



.plyr--youtube.plyr--paused .plyr__video-embed::after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(to top, rgba(0,0,0,.55), transparent 35%, transparent 70%, rgba(0,0,0,.35));

  pointer-events: none;

  z-index: 2;

}



.plyr__control--overlaid {

  background: var(--accent) !important;

  color: #fff !important;

  z-index: 5;

}



.plyr__controls {

  background: linear-gradient(transparent, rgba(5, 7, 10, 0.92));

  z-index: 6;

}



.fluxi-track-menus {

  display: inline-flex;

  align-items: center;

  gap: 0.15rem;

  margin-left: 0.25rem;

}



.fluxi-track-btn {

  min-width: 2.4rem !important;

  padding: 0.35rem 0.55rem !important;

  font-size: 0.78rem !important;

  font-weight: 700 !important;

  letter-spacing: 0.01em;

  color: #f2f4f8 !important;

}



.fluxi-track-btn[hidden] {

  display: none !important;

}



.fluxi-track-btn__label {

  display: inline-block;

  min-width: 2.2rem;

  text-align: center;

}



.fluxi-side-picker {

  position: absolute;

  inset: 0;

  z-index: 40;

  display: flex;

  justify-content: flex-end;

  pointer-events: none;

}



.fluxi-side-picker__backdrop {

  position: absolute;

  inset: 0;

  border: 0;

  margin: 0;

  padding: 0;

  background: rgba(0, 0, 0, 0.45);

  cursor: pointer;

  pointer-events: auto;

}



.fluxi-side-picker__panel {

  position: relative;

  z-index: 1;

  width: min(280px, 78%);

  height: 100%;

  display: flex;

  flex-direction: column;

  background: linear-gradient(180deg, #12151c 0%, #0a0c10 100%);

  border-left: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45);

  pointer-events: auto;

  animation: fluxi-side-in 0.18s ease-out;

}



@keyframes fluxi-side-in {

  from { transform: translateX(12px); opacity: 0.6; }

  to { transform: translateX(0); opacity: 1; }

}



.fluxi-side-picker__head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 0.75rem;

  padding: 0.9rem 1rem 0.65rem;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}



.fluxi-side-picker__head strong {

  font-size: 0.95rem;

  font-weight: 750;

  color: #fff;

}



.fluxi-side-picker__close {

  width: 2rem;

  height: 2rem;

  border: 0;

  border-radius: 6px;

  background: rgba(255, 255, 255, 0.06);

  color: #fff;

  cursor: pointer;

  font-size: 0.9rem;

}



.fluxi-side-picker__close:hover {

  background: rgba(255, 255, 255, 0.12);

}



.fluxi-side-picker__list {

  flex: 1;

  overflow: auto;

  padding: 0.5rem;

  display: grid;

  gap: 0.35rem;

  align-content: start;

}



.fluxi-side-picker__opt {

  width: 100%;

  text-align: left;

  border: 1px solid transparent;

  border-radius: 8px;

  background: rgba(255, 255, 255, 0.04);

  color: #e8ebf2;

  padding: 0.7rem 0.85rem;

  font-size: 0.9rem;

  font-weight: 600;

  cursor: pointer;

}



.fluxi-side-picker__opt:hover {

  background: rgba(255, 255, 255, 0.08);

}



.fluxi-side-picker__opt.is-active {

  border-color: rgba(70, 140, 255, 0.55);

  background: rgba(45, 110, 220, 0.22);

  color: #fff;

}



@media (max-width: 640px) {

  .fluxi-track-btn span:not(.fluxi-track-btn__label) {

    font-size: 0.72rem;

  }



  .fluxi-side-picker__panel {

    width: min(240px, 84%);

  }

}



.empty-player {

  position: absolute;

  inset: 0;

  display: grid;

  place-content: center;

  justify-items: center;

  gap: 0.35rem;

  background:

    radial-gradient(circle at center, rgba(30, 34, 48, 0.9), #05060a 70%);

  z-index: 4;

  text-align: center;

}



.empty-player.is-hidden { display: none; }

.empty-player p { font-size: 0.95rem; font-weight: 700; }

.empty-player span { color: var(--muted); font-size: 0.82rem; }



.channel-logo {

  width: 2rem;

  height: 2rem;

  object-fit: contain;

  background: #0f1114;

  border: 1px solid var(--line);

  flex-shrink: 0;

}



.channel-logo--lg { width: 2.6rem; height: 2.6rem; }



.channel-logo--fallback {

  display: grid;

  place-items: center;

  font-size: 0.85rem;

  font-weight: 800;

  color: #fff;

  background: linear-gradient(135deg, #2a3142, #171b26);

}



@media (max-width: 980px) {

  :root { --yt-crop: 42px; }



  .player-shell,

  #player-wrap {

    width: 100% !important;

    max-width: 100% !important;

    max-height: none !important;

    overflow: hidden !important;

  }



  /* Mobilde YouTube başlık / öneri kırp — taşmayı shell clip eder */

  .plyr--youtube .plyr__video-embed iframe {

    width: 100% !important;

    left: 0 !important;

    right: 0 !important;

    top: calc(var(--yt-crop) * -1) !important;

    height: calc(100% + var(--yt-crop) * 2) !important;

    transform: scale(1.28);

    transform-origin: center center;

  }



  .plyr--youtube .plyr__video-wrapper::before {

    display: block;

    height: 36px;

  }



  .plyr--youtube .plyr__video-wrapper::after {

    display: block;

    height: 42px;

  }



  .plyr--youtube:not(.plyr--hide-controls) .plyr__video-wrapper::after {

    height: 8px;

  }

}



/* iPhone YouTube: CSS tam ekran (Safari iframe FS yok) */

.player-shell.is-fs-pseudo {

  position: fixed !important;

  inset: 0 !important;

  z-index: 99999 !important;

  width: 100vw !important;

  width: 100dvw !important;

  height: 100vh !important;

  height: 100dvh !important;

  max-width: none !important;

  max-height: none !important;

  margin: 0 !important;

  border: 0 !important;

  border-radius: 0 !important;

  background: #000 !important;

  display: flex !important;

  align-items: center;

  justify-content: center;

}



.player-shell.is-fs-pseudo #player-wrap {

  width: 100% !important;

  height: 100% !important;

  max-width: none !important;

  aspect-ratio: auto !important;

}



.player-shell.is-fs-pseudo .plyr,

.player-shell.is-fs-pseudo .plyr__video-wrapper,

.player-shell.is-fs-pseudo .plyr__video-embed,

.player-shell.is-fs-pseudo video {

  width: 100% !important;

  height: 100% !important;

}



.player-shell.is-fs-pseudo .plyr--youtube .plyr__video-embed iframe {

  transform: scale(1.2);

  top: calc(var(--yt-crop) * -0.6) !important;

  height: calc(100% + var(--yt-crop) * 1.2) !important;

}



.fs-exit-btn {

  position: absolute;

  top: max(0.75rem, env(safe-area-inset-top));

  right: max(0.75rem, env(safe-area-inset-right));

  z-index: 100000;

  width: 44px;

  height: 44px;

  border: 0;

  border-radius: 999px;

  background: rgba(0, 0, 0, 0.55);

  color: #fff;

  font-size: 1.25rem;

  line-height: 1;

  cursor: pointer;

  backdrop-filter: blur(6px);

}



html.player-fs-lock,

html.player-fs-lock body {

  overflow: hidden !important;

  touch-action: none;

  height: 100%;

}



html.player-fs-lock .topnav {

  display: none !important;

}



.player-shell:fullscreen,

.player-shell:-webkit-full-screen,

#player-wrap:fullscreen,

#player-wrap:-webkit-full-screen {

  width: 100vw !important;

  height: 100vh !important;

  max-width: none !important;

  max-height: none !important;

  aspect-ratio: auto !important;

  background: #000;

}



.player-shell:fullscreen #player-wrap,

.player-shell:-webkit-full-screen #player-wrap {

  width: 100% !important;

  height: 100% !important;

  aspect-ratio: auto !important;

}