/* ────────────────────────────────────────────────────────────────
   SkyraIrl — Kokpit Görünümü (deneysel, izole stil dosyası)
   Silmek için: bu dosyayı ve Simulation/Index.cshtml içindeki link'i kaldır.
   ──────────────────────────────────────────────────────────────── */

/* Mobile'da (<992px) kokpit DOM'da olsa bile asla görünmesin */
@media (max-width: 991.98px) {
    #cockpit-overlay { display: none !important; }
    #cockpit-toggle-btn { display: none !important; }
}

/* ── Overlay (kokpit PNG + windshield mask) ── */
#cockpit-overlay {
    position: fixed;
    inset: 45px 0 0 0;     /* üstten 45px boşluk — daha fazla gökyüzü görünsün */
    z-index: 40;          /* 3D canvas'ın üstü, modal'ların altı */
    pointer-events: none;  /* altındaki Three.js canvas etkileşimi çalışsın */
    background: url('/images/cosmic/bg-ship.png') center bottom / cover no-repeat;
    /* Üst windshield bölgesinden 3D sahne görünsün — kokpit alanları frame olarak kalsın.
       Görseldeki windshield kesiti yaklaşık %3-%30 (dikey) arası + yanlarda daralır. */
    -webkit-mask-image:
        linear-gradient(to bottom,
            rgba(0,0,0,0) 3%,
            rgba(0,0,0,0) 28%,
            rgba(0,0,0,1) 34%,
            rgba(0,0,0,1) 100%);
            mask-image:
        linear-gradient(to bottom,
            rgba(0,0,0,0) 3%,
            rgba(0,0,0,0) 28%,
            rgba(0,0,0,1) 34%,
            rgba(0,0,0,1) 100%);
}

/* ── İnteraktif SVG direksiyon (PNG'deki dümen üstüne yerleşir) ── */
#cockpit-wheel {
    position: absolute;
    left: 50%;
    bottom: 2%;
    width: 28vh;
    height: 28vh;
    max-width: 280px; max-height: 280px;
    min-width: 180px; min-height: 180px;
    transform-origin: 50% 50%;
    transform: translateX(-50%) rotate(0deg) scale(1);
    transition: transform .18s cubic-bezier(.4,.0,.2,1), filter .2s ease;
    pointer-events: none;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
    opacity: .95;
}
/* Yön göstergeleri — WASD'a göre wheel rotate + scale */
#cockpit-wheel.turn-left  { transform: translateX(-50%) rotate(-28deg); }
#cockpit-wheel.turn-right { transform: translateX(-50%) rotate( 28deg); }
#cockpit-wheel.thrust-fwd { transform: translateX(-50%) scale(.92) translateY(8px); filter: drop-shadow(0 2px 6px rgba(100,200,255,.5)) brightness(1.15); }
#cockpit-wheel.thrust-back{ transform: translateX(-50%) scale(1.05) translateY(-4px); filter: drop-shadow(0 2px 6px rgba(255,100,100,.45)); }
/* Kombinasyonlar */
#cockpit-wheel.turn-left.thrust-fwd  { transform: translateX(-50%) rotate(-28deg) scale(.92) translateY(8px); }
#cockpit-wheel.turn-right.thrust-fwd { transform: translateX(-50%) rotate( 28deg) scale(.92) translateY(8px); }
#cockpit-wheel.turn-left.thrust-back { transform: translateX(-50%) rotate(-28deg) scale(1.05) translateY(-4px); }
#cockpit-wheel.turn-right.thrust-back{ transform: translateX(-50%) rotate( 28deg) scale(1.05) translateY(-4px); }

/* ── Exit butonu (dümenin 200px sağı — kullanıcı CSS ile ince ayar yapacak) ── */
#cockpit-exit-btn {
    position: absolute;
    left: calc(50% + 130px);
    top:calc(78%);
    bottom: 12%;
    pointer-events: auto;
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, rgba(180,40,60,.92), rgba(120,20,40,.95));
    border: 1px solid rgba(255,120,140,.65);
    color: #fff;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(200,40,60,.45), 0 0 0 2px rgba(0,0,0,.25);
    transition: all .18s ease;
    z-index: 2;
}
#cockpit-exit-btn:hover {
    background: linear-gradient(180deg, rgba(220,60,80,1), rgba(150,30,50,1));
    transform: scale(1.08);
    box-shadow: 0 6px 20px rgba(220,50,70,.65), 0 0 0 2px rgba(0,0,0,.3);
}

/* ── Toggle butonu (alt-barın yanında) ── */
#cockpit-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(30,40,80,.6);
    border: 1px solid rgba(120,170,255,.35);
    color: rgba(200,220,255,.85);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: .78rem;
    cursor: pointer;
    transition: all .18s ease;
}
#cockpit-toggle-btn:hover {
    background: rgba(60,80,160,.6);
    border-color: rgba(150,190,255,.65);
    color: #fff;
}
#cockpit-toggle-btn.active {
    background: linear-gradient(90deg, rgba(100,60,200,.55), rgba(150,80,255,.45));
    border-color: rgba(200,150,255,.8);
    color: #fff;
    box-shadow: 0 0 14px rgba(150,80,255,.35);
}
#cockpit-toggle-btn .cpt-btn-icon { font-size: 1rem; }

/* ── WASD ipuçları (kokpit açıkken üstte kısa süre görünür) ── */
#cockpit-overlay:not(.sim-hidden) + #cockpit-hint,
#cockpit-hint {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 45;
    padding: 6px 14px;
    background: rgba(15,25,60,.85);
    border: 1px solid rgba(120,170,255,.4);
    border-radius: 999px;
    color: rgba(200,220,255,.9);
    font-size: .76rem;
    pointer-events: none;
    animation: cpt-hint-fade 5s ease-out forwards;
}
#cockpit-hint kbd {
    display: inline-block;
    padding: 1px 6px;
    background: rgba(80,130,255,.22);
    border: 1px solid rgba(120,170,255,.5);
    border-radius: 4px;
    font-family: monospace;
    font-size: .72rem;
    margin: 0 2px;
}
@keyframes cpt-hint-fade {
    0%, 70% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100%    { opacity: 0; transform: translateX(-50%) translateY(-8px); }
}

/* Mobilde hint de gizli */
@media (max-width: 991.98px) { #cockpit-hint { display: none !important; } }