/* Temel sayfa stilleri */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif; /* 2D ile uyumlu */
  overflow: hidden;
  margin: 0;
  background-color: #000;
}

/* Three.js konteyneri - Tam ekran kaplar */
#three-js-container {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0; /* Arka planda kalır */
    touch-action: none;
}

/* Canvas elementi - Responsive davranış */
#three-js-container canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Üst bilgi (başlık) stilleri */
.overlay-content {
    position: relative;
    z-index: 1; /* Three.js içeriğinin üstünde görünür */
    pointer-events: none; /* Tıklamaları Three.js'e geçirir */
}

/* Üst bilgi içindeki elemanlar tıklanabilir olmalı */
.overlay-content * {
    pointer-events: auto;
}

/* Gezegen/yıldız etiketleri */
.label {
    color: white;
    font-size: 0.8rem;
    position: absolute;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    pointer-events: none; /* Etiketler tıklamayı engellemez */
}

/* Bilgi paneli (alt kısım) */
.info-panel {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    padding: 1rem 2rem;
    border-radius: 8px;
    color: white;
    z-index: 10; /* Diğer içeriklerin üstünde */
    display: none; /* Varsayılan olarak gizli */
}

/* Yıldız animasyonu için ekstra stil (isteğe bağlı) */
.star-glow {
    filter: drop-shadow(0 0 10px rgba(255, 255, 100, 0.8));
    animation: pulse 2s infinite alternate;
}

@keyframes pulse {
    from { opacity: 0.8; }
    to { opacity: 1; }
}

/* Sol alt mod anahtarı kapsayıcı */
.toggle-wrap {
  position: fixed;
  bottom: 16px; left: 16px; z-index: 10020;
  display: flex; align-items: center; gap: 10px;
}

/* Switch kutusu (cam efektli) */
.toggle-switcher {
  width: 64px; height: 32px; position: relative;
  border-radius: 999px;
  background: rgba(17,25,40,0.55);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 3px 10px rgba(0,0,0,0.35);
}

/* Input gizli */
.toggle-input { position: absolute; inset: 0; opacity: 0; }

/* Etkileşim yüzeyi */
.toggle-label {
  position: absolute; inset: 0; border-radius: 999px;
  cursor: pointer;
  transition: background 240ms ease, box-shadow 240ms ease;
}

/* Knob */
.toggle-label::before {
  content: "";
  position: absolute; top: 3px; left: 3px;
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(180deg, #fff, #dfe6ee);
  box-shadow: 0 2px 8px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.05);
  transition: transform 240ms cubic-bezier(.2,.65,.25,1);
}

/* Knob içi yazı (3D/2D) */
.toggle-label::after {
  content: "3D";
  position: absolute; top: 50%; left: 7px;
  transform: translateY(-50%);
  font: 700 11px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #222;
  transition: transform 240ms cubic-bezier(.2,.65,.25,1), left 240ms ease, content 0s linear;
}

/* Aktif (2D) durum */
.toggle-input:checked + .toggle-label {
  background: linear-gradient(90deg, rgba(68,166,255,.18), rgba(90,220,255,.12));
  box-shadow: 0 0 0 3px rgba(90,200,255,.12);
}
.toggle-input:checked + .toggle-label::before {
  transform: translateX(32px);
}
.toggle-input:checked + .toggle-label::after {
  content: "2D";
  left: 39px;
}

/* Metin (2D Sistem) – aktifken vurgulu */
.toggle-text {
  color: #e5e7eb;
  font: 600 13px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  letter-spacing: .2px;
  opacity: .9;
  transition: color 200ms ease, opacity 200ms ease, text-shadow 200ms ease;
}
.toggle-input:checked ~ .toggle-text {
  color: #b7e7ff;
  text-shadow: 0 0 10px rgba(90, 200, 255, .35);
  opacity: 1;
}

/* Hover küçük parıltı */
.toggle-wrap:hover .toggle-switcher {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 6px 14px rgba(0,0,0,0.4);
}

/* Hareket hassasiyeti */
@media (prefers-reduced-motion: reduce) {
  .toggle-label, .toggle-label::before, .toggle-label::after { transition: none !important; }
}

/* Sol–üst köşe konumlu açıklama paneli */
.desc-panel {
  display: none;                 /* JS seçince block yapıyor */
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  left: calc(max(16px, env(safe-area-inset-left, 0px)) + 48px + var(--desc-shift, 0px));
  width: 30%;                    /* istersen 28–32% arası oynat */
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10000;

  /* planet-info tarzı görünüm */
  background-color: rgb(0, 0, 35);                 /* JS dinamik temayı yine basar */
  padding: 20px;
  border: 1px solid #888;
  box-shadow: 0 0 10px 3px rgba(255,255,0,0.5);
  color: #fff;
  font-family: Arial, sans-serif;
  border-radius: 0;
}


/* Açılış animasyonlu bilgi paneli */
.desc-panel {
  /* mevcut stillerin yanında animasyon başlangıç halleri */
  opacity: 0;
  transform: translate(-8px, -8px) scale(0.98);
  clip-path: inset(0 100% 0 0 round 0); /* soldan sağa reveal */
  transition:
    opacity 300ms cubic-bezier(.2,.65,.25,1),
    transform 360ms cubic-bezier(.2,.65,.25,1),
    clip-path 420ms cubic-bezier(.2,.65,.25,1);
  will-change: opacity, transform, clip-path, box-shadow;
  pointer-events: none;
  position: fixed; /* zaten fixed ama garanti */
}

/* Açıldığında hedef durum */
.desc-panel.open {
  opacity: 1;
  transform: translate(0, 0) scale(1);
  clip-path: inset(0 0 0 0 round 0);
  pointer-events: auto;
}

/* Açılışta camın üstünde ışık süpürme efekti */
.desc-panel::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 45%,
    rgba(255,255,255,0) 60%);
  transform: translateX(-120%);
  opacity: 0;
  pointer-events: none;
}
.desc-panel.open::after {
  animation: panel-sweep 900ms ease 120ms both;
}
@keyframes panel-sweep {
  0%   { transform: translateX(-120%); opacity: 0; }
  35%  { opacity: .85; }
  100% { transform: translateX(120%); opacity: 0; }
}

/* Hareket hassasiyeti olan kullanıcılar için animasyonları kapat */
@media (prefers-reduced-motion: reduce) {
  .desc-panel { transition: none; clip-path: none; transform: none; opacity: 1; }
  .desc-panel::after { display: none; }
}









/* Başlık ve metin */
.desc-panel h3 {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 700;
  color: lightyellow;
}
.desc-panel p {
  margin: 0;
  line-height: 1.5;
  font-size: 14px;
  color: #fff;
}

/* (Opsiyonel) Kapatma butonu kullanacaksan */
.desc-panel .close-btn {
  color: lightyellow;
  float: right;
  font-size: 28px;
  font-weight: bold;
  line-height: 1;
  margin-left: 12px;
}
.desc-panel .close-btn:hover,
.desc-panel .close-btn:focus {
  color: #fff;
  cursor: pointer;
}

/* Mobilde daha geniş kullan */
@media (max-width: 768px) {
  .desc-panel {
    width: calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right));
    left: max(16px, env(safe-area-inset-left));
    top: max(16px, env(safe-area-inset-top));
  }
}

.ui-hint {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 72vw;
  padding: 10px 14px;

  /* İsteğe bağlı: arka planı korumak istersen bu iki satırı bırak; 2D ile tam aynı görünüm istersen background’u kaldırabilirsin. */
  background: rgba(0,0,0,0.45);

  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif;
  font-size: 16px;         /* 2D ile aynı */
  font-weight: 700;        /* 2D ile aynı */
  letter-spacing: .2px;    /* 2D ile aynı */
  line-height: 1.4;
  text-align: center;
  text-shadow: 0 2px 6px rgba(0,0,0,.6); /* 2D ile aynı */

  border-radius: 10px;
  z-index: 10001;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
}
.ui-hint.show { opacity: 1; }
@media (max-width: 600px) {
  .ui-hint { top: 10px; font-size: 14px; }
}

/* Kırmızı yuvarlak FAB */
#bodyPickerToggle.fab {
  position: fixed;
  top: 16px;
  left: 16px;
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 999px;
  background: #40f540e0;          /* kırmızı */
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(4, 240, 4, 0.349);
  z-index: 10010;
  display: grid;         /* EKLE */
  place-items: center;   /* EKLE */
  padding: 0;            /* EKLE - içeride boşluk olmasın */
  font-size: 0;          /* EKLE - “☰” karakterini gizle */
}
#bodyPickerToggle.fab::before {
  content: "";
  width: 50px;                    /* ikonu büyüt/küçültmek için ayarla */
  height: 48px;
  background: url('images/favi.png') center/contain no-repeat;
}

/* Panel (sola yakın, cam efekti) */
#bodyPicker.picker {
  position: fixed;
  top: 16px;
  left: 76px;                    /* butondan sonra gelsin */
  width: 280px;
  max-height: calc(100vh - 32px);
  background: rgba(17,25,40,0.78);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  color: #e5e7eb;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 10010;
  opacity: 0;
  transform: translateX(-8px);
  pointer-events: none;
  transition: 160ms ease;
}
#bodyPicker.open {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* Başlık */
.picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.icon-btn {
  background: transparent;
  border: 0;
  color: #e5e7eb;
  font-size: 16px;
  cursor: pointer;
}

/* Liste alanı */
.picker-list {
  overflow: auto;
  padding: 8px 6px 10px 6px;
  scrollbar-width: thin; /* "ince" bir scrollbar kullan */
  scrollbar-color: rgba(255, 255, 255, 0.4) rgba(255, 255, 255, 0.05); /* (tutamak rengi) (arka plan rengi) */
}
/* Scrollbar'ın tamamı (genişlik) */
.picker-list::-webkit-scrollbar {
  width: 8px;
}

/* Scrollbar'ın arka planı (iz) */
.picker-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05); /* Panelin arka planıyla uyumlu çok soluk bir iz */
  border-radius: 4px;
}

/* Scrollbar'ın tutamacı (kayan kısım) */
.picker-list::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.4); /* Yarı şeffaf beyaz tutamak */
  border-radius: 4px;
}

/* Tutamacın üzerine gelindiğinde (hover) */
.picker-list::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.6); /* Biraz daha belirgin hale getir */
}

/* Grup (gezegen ve altındaki uydular) */
.group { padding: 6px 4px; }
.group + .group { border-top: 1px dashed rgba(255,255,255,0.1); }

/* Satır */
.item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  color: #e5e7eb;
  cursor: pointer;
  text-align: left;
  border-radius: 8px;
}
.item:hover { background: rgba(255,255,255,0.06); }

/* Yuvarlak küçük görsel */
.item::before {
  content: "";
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #111 center/cover no-repeat;
  background-image: var(--img);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
.item.moon::before { width: 28px; height: 28px; }

/* Renk noktası (yörünge rengi) */
.item .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: 0 0 8px;
}

/* Uyduların blokları biraz içerden */
.moons { margin: 4px 0 0 34px; display: grid; gap: 4px; }

/* Başlık metni */
.item span.name { flex: 1 1 auto; }


.speed-controls {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 10020;
display: flex;
align-items: center;
gap: 8px;
background: rgba(17,25,40,0.6);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 12px;
padding: 8px;
backdrop-filter: blur(6px);
}
/* Three.js kontrolü ile çakışmasın */
.speed-controls, .speed-controls * {
touch-action: manipulation;
}

.spd-btn {
width: 36px;
height: 36px;
border-radius: 999px;
border: 0;
background: rgba(255,255,255,0.1);
color: #e5e7eb;
font-size: 16px;
cursor: pointer;
}
.spd-btn:hover { background: rgba(255,255,255,0.18); }

.spd-badge {
min-width: 34px;
text-align: center;
padding: 2px 8px;
font-weight: 700;
color: #e5e7eb;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
border-radius: 10px;
margin-left: 4px;
}

/* Sağ üst hızlı işlemler */
.quickbar{
  position: fixed;
  top: calc(16px + env(safe-area-inset-top,0px));
  right: calc(16px + env(safe-area-inset-right,0px));
  z-index: 10020;
  display: flex; gap: 8px;
  background: rgba(17,25,40,0.72);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 8px;
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.qb-btn{
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 999px; border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.08);
  color:#e5e7eb; font-size:16px; cursor:pointer;
  transition: background .18s ease, transform .06s ease, border-color .18s ease;
}
.qb-btn:hover{ background: rgba(255,255,255,0.16); }
.qb-btn:active{ transform: translateY(1px); }

/* UI üzerinde imleç görünsün */
.quickbar, .quickbar *{ cursor: default; }



@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

:root{
  --bg:#000;
  --fg:#fff;
  --muted:#aab0bd;
  --accent:#44a6ff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:Orbitron,system-ui,-apple-system,Segoe UI,Roboto}

.app.hidden-app{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s ease, visibility .6s}
.app.visible{opacity:1;visibility:visible;pointer-events:auto}

.screen{
  position:fixed; inset:0; z-index:99999;
  display:grid; place-items:center;
  background:radial-gradient(1200px 600px at 50% -10%, #1b1f27 0, #000 60%);
  padding:48px 24px;
  transition:opacity .6s ease, visibility .6s;
}
.screen.hidden{opacity:0;visibility:hidden;pointer-events:none}

.intro-inner,.loading-inner{max-width:900px; width:100%}
h1{letter-spacing:.35rem; text-align:center; margin:0 0 24px}
p{line-height:1.6; color:var(--muted); margin:0 0 14px}

.btn{
  margin:28px auto 0; display:block;
  background:transparent; color:var(--fg);
  border:2px solid var(--accent); padding:14px 24px;
  font-weight:700; letter-spacing:.08em; cursor:pointer;
  transition:transform .15s ease, background .2s ease;
}
.btn:hover{transform:translateY(-1px); background:#0a254040}

.progress{height:12px;background:#444;border-radius:6px;overflow:hidden}
.bar{height:100%; background:linear-gradient(90deg, #2ea7ff, #6bd0ff); width:0%}

/* 2. görsele benzer Intro */
.intro-v2 .intro-inner{
  position: relative;
  max-width: 980px;
  width: 92%;
  margin: 0 auto;
  text-align: center;
}
.intro-v2 .intro-inner::before{
  /* Başlığın üstündeki turuncu ARC */
  content:'';
  position:absolute;
  top:-38px;
  left:50%;
  width:min(780px, 86vw);
  height:160px;
  transform:translateX(-50%);
  background: radial-gradient(60% 7% at 50% 82%,
              rgba(51, 255, 68, 0.88) 0%,
              rgba(51, 255, 68, 0.88) 38%,
              rgba(255,120,60,0) 72%);
  filter: blur(1.5px);
  opacity:.9;
  pointer-events:none;
}
.intro-v2 h1{
  font-family: 'Michroma','Orbitron',system-ui,sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.55rem;
  font-size:clamp(28px, 5.2vw, 56px);
  margin:0 0 18px;
  color:#eaf1ff;
  text-shadow:0 0 14px rgba(255,110,60,.18);
}
.intro-v2 p{
  max-width: 880px;
  margin:0 auto 12px;
  color:#b6c2d1;
  font-size:clamp(14px,1.55vw,18px);
  line-height:1.85;
  text-align:left;
}
.intro-v2 p a{ color:#3aa0ff; text-decoration:none; }
.intro-v2 p a:hover{ text-decoration:underline; }

/* CTA, kenarlı ve daha belirgin */
.intro-v2 .btn.btn-hero{
  margin-top:26px;
  padding:16px 32px;
  font-size:clamp(14px,1.5vw,18px);
  border:2px solid #3aa0ff;
  background:transparent;
  color:#e6f0ff;
  border-radius:6px;
  transition:transform .15s ease, background .25s ease, box-shadow .25s ease;
}
.intro-v2 .btn.btn-hero:hover{
  background:#0b2a48;
  transform:translateY(-1px);
  box-shadow:0 6px 22px rgba(58,160,255,.25);
}

/* Intro/Loading arkaplanı biraz daha “gökyüzü” hissi */
.screen{
  background: radial-gradient(1200px 600px at 50% -10%, #0e121a 0, #000 65%);
}

#app-root{ pointer-events:none; }
#bodyPickerToggle{ position:fixed; top:16px; left:16px; z-index:200001; }
#bodyPicker{ z-index:200002; } 
#bodyPicker.picker { left: 76px; /* ... diğer stiller ... */ }



body:not(.app-ready) #bodyPickerToggle,
body:not(.app-ready) #bodyPicker,
body:not(.app-ready) .overlay-content,
body:not(.app-ready) #hint,
body:not(.app-ready) .toggle-wrap{
  display:none !important;
}



.bg-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:-1;              /* metnin arkasında */
  filter: brightness(.45) saturate(1.1); /* yazı kontrastı için */
  pointer-events:none;     /* tıklamaları engellemesin */
}
.intro-v2::after{          /* hafif üst karartma (isteğe bağlı) */
  content:""; position:absolute; inset:0; z-index:-1;
  background: radial-gradient(140% 80% at 50% 10%, rgba(0,0,0,.35) 0%, rgba(0,0,0,.65) 60%, #000 100%);
}
@media (prefers-reduced-motion: reduce){
  .bg-video{ display:none; }
  .intro-v2{ background: url('media/space_poster.jpg') center/cover no-repeat, #000; }
}

#descPanel,
#infoPanel,
.ui-hint,
.quickbar,
.speed-controls,
.toggle-wrap,
#bodyPicker,
#bodyPicker * ,
#bodyPickerToggle {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent; /* mobil tıklama highlight'ını da kaldırır */
}


/* Intro + Loading ekranlarında metin seçimini kapat */
#intro-screen, #intro-screen ,
#loading-screen, #loading-screen * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent; 
-webkit-touch-callout: none; 
}

/* Seçim rengi fallback: tamamen görünmesin */
#intro-screen ::selection,
#loading-screen ::selection { background: transparent; }
#intro-screen ::-moz-selection,
#loading-screen ::-moz-selection { background: transparent; }

/* Butonda dikkat çeken pulse (yalnızca ::after, ikon ::before ile çakışmaz) */
#bodyPickerToggle.attn-pulse { position: fixed; } /* zaten fixed, garanti olsun */
#bodyPickerToggle.attn-pulse::after {
  content: '';
  position: absolute;
  inset: -10px;                 /* butonu hafifçe dıştan sar */
  border-radius: 999px;
  pointer-events: none;
  /* Çift pulse benzeri glow için box-shadow animasyonu */
  box-shadow: 0 0 0 0 rgba(51,255,153,.55), 0 0 0 0 rgba(51,255,153,.35);
  animation: coach-pulse-1 1.8s ease-out infinite;
}
@keyframes coach-pulse-1 {
  0%   { box-shadow: 0 0 0 0 rgba(51,255,153,.70), 0 0 0 0 rgba(51,255,153,.35); opacity:.95; transform: scale(.98); }
  60%  { box-shadow: 0 0 0 14px rgba(51,255,153,0), 0 0 0 28px rgba(51,255,153,0); opacity:.35; transform: scale(1.02); }
  100% { box-shadow: 0 0 0 0 rgba(51,255,153,0), 0 0 0 0 rgba(51,255,153,0); opacity:0.2; transform: scale(1); }
}

/* Coachmark kutusu – z-index’i UI’nin üstünde olacak şekilde biraz yükselttim */
.coachmark-picker {
  position: fixed; z-index: 200050;   /* 10000 → 200050 */
  display: flex; align-items: center; gap: 10px;
  background: rgba(8,14,20,.72);
  color: #e8fff6;
  padding: 8px 12px;
  border: 1px solid rgba(51,255,153,.45);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  font: 500 13px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  pointer-events: none; /* tıklamayı engellemez */
}

/* Ok yönleri */
.coachmark-picker .arrow {
  width: 14px; height: 14px;
  border-left: 3px solid #33ff99;
  border-bottom: 3px solid #33ff99;
  transform: rotate(45deg);
  animation: nudge 1.2s ease-in-out infinite;
}
.coachmark-picker.flip .arrow { transform: rotate(-135deg); }

@keyframes nudge {
  0%,100% { transform: translateX(0) rotate(45deg); }
  50%     { transform: translateX(6px) rotate(45deg); }
}

@media (prefers-reduced-motion: reduce) {
  #bodyPickerToggle.attn-pulse::after,
  .coachmark-picker .arrow { animation: none !important; }
}


/* — Sinematik geçiş: Launch overlay — */
.launch-overlay {
  position: fixed; inset: 0; z-index: 200060;
  pointer-events: none; opacity: 0;
  background: radial-gradient(1200px 800px at 50% 50%,
    rgba(8,12,18,0.0) 0%,
    rgba(8,12,18,0.25) 60%,
    rgba(0,0,0,0.55) 100%);
}
.launch-overlay.show { animation: overlayFade 950ms ease-out forwards; }

@keyframes overlayFade {
  0% { opacity: 0; }
  10% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; }
}

.launch-overlay .ring,
.launch-overlay .ring2 {
  position: absolute; top: 50%; left: 50%;
  width: 160px; height: 160px; margin: -80px 0 0 -80px;
  border-radius: 50%;
  box-shadow: 0 0 40px rgba(90,200,255,.45) inset, 0 0 24px rgba(90,200,255,.35);
  border: 2px solid rgba(90,200,255,.75);
  transform: scale(.35); opacity: 0;
  animation: ringExpand 950ms cubic-bezier(.2,.65,.25,1) forwards;
}
.launch-overlay .ring2 {
  border-color: rgba(51,255,68,.75);
  box-shadow: 0 0 36px rgba(51,255,68,.45) inset, 0 0 22px rgba(51,255,68,.32);
  animation-delay: 120ms;
}

@keyframes ringExpand {
  0%   { transform: scale(.35); opacity: .95; }
  65%  { transform: scale(8);   opacity: .35; }
  100% { transform: scale(18);  opacity: 0; }
}

.launch-overlay .flash {
  position: absolute; inset: -20%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 55%);
  filter: blur(6px);
  opacity: 0; transform: scale(.6);
  animation: flashPop 620ms ease-out 120ms forwards;
}
@keyframes flashPop {
  0% { opacity: 0; transform: scale(.6); }
  40%{ opacity: .9; }
  100%{ opacity: 0; transform: scale(2.2); }
}

.launch-overlay .streaks {
  position: absolute; inset: -10% -60%;
  background: repeating-linear-gradient(0deg,
     rgba(255,255,255,.09) 0 2px, rgba(255,255,255,0) 2px 16px);
  mix-blend-mode: screen; filter: blur(1.2px);
  opacity: 0; transform: translateY(8px) scaleY(.8);
  animation: streaksFly 900ms ease-out 90ms forwards;
}
@keyframes streaksFly {
  0%   { opacity: 0; transform: translateY(8px) scaleY(.8); }
  40%  { opacity: .55; }
  100% { opacity: 0; transform: translateY(-6px) scaleY(1.25); }
}

/* Intro blur/zoom (butona basıldığı anda) */
body.launching .intro-v2 .intro-inner {
  transform: translateY(8px) scale(.965);
  filter: blur(2px);
  opacity: .78;
  transition: transform 480ms cubic-bezier(.2,.65,.25,1),
              filter 480ms cubic-bezier(.2,.65,.25,1),
              opacity 420ms ease;
}
body.launching .intro-v2 .btn.btn-hero { transform: scale(.96); }

@media (prefers-reduced-motion: reduce) {
  .launch-overlay, .launch-overlay * { animation: none !important; opacity: 0 !important; }
  body.launching .intro-v2 .intro-inner { transform: none; filter: none; opacity: 1; }
}

/* — Sinematik geçiş: Launch overlay — */
.launch-overlay {
  position: fixed; inset: 0; z-index: 200060;
  pointer-events: none; opacity: 0;
  background: radial-gradient(1200px 800px at 50% 50%,
    rgba(8,12,18,0.0) 0%,
    rgba(8,12,18,0.25) 60%,
    rgba(0,0,0,0.55) 100%);
}
.launch-overlay.show { animation: overlayFade 950ms ease-out forwards; }

@keyframes overlayFade {
  0% { opacity: 0; }
  10% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; }
}

.launch-overlay .ring,
.launch-overlay .ring2 {
  position: absolute; top: 50%; left: 50%;
  width: 160px; height: 160px; margin: -80px 0 0 -80px;
  border-radius: 50%;
  box-shadow: 0 0 40px rgba(90,200,255,.45) inset, 0 0 24px rgba(90,200,255,.35);
  border: 2px solid rgba(90,200,255,.75);
  transform: scale(.35); opacity: 0;
  animation: ringExpand 950ms cubic-bezier(.2,.65,.25,1) forwards;
}
.launch-overlay .ring2 {
  border-color: rgba(51,255,68,.75);
  box-shadow: 0 0 36px rgba(51,255,68,.45) inset, 0 0 22px rgba(51,255,68,.32);
  animation-delay: 120ms;
}

@keyframes ringExpand {
  0%   { transform: scale(.35); opacity: .95; }
  65%  { transform: scale(8);   opacity: .35; }
  100% { transform: scale(18);  opacity: 0; }
}

.launch-overlay .flash {
  position: absolute; inset: -20%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 55%);
  filter: blur(6px);
  opacity: 0; transform: scale(.6);
  animation: flashPop 620ms ease-out 120ms forwards;
}
@keyframes flashPop {
  0% { opacity: 0; transform: scale(.6); }
  40%{ opacity: .9; }
  100%{ opacity: 0; transform: scale(2.2); }
}

.launch-overlay .streaks {
  position: absolute; inset: -10% -60%;
  background: repeating-linear-gradient(0deg,
     rgba(255,255,255,.09) 0 2px, rgba(255,255,255,0) 2px 16px);
  mix-blend-mode: screen; filter: blur(1.2px);
  opacity: 0; transform: translateY(8px) scaleY(.8);
  animation: streaksFly 900ms ease-out 90ms forwards;
}
@keyframes streaksFly {
  0%   { opacity: 0; transform: translateY(8px) scaleY(.8); }
  40%  { opacity: .55; }
  100% { opacity: 0; transform: translateY(-6px) scaleY(1.25); }
}

/* Intro blur/zoom (butona basıldığı anda) */
body.launching .intro-v2 .intro-inner {
  transform: translateY(8px) scale(.965);
  filter: blur(2px);
  opacity: .78;
  transition: transform 480ms cubic-bezier(.2,.65,.25,1),
              filter 480ms cubic-bezier(.2,.65,.25,1),
              opacity 420ms ease;
}
body.launching .intro-v2 .btn.btn-hero { transform: scale(.96); }

@media (prefers-reduced-motion: reduce) {
  .launch-overlay, .launch-overlay * { animation: none !important; opacity: 0 !important; }
  body.launching .intro-v2 .intro-inner { transform: none; filter: none; opacity: 1; }
}

.mm{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:9999}
.mm.show{display:flex}
.mm-bg{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px)}
.mm-card{position:relative;width:min(960px,94vw);max-height:92vh;overflow:auto;background:#0b1326;border:1px solid #1f2937;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.mm-x{position:absolute;top:8px;right:8px;background:#111827;border:0;color:#fff;border-radius:8px;padding:6px 10px;cursor:pointer}
.mm-hero{width:100%;height:260px;background-size:cover;background-position:center;border-bottom:1px solid #1f2937}
.mm-content{padding:18px 20px;line-height:1.6}
.mm-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-top:12px}
.mm-gallery img{width:100%;display:block;border-radius:8px}
.mm-nav{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-top:1px solid #1f2937;background:#0a1020;position:sticky;bottom:0}
.mm-btn{background:#111827;border:1px solid #1f2937;color:#e5e7eb;border-radius:8px;padding:8px 12px;cursor:pointer}
.view-more{color:#3b82f6;background:none;border:0;padding:0;margin-top:8px;cursor:pointer;font-weight:600}
.view-more:hover{text-decoration:underline}


/* — Dockable toolbars: tek buton → sola açılır — */
.quickbar,
.speed-controls {
  overflow: hidden; /* içerik kliplensin */
}

/* Toggle butonları (sonda duracak) */
.qb-toggle,
.spd-toggle {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.10);
  color: #e5e7eb;
  font-size: 18px;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease, border-color .18s ease;
}
.qb-toggle:hover,
.spd-toggle:hover { background: rgba(255,255,255,0.16); }

/* Açıkken toggle ufak döndür (görsel ipucu) */
.quickbar:not(.collapsed) .qb-toggle,
.speed-controls:not(.collapsed) .spd-toggle { transform: rotate(90deg); }

/* Kapalıyken sadece toggle görünsün, aradaki boşluklar kalksın */
.quickbar.collapsed,
.speed-controls.collapsed {
  gap: 0 !important;
  padding: 8px !important; /* mevcut padding zaten 8px, garanti */
}

/* Quickbar: toggle dışındaki butonları gizle/kompaktla */
.quickbar .qb-btn {
  transition: width .22s ease, margin .22s ease, padding .22s ease,
              opacity .18s ease, transform .22s ease, border-width .22s ease;
}
.quickbar.collapsed .qb-btn:not(.qb-toggle) {
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-width: 0 !important;
  opacity: 0 !important;
  transform: translateX(8px) scale(.95);
  pointer-events: none;
}
/* Toggle hep en sonda kalsın (sağda) */
.quickbar .qb-toggle { order: 99; }

/* Speed controls: toggle dışındaki buton + badge gizle/kompaktla */
.speed-controls .spd-btn,
.speed-controls .spd-badge {
  transition: width .22s ease, margin .22s ease, padding .22s ease,
              opacity .18s ease, transform .22s ease, border-width .22s ease;
}
.speed-controls.collapsed .spd-btn:not(.spd-toggle),
.speed-controls.collapsed .spd-badge {
width: 0 !important;
margin: 0 !important;
padding: 0 !important;
border-width: 0 !important;
opacity: 0 !important;
transform: translateX(8px) scale(.95);
pointer-events: none;
}
/* Badge’in min-width’i kapalı modda sıfırlansın */
.speed-controls.collapsed .spd-badge { min-width: 0 !important; }

/* Toggle butonu speed-controls içinde de sonda dursun */
.speed-controls .spd-toggle { margin-left: 2px; }

/* SAĞ ALT: Hız menüsü toggle butonunda '2X' yazsın (yalnızca o buton) */
.speed-controls .spd-toggle{
  position: relative;
  width: 36px; height: 36px;
  border-radius: 999px;
  /* var olan görünüme uyumlu */
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.10);
  color: #e5e7eb;

  display: grid; place-items: center;
  font-size: 0 !important;   /* içerideki eski ikon/metni gizle */
}

/* '2X' etiketini pseudo-element ile çiz */
.speed-controls .spd-toggle::after{
  content: "2X";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font: 800 13px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #e5e7eb;
}

/* Hover’da ufak vurgu */
.speed-controls .spd-toggle:hover{ background: rgba(255,255,255,0.16); }

/* Kapalı modda diğerleri gizlenirken toggle görünür kalsın (önceki düzeltme) */
.speed-controls.collapsed .spd-btn:not(.spd-toggle),
.speed-controls.collapsed .spd-badge{
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-width: 0 !important;
  opacity: 0 !important;
  transform: translateX(8px) scale(.95);
  pointer-events: none;
}

/* Tema uyumlu kapatma butonu */
.desc-panel { --accent: #ffd166; /* JS’de set edilmezse varsayılan */ }

.desc-panel .close-btn{
  position: absolute;
  top: 8px; right: 10px;
  width: 34px; height: 34px;          /* bir tık daha büyük */
  border-radius: 9px;
  padding: 0; border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color: var(--accent);
  display: grid; place-items: center;
  cursor: pointer; font-size: 0;       /* “×” metnini gizle, ikonları pseudo ile çizeceğiz */
  float: none;                          /* önceki stil varsa sıfırla */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 4px 14px rgba(0,0,0,.35);
  transition: background .2s ease, transform .06s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;
}

/* X işareti – iki çizgi */
.desc-panel .close-btn::before,
.desc-panel .close-btn::after{
  content:"";
  position: absolute;
  top: 50%; left: 50%;
  width: 62%; height: 2.6px;
  border-radius: 3px;
  background: currentColor;
  transform-origin: center;
}
.desc-panel .close-btn::before{ transform: translate(-50%,-50%) rotate(45deg); }
.desc-panel .close-btn::after { transform: translate(-50%,-50%) rotate(-45deg); }

/* Hover/active/focus durumları */
.desc-panel .close-btn:hover{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  color: color-mix(in srgb, var(--accent), #ffffff 18%);
  border-color: color-mix(in srgb, var(--accent) 65%, rgba(255,255,255,.10));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 6px 18px rgba(0,0,0,.45);
}
.desc-panel .close-btn:active{ transform: translateY(1px) scale(.98); }

.desc-panel .close-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), transparent 60%), inset 0 0 0 1px rgba(255,255,255,.10);
}

/* Açılışta hafif pop animasyonu */
.desc-panel.open .close-btn{
  animation: btn-pop .22s cubic-bezier(.2,.65,.25,1) 120ms both;
}
@keyframes btn-pop { from{ transform: scale(.9); opacity:.6 } to{ transform: scale(1); opacity:1 } }

@media (prefers-reduced-motion: reduce){
  .desc-panel .close-btn{ transition: none; }
  .desc-panel.open .close-btn{ animation: none; }
}

/* Gezegen listesi panel genişliği ve boşluk */
:root{
  --picker-width: 290px;     /* #bodyPicker ile aynı genişlik */
  --picker-gap: -50px;        /* liste ile info panel arası boşluk */
  --desc-shift: 0px;         /* varsayılan: kayma yok */
}

/* #bodyPicker genişliğini değişkenden besle (opsiyonel ama tavsiye) */
#bodyPicker.picker{ width: var(--picker-width); }

/* Info panel: sola sabit + değişken kaydırma */
.desc-panel{
  /* mevcut left hesabına ekstra offset ekle */
  left: calc(
    max(16px, env(safe-area-inset-left, 0px)) + 64px + var(--desc-shift, 0px)
  );

  /* mevcut transition’lara ek olarak left’i de animasyonla */
  transition:
    left 240ms cubic-bezier(.2,.65,.25,1),
    opacity 300ms cubic-bezier(.2,.65,.25,1),
    transform 360ms cubic-bezier(.2,.65,.25,1),
    clip-path 420ms cubic-bezier(.2,.65,.25,1);
}

/* Liste AÇIKKEN: desc-panel sağa kaydır */
body:has(#bodyPicker.open){
  --desc-shift: calc(var(--picker-width) + var(--picker-gap));
}

/* Firefox/eski tarayıcılar için fallback (JS body.picker-open sınıfı ekleyecek) */
body.picker-open{
  --desc-shift: calc(var(--picker-width) + var(--picker-gap));
}

/* Mobilde kaydırma istemiyorsan (liste zaten ekranı kaplıyor) */
@media (max-width: 768px){
  body:has(#bodyPicker.open),
  body.picker-open{
    --desc-shift: 0px;
  }
}

/* — Bilgi rozeti: iç halka + i harfi (tema rengine boyalı) — */
.desc-reopen{
  position: fixed;            /* konumu JS ayarlıyor */
  width: 30px; height: 30px;  /* bir tık büyük */
  display: none;              /* .show ile görünür */
  border-radius: 999px;
  /* hafif cam/uzay hissi */
  background: radial-gradient(120% 120% at 30% 25%, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 48%, rgba(0,0,0,.00) 100%),
              rgba(17,25,40,.66);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 8px 22px rgba(0,0,0,.50),
    0 0 14px color-mix(in srgb, var(--accent, #ffd166), transparent 78%),
    inset 0 0 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
  color: var(--accent, #ffd166); /* tema rengi buradan gelir */
  z-index: 200040;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: background .2s ease, transform .06s ease, box-shadow .2s ease, color .2s ease, opacity .2s ease;
}

/* Önce önceki “çizgi+nokta” düzenini sıfırla ve yeni katmanları çizelim */
.desc-reopen::before,
.desc-reopen::after{
  content:"";
  position:absolute;
}

/* İç halka (ikonun siyah değil, tema rengiyle çizilmiş halkası) */
.desc-reopen::before{
  inset: 6px;                          /* 30px içinde 2px kenar boşluk */
  border-radius: 999px;
  border: 2px solid currentColor;
  box-shadow: 0 0 10px color-mix(in srgb, currentColor, transparent 80%);
}

/* “i” harfi (tek pseudo ile, fonta bağımlı ama tema rengi) */
.desc-reopen::after{
  content: "i";
  inset: 0;
  display: grid; place-items: center;
  font: 800 15px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: currentColor;
  /* hafif parıltı */
  text-shadow:
    0 0 6px color-mix(in srgb, currentColor, transparent 74%),
    0 0 10px color-mix(in srgb, currentColor, transparent 84%);
  transform: translateY(-1px); /* optik merkez */
}

/* Hover: biraz daha “uyanık” görünüm */
.desc-reopen:hover{
  background: radial-gradient(120% 120% at 30% 25%, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 44%, rgba(0,0,0,.00) 100%),
              rgba(17,25,40,.78);
  box-shadow:
    0 10px 26px rgba(0,0,0,.55),
    0 0 18px color-mix(in srgb, var(--accent, #ffd166), transparent 70%),
    inset 0 0 0 1px rgba(255,255,255,.10);
}
.desc-reopen:active{ transform: translateY(1px) scale(.98); }
.desc-reopen.show{ display: grid; animation: reopen-pop .22s cubic-bezier(.2,.65,.25,1); }
@keyframes reopen-pop { from{ transform: translateX(-6px); opacity:.0 } to{ transform: translateX(0); opacity:1 } }

/* Mobilde biraz küçük */
@media (max-width: 640px){
  .desc-reopen{ width: 26px; height: 26px; }
  .desc-reopen::before{ inset: 5px; }
  .desc-reopen::after{ font-size: 14px; transform: translateY(-.5px); }
}

/* Dünyanın yanından açılan gezegen listesi (dinamik konum) */
#bodyPicker.picker{
  position: fixed;
  /* Konum JS’den gelecek */
  top: var(--picker-top, 76px);
  left: var(--picker-left, 16px);

  width: var(--picker-width, 290px);
  max-height: calc(100vh - 90px);
  background: rgba(17,25,40,0.78);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  color: #e5e7eb;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 10010;

  /* Açılış animasyonu */
  opacity: 0;
  transform: translateY(-8px) scale(.98);
  pointer-events: none;
  transform-origin: 0 var(--origin-y, 24px);
  transition:
    opacity 200ms ease,
    transform 220ms cubic-bezier(.2,.65,.25,1),
    top 160ms ease, left 160ms ease;
}

/* Açıkken görünür */
#bodyPicker.open{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Düğmeye bakan küçük ok (panel açıkken) */
#bodyPicker.picker.open::after{
  content: "";
  position: absolute;
  left: -8px;                          /* panelin sol kenarından */
  top: var(--arrow-top, 22px);         /* JS hesaplar */
  width: 0; height: 0;
  border-right: 8px solid rgba(17,25,40,0.78);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  filter: drop-shadow(0 0 3px rgba(0,0,0,.35));
}

/* (Varsa) panel başlığı farklıysa görünüm bozulmasın diye güvenlik */
#bodyPicker .picker-head{ position: sticky; top: 0; z-index: 1; }

:root{
  --picker-top: 76px;       /* panelin üstten başlama noktası (globe butonun hizası) */
  --hud-safe: 72px;         /* alttaki 3D/2D bar + nefes payı (60–84px arası deneyebilirsin) */
}

#bodyPicker.picker{
  position: fixed;
  top: var(--picker-top);
  left: var(--picker-left, 16px);
  bottom: calc(var(--hud-safe) + env(safe-area-inset-bottom, 0px));
  height: auto;
  max-height: none !important;  /* önceki max-height’i ez */
}