/* Sağ panel (masaüstü) — mobilde tam ekran sayfaya dönüşür */
.drawer-backdrop { position: fixed; inset: 0; z-index: var(--z-drawer); background: var(--overlay); animation: fade-in var(--dur) var(--ease); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-drawer); width: var(--drawer-w); max-width: 100%; display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-lg); animation: slide-in var(--dur-slow) var(--ease); }
.drawer__header { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-4) var(--sp-3); border-bottom: 1px solid var(--border); }
.drawer__icon { display: grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: var(--r-md); background: var(--primary-soft); color: var(--primary); flex: none; }
.drawer__icon.is-off { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); }
.drawer__icon.is-offline { background: var(--surface-2); border: 1px dashed var(--border-strong); color: var(--offline); }
.drawer__title { flex: 1; min-width: 0; line-height: 1.3; }
.drawer__name { font-size: var(--text-h3); font-weight: var(--w-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer__sub { display: flex; align-items: center; gap: var(--sp-1-5); font-size: var(--text-sm); color: var(--text-3); }
.drawer__sub .status-dot { width: var(--size-7); height: var(--size-7); border-radius: 50%; background: var(--success); }
.drawer__sub .status-dot.is-offline { background: var(--offline); }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--sp-5) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-6); }
.drawer__body > * { flex: none; }
.drawer__hero { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); padding: var(--sp-4) 0; }
.drawer__hero-value { font-size: var(--text-hero); font-weight: var(--w-semibold); letter-spacing: -1px; line-height: 1; font-variant-numeric: tabular-nums; }
.drawer__hero-label { font-size: var(--text-sm); color: var(--text-3); }
.drawer__section { display: flex; flex-direction: column; gap: var(--sp-2); }
.drawer__footer { display: flex; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); background: var(--surface); }
.drawer__footer .btn { flex: 1; }
.drawer__back { display: none; }
@keyframes slide-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 767px) {
  .drawer { width: 100%; border-left: 0; box-shadow: none; animation: slide-in-full var(--dur-slow) var(--ease); }
  .drawer-backdrop { display: none; }
  .drawer__back { display: inline-grid; }
  .drawer__close { display: none; }
  .drawer__footer { padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom)); }
  @keyframes slide-in-full { from { transform: translateX(100%); } to { transform: none; } }
}

/* Çevrimdışı notu */
.offline-note { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); background: var(--surface-2); border: 1px dashed var(--border-strong); color: var(--text-2); font-size: var(--text-sm); }
.offline-note .icon { color: var(--offline); }
.offline-note__text { flex: 1; display: flex; flex-direction: column; gap: var(--sp-0-5); }
.offline-note__title { font-weight: var(--w-medium); color: var(--text); }
.drawer.is-offline .drawer__hero-value { color: var(--text-3); }
.drawer.is-offline .drawer__controls { opacity: .45; pointer-events: none; }
.drawer__controls { display: flex; flex-direction: column; gap: var(--sp-6); }

/* Yalnız panel modu (sunum çerçevesi) */
.app.is-panel-only > .sidebar, .app.is-panel-only > .main, .app.is-panel-only > .topbar, .app.is-panel-only > .tabbar, .app.is-panel-only .drawer-backdrop { display: none; }
.app.is-panel-only .drawer { position: static; width: 100%; height: 100vh; border-left: 0; box-shadow: none; animation: none; }