:root {
  --font-main: 'Quicksand', system-ui, -apple-system, sans-serif;
  --glass-bg: rgba(20, 20, 35, 0.6);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
  --primary-color: #a29bfe;
  --text-main: #f1f2f6;
}

body {
  font-family: var(--font-main);
  background: radial-gradient(ellipse at bottom, #1B1464 0%, #000000 100%);
  min-height: 100vh;
  color: var(--text-main);
  padding-bottom: 3rem;
  overflow-x: hidden;
  position: relative;
}

/* --- YOĞUN YILDIZLAR --- */
.stars-layer-1 {
  width: 1px; height: 1px;
  background: transparent;
  z-index: -5;
  box-shadow: 
    1vw 10vh #fff, 5vw 20vh #fff, 10vw 30vh #fff, 15vw 40vh #fff, 20vw 50vh #fff, 25vw 60vh #fff, 30vw 70vh #fff, 35vw 80vh #fff, 40vw 90vh #fff, 45vw 15vh #fff, 50vw 25vh #fff, 55vw 35vh #fff, 60vw 45vh #fff, 65vw 55vh #fff, 70vw 65vh #fff, 75vw 75vh #fff, 80vw 85vh #fff, 85vw 95vh #fff, 90vw 5vh #fff, 95vw 15vh #fff,
    2vw 12vh #fff, 7vw 22vh #fff, 12vw 32vh #fff, 17vw 42vh #fff, 22vw 52vh #fff, 27vw 62vh #fff, 32vw 72vh #fff, 37vw 82vh #fff, 42vw 92vh #fff, 47vw 17vh #fff, 52vw 27vh #fff, 57vw 37vh #fff, 62vw 47vh #fff, 67vw 57vh #fff, 72vw 67vh #fff, 77vw 77vh #fff, 82vw 87vh #fff, 87vw 97vh #fff, 92vw 7vh #fff, 97vw 17vh #fff,
    3vw 50vh #fff, 8vw 60vh #fff, 13vw 70vh #fff, 18vw 80vh #fff, 23vw 90vh #fff, 28vw 10vh #fff, 33vw 20vh #fff, 38vw 30vh #fff, 43vw 40vh #fff, 48vw 50vh #fff, 53vw 60vh #fff, 58vw 70vh #fff, 63vw 80vh #fff, 68vw 90vh #fff, 73vw 10vh #fff, 78vw 20vh #fff, 83vw 30vh #fff, 88vw 40vh #fff, 93vw 50vh #fff, 98vw 60vh #fff,
    4vw 15vh #fff, 9vw 25vh #fff, 14vw 35vh #fff, 19vw 45vh #fff, 24vw 55vh #fff, 29vw 65vh #fff, 34vw 75vh #fff, 39vw 85vh #fff, 44vw 95vh #fff, 49vw 5vh #fff, 54vw 15vh #fff, 59vw 25vh #fff, 64vw 35vh #fff, 69vw 45vh #fff, 74vw 55vh #fff, 79vw 65vh #fff, 84vw 75vh #fff, 89vw 85vh #fff, 94vw 95vh #fff, 99vw 5vh #fff;
  animation: animStar 100s linear infinite;
  opacity: 0.6;
}

.stars-layer-2 {
  width: 2px; height: 2px;
  background: transparent;
  z-index: -4;
  box-shadow: 
    5vw 5vh #a29bfe, 15vw 15vh #fff, 25vw 25vh #a29bfe, 35vw 35vh #fff, 45vw 45vh #a29bfe, 55vw 55vh #fff, 65vw 65vh #a29bfe, 75vw 75vh #fff, 85vw 85vh #a29bfe, 95vw 95vh #fff,
    10vw 90vh #fff, 20vw 80vh #a29bfe, 30vw 70vh #fff, 40vw 60vh #a29bfe, 50vw 50vh #fff, 60vw 40vh #a29bfe, 70vw 30vh #fff, 80vw 20vh #a29bfe, 90vw 10vh #fff,
    12vw 55vh #fff, 34vw 12vh #a29bfe, 56vw 78vh #fff, 78vw 34vh #a29bfe, 90vw 56vh #fff, 23vw 89vh #a29bfe, 45vw 23vh #fff, 67vw 67vh #a29bfe, 89vw 12vh #fff;
  animation: animStar 150s linear infinite;
  opacity: 0.8;
}

.stars-layer-3 {
  width: 3px; height: 3px;
  background: transparent;
  z-index: -3;
  box-shadow: 
    8vw 8vh #74b9ff, 28vw 28vh #fff, 48vw 48vh #74b9ff, 68vw 68vh #fff, 88vw 88vh #74b9ff,
    18vw 82vh #fff, 38vw 62vh #74b9ff, 58vw 42vh #fff, 78vw 22vh #74b9ff, 98vw 2vh #fff,
    15vw 45vh #fff, 75vw 15vh #74b9ff, 45vw 75vh #fff;
  animation: animStar 200s linear infinite, twinkle 3s infinite alternate;
  filter: blur(1px);
}

@keyframes animStar { from { transform: translateY(0); } to { transform: translateY(-100vh); } }
@keyframes twinkle { 0% { opacity: 0.3; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.2); } }

/* --- POFUDUK & BELİRGİN BULUTLAR (Konumlar Düzeltildi) --- */
.cloud-container {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: -2; 
  overflow: hidden;
}

.cloud {
  position: absolute;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 200px;
  filter: drop-shadow(0 0 20px rgba(255,255,255,0.3));
  animation: floatCloud linear infinite;
}

.cloud::after, .cloud::before {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: 50%;
}

/* BULUT 1: Büyük, Ortada (Başlık altı, kartlar üstü) */
.cloud:nth-child(1) { 
  width: 250px; height: 80px;
  top: 30%; left: -250px; /* Ortalara alındı */
  opacity: 0.8; 
  animation-duration: 120s;
  transform: scale(1.2);
}
.cloud:nth-child(1)::after { width: 100px; height: 100px; top: -50px; left: 50px; }
.cloud:nth-child(1)::before { width: 120px; height: 120px; top: -60px; left: 100px; }

/* BULUT 2: Çok Aşağıda (Kartların altı) */
.cloud:nth-child(2) { 
  width: 180px; height: 50px;
  top: 85%; left: -200px; /* 65% -> 85% (İyice aşağıya) */
  opacity: 0.6; 
  animation-duration: 70s; 
  animation-delay: -10s;
  transform: scale(0.9);
}
.cloud:nth-child(2)::after { width: 70px; height: 70px; top: -35px; left: 30px; }
.cloud:nth-child(2)::before { width: 90px; height: 90px; top: -45px; left: 80px; }

/* BULUT 3: Ortada ama Sağdan (Metni ıskalayacak şekilde) */
.cloud:nth-child(3) { 
  width: 220px; height: 70px;
  top: 25%; right: -250px; /* 30% -> 25% (Hafif yukarı, başlık altı ile mood arası) */
  opacity: 0.7; 
  animation: floatCloudReverse 50s linear infinite; 
  transform: scale(1.0);
}
.cloud:nth-child(3)::after { width: 90px; height: 90px; top: -45px; left: 40px; }
.cloud:nth-child(3)::before { width: 110px; height: 110px; top: -55px; left: 90px; }

@keyframes floatCloud {
  from { margin-left: -300px; }
  to { margin-left: 110vw; }
}

@keyframes floatCloudReverse {
  from { margin-right: -300px; }
  to { margin-right: 110vw; }
}

/* --- DETAYLI DOLUNAY --- */
.moon-container {
  position: fixed; 
  top: 60px;
  right: 5%;
  width: 140px;
  height: 140px;
  z-index: -3;
  animation: floatMoon 12s ease-in-out infinite;
}

.moon {
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 35% 35%, #fff, #dfe6e9 40%, #b2bec3 100%);
  border-radius: 50%;
  box-shadow: 
    0 0 50px rgba(255, 255, 255, 0.4), 
    inset -20px -20px 40px rgba(0,0,0,0.2),
    inset 5px 5px 10px rgba(255,255,255,0.8);
  position: relative;
  overflow: hidden;
}

/* Kraterler */
.moon::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(0,0,0,0.05);
  box-shadow: 
    20px 80px 0 5px rgba(0,0,0,0.05),
    50px 30px 0 8px rgba(0,0,0,0.05),
    90px 60px 0 3px rgba(0,0,0,0.05),
    70px 90px 0 6px rgba(0,0,0,0.05),
    30px 40px 0 4px rgba(0,0,0,0.05);
  width: 20px; height: 20px;
  top: 10px; left: 10px;
  filter: blur(1px);
}

@keyframes floatMoon {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(2deg); }
}

/* --- BÜYÜLÜ KÜRELER (Ekstra 2 Tane Eklendi) --- */
.flying-creature-container {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}
.creature {
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  opacity: 0.8;
}

/* 1. Fairy (Wisp) */
.fairy {
  width: 15px; height: 15px;
  background: white;
  box-shadow: 0 0 10px #fff, 0 0 20px #a29bfe;
  top: 60%; left: -50px;
  animation: flyWisp 25s ease-in-out infinite; animation-delay: 0s;
}

/* 2. Witch (Spirit) */
.witch {
  width: 40px; height: 40px;
  background: rgba(116, 185, 255, 0.4);
  box-shadow: 0 0 30px rgba(116, 185, 255, 0.6);
  top: 30%; left: -100px;
  animation: flySpirit 45s linear infinite; animation-delay: 5s;
}

/* 3. Firefly (Ateş Böceği - Yeni) */
.firefly {
  width: 10px; height: 10px;
  background: #ffeaa7; /* Sarımsı */
  box-shadow: 0 0 15px #fdcb6e;
  top: 80%; left: -50px;
  animation: flyWisp 35s ease-in-out infinite reverse; /* Tersten gelsin veya farklı hareket */
  animation-delay: 10s;
}

/* 4. Mystic Orb (Mor Küre - Yeni) */
.orb {
  width: 60px; height: 60px;
  background: rgba(253, 121, 168, 0.2); /* Pembe/Mor */
  box-shadow: 0 0 40px rgba(253, 121, 168, 0.4);
  top: 10%; left: -100px;
  animation: flySpirit 60s linear infinite;
  animation-delay: 20s;
}

@keyframes flyWisp {
  0% { transform: translateX(0) translateY(0); }
  25% { transform: translateX(30vw) translateY(-50px) scale(1.2); }
  50% { transform: translateX(60vw) translateY(20px) scale(0.8); }
  75% { transform: translateX(80vw) translateY(-30px) scale(1.1); }
  100% { transform: translateX(110vw) translateY(0); }
}
@keyframes flySpirit {
  0% { transform: translateX(0) translateY(0) scale(1); opacity: 0; }
  10% { opacity: 0.6; }
  50% { transform: translateX(50vw) translateY(40px) scale(1.5); opacity: 0.3; }
  90% { opacity: 0.6; }
  100% { transform: translateX(110vw) translateY(0) scale(1); opacity: 0; }
}

/* Navbar */
.glass-nav {
  background: rgba(9, 10, 15, 0.7) !important;
  backdrop-filter: blur(15px);
  border-bottom: 1px solid var(--glass-border);
}
.navbar-dark .navbar-brand { color: #fff; font-weight: 700; letter-spacing: 1px; }
.navbar-dark .nav-link { color: rgba(255,255,255,0.7); transition: color 0.3s; }
.navbar-dark .nav-link:hover { color: #a29bfe; text-shadow: 0 0 10px rgba(162, 155, 254, 0.5); }

/* Kartlar */
.card {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: var(--glass-shadow);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 15px 35px rgba(0,0,0,0.5);
}
.card h1, .card h2, .card h3, .card p { color: #f1f2f6; }
.text-muted { color: #dfe6e9 !important; } /* Daha açık, okunabilir */

/* Form Label ve Text Renkleri */
.form-label { color: #f1f2f6 !important; font-weight: 500; }
.form-text { color: #b2bec3 !important; }
.form-control, .form-select { 
  color: #f1f2f6 !important; 
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}
.form-select option {
  color: #111 !important;          /* Açılır listede okunaklı siyah metin */
  background: #fff !important;     /* Beyaz arka plan */
}
.form-control::placeholder, .form-select::placeholder { 
  color: rgba(255, 255, 255, 0.5) !important; 
}
.form-control:focus, .form-select:focus {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-color: var(--primary-color) !important;
  color: #f1f2f6 !important;
}

/* Mood Kartları */
.mood-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  padding: 2rem;
  height: 100%;
  border: 1px solid rgba(255,255,255,0.05);
  background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
}
.mood-card:hover {
  background: linear-gradient(145deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
}
.mood-icon { font-size: 3.5rem; margin-bottom: 1rem; filter: drop-shadow(0 0 10px rgba(255,255,255,0.3)); transition: transform 0.3s ease; }
.mood-card:hover .mood-icon { transform: scale(1.1) rotate(5deg); }
.mood-label { font-size: 1.1rem; font-weight: 600; color: #dfe6e9; }

/* Hyperspace Overlay */
#hyperspace-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; pointer-events: none; display: none; }
.hyperspace-flash { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: white; z-index: 10000; opacity: 0; pointer-events: none; transition: opacity 1.0s ease-out; }

/* Butonlar */
.btn-primary { background: linear-gradient(to right, #6c5ce7, #8e44ad); border: none; box-shadow: 0 4px 15px rgba(108, 92, 231, 0.4); }
.btn-primary:hover { background: linear-gradient(to right, #5b4cc4, #732d91); box-shadow: 0 6px 20px rgba(108, 92, 231, 0.6); }
.whitespace-prewrap { white-space: pre-wrap; }
code.small { font-size: 0.8rem; color: #fab1a0; }