/* trAltyazıHub Analitik Panel — ekteki tasarımın stilleri (app.js ile birlikte) */

:root {
  --bg: #eef1f8;
  --header-bg: rgba(238, 241, 248, .8);
  --card: rgba(255, 255, 255, .72);
  --card-border: rgba(15, 23, 42, .08);
  --ink: #0f172a;
  --ink2: #55637f;
  --ink3: #94a3b8;
  --accent: #6366f1;
  --cyan: #0891b2;
  --amber: #d97706;
  --rose: #e11d48;
  --good: #059669;
  --bad: #e11d48;
  --chip: rgba(15, 23, 42, .05);
  --glow1: rgba(99, 102, 241, .18);
  --glow2: rgba(6, 182, 212, .16);
  --glow3: rgba(168, 85, 247, .14);
  color-scheme: light;
}

html.dark {
  --bg: #070b18;
  --header-bg: rgba(7, 11, 24, .72);
  --card: rgba(255, 255, 255, .055);
  --card-border: rgba(255, 255, 255, .09);
  --ink: #e7ecf8;
  --ink2: #9aa5c0;
  --ink3: #64708f;
  --accent: #818cf8;
  --cyan: #22d3ee;
  --amber: #fbbf24;
  --rose: #fb7185;
  --good: #34d399;
  --bad: #fb7185;
  --chip: rgba(255, 255, 255, .06);
  --glow1: rgba(99, 102, 241, .25);
  --glow2: rgba(6, 182, 212, .18);
  --glow3: rgba(168, 85, 247, .2);
  color-scheme: dark;
}

* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  transition: background .35s ease, color .35s ease;
}

.tabular { font-variant-numeric: tabular-nums; }

/* ---------- Dekor arka plan ---------- */
.blob { position: absolute; border-radius: 9999px; filter: blur(90px); opacity: .8; transition: background .5s ease; }
.b1 { width: 520px; height: 520px; top: -160px; left: -120px; background: radial-gradient(circle, var(--glow1), transparent 65%); animation: floaty 16s ease-in-out infinite; }
.b2 { width: 460px; height: 460px; top: 20%; right: -160px; background: radial-gradient(circle, var(--glow2), transparent 65%); animation: floaty 20s ease-in-out infinite reverse; }
.b3 { width: 420px; height: 420px; bottom: -180px; left: 32%; background: radial-gradient(circle, var(--glow3), transparent 65%); animation: floaty 24s ease-in-out infinite; }
@keyframes floaty {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(24px, -30px) scale(1.06); }
}

/* ---------- Cam kartlar ---------- */
.glass {
  background: var(--card);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 1.25rem;
  box-shadow: 0 10px 34px rgba(2, 6, 23, .07);
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.glass-header {
  background: var(--header-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--card-border);
  transition: background .35s ease, border-color .35s ease;
}

.muted { color: var(--ink2); }
.faint { color: var(--ink3); }

/* ---------- Form / çip ---------- */
.inp {
  background: var(--chip);
  border: 1px solid var(--card-border);
  color: var(--ink);
  border-radius: .75rem;
  font-size: .8rem;
  font-weight: 500;
  padding: .5rem .65rem;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.inp:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.inp:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--card-border)); }

.seg-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .8rem;
  border-radius: .8rem;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink2);
  border: 1px solid transparent;
  background: var(--chip);
  transition: all .2s ease;
  user-select: none;
}
.seg-btn:hover { color: var(--ink); border-color: var(--card-border); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  font-size: .72rem;
  font-weight: 700;
  padding: .22rem .55rem;
  border-radius: 9999px;
  white-space: nowrap;
}
.chip-good { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.chip-bad { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
.chip-neu { background: var(--chip); color: var(--ink3); }

.icon-tile { width: 2.7rem; height: 2.7rem; border-radius: .9rem; display: grid; place-items: center; flex-shrink: 0; }
.ic-indigo { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.ic-cyan { background: color-mix(in srgb, var(--cyan) 15%, transparent); color: var(--cyan); }
.ic-amber { background: color-mix(in srgb, var(--amber) 15%, transparent); color: var(--amber); }
.ic-rose { background: color-mix(in srgb, var(--rose) 15%, transparent); color: var(--rose); }

.kpi-value { font-size: clamp(1.45rem, 2.2vw, 1.7rem); font-weight: 800; letter-spacing: -.02em; }

/* ---------- Canlı nokta ---------- */
.live-dot { position: relative; width: .55rem; height: .55rem; border-radius: 9999px; background: #34d399; display: inline-block; flex-shrink: 0; }
.live-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 9999px;
  border: 2px solid #34d399;
  opacity: .6;
  animation: ping 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes ping {
  0% { transform: scale(.5); opacity: .7; }
  80%, 100% { transform: scale(1.9); opacity: 0; }
}

/* ---------- Tablo ---------- */
.table-wrap { border-radius: 0 0 1.25rem 1.25rem; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .82rem; }
.tbl thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  backdrop-filter: blur(10px);
  text-align: left;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink3);
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--card-border);
  white-space: nowrap;
}
.tbl tbody td {
  padding: .62rem .9rem;
  border-bottom: 1px solid color-mix(in srgb, var(--card-border) 60%, transparent);
  vertical-align: middle;
}
.tbl tbody tr { transition: background .15s ease; }
.tbl tbody tr:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.tbl tbody tr:last-child td { border-bottom: none; }

.scroll-thin::-webkit-scrollbar { height: 8px; width: 8px; }
.scroll-thin::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink3) 35%, transparent); border-radius: 99px; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }

.fade-up { animation: fadeUp .55s cubic-bezier(.22, .9, .35, 1) both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.theme-switch {
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .8rem;
  display: grid;
  place-items: center;
  background: var(--chip);
  border: 1px solid var(--card-border);
  cursor: pointer;
  color: var(--ink2);
  transition: all .2s ease;
}
.theme-switch:hover { color: var(--accent); border-color: var(--accent); transform: rotate(12deg); }

canvas { max-width: 100%; }

/* Tailwind CDN .hidden'ı güvenilir üretmediği için attribute tabanlı gizleme */
[hidden] { display: none !important; }