/* ══════════════ GUIDE.CSS ══════════════ */

.nav-icon-btn--active { color: var(--purple) !important; background: rgba(167,139,250,.1); }

/* ── Hero ── */
.guide-hero {
  position: relative; min-height: 100dvh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
  padding: var(--nh) 24px 0;
}
.guide-orb-a { width: 480px; height: 480px; background: rgba(167,139,250,.2); top: -140px; left: -100px; }
.guide-orb-b { width: 360px; height: 360px; background: rgba(124,58,237,.16); top: -80px; right: -120px; }
.guide-hero-content { position: relative; z-index: 2; }

.guide-hero-title {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(40px, 7vw, 72px);
  letter-spacing: -.04em; line-height: 1.04; margin: 12px 0 18px;
}
.guide-hero-sub {
  font-size: 17px; color: var(--t-dim); max-width: 480px;
  line-height: 1.75; margin: 0 auto;
}
.guide-hero-scroll-hint {
  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: rgba(255,255,255,.35); z-index: 2;
  animation: hint-bob 2.2s ease-in-out infinite;
}
@keyframes hint-bob {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(6px); }
}

/* ══════════════════════════════════════
   SPOTLIGHT
   ══════════════════════════════════════ */

.sp-driver { position: relative; }

/* sticky viewport */
.sp-viewport {
  position: sticky; top: 0; height: 100dvh;
  overflow: hidden; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}

/* progress bar top */
.sp-progress {
  position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 30;
  background: rgba(167,139,250,.12);
}
.sp-progress::after {
  content: ''; display: block; height: 100%;
  background: linear-gradient(90deg, var(--purple), #7c3aed);
  width: var(--prog, 0%); transition: width .08s linear;
  box-shadow: 0 0 10px rgba(167,139,250,.6);
}

/* counter */
.sp-counter {
  position: absolute; bottom: 28px; right: 40px; z-index: 30;
  font-family: var(--display); font-size: 13px; color: rgba(255,255,255,.35);
  display: flex; align-items: center; gap: 4px;
}
#spCurrent { color: var(--purple); font-weight: 600; font-size: 15px; }
.sp-counter-sep { opacity: .3; }

/* dot nav */
.sp-dot-nav {
  position: absolute; right: 40px; top: 50%; transform: translateY(-50%);
  display: none; flex-direction: column; gap: 10px; z-index: 30;
}
.sp-dot {
  width: 6px; height: 6px; border-radius: 9999px;
  background: rgba(255,255,255,.18); cursor: pointer;
  border: none; transition: background .3s, height .3s;
}
.sp-dot.active { background: var(--purple); height: 20px; border-radius: 3px; }

/* ── Screen wrap — görsel ve overlay container ── */
.sp-screen-wrap {
  position: relative;
  width: min(62vw, 820px);
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(167,139,250,.2), 0 20px 60px rgba(0,0,0,.65);
  /* ortala — sağdaki annotation SS dışına taşar, overflow:visible */
  margin: 0 auto;
  flex-shrink: 0;
}

/* intro slide'da screen-wrap gizli */
.sp-screen-wrap.sp-hidden {
  opacity: 0;
  pointer-events: none;
}

/* ── Intro overlay — ilk adım blur+büyük yazı ── */
.sp-intro-overlay {
  position: absolute; inset: 0; z-index: 50;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  background: rgba(10, 7, 20, 0.72);
  transition: opacity .6s ease, visibility .6s ease;
  pointer-events: none;
}
.sp-intro-overlay.hidden {
  opacity: 0; visibility: hidden;
}
.sp-intro-label {
  font-size: 11px; font-weight: 600; letter-spacing: .28em;
  text-transform: uppercase; color: rgba(167,139,250,.75);
  margin-bottom: 20px;
}
.sp-intro-title {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(56px, 9vw, 120px);
  letter-spacing: -.05em; line-height: 1;
  color: #fff; margin-bottom: 18px;
}
.sp-intro-title span { color: var(--purple); }
.sp-intro-sub {
  font-size: 16px; color: rgba(255,255,255,.45);
  max-width: 380px; line-height: 1.7; margin-bottom: 36px;
}
.sp-intro-hint {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: rgba(255,255,255,.3);
  animation: hint-bob 2.2s ease-in-out infinite;
}
@keyframes hint-bob {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

.sp-img {
  display: block; width: 100%; height: auto;
  border-radius: 12px;
  transition: opacity .3s ease;
}

/* blur overlay */
.sp-blur {
  position: absolute; inset: 0; border-radius: 12px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  background: rgba(8, 5, 18, .52);
  transition: clip-path .72s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}

/* highlight dikdörtgen */
.sp-rect {
  position: absolute; border-radius: 6px;
  border: 2px solid rgba(167,139,250,.95);
  box-shadow: 0 0 0 3px rgba(167,139,250,.1), 0 0 22px rgba(167,139,250,.4);
  pointer-events: none;
  transition:
    top    .72s cubic-bezier(.4,0,.2,1),
    left   .72s cubic-bezier(.4,0,.2,1),
    width  .72s cubic-bezier(.4,0,.2,1),
    height .72s cubic-bezier(.4,0,.2,1);
}

/* annotation (ok + label) — relative to .sp-screen-wrap */
.sp-annotation {
  position: absolute;
  display: flex; align-items: center;
  pointer-events: none; z-index: 10;
  /* top/left set by JS — dikey ortalama için transform */
  transform: translateY(-50%);
  transition:
    top  .72s cubic-bezier(.4,0,.2,1),
    left .72s cubic-bezier(.4,0,.2,1),
    opacity .3s ease;
}

.sp-arrow-row {
  display: flex; align-items: center; flex-shrink: 0;
}
.sp-line {
  width: 48px; height: 1.5px;
  background: linear-gradient(90deg, rgba(167,139,250,.85), rgba(167,139,250,.45));
}
.sp-arrowhead { width: 8px; height: 14px; flex-shrink: 0; margin-left: -1px; }

.sp-label-box {
  background: rgba(10, 7, 22, 0.92);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(167,139,250,.3);
  border-radius: 10px; padding: 14px 18px;
  min-width: 210px; max-width: 260px;
  box-shadow: 0 8px 32px rgba(0,0,0,.55);
  margin-left: 2px;
}
.sp-label-title {
  font-family: var(--display); font-size: 14px; font-weight: 700;
  color: #fff; margin-bottom: 6px; letter-spacing: -.01em;
}
.sp-label-desc {
  font-size: 12px; color: rgba(255,255,255,.58); line-height: 1.65;
}

/* footer görününce alt progress bar gizle */
.footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 50;
  transform: translateY(100%);
  transition: transform .7s cubic-bezier(.16,1,.3,1);
}
.footer.footer-visible {
  transform: translateY(0);
}

/* ── Responsive ── */
@media (max-width: 900px) {

  .sp-viewport {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 64px 16px 60px;
  }

  .sp-screen-wrap {
    width: 96vw;
    margin: 0 auto;
  }

  /* Masaüstü annotation tamamen gizli */
  .sp-annotation { display: none !important; }

  /* Mobilde blur kaldır — clip-path mobil tarayıcıda güvenilmez */
  .sp-blur { display: none !important; }

  /* Highlight rect daha belirgin yap */
  .sp-rect {
    border-color: rgba(167,139,250,1);
    box-shadow: 0 0 0 9999px rgba(8,5,18,.55), 0 0 22px rgba(167,139,250,.5);
  }

  /* Mobil label kutusu görünür */
  .sp-mobile-label {
    display: block !important;
    opacity: 1 !important;
    width: 96vw;
  }

  .sp-dot-nav { display: none; }
  .sp-counter { right: 16px; bottom: 10px; }
}

@media (min-width: 901px) {
  .sp-mobile-label { display: none !important; }
}

/* Mobil label kutusu stili */
.sp-mobile-label {
  display: none;
  background: rgba(10, 7, 22, 0.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(167,139,250,.3);
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,.55);
  transition: opacity .3s ease;
}
.sp-mobile-label .sp-label-title {
  font-family: var(--display); font-size: 15px; font-weight: 700;
  color: #fff; margin-bottom: 6px; letter-spacing: -.01em;
}
.sp-mobile-label .sp-label-desc {
  font-size: 13px; color: rgba(255,255,255,.58); line-height: 1.65;
}