/* "Nasıl kullanılır?" turu (tour.js). Konum değerleri JS'ten özel değişken olarak gelir. */
.tour-btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 8px 14px;
  font: 600 14px var(--font-ui); color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 99px; cursor: pointer;
}
.tour-btn:hover { border-color: var(--signal); }
.tour-btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.tour-btn .tour-q {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--mark); color: #0f1b2d; font-size: 13px; font-weight: 700;
}

.tour-layer[hidden] { display: none; }
.tour-layer { position: fixed; inset: 0; z-index: 9000; }
.tour-dim { position: absolute; inset: 0; }
.tour-spot {
  position: fixed; left: var(--x, 0); top: var(--y, 0); width: var(--w, 0); height: var(--h, 0);
  border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 100vmax rgba(8, 12, 22, .62);
  outline: 2px solid var(--mark); outline-offset: 0;
  transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease;
}
.tour-spot[hidden] { display: none; }
.tour-layer.no-target .tour-dim { background: rgba(8, 12, 22, .62); }
.tour-card {
  position: fixed; left: var(--cx, 10px); top: var(--cy, 10px); width: min(360px, calc(100vw - 20px));
  box-sizing: border-box; padding: 16px 18px 14px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgba(8, 12, 22, .35);
  transition: left .25s ease, top .25s ease;
}
.tour-title { margin: 0 28px 6px 0; font-size: 16px; letter-spacing: -.01em; }
.tour-body { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tour-count { font: 600 13px var(--font-file); color: var(--muted); }
.tour-nav { display: flex; gap: 8px; }
.tour-close {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border: 0; border-radius: 8px;
  background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer;
}
.tour-close:hover { background: var(--paper); color: var(--ink); }
.tour-close:focus-visible, .tour-card button:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
html.tour-on { scroll-padding: 120px 0; }
@media (prefers-reduced-motion: reduce) { .tour-spot, .tour-card { transition: none; } }