/* Tur pengenalan Simak Web (ui/tur.js). Warna ikut tema aplikasi lewat variabel di style.css. */
#tur { position: fixed; inset: 0; z-index: 9000; }
#tur[hidden] { display: none; }
#tur .tur-tirai { position: absolute; inset: 0; }
#tur .tur-sorot {
  position: absolute; pointer-events: auto; cursor: pointer;
  box-shadow: 0 0 0 3px rgb(255 255 255 / 0.9), 0 0 0 200vmax rgb(28 20 12 / 0.58);
  transition: left .38s cubic-bezier(.2,.8,.2,1), top .38s cubic-bezier(.2,.8,.2,1), width .38s cubic-bezier(.2,.8,.2,1), height .38s cubic-bezier(.2,.8,.2,1), border-radius .38s;
  animation: tur-denyut 1.8s ease-in-out infinite;
}
#tur .tur-sorot.tengah { box-shadow: 0 0 0 200vmax rgb(28 20 12 / 0.58); animation: none; cursor: default; }
@keyframes tur-denyut {
  0%, 100% { box-shadow: 0 0 0 3px rgb(255 255 255 / 0.9), 0 0 0 200vmax rgb(28 20 12 / 0.58); }
  50% { box-shadow: 0 0 0 7px rgb(255 255 255 / 0.55), 0 0 0 200vmax rgb(28 20 12 / 0.58); }
}
#tur .tur-kartu {
  position: absolute; width: min(360px, calc(100vw - 24px)); padding: 18px 18px 14px;
  background: var(--kartu); color: var(--teks); border-radius: 22px;
  box-shadow: 0 0 0 1px var(--garis), 0 24px 48px -18px rgb(0 0 0 / 0.5);
  transition: left .38s cubic-bezier(.2,.8,.2,1), top .38s cubic-bezier(.2,.8,.2,1);
}
#tur .tur-kartu.ganti { animation: tur-masuk .34s cubic-bezier(.2,1.3,.4,1); }
@keyframes tur-masuk { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
#tur.keluar .tur-kartu, #tur.keluar .tur-sorot { opacity: 0; transition: opacity .2s; }
#tur .tur-kepala { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
#tur .tur-moci { width: 58px; height: 54px; cursor: default; animation: tur-lompat 2.4s ease-in-out infinite; }
#tur .tur-moci svg { width: 100%; height: 100%; }
@keyframes tur-lompat { 0%, 70%, 100% { transform: none; } 78% { transform: translateY(-6px) rotate(-4deg); } 86% { transform: translateY(0) scale(1.04, .96); } }
#tur .tur-nomor { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--samar); text-transform: uppercase; }
#tur h2 { margin: 2px 0 0; font: 600 21px/1.2 Fredoka, var(--sans); }
#tur #tur-isi { margin: 0 0 12px; font-size: 15px; line-height: 1.5; color: var(--redup); }
#tur .tur-landing { display: inline-block; margin: -4px 0 12px; font-size: 14px; font-weight: 600; color: var(--aksen); }
#tur .tur-titik { display: flex; gap: 6px; margin-bottom: 12px; }
#tur .tur-titik i { width: 7px; height: 7px; border-radius: 4px; background: var(--garis-kuat); transition: width .3s, background .3s; }
#tur .tur-titik i.kini { width: 20px; background: var(--rekam); }
#tur .tur-aksi { display: flex; align-items: center; gap: 8px; }
#tur .tur-aksi .sp { flex: 1; }
#tur .tur-lewati { background: none; border: 0; padding: 8px 4px; color: var(--samar); font: inherit; font-size: 14px; cursor: pointer; }
#tur .tur-lewati:hover { color: var(--teks); }
#tur .tur-aksi .tombol[hidden], #tur .tur-lewati[hidden] { display: none; }
#ulang-tur { margin-left: 6px; }
@media (prefers-reduced-motion: reduce) {
  #tur .tur-sorot, #tur .tur-kartu { transition: none; animation: none; }
  #tur .tur-moci { animation: none; }
}