/* 3DPM App Shell CSS — sidebar + topbar + main */

/* === Layout grid === */
#app { display: grid; grid-template-areas: "side top" "side main"; grid-template-columns: 256px 1fr; grid-template-rows: 56px 1fr; min-height: 100vh; }

/* === Sidebar === */
#sidebar { grid-area: side; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sidebar-brand { padding: 18px 20px; border-bottom: 1px solid var(--border); }
.sidebar-brand a { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 800; font-size: 18px; letter-spacing: -0.3px; }
.sidebar-brand-dot { width: 10px; height: 10px; background: var(--primary); border-radius: 50%; }

.sidebar-nav { flex: 1; padding: 8px 12px 16px; overflow-y: auto; }
.nav-section { margin-top: 16px; }
.nav-section:first-child { margin-top: 8px; }
.nav-section-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-tertiary); padding: 8px 12px 6px; }

.sidebar-nav a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: var(--text-secondary); text-decoration: none; font-size: 13.5px; font-weight: 500; border-radius: var(--radius); transition: all var(--transition); margin-bottom: 1px; }
.sidebar-nav a svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.7; }
.sidebar-nav a:hover { background: var(--surface-hover); color: var(--text); opacity: 1; }
.sidebar-nav a:hover svg { opacity: 1; }
.sidebar-nav a.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.sidebar-nav a.active svg { opacity: 1; color: var(--primary); }
.sidebar-nav a .badge { margin-left: auto; }

/* === Sidebar user dropdown === */
.sidebar-user { padding: 12px; border-top: 1px solid var(--border); position: relative; }
.sidebar-user-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; background: transparent; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; transition: all var(--transition); }
.sidebar-user-btn:hover { background: var(--surface-hover); border-color: var(--border); }
.sidebar-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.sidebar-user-info { flex: 1; text-align: left; min-width: 0; }
.sidebar-user-name { font-size: 13px; font-weight: 600; color: var(--text); }
.sidebar-user-role { font-size: 11px; color: var(--text-tertiary); }
.sidebar-user-btn svg { color: var(--text-tertiary); flex-shrink: 0; }

.sidebar-user-menu { position: absolute; bottom: calc(100% - 4px); left: 12px; right: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 4px; display: flex; flex-direction: column; }
.sidebar-user-menu a, .sidebar-user-menu button { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 13px; color: var(--text); text-decoration: none; background: transparent; border: none; cursor: pointer; font-family: inherit; border-radius: var(--radius-sm); text-align: left; width: 100%; transition: background var(--transition); }
.sidebar-user-menu a:hover, .sidebar-user-menu button:hover { background: var(--surface-hover); }
.sidebar-user-menu svg { color: var(--text-tertiary); }
.sidebar-user-menu button { color: var(--danger); }
.sidebar-user-menu button:hover { background: var(--danger-soft); }
.sidebar-user-menu button svg { color: var(--danger); }

/* === Top bar === */
#topbar { grid-area: top; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 16px; padding: 0 24px; position: sticky; top: 0; z-index: 50; }
#hamburger { display: none; background: transparent; border: none; cursor: pointer; padding: 8px; color: var(--text); border-radius: var(--radius-sm); }
#hamburger:hover { background: var(--surface-hover); }
.topbar-title { flex: 1; min-width: 0; }
.topbar-title h1 { font-size: 17px; font-weight: 600; letter-spacing: -0.2px; line-height: 1.2; }
.topbar-subtitle { font-size: 12px; color: var(--text-tertiary); }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.btn-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--text-secondary); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition); position: relative; }
.btn-icon:hover { background: var(--surface-hover); color: var(--text); }
.notif-dot { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; background: var(--danger); border-radius: 50%; border: 2px solid var(--surface); display: none; }
.notif-dot.show { display: block; }
.ws-indicator { width: 8px; height: 8px; border-radius: 50%; background: var(--text-tertiary); margin-left: 4px; transition: background var(--transition); }
.ws-indicator.online { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.ws-indicator.offline { background: var(--danger); }

/* === Main === */
#main { grid-area: main; padding: 24px 28px; max-width: 1440px; width: 100%; }

/* === Bottom nav (mobile) === */
#bottom-nav { display: none; }

/* === Mobile === */
@media (max-width: 900px) {
  #app { grid-template-areas: "top top" "main main"; grid-template-columns: 1fr; }
  #sidebar { position: fixed; left: -260px; top: 0; bottom: 0; width: 260px; z-index: 200; transition: left var(--transition); box-shadow: var(--shadow-lg); }
  #sidebar.open { left: 0; }
  #hamburger { display: flex; }
  #main { padding: 16px; padding-bottom: 80px; }
  #bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface); border-top: 1px solid var(--border); padding: 6px 0; z-index: 60; justify-content: space-around; }
  #bottom-nav a { display: flex; align-items: center; justify-content: center; padding: 10px 16px; color: var(--text-secondary); }
  #bottom-nav a.active { color: var(--primary); }
}

/* === Page elements === */
.page-header { margin-bottom: 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-header h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; }
.page-header-subtitle { font-size: 14px; color: var(--text-secondary); margin-top: 4px; }
.page-actions { display: flex; gap: 8px; }

/* KPI grid */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 24px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; transition: all var(--transition); }
.kpi:hover { box-shadow: var(--shadow-sm); }
.kpi-label { font-size: 11px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.kpi-label svg { width: 14px; height: 14px; }
.kpi-value { font-size: 26px; font-weight: 700; letter-spacing: -0.5px; color: var(--text); font-variant-numeric: tabular-nums; }
.kpi-trend { font-size: 12px; font-weight: 500; margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.kpi-trend.up { color: var(--success); }
.kpi-trend.down { color: var(--danger); }

/* Section title */
.section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-tertiary); margin: 24px 0 12px; }

/* Cards & tables */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.panel-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.panel-title { font-size: 15px; font-weight: 600; }
.panel-body { padding: 20px; }

.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { padding: 10px 16px; text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); background: var(--bg); border-bottom: 1px solid var(--border); }
.table td { padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text); }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--surface-hover); }
.table-link { color: var(--primary); text-decoration: none; font-weight: 500; }
.table-link:hover { text-decoration: underline; }

/* Activity feed */
.activity-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.activity-item:last-child { border-bottom: none; }
.activity-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-active); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.activity-content { flex: 1; min-width: 0; }
.activity-title { font-size: 13.5px; color: var(--text); margin-bottom: 2px; }
.activity-time { font-size: 12px; color: var(--text-tertiary); }

/* === Iframe Wrapper (Yusuf + AI sayfaları) === */
.iframe-wrapper { position: fixed; top: 56px; left: 256px; right: 0; bottom: 0; background: var(--bg); }
.iframe-wrapper iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--bg); }
.iframe-loader { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg); z-index: 1; }
.iframe-spinner { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .iframe-wrapper { left: 0; bottom: 56px; top: 56px; } }

/* === LEGACY → MODERN CSS BRIDGE === */
/* Eski sayfaları (render_orders, stock, customers, cargo, reports, system) yeni design-system'e bağlar. */
/* 21.05.2026 — Faz 3 sonu */

/* Hero cards (eski KPI) — yeni .kpi gibi */
.hero-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 24px; }
.hero-card { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; padding: 18px 20px !important; transition: all var(--transition); }
.hero-card:hover { box-shadow: var(--shadow-sm); }
.hero-card .hero-icon { font-size: 11px !important; font-weight: 700 !important; color: var(--text-tertiary) !important; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px !important; background: none !important; padding: 0 !important; width: auto !important; height: auto !important; border-radius: 0 !important; display: block !important; }
.hero-card .hero-value { font-size: 26px !important; font-weight: 700 !important; letter-spacing: -0.5px; color: var(--text) !important; font-variant-numeric: tabular-nums; margin: 0 !important; }
.hero-card .hero-label { font-size: 13px !important; font-weight: 500 !important; color: var(--text-secondary) !important; margin-top: 4px !important; }
.hero-card .hero-sub { font-size: 12px !important; color: var(--text-tertiary) !important; margin-top: 6px !important; }
.hero-card.warn .hero-value { color: var(--warning) !important; }
.hero-card.danger .hero-value { color: var(--danger) !important; }
.hero-card.info .hero-value { color: var(--info) !important; }
.hero-card.success .hero-value { color: var(--success) !important; }

/* Quick action butonları — yeni .btn-secondary gibi */
.quick-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.qa-btn { padding: 8px 16px !important; background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; color: var(--text) !important; text-decoration: none !important; font-size: 13.5px !important; font-weight: 500 !important; transition: all var(--transition); display: inline-flex; align-items: center; gap: 6px; }
.qa-btn:hover { background: var(--surface-hover) !important; border-color: var(--border-strong) !important; color: var(--text) !important; }

/* Activity section — yeni .panel gibi */
.activity-section { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; margin-bottom: 24px !important; padding: 0 !important; }
.activity-section .section-head { padding: 16px 20px !important; border-bottom: 1px solid var(--border) !important; display: flex !important; align-items: center; justify-content: space-between; gap: 16px; }
.activity-section .section-head h2 { font-size: 15px !important; font-weight: 600 !important; margin: 0 !important; }
.activity-section .section-sub { font-size: 12px !important; color: var(--text-tertiary) !important; }
.activity-list { padding: 8px 20px !important; }
.activity-list .activity-item { display: flex !important; gap: 12px !important; padding: 12px 0 !important; border-bottom: 1px solid var(--border) !important; align-items: flex-start; }
.activity-list .activity-item:last-child { border-bottom: none !important; }
.activity-list .act-icon { width: 28px !important; height: 28px !important; border-radius: 50% !important; background: var(--surface-active) !important; display: flex !important; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px !important; }
.activity-list .act-body { flex: 1; min-width: 0; }
.activity-list .act-text { font-size: 13.5px !important; color: var(--text) !important; line-height: 1.5 !important; margin-bottom: 2px !important; }
.activity-list .act-extra { font-size: 12px !important; color: var(--text-tertiary) !important; }
.activity-list .act-time { font-size: 12px !important; color: var(--text-tertiary) !important; }
.activity-list .activity-empty { padding: 32px !important; text-align: center; color: var(--text-tertiary) !important; font-size: 13px !important; }
.activity-list .act-danger .act-icon { background: var(--danger-soft) !important; color: var(--danger) !important; }
.activity-list .act-warn .act-icon { background: var(--warning-soft) !important; color: var(--warning) !important; }
.activity-list .act-info .act-icon { background: var(--info-soft) !important; color: var(--info) !important; }

/* Info strip — sayfa altı bilgi şeritleri */
.info-strip { display: flex; gap: 24px; flex-wrap: wrap; padding: 14px 20px !important; background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; font-size: 13px !important; color: var(--text-secondary) !important; margin-bottom: 24px; }
.info-strip b { color: var(--text); font-weight: 600; }

/* Dash greet — selamlama */
.dash-greet { font-size: 18px !important; font-weight: 600 !important; color: var(--text) !important; margin-bottom: 24px !important; letter-spacing: -0.2px; }
.dash-greet b { color: var(--primary); font-weight: 700; }
.dash-date { font-size: 13px !important; font-weight: 400 !important; color: var(--text-tertiary) !important; margin-left: 8px; }

/* Eski "card"/"panel-card" → yeni panel */
.card.panel-card, .panel-card { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; padding: 20px !important; box-shadow: var(--shadow-xs); margin-bottom: 16px; }
.panel-card h2, .panel-card h3 { font-size: 15px; font-weight: 600; margin-bottom: 12px; }

/* Tablolar — eski tablo class'larını yeni .table'a eşle */
table { font-family: inherit; }
table.tbl, table.list-tbl, table.cargo-tbl, table.orders-tbl, table.stock-tbl, table.customers-tbl { width: 100% !important; border-collapse: collapse !important; background: var(--surface) !important; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); }
table.tbl th, table.list-tbl th, .cargo-tbl th, .orders-tbl th, .stock-tbl th, .customers-tbl th { padding: 10px 16px !important; text-align: left; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary) !important; background: var(--bg) !important; border-bottom: 1px solid var(--border) !important; }
table.tbl td, table.list-tbl td, .cargo-tbl td, .orders-tbl td, .stock-tbl td, .customers-tbl td { padding: 12px 16px !important; border-bottom: 1px solid var(--border) !important; color: var(--text) !important; font-size: 13.5px !important; }
table.tbl tr:hover td, table.list-tbl tr:hover td { background: var(--surface-hover) !important; }
table.tbl tr:last-child td, table.list-tbl tr:last-child td { border-bottom: none !important; }

/* Status badges (eski) */
.status-pill, .badge-pill, .status, .pill { display: inline-flex; align-items: center; padding: 2px 8px !important; border-radius: var(--radius-full) !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: 0.4px; }
.status.completed, .status.success, .status-pill.success { background: var(--success-soft) !important; color: #15803d !important; }
.status.pending, .status.warn, .status-pill.warn { background: var(--warning-soft) !important; color: #c2410c !important; }
.status.failed, .status.danger, .status.error, .status-pill.danger { background: var(--danger-soft) !important; color: #b91c1c !important; }
.status.info, .status-pill.info { background: var(--info-soft) !important; color: #1e40af !important; }

/* Form input/select genel */
input[type=text], input[type=number], input[type=date], input[type=search], input[type=email], input[type=password], select, textarea {
  font-family: inherit !important;
  font-size: 14px !important;
}
button { font-family: inherit !important; }

/* Toast */
#toast-container .toast { font-family: inherit !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-md); }

/* Sayfa h1/h2 baş — yeni page-header gibi */
main#main > h1:first-child, main#main > .page-title { font-size: 22px !important; font-weight: 700 !important; letter-spacing: -0.4px; margin-bottom: 6px !important; }
main#main > h2:first-child { font-size: 18px !important; font-weight: 600 !important; }

/* Filter bar */
.filter-bar, .filters, .toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); align-items: center; }
.filter-bar input, .filter-bar select, .filters input, .filters select { padding: 6px 10px !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; font-size: 13px !important; }

/* === MOBILE POLISH (21.05.2026) === */

/* === Auth pages mobile === */
@media (max-width: 900px) {
  .auth-form { padding: 24px 16px !important; }
  .auth-form-inner { max-width: 100% !important; }
  .auth-form-title { font-size: 22px !important; }
  /* Brand panel mobile küçült */
  .auth-brand { padding: 16px 20px !important; min-height: 80px; }
  .auth-brand-logo { font-size: 20px !important; }
  .auth-brand-body, .auth-brand-features, .auth-brand-footer { display: none !important; }
  /* Login row (remember + forgot) dikey */
  .auth-form .flex.items-center.justify-between { flex-direction: column !important; align-items: flex-start !important; gap: 12px; }
}

/* === Smaller mobile (iPhone SE etc) === */
@media (max-width: 480px) {
  .auth-form { padding: 20px 14px !important; }
  .auth-form-header { margin-bottom: 20px !important; }
  .auth-form-title { font-size: 20px !important; }
  .auth-form-subtitle { font-size: 13px !important; }
  .input { height: 44px !important; }
  .btn-lg { height: 48px !important; }
}

/* === App shell mobile === */
@media (max-width: 900px) {
  /* Sidebar overlay arka plan */
  body.sidebar-open::before { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 199; pointer-events: none; }

  /* Topbar mobile */
  #topbar { padding: 0 12px !important; }
  .topbar-title h1 { font-size: 16px !important; }
  .topbar-subtitle { display: none !important; }
  .topbar-right .btn-icon { width: 32px; height: 32px; }

  /* Page header mobile - actions wrap */
  .page-header { flex-direction: column !important; align-items: flex-start !important; gap: 12px; margin-bottom: 16px !important; }
  .page-header h1 { font-size: 20px !important; }
  .page-actions { width: 100%; flex-wrap: wrap; }
  .page-actions .btn { flex: 1; min-width: 0; }

  /* KPI grid mobile — 2 sütun (auto-fit zaten 200px minmax ama force) */
  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .kpi { padding: 14px 16px !important; }
  .kpi-value { font-size: 22px !important; }
  .kpi-label { font-size: 10px !important; }
  .kpi-trend { font-size: 11px !important; }

  /* Hero cards (legacy) — 2 sütun */
  .hero-cards { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .hero-card { padding: 14px 16px !important; }
  .hero-card .hero-value { font-size: 22px !important; }

  /* Quick actions */
  .quick-actions { gap: 6px; }
  .qa-btn { padding: 8px 12px !important; font-size: 12px !important; flex: 1; min-width: 0; text-align: center; }

  /* Panel mobile */
  .panel-header { padding: 12px 14px !important; flex-wrap: wrap; gap: 8px; }
  .panel-title { font-size: 14px !important; }
  .panel-body { padding: 14px !important; }

  /* Tablolar yatay scroll */
  .panel:has(table) .panel-body { padding: 0 !important; overflow-x: auto; }
  table.table, .panel table { min-width: 600px; }
  /* Eski tablo classları da */
  table.tbl, table.list-tbl, table.cargo-tbl, table.orders-tbl, table.stock-tbl, table.customers-tbl { min-width: 600px; display: block; overflow-x: auto; }

  /* Tabs bar - yatay scroll */
  .tabs-bar { overflow-x: auto; flex-wrap: nowrap !important; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
  .tabs-bar .tab-btn { white-space: nowrap; padding: 10px 12px !important; font-size: 13px !important; }

  /* Card mobile */
  .card { padding: 16px !important; }

  /* Form */
  .field input.input, .field input[type=text], .field input[type=password] { font-size: 16px !important; /* iOS zoom prevention */ height: 44px !important; }
  .field label { font-size: 13px !important; }

  /* Sidebar user menu pozisyonu mobile */
  .sidebar-user { padding: 10px; }
  .sidebar-user-btn { padding: 6px 8px; }
  .sidebar-avatar { width: 28px; height: 28px; font-size: 12px; }

  /* Bottom nav iyileştir */
  #bottom-nav { box-shadow: 0 -1px 4px rgba(0,0,0,0.04); padding: 4px 0 !important; }
  #bottom-nav a { padding: 10px !important; }
  #bottom-nav a.active { color: var(--primary) !important; background: var(--primary-soft); border-radius: 8px; }

  /* Iframe wrapper bottom nav için yer aç */
  .iframe-wrapper { bottom: 56px !important; }

  /* Section title spacing */
  .section-title { margin: 16px 0 10px; font-size: 10px !important; }
}

/* === Very small mobile (Galaxy Fold etc) === */
@media (max-width: 380px) {
  .kpi-grid { grid-template-columns: 1fr !important; }
  .hero-cards { grid-template-columns: 1fr !important; }
}

/* === Tablet === */
@media (min-width: 901px) and (max-width: 1200px) {
  #app { grid-template-columns: 220px 1fr; }
  #main { padding: 20px 24px; }
}

/* === Terminal mobil stabilite — 23.05.2026 === */
/* Body scroll/rubber-band kilidi, xterm.js touch'unu serbest bırak */
body[data-page="terminal"] {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}
body[data-page="terminal"] #main {
  overflow: hidden;
  padding: 0 !important;
}
body[data-page="terminal"] .iframe-wrapper iframe {
  touch-action: manipulation;
  -webkit-user-select: text;
}
/* Mobilde bottom-nav'ı gizle, terminal full ekran */
@media (max-width: 900px) {
  body[data-page="terminal"] #bottom-nav { display: none; }
  body[data-page="terminal"] .iframe-wrapper { bottom: 0; top: 56px; }
}
/* Topbar revizyonu — 24.05.2026 */

/* Reload butonu sol tarafta — hamburger gibi sade */
.topbar-left-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: transparent; border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px; cursor: pointer;
  color: var(--text-secondary, #6b7280);
  transition: all 0.15s;
  margin-left: 4px;
}
.topbar-left-btn:hover {
  background: var(--surface-hover, #f3f4f6);
  border-color: var(--primary, #681620);
  color: var(--primary, #681620);
}
.topbar-left-btn:active {
  transform: scale(0.94);
}

/* WebSocket pill — sade ve şık */
.ws-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 16px;
  font-size: 11.5px; font-weight: 600;
  background: #dcfce7; color: #166534;
  border: 1px solid #86efac;
  user-select: none;
  transition: all 0.2s;
}
.ws-pill.offline {
  background: #fee2e2; color: #991b1b; border-color: #fca5a5;
}
.ws-pill .ws-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5);
  animation: wsPulse 2s infinite;
}
.ws-pill.offline .ws-dot {
  background: #c62828;
  animation: none;
}
.ws-pill .ws-label {
  white-space: nowrap;
}
@keyframes wsPulse {
  0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5); }
  70% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

/* Mobile */
@media (max-width: 600px) {
  .ws-pill .ws-label { display: none; }
  .ws-pill { padding: 5px 7px; }
}