/* galaxy-voyage.css — Uzay Mekiği kokpiti + HUD
   [VOYAGE] Kaldırmak için: bu dosya + js/simulation/galaxy-voyage.js +
   Simulation/Index.cshtml içindeki [VOYAGE] blokları. Palet, mevcut kokpitle
   uyumlu: #0a0e15 / #1a2030 zemin, #4a90c8 camgöbeği vurgu. */

/* ── Mekik butonu (alt bar) ── */
.sim-voyage-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .42rem .9rem;
    border-radius: 999px;
    border: 1px solid rgba(99, 222, 255, .35);
    background: linear-gradient(135deg, rgba(20, 30, 48, .9), rgba(10, 16, 28, .9));
    color: #9fd8ff;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .18s, color .18s, transform .18s;
}
.sim-voyage-btn:hover {
    border-color: rgba(99, 222, 255, .8);
    color: #d8f2ff;
    transform: translateY(-1px);
}
.sim-voyage-btn .sim-mico svg { width: 15px; height: 15px; display: block; }

/* ── Uçuş modunda gözlemevi UI'sini gizle ── */
body.gv-active .sim-bottom-bar,
body.gv-active .sim-ctrl-fab,
body.gv-active .sim-info-wrapper,
body.gv-active .iss-widget,
body.gv-active #sim-tooltip,
body.gv-active #cockpit-toggle-btn { display: none !important; }

/* ── Kök overlay ── */
#gv-root {
    position: fixed;
    inset: 0;
    z-index: 2000; /* nav/footer üstünde — kokpit tam ekran sarar */
    pointer-events: none;
    overflow: hidden;
}
#gv-root.sim-hidden { display: none; }

#gv-hud {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* ── Kokpit görseli (ön camı şeffaf PNG) ──
   Konum ve ölçek galaxy-voyage.js'te hesaplanır: cam merkezi ekran merkezine
   hizalanır (crosshair/nişan ekran ortası olduğu için şart). */
#gv-cockpit-img {
    position: absolute;
    max-width: none;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* ── Çıkış butonu ── */
#gv-exit-btn {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 107, 122, .5);
    background: rgba(14, 19, 29, .85);
    color: #ff8a97;
    font-size: 1rem;
    cursor: pointer;
    pointer-events: auto;
    transition: background .15s, transform .15s;
}
#gv-exit-btn:hover { background: rgba(60, 22, 30, .9); transform: scale(1.06); }

/* ── Yardım kartı ── */
#gv-help {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-width: 330px;
    padding: 18px 22px;
    border-radius: 14px;
    border: 1px solid rgba(99, 222, 255, .3);
    background: rgba(8, 12, 20, .88);
    backdrop-filter: blur(6px);
    color: #cfe6f7;
    font-size: .86rem;
    line-height: 1.9;
    pointer-events: auto;
}
#gv-help.sim-hidden { display: none; }
#gv-help h4 {
    margin: 0 0 10px;
    font-size: .95rem;
    color: #9fd8ff;
    letter-spacing: .06em;
}
#gv-help kbd {
    display: inline-block;
    min-width: 26px;
    padding: 1px 7px;
    margin-right: 4px;
    border-radius: 5px;
    border: 1px solid rgba(99, 222, 255, .4);
    background: #131a28;
    color: #d8f2ff;
    font-size: .78rem;
    text-align: center;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .5);
}
#gv-help .gv-help-warp {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(99, 222, 255, .25);
    color: #cbb8ff;
}
#gv-help .gv-help-note { color: #7e9ab2; font-size: .76rem; }

/* ── Toast ── */
#gv-toast {
    position: absolute;
    top: 88px;
    left: 50%;
    transform: translateX(-50%);
    max-width: min(560px, 84vw);
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(99, 222, 255, .35);
    background: rgba(8, 12, 20, .9);
    color: #d8f2ff;
    font-size: .85rem;
    text-align: center;
    animation: gvToastIn .25s ease;
}
#gv-toast.sim-hidden { display: none; }
@keyframes gvToastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Çarpışma: sarsıntı + kırmızı vinyet ── */
@keyframes gvShake {
    0%   { transform: translate(0, 0); }
    15%  { transform: translate(-9px, 5px); }
    30%  { transform: translate(8px, -6px); }
    45%  { transform: translate(-6px, -4px); }
    60%  { transform: translate(5px, 4px); }
    75%  { transform: translate(-3px, 2px); }
    100% { transform: translate(0, 0); }
}
#gv-root.gv-shake-on #gv-cockpit-img,
#gv-root.gv-shake-on #gv-hud {
    animation: gvShake .45s ease-out;
}
#gv-dmg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(ellipse at center, transparent 42%, rgba(255, 30, 20, .45) 100%);
    transition: opacity .35s ease-out;
}
#gv-dmg.gv-dmg-on { opacity: 1; transition: none; }

/* ── Uçuş raporu kartı ── */
#gv-over {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(3, 6, 12, .55);
    backdrop-filter: blur(3px);
    pointer-events: auto;
}
#gv-over.sim-hidden { display: none; }
.gv-over-card {
    min-width: 340px;
    max-width: 92vw;
    padding: 26px 30px;
    border-radius: 16px;
    border: 1px solid rgba(99, 222, 255, .35);
    background: linear-gradient(160deg, rgba(16, 22, 36, .97), rgba(8, 12, 20, .97));
    color: #cfe6f7;
    text-align: center;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .6);
}
.gv-over-card h3 {
    margin: 0 0 18px;
    font-size: 1.15rem;
    letter-spacing: .08em;
    color: #d8f2ff;
}
.gv-over-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 18px;
    margin-bottom: 16px;
}
.gv-over-grid > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 8px;
    border-radius: 10px;
    background: rgba(99, 222, 255, .06);
    border: 1px solid rgba(99, 222, 255, .14);
}
.gv-over-grid span { font-size: .72rem; color: #7e9ab2; letter-spacing: .05em; }
.gv-over-grid strong { font-size: 1.35rem; color: #ffd66a; }
.gv-over-award {
    min-height: 1.4em;
    margin-bottom: 16px;
    font-size: .86rem;
    color: #b9a4ff;
}
.gv-over-btns { display: flex; gap: 10px; justify-content: center; }
.gv-over-btns button {
    padding: .55rem 1.2rem;
    border-radius: 999px;
    font-size: .86rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(99, 222, 255, .4);
    background: linear-gradient(135deg, #6a3fff 0%, #23c4d8 100%);
    color: #fff;
    transition: transform .15s, filter .15s;
}
.gv-over-btns button:hover { transform: translateY(-1px); filter: brightness(1.12); }
.gv-over-btns #gv-quit-btn {
    background: rgba(14, 19, 29, .9);
    color: #9fd8ff;
}

/* ── Warp çıkış flaşı ── */
#gv-flash {
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity .45s ease-out;
}
#gv-flash.gv-flash-on { opacity: .85; transition: none; }

/* Açık temada sim canvas'ı invert edilir (theme.css) — kokpit overlay DOM'da
   olduğundan etkilenmez; koyu iskelet her iki temada da doğru görünür. */