/* AI assistant card — Figma: Tasarım sistemi › AI asistan kartı (248:6297)
   Desktop size 320 wide. On mobile the hero scales it with `zoom`. */

.ai-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 320px;
  padding: var(--space-16) 18px 18px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-floating);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-primary);
}

.ai-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}
.ai-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--color-brand-primary);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-inverse);
}
.ai-card__title { font-size: 15px; line-height: 1.3; font-weight: 600; letter-spacing: -0.002em; }
.ai-card__subtitle { font-size: 12px; line-height: 1.4; font-weight: 500; color: var(--color-text-secondary); }

/* Chat bubbles: the "tail" corner is the small 4 px radius */
.ai-card__question {
  align-self: flex-start;
  padding: 9px var(--space-12);
  border-radius: 12px 12px 4px 12px;
  background: var(--color-surface-canvas);
  white-space: nowrap;
}
.ai-card__answer {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-10) var(--space-12);
  border-radius: 12px 12px 12px 4px;
  background: var(--color-brand-tint);
}

.ai-card__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ai-card__row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-6) var(--space-10);
  border-radius: 8px;
  background: var(--color-surface-page);
  white-space: nowrap;
}
.ai-card__name { font-weight: 600; line-height: 1.3; }
.ai-card__score { font-size: 12px; line-height: 1.4; font-weight: 500; color: var(--color-text-secondary); }
.ai-card__score--top { color: var(--color-accent-recommended); }

.ai-card__actions {
  display: flex;
  gap: var(--space-6);
}
.ai-card__action {
  padding: var(--space-6) var(--space-10);
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-text-link);
  white-space: nowrap;
}