/* =========================================================
   EvoM2 — Official Launcher (Tek Ekran Sitesi)
   ========================================================= */

:root{
  --accent-gold: #fcd34d;
  --accent-gold-dark: #b45309;
  --neon-red:    #ef4444;
  --neon-orange: #f59e0b;

  --panel-bg:    rgba(10, 5, 7, 0.95);
  --panel-border:rgba(252, 211, 77, 0.3);

  --text-main:   #fef3c7;
  --text-muted:  #d1d5db;
  --text-dim:    #8b8577;

  --ink:         #030102;
  --ease:        cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after{
  margin:0; padding:0; box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}

html{ scroll-behavior:smooth; }

body{
  font-family:'Inter', sans-serif;
  color:var(--text-main);
  background:var(--ink);
  height:100vh;
  overflow:hidden;                 /* TEK EKRAN — kaydırma yok */
  display:block;
}

/* =========================================================
   ARKA PLAN
   ========================================================= */
.bg-stage{
  position:fixed; inset:0; z-index:0;
  pointer-events:none; overflow:hidden;
}

/* Video: konumlandırılmalı ki katman sırası doğru olsun.
   (static bırakılırsa .bg-fallback'in ALTINDA kalır ve görünmez) */
.bg-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.02);
  filter:brightness(.58) contrast(1.16) saturate(1.08);
  z-index:1;                      /* fallback'in ÜSTÜNDE */
}

.bg-overlay{
  position:absolute; inset:0; z-index:2;
  background:
    radial-gradient(circle at 50% 42%, rgba(24,6,9,.14) 0%, rgba(3,1,2,.80) 82%),
    linear-gradient(180deg, rgba(3,1,2,.42) 0%, rgba(3,1,2,.74) 48%, rgba(3,1,2,.93) 100%);
}

/* Video yoksa devreye giren zemin — VİDEONUN ARKASINDA */
.bg-fallback{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse 900px 620px at 50% 22%, rgba(180,83,9,.24), transparent 66%),
    radial-gradient(ellipse 700px 520px at 12% 82%, rgba(127,29,29,.28), transparent 72%),
    linear-gradient(160deg,#1b0a06 0%,#030102 62%,#0a0403 100%);
}

.ambient-glow{
  position:absolute; top:45%; left:50%;
  transform:translate(-50%,-50%);
  width:820px; height:460px; z-index:3;
  background:radial-gradient(circle, rgba(252,211,77,.09) 0%, rgba(180,83,9,.03) 50%, transparent 75%);
  animation:ambientPulse 7s ease-in-out infinite alternate;
}
@keyframes ambientPulse{
  0%  { transform:translate(-50%,-50%) scale(.92); opacity:.5; }
  100%{ transform:translate(-50%,-50%) scale(1.08); opacity:1; }
}

/* =========================================================
   ANA KABUK — TEK EKRAN DÜZENİ
   ========================================================= */
.launcher-container{
  position:relative; z-index:10;
  display:grid;
  grid-template-rows:auto 1fr auto;
  height:100vh;
  padding:clamp(12px,2.2vh,24px) clamp(18px,3vw,40px);
  animation:fadeUp .9s var(--ease) both;
}
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:translateY(0); }
}

/* Yanlardan neon patlamalar */
.launcher-container::before,
.launcher-container::after{
  content:''; position:absolute;
  top:50%; transform:translateY(-50%);
  width:180px; height:450px;
  z-index:-1; pointer-events:none;
  filter:blur(50px);
  animation:sideExplosion 3.5s ease-in-out infinite alternate;
}
.launcher-container::before{
  left:-80px;
  background:radial-gradient(ellipse, rgba(239,68,68,.45) 0%, rgba(220,38,38,.15) 50%, transparent 70%);
}
.launcher-container::after{
  right:-80px; animation-delay:1.75s;
  background:radial-gradient(ellipse, rgba(245,158,11,.45) 0%, rgba(220,38,38,.15) 50%, transparent 70%);
}
@keyframes sideExplosion{
  0%  { opacity:.4; transform:translateY(-50%) scale(.85); }
  100%{ opacity:1;  transform:translateY(-50%) scale(1.15); }
}

/* =========================================================
   ÜST — LOGO
   ========================================================= */
.main-header{
  display:flex; flex-direction:column;
  align-items:center; gap:10px;
}

.brand-container{
  display:flex; flex-direction:column;
  align-items:center; gap:4px;
}

.logo-wrapper{
  display:flex; align-items:center; justify-content:center;
  gap:14px;
  background:linear-gradient(135deg, rgba(22,9,13,.62), rgba(10,4,6,.42));
  border:2px solid var(--accent-gold);
  padding:9px clamp(22px,5vw,42px);
  border-radius:12px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:
    0 6px 20px rgba(0,0,0,.8),
    inset 0 0 15px rgba(252,211,77,.15),
    0 0 42px rgba(252,211,77,.12);
}

.logo-star{
  color:var(--accent-gold);
  font-size:clamp(12px,1.8vw,16px);
  text-shadow:0 0 10px rgba(245,158,11,.85);
  animation:twinkle 2.6s ease-in-out infinite;
}
@keyframes twinkle{
  0%,100%{ opacity:.45; transform:scale(.85); }
  50%    { opacity:1;   transform:scale(1.15); }
}

.brand-title{
  font-family:'Orbitron', sans-serif;
  font-size:clamp(1.9rem,5.2vw,3.2rem);
  font-weight:900;
  letter-spacing:clamp(2px,.7vw,5px);
  color:#ffffff;
  text-shadow:0 0 20px rgba(239,68,68,.6), 0 0 40px rgba(239,68,68,.3), 0 2px 10px rgba(0,0,0,.9);
}

.brand-subtitle{
  font-family:'Rajdhani', sans-serif;
  font-size:clamp(9px,1.3vw,11px);
  font-weight:700;
  letter-spacing:clamp(2px,.5vw,4px);
  color:var(--accent-gold);
  text-shadow:0 0 12px rgba(252,211,77,.5);
}

/* Sosyal haplar */
.social-pills{
  display:flex; flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  background:var(--panel-bg);
  padding:7px 20px;
  border:1px solid var(--panel-border);
  border-radius:30px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 8px 25px rgba(0,0,0,.6);
}
.pill{
  display:flex; align-items:center; gap:6px;
  color:var(--text-muted);
  font-family:'Rajdhani', sans-serif;
  font-size:13px; font-weight:700;
  padding:4px 12px; border-radius:16px;
  transition:all .2s ease;
}
.pill svg{ width:14px; height:14px; fill:currentColor; }
.pill:hover{ color:#fff; background:rgba(255,255,255,.06); }
.pill.discord:hover{ color:#5865F2; }

/* =========================================================
   ORTA — SLOGAN + GERİ SAYIM
   ========================================================= */
.center-stage{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:clamp(16px,3vh,32px);
  padding:10px 20px;
  text-align:center;
}

.ghost-intro-text{
  font-family:'Montserrat', sans-serif;
  font-style:italic; font-weight:300;
  font-size:clamp(1rem,2.4vw,1.3rem);
  color:rgba(255,255,255,.66);
  letter-spacing:2px; line-height:1.6;
  max-width:680px;
  text-shadow:0 0 15px rgba(255,255,255,.2);
  animation:ghostBreath 4s ease-in-out infinite alternate;
}
@keyframes ghostBreath{
  0%  { opacity:.45; text-shadow:0 0 10px rgba(255,255,255,.1); }
  100%{ opacity:.88; text-shadow:0 0 26px rgba(255,255,255,.42); }
}

/* Geri sayım kutusu */
.countdown-container{
  position:relative; overflow:hidden;
  width:min(420px, 92vw);
  display:flex; flex-direction:column;
  gap:12px; align-items:center;
  background:linear-gradient(135deg, rgba(20,8,12,.94) 0%, rgba(10,4,6,.98) 100%);
  padding:15px 22px;
  border-radius:16px;
  border:1px solid rgba(252,211,77,.35);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:
    0 20px 50px rgba(0,0,0,.9),
    inset 0 0 20px rgba(252,211,77,.06),
    0 0 60px rgba(180,83,9,.14);
}
.countdown-container::before{
  content:''; position:absolute;
  top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent-gold), transparent);
}

.countdown-title{
  display:flex; align-items:center; gap:8px;
  font-family:'Rajdhani', sans-serif;
  font-size:13px; font-weight:700; letter-spacing:2px;
  color:var(--accent-gold);
  text-shadow:0 2px 6px rgba(0,0,0,.8);
}

.countdown-open{
  font-family:'Cinzel', serif;
  font-weight:700; font-size:1rem; letter-spacing:1px;
  color:var(--accent-gold);
  text-shadow:0 0 18px rgba(252,211,77,.6);
}

.dot-live{
  width:6px; height:6px; flex:0 0 auto;
  background:var(--neon-red);
  border-radius:50%;
  box-shadow:0 0 8px var(--neon-red);
  animation:pulseGlow 2s infinite;
}
@keyframes pulseGlow{
  0%  { transform:scale(.95); box-shadow:0 0 0 0 rgba(239,68,68,.7); }
  70% { transform:scale(1);   box-shadow:0 0 0 6px rgba(239,68,68,0); }
  100%{ transform:scale(.95); box-shadow:0 0 0 0 rgba(239,68,68,0); }
}

.countdown-boxes{
  display:flex; align-items:center; justify-content:center;
  gap:8px;
}

.time-box{
  display:flex; flex-direction:column; align-items:center;
  background:radial-gradient(circle at center, rgba(35,15,22,.95) 0%, rgba(12,5,8,.98) 100%);
  border:1px solid rgba(252,211,77,.25);
  border-radius:10px;
  padding:8px 12px;
  min-width:66px;
  box-shadow:0 6px 20px rgba(0,0,0,.7);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.time-box:hover{
  border-color:var(--accent-gold);
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(252,211,77,.15);
}

.time-val{
  font-family:'Cinzel', serif;
  font-size:clamp(18px,3.4vw,22px);
  font-weight:900;
  color:#fff; line-height:1;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 14px rgba(252,211,77,.35), 0 2px 8px rgba(0,0,0,.9);
}
.time-label{
  font-family:'Rajdhani', sans-serif;
  font-size:10px; font-weight:700; letter-spacing:1px;
  color:var(--accent-gold);
  margin-top:4px;
}
.time-sep{
  font-family:'Cinzel', serif;
  font-size:18px; font-weight:900;
  color:rgba(252,211,77,.5);
  margin-top:-12px;
}

/* =========================================================
   ALT — EYLEM DOKU + CANLI BANT
   ========================================================= */
.bottom-hud{
  position:relative;
  display:flex; flex-direction:column;
  align-items:center;
  gap:clamp(8px,1.6vh,12px);
}

.action-dock{
  display:flex; gap:clamp(10px,1.6vw,16px);
  background:var(--panel-bg);
  padding:clamp(10px,1.6vh,12px) clamp(16px,2.4vw,28px);
  border:1px solid var(--panel-border);
  border-radius:16px;
  backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px);
  box-shadow:0 15px 50px rgba(0,0,0,.85);
}

.dock-btn{
  display:flex; align-items:center; gap:12px;
  padding:10px clamp(14px,2vw,24px);
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  color:#fff;
  transition:all .2s ease;
  min-width:clamp(150px,17vw,185px);
}
.dock-btn:hover{
  background:rgba(255,255,255,.07);
  border-color:var(--accent-gold);
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(252,211,77,.14);
}
.dock-btn.primary-glow{
  background:linear-gradient(135deg, rgba(180,83,9,.30) 0%, rgba(20,8,12,.80) 100%);
  border-color:var(--accent-gold);
  box-shadow:0 0 20px rgba(252,211,77,.15);
}

.dock-btn .icon{ font-size:clamp(17px,2.2vw,20px); }

.texts{ display:flex; flex-direction:column; }
.texts strong{
  font-family:'Rajdhani', sans-serif;
  font-size:clamp(13px,1.7vw,15px);
  font-weight:700; letter-spacing:1px; line-height:1.1;
  white-space:nowrap;
}
.texts small{
  font-size:10px; color:var(--text-muted); letter-spacing:.5px;
  white-space:nowrap;
}

/* Canlı bant */
.live-ticker{
  display:flex; align-items:center;
  gap:14px;
  width:min(920px, 100%);
  background:rgba(10,5,7,.90);
  border:1px solid var(--panel-border);
  border-radius:8px;
  padding:8px 16px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 8px 25px rgba(0,0,0,.7);
}
.ticker-badge{
  background:linear-gradient(135deg, var(--accent-gold), var(--accent-gold-dark));
  color:#000;
  font-family:'Rajdhani', sans-serif;
  font-size:11px; font-weight:700;
  letter-spacing:1px;
  padding:3px 10px; border-radius:4px;
  flex:0 0 auto;
  box-shadow:0 0 14px rgba(252,211,77,.35);
}
.ticker-viewport{
  flex:1; overflow:hidden; white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker-slider{
  display:inline-block;
  animation:ticker 26s linear infinite;
}
.ticker-slider span{ padding:0 30px; font-size:12px; color:var(--text-muted); }
.ticker-slider b{ color:#fff; }
.ticker-viewport:hover .ticker-slider{ animation-play-state:paused; }
@keyframes ticker{
  0%  { transform:translate3d(0,0,0); }
  100%{ transform:translate3d(-50%,0,0); }
}

.developer-tag{
  font-family:'Rajdhani', sans-serif;
  font-size:11px; font-weight:700;
  letter-spacing:1px;
  color:var(--text-muted);
  white-space:nowrap;
  flex:0 0 auto;
}
.developer-tag span{ color:var(--accent-gold); }

/* =========================================================
   KÖŞE ROZETLERİ
   ========================================================= */
.corner-badge-box{
  position:absolute; bottom:6px;
  display:flex; flex-direction:column;
  gap:6px;
  background:rgba(10,5,7,.92);
  border:1px solid var(--panel-border);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  padding:10px 14px;
  box-shadow:0 8px 25px rgba(0,0,0,.7);
  z-index:20;
}
.left-corner{
  left:0;
  border-radius:10px 24px 6px 24px;
  border-left:2px solid var(--accent-gold);
}
.right-corner{
  right:0;
  border-radius:24px 10px 24px 6px;
  border-right:2px solid var(--accent-gold);
}
.corner-header{
  font-family:'Rajdhani', sans-serif;
  font-size:10px; font-weight:700;
  letter-spacing:2px;
  color:var(--text-muted);
  text-align:center;
  border-bottom:1px solid rgba(255,255,255,.06);
  padding-bottom:4px;
}
.corner-items{ display:flex; gap:6px; }
.sub-badge{
  font-family:'Rajdhani', sans-serif;
  font-size:11px; font-weight:700; letter-spacing:1px;
  padding:5px 10px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:6px;
  color:var(--text-main);
  white-space:nowrap;
  transition:all .25s ease;
}
.sub-badge:hover,
.sub-badge.active{
  background:rgba(252,211,77,.12);
  border-color:var(--accent-gold);
  color:var(--accent-gold);
}

/* =========================================================
   DUYARLILIK
   ========================================================= */
@media (max-width:1080px){
  .dock-btn{ min-width:0; flex:1 1 150px; }
  .corner-badge-box{ display:none; }
}
@media (max-width:680px){
  .launcher-container{ padding:12px 14px; }
  .logo-wrapper{ padding:7px 18px; gap:10px; }
  .brand-subtitle{ font-size:8px; letter-spacing:2px; }
  .social-pills{ padding:5px 12px; gap:6px; }
  .pill{ font-size:11px; padding:3px 9px; }
  .countdown-container{ padding:13px 14px; }
  .time-box{ min-width:58px; padding:7px 9px; }
  .time-sep{ font-size:15px; margin-top:-11px; }
  .action-dock{ gap:8px; padding:9px; width:100%; }
  .dock-btn{ padding:9px 10px; }
  .dock-btn .icon{ font-size:16px; }
  .texts strong{ font-size:12px; letter-spacing:.5px; }
  .texts small{ font-size:9px; }
  .developer-tag{ display:none; }
}
@media (max-height:620px){
  .ghost-intro-text{ font-size:.95rem; letter-spacing:1px; }
  .center-stage{ gap:12px; }
  .social-pills{ display:none; }
}

/* Hareket azaltma */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}