/* Dashboard mockup styles — used in hero and Ürün sayfası */

.dash-wrap { position: relative; }
.dash {
  background: var(--surface);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  animation: float-y 6s ease-in-out infinite;
}
[data-theme="dark"] .dash { box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.06); }

.dash-body {
  display: grid;
  grid-template-columns: 168px 1fr;
  min-height: 480px;
  background: var(--bg);
}

/* Sidebar */
.dash-side {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dash-side-brand { display: flex; align-items: center; gap: 8px; padding: 4px 6px 14px; }
.dash-side-section { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--text-soft); padding: 12px 8px 6px; }
.dash-side-section:first-of-type { padding-top: 4px; }
.dash-side-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: 8px; font-size: 11.5px;
  color: var(--text-muted); transition: background-color 0.15s, color 0.15s;
}
.dash-side-item:hover { background: var(--surface-tint); color: var(--text); }
.dash-side-item.is-active { background: var(--surface-tint); color: var(--text); font-weight: 600; }
.dash-side-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* Main area */
.dash-main { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dash-top { display: flex; justify-content: space-between; align-items: flex-start; }
.dash-crumb { font-size: 11px; color: var(--text-muted); }
.dash-crumb strong { color: var(--text); font-weight: 600; }
.dash-title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin-top: 2px; }
.dash-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 11px; font-weight: 600; color: var(--text-muted);
}

/* KPIs */
.dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dash-kpi {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px 9px; position: relative; overflow: hidden;
}
.dash-kpi-bar { position: absolute; top: 0; left: 0; right: 0; height: 2.5px; }
.dash-kpi-label { font-size: 10.5px; color: var(--text-muted); font-weight: 500; }
.dash-kpi-row { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.dash-kpi-value { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; font-feature-settings: "tnum"; }
.dash-kpi-delta { font-size: 10.5px; font-weight: 600; color: #22C55E; }

/* Charts */
.dash-charts { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; min-height: 0; }
.dash-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.dash-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.dash-card-title { font-size: 12px; font-weight: 600; }
.dash-card-sub { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }
.dash-tabs { display: flex; gap: 2px; padding: 2px; background: var(--bg); border-radius: 6px; }
.dash-tabs span { font-size: 10px; padding: 3px 7px; border-radius: 4px; color: var(--text-muted); }
.dash-tabs .is-on { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.dash-legend { display: flex; gap: 8px; font-size: 10px; color: var(--text-muted); }
.dash-legend span { display: inline-flex; align-items: center; gap: 4px; }
.dash-legend i { width: 8px; height: 8px; border-radius: 2px; }

.dash-chart-area { position: relative; height: 130px; color: var(--text-soft); }
.dash-chart-pop {
  position: absolute; top: 6px; right: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 10px; box-shadow: var(--sh-2);
  text-align: right;
}

/* Heatmap */
.dash-heat { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.dash-heat-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; flex: 1; }
.dash-heat-cell { border-radius: 4px; min-height: 14px; }
.dash-heat-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 6px; border-top: 1px dashed var(--border); }

/* Activity */
.dash-activity { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 6px 12px; }
.dash-act-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.dash-act-row:last-child { border-bottom: none; }
.dash-act-pill { font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: rgba(236, 72, 153, 0.12); color: #C026A6; letter-spacing: 0.04em; }
[data-theme="dark"] .dash-act-pill { background: rgba(236, 72, 153, 0.20); color: #F472B6; }
.dash-mod-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* Floating chips */
.dash-chip {
  position: absolute; z-index: 3;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 12px 8px 8px;
  box-shadow: var(--sh-3);
  display: flex; align-items: center; gap: 10px;
  animation: float-y 5s ease-in-out infinite;
}
.dash-chip-ai { left: -28px; top: 40%; animation-delay: -1.5s; }
.dash-chip-mod { right: -16px; bottom: 18%; animation-delay: -3s; padding: 8px 12px; }
.dash-chip-icon { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; }

@media (max-width: 1100px) {
  .dash-charts { grid-template-columns: 1fr; }
  .dash-body { grid-template-columns: 140px 1fr; min-height: 0; }
  .dash-chip { display: none; }
}
@media (max-width: 640px) {
  .dash-kpis { grid-template-columns: repeat(2, 1fr); }
}