/* Demo REHBERLİ YOLCULUK — sabit koç paneli (2026-08-03).
   position:fixed + max-width + safe-area → ASLA taşmaz/kaymaz/üst-üste binmez. */

.tmj {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(12px);
  width: min(560px, calc(100vw - 28px));
  max-height: min(46vh, 340px);
  overflow: auto;
  background: #fff;
  color: #0f172a;
  border: 1px solid #e6edf6;
  border-radius: 16px;
  box-shadow: 0 22px 60px rgba(15, 23, 42, .28);
  padding: 16px 18px 14px;
  z-index: 2147483000; /* her overlay üstünde ama < native alert */
  opacity: 0;
  transition: opacity .28s ease, transform .28s ease;
  -webkit-tap-highlight-color: transparent;
}
.tmj.is-in { opacity: 1; transform: translateX(-50%) translateY(0); }
.tmj[hidden] { display: none; }

.tmj__x {
  position: absolute; top: 8px; right: 10px;
  width: 28px; height: 28px; border: 0; border-radius: 8px;
  background: transparent; color: #94a3b8; font-size: 20px; line-height: 1; cursor: pointer;
}
.tmj__x:hover { background: #f1f5f9; color: #475569; }

.tmj__dots { display: flex; gap: 6px; margin: 2px 30px 12px 0; }
.tmj__dot { width: 8px; height: 8px; border-radius: 50%; background: #e2e8f0; transition: background .2s, transform .2s; }
.tmj__dot.is-done { background: #93c5b6; }
.tmj__dot.is-on { background: linear-gradient(135deg, #1366e5, #f97316); transform: scale(1.35); }

.tmj__row { display: flex; gap: 12px; align-items: flex-start; }
.tmj__ic {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  background: rgba(1, 117, 228, .09);
}
.tmj__main { min-width: 0; }
.tmj__title { font-weight: 800; font-size: 1.02rem; color: #0f172a; margin-bottom: 4px; }
.tmj__text { color: #475569; font-size: .93rem; line-height: 1.5; }
.tmj__text b { color: #0f172a; }

.tmj__actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.tmj__spacer { flex: 1 1 auto; }
.tmj__actions button { border-radius: 9px; font-weight: 700; font-size: .9rem; cursor: pointer; padding: 9px 14px; border: 1px solid transparent; }
.tmj__skip { background: transparent; color: #64748b; padding: 9px 6px !important; }
.tmj__skip:hover { color: #334155; }
.tmj__prev { background: #f1f5f9; color: #334155; }
.tmj__prev:hover { background: #e2e8f0; }
.tmj__next { background: linear-gradient(135deg, #1366e5, #f97316); color: #fff; }
.tmj__next:hover { background: linear-gradient(135deg, #1058c8, #ea6a12); }

/* Yumuşak vurgu — hedef elemanın kendisine outline+pulse (taşan tooltip YOK). */
.tm-journey-spot {
  position: relative;
  outline: 3px solid rgba(19, 102, 229, .85) !important;
  outline-offset: 3px;
  border-radius: 10px;
  box-shadow: 0 0 0 6px rgba(19, 102, 229, .16) !important;
  animation: tmjPulse 1.8s ease-in-out infinite;
  scroll-margin: 120px;
}
@keyframes tmjPulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(19, 102, 229, .16); }
  50% { box-shadow: 0 0 0 10px rgba(249, 115, 22, .18); }
}

/* Mobil: tam-genişlik alt-sheet */
@media (max-width: 600px) {
  .tmj {
    left: 8px; right: 8px; bottom: max(10px, env(safe-area-inset-bottom, 0px));
    width: auto; transform: translateY(12px); border-radius: 16px 16px 12px 12px;
    max-height: 56vh;
  }
  .tmj.is-in { transform: translateY(0); }
  .tmj__actions { flex-wrap: wrap; }
  .tmj__next, .tmj__prev { flex: 1 1 auto; text-align: center; }
}

/* Hesap alt-nav'ı olan mobil sayfalarda panel onun üstünde kalsın */
body:has(#accountNavigation) .tmj {
  bottom: calc(var(--account-mobile-bottom-nav-height, 72px) + env(safe-area-inset-bottom, 0px) + 10px);
}

/* ---- Spotlight: sayfayı karart, hedefe odakla (dikkat çekici) ---- */
.tmj-spot {
  position: fixed;
  z-index: 2147482900; /* panel'in altında, içeriğin üstünde */
  border-radius: 12px;
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, .55), 0 0 0 3px rgba(19, 102, 229, .95);
  transition: top .22s ease, left .22s ease, width .22s ease, height .22s ease;
  animation: tmjSpotPulse 1.8s ease-in-out infinite;
}
.tmj-spot[hidden] { display: none; }
@keyframes tmjSpotPulse {
  0%, 100% { box-shadow: 0 0 0 9999px rgba(15, 23, 42, .55), 0 0 0 3px rgba(19, 102, 229, .95); }
  50%      { box-shadow: 0 0 0 9999px rgba(15, 23, 42, .50), 0 0 0 7px rgba(249, 115, 22, .55); }
}

/* ---- Adım animasyonlu mini-görseli ---- */
.tmj__viz {
  height: 54px; margin: 2px 0 12px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(135deg, rgba(19, 102, 229, .07), rgba(249, 115, 22, .07));
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
/* bars — yükselen kâr çubukları */
.tmj__viz--bars i { width: 9px; height: 26px; border-radius: 3px; background: linear-gradient(180deg, #3b82f6, #1366e5); transform-origin: bottom; animation: tmjBars 1.4s ease-in-out infinite; }
.tmj__viz--bars i:nth-child(2){animation-delay:.12s} .tmj__viz--bars i:nth-child(3){animation-delay:.24s}
.tmj__viz--bars i:nth-child(4){animation-delay:.36s} .tmj__viz--bars i:nth-child(5){animation-delay:.48s}
@keyframes tmjBars { 0%,100%{transform:scaleY(.35)} 50%{transform:scaleY(1)} }
/* cart — ürünler sepete akıyor */
.tmj__viz--cart .vi { width: 16px; height: 16px; border-radius: 4px; background: linear-gradient(135deg,#1366e5,#3b82f6); animation: tmjFly 1.8s ease-in-out infinite; }
.tmj__viz--cart .vi:nth-child(2){animation-delay:.3s} .tmj__viz--cart .vi:nth-child(3){animation-delay:.6s}
.tmj__viz--cart .vc { font-size: 22px; }
@keyframes tmjFly { 0%{transform:translateX(0) scale(1);opacity:1} 60%{transform:translateX(26px) scale(.4);opacity:.2} 60.1%{opacity:0} 100%{transform:translateX(0);opacity:1} }
/* plug — XML bağlan */
.tmj__viz--plug .pl,.tmj__viz--plug .pr { font-size: 20px; animation: tmjNudge 1.4s ease-in-out infinite; }
.tmj__viz--plug .pr { animation-direction: reverse; }
.tmj__viz--plug .sp { width: 10px; height: 10px; border-radius: 50%; background: #f97316; animation: tmjSpark 1.4s ease-in-out infinite; }
@keyframes tmjNudge { 0%,100%{transform:translateX(0)} 50%{transform:translateX(4px)} }
@keyframes tmjSpark { 0%,100%{transform:scale(.4);opacity:.3} 50%{transform:scale(1.1);opacity:1} }
/* sync — dönen senkron + ilerleme */
.tmj__viz--sync .sy { font-size: 22px; animation: tmjSpin 1.8s linear infinite; }
.tmj__viz--sync .pg { width: 90px; height: 8px; border-radius: 999px; background: #dbe7fb; overflow: hidden; }
.tmj__viz--sync .pg i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg,#1366e5,#f97316); transform-origin: left; animation: tmjProg 2.2s ease-in-out infinite; }
@keyframes tmjSpin { to { transform: rotate(360deg); } }
@keyframes tmjProg { 0%{transform:scaleX(0)} 60%{transform:scaleX(1)} 100%{transform:scaleX(1)} }
/* toggle — kaynak aç/kapat */
.tmj__viz--toggle .tg { width: 34px; height: 19px; border-radius: 999px; background: #cbd5e1; position: relative; animation: tmjTgBg 2s ease-in-out infinite; }
.tmj__viz--toggle .tg::after { content:''; position:absolute; top:2px; left:2px; width:15px; height:15px; border-radius:50%; background:#fff; animation: tmjTg 2s ease-in-out infinite; }
.tmj__viz--toggle .tg:nth-child(2)::after,.tmj__viz--toggle .tg:nth-child(2){animation-delay:.3s}
.tmj__viz--toggle .tg:nth-child(3)::after,.tmj__viz--toggle .tg:nth-child(3){animation-delay:.6s}
@keyframes tmjTg { 0%,100%{left:2px} 50%{left:17px} }
@keyframes tmjTgBg { 0%,100%{background:#cbd5e1} 50%{background:#16a34a} }
/* pulse — canlı nabız + yükselen çizgi */
.tmj__viz--pulse .pd { width: 12px; height: 12px; border-radius: 50%; background: #16a34a; animation: tmjLive 1.4s ease-in-out infinite; }
.tmj__viz--pulse .pl2 { width: 90px; height: 3px; border-radius: 999px; background: linear-gradient(90deg,#16a34a,#1366e5,#f97316); background-size: 200% 100%; animation: tmjSlide 1.8s linear infinite; }
@keyframes tmjLive { 0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,.5)} 70%{box-shadow:0 0 0 8px rgba(22,163,74,0)} }
@keyframes tmjSlide { to { background-position: 200% 0; } }
/* list — sipariş satırları */
.tmj__viz--list u { display: block; width: 120px; height: 8px; border-radius: 4px; background: linear-gradient(90deg,#1366e5,#93c5fd); opacity: 0; animation: tmjRow 2.1s ease-in-out infinite; }
.tmj__viz--list { flex-direction: column; gap: 5px; }
.tmj__viz--list u:nth-child(2){animation-delay:.25s;width:100px} .tmj__viz--list u:nth-child(3){animation-delay:.5s;width:80px}
@keyframes tmjRow { 0%{opacity:0;transform:translateX(-14px)} 30%,80%{opacity:1;transform:translateX(0)} 100%{opacity:0;transform:translateX(-14px)} }

@media (prefers-reduced-motion: reduce) {
  .tmj { transition: none; }
  .tm-journey-spot, .tmj-spot { animation: none; }
  .tmj__viz * { animation: none !important; }
}