/* css/tour.css — js/tour.js ilk kullanım turu. Renkler sayfanın kendi değişkenlerinden (koyu/açık tema uyumlu). */
.tour-root { position: fixed; inset: 0; z-index: 9000; pointer-events: none; }
.tour-shield { position: absolute; inset: 0; pointer-events: auto; background: transparent; }
.tour-spot {
  position: absolute; border-radius: 10px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(8, 15, 30, .62), 0 0 0 2px var(--accent-primary, #2563eb);
  transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease;
}
.tour-spot[hidden] { display: none; }
.tour-root:has(.tour-spot[hidden]) .tour-shield { background: rgba(8, 15, 30, .62); }
.tour-card {
  position: absolute; pointer-events: auto; width: min(340px, calc(100vw - 16px));
  background: var(--bg-surface, #fff); color: var(--text-primary, #0f172a);
  border: 1px solid var(--border-color, #cbd5e1); border-radius: 12px; padding: 14px 16px 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .35); font-size: .92rem; line-height: 1.5;
}
.tour-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.tour-step { font-size: .75rem; font-weight: 700; color: var(--text-muted, #64748b); letter-spacing: .04em; }
.tour-x { background: none; border: 0; cursor: pointer; font-size: 1.3rem; line-height: 1; color: var(--text-secondary, #475569); padding: 2px 6px; border-radius: 6px; }
.tour-x:hover { background: var(--bg-surface-2, #f1f5f9); }
.tour-title { margin: 0 0 6px; font-size: 1.02rem; font-weight: 700; }
.tour-text { margin: 0 0 12px; color: var(--text-secondary, #334155); }
.tour-foot { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.tour-skip { margin-right: auto; background: none; border-color: transparent; color: var(--text-muted, #64748b); }
.tour-btn {
  font: inherit; font-weight: 600; cursor: pointer; padding: 6px 12px; border-radius: 8px;
  background: var(--bg-surface-2, #f1f5f9); color: var(--text-primary, #0f172a); border: 1px solid var(--border-color, #cbd5e1);
}
.tour-btn[hidden] { display: none; }
.tour-btn:hover { filter: brightness(.97); }
.tour-primary { background: var(--accent-primary, #2563eb); border-color: var(--accent-primary, #2563eb); color: #fff; }
.tour-btn:focus-visible, .tour-x:focus-visible { outline: 2px solid var(--accent-primary, #2563eb); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .tour-spot { transition: none; } }