/* YTPanelim — özel panel kabuğu */
:root {
  --ytp-sidebar-w: 260px;
  --ytp-header-h: 56px;
  --ytp-accent: #0d6efd;
  --ytp-sidebar-bg: #111827;
  --ytp-sidebar-text: #e5e7eb;
  --ytp-sidebar-muted: #9ca3af;
  --ytp-sidebar-active: #2563eb;
}

html, body { min-height: 100%; }
body.ytp-app {
  margin: 0;
  background: var(--bs-body-bg, #f4f6f9);
}

#ytp-page-slot { display: contents; }

.ytp-shell {
  display: grid;
  grid-template-columns: var(--ytp-sidebar-w) 1fr;
  grid-template-rows: var(--ytp-header-h) 1fr auto;
  min-height: 100vh;
}
body.ytp-sidebar-collapsed .ytp-shell {
  grid-template-columns: 0 1fr;
}
body.ytp-sidebar-collapsed .ytp-sidebar {
  width: 0;
  overflow: hidden;
  border: 0;
  padding: 0;
}

.ytp-header {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: 0;
  z-index: 1030;
  height: var(--ytp-header-h);
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0 1rem;
  background: var(--bs-body-bg, #fff);
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}
.ytp-header .ytp-nav { display: flex; align-items: center; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.ytp-header .ytp-nav.ms-auto { margin-left: auto; }
.ytp-header a, .ytp-header button.ytp-icon-btn {
  color: inherit;
  text-decoration: none;
}
.ytp-icon-btn {
  border: 0;
  background: transparent;
  padding: .4rem .55rem;
  border-radius: .5rem;
  cursor: pointer;
  line-height: 1;
}
.ytp-icon-btn:hover { background: var(--bs-secondary-bg, #e9ecef); }

.ytp-sidebar {
  grid-column: 1;
  grid-row: 1 / span 3;
  background: var(--ytp-sidebar-bg);
  color: var(--ytp-sidebar-text);
  border-right: 1px solid rgba(255,255,255,.06);
  overflow: auto;
}
.ytp-brand {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: 1rem 1.1rem;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ytp-side-nav { list-style: none; margin: 0; padding: .75rem 0 1.5rem; }
.ytp-side-nav .ytp-nav-label {
  padding: .85rem 1.1rem .35rem;
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--ytp-sidebar-muted);
  font-weight: 700;
}
.ytp-side-nav a {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem 1.1rem;
  color: var(--ytp-sidebar-text);
  text-decoration: none;
  font-size: .92rem;
}
.ytp-side-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.ytp-side-nav a.active {
  background: color-mix(in srgb, var(--ytp-sidebar-active) 35%, transparent);
  color: #fff;
  border-left: 3px solid var(--ytp-sidebar-active);
  padding-left: calc(1.1rem - 3px);
}
.ytp-side-nav a.disabled { opacity: .55; pointer-events: none; }
.ytp-side-nav .ytp-tree > a { font-weight: 600; }
.ytp-side-nav .ytp-tree-sub {
  list-style: none;
  margin: 0;
  padding: 0 0 .35rem 0;
  display: none;
}
.ytp-side-nav .ytp-tree.open > .ytp-tree-sub { display: block; }
.ytp-side-nav .ytp-tree-sub a {
  padding-left: 2.2rem;
  font-size: .86rem;
  color: #cbd5e1;
}
.ytp-side-nav .ytp-tree .ytp-chevron {
  margin-left: auto;
  transition: transform .15s ease;
  font-size: .8rem;
  opacity: .7;
}
.ytp-side-nav .ytp-tree.open .ytp-chevron { transform: rotate(90deg); }

.ytp-main {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
}
.ytp-content-header {
  padding: 1rem 1.25rem .25rem;
}
.ytp-content-header h1 {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0;
}
.ytp-crumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .35rem 0 0;
  padding: 0;
  font-size: .85rem;
  color: var(--bs-secondary-color, #6c757d);
}
.ytp-crumb li:not(:last-child)::after { content: "/"; margin-left: .35rem; opacity: .5; }
.ytp-crumb a { color: inherit; text-decoration: none; }
.ytp-crumb a:hover { color: var(--ytp-accent); }

.ytp-content {
  padding: .75rem 1.25rem 2rem;
}

.ytp-footer {
  grid-column: 2;
  grid-row: 3;
  padding: .65rem 1.25rem;
  border-top: 1px solid var(--bs-border-color, #dee2e6);
  font-size: .85rem;
  color: var(--bs-secondary-color, #6c757d);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

/* Kart / form yardımcıları */
.card-outline { border-top-width: 3px !important; }
.card-primary.card-outline { border-top-color: #0d6efd; }
.card-success.card-outline { border-top-color: #198754; }
.card-info.card-outline { border-top-color: #0dcaf0; }
.card-warning.card-outline { border-top-color: #ffc107; }
.card-danger.card-outline { border-top-color: #dc3545; }
.card-secondary.card-outline { border-top-color: #6c757d; }
.card-dark.card-outline { border-top-color: #212529; }
.card-tools { float: right; margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.card-header { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.card-title { margin: 0; font-size: 1.05rem; font-weight: 650; }

.ytp-stat {
  border-radius: .9rem;
  padding: 1rem 1.1rem;
  color: #fff;
  margin-bottom: 1rem;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .1);
  position: relative;
  overflow: hidden;
  min-height: 110px;
}
.ytp-stat h3 { margin: 0; font-size: 1.9rem; font-weight: 700; }
.ytp-stat p { margin: .2rem 0 0; opacity: .92; }
.ytp-stat .ytp-stat-ico {
  position: absolute; right: .85rem; top: .7rem; font-size: 2.4rem; opacity: .22;
}
.ytp-stat a {
  display: block; margin-top: .85rem; color: inherit; text-decoration: none; font-size: .85rem; opacity: .9;
}
.ytp-stat.primary { background: linear-gradient(135deg, #2563eb, #0d6efd); }
.ytp-stat.success { background: linear-gradient(135deg, #159947, #198754); }
.ytp-stat.warning { background: linear-gradient(135deg, #e0a800, #ffc107); color: #212529; }
.ytp-stat.danger { background: linear-gradient(135deg, #c82333, #dc3545); }
.ytp-stat.info { background: linear-gradient(135deg, #0aa2c0, #0dcaf0); color: #052c34; }

/* AdminLTE tarzı info-box */
.info-box {
  display: flex;
  min-height: 84px;
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: .5rem;
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .04);
  margin-bottom: 0;
  overflow: hidden;
}
.info-box .info-box-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  font-size: 1.55rem;
  color: #fff;
  flex: 0 0 70px;
}
.info-box .info-box-content {
  flex: 1;
  padding: .65rem .85rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.info-box .info-box-text {
  display: block;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--bs-secondary-color, #6c757d);
  font-weight: 600;
  margin-bottom: .2rem;
}
.info-box .info-box-number {
  display: block;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.35;
  word-break: break-word;
}
.info-box .status-badge {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  vertical-align: middle;
}
.info-box.status-item.is-on {
  border-color: rgba(25, 135, 84, .35);
  box-shadow: 0 0 0 1px rgba(25, 135, 84, .08);
}
.info-box.status-item.is-warn {
  border-color: rgba(255, 193, 7, .45);
}
.info-box.status-item.is-off {
  opacity: .92;
}
.status-live-pill .status-live-ping {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  margin-right: .35rem;
  vertical-align: middle;
  animation: ytpStatusPing 1.4s ease infinite;
}
.status-live-pill.is-offline {
  background: var(--bs-secondary) !important;
}
@keyframes ytpStatusPing {
  0% { box-shadow: 0 0 0 0 rgba(25, 135, 84, .45); }
  70% { box-shadow: 0 0 0 8px rgba(25, 135, 84, 0); }
  100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); }
}
.status-alerts .status-alert {
  border-radius: .5rem;
  padding: .55rem .75rem;
  margin-bottom: .4rem;
  font-size: .9rem;
}
.status-alerts .status-alert.ok {
  background: rgba(25, 135, 84, .1);
  color: #0f5132;
  border: 1px solid rgba(25, 135, 84, .25);
}
.status-alerts .status-alert.warn {
  background: rgba(255, 193, 7, .15);
  color: #664d03;
  border: 1px solid rgba(255, 193, 7, .35);
}
.status-alerts .status-alert.danger {
  background: rgba(220, 53, 69, .1);
  color: #842029;
  border: 1px solid rgba(220, 53, 69, .3);
}

.ytp-quick {
  display: flex; gap: .75rem; align-items: center;
  border: 1px solid var(--bs-border-color);
  border-radius: .85rem;
  padding: .75rem;
  background: var(--bs-body-bg);
  margin-bottom: 1rem;
  min-height: 90px;
}
.ytp-quick-ico {
  width: 56px; height: 56px; border-radius: .65rem;
  display: grid; place-items: center; color: #fff; font-size: 1.35rem; flex: 0 0 auto;
}
.ytp-quick-ico.primary { background: #0d6efd; }
.ytp-quick-ico.success { background: #198754; }
.ytp-quick-ico.warning { background: #ffc107; color: #212529; }
.ytp-quick-ico.danger { background: #dc3545; }
.ytp-quick-ico.info { background: #0dcaf0; color: #052c34; }
.ytp-quick-body { min-width: 0; }
.ytp-quick-body .t { display: block; font-size: .78rem; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .04em; }
.ytp-quick-body .n { display: block; font-weight: 700; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ytp-quick-body a { font-size: .85rem; }

.ytp-note {
  border-left: 4px solid var(--ytp-accent);
  background: var(--bs-secondary-bg, #f8f9fa);
  border-radius: .5rem;
  padding: .85rem 1rem;
  margin-bottom: 1rem;
}
.ytp-note.info { border-left-color: #0dcaf0; }
.ytp-note.warning { border-left-color: #ffc107; }
.ytp-note h5 { margin: 0 0 .35rem; font-size: 1rem; }

/* Auth sayfaları */
body.ytp-auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(700px 280px at 20% 0%, rgba(13,110,253,.15), transparent),
    var(--bs-secondary-bg, #e9ecef);
  padding: 1.5rem;
}
.ytp-auth-box { width: min(420px, 100%); }
.ytp-auth-logo {
  text-align: center;
  font-size: 1.75rem;
  font-weight: 800;
  margin-bottom: 1rem;
}
.ytp-auth-logo a { color: inherit; text-decoration: none; }

.preview-thumb {
  width: 72px; height: 40px; object-fit: cover; border-radius: 6px;
  background: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color);
}
.badge.online {
  background: rgba(25,135,84,.15); color: #198754; border: 1px solid rgba(25,135,84,.35);
}
.badge.offline {
  background: rgba(108,117,125,.15); color: #6c757d; border: 1px solid rgba(108,117,125,.35);
}
.theme-chip-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.theme-chip-grid .btn.active { outline: 2px solid var(--bs-primary); }
.ytp-color-row {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem;
}
.ytp-color-row label {
  font-size: .8rem; color: var(--bs-secondary-color); display: block; margin-bottom: .25rem;
}
.ytp-color-row input[type="color"] {
  width: 100%; height: 40px; padding: 2px; border: 1px solid var(--bs-border-color);
  border-radius: .375rem; background: transparent;
}
.form-grid-2 {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem;
}
.ctrl-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.hint, .text-hint { font-size: .875rem; color: var(--bs-secondary-color); }

.ytp-hero-bar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
  padding: .85rem 1rem; border-radius: .85rem;
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
}

.ytp-subtabs {
  display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem;
  padding: .65rem; border-radius: .85rem; background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
}
.ytp-subtabs .tab {
  border: 1px solid var(--bs-border-color); background: var(--bs-secondary-bg);
  color: var(--bs-body-color); border-radius: 999px; padding: .4rem .9rem;
  font-size: .86rem; font-weight: 600; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center;
}
.ytp-subtabs .tab.active { background: #0d6efd; border-color: #0d6efd; color: #fff; }

@media (max-width: 992px) {
  .ytp-shell { grid-template-columns: 1fr; }
  .ytp-sidebar {
    grid-column: 1; grid-row: 1 / span 3;
    position: fixed; inset: 0 auto 0 0; width: var(--ytp-sidebar-w); z-index: 1040;
    transform: translateX(-105%); transition: transform .2s ease;
  }
  body.ytp-sidebar-open .ytp-sidebar { transform: none; }
  body.ytp-sidebar-open::before {
    content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1035;
  }
  .ytp-header, .ytp-main, .ytp-footer { grid-column: 1; }
  body.ytp-sidebar-collapsed .ytp-shell { grid-template-columns: 1fr; }
}