/* Temel sayfa stilleri */
body {
    font-family: 'Inter', sans-serif;
    overflow: hidden; /* Sayfa kaydırmayı engeller */
    margin: 0;
    background-color: #000; /* Uzay arka planı */
}

/* 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; }
}

/* Toggle + yan yazı için sarıcı */
.toggle-wrap {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Switch kutusu */
.toggle-switcher {
  width: 50px;
  height: 25px;
  position: relative;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  touch-action: auto;
}

/* Uiverse stilleri */
.toggle-input { display: none; }

.toggle-label {
  width: 100%;
  height: 100%;
  position: absolute; top: 0; left: 0;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 0 0 0 #ff0000;
}

.toggle-label::before {
  content: "";
  width: 25px; height: 25px;
  position: absolute; top: 0; left: 0;
  background: #ffffff;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.toggle-input:checked + .toggle-label {
  animation: shadow-animation_5020 10s linear infinite;
}

.toggle-input:checked + .toggle-label::before {
  transform: translateX(25px);
}

@keyframes shadow-animation_5020 {
  0%   { box-shadow: 0 0 0 0 #ff0000; }
  50%  { box-shadow: 0 0 25px 25px #ffa500; }
  100% { box-shadow: 0 0 0 0 #ff0000; }
}

/* Yan yazı */
.toggle-text {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  user-select: none;
  pointer-events: auto;
}