@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@700;800&display=swap");

/* Taşmayı kes (100vw / geniş içerik); arka plan kökte kalsın — CDN/CSS gecikse bile beyaz şerit azalır */
html {
  overflow-x: hidden;
  background-color: #0e0e0e;
}

body {
  overflow-x: hidden;
  font-family: "Manrope", sans-serif;
  background-color: #0e0e0e;
  color: #ffffff;
}

/* Navbar: YooScope — mor → cyan gradient + beta (PNG yerine metin) */
.brand-wordmark-wrap {
  position: relative;
  display: inline-block;
  line-height: 1.05;
}

.brand-wordmark-text {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(1.2rem, 3.2vw, 1.7rem);
  letter-spacing: -0.035em;
  background-image: linear-gradient(
    100deg,
    #5b21b6 0%,
    #7c3aed 22%,
    #6366f1 45%,
    #06b6d4 78%,
    #67e8f9 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-font-smoothing: antialiased;
  text-shadow:
    0 0 28px rgba(124, 58, 237, 0.42),
    0 0 48px rgba(34, 211, 238, 0.28),
    0 1px 0 rgba(0, 0, 0, 0.2);
}

.brand-wordmark-beta {
  position: absolute;
  right: -0.15em;
  top: -0.55em;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(0.45rem, 1.15vw, 0.65rem);
  line-height: 1;
  color: #67e8f9;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  pointer-events: none;
  text-shadow: 0 0 12px rgba(103, 232, 249, 0.55);
}

/* Sol menü daralt: ikon şeridi + ana içerik padding */
/* !important: Tailwind px-* CDN sırasıyla padding-left’i ezmesin */
@media (min-width: 768px) {
  /* Üst bar (sm:h-18) + içerik üstü nefes payı */
  .main-with-sidebar {
    padding-left: 17rem !important;
    padding-top: calc(4.5rem + 1rem) !important;
    transition: padding-left 0.2s ease, padding-top 0.2s ease;
  }

  /* Dar menü genişliği + sol nefes payı (biraz daha geniş) */
  body.sidebar-collapsed .main-with-sidebar {
    padding-left: calc(4.5rem + 1.25rem) !important;
  }

  body.sidebar-collapsed #site-sidebar {
    width: 4.5rem;
    min-width: 4.5rem;
  }

  body.sidebar-collapsed #site-sidebar .sidebar-nav-link {
    justify-content: center;
    gap: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  body.sidebar-collapsed #site-sidebar .sidebar-link-text {
    display: none;
  }

  /* Dar mod: bölüm başlığında sadece ikon; satırlarda sadece avatar */
  body.sidebar-collapsed #site-sidebar .sidebar-extra-title-text {
    display: none;
  }

  body.sidebar-collapsed #site-sidebar .sidebar-extra-heading {
    justify-content: center;
    margin-bottom: 0.5rem;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
  }

  body.sidebar-collapsed #site-sidebar .sidebar-extra-heading-icon {
    font-size: 1.875rem;
    line-height: 1;
    color: #fff;
  }

  body.sidebar-collapsed #site-sidebar .sidebar-extra {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
  }

  body.sidebar-collapsed #site-sidebar .sidebar-channel-label,
  body.sidebar-collapsed #site-sidebar .sidebar-channel-trailing,
  body.sidebar-collapsed #site-sidebar .sidebar-channel-meta,
  body.sidebar-collapsed #site-sidebar .sidebar-channel-stats {
    display: none !important;
  }

  body.sidebar-collapsed #site-sidebar .sidebar-extra-footer {
    display: none;
  }

  body.sidebar-collapsed #site-sidebar .sidebar-channel-row {
    justify-content: center;
    gap: 0;
    padding-left: 0.125rem;
    padding-right: 0.125rem;
  }

  body.sidebar-collapsed #site-sidebar .sidebar-channel-row > div:first-child {
    justify-content: center;
    gap: 0;
  }

  body.sidebar-collapsed #site-sidebar .sidebar-extra-list > * {
    margin-top: 0 !important;
  }

  body.sidebar-collapsed #site-sidebar .sidebar-extra-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
  }

  .main-with-sidebar-settings {
    padding-left: calc(15rem + 0.5%) !important;
    transition: padding-left 0.2s ease;
  }

  body.sidebar-collapsed .main-with-sidebar-settings {
    padding-left: calc(4.5rem + 1.25rem + 0.5%) !important;
  }
}

/* Yayıncı paneli: lg+ içerik alanı = viewport − sol panel − (xl+) sağ şerit; grid ortada ve daraltılmışda daha geniş */
@media (min-width: 1024px) {
  /* flex-col + varsayılan align-items: stretch: w-full+max-w+mx-auto çocuklar yatayda sola yapışıyordu */
  .stream-scroll-with-panel {
    align-items: center;
    margin-left: 14rem !important;
    width: calc(100vw - 14rem) !important;
    max-width: none !important;
    box-sizing: border-box;
    transition: margin-left 0.2s ease, width 0.2s ease;
  }

  body.stream-panel-collapsed .stream-scroll-with-panel {
    margin-left: 4.5rem !important;
    width: calc(100vw - 4.5rem) !important;
  }

  body.stream-panel-collapsed #stream-panel-sidebar {
    width: 4.5rem !important;
    min-width: 4.5rem !important;
  }

  body.stream-panel-collapsed #stream-panel-sidebar .stream-panel-link-text {
    display: none;
  }

  body.stream-panel-collapsed #stream-panel-sidebar .stream-community-chevron {
    display: none;
  }

  body.stream-panel-collapsed #stream-panel-sidebar nav a.flex {
    justify-content: center;
    gap: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  body.stream-panel-collapsed #stream-panel-sidebar [data-stream-community-toggle] {
    justify-content: center;
    gap: 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  body.stream-panel-collapsed #stream-panel-sidebar [data-stream-community-toggle] > span:first-child {
    justify-content: center;
    gap: 0;
  }

  body.stream-panel-collapsed #stream-panel-sidebar .stream-community-wrap {
    min-width: 0 !important;
    width: 100%;
  }

  body.stream-panel-collapsed #stream-panel-sidebar [data-stream-community-sub] {
    border-left-width: 0;
    padding-left: 0;
    margin-left: 0;
    align-items: center;
  }

  body.stream-panel-collapsed #stream-panel-sidebar [data-stream-community-sub] a {
    justify-content: center;
    gap: 0;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
  }

  /* stream.php: align-items:center iken ana grid tam genişlik */
  #stream-main-grid {
    align-self: stretch;
    width: 100%;
  }
}

@media (min-width: 1280px) {
  /* Tek kaynak: sol/sağ aynı — Tailwind px-* ile üst üste binmesin diye HTML’de xl:px-0 */
  .stream-scroll-with-panel {
    width: calc(100vw - 14rem) !important;
    padding-inline: 4.25rem !important;
  }

  body.stream-panel-collapsed .stream-scroll-with-panel {
    width: calc(100vw - 4.5rem) !important;
  }

  /* Ana grid: ortalanmış, sol menü daralınca üst sınır artar */
  #stream-main-grid {
    max-width: min(100rem, 100%);
    margin-inline: auto;
  }

  body.stream-panel-collapsed #stream-main-grid {
    max-width: min(120rem, 100%);
  }

  /*
   * stream.php (stream-dashboard-scroll): İçerik sütunu sağ şerit (w-16) genişliğini düşer;
   * eşit padding-inline — şerit üstüne ekstra sağ boşluk gerekmez.
   */
  .stream-scroll-with-panel.stream-dashboard-scroll {
    width: calc(100vw - 14rem - 4rem) !important;
    margin-left: 14rem !important;
    padding-inline: 1.5rem !important;
  }

  body.stream-panel-collapsed .stream-scroll-with-panel.stream-dashboard-scroll {
    width: calc(100vw - 4.5rem - 4rem) !important;
    margin-left: 4.5rem !important;
  }
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.glass-card {
  background: rgba(38, 38, 38, 0.4);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.neon-glow-purple {
  filter: drop-shadow(0 0 15px rgba(204, 151, 255, 0.3));
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.glass-panel {
  background: rgba(38, 38, 38, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Match sidebar `bg-[#0f1016]`; override Tailwind Forms default light inputs */
input.settings-input,
textarea.settings-input {
  background-color: #0f1016 !important;
  color: #f5f5f5 !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input.settings-input:focus,
textarea.settings-input:focus {
  outline: none;
  border-color: rgba(204, 151, 255, 0.45);
  box-shadow: 0 0 0 2px rgba(156, 72, 234, 0.2);
}

/* Ayarlar: kullanıcı adı müsaitlik (JS sınıfları) — focus’ta da korunur */
#settings-username.settings-input--username-ok,
#settings-username.settings-input--username-ok:focus {
  border-color: rgba(52, 211, 153, 0.65) !important;
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.22) !important;
}

#settings-username.settings-input--username-err,
#settings-username.settings-input--username-err:focus {
  border-color: rgba(248, 113, 113, 0.7) !important;
  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.22) !important;
}

input.settings-input::placeholder,
textarea.settings-input::placeholder {
  color: #737373;
}

input.settings-input:-webkit-autofill,
textarea.settings-input:-webkit-autofill {
  -webkit-text-fill-color: #f5f5f5;
  box-shadow: 0 0 0px 1000px #0f1016 inset;
  transition: background-color 50000s ease-in-out 0s;
}

/* stream.php: sağ sütun bilgi + kanal — grid hücresini doldur; kartlar arası boşluk JS flex gap ile (≈ gap-4) */
@media (min-width: 1280px) {
  #stream-right-stack.stream-right-stack--active {
    align-self: stretch;
    min-height: 0;
  }

  #stream-right-stack.stream-right-stack--active > #stream-section-channel > div:first-child {
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    min-height: 0;
  }
}