/* Tutorial Spotlight Sistemi */
#tutorialOverlay {
    pointer-events: all; /* Her şeyi engelle — tutorial öndedir */
}
#tutorialOverlay .tutorial-card,
#tutorialOverlay button {
    pointer-events: all;
}
.tutorial-spotlight {
    position: absolute;
    border-radius: 10px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.88);
    border: 2px solid rgba(99,102,241,0.9);
    transition: top 0.18s cubic-bezier(.4,0,.2,1),
                left 0.18s cubic-bezier(.4,0,.2,1),
                width 0.18s cubic-bezier(.4,0,.2,1),
                height 0.18s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}
.tutorial-card {
    position: fixed;
    background: linear-gradient(135deg,#1e293b,#0f172a);
    border: 1px solid rgba(99,102,241,0.55);
    border-radius: 14px;
    padding: 16px 18px;
    max-width: 300px;
    width: calc(100vw - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0,0,0,0.65);
    transition: top 0.28s cubic-bezier(.4,0,.2,1), left 0.28s cubic-bezier(.4,0,.2,1);
    z-index: 100001;
}

/* Tüm ekranlarda sade öğretici: sadece başlık + geri/ileri */
.tutorial-card > div:first-child,
#tutorialDesc {
    display: none !important;
}

#tutorialTitle {
    margin-bottom: 0.7rem;
}

@media (max-width: 768px) {
    .tutorial-card {
        /* Ekrana yayılan ince alt bant */
        left: 8px !important;
        right: 8px !important;
        bottom: calc(58px + env(safe-area-inset-bottom)) !important;
        top: auto !important;
        transform: none !important;
        width: calc(100vw - 16px) !important;
        max-width: none !important;
        padding: 9px 12px !important;
        border-radius: 11px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
    }
    .tutorial-captain-avatar { display: none !important; }
    #tutorialStepNum         { display: none !important; }
    #tutorialDesc            { display: none !important; }
    #tutorialTitle {
        font-size: 0.72rem !important;
        margin-bottom: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    .tutorial-card .flex.gap-2.justify-end {
        flex-shrink: 0 !important;
        margin-left: auto !important;
        gap: 4px !important;
    }
    #tutorialNext, #tutorialPrev {
        font-size: 0.62rem !important;
        padding: 0.28rem 0.55rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    #tutorialSkip {
        font-size: 0.62rem !important;
        flex-shrink: 0 !important;
    }
}
.tutorial-captain-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg,#312e81,#1e3a5f);
    border: 2px solid rgba(99,102,241,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
/* Tutorial aktifken footer kendi stacking context oluşturmasın */
body.tutorial-active footer {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 1 !important;
}
#btnTutorial {
    background: rgba(99,102,241,0.18);
    border: 1px solid rgba(99,102,241,0.4);
    color: #a5b4fc;
    border-radius: 8px;
    padding: 0.3rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}
#btnTutorial:hover {
    background: rgba(99,102,241,0.35);
}

/* ===== YÜKLEME EKRANI ===== */
#loadingScreen {
    position: fixed; inset: 0; z-index: 99999;
    background: linear-gradient(135deg, #0f172a 0%, #0c1a36 50%, #0f172a 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: opacity 0.6s ease; gap: 0;
}
#loadingScreen.fade-out { opacity: 0; pointer-events: none; }
#loadingScreen.hidden { display: none; }
.loading-logo-wrap {
    width: 110px; height: 110px; border-radius: 50%;
    border: 3px solid rgba(99,102,241,0.6);
    box-shadow: 0 0 40px rgba(99,102,241,0.35), 0 0 80px rgba(59,130,246,0.15);
    overflow: hidden; margin-bottom: 22px;
    animation: loadingPulse 2.5s ease-in-out infinite;
}
.loading-logo-wrap img { width: 100%; height: 100%; object-fit: cover; }
.loading-title {
    font-family: 'Sora', sans-serif; font-size: 1.55rem; font-weight: 800;
    background: linear-gradient(90deg, #818cf8, #60a5fa, #34d399);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    margin-bottom: 6px; letter-spacing: 0.02em;
}
.loading-subtitle {
    font-size: 0.78rem; color: #94a3b8; margin-bottom: 32px; letter-spacing: 0.08em; text-transform: uppercase;
}
.loading-bar-track {
    width: 320px; max-width: 85vw; height: 6px;
    background: rgba(255,255,255,0.07); border-radius: 999px;
    overflow: hidden; margin-bottom: 14px;
}
.loading-bar-fill {
    height: 100%; width: 0%; border-radius: 999px;
    background: linear-gradient(90deg, #3b82f6, #6366f1, #8b5cf6);
    transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 0 10px rgba(99,102,241,0.7);
}
.loading-status {
    font-size: 0.73rem; color: #64748b; min-height: 18px; letter-spacing: 0.04em;
}
.loading-dots span {
    display: inline-block; animation: dotBlink 1.2s infinite;
}
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }
/* ===== YÜKLEME EKRANI BİTİŞ ===== */