/*
 * Lumout Custom Patch CSS v6.1
 * Kritik layout, tema ve responsive düzeltmeleri
 */

/* =========================================================
   CSS CUSTOM PROPERTIES – Her iki tema için
   ========================================================= */

:root,
[data-theme="dark"],
html[data-theme="dark"] body,
html:not([data-theme]) body {
  --yt-bg: #0f0f0f;
  --yt-surface: #1a1a1a;
  --yt-surface-2: #282828;
  --yt-text: #f1f1f1;
  --yt-text-secondary: #aaaaaa;
  --yt-border: rgba(255,255,255,0.1);
  --yt-hover: rgba(255,255,255,0.07);
  --yt-active: rgba(255,255,255,0.12);
  --yt-search-bg: #121212;
  --yt-chip-bg: #272727;
  --yt-dropdown-bg: #212121;
  --yt-scrollbar: #717171;
  --yt-icon: rgba(255,255,255,0.7);
  --yt-icon-hover: #f1f1f1;
  --yt-input-bg: #121212;
  --yt-input-border: #303030;
  --yt-btn-ghost-bg: rgba(255,255,255,0.07);
  --yt-btn-ghost-border: rgba(255,255,255,0.15);
  --yt-btn-ghost-color: #f1f1f1;
  --yt-overlay: rgba(0,0,0,0.5);
}

[data-theme="light"],
html[data-theme="light"] body {
  --yt-bg: #ffffff;
  --yt-surface: #f9f9f9;
  --yt-surface-2: #f2f2f2;
  --yt-text: #0f0f0f;
  --yt-text-secondary: #606060;
  --yt-border: rgba(0,0,0,0.1);
  --yt-hover: rgba(0,0,0,0.06);
  --yt-active: rgba(0,0,0,0.1);
  --yt-search-bg: #ffffff;
  --yt-chip-bg: #f2f2f2;
  --yt-dropdown-bg: #ffffff;
  --yt-scrollbar: #c0c0c0;
  --yt-icon: rgba(0,0,0,0.6);
  --yt-icon-hover: #0f0f0f;
  --yt-input-bg: #f8f8f8;
  --yt-input-border: #cccccc;
  --yt-btn-ghost-bg: rgba(0,0,0,0.05);
  --yt-btn-ghost-border: rgba(0,0,0,0.15);
  --yt-btn-ghost-color: #0f0f0f;
  --yt-overlay: rgba(255,255,255,0.5);
}

/* =========================================================
   KRİTİK LAYOUT – fixed header altındaki padding-top
   ========================================================= */

@media (max-width: 768px) {
  .home-fluid .home__right {
    padding-top: 56px !important;
    padding-bottom: 64px !important;
  }
}

/* =========================================================
   HEADER – fixed position + tema
   ========================================================= */

.home-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10000 !important;
  height: 56px !important;
  background: var(--yt-bg) !important;
  border-bottom: 1px solid var(--yt-border) !important;
  display: flex !important;
  align-items: center !important;
}

[data-theme="light"] .home-header {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0,0,0,0.1) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
}

/* =========================================================
   HEADER LOGO
   ========================================================= */

.sidebar-logo__link.dark { display: block; }
.sidebar-logo__link.light { display: none; }
[data-theme="light"] .sidebar-logo__link.dark { display: none !important; }
[data-theme="light"] .sidebar-logo__link.light { display: block !important; }

/* =========================================================
   HEADER SEARCH FORM
   ========================================================= */

.search-form .form--control {
  background: var(--yt-input-bg) !important;
  color: var(--yt-text) !important;
  border: 1px solid var(--yt-input-border) !important;
}

.search-form .form--control::placeholder { color: var(--yt-text-secondary) !important; }
.search-form-btn, .home-header__left-mic { color: var(--yt-icon) !important; background: transparent !important; }
.search-form-btn:hover, .home-header__left-mic:hover { color: var(--yt-icon-hover) !important; }

/* =========================================================
   NAV EXPLORE DROPDOWN
   ========================================================= */

.nav-explore-dropdown { position: relative; }

.nav-explore-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  border: 1px solid var(--yt-btn-ghost-border) !important;
  background: transparent !important;
  color: var(--yt-btn-ghost-color) !important;
  font-size: 13px !important; font-weight: 500 !important;
  cursor: pointer !important;
  transition: background .15s, border-color .15s, color .15s !important;
  white-space: nowrap !important;
  font-family: inherit !important;
}

.nav-explore-btn:hover,
.nav-explore-dropdown.open .nav-explore-btn {
  background: var(--yt-hover) !important;
  border-color: var(--yt-border) !important;
  color: var(--yt-text) !important;
}

.nav-explore-menu {
  display: none;
  position: absolute; top: calc(100% + 8px); right: 0;
  z-index: 99999;
  min-width: 300px; max-width: 420px;
  background: var(--yt-dropdown-bg) !important;
  border: 1px solid var(--yt-border) !important;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25) !important;
  overflow: hidden;
  animation: navExploreIn .18s ease;
}

.nav-explore-dropdown.open .nav-explore-menu { display: block !important; }

@keyframes navExploreIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nav-explore-menu__inner { padding: 12px 0 8px; }

.nav-explore-menu__section-title {
  font-size: 11px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .08em !important;
  color: var(--yt-text-secondary) !important;
  padding: 4px 16px 8px !important;
}

.nav-explore-menu__divider { height: 1px !important; background: var(--yt-border) !important; margin: 8px 16px !important; }

.nav-explore-menu__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 0 8px; }

.nav-explore-menu__item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px;
  color: var(--yt-text) !important; text-decoration: none !important;
  font-size: 13px; font-weight: 500;
  transition: background .15s;
}

.nav-explore-menu__item:hover { background: var(--yt-hover) !important; color: var(--yt-text) !important; text-decoration: none !important; }
.nav-explore-menu__icon { flex-shrink: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: hsl(var(--base)); }
.nav-explore-menu__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nav-explore-menu__links { padding: 4px 8px 4px; }

.nav-explore-menu__link {
  display: flex !important; align-items: center !important; gap: 10px !important;
  padding: 8px 10px !important; border-radius: 8px !important;
  color: var(--yt-text) !important; text-decoration: none !important;
  font-size: 13px !important; font-weight: 500 !important;
  transition: background .15s, color .15s !important;
}

.nav-explore-menu__link:hover { background: var(--yt-hover) !important; color: var(--yt-text) !important; text-decoration: none !important; }
.nav-explore-menu__link i { width: 18px; text-align: center; color: hsl(var(--base)); font-size: 14px; flex-shrink: 0; }

/* =========================================================
   DROPDOWN DISPLAY FIX
   ========================================================= */

.user-info-list { display: none; }
.user-info-list.show, .user-info.open .user-info-list { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; }
.notification__list { display: none; }
.notification__list.show, .notification.open .notification__list { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; }
.create__list { display: none; }
.create.show .create__list, .create__list.show { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; }

/* =========================================================
   USER INFO DROPDOWN
   ========================================================= */

.user-info-list { background: var(--yt-dropdown-bg) !important; border: 1px solid var(--yt-border) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important; }
.user-info-list__item li .list__link { color: var(--yt-text) !important; }
.user-info-list__item li .list__link:hover { background: var(--yt-hover) !important; color: var(--yt-text) !important; }
.user-info-list__profile { border-bottom: 1px solid var(--yt-border) !important; }
.user-info-list__name { color: var(--yt-text) !important; }
.user-info-list__username, .user-info-list__email { color: var(--yt-text-secondary) !important; }

[data-theme="light"] .user-info-list { background: #ffffff !important; border-color: rgba(0,0,0,0.12) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.15) !important; }
[data-theme="light"] .user-info-list__item li .list__link { color: #0f0f0f !important; }
[data-theme="light"] .user-info-list__item li .list__link:hover { background: #f2f2f2 !important; }

/* =========================================================
   NOTIFICATION DROPDOWN
   ========================================================= */

.notification__list { max-height: min(480px, 70vh); overflow-y: auto; background: var(--yt-dropdown-bg) !important; border: 1px solid var(--yt-border) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important; }
.notification__list-title { color: var(--yt-text) !important; border-bottom: 1px solid var(--yt-border) !important; }
.notification__list-link { color: var(--yt-text) !important; }
.notification__list-link:hover { background: var(--yt-hover) !important; }
.notification__list-text { color: var(--yt-text) !important; }
.notification__list-time { color: var(--yt-text-secondary) !important; }
.notification__empty { color: var(--yt-text-secondary) !important; }
.notification__footer { border-top: 1px solid var(--yt-border) !important; }
.notification__footer a { color: hsl(var(--base)) !important; }

[data-theme="light"] .notification__list { background: #ffffff !important; border-color: rgba(0,0,0,0.12) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.15) !important; }
[data-theme="light"] .notification__list-link:hover { background: #f2f2f2 !important; }

/* =========================================================
   MOBİL ALT NAVIGASYON
   ========================================================= */

.mobile-bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 99999 !important; height: 60px;
  background-color: var(--yt-bg) !important;
  border-top: 1px solid var(--yt-border) !important;
  display: flex !important; align-items: stretch;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.15) !important;
}

@media (min-width: 768px) { .mobile-bottom-nav { display: none !important; } }

.mobile-bottom-nav .mobile-bottom-nav__item,
.mobile-bottom-nav a.mobile-bottom-nav__item,
.mobile-bottom-nav button.mobile-bottom-nav__item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  color: var(--yt-text-secondary) !important; text-decoration: none !important;
  background: none !important; border: none; cursor: pointer; padding: 6px 4px;
  font-family: inherit; font-size: inherit; transition: color .2s;
  -webkit-tap-highlight-color: transparent; outline: none;
  touch-action: manipulation !important;
}

.mobile-bottom-nav .mobile-bottom-nav__item:hover,
.mobile-bottom-nav .mobile-bottom-nav__item.active { color: var(--yt-text) !important; }
.mobile-bottom-nav__icon { display: flex; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0; }
.mobile-bottom-nav__label { font-size: 10px; line-height: 1; white-space: nowrap; display: block; }

/* =========================================================
   MOBİL CREATE POPUP
   ========================================================= */

.mobile-create-overlay { display: none; position: fixed; inset: 0; background: var(--yt-overlay); backdrop-filter: blur(2px); z-index: 99998; }
.mobile-create-overlay.show { display: block; }
.mobile-create-popup { display: none; position: fixed; bottom: 72px; left: 50%; transform: translateX(-50%); z-index: 99999; background: var(--yt-surface-2) !important; border-radius: 12px; box-shadow: 0 4px 24px rgba(0,0,0,0.4); min-width: 220px; overflow: hidden; padding: 8px 0; border: 1px solid var(--yt-border); }
.mobile-create-popup.show { display: block; }
.mobile-create-popup__item { display: flex; align-items: center; gap: 14px; padding: 14px 20px; color: var(--yt-text) !important; text-decoration: none !important; font-size: 14px; font-weight: 500; transition: background .15s; }
.mobile-create-popup__item:hover { background: var(--yt-hover) !important; color: var(--yt-text) !important; }

[data-theme="light"] .mobile-create-popup { background: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; }
[data-theme="light"] .mobile-create-popup__item { color: #0f0f0f !important; }
[data-theme="light"] .mobile-create-popup__item:hover { background: #f2f2f2 !important; }

/* =========================================================
   SIDEBAR OVERLAY
   ========================================================= */

#sidebarOverlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9998; backdrop-filter: blur(2px); }
#sidebarOverlay.show { display: block; }

/* =========================================================
   SIDEBAR
   ========================================================= */

@media (min-width: 1200px) {
  .sidebar-menu { top: 0px !important; height: calc(100vh - 56px) !important; transform: translateX(0) !important; }
}

@media (max-width: 768px) {
  .sidebar-menu { top: 0 !important; height: 100vh !important; z-index: 9999 !important; }
}

.sidebar-menu.show { transform: translateX(0) !important; box-shadow: 4px 0 24px rgba(0,0,0,0.6) !important; }
.sidebar-menu.show-sm { transform: translateX(0) !important; box-shadow: 4px 0 24px rgba(0,0,0,0.6) !important; }
body.sidebar-open { overflow: hidden !important; }

[data-theme="light"] .sidebar-menu { background: #ffffff !important; border-right: 1px solid rgba(0,0,0,0.1) !important; }
[data-theme="light"] .sidebar-menu-list__link { color: #0f0f0f !important; }
[data-theme="light"] .sidebar-menu-list__link:hover { background: rgba(0,0,0,0.06) !important; color: #0f0f0f !important; }
[data-theme="light"] .sidebar-menu-list__link.active { background: rgba(0,0,0,0.08) !important; color: #0f0f0f !important; font-weight: 600 !important; }
[data-theme="light"] .sidebar-section-header .text { color: #909090 !important; }

/* =========================================================
   YATAY SCROLL ENGELİ
   ========================================================= */

html, body { overflow-x: hidden !important; max-width: 100vw !important; }
.video-wrapper, .video-item-wrapper { overflow-x: hidden !important; }

/* =========================================================
   KATEGORİ TAG BAR
   ========================================================= */

.category-tag-bar { top: 56px !important; z-index: 9980 !important; background: var(--yt-bg) !important; border-bottom: 1px solid var(--yt-border) !important; }
.tag-item { color: var(--yt-text-secondary) !important; background: var(--yt-chip-bg) !important; border: 1px solid transparent !important; }
.tag-item:hover { background: var(--yt-active) !important; color: var(--yt-text) !important; }
.tag-item.active { background: var(--yt-text) !important; color: var(--yt-bg) !important; font-weight: 600 !important; }

[data-theme="light"] .category-tag-bar { background: #ffffff !important; border-bottom-color: rgba(0,0,0,0.1) !important; }
[data-theme="light"] .tag-item { background: #f2f2f2 !important; color: #0f0f0f !important; }
[data-theme="light"] .tag-item:hover { background: #e5e5e5 !important; }
[data-theme="light"] .tag-item.active { background: #0f0f0f !important; color: #ffffff !important; }

/* =========================================================
   DARK TEMA – Genel body + elementler
   ========================================================= */

[data-theme="dark"] body, body[data-theme="dark"] { background-color: #0f0f0f !important; color: #f1f1f1 !important; }
[data-theme="dark"] .card, [data-theme="dark"] .modal-content { background-color: #1a1a1a !important; border-color: rgba(255,255,255,0.1) !important; color: #f1f1f1 !important; }

/* =========================================================
   LIGHT TEMA – Genel body + elementler
   ========================================================= */

[data-theme="light"] body, body[data-theme="light"] { background-color: #ffffff !important; color: #0f0f0f !important; }
[data-theme="light"] .card, [data-theme="light"] .modal-content { background-color: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; color: #0f0f0f !important; }
[data-theme="light"] .modal-header { background-color: #f8f8f8 !important; border-color: rgba(0,0,0,0.08) !important; color: #0f0f0f !important; }
[data-theme="light"] .modal-body { background-color: #ffffff !important; color: #0f0f0f !important; }
[data-theme="light"] .form--control, [data-theme="light"] textarea, [data-theme="light"] select { background-color: #ffffff !important; color: #0f0f0f !important; border-color: #ddd !important; }
[data-theme="light"] label, [data-theme="light"] .form-label { color: #0f0f0f !important; }

/* =========================================================
   HOME BODY
   ========================================================= */

.home-body { background: var(--yt-bg); }
[data-theme="light"] .home-body { background-color: #f9f9f9 !important; }

/* =========================================================
   PLAY SAYFASI
   ========================================================= */

.play-body { padding-top: 16px !important; min-height: auto; background: var(--yt-bg); }
[data-theme="light"] .play-body { background: #f9f9f9 !important; }
.play-video { max-width: 100%; overflow-x: hidden; }

/* =========================================================
   REKLAM OVERLAY – z-index ve display
   ========================================================= */

#lumout-preroll { display: none; }
#lumout-preroll.lumout-preroll--visible, #lumout-preroll.active {
  display: block !important; position: absolute !important; inset: 0 !important;
  z-index: 60 !important; background: #000 !important; overflow: hidden !important;
}

.primary__videoPlayer, .video-item__thumb.mainVideo { position: relative !important; overflow: hidden !important; }

/* =========================================================
   VİDEO KARTI – play ikonu kaldır
   ========================================================= */

.video-wrapper .video-item .plyr__control--overlaid,
.video-item-wrapper .video-item .plyr__control--overlaid,
.video-item .video-play-icon,
.video-item .play-btn,
.video-item .play-icon,
.video-item .video-item__play,
.video-item .btn-play {
  display: none !important;
}

.video-item__thumb .plyr__control--overlaid { display: none !important; }

/* =========================================================
   VİDEO KARTI – HOVER ÖNİZLEME v6.1
   ─────────────────────────────────────────────────────────
   NOT: contain:layout style KALDIRILDI — flex layout bozuyor
   ========================================================= */

/* Ana thumbnail konteyner */
.video-item__thumb {
  overflow: hidden !important;
  position: relative !important;
  border-radius: 10px !important;
  /* contain kaldırıldı — flex layout uyumluluğu için */
}

/* Thumbnail img geçiş animasyonu */
.video-item__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s cubic-bezier(.25,.46,.45,.94), opacity .3s ease;
  will-change: transform;
  pointer-events: none;
}

/* Hover'da slight zoom */
.video-item:hover .video-item__thumb img {
  transform: scale(1.04);
}

/* Önizleme aktifken thumbnail fade-out */
.video-item__thumb.has-preview img {
  opacity: 0;
  transform: scale(1.04);
}

/* ──────────────────────────────────────────
   YT Preview container (iframe wrapper) — v6.1
   ────────────────────────────────────────── */
.lumout-hover-preview-yt {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  overflow: hidden !important;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
  background: #000;
  border-radius: inherit;
  will-change: opacity;
  transform: translateZ(0);
}

.lumout-hover-preview-yt.visible {
  opacity: 1 !important;
}

/* ──────────────────────────────────────────
   Hover önizleme — yerel video
   ────────────────────────────────────────── */
.lumout-hover-preview {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 2 !important;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
  background: #000;
  border-radius: inherit;
  will-change: opacity;
  transform: translateZ(0);
}

.lumout-hover-preview.playing {
  opacity: 1 !important;
}

/* ──────────────────────────────────────────
   Hover progress bar (alt çizgi) — v6.1
   ────────────────────────────────────────── */
.lumout-hover-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,.18);
  z-index: 6;
  opacity: 0;
  transition: opacity .3s ease;
  border-radius: 0 0 10px 10px;
  pointer-events: none;
}

.lumout-hover-bar-fill {
  height: 100%;
  background: hsl(var(--base, 0 100% 50%));
  width: 0;
  border-radius: inherit;
  transition: none;
}

.video-item:hover .lumout-hover-bar,
.lumout-hover-bar.show {
  opacity: 1;
}

/* ──────────────────────────────────────────
   Hover mute butonu — v6.1
   ────────────────────────────────────────── */
.lumout-hover-mute {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 7;
  background: rgba(0,0,0,.72);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .25s ease, transform .22s ease, background .15s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  flex-shrink: 0;
  outline: none;
  line-height: 0;
}

.lumout-hover-mute svg {
  fill: #fff !important;
  display: block;
  flex-shrink: 0;
}

.lumout-hover-mute:hover {
  background: rgba(0,0,0,.9);
  border-color: rgba(255,255,255,.3);
  transform: scale(1) !important;
}

.video-item:hover .lumout-hover-mute,
.lumout-hover-mute.show {
  opacity: 1;
  transform: scale(1);
}

/* ──────────────────────────────────────────
   Hover loading spinner — v6.1
   ────────────────────────────────────────── */
.lumout-hover-spinner {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
  border-radius: inherit;
}

.lumout-hover-spinner.show {
  opacity: 1;
}

.lumout-hover-spinner::after {
  content: '';
  width: 26px;
  height: 26px;
  border: 2.5px solid rgba(255,255,255,.25);
  border-top-color: rgba(255,255,255,.85);
  border-radius: 50%;
  animation: lumoutHoverSpin .65s linear infinite;
  will-change: transform;
}

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

/* ──────────────────────────────────────────
   Hover branding shield — v6.1
   ────────────────────────────────────────── */
.lumout-hover-shield {
  position: absolute;
  pointer-events: none;
  z-index: 6;
  background: #000;
  will-change: transform;
  transform: translateZ(0);
}

.lumout-hover-shield-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  pointer-events: none;
  z-index: 6;
  background: linear-gradient(to bottom, rgba(0,0,0,.9) 0%, transparent 100%);
  will-change: transform;
  transform: translateZ(0);
}

/* ──────────────────────────────────────────
   Video kartı genel — v6.1
   ────────────────────────────────────────── */
.video-item {
  transition: transform .2s ease;
  isolation: isolate;
}

/* ──────────────────────────────────────────
   Preview aktifken duration badge gizle
   ────────────────────────────────────────── */
.video-item:hover .video-item__thumb .duration,
.video-item:hover .video-item__thumb .video-duration,
.video-item__thumb.has-preview .duration,
.video-item__thumb.has-preview .video-duration {
  opacity: 0 !important;
  transition: opacity .25s ease !important;
}

.video-item__thumb .duration,
.video-item__thumb .video-duration {
  transition: opacity .25s ease;
  z-index: 4 !important;
}

/* =========================================================
   VİDEO KARTI – Light tema
   ========================================================= */

[data-theme="light"] .video-item__right .title a { color: #0f0f0f !important; }
[data-theme="light"] .video-item__right .channel { color: #606060 !important; }
[data-theme="light"] .video-item__right .meta { color: #606060 !important; }

/* =========================================================
   MASA ÜSTÜ – 1200px+
   ========================================================= */

@media (min-width: 1200px) {
  .sidebar-menu { transform: translateX(0) !important; }
  .home-fluid .home-header__middle { max-width: 640px !important; }
}

/* =========================================================
   TABLET – 768px-1199px
   ========================================================= */

@media (min-width: 769px) and (max-width: 1199px) {
  .home-fluid .home__right { padding-left: 0 !important; }
  .video-item-wrapper, .video-wrapper { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; }
}

/* =========================================================
   MOBİL – 768px altı
   ========================================================= */

@media (max-width: 768px) {
  .video-item-wrapper, .video-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .home-body__title { font-size: 14px !important; }
  .home-body { padding: 10px 8px 80px !important; }
  .play-body { padding-top: 8px !important; }
  body { padding-bottom: 60px !important; }
}

@media (max-width: 374px) {
  .video-item-wrapper, .video-wrapper { grid-template-columns: 1fr !important; }
}

/* =========================================================
   PLAY SAYFASI – video player light tema
   ========================================================= */

[data-theme="light"] .primary__videoPlayer { background: #000 !important; }

[data-theme="light"] .comment-list__item { border-bottom-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .comment-list__item .text { color: #0f0f0f !important; }
[data-theme="light"] .comment-list__item .time, [data-theme="light"] .comment-list__item .meta { color: #606060 !important; }
[data-theme="light"] .comment-form .form--control { background: #f8f8f8 !important; color: #0f0f0f !important; border-color: #ddd !important; }

/* =========================================================
   LIGHT TEMA GENEL HEADER
   ========================================================= */

[data-theme="light"] .create__btn { background: hsl(var(--base)) !important; color: #fff !important; }
[data-theme="light"] .notification__count { background: hsl(var(--base)) !important; color: #fff !important; }
[data-theme="light"] .menu-button span { background: #0f0f0f !important; }

/* =========================================================
   NAV TABS – light tema
   ========================================================= */

[data-theme="light"] .nav.nav-tabs { border-bottom-color: rgba(0,0,0,0.1) !important; }
[data-theme="light"] .nav-tabs .nav-link { color: #606060 !important; }
[data-theme="light"] .nav-tabs .nav-link.active, [data-theme="light"] .nav-tabs .nav-link:hover { color: #0f0f0f !important; border-bottom-color: #0f0f0f !important; }

/* =========================================================
   SCROLLBAR – tema uyumlu
   ========================================================= */

[data-theme="light"] ::-webkit-scrollbar-thumb { background: #c0c0c0 !important; }
[data-theme="light"] ::-webkit-scrollbar-track { background: #f2f2f2 !important; }

/* =========================================================
   REKLAM SLOT – boşken gizle
   ========================================================= */

.ad-slot:empty, .advertisement-area:empty, .banner-ad:empty, .ad-container:empty { display: none !important; }
.ad-container { min-height: 0; }

/* =========================================================
   FOUC ÖNLEYİCİ
   ========================================================= */

html:not([data-theme]) body { background-color: #0f0f0f; color: #f1f1f1; }

/* =========================================================
   DESKTOP HEADER PADDING FIX
   ========================================================= */

@media (min-width: 769px) {
  .home-fluid .home__right { padding-top: 0px !important; }
}

/* =========================================================
   MASA ÜSTÜ HOME BODY PADDING
   ========================================================= */

@media (min-width: 1200px) {
  .home-body { padding: 16px 24px 48px !important; }
  .home-body__title { font-size: 16px !important; font-weight: 700 !important; margin-bottom: 12px !important; color: var(--yt-text) !important; }
}

@media (min-width: 769px) and (max-width: 1199px) {
  .home-body { padding: 14px 16px 48px !important; }
  .home-body__title { font-size: 15px !important; font-weight: 700 !important; margin-bottom: 10px !important; }
}

/* =========================================================
   VİDEO PLAYER – Arka plan boşluğu düzeltmesi
   ========================================================= */

.primary__videoPlayer, .video-item__thumb.mainVideo {
  background: transparent !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

.primary__videoPlayer > .lumout-yt-wrapper,
.primary__videoPlayer > div[style*='padding-top'] { display: block !important; }

/* =========================================================
   YT HEADER İKON BUTONLAR
   ========================================================= */

.yt-header-icon-btn {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 40px !important; height: 40px !important;
  border-radius: 50% !important; background: transparent !important; border: none !important;
  cursor: pointer !important; color: var(--yt-icon) !important;
  transition: background .18s, color .18s !important; flex-shrink: 0 !important;
  padding: 0 !important; text-decoration: none !important; position: relative !important;
}

.yt-header-icon-btn:hover { background: var(--yt-hover) !important; color: var(--yt-icon-hover) !important; }

/* =========================================================
   SIDEBAR MINI - Alt footer linkleri gizle
   ========================================================= */

.sidebar-menu.mini .sidebar-footer, .sidebar-menu.mini .sidebar-links,
.sidebar-menu.mini .sidebar-copyright, .sidebar-menu.mini .sidebar__footer,
.sidebar-menu.mini .footer-links, .sidebar-menu.mini .copy-right { display: none !important; }
.sidebar-menu.mini .sidebar-footer-links { display: none !important; }

/* =========================================================
   REKLAM SİSTEMİ – Pre/Mid-roll Skip butonu + Countdown
   ========================================================= */

.lumout-pre-ad-badge {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 15;
  background: rgba(0,0,0,.82);
  color: #ffcc00;
  font-size: 13px; font-weight: 700;
  padding: 8px 18px;
  border-radius: 4px;
  border: 1px solid rgba(255,204,0,.35);
  backdrop-filter: blur(6px);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .3s, transform .3s;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
}

.lumout-pre-ad-badge.show { opacity: 1; transform: translateY(0); }

.lumout-ad-skip-btn {
  position: relative;
  background: rgba(0,0,0,.85) !important;
  border: 1.5px solid rgba(255,255,255,.4) !important;
  color: #fff !important; font-size: 13px; font-weight: 600;
  padding: 8px 20px; border-radius: 2px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s, border-color .15s;
  white-space: nowrap; backdrop-filter: blur(4px);
  box-shadow: 0 2px 12px rgba(0,0,0,.5);
  letter-spacing: .04em;
}

.lumout-ad-skip-btn:not(:disabled):hover {
  background: rgba(255,255,255,.15) !important;
  border-color: rgba(255,255,255,.7) !important;
}

.lumout-ad-skip-btn:disabled { opacity: .8; cursor: not-allowed; }

.lumout-ad-skip-btn.ready {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.8) !important;
}

/* =========================================================
   İLGİLİ VİDEO REKLAM KARTI – Sidebar
   ========================================================= */

.video-item--in-feed-ad-sidebar { padding: 8px 0 !important; border-bottom: 1px solid var(--yt-border, rgba(255,255,255,.08)) !important; margin-bottom: 4px !important; }
[data-theme="light"] .video-item--in-feed-ad-sidebar { border-bottom-color: rgba(0,0,0,.07) !important; }

/* =========================================================
   GENEL OPTİMİZASYON
   ========================================================= */

* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }
a { transition: color .15s ease; }
button:focus-visible, a:focus-visible { outline: 2px solid hsl(var(--base)); outline-offset: 2px; }
textarea { resize: vertical; }

.spinner i { color: hsl(var(--base)) !important; }

[data-theme="light"] .create__list { background: #ffffff !important; border-color: rgba(0,0,0,0.12) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important; }
[data-theme="light"] .create__list-link { color: #0f0f0f !important; }
[data-theme="light"] .create__list-link:hover { background: #f2f2f2 !important; color: #0f0f0f !important; }

[data-theme="light"] .dark-label { display: none !important; }
[data-theme="light"] .light-label { display: inline !important; color: #0f0f0f !important; }
[data-theme="dark"] .dark-label { display: inline !important; }
[data-theme="dark"] .light-label { display: none !important; }

[data-theme="light"] .error-page { background: #f9f9f9 !important; }
[data-theme="light"] .error-page .title { color: #0f0f0f !important; }
[data-theme="light"] .error-page .text { color: #606060 !important; }

[data-theme="light"] .page-link { background-color: #ffffff !important; border-color: rgba(0,0,0,0.15) !important; color: #0f0f0f !important; }
[data-theme="light"] .page-link:hover { background-color: #f2f2f2 !important; color: #0f0f0f !important; }
[data-theme="light"] .page-item.active .page-link { background-color: hsl(var(--base)) !important; border-color: hsl(var(--base)) !important; color: #fff !important; }

[data-theme="light"] .channel-header { background: #f2f2f2 !important; }
[data-theme="light"] .channel-name { color: #0f0f0f !important; }
[data-theme="light"] .channel-meta { color: #606060 !important; }

[data-theme="light"] .footer { background-color: #f2f2f2 !important; border-top: 1px solid rgba(0,0,0,0.08) !important; }
[data-theme="light"] .footer .text, [data-theme="light"] .footer p, [data-theme="light"] .footer a { color: #606060 !important; }
[data-theme="light"] .footer a:hover { color: #0f0f0f !important; }

/* =========================================================
   BANNER REKLAMLARI – Sidebar
   ========================================================= */

.lumout-sidebar-banner {
  display: flex !important; align-items: center !important; gap: 12px !important;
  padding: 12px 14px !important;
  background: var(--yt-surface-2, #1e1e1e) !important;
  border: 1px solid var(--yt-border, rgba(255,255,255,0.1)) !important;
  border-radius: 10px !important; margin-bottom: 12px !important;
  text-decoration: none !important;
  transition: background .18s ease, border-color .18s ease, transform .15s ease, box-shadow .18s ease !important;
  overflow: hidden !important; box-shadow: 0 2px 12px rgba(0,0,0,.18) !important;
  cursor: pointer !important;
}

.lumout-sidebar-banner:hover {
  border-color: hsl(var(--base) / .45) !important; background: var(--yt-hover, rgba(255,255,255,.07)) !important;
  transform: translateY(-1px) !important; box-shadow: 0 4px 20px rgba(0,0,0,.28) !important;
  text-decoration: none !important;
}

[data-theme="light"] .lumout-sidebar-banner { background: #f2f2f2 !important; border-color: rgba(0,0,0,0.1) !important; }
[data-theme="light"] .lumout-sidebar-banner:hover { background: #e8e8e8 !important; }

.lumout-sidebar-banner__title { font-size: 13px !important; font-weight: 600 !important; color: var(--yt-text, #f1f1f1) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; line-height: 1.3 !important; }
[data-theme="light"] .lumout-sidebar-banner__title { color: #0f0f0f !important; }

.lumout-sidebar-banner__domain { font-size: 11px !important; color: var(--yt-text-secondary, #aaaaaa) !important; }
[data-theme="light"] .lumout-sidebar-banner__domain { color: #606060 !important; }

/* =========================================================
   VİDEO KARTI – Thumbnail border-radius
   ========================================================= */

.video-item-wrapper .video-item .video-item__thumb,
.video-wrapper .video-item .video-item__thumb {
  border-radius: 10px !important;
}

.secondary .video-item__thumb {
  border-radius: 8px !important;
}

/* =========================================================
   VİDEO KARTI – Duration badge
   ========================================================= */

.video-item__thumb .duration,
.video-item__thumb .video-duration {
  position: absolute !important;
  bottom: 6px !important;
  right: 6px !important;
  z-index: 4 !important;
  background: rgba(0,0,0,.85) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  line-height: 1.5 !important;
  letter-spacing: .02em !important;
  pointer-events: none !important;
  transition: opacity .25s ease !important;
}

/* =========================================================
   MİNİ PLAYER — Boyut ve görünüm düzeltmeleri
   Ekran görüntüsündeki sorunlar:
   1. Alt pencere çok küçük (340px → 460px)
   2. YouTube logosu/kontrolleri görünüyor (JS'de controls=0 ile çözüldü)
   ========================================================= */

.lumout-mini-player {
  width: 460px !important;
  bottom: 24px !important;
  right: 24px !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08) !important;
}

/* Mini player içindeki video/iframe boyutları */
.lumout-mini-player video,
.lumout-mini-player .lumout-mini-content,
.lumout-mini-player .lumout-mini-content iframe {
  width: 100% !important;
  aspect-ratio: 16/9 !important;
  display: block !important;
  background: #000 !important;
}

/* Mini player iframe'de YouTube logosu/kontrol çubuğu overlay ile ört */
.lumout-mini-content {
  position: relative !important;
  overflow: hidden !important;
  background: #000 !important;
}

/* Başlık max-width ayarla (460px'e göre) */
.lumout-mini-player-title {
  max-width: 380px !important;
}

/* Kontrol çubuğu */
.lumout-mini-player-controls {
  padding: 10px 14px !important;
}

/* Mobil: tam genişlik */
@media (max-width: 576px) {
  .lumout-mini-player {
    width: calc(100vw - 16px) !important;
    right: 8px !important;
    left: 8px !important;
    bottom: 70px !important;
  }
  .lumout-mini-player-title {
    max-width: calc(100vw - 80px) !important;
  }
}

/* Tablet */
@media (min-width: 577px) and (max-width: 768px) {
  .lumout-mini-player {
    width: 380px !important;
    right: 16px !important;
    bottom: 80px !important;
  }
  .lumout-mini-player-title {
    max-width: 300px !important;
  }
}