/* Reklamtron Control Center — endüstriyel tema */

.cc {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: #0c1222;
  color: #e2e8f0;
}

/* Üst sağlık barı */
.health-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  height: 52px;
  background: #111827;
  border-bottom: 1px solid #1e293b;
  flex-shrink: 0;
  z-index: 100;
}
.hb-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  color: #94a3b8;
  flex-shrink: 0;
}
.hb-metrics {
  display: flex;
  gap: 6px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.hb-metrics::-webkit-scrollbar { display: none; }
.hb-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
  padding: 4px 10px;
  background: #1e293b;
  border-radius: 6px;
  border: 1px solid #334155;
}
.hb-metric.risk .hb-val { color: #f87171; }
.hb-metric.risk.alert { border-color: #ef4444; animation: pulse-risk 1.2s infinite; }
.hb-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: .06em; color: #64748b; }
.hb-val { font-size: 0.85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.hb-val.ok { color: #4ade80; }
.hb-user { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

@keyframes pulse-risk {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.4); }
  50% { box-shadow: 0 0 0 4px rgba(239,68,68,.15); }
}

/* Shield banner */
.shield-banner {
  background: linear-gradient(90deg, #7f1d1d, #991b1b);
  color: #fecaca;
  padding: 10px 16px;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
  animation: shield-in .3s ease;
}
@keyframes shield-in {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Layout */
.cc-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  padding-bottom: 120px;
}
.cc-nav {
  width: 200px;
  flex-shrink: 0;
  background: #111827;
  border-right: 1px solid #1e293b;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cc-nav-item {
  height: 40px;
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #94a3b8;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.cc-nav-item.active {
  background: #1e3a5f;
  color: #60a5fa;
}
.cc-main {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  min-width: 0;
}
.cc-view-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}
.cc-view-head h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #f1f5f9;
}

/* Hesap kartları */
.account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.device-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .15s;
  position: relative;
  overflow: hidden;
}
.device-card:hover {
  border-color: #3b82f6;
  box-shadow: 0 4px 20px rgba(59,130,246,.12);
}
.device-card.status-green { border-left: 3px solid #22c55e; }
.device-card.status-yellow { border-left: 3px solid #eab308; }
.device-card.status-red { border-left: 3px solid #ef4444; }
.device-card.status-gray { border-left: 3px solid #64748b; }
.device-card.shield-shake {
  animation: card-shake .5s ease;
  border-color: #ef4444 !important;
}
@keyframes card-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
.device-card.connecting { opacity: .75; }
.device-card.connecting::after {
  content: "Connecting…";
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #60a5fa;
  font-size: 0.9rem;
}
.device-card.connected-flash::after {
  content: "Connected ✓";
  position: absolute;
  inset: 0;
  background: rgba(22,101,52,.9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #bbf7d0;
  animation: fade-out 1.5s forwards;
}
@keyframes fade-out {
  0% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; pointer-events: none; }
}

.dc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.dc-avatar {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  color: #fff;
  flex-shrink: 0;
}
.dc-name { font-weight: 700; font-size: 0.95rem; margin: 0; }
.dc-phone { font-size: 0.75rem; color: #94a3b8; margin: 2px 0 0; }
.dc-status {
  margin-left: auto;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}
.dc-status.green { background: rgba(34,197,94,.2); color: #4ade80; }
.dc-status.yellow { background: rgba(234,179,8,.2); color: #facc15; }
.dc-status.red { background: rgba(239,68,68,.2); color: #f87171; }
.dc-status.gray { background: rgba(100,116,139,.2); color: #94a3b8; }

.dc-row {
  font-size: 0.78rem;
  color: #94a3b8;
  margin: 4px 0;
  display: flex;
  gap: 6px;
}
.dc-row strong { color: #cbd5e1; font-weight: 600; min-width: 72px; }
.dc-last {
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.link-wizard { margin-bottom: 8px; }
.link-steps {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.link-step {
  font-size: 0.68rem;
  padding: 4px 8px;
  border-radius: 999px;
  background: #1e293b;
  color: #64748b;
  border: 1px solid #334155;
}
.link-step.active { background: #312e81; color: #c7d2fe; border-color: #6366f1; }
.link-step.done { background: #14532d; color: #86efac; border-color: #22c55e; }
.link-warn {
  font-size: 0.78rem;
  color: #fbbf24;
  background: rgba(251,191,36,.08);
  border: 1px solid rgba(251,191,36,.25);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 12px;
}
.link-ok-banner {
  font-size: 0.78rem;
  color: #4ade80;
  background: rgba(74,222,128,.08);
  border: 1px solid rgba(74,222,128,.25);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 12px;
}
.hint.link-ok { color: #4ade80; }
.hint.link-err { color: #f87171; }
.worker-block.hidden { display: none; }
.fp-mono { font-family: ui-monospace, monospace; font-size: 0.78rem; }

.iso-block { margin-bottom: 14px; }
.iso-title { font-size: 0.78rem; font-weight: 600; color: #94a3b8; margin: 0 0 6px; }
.iso-badge { font-size: 0.68rem; color: #4ade80; font-weight: 500; }
.iso-pre {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.75rem;
  line-height: 1.5;
  margin: 0;
  white-space: pre-wrap;
  font-family: ui-monospace, monospace;
}
.dc-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.dc-btn {
  flex: 1;
  min-width: 0;
  height: 30px;
  border: 1px solid #475569;
  border-radius: 6px;
  background: #0f172a;
  color: #e2e8f0;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
}
.dc-btn:hover { border-color: #60a5fa; color: #60a5fa; }
.dc-actions { pointer-events: auto; }
.cc-nav-item, .btn, .dc-btn, .dtab { cursor: pointer; }

/* Panel blocks */
.panel-block {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
}
.proxy-grid { display: flex; flex-direction: column; gap: 8px; }
.proxy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 8px;
  font-size: 0.85rem;
}
.forensic-list { max-height: 60vh; overflow-y: auto; }
.forensic-item {
  padding: 10px 0;
  border-bottom: 1px solid #334155;
  font-size: 0.8rem;
}
.forensic-item:last-child { border-bottom: none; }
.fi-type { font-size: 0.68rem; font-weight: 700; color: #64748b; text-transform: uppercase; }
.fi-msg { color: #e2e8f0; margin: 4px 0; }
.fi-meta { color: #64748b; font-size: 0.72rem; }

/* Canlı akış alt panel */
.live-feed-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background: #111827;
  border-top: 1px solid #1e293b;
  max-height: 110px;
}
.lf-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  font-size: 0.78rem;
  border-bottom: 1px solid #1e293b;
}
.lf-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  animation: blink 1.5s infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}
.lf-sub { margin-left: auto; color: #64748b; }
.lf-stream {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 8px 16px;
  scrollbar-width: thin;
}
.lf-item {
  flex-shrink: 0;
  min-width: 220px;
  max-width: 320px;
  padding: 8px 12px;
  background: #1e293b;
  border-radius: 8px;
  border-left: 3px solid #3b82f6;
  font-size: 0.75rem;
}
.lf-item.critical { border-left-color: #ef4444; }
.lf-item .lf-time { color: #64748b; font-size: 0.68rem; }

/* Sağ drawer */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 200;
}
.account-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(420px, 100vw);
  height: 100dvh;
  background: #111827;
  border-left: 1px solid #1e293b;
  z-index: 210;
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform .25s ease;
  box-shadow: -8px 0 32px rgba(0,0,0,.4);
}
.account-drawer.hidden { transform: translateX(100%); pointer-events: none; }
.drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid #1e293b;
}
.drawer-head h3 { margin: 0; font-size: 1rem; }
.drawer-sub { margin: 4px 0 0; font-size: 0.78rem; color: #64748b; }
.drawer-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid #1e293b;
}
.dtab {
  flex: 1;
  height: 32px;
  border: 1px solid #334155;
  border-radius: 6px;
  background: transparent;
  color: #94a3b8;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}
.dtab.active { background: #1e3a5f; border-color: #3b82f6; color: #93c5fd; }
.drawer-body { flex: 1; overflow-y: auto; padding: 12px; }
.dtab-panel.hidden { display: none; }

.dialog-list { display: flex; flex-direction: column; gap: 4px; }
.dialog-item {
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
}
.dialog-item:hover { background: #1e293b; border-color: #334155; }
.dialog-item.active { background: #1e3a5f; border-color: #3b82f6; }
.di-title { font-weight: 600; font-size: 0.88rem; }
.di-preview { font-size: 0.75rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-compose { margin-top: 12px; padding-top: 12px; border-top: 1px solid #334155; }

.drawer-actions { display: flex; flex-direction: column; gap: 8px; }
.drawer-actions .btn { width: 100%; }

.triplet-panel pre {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 10px;
  font-size: 0.75rem;
  overflow-x: auto;
  color: #94a3b8;
}

/* Mobil */
@media (max-width: 768px) {
  .cc-nav { width: 72px; padding: 8px 4px; }
  .cc-nav-item { font-size: 0.62rem; padding: 0 4px; text-align: center; line-height: 1.2; height: auto; min-height: 44px; }
  .hb-brand span { display: none; }
  .account-grid { grid-template-columns: 1fr; }
}

/* Login dark uyum */
.login-screen { background: linear-gradient(135deg, #0c1222, #1e293b); }
.login-card { background: #1e293b; border-color: #334155; color: #e2e8f0; }
.login-head h2 { color: #f1f5f9; }
.inp { background: #0f172a; border-color: #334155; color: #e2e8f0; }
.inp-label { color: #94a3b8; }
.btn-ghost { color: #94a3b8; border-color: #334155; }