/* uzay.com — 3D Karşılama Ekranı v5: "Ay Roverı" (tam responsive) */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    height: 100%;
    overflow: hidden;
    background: #0a0c1c;
    color: #e8ecff;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

#uzay-sahnesi {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
}

/* ---------- Yükleme ekranı ---------- */
#yukleniyor {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: #0a0c1c;
    transition: opacity .8s ease, visibility .8s;
}
#yukleniyor.bitti { opacity: 0; visibility: hidden; }
#yukleniyor p { letter-spacing: 3px; font-size: 13px; color: #8ea2ff; }
.yukleniyor-halka {
    width: 56px; height: 56px;
    border: 3px solid rgba(120,140,255,.2);
    border-top-color: #6d8bff;
    border-radius: 50%;
    animation: don 1s linear infinite;
}
@keyframes don { to { transform: rotate(360deg); } }

/* ---------- Sayfa geçiş efekti ---------- */
#gecis {
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    opacity: 0;
    background: #0a0c1c;
    transition: opacity .65s ease-in;
}
#gecis.aktif { opacity: 1; }

/* ---------- Üst bant ---------- */
.uzay-ust {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
}
.logo {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 6px;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 2px 12px rgba(0,0,0,.8);
}
.logo span { color: #6d8bff; }
.ust-sag { display: flex; align-items: center; gap: 14px; }
.hosgeldin { font-size: 13px; color: #aab6e8; }
.surum {
    font-family: "Arial Narrow", "Liberation Sans Narrow", Arial, sans-serif;
    font-stretch: condensed;
    font-size: 14px;
    color: #aab6e8;
    letter-spacing: 1px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
}
/* REKLAM ALINIR: 5 sn görünür + 10 sn kapalı = 15 sn'lik sonsuz döngü */
#reklam-yazi {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 4px;
    color: #ffc247;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
    opacity: 0;
    animation: reklam-dongu 15s linear infinite;
    pointer-events: none;
}
@keyframes reklam-dongu {
    0%     { opacity: 0; }
    2%     { opacity: 1; }  /* hızlıca belirir */
    31%    { opacity: 1; }  /* ~5 saniye görünür */
    33.33% { opacity: 0; }  /* söner */
    100%   { opacity: 0; }  /* 10 saniye kapalı */
}
@media (max-width: 640px) {
    #reklam-yazi { font-size: 11px; letter-spacing: 2px; }
}

/* ---------- Başlık: net, düz beyaz ---------- */
.uzay-baslik {
    position: fixed;
    top: 8%;
    left: 0; right: 0;
    z-index: 5;
    text-align: center;
    pointer-events: none;
}
.uzay-baslik h1 {
    font-size: clamp(24px, 4.2vw, 44px);
    font-weight: 800;
    letter-spacing: 3px;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .85);
}
.uzay-baslik p {
    margin-top: 8px;
    font-family: "Arial Narrow", "Liberation Sans Narrow", Arial, sans-serif;
    font-stretch: condensed;
    font-size: clamp(12px, 1.5vw, 15px);
    color: #c9d4f5;
    letter-spacing: 5px;
    text-transform: uppercase;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
}
/* ---------- Star Wars açılış yazısı (Güneş Sistemi — sağ üst) ---------- */
#sw-siir {
    position: fixed;
    top: 52px;
    right: 6px;
    width: min(600px, 55vw);
    height: min(560px, 64vh);
    z-index: 5;
    pointer-events: none;
    perspective: 380px; /* klasik jenerik perspektifi */
    overflow: hidden;
    display: none;
    /* Yazı yukarı aktıkça uzaya karışıp silinir */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 100%);
}
#sw-siir.aktif { display: block; }
.sw-kayan {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    transform-origin: 50% 100%;
    font-family: "Arial Narrow", "Liberation Sans Narrow", Arial, sans-serif;
    font-stretch: condensed;
    font-weight: 700;
    font-size: clamp(26px, 2.8vw, 42px);
    line-height: 1.55;
    letter-spacing: .5px;
    text-align: center;
    color: #FFE81F; /* Klasik Star Wars sarısı */
    text-shadow: 0 0 16px rgba(255, 232, 31, .3);
    animation: swKayan 36s linear infinite;
    will-change: transform;
}
.sw-kayan p { margin: 0 0 18px; }
@keyframes swKayan {
    /* Eğik düzlem boyunca yukarı akış: alttan büyük girer,
       yukarıda kaçış noktasına doğru küçülerek kaybolur */
    from { transform: rotateX(30deg) translateY(0); }
    to   { transform: rotateX(30deg) translateY(-380%); }
}
@media (max-width: 640px) {
    #sw-siir { top: 48px; right: 4px; width: 72vw; height: 46vh; }
    .sw-kayan { font-size: 20px; }
}

/* ---------- Klavye kontrol ipucu ---------- */
#kontrol-ipucu {
    position: fixed;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    text-align: center;
    pointer-events: none;
    transition: opacity .8s ease, visibility 0s linear .8s;
}
#kontrol-ipucu.gizli { opacity: 0; visibility: hidden; }
.tus-satir { display: flex; justify-content: center; gap: 6px; margin-bottom: 6px; }
#kontrol-ipucu kbd {
    display: inline-grid;
    place-items: center;
    width: 42px; height: 42px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: rgba(14, 18, 44, .7);
    border: 1px solid rgba(150, 168, 255, .4);
    border-bottom-width: 3px;
    border-radius: 9px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: tus-parla 2.6s ease-in-out infinite;
}
@keyframes tus-parla {
    0%, 100% { box-shadow: 0 2px 10px rgba(0,0,0,.4); }
    50%      { box-shadow: 0 2px 18px rgba(110, 135, 255, .5); }
}
#kontrol-ipucu p {
    margin-top: 8px;
    font-size: 12.5px;
    color: #97a4d8;
    text-shadow: 0 1px 5px rgba(0,0,0,.8);
}

/* ---------- Bölge giriş durumu ---------- */
#bolge-durum {
    --dr: #6d8bff;
    position: fixed;
    top: 24%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    z-index: 10;
    padding: 12px 30px;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    background: rgba(8, 11, 28, .85);
    border: 1.5px solid var(--dr);
    border-radius: 999px;
    box-shadow: 0 8px 30px rgba(0,0,0,.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
    pointer-events: none;
    white-space: nowrap;
}
#bolge-durum.gorunur { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* ---------- Bölge tabelaları (CSS2D — HTML, pixel-net) ---------- */
.bolge-etiket {
    pointer-events: auto;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 24px;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .4px;
    color: #ffffff;
    white-space: nowrap;
    background: rgba(7, 10, 26, .85);
    border: 1.5px solid var(--br, #6d8bff);
    border-radius: 999px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .55);
    transition: transform .2s ease;
    user-select: none;
    -webkit-user-select: none;
}
.bolge-etiket:hover, .bolge-etiket.vurgulu { transform: scale(1.12); }
.be-nokta {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--br, #6d8bff);
    box-shadow: 0 0 10px var(--br, #6d8bff);
}

/* ---------- Gezegen seçici (sol alt) ---------- */
#gezegen-secici {
    position: fixed;
    left: 22px;
    bottom: 26px;
    z-index: 12;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
#gezegen-secici button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: #cdd6f7;
    background: rgba(14, 18, 44, .6);
    border: 1px solid rgba(150, 168, 255, .3);
    border-radius: 999px;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform .2s, background .2s, box-shadow .2s, color .2s;
}
#gezegen-secici button:hover { transform: translateX(4px); color: #fff; background: rgba(24, 30, 70, .85); }
#gezegen-secici button.aktif {
    color: #fff;
    background: rgba(90, 108, 255, .35);
    border-color: rgba(150, 168, 255, .7);
    box-shadow: 0 0 18px rgba(110, 135, 255, .35);
}
#gezegen-secici .ayrac {
    height: 1px;
    margin: 3px 6px;
    background: rgba(150, 168, 255, .3);
}
/* Darya'ya özel buton: pembe, ışıltılı — çocuk oyununa götürür */
#gezegen-secici .darya-ozel {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, rgba(255, 95, 162, .5), rgba(164, 95, 255, .5));
    border: 1px solid rgba(255, 160, 220, .65);
    border-radius: 999px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 0 16px rgba(255, 120, 200, .35);
    transition: transform .2s, box-shadow .2s;
    animation: darya-isilti 2.4s ease-in-out infinite;
}
#gezegen-secici .darya-ozel:hover {
    transform: translateX(4px) scale(1.04);
    box-shadow: 0 0 26px rgba(255, 120, 200, .6);
}
@keyframes darya-isilti {
    0%, 100% { box-shadow: 0 0 14px rgba(255, 120, 200, .3); }
    50%      { box-shadow: 0 0 26px rgba(255, 140, 220, .6); }
}

/* ---------- Mobil joystick ---------- */
#joystick {
    display: none;
    position: fixed;
    left: 26px;
    bottom: 30px;
    z-index: 15;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: rgba(14, 18, 44, .45);
    border: 1.5px solid rgba(150, 168, 255, .35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    touch-action: none;
}
#joy-topuz {
    position: absolute;
    left: 50%; top: 50%;
    width: 52px; height: 52px;
    margin: -26px 0 0 -26px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 30%, #8fa3ff, #3b49c4 70%);
    box-shadow: 0 4px 14px rgba(0,0,0,.5), inset 0 0 10px rgba(255,255,255,.25);
}

/* ---------- Hızlı erişim bağlantıları (sağ alt) ---------- */
.hizli-nav {
    position: fixed;
    right: 92px;
    bottom: 30px;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(2, minmax(96px, 1fr));
    gap: 7px;
}
.hizli-nav a {
    font-size: 12.5px;
    font-weight: 600;
    color: #cdd6f7;
    text-decoration: none;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--hn, #6d8bff) 45%, transparent);
    background: rgba(10, 13, 32, .55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform .2s, background .2s;
    text-align: center;
}
.hizli-nav a:hover {
    transform: translateX(-4px);
    background: rgba(18, 23, 54, .85);
    color: #fff;
}

/* ---------- Fatih Uzay Savaşı HUD ---------- */
#savas-hud {
    position: fixed;
    inset: 0;
    z-index: 11;
    display: none;
    pointer-events: none;
}
#savas-hud.gorunur { display: block; }
.sv-panel {
    position: absolute;
    padding: 12px 20px;
    background: rgba(8, 11, 28, .6);
    border: 1px solid rgba(255, 210, 74, .35);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
}
/* Sol taraf: sarı puan toplamı */
.sv-sol { left: 22px; top: 30%; text-align: center; min-width: 120px; }
.sv-etiket {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 4px;
    color: #d9c07a;
}
.sv-deger {
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 800;
    line-height: 1.1;
    color: #ffd24a;
    text-shadow: 0 0 22px rgba(255, 210, 74, .55), 0 2px 8px rgba(0, 0, 0, .8);
    font-variant-numeric: tabular-nums;
}
.sv-can {
    margin-top: 4px;
    font-size: 17px;
    letter-spacing: 3px;
    color: #ff5f6d;
    text-shadow: 0 0 10px rgba(255, 95, 109, .5);
}
/* Sağ taraf: cephane sayaçları */
.sv-sag { right: 22px; top: 110px; display: flex; flex-direction: column; gap: 10px; }
.sv-cephane { display: flex; align-items: center; gap: 9px; }
.sv-ikon { font-size: 17px; }
.sv-sayi {
    min-width: 34px;
    text-align: right;
    font-size: 21px;
    font-weight: 800;
    color: #ffd24a;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 12px rgba(255, 210, 74, .4);
}
.sv-cephane.az .sv-sayi { color: #ff5f6d; text-shadow: 0 0 12px rgba(255, 95, 109, .5); }
.sv-mini { font-size: 10px; font-weight: 700; letter-spacing: 2px; color: #97a4d8; }
/* Alt ipucu (masaüstü) */
.sv-ipucu {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12.5px;
    font-weight: 600;
    color: #97a4d8;
    text-shadow: 0 1px 5px rgba(0, 0, 0, .8);
    white-space: nowrap;
}
/* Mobil ateş butonları (sağ orta — joystick ile birlikte kullanılır) */
.sv-mobil-butonlar {
    display: none;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    gap: 14px;
    pointer-events: auto;
}
.sv-mobil-butonlar button {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    font-size: 26px;
    background: rgba(255, 210, 74, .16);
    border: 1.5px solid rgba(255, 210, 74, .55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .45);
    touch-action: manipulation;
}
.sv-mobil-butonlar button:active { background: rgba(255, 210, 74, .4); }
/* Uçan sarı puan yazıları (3B sahnede CSS2D) */
.sv-puan-ucan {
    font-size: 20px;
    font-weight: 800;
    color: #ffd24a;
    text-shadow: 0 0 12px rgba(255, 210, 74, .7), 0 1px 4px rgba(0, 0, 0, .8);
    pointer-events: none;
    white-space: nowrap;
}
/* ---------- Uzay Nehri (Atari) piksel oyun ekranı ---------- */
#atari-ekran {
    position: fixed;
    inset: 0;
    z-index: 4;                 /* 3B tuvalin üstünde, başlık ve menülerin altında */
    display: none;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at 50% 40%, #0d0a20 0%, #05030d 70%);
    cursor: crosshair;
}
#atari-ekran.gorunur { display: flex; }
#atari-tuval {
    height: 100%;
    aspect-ratio: 160 / 210;
    image-rendering: crisp-edges;
    image-rendering: pixelated; /* retro piksel büyütme */
    box-shadow: 0 0 60px rgba(60, 70, 200, .25);
}
@media (max-aspect-ratio: 160/210) {
    #atari-tuval { width: 100%; height: auto; }
}

/* Nükleer bomba: ekranı yalayan beyaz flaş perdesi */
#sv-nuke-flas {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 45%, rgba(255,255,242,.95), rgba(255,220,150,.7) 55%, rgba(255,180,90,.35));
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s ease-out;
}
#sv-nuke-flas.aktif { opacity: 1; transition: opacity .08s ease-in; }

/* Oyun sonu ekranı */
#sv-son {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(4, 6, 16, .6);
    pointer-events: auto;
}
#sv-son.gorunur { display: flex; }
.sv-son-kutu {
    text-align: center;
    padding: 32px 48px;
    background: rgba(10, 13, 32, .93);
    border: 1.5px solid rgba(255, 210, 74, .5);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}
.sv-son-kutu h2 {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #fff;
}
.sv-son-kutu p { margin-top: 8px; font-size: 14px; color: #97a4d8; }
.sv-son-puan {
    margin: 16px 0 20px;
    font-size: 30px;
    font-weight: 800;
    color: #ffd24a;
    text-shadow: 0 0 20px rgba(255, 210, 74, .55);
    font-variant-numeric: tabular-nums;
}
#sv-tekrar {
    padding: 11px 30px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    color: #12151f;
    background: #ffd24a;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 0 24px rgba(255, 210, 74, .45);
    transition: transform .15s, box-shadow .15s;
}
#sv-tekrar:hover { transform: scale(1.06); box-shadow: 0 0 34px rgba(255, 210, 74, .65); }

/* ---------- Mobil uyum ---------- */
@media (max-width: 640px), (hover: none) and (pointer: coarse) {
    #kontrol-ipucu { display: none; }
    #joystick { display: block; }
    .sv-ipucu { display: none; }
    .sv-mobil-butonlar { display: flex; }
}
@media (max-width: 640px) {
    .uzay-ust { padding: 14px 16px; }
    .logo { font-size: 18px; letter-spacing: 4px; }
    .hosgeldin { display: none; }
    .uzay-baslik { top: 6.5%; }
    .uzay-baslik p { letter-spacing: 3px; }
    #gezegen-secici { left: 14px; bottom: 168px; }
    #gezegen-secici button { padding: 8px 13px; font-size: 12px; }
    #bolge-durum { top: 20%; font-size: 15px; padding: 10px 22px; }
    .bolge-etiket { font-size: 14px; padding: 8px 18px; }
    .sv-sol { left: 12px; top: 22%; min-width: 92px; padding: 10px 14px; }
    .sv-deger { font-size: 30px; }
    .sv-sag { right: 12px; top: 96px; padding: 10px 14px; gap: 7px; }
    .sv-sayi { font-size: 17px; }
    .sv-son-kutu { padding: 24px 30px; margin: 0 16px; }
    .hizli-nav { right: 14px; bottom: 166px; grid-template-columns: repeat(2, minmax(84px, 1fr)); }
    .hizli-nav a { font-size: 11.5px; padding: 6px 10px; }
}