/* ==========================================================
   DAPURUMUS: CINEMATIC GUIDED TOUR (PURE AUTO-READ)
   ========================================================== */

/* PERISAI MUTLAK: Memblokir SEMUA klik ke web, 100% aman */
#tutorial-shield {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 99990; cursor: default;
}

/* LAMPU SOROT: Menggelapkan layar dan melubangi target */
#tutorial-spotlight {
    position: fixed; /* 🔥 FIX MUTLAK UNTUK MOBILE SCROLL */
    border-radius: 6px;
    box-shadow: 0 0 0 9999px rgba(2, 6, 23, 0.85); 
    pointer-events: none; z-index: 99995;
    /* Hanya animasikan ukuran, posisi Top/Left diurus JS agar tidak delay (lag) */
    transition: width 0.3s ease, height 0.3s ease; 
}

/* KOTAK DIALOG PENJELASAN */
#tutorial-dialog {
    position: fixed; left: 50%; transform: translateX(-50%);
    width: 90%; max-width: 400px;
    background: #1e293b; border: 2px solid #3b82f6; border-radius: 12px;
    padding: 20px; color: #fff; z-index: 99999;
    box-shadow: 0 10px 40px rgba(0,0,0,0.9);
    display: flex; flex-direction: column; gap: 10px;
    transition: top 0.4s ease-in-out, bottom 0.4s ease-in-out; /* 🔥 Fitur Terbang Mulus */
}

.tut-title { font-weight: 900; color: #60a5fa; font-size: 1.2rem; border-bottom: 1px solid #334155; padding-bottom: 8px;}
.tut-desc { font-size: 0.85rem; line-height: 1.6; color: #e2e8f0; }
.tut-controls { display: flex; justify-content: space-between; margin-top: 15px; }

.tut-btn-skip { background: transparent; border: 1px solid #64748b; color: #94a3b8; padding: 8px 16px; border-radius: 6px; font-size: 0.75rem; font-weight: bold; cursor: pointer; }
.tut-btn-next { background: #3b82f6; border: none; color: #fff; padding: 8px 20px; border-radius: 6px; font-size: 0.8rem; font-weight: bold; cursor: pointer; box-shadow: 0 4px 15px rgba(59,130,246,0.4); }

/* TARGET YANG DISOROT */
.tutorial-active-target {
    position: relative;
    z-index: 99996 !important; /* Di atas cahaya, di bawah perisai */
    background: inherit;
    border-radius: 4px;
    box-shadow: 0 0 15px #3b82f6, 0 0 5px #fff; /* Cahaya aura biru */
}