/* ============================================================
   KANTAR Web Admin v2 — Refined enterprise design system
   Stone neutrals · single-accent · hairline borders · Geist
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* Neutral scale — stone */
  --c-0:#ffffff; --c-1:#fafaf9; --c-2:#f5f5f4; --c-3:#e7e5e4;
  --c-4:#d6d3d1; --c-5:#a8a29e; --c-6:#78716c; --c-7:#57534e;
  --c-8:#292524; --c-9:#1c1917; --c-10:#0c0a09;

  /* Surfaces */
  --bg-app:#fafaf9;
  --bg-surface:#ffffff;
  --bg-inset:#f5f5f4;
  --bg-elev:#ffffff;

  /* Borders */
  --border:#e7e5e4;
  --border-strong:#d6d3d1;
  --border-subtle:#f0eeec;

  /* Text */
  --text:#0c0a09;
  --text-2:#292524;
  --text-3:#57534e;
  --text-muted:#a8a29e;

  /* Semantic state — low saturation */
  --ok:#16653a; --ok-bg:#f0fdf4; --ok-bd:#bbf7d0;
  --warn:#92400e; --warn-bg:#fffbeb; --warn-bd:#fde68a;
  --err:#991b1b; --err-bg:#fef2f2; --err-bd:#fecaca;
  --info:#1e3a8a; --info-bg:#eff6ff; --info-bd:#bfdbfe;

  /* Type */
  --font:'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Shadows — extremely subtle */
  --shadow-1:0 1px 2px rgba(12,10,9,0.04), 0 0 0 1px rgba(12,10,9,0.04);
  --shadow-2:0 2px 4px rgba(12,10,9,0.06), 0 0 0 1px rgba(12,10,9,0.05);
  --shadow-pop:0 12px 32px -8px rgba(12,10,9,0.18), 0 0 0 1px rgba(12,10,9,0.06);

  /* Radius */
  --r-sm:4px; --r:6px; --r-lg:10px;

  /* Layout */
  --tb-h:56px;
  --sb-w:240px;
  --ft-h:32px;
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; height:100%; }
body {
  font-family:var(--font);
  font-size:14px;
  line-height:1.5;
  color:var(--text);
  background:var(--bg-app);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:'cv11','ss01';
}

/* Utility */
.row { display:flex; align-items:center; }
.col { display:flex; flex-direction:column; }
.gap-4 { gap:4px; } .gap-6 { gap:6px; } .gap-8 { gap:8px; }
.gap-12 { gap:12px; } .gap-16 { gap:16px; }
.between { justify-content:space-between; flex:1; }
.wrap { flex-wrap:wrap; }
.stack-16 > * + * { margin-top:16px; }
.muted { color:var(--text-muted); }
.mono { font-family:var(--mono); }
.tnum { font-variant-numeric:tabular-nums; }

/* App shell */
.app2 {
  display:grid;
  grid-template-columns:var(--sb-w) 1fr;
  grid-template-rows:var(--tb-h) 1fr var(--ft-h);
  grid-template-areas:
    'tb tb'
    'sb ct'
    'ft ft';
  height:100%;
  width:100%;
  background:var(--bg-app);
}

/* Topbar */
.tb {
  grid-area:tb;
  display:flex;
  align-items:center;
  gap:14px;
  height:var(--tb-h);
  padding:0 20px;
  background:var(--bg-surface);
  border-bottom:1px solid var(--border);
  position:relative;
  z-index:10;
}
.tb-brand {
  display:flex; align-items:center; gap:8px;
  width:calc(var(--sb-w) - 20px);
  margin-left:-4px;
}
.tb-brand .logo {
  width:28px; height:28px; border-radius:6px;
  background:var(--c-9); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:14px;
  letter-spacing:-0.02em;
}
.tb-brand span {
  font-size:14px; font-weight:600; letter-spacing:-0.02em;
  color:var(--text);
}
.tb-sep { width:1px; height:24px; background:var(--border); }
.tb-tenant {
  display:flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:var(--r);
  font-size:13px; color:var(--text-2); font-weight:500;
  cursor:pointer;
  transition:background 0.12s;
}
.tb-tenant:hover { background:var(--bg-inset); }
.tb-tenant .chev { color:var(--text-muted); font-size:10px; }
.tb-search {
  flex:1; max-width:520px;
  position:relative;
}
.tb-search input {
  width:100%;
  height:32px;
  padding:0 64px 0 32px;
  background:var(--bg-inset);
  border:1px solid var(--border);
  border-radius:var(--r);
  font-family:var(--font);
  font-size:13px;
  color:var(--text);
}
.tb-search input::placeholder { color:var(--text-muted); }
.tb-search input:focus {
  outline:none; background:var(--bg-surface);
  border-color:var(--c-7);
  box-shadow:0 0 0 3px rgba(28,25,23,0.08);
}
.tb-search .si {
  position:absolute; left:9px; top:9px;
  color:var(--text-muted);
}
.tb-search .kbd {
  position:absolute; right:8px; top:7px;
  font-size:10px; font-family:var(--mono);
  color:var(--text-muted);
  padding:2px 5px;
  border:1px solid var(--border);
  border-radius:3px;
  background:var(--bg-surface);
}
.tb-spacer { flex:1; }
.tb-icon-btn {
  width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent;
  border-radius:var(--r);
  color:var(--text-3);
  cursor:pointer;
  transition:all 0.12s;
}
.tb-icon-btn:hover { background:var(--bg-inset); color:var(--text); }
.tb-icon-btn .nb {
  position:absolute; top:6px; right:6px;
  width:7px; height:7px; border-radius:4px;
  background:var(--err);
  border:1.5px solid var(--bg-surface);
}
.tb-user {
  display:flex; align-items:center; gap:8px;
  padding:4px 8px 4px 4px;
  border-radius:var(--r);
  cursor:pointer;
  transition:background 0.12s;
}
.tb-user:hover { background:var(--bg-inset); }
.tb-user .av {
  width:28px; height:28px; border-radius:14px;
  background:linear-gradient(135deg,#57534e,#1c1917);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:600;
  letter-spacing:-0.01em;
}
.tb-user .nm { font-size:13px; font-weight:500; line-height:1.1; color:var(--text); }
.tb-user .rl { font-size:10px; color:var(--text-muted); line-height:1.2; }

/* Sidebar */
.sb {
  grid-area:sb;
  background:var(--bg-surface);
  border-right:1px solid var(--border);
  padding:16px 12px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.sb-section {
  font-size:10px; font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-muted);
  padding:14px 12px 6px;
}
.sb-section:first-child { padding-top:0; }
.sb-item {
  display:flex; align-items:center; gap:10px;
  padding:7px 10px;
  border-radius:var(--r-sm);
  font-size:13px; font-weight:500;
  color:var(--text-2);
  text-decoration:none;
  height:32px;
  transition:all 0.12s;
}
.sb-item:hover { background:var(--bg-inset); color:var(--text); }
.sb-item.active {
  background:var(--c-9);
  color:#fff;
}
.sb-item .si {
  display:inline-flex;
  color:var(--text-muted);
}
.sb-item:hover .si { color:var(--text-2); }
.sb-item.active .si { color:rgba(255,255,255,0.85); }
.sb-item .ct {
  margin-left:auto;
  font-size:11px;
  font-family:var(--mono);
  color:var(--text-muted);
  background:var(--bg-inset);
  padding:1px 6px;
  border-radius:8px;
  font-weight:500;
}
.sb-item.active .ct {
  background:rgba(255,255,255,0.12);
  color:rgba(255,255,255,0.9);
}

/* Content area */
.ct2 {
  grid-area:ct;
  overflow-y:auto;
  padding:24px 32px;
}
.ct2-narrow { padding:24px; }

/* Footer */
.ft {
  grid-area:ft;
  display:flex; align-items:center; justify-content:space-between;
  height:var(--ft-h);
  padding:0 20px;
  background:var(--bg-surface);
  border-top:1px solid var(--border);
  font-size:11px; font-family:var(--mono);
  color:var(--text-muted);
}

/* Page header */
.bc {
  display:flex; align-items:center; gap:6px;
  font-size:12px;
  margin-bottom:6px;
  color:var(--text-muted);
}
.bc a { color:var(--text-3); text-decoration:none; }
.bc a:hover { color:var(--text); }
.bc .sep { color:var(--text-muted); opacity:0.5; }
.bc .cur { color:var(--text); font-weight:500; }

.ph {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:24px;
  margin-bottom:0;
}
.ttl {
  font-size:24px;
  font-weight:600;
  letter-spacing:-0.025em;
  color:var(--text);
  margin:0;
  line-height:1.2;
}
.sub {
  color:var(--text-3);
  font-size:13px;
  margin-top:4px;
}

/* Card */
.card {
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  margin-bottom:16px;
  overflow:hidden;
}
.card-pad { padding:20px; }
.card-head {
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--border);
  gap:16px;
}
.card-body { padding:20px; }
.h2 {
  font-size:15px;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--text);
  margin:0;
}

/* Grid helpers */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:16px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:16px; }

/* Stat card */
.stat { padding:18px 20px; }
.stat .lbl {
  font-size:11px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:8px;
}
.stat .v {
  font-size:28px;
  font-weight:600;
  letter-spacing:-0.025em;
  color:var(--text);
  font-variant-numeric:tabular-nums;
  line-height:1.1;
}
.stat .v small {
  font-size:14px;
  color:var(--text-muted);
  font-weight:500;
  margin-left:3px;
}
.stat .d {
  display:flex; align-items:center; gap:6px;
  margin-top:8px;
  font-size:12px;
  color:var(--text-3);
}
.delta { font-weight:500; font-family:var(--mono); }
.delta.up { color:var(--ok); }
.delta.dn { color:var(--err); }
.stat .spark { margin-top:12px; height:32px; }

/* Eyebrow label */
.lbl {
  font-size:11px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-muted);
}

/* Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:6px;
  height:32px;
  padding:0 12px;
  border:1px solid transparent;
  border-radius:var(--r);
  font-family:var(--font);
  font-size:13px;
  font-weight:500;
  letter-spacing:-0.005em;
  color:var(--text);
  background:transparent;
  cursor:pointer;
  transition:all 0.12s;
  white-space:nowrap;
}
.btn:disabled { opacity:0.5; cursor:not-allowed; }
.btn-primary {
  background:var(--c-9);
  color:#fff;
  border-color:var(--c-9);
}
.btn-primary:hover:not(:disabled) { background:var(--c-10); border-color:var(--c-10); }
.btn-secondary {
  background:var(--bg-surface);
  color:var(--text);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-1);
}
.btn-secondary:hover:not(:disabled) {
  background:var(--bg-inset);
  border-color:var(--c-5);
}
.btn-ghost {
  background:transparent;
  color:var(--text-2);
}
.btn-ghost:hover:not(:disabled) { background:var(--bg-inset); color:var(--text); }
.btn-danger {
  background:#fff;
  color:var(--err);
  border-color:var(--err-bd);
}
.btn-danger:hover:not(:disabled) {
  background:var(--err-bg);
  border-color:var(--err);
}
.btn-sm { height:28px; padding:0 10px; font-size:12px; }
.btn-lg { height:40px; padding:0 16px; font-size:14px; }
.btn-icon { width:32px; padding:0; }
.btn-sm.btn-icon { width:28px; }

/* Segmented control */
.seg {
  display:inline-flex;
  background:var(--bg-inset);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:2px;
  height:32px;
}
.seg button {
  height:100%;
  padding:0 12px;
  background:transparent;
  border:none;
  border-radius:var(--r-sm);
  font-family:var(--font);
  font-size:12px;
  font-weight:500;
  color:var(--text-3);
  cursor:pointer;
  display:inline-flex; align-items:center; gap:5px;
  transition:all 0.12s;
}
.seg button:hover { color:var(--text); }
.seg button.active {
  background:var(--bg-surface);
  color:var(--text);
  box-shadow:var(--shadow-1);
}

/* Tabs (page-level) */
.tabs {
  display:flex; align-items:center; gap:2px;
  border-bottom:1px solid var(--border);
  margin-bottom:16px;
  margin-top:24px;
}
.tabs button {
  padding:10px 14px;
  background:transparent;
  border:none;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  font-family:var(--font);
  font-size:13px;
  font-weight:500;
  color:var(--text-3);
  cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  transition:all 0.12s;
}
.tabs button:hover { color:var(--text); }
.tabs button.active {
  color:var(--text);
  border-bottom-color:var(--c-9);
  font-weight:600;
}
.tabs button .ct {
  font-size:11px;
  font-family:var(--mono);
  background:var(--bg-inset);
  color:var(--text-3);
  padding:1px 6px;
  border-radius:8px;
  font-weight:500;
}
.tabs button.active .ct {
  background:var(--c-9);
  color:#fff;
}

/* Inputs */
.fld { display:flex; flex-direction:column; gap:5px; }
.fld.wide { flex:1; min-width:240px; }
.fld label {
  font-size:11px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.inp {
  height:32px;
  padding:0 10px;
  background:var(--bg-surface);
  border:1px solid var(--border-strong);
  border-radius:var(--r);
  font-family:var(--font);
  font-size:13px;
  color:var(--text);
  transition:all 0.12s;
}
.inp::placeholder { color:var(--text-muted); }
.inp:focus {
  outline:none;
  border-color:var(--c-7);
  box-shadow:0 0 0 3px rgba(28,25,23,0.08);
}
.inp:disabled {
  background:var(--bg-inset);
  color:var(--text-3);
  cursor:not-allowed;
}
select.inp {
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a8a29e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 8px center;
  padding-right:28px;
}

/* Filters bar inside cards */
.filters {
  display:flex; flex-wrap:wrap; align-items:flex-end;
  gap:12px;
  padding:14px 16px;
  background:var(--bg-inset);
  border-bottom:1px solid var(--border);
}
.filters .fld { min-width:140px; }

/* Tables */
.tbl {
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.tbl thead th {
  background:transparent;
  padding:10px 12px;
  text-align:left;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--text-muted);
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.tbl thead th.num { text-align:right; }
.tbl tbody td {
  padding:11px 12px;
  border-bottom:1px solid var(--border-subtle);
  color:var(--text);
  vertical-align:middle;
}
.tbl tbody tr:hover { background:var(--bg-inset); }
.tbl tbody tr:last-child td { border-bottom:none; }
.tbl .num { text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums; }
.tbl .tm { font-family:var(--mono); font-size:12px; color:var(--text-3); }
.tbl .muted { color:var(--text-muted); }

.cell-link {
  font-family:var(--mono);
  color:var(--text);
  font-weight:500;
  text-decoration:none;
}
.cell-link:hover { color:var(--c-9); text-decoration:underline; }

.plate {
  display:inline-block;
  font-family:var(--mono);
  font-weight:600;
  font-size:12px;
  letter-spacing:0.02em;
  padding:2px 8px;
  background:var(--bg-inset);
  border:1px solid var(--border);
  border-radius:3px;
  color:var(--text);
}

/* Pager */
.pager {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  border-top:1px solid var(--border);
  font-size:12px;
  color:var(--text-3);
  background:var(--bg-surface);
}
.pp { display:flex; gap:4px; }

/* Badges */
.bg {
  display:inline-flex; align-items:center; gap:5px;
  padding:2px 8px;
  border-radius:10px;
  font-size:11px;
  font-weight:500;
  letter-spacing:0.01em;
  background:var(--bg-inset);
  color:var(--text-3);
  border:1px solid var(--border);
  white-space:nowrap;
}
.bg .dot { width:6px; height:6px; border-radius:3px; background:currentColor; }
.bg.ok    { background:var(--ok-bg);   color:var(--ok);   border-color:var(--ok-bd); }
.bg.warn  { background:var(--warn-bg); color:var(--warn); border-color:var(--warn-bd); }
.bg.err   { background:var(--err-bg);  color:var(--err);  border-color:var(--err-bd); }
.bg.info  { background:var(--info-bg); color:var(--info); border-color:var(--info-bd); }
.bg.solid { background:var(--c-9); color:#fff; border-color:var(--c-9); }

/* Status dots */
.dot-i { width:8px; height:8px; border-radius:4px; flex-shrink:0; }
.dot-i.ok   { background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,0.18); }
.dot-i.warn { background:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,0.18); }
.dot-i.err  { background:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,0.18); }
.dot-i.idle { background:var(--c-4); }

/* Banners */
.banner {
  display:flex; align-items:flex-start; gap:12px;
  padding:12px 16px;
  border:1px solid var(--border);
  border-radius:var(--r);
  margin-bottom:16px;
  font-size:13px;
  color:var(--text);
}
.banner .ic {
  width:24px; height:24px; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.banner.ok   { background:var(--ok-bg);   border-color:var(--ok-bd);   color:var(--ok); }
.banner.ok   .ic { background:#fff; color:var(--ok); }
.banner.warn { background:var(--warn-bg); border-color:var(--warn-bd); color:var(--warn); }
.banner.warn .ic { background:#fff; color:var(--warn); }
.banner.err  { background:var(--err-bg);  border-color:var(--err-bd);  color:var(--err); }
.banner.err  .ic { background:#fff; color:var(--err); }
.banner.info { background:var(--info-bg); border-color:var(--info-bd); color:var(--info); }
.banner.info .ic { background:#fff; color:var(--info); }
.banner .x {
  background:transparent; border:none; cursor:pointer;
  color:inherit; opacity:0.5;
  width:24px; height:24px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:4px;
}
.banner .x:hover { opacity:1; background:rgba(0,0,0,0.05); }

/* KV (definition list) */
dl.kv {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:8px 16px;
  margin:0;
  font-size:13px;
}
dl.kv dt {
  color:var(--text-muted);
  font-size:12px;
}
dl.kv dd {
  margin:0;
  color:var(--text);
  text-align:right;
  font-variant-numeric:tabular-nums;
}
dl.kv dd.mono, dl.kv dd .mono { font-family:var(--mono); }

/* Design canvas reset for our app frames */
.dc-artboard .ok-app,
.dc-artboard .app2 {
  font-family:var(--font);
}

input[type="checkbox"] {
  width:14px; height:14px;
  accent-color:var(--c-9);
  cursor:pointer;
}

/* ============================================================
   DRAWER (sağdan slide-out panel) — Faz 28.5
   ============================================================
   Kullanim:
     <aside id="drawer-tenant" class="drawer" aria-hidden="true">
       <div class="drawer-backdrop"></div>
       <div class="drawer-panel" role="dialog" aria-modal="true">
         <div class="drawer-head">...</div>
         <div class="drawer-body">...</div>
         <div class="drawer-foot">...</div>
       </div>
     </aside>
   JS: KantarDrawer.open('drawer-tenant') / .close()
   Veya tetikleyici: <button data-drawer-open="tenant" data-tenant-id="N">
*/
.drawer {
  position:fixed; inset:0; z-index:9000;
  pointer-events:none; visibility:hidden;
}
.drawer.open {
  pointer-events:auto; visibility:visible;
}
.drawer-backdrop {
  position:absolute; inset:0;
  background:rgba(15,23,42,0.42);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  opacity:0;
  transition:opacity 0.18s ease-out;
}
.drawer.open .drawer-backdrop { opacity:1; }
.drawer-panel {
  position:absolute; top:0; right:0; bottom:0;
  width:900px; max-width:100vw;
  background:var(--bg-surface);
  border-left:1px solid var(--border);
  box-shadow:-8px 0 24px rgba(15,23,42,0.10);
  display:flex; flex-direction:column;
  transform:translateX(100%);
  transition:transform 0.22s cubic-bezier(.32,.72,0,1);
}
.drawer.open .drawer-panel { transform:translateX(0); }
.drawer-head {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:18px 24px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.drawer-head .h2 {
  margin:0; font-size:16px; font-weight:600;
  letter-spacing:-0.02em; color:var(--text);
}
.drawer-head .sub {
  font-size:12px; color:var(--text-3);
  margin-top:2px;
}
.drawer-close {
  width:32px; height:32px; flex-shrink:0;
  border-radius:6px; border:none;
  background:transparent; color:var(--text-3);
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.drawer-close:hover { background:var(--bg-inset); color:var(--text); }
.drawer-body {
  flex:1; overflow-y:auto;
  min-height:0;
  padding:20px 24px;
}
/* Drawer panel'in altında <form> sarmalı varsa (cihaz drawer) — form flex container olmalı
   ki .drawer-body{flex:1;overflow-y:auto} etkisini görsün. */
.drawer-panel > form {
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
}
.drawer-foot {
  display:flex; align-items:center; justify-content:flex-end;
  gap:8px; padding:14px 24px;
  border-top:1px solid var(--border);
  flex-shrink:0;
  background:var(--bg-surface);
}
.drawer-foot .left {
  margin-right:auto;
  font-size:12px; color:var(--text-muted);
}
body.drawer-open { overflow:hidden; }

@media (max-width:600px) {
  .drawer-panel {
    width:100vw; border-left:none;
  }
}

/* Drawer form helpers (Faz 28.6/28.7'de form alanları için) */
.drawer .field {
  display:flex; flex-direction:column; gap:6px;
  margin-bottom:16px;
}
.drawer .field > label {
  font-size:12px; font-weight:500;
  color:var(--text-2);
  display:flex; align-items:center; gap:6px;
}
.drawer .field > label .req { color:var(--err); }
.drawer .field > label .hint {
  font-weight:400; color:var(--text-muted);
  font-family:var(--mono); font-size:11px;
  margin-left:auto;
}
.drawer .field > input[type="text"],
.drawer .field > input[type="email"],
.drawer .field > input[type="number"],
.drawer .field > select,
.drawer .field > textarea {
  width:100%; height:36px;
  padding:0 10px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--bg-app);
  font-family:var(--font); font-size:13px;
  color:var(--text);
  transition:border-color 0.12s, box-shadow 0.12s;
  box-sizing:border-box;
}
.drawer .field > textarea {
  height:auto; min-height:72px;
  padding:8px 10px; resize:vertical;
}
.drawer .field > input:focus,
.drawer .field > select:focus,
.drawer .field > textarea:focus {
  outline:none;
  border-color:var(--c-9);
  box-shadow:0 0 0 3px rgba(15,23,42,0.06);
}
.drawer .field > input:disabled,
.drawer .field > select:disabled {
  background:var(--bg-inset);
  color:var(--text-muted);
  cursor:not-allowed;
}
.drawer .field > .err-msg {
  font-size:11px; color:var(--err);
  font-family:var(--mono);
}
.drawer .field-row {
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.drawer .check-row {
  display:flex; align-items:flex-start; gap:8px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--bg-app);
}
.drawer .check-row > input { margin-top:2px; }
.drawer .check-row > div { flex:1; }
.drawer .check-row .lbl {
  font-size:13px; font-weight:500; color:var(--text);
}
.drawer .check-row .desc {
  font-size:11px; color:var(--text-3); margin-top:2px;
}

/* Drawer alert/banner (form üstü) */
.drawer-alert {
  padding:10px 12px; border-radius:6px;
  border:1px solid var(--border);
  font-size:12px; line-height:1.4;
  margin-bottom:16px;
  display:flex; gap:8px; align-items:flex-start;
}
.drawer-alert.err  { background:var(--err-bg);  color:var(--err);  border-color:var(--err-bd); }
.drawer-alert.ok   { background:var(--ok-bg);   color:var(--ok);   border-color:var(--ok-bd); }
.drawer-alert.info { background:var(--info-bg); color:var(--info); border-color:var(--info-bd); }

/* Sidebar disabled item override (Faz 28.3'te inline'dı, şimdi class-bazlı) */
.sb-item.is-disabled {
  cursor:not-allowed; opacity:0.45;
}
.sb-item.is-disabled:hover {
  background:transparent; color:var(--text-3);
}

/* ============================================================
   LIVE DEVICE CARD (Faz 29.3 + 31.1 + 33 — 3-col full-width layout)
   ============================================================ */
.live-grid {
  display:flex; flex-direction:column; gap:14px; margin-bottom:14px;
}

/* Card: relative pozisyon + top stripe (state'e göre renklenir) */
.live-card {
  display:flex; flex-direction:column;
  position:relative;
  overflow:hidden;
  transition:opacity 0.2s, box-shadow 0.2s;
}
.live-card::before {
  content:''; position:absolute; top:0; left:0; right:0;
  height:3px; background:var(--c-4);
  transition:background 0.2s;
}
.live-card.is-stable::before   { background:var(--ok); }
.live-card.is-changing::before { background:var(--warn); }
.live-card.is-waiting::before  { background:#3b82f6; }
.live-card.is-empty::before    { background:var(--c-4); }
.live-card.is-offline::before  { background:var(--err); }

.live-card.is-offline { opacity:0.78; }
.live-card.is-offline:hover { opacity:1; }

/* Header: kompakt, code + name yan yana, badge sağda */
.live-card .card-head {
  padding:14px 18px 12px;
  border-bottom:1px solid var(--border);
}
.live-card .lc-title {
  display:flex; align-items:center; gap:8px;
  font-size:14px; font-weight:600;
  letter-spacing:-0.01em;
  color:var(--text);
}
.live-card .lc-title .lc-code {
  font-family:var(--mono); font-weight:600;
}
.live-card .lc-title .lc-name {
  font-size:12px; font-weight:400;
  color:var(--text-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:170px;
}
.live-card .lc-sub {
  font-size:11px; color:var(--text-muted);
  font-family:var(--mono); margin-top:2px;
  letter-spacing:0;
}

/* Display panel: 3-col grid (lc-data | lc-chart | lc-thumb).
 * Kullanici karari (2026-05-12): resim kolonu 2x genis (200/280 -> 400/560). */
.live-card .lc-display {
  display:grid;
  grid-template-columns:minmax(240px, 1fr) minmax(280px, 2fr) minmax(400px, 560px);
  gap:18px; padding:16px 20px;
  align-items:stretch;
}
@media (max-width:900px) {
  .live-card .lc-display {
    grid-template-columns:1fr;
  }
}

/* Kolon 1: ölçüm verileri (weight + state + idrow + foot bilgisi yığılı) */
.live-card .lc-data {
  display:flex; flex-direction:column; gap:10px;
  min-width:0;
}
.live-card .lc-data .lc-foot-inline {
  margin-top:auto;
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; font-family:var(--mono);
  color:var(--text-muted);
  padding-top:8px;
  border-top:1px dashed var(--border);
}
.live-card .lc-data .lc-foot-inline .lc-foot-key { color:var(--text-muted); }
.live-card .lc-data .lc-foot-inline .lc-foot-val {
  color:var(--text-2);
  font-variant-numeric:tabular-nums;
}

.live-card .lc-weight-block { min-width:0; }
.live-card .lc-weight-num {
  font-family:var(--mono); font-size:34px; font-weight:700;
  line-height:1; letter-spacing:-0.025em;
  color:var(--text);
  font-variant-numeric:tabular-nums;
}
.live-card .lc-weight-unit {
  font-size:14px; font-weight:500;
  color:var(--text-muted);
  font-family:var(--mono);
  margin-left:6px;
  letter-spacing:0;
}
.live-card .lc-state-text {
  font-size:10px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.08em;
  color:var(--text-muted);
  margin-top:8px;
  font-family:var(--mono);
  display:flex; align-items:center; gap:6px;
}
.live-card .lc-state-text::before {
  content:''; width:6px; height:6px; border-radius:3px;
  background:currentColor;
}

.live-card.is-stable   .lc-weight-num { color:#0f172a; }
.live-card.is-stable   .lc-state-text { color:var(--ok); }
.live-card.is-changing .lc-weight-num { color:#92400e; }
.live-card.is-changing .lc-state-text { color:var(--warn); }
.live-card.is-changing .lc-state-text::before { animation:lc-pulse 0.9s ease-in-out infinite; }
.live-card.is-waiting  .lc-state-text { color:#3b82f6; }
.live-card.is-empty    .lc-weight-num { color:var(--text-muted); font-weight:500; }
.live-card.is-empty    .lc-state-text { color:var(--text-muted); }
.live-card.is-offline  .lc-weight-num { color:var(--text-muted); font-weight:500; }
.live-card.is-offline  .lc-state-text { color:var(--err); }

/* Thumb: 3-col layout'ta kolonu dolduran büyük resim */
.live-card .lc-thumb {
  width:100%; min-height:200px;
  border:1px solid var(--border); border-radius:6px;
  overflow:hidden; background:var(--bg-inset);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  transition:filter 0.2s;
}
.live-card.is-offline .lc-thumb { filter:grayscale(60%) opacity(0.65); }
.live-card .lc-thumb img {
  width:100%; height:100%; object-fit:cover; display:block;
}
.live-card .lc-thumb .lc-noimg {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:6px;
  font-size:11px; color:var(--text-muted);
  text-align:center; padding:12px;
  font-family:var(--mono); line-height:1.3;
  width:100%; height:100%;
}
/* hidden attribute'unu specificity ile garanti et (display:flex'i ezsin). */
.live-card .lc-thumb .lc-noimg[hidden] { display:none !important; }
.live-card .lc-thumb img[hidden]       { display:none !important; }
.live-card .lc-thumb .lc-noimg svg { color:var(--text-muted); opacity:0.5; }
.live-card .lc-thumb .lc-livedot {
  position:absolute; top:5px; right:5px;
  width:8px; height:8px; border-radius:4px;
  background:#22c55e;
  box-shadow:0 0 0 2px rgba(255,255,255,0.85), 0 0 0 4px rgba(34,197,94,0.45);
  animation:lc-pulse 1.6s ease-in-out infinite;
}
@keyframes lc-pulse {
  0%,100% { opacity:1; }
  50%     { opacity:0.4; }
}

/* Identification row: plaka + firma chip — .lc-data kolonu içinde */
.live-card .lc-idrow {
  padding:0;
  display:flex; flex-wrap:wrap; gap:12px;
  font-size:12px;
  background:transparent;
}
.live-card .lc-idrow.is-empty {
  color:var(--text-muted);
  font-style:italic;
  font-size:11px;
  padding:0;
}
.live-card .lc-idrow .lcid-item {
  display:flex; align-items:center; gap:6px;
  min-width:0;
}
.live-card .lc-idrow .lcid-key {
  color:var(--text-muted);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  font-weight:500;
}
.live-card .lc-idrow code {
  font-size:11px; padding:1px 5px;
  background:var(--bg-inset); border-radius:3px;
  font-family:var(--mono);
}
.live-card .lc-idrow .lcid-firma {
  color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:200px;
}

/* Chart: 3-col kolonu dolduran buyuk chart (Faz 33 revize: 140 -> 200) */
.live-card .lc-chart {
  padding:0;
  display:flex; flex-direction:column;
  min-height:200px;
}
.live-card .lc-chart-wrap {
  flex:1; min-height:200px; position:relative;
  padding:4px 2px 0;
}
.live-card.is-offline .lc-chart-wrap { opacity:0.55; }

/* Footer: tek satır mono mute info */
.live-card .lc-foot {
  padding:8px 20px;
  border-top:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; font-family:var(--mono);
  color:var(--text-muted);
  background:var(--bg-inset);
  margin-top:auto;
}
.live-card .lc-foot .lc-foot-key {
  color:var(--text-muted);
}
.live-card .lc-foot .lc-foot-val {
  color:var(--text-2);
  font-variant-numeric:tabular-nums;
}

/* Faz 53.2 — Canli Cihazlar kart altina Uretim Kaydi butonu */
.live-card .lc-actions {
  padding:10px 16px 12px;
  border-top:1px solid var(--border);
  background:var(--bg-inset);
}
.live-card .lc-actions .lc-archive-btn {
  width:100%;
  justify-content:center;
  gap:4px;
}
.live-card .lc-actions .lc-archive-btn:disabled {
  opacity:0.5;
  cursor:not-allowed;
}
.live-card.is-empty   .lc-actions,
.live-card.is-offline .lc-actions,
.live-card.is-waiting .lc-actions { opacity:0.65; }

/* ============================================================
   RECENT SESSIONS CARD LIST (Faz 29.4 + Faz 32 filtre/pager)
   ============================================================ */
.rs-toolbar {
  padding:12px 20px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.rs-toolbar .seg { flex-shrink:0; }
.rs-summary {
  margin-left:auto;
  font-size:11px;
  color:var(--text-3);
  background:var(--bg-inset);
  padding:4px 10px;
  border-radius:var(--r-sm);
  border:1px solid var(--border);
  white-space:nowrap;
}
.rs-detail-panel {
  padding:14px 20px;
  border-bottom:1px solid var(--border);
  background:var(--bg-inset);
}
.rs-detail-panel[hidden] { display:none; }
.rs-detail-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:12px 16px;
  align-items:end;
}
.rs-detail-actions { min-width:200px; }
.rs-pager {
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:14px 20px;
  border-top:1px solid var(--border);
}
.rs-pager-info {
  font-size:12px;
  color:var(--text-3);
  font-variant-numeric:tabular-nums;
}
.rs-list { display:flex; flex-direction:column; }
.rs-row {
  display:grid;
  grid-template-columns: 80px 1.4fr 1fr 1fr 0.9fr 0.9fr 0.9fr 36px;
  gap:14px;
  align-items:center;
  padding:12px 20px;
  border-top:1px solid var(--border);
  transition:background 0.12s;
  cursor:pointer;
}
.rs-row:hover { background:var(--bg-inset); }
.rs-row:first-child { border-top:none; }

.rs-thumb {
  width:80px; height:60px; flex-shrink:0;
  border:1px solid var(--border); border-radius:5px;
  overflow:hidden; background:var(--bg-inset);
  display:flex; align-items:center; justify-content:center;
}
.rs-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.rs-thumb .rs-noimg {
  font-size:10px; color:var(--text-muted);
  font-family:var(--mono); text-align:center;
}

.rs-id { min-width:0; }
.rs-plate { margin-bottom:3px; }
.rs-firma {
  font-size:12px; color:var(--text-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.rs-dev { min-width:0; }
.rs-dev-code {
  font-size:13px; font-weight:500; color:var(--text);
  font-family:var(--mono);
}
.rs-dev-tenant {
  font-size:11px; color:var(--text-muted);
  font-family:var(--mono); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.rs-time { min-width:0; }
.rs-time-main {
  font-size:12px; color:var(--text-2);
  font-family:var(--mono);
}
.rs-status { margin-top:4px; }

.rs-num { text-align:right; min-width:0; }
.rs-num-key {
  font-size:10px; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:0.04em;
}
.rs-num-val {
  font-size:14px; font-weight:600; color:var(--text);
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  margin-top:2px;
}
.rs-num-net .rs-num-val { color:var(--ok); }

.rs-empty {
  padding:32px 24px; text-align:center;
  font-size:13px; color:var(--text-3);
}

.rs-actions {
  display:flex; align-items:center; justify-content:center;
}
.rs-print-btn {
  width:32px; height:32px; padding:0;
  border-radius:6px; color:var(--text-3);
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid transparent;
}
.rs-print-btn:hover {
  background:var(--bg-inset); color:var(--text);
  border-color:var(--border);
}

@media (max-width:900px) {
  .rs-row {
    grid-template-columns: 64px 1fr 1fr 36px;
    gap:10px;
  }
  .rs-row .rs-time,
  .rs-row .rs-num-brut,
  .rs-row .rs-num-dara { display:none; }
  .rs-thumb { width:64px; height:48px; }
}

/* ============================================================
   CATALOG MULTI-PAGE CHIPS (Faz 29.5)
   ============================================================ */
.cat-card { display:flex; flex-direction:column; }
.cat-pager {
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--text-2);
  font-family:var(--mono);
}
.cat-pager .btn-icon {
  width:28px; height:28px;
  font-size:14px; line-height:1;
  padding:0;
}
.cat-page-label {
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* Faz 48.10 — Profesyonel multipage pager (sayfa numarası butonları + info) */
.cat-page-numbers {
  display:inline-flex; align-items:center; gap:2px;
}
.cat-page-btn {
  min-width:28px; height:28px;
  padding:0 6px;
  border:1px solid var(--border-2, #e5e7eb);
  background:transparent;
  color:var(--text-2, #4b5563);
  font:500 12px/1 var(--mono);
  border-radius:6px;
  cursor:pointer;
  transition:background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.cat-page-btn:hover {
  background:var(--bg-2, #f3f4f6);
  border-color:var(--border-3, #d1d5db);
  color:var(--text-1, #111827);
}
.cat-page-btn.is-active {
  background:var(--accent, #2563eb);
  border-color:var(--accent, #2563eb);
  color:#fff;
  cursor:default;
}
.cat-page-btn.is-active:hover {
  background:var(--accent, #2563eb);
}
.cat-page-ellipsis {
  display:inline-block;
  min-width:18px; text-align:center;
  color:var(--text-muted, #9ca3af);
  font:400 12px/1 var(--mono);
  user-select:none;
}
.cat-page-info {
  margin-left:auto;
  padding-left:8px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  color:var(--text-3, #6b7280);
}
@media (max-width:520px) {
  .cat-page-info { display:none; }
  .cat-page-btn { min-width:24px; height:24px; padding:0 4px; font-size:11px; }
}
.cat-body {
  padding:12px 14px;
  display:flex; flex-direction:column; gap:6px;
  min-height:120px; position:relative;
}
.cat-body.is-loading { opacity:0.55; pointer-events:none; }
.cat-body.is-loading::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation:cat-shimmer 1.2s linear infinite;
}
@keyframes cat-shimmer {
  0% { transform:translateX(-100%); }
  100% { transform:translateX(100%); }
}

/* Row card: tek yatay satır — kompakt layout (Faz 48.11) */
.cat-row {
  display:flex; align-items:center; gap:12px;
  padding:6px 12px;
  border:1px solid var(--border); border-radius:6px;
  background:var(--bg-app);
  cursor:pointer;
  transition:border-color 0.12s, background 0.12s, transform 0.12s;
  min-width:0;
}
.cat-row:hover {
  background:var(--bg-surface);
  border-color:var(--c-4);
}
.cat-row:active { transform:translateY(1px); }

.cat-row-main {
  display:flex; align-items:center; gap:10px;
  flex:1 1 auto;
  min-width:0;
  white-space:nowrap; overflow:hidden;
}
.cat-row-name {
  font-size:13px; font-weight:600; color:var(--text);
  letter-spacing:-0.01em;
  min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:240px;
}
.cat-row-meta {
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--text-2);
  font-family:var(--mono);
  min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cat-row-meta .sep { color:var(--text-muted); }
.cat-row-meta .key { color:var(--text-muted); font-size:11px; margin-right:4px; }
.cat-row-meta .val { color:var(--text); }

/* Eski "alt satır": artık aynı satırda en sağa hizalı, flex-shrink:0 */
.cat-row-sub {
  display:flex; align-items:center; gap:8px;
  font-size:11px; color:var(--text-muted);
  font-family:var(--mono);
  flex-shrink:0;
  white-space:nowrap;
}
.cat-row-sub .src-badge {
  display:inline-block;
  padding:1px 6px; border-radius:3px;
  background:var(--bg-inset); color:var(--text-3);
  font-size:10px; text-transform:uppercase; letter-spacing:0.04em;
}
.cat-row-sub .src-badge.admin   { background:#fef3c7; color:#92400e; }
.cat-row-sub .src-badge.mobile  { background:#dbeafe; color:#1e40af; }
.cat-row-sub .src-badge.desktop { background:#dcfce7; color:#166534; }

.cat-row-chev {
  color:var(--text-muted);
  font-size:14px; line-height:1;
  flex-shrink:0;
}

/* Dar ekranda alt-bilgiyi gizle — plaka + meta korunur, chev yine en sağda */
@media (max-width:720px) {
  .cat-row-sub { display:none; }
}

.cat-empty {
  width:100%; padding:24px 18px;
  text-align:center;
  font-size:12px; color:var(--text-muted);
}

/* Card-head action area (Yeni butonu + pager yan yana) */
.cat-card .card-head .ch-actions {
  display:flex; align-items:center; gap:10px;
}

/* ============================================================
   Faz 37 — Tartımlar page (rapor + tablo + drawer)
   ============================================================ */

/* Filtre satırı — Faz 54.1 responsive */
.tr-filter-row {
  display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap;
  padding:14px 16px;
}
.tr-filter-row .fld { flex:1 1 180px; min-width:160px; }
.tr-filter-row .fld .inp { width:100%; }
.tr-filter-row .tr-filter-actions { flex:0 0 auto; min-width:auto; }
.tr-filter-row .tr-filter-actions .btn { width:100%; min-width:96px; }

@media (max-width: 900px) {
  .tr-filter-row { gap:10px; }
  .tr-filter-row .fld { flex:1 1 calc(50% - 5px); min-width:0; }
  .tr-filter-row .tr-filter-actions { flex:1 1 calc(50% - 5px); }
}
@media (max-width: 520px) {
  .tr-filter-row .fld { flex:1 1 100%; }
  .tr-filter-row .tr-filter-actions { flex:1 1 calc(50% - 5px); }
}

/* 4 dönem grid — masaüstü 4'lü, tablet 2×2, mobile 1 kol */
.tr-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
}
@media (max-width: 1280px) {
  .tr-grid { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .tr-grid { grid-template-columns:1fr; }
}

/* Kart — hero-layout: eyebrow + hero + foot */
.tr-card {
  position:relative;
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:18px 20px 16px;
  display:flex; flex-direction:column; gap:14px;
  box-shadow:0 1px 2px rgba(15, 23, 42, 0.03);
  transition:box-shadow 0.18s, border-color 0.18s;
}
.tr-card::before {
  /* Sol accent stripe — dönem tonu */
  content:"";
  position:absolute;
  left:0; top:14px; bottom:14px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:var(--tr-tone, var(--c-9));
  opacity:0.85;
}
.tr-card:hover {
  border-color:var(--border-strong);
  box-shadow:0 2px 8px rgba(15, 23, 42, 0.05);
}

/* Dönem tonları (sol stripe + dot) */
.tr-card.tone-today   { --tr-tone:#0ea5e9; --tr-tone-soft:#e0f2fe; } /* sky */
.tr-card.tone-week    { --tr-tone:#6366f1; --tr-tone-soft:#e0e7ff; } /* indigo */
.tr-card.tone-month   { --tr-tone:#f59e0b; --tr-tone-soft:#fef3c7; } /* amber */
.tr-card.tone-last30  { --tr-tone:#10b981; --tr-tone-soft:#d1fae5; } /* emerald */

/* Eyebrow — dönem etiketi + sefer rozeti */
.tr-eyebrow {
  display:flex; justify-content:space-between; align-items:center;
  gap:10px;
}
.tr-eyebrow-label {
  display:inline-flex; align-items:center; gap:7px;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.1em;
  color:var(--text-3);
  text-transform:uppercase;
}
.tr-dot {
  width:6px; height:6px;
  border-radius:50%;
  background:var(--tr-tone, var(--c-9));
  flex-shrink:0;
}
.tr-eyebrow-meta {
  display:inline-flex; align-items:baseline; gap:4px;
  font-size:11px;
  color:var(--text-3);
  background:var(--bg-inset);
  border:1px solid var(--border-subtle);
  padding:3px 9px;
  border-radius:999px;
}
.tr-eyebrow-meta .mono {
  font-weight:600;
  color:var(--text);
  font-size:12px;
}
.tr-eyebrow-unit {
  font-size:10px; color:var(--text-muted);
  text-transform:lowercase;
}

/* Hero — Toplam Net, kartın görsel kalbi */
.tr-hero {
  display:flex; flex-direction:column; gap:3px;
  padding:4px 0 6px;
}
.tr-hero-val {
  display:flex; align-items:baseline; gap:6px;
  font-feature-settings:"tnum" 1, "lnum" 1;
}
.tr-hero-val .mono {
  font-size:30px;
  font-weight:600;
  color:var(--text);
  line-height:1.05;
  letter-spacing:-0.01em;
}
.tr-hero-unit {
  font-size:13px;
  color:var(--text-muted);
  font-weight:500;
}
.tr-hero-caption {
  font-size:10px;
  font-weight:600;
  letter-spacing:0.08em;
  color:var(--text-muted);
  text-transform:uppercase;
}

/* Foot — 3'lü ortalama şeridi */
.tr-foot {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0;
  padding-top:12px;
  border-top:1px solid var(--border-subtle);
}
.tr-foot-item {
  display:flex; flex-direction:column; gap:2px;
  padding:0 8px;
  border-left:1px solid var(--border-subtle);
}
.tr-foot-item:first-child {
  border-left:none;
  padding-left:0;
}
.tr-foot-item:last-child {
  padding-right:0;
}
.tr-foot-key {
  font-size:10px;
  font-weight:500;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.tr-foot-val {
  font-size:13px;
  font-weight:500;
  color:var(--text-2);
  font-feature-settings:"tnum" 1;
}

@media (max-width: 480px) {
  .tr-card { padding:16px 18px 14px; }
  .tr-hero-val .mono { font-size:26px; }
  .tr-foot-item { padding:0 6px; }
  .tr-foot-val { font-size:12px; }
}

/* Tartımlar tablosu */
.tr-table-wrap {
  width:100%; overflow-x:auto;
}
.tr-table {
  width:100%; border-collapse:collapse;
  font-size:13px;
}
.tr-table thead th {
  text-align:left;
  font-weight:600; font-size:11px;
  text-transform:uppercase; letter-spacing:0.04em;
  color:var(--text-muted);
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  background:var(--bg-inset);
}
.tr-table thead th.tr-num { text-align:right; }
.tr-table tbody td {
  padding:11px 12px;
  border-bottom:1px solid var(--border-subtle);
  color:var(--text-2);
}
.tr-table tbody td.tr-num { text-align:right; }
.tr-table tbody td.tr-num-net { font-weight:600; color:var(--text); }
.tr-row { cursor:pointer; transition:background 0.12s; }
.tr-row:hover { background:var(--bg-inset); }
.tr-muted { color:var(--text-muted); font-size:11px; }

.tr-empty-row td {
  padding:24px 16px;
  text-align:center;
  color:var(--text-muted);
  font-size:12px;
}

/* Faz 50 — Tartımlar tablosu birleştirme UI (archive + archive merge).
   tr-pick: checkbox kolonu (sadece archive + onaylandi=0 satırlarda görünür)
   tr-merge-bar: sticky toolbar, 1+ kayıt seçilince görünür, 2 seçildiğinde
     "Birleştir" butonu aktifleşir (aynı cihaz kuralı + brüt/dara/net preview).
   tr-merge-flash: birleşme başarı/hata mesajı banner'ı. */
.tr-table thead th.tr-pick,
.tr-table tbody td.tr-pick {
  width:36px; min-width:36px;
  padding-left:14px; padding-right:4px;
  text-align:center;
}
.tr-pick-cb {
  width:16px; height:16px;
  cursor:pointer;
  accent-color:var(--info);
  vertical-align:middle;
  margin:0;
}
.tr-row.is-picked,
.tr-row.is-picked:hover { background:var(--info-bg); }

.tr-merge-bar {
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding:10px 16px;
  background:var(--info-bg);
  border-top:1px solid var(--info-bd);
  border-bottom:1px solid var(--info-bd);
  font-size:13px;
  animation:tr-merge-slidein 0.18s ease-out;
}
.tr-merge-bar[hidden] { display:none; }
@keyframes tr-merge-slidein {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}
.tr-merge-info {
  display:flex; align-items:center; gap:12px;
  color:var(--info); flex-wrap:wrap; min-width:0;
}
.tr-merge-count strong { font-weight:700; }
.tr-merge-stat {
  display:inline-flex; align-items:center; gap:8px;
  color:var(--text-2);
}
.tr-merge-stat strong { font-weight:600; color:var(--text); }
.tr-merge-sep { color:var(--text-muted); opacity:0.55; }
.tr-merge-hint {
  font-size:12px; color:var(--warn);
  background:var(--warn-bg);
  padding:2px 8px; border-radius:4px;
  border:1px solid var(--warn-bd);
}
.tr-merge-actions { display:flex; gap:8px; align-items:center; }

.tr-merge-flash {
  padding:10px 16px;
  border-bottom:1px solid var(--border);
  font-size:13px; line-height:1.45;
}
.tr-merge-flash[hidden] { display:none; }
.tr-merge-flash.is-ok    { background:var(--ok-bg);   border-color:var(--ok-bd);   color:var(--ok); }
.tr-merge-flash.is-warn  { background:var(--warn-bg); border-color:var(--warn-bd); color:var(--warn); }
.tr-merge-flash.is-error { background:#fef2f2;        border-color:#fecaca;        color:#991b1b; }
.tr-merge-flash strong { font-weight:700; }

/* Faz 52 — Tartım Detayı drawer + Sınıflandırma atama drawer "Tehlikeli bölge".
   Soft-delete butonu + onay/hata flash. */
.td-danger-zone {
  margin-top:20px;
  padding:14px 16px;
  border:1px solid var(--err-bd);
  background:var(--err-bg);
  border-radius:6px;
}
.td-danger-title {
  color:var(--err);
  font-weight:700;
}
.td-danger-row {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  margin-top:8px;
}
.td-danger-info {
  font-size:12px; color:var(--err);
  line-height:1.5; max-width:520px;
}
.td-danger-flash {
  margin-top:8px;
  padding:8px 10px;
  font-size:12px; line-height:1.45;
  border-radius:4px;
  border:1px solid var(--err-bd);
  background:#fff;
  color:var(--err);
}
.td-danger-flash[hidden] { display:none; }
.td-danger-flash.is-ok {
  border-color:var(--ok-bd);
  background:var(--ok-bg);
  color:var(--ok);
}

/* Atama drawer'ı (Faz 46/49) içinde sil butonu — sola yaslan */
.uc-foot-delete { margin-right:auto; }

/* Tartımlar pager */
.tr-pager {
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
  padding:12px 16px;
  border-top:1px solid var(--border-subtle);
}
.tr-pager .rs-pager-info {
  font-size:12px; color:var(--text-muted);
}

/* Drawer içi detay grid */
.td-loading, .td-error {
  padding:20px;
  text-align:center;
  color:var(--text-muted);
  font-size:13px;
}
.td-error { color:var(--err); }

.td-grid {
  display:grid;
  grid-template-columns:max-content 1fr;
  gap:8px 14px;
  margin:0 0 18px 0;
  font-size:13px;
}
.td-grid dt {
  color:var(--text-muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  align-self:center;
}
.td-grid dd {
  margin:0;
  color:var(--text);
}
.td-grid-small {
  font-size:12px;
}
.td-grid-small dt { font-size:10px; }

/* Brüt / Dara / Net büyük blok */
.td-weight-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  margin:0 0 18px 0;
}
.td-weight {
  background:var(--bg-inset);
  border:1px solid var(--border);
  border-radius:6px;
  padding:10px 12px;
  display:flex; flex-direction:column; gap:4px;
}
.td-weight-net {
  background:var(--info-bg);
  border-color:var(--info-bd);
}
.td-weight-key {
  font-size:10px; text-transform:uppercase; letter-spacing:0.04em;
  color:var(--text-muted);
}
.td-weight-val {
  font-size:15px; font-weight:600; color:var(--text);
}
.td-weight-net .td-weight-val { color:var(--info); }

/* Section başlıkları */
.td-section {
  margin:0 0 18px 0;
  padding-top:12px;
  border-top:1px solid var(--border-subtle);
}
.td-section:first-of-type { border-top:none; padding-top:0; }
.td-section-title {
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--text-muted);
  margin-bottom:10px;
  font-weight:600;
}

/* Ana resim */
.td-image {
  width:100%;
  border-radius:6px; overflow:hidden;
  background:var(--bg-inset);
  border:1px solid var(--border);
}
.td-image img {
  width:100%; height:auto; display:block;
}

/* Notlar */
.td-notlar {
  background:var(--bg-inset);
  border:1px solid var(--border);
  border-radius:6px;
  padding:10px 12px;
  font-size:12px; color:var(--text-2);
  white-space:pre-wrap;
  word-break:break-word;
}

/* Pair list (çift tartım) */
.td-pairs {
  display:flex; flex-direction:column; gap:10px;
}
.td-pair {
  display:flex; gap:12px; align-items:center;
  background:var(--bg-inset);
  border:1px solid var(--border);
  border-radius:6px;
  padding:8px 10px;
}
.td-pair-img, .td-pair-noimg {
  width:64px; height:48px;
  border-radius:4px;
  flex-shrink:0;
  object-fit:cover;
  background:var(--bg-surface);
  border:1px solid var(--border);
}
.td-pair-noimg {
  display:flex; align-items:center; justify-content:center;
  font-size:9px; color:var(--text-muted); text-align:center;
}
.td-pair-info {
  display:flex; flex-direction:column; gap:2px; flex:1;
}
.td-pair-role {
  font-size:11px; font-weight:600; color:var(--text-2);
}
.td-pair-val {
  font-size:14px; font-weight:600; color:var(--text);
}
.td-pair-time {
  font-size:11px; color:var(--text-muted);
}

/* Audit grid */
.td-audit dl { margin-top:6px; }

/* ============================================================
   Faz 38 — Cihazlar sayfası (filter + table + drawer)
   ============================================================ */

/* .fld label içi yardımcılar (drawer dışı + drawer içi tutarlı) */
.fld .lbl .req { color:var(--err); font-weight:600; }
.fld .lbl .hint {
  font-weight:400;
  color:var(--text-muted);
  font-family:var(--mono);
  font-size:11px;
  margin-left:auto;
}
.fld .lbl {
  display:flex; align-items:center; gap:6px;
}

/* Generic err-msg (drawer dışı için) */
.err-msg {
  font-size:11px; color:var(--err);
  font-family:var(--mono);
  margin-top:4px;
}

/* Tablo cell — küçük mono (mac, key prefix gibi teknik string'ler için) */
.cz-mono-sm {
  font-size:12px;
  color:var(--text-3);
}
.cz-age {
  font-size:12px;
  color:var(--text-3);
  white-space:nowrap;
}
.cz-ping-dot {
  display:inline-block;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--text-muted);
  margin-right:6px;
  vertical-align:middle;
}
.cz-ping-dot.live {
  background:#10b981;
  box-shadow:0 0 0 3px rgba(16,185,129,0.15);
}

/* Drawer içi cz-alert (drawer-alert.err alternatifi, kendi markup'ımız) */
.cz-alert {
  padding:10px 12px;
  border-radius:6px;
  border:1px solid var(--err-bd);
  background:var(--err-bg);
  color:var(--err);
  font-size:12px; line-height:1.4;
  margin-bottom:16px;
}

/* API key banner */
.cz-key-banner {
  margin-bottom:18px;
  padding:14px 16px;
  border:1px solid var(--ok-bd);
  background:var(--ok-bg);
  border-radius:8px;
}
.cz-key-banner-head {
  display:flex; align-items:center; gap:8px;
  color:var(--ok);
  margin-bottom:8px;
}
.cz-key-banner-icon { display:inline-flex; color:var(--ok); }
.cz-key-banner-head strong { font-size:13px; }
.cz-key-banner-warn {
  font-size:12px;
  color:var(--text-2);
  line-height:1.5;
  margin-bottom:10px;
}
.cz-key-banner-row {
  display:flex; gap:6px;
}
.cz-key-input {
  flex:1; height:34px;
  padding:0 10px;
  font-size:12px;
  border:1px solid var(--ok-bd);
  border-radius:6px;
  background:var(--bg-surface);
  color:var(--text);
}

/* Konum 3-grid (lat | lng | radius) */
.cz-geo-grid {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px;
  margin-bottom:16px;
}
@media (max-width:560px) {
  .cz-geo-grid { grid-template-columns:1fr; }
}

/* Active toggle satırı */
.cz-toggle {
  margin-bottom:18px;
}
.cz-toggle-row {
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--bg-app);
  cursor:pointer;
}
.cz-toggle-row input[type="checkbox"] {
  margin-top:3px;
  width:16px; height:16px;
  cursor:pointer;
}
.cz-toggle-row > div { flex:1; }
.cz-toggle-lbl {
  font-size:13px; font-weight:500; color:var(--text);
  margin-bottom:2px;
}
.cz-toggle-desc {
  font-size:11px; color:var(--text-3);
  line-height:1.5;
}
.cz-toggle-desc code {
  padding:0 4px;
  background:var(--bg-inset);
  border:1px solid var(--border);
  border-radius:3px;
  font-size:10px;
  font-family:var(--mono);
}

/* Meta panel — edit modu: id, prefix, last seen + rotate button */
.cz-meta-panel {
  margin-top:8px;
  padding:16px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--bg-inset);
}
.cz-meta-grid {
  display:grid;
  grid-template-columns:max-content 1fr;
  gap:6px 14px;
  margin-bottom:12px;
  font-size:12px;
}
.cz-meta-key {
  color:var(--text-muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  align-self:center;
}
.cz-meta-panel .mono {
  font-size:12px;
  color:var(--text);
}
.cz-meta-warn {
  font-size:11px;
  color:var(--text-muted);
  margin-top:6px;
  line-height:1.5;
}

/* Yeni cihaz drawer'ında daha geniş input boyutu */
#drawer-cihaz .inp {
  height:36px;
  font-size:13px;
}
#drawer-cihaz select.inp {
  height:38px;
}
#drawer-cihaz .fld { margin-bottom:14px; }
#drawer-cihaz .fld:last-of-type { margin-bottom:0; }

/* ============================================================
   Faz 39 — Cihaz drawer tab sistemi + Loglar paneli
   ============================================================ */

/* --- Tab bar (drawer içi) --- */
.cz-tab-bar {
  display:flex;
  gap:0;
  border-bottom:1px solid var(--border);
  margin:6px 0 14px;
  padding:0;
}
.cz-tab {
  appearance:none;
  background:none;
  border:0;
  border-bottom:2px solid transparent;
  color:var(--text-3);
  font:inherit;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  padding:9px 14px 8px;
  margin-bottom:-1px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:color .12s, border-color .12s;
}
.cz-tab:hover { color:var(--text); }
.cz-tab.is-active {
  color:var(--text);
  border-bottom-color:var(--info);
}
.cz-tab-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:18px;
  height:16px;
  padding:0 5px;
  border-radius:8px;
  background:var(--bg-inset);
  color:var(--text-3);
  font-size:10px;
  font-weight:600;
  font-family:var(--mono);
  line-height:1;
}
.cz-tab.is-active .cz-tab-badge {
  background:var(--info);
  color:#fff;
}

/* Panel ortak */
.cz-tab-panel[hidden] { display:none !important; }

/* --- Loglar paneli --- */
.cz-log-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
  gap:8px;
}
.cz-log-title {
  font-size:11px;
  color:var(--text-3);
  text-transform:uppercase;
  letter-spacing:0.05em;
  font-weight:600;
}

.cz-log-loading,
.cz-log-empty,
.cz-log-error {
  padding:24px 12px;
  text-align:center;
  color:var(--text-3);
  font-size:12px;
  background:var(--bg-inset);
  border-radius:var(--r-sm);
}
.cz-log-error { color:var(--err); background:var(--err-bg); }

.cz-spinner {
  display:inline-block;
  width:12px; height:12px;
  border:2px solid var(--border);
  border-top-color:var(--text-3);
  border-radius:50%;
  vertical-align:-2px;
  margin-right:6px;
  animation:cz-spin 0.7s linear infinite;
}
@keyframes cz-spin {
  to { transform:rotate(360deg); }
}

.cz-log-list {
  display:flex;
  flex-direction:column;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  overflow:hidden;
  background:var(--bg-elev);
}
.cz-log-list:empty { display:none; }

.cz-log-row {
  display:grid;
  grid-template-columns: 108px 56px 1fr 56px 64px 90px;
  column-gap:8px;
  padding:7px 10px;
  border-bottom:1px solid var(--border-subtle);
  font-size:11.5px;
  font-family:var(--mono);
  align-items:center;
  line-height:1.35;
}
.cz-log-row:last-child { border-bottom:0; }
.cz-log-row:hover { background:var(--bg-inset); }

.cz-log-time {
  color:var(--text-3);
  white-space:nowrap;
}
.cz-log-method {
  font-weight:700;
  color:var(--text-2);
}
.cz-log-path {
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}
.cz-log-status-badge {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:1px 6px;
  border-radius:3px;
  font-size:10px;
  font-weight:700;
  font-family:var(--mono);
}
.cz-log-status-badge.ok    { background:var(--ok-bg);    color:var(--ok);    border:1px solid var(--ok-bd); }
.cz-log-status-badge.redir { background:var(--info-bg);  color:var(--info);  border:1px solid var(--info-bd); }
.cz-log-status-badge.warn  { background:var(--warn-bg);  color:var(--warn);  border:1px solid var(--warn-bd); }
.cz-log-status-badge.err   { background:var(--err-bg);   color:var(--err);   border:1px solid var(--err-bd); }

.cz-log-lat {
  color:var(--text-3);
  text-align:right;
}
.cz-log-ip {
  color:var(--text-3);
  font-size:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cz-log-error-code {
  grid-column: 3 / 4;
  font-size:10px;
  color:var(--err);
  margin-top:-2px;
}

.cz-log-foot {
  margin-top:10px;
  text-align:center;
  font-size:11px;
  color:var(--text-3);
}

@media (max-width: 720px) {
  .cz-log-row {
    grid-template-columns: 88px 50px 1fr 50px 56px;
  }
  .cz-log-ip { display:none; }
}

/* --- Faz 39.3 — Bilgi sekmesi UX iyileştirme --- */
.cz-meta-section-title {
  font-size:11px;
  color:var(--text-3);
  text-transform:uppercase;
  letter-spacing:0.05em;
  font-weight:600;
  margin:0 0 8px;
}

/* API Key yönetim kutusu — vurgulu */
.cz-key-mgmt {
  margin-top:14px;
  border:1px solid var(--warn-bd);
  background:var(--warn-bg);
  border-radius:var(--r-sm);
  overflow:hidden;
}
.cz-key-mgmt-head {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  background:var(--warn-bd);
  color:var(--warn);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.cz-key-mgmt-head svg { color:var(--warn); }
.cz-key-mgmt-body {
  padding:12px 14px;
}
.cz-key-mgmt-note {
  margin:0 0 10px;
  font-size:12px;
  line-height:1.55;
  color:var(--text-2);
}
.cz-key-mgmt-note code {
  background:var(--bg-elev);
  border:1px solid var(--border);
  padding:1px 5px;
  border-radius:3px;
  font-size:11px;
}
.cz-key-mgmt-details {
  margin:0 0 12px;
  font-size:12px;
}
.cz-key-mgmt-details summary {
  cursor:pointer;
  color:var(--info);
  font-weight:600;
  padding:4px 0;
  user-select:none;
}
.cz-key-mgmt-details summary:hover { text-decoration:underline; }
.cz-key-mgmt-help {
  margin-top:6px;
  padding:8px 10px;
  background:var(--bg-elev);
  border-left:3px solid var(--info);
  border-radius:3px;
  line-height:1.5;
  color:var(--text-2);
}

/* Rotate butonu — vurgulu warn-tone */
.cz-rotate-btn {
  display:inline-flex;
  align-items:center;
  background:var(--warn);
  color:#fff;
  border:1px solid var(--warn);
  padding:8px 14px;
  font-weight:600;
  font-size:13px;
  border-radius:var(--r-sm);
  cursor:pointer;
  transition:filter .12s;
}
.cz-rotate-btn:hover { filter:brightness(1.06); }
.cz-rotate-btn:active { filter:brightness(0.96); }
.cz-rotate-btn svg { color:#fff; }

/* --- Faz 39.6 — Read-only drawer notu --- */
.cz-readonly-note {
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  background:var(--bg-inset);
  color:var(--text-3);
  font-size:12px;
  border-radius:var(--r-sm);
  border:1px dashed var(--border);
  font-style:italic;
}

/* disabled input'larda görsel ipucu (input kontrastı browser default'un üzerine yumuşatılır) */
#drawer-cihaz .inp:disabled,
#drawer-cihaz select.inp:disabled {
  background:var(--bg-inset);
  color:var(--text-3);
  cursor:not-allowed;
  opacity:0.92;
}
#drawer-cihaz input[type="checkbox"]:disabled {
  cursor:not-allowed;
}

/* --- Faz 43 — QR & Mobil sekmesi --- */
.cz-qr-card {
  border:1px solid var(--info-bd);
  background:var(--bg-elev);
  border-radius:var(--r-sm);
  overflow:hidden;
}
.cz-qr-head {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  background:var(--info-bg);
  color:var(--info);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  border-bottom:1px solid var(--info-bd);
}
.cz-qr-head svg { color:var(--info); }
.cz-qr-note {
  margin:0;
  padding:10px 14px 12px;
  font-size:12px;
  line-height:1.55;
  color:var(--text-2);
  border-bottom:1px solid var(--border-subtle);
}
.cz-qr-note code {
  background:var(--bg-inset);
  border:1px solid var(--border);
  padding:1px 5px;
  border-radius:3px;
  font-size:11px;
}
.cz-qr-body {
  display:grid;
  grid-template-columns: 220px 1fr;
  gap:14px;
  padding:14px;
  align-items:start;
}
.cz-qr-canvas {
  width:220px;
  height:220px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:8px;
  box-sizing:border-box;
}
.cz-qr-canvas canvas,
.cz-qr-canvas img {
  display:block;
  width:100% !important;
  height:auto !important;
  max-width:204px;
  image-rendering: pixelated;
}
.cz-qr-placeholder {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:var(--text-3);
  font-size:12px;
}
.cz-qr-side {
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}
.cz-qr-url-lbl {
  font-size:11px;
  color:var(--text-3);
  text-transform:uppercase;
  letter-spacing:0.05em;
  font-weight:600;
}
.cz-qr-url-input {
  width:100%;
  font-size:12px;
  padding:8px 10px;
  background:var(--bg-inset);
  border:1px solid var(--border);
  color:var(--text-2);
  border-radius:var(--r-sm);
  cursor:text;
}
.cz-qr-url-input:focus {
  outline:none;
  border-color:var(--info-bd);
  background:var(--bg-elev);
}
.cz-qr-actions {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.cz-qr-actions .btn {
  display:inline-flex;
  align-items:center;
}
.cz-qr-error {
  margin:0 14px 14px;
  padding:8px 12px;
  background:var(--err-bg, #fef2f2);
  color:var(--err, #991b1b);
  border:1px solid var(--err-bd, #fecaca);
  border-radius:var(--r-sm);
  font-size:12px;
}

@media (max-width: 720px) {
  .cz-qr-body {
    grid-template-columns: 1fr;
    justify-items:center;
  }
  .cz-qr-canvas {
    width:200px;
    height:200px;
  }
  .cz-qr-side {
    width:100%;
  }
}

/* --- Faz 46 — Sınıflandırılmamış Oturumlar widget + atama drawer --- */
.uc-card {
  margin-bottom:16px;
}
.uc-card .card-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
}
.uc-head-tools {
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
}
.uc-inp-sm {
  font-size:12px;
  padding:4px 8px;
  height:30px;
  min-width:130px;
}

.uc-summary {
  padding:6px 14px 0;
  font-size:12px;
  color:var(--text-3);
}
.uc-summary strong { color:var(--text-2); font-weight:600; }

.uc-list {
  padding:10px 12px 14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.uc-row {
  display:grid;
  grid-template-columns: 56px 1fr 100px 120px;
  gap:10px;
  align-items:center;
  padding:8px 12px;
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  transition:border-color 0.12s, background 0.12s;
}
.uc-row:hover {
  border-color:var(--info-bd);
  background:var(--info-bg);
}
.uc-thumb {
  width:56px; height:42px;
  background:var(--bg-inset);
  border-radius:3px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.uc-thumb img {
  width:100%; height:100%; object-fit:cover; display:block;
}
.uc-noimg {
  color:var(--text-3);
  font-size:10px;
  font-style:italic;
}
.uc-info { min-width:0; }
.uc-time {
  font-size:13px;
  color:var(--text-2);
  font-weight:500;
  margin-bottom:2px;
}
.uc-dev {
  font-size:11px;
  color:var(--text-3);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.uc-tenant { color:var(--info); font-weight:500; }
.uc-weight { text-align:right; }
.uc-weight-val {
  font-size:15px;
  font-weight:600;
  color:var(--text-2);
  font-variant-numeric: tabular-nums;
}
.uc-weight-unit {
  font-size:10px;
  color:var(--text-3);
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.uc-action { text-align:right; }
.uc-assign-btn {
  white-space:nowrap;
}

.uc-empty {
  padding:30px 18px;
  text-align:center;
  color:var(--text-3);
  font-size:13px;
}
.uc-empty svg { color:var(--ok); }

.uc-pager {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  padding:8px 12px 12px;
}
.uc-pager-info { font-size:12px; color:var(--text-3); }

/* Atama drawer içi */
.uc-summary-panel {
  display:grid;
  grid-template-columns: 90px 1fr;
  gap:12px;
  padding:12px;
  background:var(--bg-inset);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  margin-bottom:14px;
}
.uc-summary-thumb {
  width:90px; height:90px;
  background:#000;
  border-radius:3px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.uc-summary-thumb img {
  width:100%; height:100%; object-fit:cover; display:block;
}
.uc-summary-thumb .uc-noimg {
  color:#888;
}
.uc-summary-grid {
  display:grid;
  grid-template-columns: auto 1fr;
  gap:4px 10px;
  align-items:center;
  font-size:12px;
}
.uc-summary-key {
  color:var(--text-3);
  font-size:11px;
}
.uc-summary-archive {
  word-break:break-all;
  font-size:11px;
}

.uc-flash {
  padding:8px 12px;
  border-radius:var(--r-sm);
  font-size:12px;
  margin-bottom:12px;
}
.uc-flash.is-ok {
  background:var(--ok-bg);
  color:var(--ok);
  border:1px solid var(--ok-bd);
}
.uc-flash.is-err {
  background:var(--err-bg);
  color:var(--err);
  border:1px solid var(--err-bd);
}
.uc-help {
  display:flex;
  align-items:flex-start;
  gap:6px;
  padding:8px 10px;
  background:var(--info-bg);
  border:1px solid var(--info-bd);
  border-radius:3px;
  font-size:11px;
  line-height:1.5;
  color:var(--text-2);
  margin-top:6px;
}
.uc-help svg { color:var(--info); flex-shrink:0; margin-top:1px; }
.uc-help code {
  background:var(--bg-elev);
  border:1px solid var(--border);
  padding:0 4px;
  border-radius:2px;
  font-size:10px;
}

/* Toast — body fixed bottom-right */
.uc-toast {
  position:fixed;
  bottom:24px;
  right:24px;
  padding:10px 16px;
  border-radius:6px;
  font-size:13px;
  font-weight:500;
  box-shadow:0 6px 18px rgba(0,0,0,0.18);
  opacity:0;
  transform:translateY(10px);
  transition:opacity 0.18s, transform 0.18s;
  z-index:9999;
  max-width:380px;
}
.uc-toast.is-show {
  opacity:1;
  transform:translateY(0);
}
.uc-toast.is-ok {
  background:var(--ok);
  color:#fff;
}
.uc-toast.is-err {
  background:var(--err);
  color:#fff;
}

@media (max-width: 720px) {
  .uc-row {
    grid-template-columns: 48px 1fr 90px;
    gap:8px;
  }
  .uc-action {
    grid-column: 1 / -1;
    text-align:left;
    padding-left:56px;
  }
  .uc-summary-panel {
    grid-template-columns: 1fr;
  }
  .uc-summary-thumb {
    width:100%; height:140px;
  }
}

/* --- Faz 49 — Sınıflandırma drawer redesign (HERO + chart + 2-col fields + lightbox) --- */
.drawer-wide .drawer-panel { width: 1080px; max-width: 100vw; }

.uc-body {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* HERO panel */
.uc-hero {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  padding: 14px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.uc-hero-thumb {
  width: 160px;
  height: 120px;
  background: #000;
  border-radius: var(--r-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.uc-hero-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.uc-hero-thumb .uc-noimg {
  color: #888; font-size: 11px; font-style: italic;
}
.uc-hero-info {
  display: flex; flex-direction: column;
  gap: 8px; min-width: 0;
}
.uc-hero-weight {
  font-size: 32px; line-height: 1.1;
  font-weight: 700;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.uc-hero-meta {
  display: flex; flex-direction: column;
  gap: 3px; margin-top: 2px;
}
.uc-meta-row {
  display: flex; gap: 10px;
  font-size: 12px; line-height: 1.45;
  align-items: baseline;
}
.uc-meta-key {
  color: var(--text-3);
  min-width: 68px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.uc-summary-archive { font-size: 11px; word-break: break-all; }

/* CHART panel */
.uc-chart-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.uc-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border);
  gap: 12px;
  flex-wrap: wrap;
}
.uc-chart-title {
  font-size: 13px; font-weight: 600; color: var(--text-2);
}
.uc-chart-sub {
  font-size: 11px; color: var(--text-3); margin-top: 2px;
}
.uc-chart-legend {
  display: flex; gap: 12px; align-items: center;
  font-size: 11px; color: var(--text-3);
}
.uc-chart-legend > span { display: inline-flex; align-items: center; }
.uc-legend-dot {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 50%; border: 2px solid #fff;
  margin-right: 4px;
}
.uc-legend-dot.anchor { background: #dc2626; }
.uc-legend-dot.image  { background: #3b82f6; }
.uc-legend-dot.stable { background: #22c55e; }
.uc-chart-wrap {
  position: relative;
  height: 220px;
  padding: 10px 12px 14px;
}
.uc-chart-wrap canvas { display: block; max-width: 100%; height: 100% !important; }
.uc-chart-loading,
.uc-chart-empty {
  position: absolute;
  inset: 10px 12px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  font-size: 12px;
  font-style: italic;
}

/* External tooltip (Faz 45 pattern) */
.uc-chart-tip {
  position: absolute;
  pointer-events: none;
  background: rgba(15,23,42,0.96);
  color: #fff;
  padding: 8px 10px;
  border-radius: 5px;
  font-size: 12px;
  line-height: 1.4;
  z-index: 70;
  opacity: 0;
  transition: opacity 0.12s;
  transform: translate(-50%, -100%) translateY(-12px);
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.uc-chart-tip.has-image { padding-bottom: 6px; }
.uc-chart-tip .tip-title { font-weight: 600; font-size: 11px; margin-bottom: 3px; opacity: 0.85; }
.uc-chart-tip .tip-body  { font-size: 12px; }
.uc-chart-tip .tip-thumb { display: block; width: 160px; height: auto; max-height: 120px; object-fit: cover; border-radius: 3px; border: 1px solid rgba(255,255,255,0.18); margin-top: 6px; background: #000; }
.uc-chart-tip .tip-hint  { font-size: 10px; opacity: 0.7; margin-top: 4px; text-align: center; }

/* Faz 49.7 — Sticky popover (click ile sabitlenmiş tooltip) */
.uc-chart-tip.is-sticky {
  pointer-events: auto;
  padding: 12px 14px 14px;
  max-width: 400px;
  z-index: 80;
  /* Hover transform (yukarı çıkar) sticky'de işe yaramaz — tip+resim 350px yüksekliğe çıkıyor.
     Sticky'de transform sıfır; JS pozisyonu mutlak hesaplar (alt veya üst clamp). */
  transform: none;
}
.uc-chart-wrap { overflow: visible; }  /* sticky chart üstüne taşabilsin */
.uc-chart-tip.is-sticky .tip-title { font-size: 12px; opacity: 1; padding-right: 22px; }
.uc-chart-tip.is-sticky .tip-body  { font-size: 13px; margin-bottom: 4px; }
.uc-chart-tip.is-sticky .tip-image {
  display: block;
  width: 360px;
  max-width: 100%;
  max-height: 280px;
  object-fit: contain;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.16);
  background: #000;
  margin-top: 8px;
}
.uc-chart-tip .tip-close {
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  border-radius: 50%;
  font-size: 14px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  transition: background 0.12s;
}
.uc-chart-tip .tip-close:hover { background: rgba(255,255,255,0.24); }

/* FIELDS — 2-col grid (plaka + firma yan yana, her biri %50 + full input) */
.uc-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.uc-fields-grid .fld { margin: 0; min-width: 0; }
.uc-fields-grid .cb-wrap { width: 100%; display: block; }
.uc-fields-grid .inp {
  width: 100%;
  box-sizing: border-box;
}

/* DRAWER HEAD — elit redesign (ikon + title + badge + sub) */
.uc-head { padding: 16px 20px; }
.uc-head-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.uc-head-icon {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--warn-bg);
  border: 1px solid var(--warn-bd);
  color: var(--warn);
  display: flex; align-items: center; justify-content: center;
}
.uc-head-text { min-width: 0; }
.uc-head-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.2;
}
.uc-head-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  background: var(--warn);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 3px;
  text-transform: uppercase;
}
.uc-head-sub {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 3px;
  font-family: var(--mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uc-head-x {
  width: 32px; height: 32px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.uc-head-x:hover { background: var(--bg-inset); color: var(--text); }

/* DRAWER HEAD — Tartım Detayı (uc-head paritesi, info+ok ton) */
.td-head { padding: 16px 20px; display: flex; align-items: flex-start; gap: 12px; }
.td-head-left {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.td-head-icon {
  width: 38px; height: 38px;
  flex-shrink: 0;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--info-bg);
  border: 1px solid var(--info-bd);
  color: var(--info);
  display: flex;
  align-items: center;
  justify-content: center;
}
.td-head-text {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.td-head-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.2;
  flex-wrap: wrap;
}
.td-head-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  background: var(--info);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 3px;
  text-transform: uppercase;
}
.td-head-badge-ok {
  background: var(--ok);
}
.td-head-badge svg { display: block; }
.td-head-sub {
  font-size: 12px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  line-height: 1.4;
}
.td-head-plaka {
  font-weight: 600;
  color: var(--text);
  padding: 1px 7px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 4px;
  letter-spacing: 0.02em;
  font-size: 12px;
}
.td-head-sep {
  color: var(--text-muted);
  font-size: 11px;
}
.td-head-id {
  font-size: 11px;
  color: var(--text-3);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.td-head-id-key {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.td-head-x {
  width: 32px; height: 32px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
  padding: 0;
}
.td-head-x:hover { background: var(--bg-inset); color: var(--text); }

@media (max-width: 640px) {
  .td-head-sep { display: none; }
  .td-head-sub { gap: 4px 12px; }
}

/* Tartım Bilgisi + Kayıt Bilgisi yan yana 2 kolon grid (≤720px tek kolon) */
.td-meta-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.td-meta-pair > .td-section { margin: 0; }
@media (max-width: 720px) {
  .td-meta-pair { grid-template-columns: 1fr; gap: 12px; }
}

/* GALERİ kart — chart altı resim listesi (Faz 45 sd-gallery pattern) */
.uc-gallery-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.uc-gallery-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border);
}
.uc-gallery-title {
  font-size: 13px; font-weight: 600; color: var(--text-2);
}
.uc-gallery-sub {
  font-size: 11px; color: var(--text-3); margin-top: 2px;
}
.uc-gallery-count {
  font-size: 11px;
  background: var(--info-bg);
  color: var(--info);
  border: 1px solid var(--info-bd);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}
.uc-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 6px;
  padding: 10px 12px 12px;
}
.uc-gallery-item {
  position: relative;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--bg-inset);
  transition: border-color 0.12s, transform 0.12s;
}
.uc-gallery-item:hover {
  border-color: var(--info);
  transform: translateY(-1px);
}
.uc-gallery-item img {
  width: 100%; height: 80px;
  object-fit: cover;
  display: block;
}
.uc-gallery-item .ug-meta {
  display: flex;
  justify-content: space-between;
  padding: 4px 6px;
  font-size: 10px;
  font-family: var(--mono);
  background: rgba(0,0,0,0.04);
  border-top: 1px solid var(--border-subtle);
}
.uc-gallery-item .ug-time { color: var(--text-3); }
.uc-gallery-item .ug-weight { color: var(--text-2); font-weight: 600; }
.uc-gallery-item.is-stable .ug-weight { color: var(--ok); }
.uc-gallery-empty {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 12px;
  font-style: italic;
  color: var(--text-3);
  padding: 14px 0;
}

/* LIGHTBOX overlay */
.uc-lightbox {
  position: fixed; inset: 0;
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
}
.uc-lightbox[hidden] { display: none; }
.uc-lightbox-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.82);
}
.uc-lightbox-frame {
  position: relative;
  max-width: 92vw;
  max-height: 92vh;
  display: flex; flex-direction: column;
  align-items: center;
}
.uc-lightbox-img {
  max-width: 92vw;
  max-height: 82vh;
  box-shadow: 0 10px 40px rgba(0,0,0,0.55);
  border-radius: 4px;
  background: #000;
}
.uc-lightbox-x {
  position: absolute;
  top: -38px; right: 0;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 0.12s;
}
.uc-lightbox-x:hover { background: rgba(255,255,255,0.22); }
.uc-lightbox-caption {
  color: #fff;
  font-size: 12px;
  font-family: var(--mono);
  margin-top: 10px;
  background: rgba(0,0,0,0.55);
  padding: 4px 10px;
  border-radius: 3px;
}

/* Responsive — drawer dar olunca hero ve fields stack */
@media (max-width: 900px) {
  .uc-hero { grid-template-columns: 1fr; }
  .uc-hero-thumb { width: 100%; height: 180px; }
  .uc-fields-grid { grid-template-columns: 1fr; }
}

/* --- Faz 46 combobox (atama drawer plaka/firma) — mobile/index.php pattern port */
.cb-wrap { position:relative; }
.cb-panel {
  position:absolute;
  top:calc(100% + 2px); left:0; right:0;
  background:var(--bg-surface);
  border:1px solid var(--border-strong);
  border-radius:var(--r-sm);
  max-height:240px;
  overflow-y:auto;
  z-index:120;
  box-shadow:0 6px 18px rgba(0,0,0,0.10);
}
.cb-panel[hidden] { display:none; }
.cb-opt {
  padding:8px 10px;
  font-size:13px;
  cursor:pointer;
  border-bottom:1px solid var(--border-subtle);
  color:var(--text-2);
  user-select:none;
}
.cb-opt:last-child { border-bottom:none; }
.cb-opt:hover,
.cb-opt.cb-active {
  background:var(--bg-inset);
}
.cb-opt.cb-new {
  color:var(--ok);
  font-weight:600;
  background:var(--ok-bg);
}
.cb-opt.cb-new:hover,
.cb-opt.cb-new.cb-active {
  background:var(--ok-bd);
}
.cb-sub {
  font-size:11px;
  color:var(--text-3);
  margin-top:2px;
  font-weight:400;
}
.cb-empty {
  padding:12px;
  font-size:12px;
  color:var(--text-3);
  font-style:italic;
  text-align:center;
}

/* ============================================================
   TUM OLCUMLER CARD LIST (Faz 40 — measurements + archive UNION)
   ============================================================ */
.to-toolbar {
  padding:12px 20px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap;
}
.to-toolbar .fld { min-width:140px; }
.to-toolbar .fld.to-detail-actions { min-width:90px; }
.to-summary {
  margin-left:auto;
  font-size:11px;
  color:var(--text-3);
  background:var(--bg-inset);
  padding:4px 10px;
  border-radius:var(--r-sm);
  border:1px solid var(--border);
  white-space:nowrap;
}
.to-pager {
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:14px 20px;
  border-top:1px solid var(--border);
}
.to-pager-info {
  font-size:12px;
  color:var(--text-3);
  font-variant-numeric:tabular-nums;
}
.to-list { display:flex; flex-direction:column; }
.to-list.to-loading { opacity:0.6; transition:opacity .15s; }
.to-row {
  display:grid;
  grid-template-columns: 70px 110px 1.4fr 1fr 0.9fr 0.9fr 0.9fr;
  gap:14px;
  align-items:center;
  padding:12px 20px;
  border-top:1px solid var(--border);
  transition:background 0.12s;
}
.to-row:hover { background:var(--bg-inset); }
.to-row:first-child { border-top:none; }

.to-type { display:flex; align-items:center; justify-content:flex-start; }

.to-time { min-width:0; }
.to-time-main {
  font-size:12px; color:var(--text-2);
  font-family:var(--mono);
}

.to-id { min-width:0; }
.to-plate { margin-bottom:3px; }
.to-firma {
  font-size:12px; color:var(--text-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.to-dev { min-width:0; }
.to-dev-code {
  font-size:13px; font-weight:500; color:var(--text);
  font-family:var(--mono);
}
.to-dev-tenant {
  font-size:11px; color:var(--text-muted);
  font-family:var(--mono); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.to-num { text-align:right; min-width:0; }
.to-num-key {
  font-size:10px; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:0.04em;
}
.to-num-val {
  font-size:14px; font-weight:600; color:var(--text);
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  margin-top:2px;
}
.to-num-net .to-num-val { color:var(--ok); }

.to-empty {
  padding:32px 24px; text-align:center;
  font-size:13px; color:var(--text-3);
}

@media (max-width:900px) {
  .to-row {
    grid-template-columns: 60px 1fr 0.9fr;
    gap:10px;
  }
  .to-row .to-time,
  .to-row .to-dev,
  .to-row .to-num-brut,
  .to-row .to-num-dara { display:none; }
}

/* ============================================================
   Faz 53.x — KantarCombobox (autocomplete + dropdown)
   Datalist replacement: stillenebilir, klavye nav, free text.
   Markup:
     <div class="kb-combobox" data-kb-combobox>
       <input class="kb-cb-input" ...>
       <button class="kb-cb-chevron" type="button" aria-label="Listeyi aç">
         <svg>chevron-down</svg>
       </button>
       <div class="kb-cb-panel" hidden>
         <ul class="kb-cb-list"></ul>
       </div>
     </div>
   ============================================================ */

.kb-combobox {
  position:relative;
  width:100%;
}

.kb-cb-input {
  width:100%; height:36px;
  padding:0 36px 0 10px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--bg-app);
  font-family:var(--font); font-size:13px;
  color:var(--text);
  transition:border-color 0.12s, box-shadow 0.12s;
  box-sizing:border-box;
}
.kb-cb-input:focus {
  outline:none;
  border-color:var(--c-9);
  box-shadow:0 0 0 3px rgba(15,23,42,0.06);
}
.kb-cb-input:disabled {
  background:var(--bg-inset);
  color:var(--text-muted);
  cursor:not-allowed;
}

.kb-cb-chevron {
  position:absolute;
  right:0; top:0;
  width:36px; height:36px;
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
  color:var(--text-muted);
  display:flex; align-items:center; justify-content:center;
  transition:color 0.12s, transform 0.18s ease-out;
  border-radius:0 6px 6px 0;
}
.kb-cb-chevron:hover {
  color:var(--text);
}
.kb-cb-chevron:focus-visible {
  outline:2px solid var(--c-9);
  outline-offset:-2px;
}
.kb-combobox.is-open .kb-cb-chevron {
  transform:rotate(180deg);
  color:var(--text);
}
.kb-cb-chevron svg {
  display:block;
}

.kb-cb-panel {
  position:absolute;
  top:calc(100% + 4px);
  left:0; right:0;
  background:var(--bg-surface);
  border:1px solid var(--border-strong);
  border-radius:6px;
  box-shadow:var(--shadow-pop);
  max-height:240px;
  overflow-y:auto;
  z-index:50;
  animation:kb-cb-fade-in 0.10s ease-out;
}
@keyframes kb-cb-fade-in {
  from { opacity:0; transform:translateY(-4px); }
  to   { opacity:1; transform:translateY(0);    }
}

.kb-cb-list {
  list-style:none;
  margin:0;
  padding:4px 0;
}

.kb-cb-item {
  padding:8px 12px 8px 10px;
  cursor:pointer;
  font-size:13px;
  color:var(--text);
  display:flex; align-items:center; gap:8px;
  font-family:var(--font);
  line-height:1.25;
  user-select:none;
}
.kb-cb-item:hover,
.kb-cb-item.is-active {
  background:var(--bg-inset);
}
.kb-cb-item-mark {
  width:3px; height:14px; border-radius:2px;
  background:transparent;
  flex-shrink:0;
  transition:background 0.12s;
}
.kb-cb-item.is-active .kb-cb-item-mark,
.kb-cb-item:hover .kb-cb-item-mark {
  background:var(--c-9);
}
.kb-cb-item-label {
  flex:1 1 auto;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.kb-cb-item-label .kb-cb-match {
  background:rgba(15,23,42,0.10);
  border-radius:2px;
  padding:0 1px;
}

.kb-cb-empty {
  padding:18px 12px 14px;
  font-size:12px;
  color:var(--text-muted);
  font-style:italic;
  text-align:center;
}

/* "Yeni X olarak ekle" — input value listede yoksa görünür */
.kb-cb-add {
  padding:9px 12px;
  cursor:pointer;
  font-size:13px;
  color:var(--ok);
  background:var(--ok-bg);
  border-top:1px solid var(--border-subtle);
  display:flex; align-items:center; gap:8px;
  font-family:var(--font);
  line-height:1.25;
  user-select:none;
}
.kb-cb-add:hover,
.kb-cb-add.is-active {
  background:var(--ok-bd);
}
.kb-cb-add-icon {
  flex-shrink:0;
  display:inline-flex;
  align-items:center; justify-content:center;
  width:16px; height:16px;
  border-radius:50%;
  background:var(--ok);
  color:#fff;
  font-size:11px;
  font-weight:700;
  line-height:1;
  font-family:var(--font);
}
.kb-cb-add-text {
  flex:1 1 auto;
  font-weight:500;
}
.kb-cb-add-text strong {
  font-family:var(--mono);
  font-weight:600;
  font-size:12.5px;
}
.kb-cb-add-hint {
  font-size:11px;
  color:var(--text-muted);
  font-style:italic;
}

/* Panel scrollbar — daha hafif görünüm */
.kb-cb-panel::-webkit-scrollbar { width:6px; }
.kb-cb-panel::-webkit-scrollbar-track { background:transparent; }
.kb-cb-panel::-webkit-scrollbar-thumb {
  background:var(--border-strong);
  border-radius:3px;
}
.kb-cb-panel::-webkit-scrollbar-thumb:hover {
  background:var(--text-muted);
}