/* ========================================
   Sinalar - Main Stylesheet
   Core styles, variables, and base layout
   ======================================== */

:root {
  /* Light Mode (Default) - Charcoal + Off-white */
  --bg: #FCFCFD;
  --bg-gradient-1: rgba(31, 41, 55, 0.03);
  --bg-gradient-2: rgba(87, 83, 78, 0.02);
  --card: #FFFFFF;
  --text: #1C1917;
  --text-muted: #57534E;
  --border: #E6E8EC;
  --accent: #1F2937;
  --accent-hover: #111827;
  --success: #22c55e;
  --shadow: 0 4px 20px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 40px rgba(0,0,0,0.06);
}

[data-theme="dark"] {
  /* Dark Mode */
  --bg: #0F172A;
  --bg-gradient-1: rgba(203, 213, 225, 0.08);
  --bg-gradient-2: rgba(156, 163, 175, 0.06);
  --card: #111827;
  --text: #E5E7EB;
  --text-muted: #9CA3AF;
  --border: #374151;
  --accent: #CBD5E1;
  --accent-hover: #E5E7EB;
  --success: #22c55e;
  --shadow: 0 4px 20px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 40px rgba(0,0,0,0.5);
}

/* Reset & Base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { height: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 20% 10%, var(--bg-gradient-1), transparent 50%),
    radial-gradient(circle at 80% 80%, var(--bg-gradient-2), transparent 50%),
    var(--bg);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  transition: background 0.3s ease, color 0.3s ease;
  position: relative;
  overflow-x: hidden;
}

/* Light Particles Animation - Light Mode */
body.theme-light::before {
  content: '';
  position: fixed;
  bottom: -10%;
  left: 0;
  width: 4px;
  height: 4px;
  background-color: transparent;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  box-shadow: 
    15vw 10vh 3px 2px rgba(31, 41, 55, 0.4),
    45vw 25vh 2px 1px rgba(87, 83, 78, 0.35),
    78vw 5vh 3px 2px rgba(31, 41, 55, 0.3),
    32vw 40vh 2px 2px rgba(41, 37, 36, 0.4),
    62vw 18vh 3px 1px rgba(31, 41, 55, 0.35),
    8vw 30vh 2px 2px rgba(87, 83, 78, 0.3),
    88vw 35vh 3px 2px rgba(31, 41, 55, 0.4),
    25vw 12vh 2px 1px rgba(41, 37, 36, 0.35),
    52vw 45vh 3px 2px rgba(87, 83, 78, 0.4),
    72vw 8vh 2px 2px rgba(31, 41, 55, 0.3),
    12vw 50vh 3px 1px rgba(41, 37, 36, 0.35),
    38vw 20vh 2px 2px rgba(31, 41, 55, 0.4),
    68vw 38vh 3px 2px rgba(87, 83, 78, 0.35),
    92vw 15vh 2px 1px rgba(31, 41, 55, 0.3),
    22vw 48vh 3px 2px rgba(41, 37, 36, 0.4),
    48vw 28vh 2px 2px rgba(31, 41, 55, 0.35),
    5vw 42vh 3px 1px rgba(87, 83, 78, 0.4),
    85vw 22vh 2px 2px rgba(31, 41, 55, 0.3),
    35vw 35vh 3px 2px rgba(41, 37, 36, 0.35),
    58vw 52vh 2px 1px rgba(31, 41, 55, 0.4),
    75vw 45vh 3px 2px rgba(87, 83, 78, 0.35),
    18vw 15vh 2px 2px rgba(31, 41, 55, 0.3),
    42vw 55vh 3px 1px rgba(41, 37, 36, 0.4),
    95vw 32vh 2px 2px rgba(31, 41, 55, 0.35),
    28vw 8vh 3px 2px rgba(87, 83, 78, 0.4),
    55vw 38vh 2px 1px rgba(31, 41, 55, 0.3),
    82vw 48vh 3px 2px rgba(41, 37, 36, 0.35),
    2vw 25vh 2px 2px rgba(31, 41, 55, 0.4),
    65vw 12vh 3px 1px rgba(87, 83, 78, 0.35),
    38vw 58vh 2px 2px rgba(31, 41, 55, 0.3);
  animation: particlesFloat 25s linear infinite;
}

body.theme-light::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9998;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(31, 41, 55, 0.05), transparent 40%),
    radial-gradient(ellipse at 80% 90%, rgba(87, 83, 78, 0.04), transparent 40%),
    radial-gradient(ellipse at 50% 50%, rgba(41, 37, 36, 0.03), transparent 50%);
  opacity: 0.9;
  animation: ambientGlow 15s ease-in-out infinite alternate;
}

/* Galaxy Stars Animation - Dark Mode */
body.theme-dark::before {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 2px;
  background-color: transparent;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  box-shadow: 24vw 9vh 1px 0px #fff, 12vw -24vh 0px 1px #fff, -45vw -22vh 0px 0px #fff, -37vw -40vh 0px 1px #fff, 29vw 19vh 0px 1px #fff, 4vw -8vh 0px 1px #fff, -5vw 21vh 1px 1px #fff, -27vw 26vh 1px 1px #fff, -47vw -3vh 1px 1px #fff, -28vw -30vh 0px 1px #fff, -43vw -27vh 0px 1px #fff, 4vw 22vh 1px 1px #fff, 36vw 23vh 0px 0px #fff, -21vw 24vh 1px 1px #fff, -16vw 2vh 1px 0px #fff, -16vw -6vh 0px 0px #fff, 5vw 26vh 0px 0px #fff, -34vw 41vh 0px 0px #fff, 1vw 42vh 1px 1px #fff, 11vw -13vh 1px 1px #fff, 48vw -8vh 1px 0px #fff, 22vw -15vh 0px 0px #fff, 45vw 49vh 0px 0px #fff, 43vw -27vh 1px 1px #fff, 20vw -2vh 0px 0px #fff, 8vw 22vh 0px 1px #fff, 39vw 48vh 1px 1px #fff, -21vw -11vh 0px 1px #fff, -40vw 45vh 0px 1px #fff, 11vw -30vh 1px 0px #fff, 26vw 30vh 1px 0px #fff, 45vw -29vh 0px 1px #fff, -2vw 18vh 0px 0px #fff, -29vw -45vh 1px 0px #fff, -7vw -27vh 1px 1px #fff, 42vw 24vh 0px 0px #fff, 45vw -48vh 1px 0px #fff, -36vw -18vh 0px 0px #fff, -44vw 13vh 0px 1px #fff, 36vw 16vh 0px 1px #fff, 40vw 24vh 0px 0px #fff, 18vw 11vh 0px 0px #fff, -15vw -23vh 1px 0px #fff, -24vw 48vh 0px 1px #fff, 27vw -45vh 1px 0px #fff, -2vw -24vh 0px 1px #fff, -15vw -28vh 0px 0px #fff, -43vw 13vh 1px 0px #fff, 7vw 27vh 1px 0px #fff, 47vw 5vh 0px 0px #fff, -45vw 15vh 1px 1px #fff, -5vw -28vh 0px 1px #fff, 38vw 25vh 1px 1px #fff, -39vw -1vh 1px 0px #fff, 5vw 0vh 1px 0px #fff, 49vw 13vh 0px 0px #fff, 48vw 10vh 0px 1px #fff, 19vw -28vh 0px 0px #fff, 4vw 7vh 0px 0px #fff, 21vw 21vh 1px 1px #fff, -15vw -15vh 0px 1px #fff, -6vw -42vh 1px 0px #fff, -15vw 48vh 1px 1px #fff, -23vw 25vh 1px 1px #fff, -48vw 25vh 0px 1px #fff, -31vw -19vh 0px 1px #fff, 4vw 37vh 1px 1px #fff, -43vw 28vh 0px 0px #fff, 3vw -25vh 0px 1px #fff, -39vw 14vh 0px 1px #fff, -40vw 31vh 0px 1px #fff, 35vw -36vh 1px 1px #fff, 16vw 49vh 0px 0px #fff, 6vw 39vh 0px 0px #fff, 3vw -35vh 0px 1px #fff, -44vw -2vh 1px 0px #fff, -6vw 21vh 1px 0px #fff, 48vw 9vh 1px 1px #fff, -43vw 30vh 1px 1px #fff, 29vw -12vh 1px 1px #fff, -48vw 13vh 1px 0px #fff, -42vw 32vh 1px 1px #fff, 34vw 15vh 1px 1px #fff, 29vw -37vh 1px 1px #fff, 28vw 2vh 0px 0px #fff;
  animation: starsZoom 20s linear infinite;
}

body.theme-dark::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9998;
  background:
    radial-gradient(ellipse at 10% 20%, rgba(203, 213, 225, 0.12), transparent 40%),
    radial-gradient(ellipse at 90% 80%, rgba(156, 163, 175, 0.10), transparent 40%),
    radial-gradient(ellipse at 50% 50%, rgba(209, 213, 219, 0.08), transparent 50%);
  opacity: 0.5;
  animation: nebula 20s linear infinite;
}

/* Disable Background Animation - Add class 'no-bg-animation' to body to disable */
body.no-bg-animation::before,
body.no-bg-animation::after {
  display: none !important;
}

/* Ensure content is above stars - REMOVED */


@keyframes particlesFloat {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-120vh) translateX(5vw);
    opacity: 0;
  }
}

@keyframes ambientGlow {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.9;
  }
}

@keyframes starsZoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(2);
  }
}

@keyframes nebula {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.6;
  }
  100% {
    transform: translate(5%, 5%) rotate(360deg);
    opacity: 0.8;
  }
}

/* Main Wrapper */
.main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Container */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px;
  width: 100%;
}

/* Header */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 40px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}

.logo-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), #6366f1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
}

.theme-toggle {
  display: flex;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 4px;
}

.theme-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
}

.theme-btn.active {
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow);
}

.theme-btn:hover:not(.active) { 
  color: var(--text); 
}

@media (max-width: 480px) {
  .theme-btn span:last-child { display: none; }
  .theme-btn { padding: 8px 12px; }
}

/* Typography */
h1 {
  font-size: 48px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -1px;
  margin-bottom: 20px;
  color: var(--text);
}

.lead {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 36px;
}

/* Footer */
.footer {
  border-top: 1px solid var(--border);
  padding: 20px 40px;
  text-align: center;
  flex-shrink: 0;
  margin-top: auto;
}

.footer-content {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.footer p {
  font-size: 13px;
  color: var(--text-muted);
}

.footer-links {
  display: flex;
  gap: 24px;
}

.footer-links a {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.footer-links a:hover {
  color: var(--accent);
}

@media (max-width: 768px) {
  .footer { padding: 16px 20px; }
}

/* Animations */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 968px) {
  .container {
    padding: 24px 16px;
  }

  h1 {
    font-size: 36px;
  }

  .header {
    margin-bottom: 40px;
  }
}