/* Panelim — sade yönetim kabuğu */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=swap");

:root {
  --st-ink: #101828;
  --st-line: rgba(16, 24, 40, .08);
  --st-card: #fff;
  --st-blue: #155eef;
  --st-live: #12b76a;
  --st-warn: #f79009;
  --st-bad: #f04438;
}

body.ytp-app,
body.ytp-auth,
body.ytp-promo {
  font-family: "Manrope", "Segoe UI", sans-serif;
}
body.ytp-app {
  background: #f4f6fb;
}
[data-bs-theme="dark"] body.ytp-app { background: #0b1020; }

.ytp-crumb { display: none !important; }
.ytp-content-header h1 { letter-spacing: -.03em; }

.ytp-sidebar {
  background: #101828 !important;
}
.ytp-brand { gap: .7rem; }
.ytp-ico {
  width: 32px; height: 32px; border-radius: 10px;
  display: inline-grid; place-items: center; flex: 0 0 auto;
  background: rgba(255,255,255,.08); color: #e4e7ec;
}
.ytp-brand .ytp-ico.live { animation: stLive 1.4s ease-in-out infinite; }
.ytp-side-nav a {
  margin: 2px 10px;
  border-radius: 12px;
  padding: .55rem .7rem;
}
.ytp-side-nav a.active {
  background: #155eef !important;
  border-left: 0 !important;
  padding-left: .7rem !important;
}
.ytp-side-nav .ytp-tree-sub a { padding-left: .7rem; }
.ytp-header {
  background: rgba(255,255,255,.9) !important;
  backdrop-filter: blur(12px);
}
[data-bs-theme="dark"] .ytp-header { background: rgba(16,24,40,.92) !important; }

.ytp-content .card,
.ytp-stat,
.info-box,
.bot-stat,
.preview-box,
.ytp-hero-bar {
  border: 0 !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 28px rgba(16, 24, 40, .06) !important;
}
.ytp-content .card { background: var(--st-card); }
[data-bs-theme="dark"] .ytp-content .card { background: #151b2e; }

.ytp-stat {
  min-height: 118px;
  background: #101828 !important;
  color: #fff !important;
}
.ytp-stat.success { background: #053321 !important; }
.ytp-stat.danger { background: #55160c !important; }
.ytp-stat.warning { background: linear-gradient(160deg, #f79009, #b54708) !important; color: #fff !important; }
.ytp-stat .ytp-stat-ico { opacity: .35; font-size: 2.6rem; }

body.ytp-page-dashboard #quickRow { display: none !important; }

.st-advanced {
  border: 1px dashed var(--st-line);
  border-radius: 14px;
  padding: .7rem .9rem 1rem;
  background: #f8fafc;
}
.st-advanced summary {
  cursor: pointer;
  font-weight: 700;
  color: #475467;
}

/* Kaydırmalı bölüm şeridi */
.ytp-subtabs,
.bot-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: .7rem !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: .15rem .15rem .7rem !important;
  margin-bottom: 1rem !important;
  background: transparent !important;
  border: 0 !important;
}
.ytp-subtabs .tab,
.bot-tabs .tab {
  scroll-snap-align: start;
  flex: 0 0 132px;
  min-height: 92px;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  border-radius: 16px !important;
  border: 1px solid var(--st-line) !important;
  background: #fff !important;
  color: var(--st-ink) !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 18px rgba(16, 24, 40, .05);
}
.ytp-subtabs .tab::before,
.bot-tabs .tab::before { font-size: 1.35rem; line-height: 1; }
.ytp-subtabs .tab[data-tab="kontrol"]::before { content: "📡"; }
.ytp-subtabs .tab[data-tab="config"]::before { content: "⚙️"; }
.ytp-subtabs .tab[data-tab="media"]::before { content: "🎬"; }
.ytp-subtabs .tab[data-tab="hours"]::before { content: "🕒"; }
.ytp-subtabs .tab[data-tab="theme"]::before { content: "🎨"; }
.ytp-subtabs .tab[data-tab="yarisma"]::before { content: "🏆"; }
#navTemaOzel::before { content: "✨"; }
#navBot::before { content: "💬"; }
.bot-tabs .tab[data-tab="durum"]::before { content: "🟢"; }
.bot-tabs .tab[data-tab="bot"]::before { content: "🤖"; }
.bot-tabs .tab[data-tab="oyunlar"]::before { content: "🎮"; }
.bot-tabs .tab[data-tab="yarisma"]::before { content: "🏆"; }
.bot-tabs .tab[data-tab="revorh"]::before { content: "📖"; }
.bot-tabs .tab[data-tab="cevaplar"]::before { content: "💭"; }
.bot-tabs .tab[data-tab="ozel"]::before { content: "⚡"; }
.ytp-subtabs .tab.active,
.bot-tabs .tab.active {
  background: #155eef !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* Overlay kutular */
.info-box,
.bot-stat {
  background: linear-gradient(180deg, rgba(255,255,255,.96), #f8fafc) !important;
  overflow: hidden;
  opacity: 1 !important;
}
.info-box .info-box-icon {
  background: #155eef !important;
}
.info-box.status-item.is-on {
  box-shadow: 0 0 0 1px rgba(18, 183, 106, .35), 0 10px 24px rgba(18, 183, 106, .12) !important;
}
.info-box.status-item.is-on .info-box-icon {
  background: #12b76a !important;
  animation: stLive 1.5s ease-in-out infinite;
}
.bot-stat.is-on {
  box-shadow: 0 0 0 1px rgba(18, 183, 106, .35) !important;
}

.preview-box {
  background: #0b1220 !important;
  border: 2px solid rgba(34, 211, 238, .7) !important;
  min-height: 220px;
  animation: stScreen 1.8s ease-in-out infinite;
}
.preview-box::before,
.preview-box::after {
  content: "";
  position: absolute;
  z-index: 3;
  pointer-events: none;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,.8);
  background: rgba(8, 12, 24, .45);
  animation: stBox 2.1s ease-in-out infinite;
}
.preview-box::before { top: 12px; left: 12px; width: 132px; height: 36px; }
.preview-box::after { right: 12px; bottom: 12px; width: 190px; height: 48px; animation-delay: .35s; }

/* Yanıp sönen uyarılar */
.alert-danger,
.alert-warning,
#vpsWarn,
.badge.offline,
.status-live-pill.is-offline,
.info-box.status-item.is-warn {
  animation: stBlink 1.15s steps(2, end) infinite;
}
.alert-danger,
.alert-warning,
#vpsWarn {
  border-radius: 14px !important;
  border-width: 0 0 0 4px !important;
  font-weight: 700;
}

.table { --bs-table-bg: transparent; }
.card .table thead th {
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #667085;
}

/* Giriş */
body.ytp-auth {
  display: block !important;
  min-height: 100vh;
  margin: 0;
  padding: 0 !important;
  background: #0b1220 !important;
}
.ytp-stage {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
}
.ytp-stage-screen {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 30%, rgba(21, 94, 239, .45), transparent 36%),
    linear-gradient(160deg, #0b1220, #1d2939);
  animation: stScreen 2s ease-in-out infinite;
}
.ytp-stage-copy {
  position: absolute;
  left: 32px; right: 32px; top: 38%;
  transform: translateY(-50%);
  color: #fff;
  max-width: 460px;
}
.ytp-stage-copy h1 {
  font-weight: 800;
  letter-spacing: -.03em;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  margin: 0 0 .6rem;
}
.ytp-stage-copy p { color: #d0d5dd; margin: 0; }
.ytp-stage-screen .ov {
  position: absolute;
  display: flex; align-items: center; gap: 10px;
  color: #fff;
  border: 2px solid rgba(255,255,255,.75);
  background: rgba(8, 12, 24, .55);
  border-radius: 16px;
  padding: 10px 14px;
  animation: stBox 2s ease-in-out infinite;
}
.ytp-stage-screen .ov b, .ytp-stage-screen .ov span { display: block; }
.ytp-stage-screen .ov span { font-size: .78rem; opacity: .8; }
.ov-live { top: 24px; left: 24px; font-weight: 800; letter-spacing: .12em; animation: stBlink 1.1s steps(2, end) infinite !important; }
.ov-live i { width: 10px; height: 10px; border-radius: 50%; background: var(--st-live); display: inline-block; }
.ov-song { left: 24px; bottom: 84px; }
.ov-user { right: 24px; bottom: 24px; animation-delay: .3s; }
.ytp-stage-form {
  display: grid; place-items: center;
  padding: 28px 20px;
  background: #f4f6fb;
}
.ytp-auth-box { width: min(420px, 100%); }
.ytp-auth-logo a { color: var(--st-ink); text-decoration: none; font-weight: 800; font-size: 1.6rem; }
.ytp-stage-form .card { border: 0; border-radius: 20px; box-shadow: 0 16px 40px rgba(16,24,40,.1); }

@keyframes stLive {
  0%, 100% { box-shadow: 0 0 0 0 rgba(18, 183, 106, .55); }
  50% { box-shadow: 0 0 0 8px rgba(18, 183, 106, 0); }
}
@keyframes stBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
@keyframes stScreen {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.12); }
}
@keyframes stBox {
  0%, 100% { opacity: 1; transform: translateY(0); }
  50% { opacity: .7; transform: translateY(-3px); }
}

@media (max-width: 900px) {
  .ytp-stage { grid-template-columns: 1fr; }
  .ytp-stage-screen { min-height: 240px; }
  .ov-song, .ov-user { display: none; }
}
/* Yayın kartı — Yönet / Bot / Tema kutuları */
#streamCards .col-lg-6,
#streamCards .col-md-6 { flex: 0 0 100%; max-width: 100%; }
.stream-hub-actions { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem !important; margin-top: .35rem; }
.stream-hub-actions .btn { min-height: 124px !important; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: .45rem !important; border: 0 !important; border-radius: 18px !important; padding: 1rem .5rem !important; font-size: 1.05rem !important; font-weight: 800 !important; letter-spacing: -.02em; color: #fff !important; box-shadow: 0 14px 28px rgba(16, 24, 40, .14) !important; transition: transform .15s ease, box-shadow .15s ease; }
.stream-hub-actions .btn:hover { transform: translateY(-3px); color: #fff !important; box-shadow: 0 18px 34px rgba(16, 24, 40, .2) !important; }
.stream-hub-actions .btn i { font-size: 1.65rem !important; margin: 0 !important; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: rgba(255, 255, 255, .22); }
.stream-hub-actions .btn-primary { background: linear-gradient(165deg, #3b82f6, #1d4ed8) !important; }
.stream-hub-actions .btn-info { background: linear-gradient(165deg, #22d3ee, #0891b2) !important; }
.stream-hub-actions .btn-warning { background: linear-gradient(165deg, #fbbf24, #d97706) !important; }
.stream-hub-actions .btn-outline-danger { background: linear-gradient(165deg, #fb7185, #e11d48) !important; }
@media (max-width: 720px) { .stream-hub-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .stream-hub-actions .btn { min-height: 108px !important; } }
body.ytp-page-dashboard .ytp-stat.warning{display:flex !important;flex-direction:column;visibility:visible !important;opacity:1 !important;min-height:118px !important}
.media-half{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.media-pane{border:1px solid rgba(16,24,40,.08);border-radius:16px;padding:1rem;background:#f8fafc}
#mediaSplitTabs .tab[data-media-split=video]::before{content:"\1F3AC"}
#mediaSplitTabs .tab[data-media-split=image]::before{content:"\1F5BC\FE0F"}
#mediaSplitTabs .tab[data-media-split=vip]::before{content:"\1F451"}
.vps-edit{margin:0 1rem 1rem;padding:1rem;border-radius:16px;background:#f8fafc;border:1px dashed rgba(16,24,40,.12)}
@media (max-width: 980px) { .media-half { grid-template-columns: 1fr !important; } }body.ytp-page-yonet #ytpSubTabs,body.ytp-page-bot .bot-tabs{flex-direction:row !important;position:static}}
body.ytp-page-yonet .theme-presets{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:.7rem !important}
body.ytp-page-yonet .theme-chip{min-height:92px;margin:0 !important;border-radius:16px !important;border:1px solid rgba(16,24,40,.08) !important;background:#fff !important;color:#101828 !important;box-shadow:0 8px 18px rgba(16,24,40,.05);display:flex !important;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;font-weight:800}
body.ytp-page-yonet .theme-chip .ti{font-size:1.35rem;line-height:1}
body.ytp-page-yonet .theme-chip.active,body.ytp-page-yonet .theme-chip.gold.active{background:#155eef !important;color:#fff !important;border-color:transparent !important}
body.ytp-page-yonet #tab-theme h3{font-size:1rem;margin:1.1rem 0 .6rem}
.ytp-live-banner{background:linear-gradient(105deg,#101828 0%,#1e3a8a 62%,#155eef 100%) !important;color:#fff !important;padding:1rem 1.15rem !important}
.ytp-live-banner-copy{display:flex;align-items:center;gap:.8rem}
.ytp-live-dot{width:12px;height:12px;border-radius:50%;background:#12b76a;flex:0 0 auto;animation:stLive 1.4s ease-in-out infinite}
.ytp-live-kicker{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#d1e0ff}
.ytp-live-banner h2{color:#fff !important}
.ytp-live-pills{display:flex;gap:.45rem;flex-wrap:wrap}
.ytp-pill{border-radius:999px;padding:.38rem .75rem;font-size:.78rem;font-weight:800;background:rgba(255,255,255,.14);color:#fff}
.ytp-pill.is-on{background:#12b76a}
.ytp-pill.is-warn{background:#f79009;color:#1a1204}
.ytp-pill.is-off{background:rgba(255,255,255,.16);color:#e4e7ec}
.hour-slots{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.8rem}
.hour-slot{background:#101828;color:#fff;border-radius:999px;padding:.35rem .7rem;font-size:.78rem;font-weight:800}
.hour-slot.is-live { background: #12b76a; }
.ytp-live-now { margin-top: .2rem; font-weight: 800; font-size: .92rem; color: #fff; }
.race-board{background:linear-gradient(160deg,#101828 0%,#1e3a8a 55%,#155eef 100%);color:#fff;border-radius:22px;padding:1.25rem;box-shadow:0 18px 40px rgba(21,94,239,.22)}
.race-head{display:flex;gap:1rem;align-items:center;margin-bottom:1rem}
.race-head h2{margin:0 0 .25rem;font-size:1.35rem;font-weight:800;color:#fff}
.race-head p{margin:0;color:rgba(255,255,255,.82);font-size:.92rem}
.race-trophy{width:64px;height:64px;border-radius:18px;flex:0 0 auto;display:grid;place-items:center;font-size:2rem;background:rgba(255,255,255,.14)}
.race-songs{display:grid;grid-template-columns:1fr auto 1fr;gap:.8rem;align-items:stretch}
.race-song{background:rgba(255,255,255,.1);border-radius:16px;padding:.9rem;border:1px solid rgba(255,255,255,.16)}
.race-song label,.race-clock label,.race-gift label{display:block;font-size:.78rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin-bottom:.35rem;color:rgba(255,255,255,.8)}
.race-mark{display:inline-block;background:#fff;color:#155eef;font-weight:900;border-radius:999px;padding:.15rem .55rem;margin-bottom:.45rem}
.race-song.is-b .race-mark{color:#b42318}
.race-vs{align-self:center;font-weight:900;font-size:1.2rem;letter-spacing:.08em}
.race-clock{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;margin:1rem 0;background:rgba(0,0,0,.18);border-radius:16px;padding:.9rem 1rem}
.race-clock-num{font-size:2.4rem;font-weight:900;line-height:1;min-width:4.2rem}
.race-clock-num small{font-size:1rem;margin-left:.15rem;font-weight:800}
.race-clock input[type="range"]{width:100%;accent-color:#12b76a}
.race-scale{display:flex;justify-content:space-between;font-size:.75rem;font-weight:700;color:rgba(255,255,255,.7);margin-top:.2rem}
.race-clock .hint,.race-gift span{color:rgba(255,255,255,.75);margin:.35rem 0 0;font-size:.82rem}
.race-gift{min-width:110px}
.race-gift input{font-weight:800}
.race-tools{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.75rem}
.race-live{margin-top:.9rem;background:#fff;color:#101828;border-radius:16px;padding:1rem}
.race-live-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.race-left{background:#155eef;color:#fff;border-radius:999px;padding:.25rem .7rem;font-weight:800}
.race-board .btn-outline-secondary,.race-board .btn-outline-warning,.race-board .btn-outline-danger{background:#fff}
@media (max-width:800px){.race-songs,.race-clock{grid-template-columns:1fr}.race-vs{text-align:center}}