:root{
  --bg-1:#071a14;
  --bg-2:#2a0602;
  --cream:#f8fbe6;

  --neon-teal:#00f5ff;
  --neon-pink:#ff2d7d;
  --neon-amber:#ffd000;
  --neon-purple:#9b5cff;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  overflow:hidden;
  color:var(--cream);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:
    radial-gradient(1200px 700px at 20% 20%, rgba(0,245,255,.14), transparent 60%),
    radial-gradient(900px 650px at 85% 75%, rgba(255,45,125,.14), transparent 55%),
    radial-gradient(900px 650px at 60% 50%, rgba(155,92,255,.10), transparent 60%),
    linear-gradient(135deg, var(--bg-1) 0%, #07100d 35%, #150504 60%, var(--bg-2) 100%);
}

#bg{
  position:fixed; inset:0;
  z-index:0;
  background:
    radial-gradient(900px 600px at 18% 28%, rgba(0,245,255,.12), transparent 55%),
    radial-gradient(900px 700px at 86% 74%, rgba(255,45,125,.14), transparent 55%),
    radial-gradient(1100px 700px at 55% 55%, rgba(155,92,255,.10), transparent 60%),
    linear-gradient(135deg, rgba(7,26,20,1) 0%, rgba(7,16,13,1) 35%, rgba(21,5,4,1) 60%, rgba(42,6,2,1) 100%);
  filter:saturate(1.45) contrast(1.10);
  animation: hueShift 14s linear infinite;
}

/* Neon halo (premium, abartısız) */
#bg:before{
  content:"";
  position:absolute; inset:-35%;
  background: conic-gradient(
    from 180deg,
    rgba(0,245,255,.22),
    rgba(255,45,125,.18),
    rgba(155,92,255,.16),
    rgba(255,208,0,.12),
    rgba(0,245,255,.22)
  );
  filter: blur(70px) saturate(1.5);
  mix-blend-mode: screen;
  animation: spin 12s linear infinite;
  opacity:.38;
}

/* Aurora drift */
#bg:after{
  content:"";
  position:absolute; inset:-20%;
  background:
    radial-gradient(closest-side at 30% 30%, rgba(0,245,255,.30), transparent 60%),
    radial-gradient(closest-side at 70% 65%, rgba(255,45,125,.26), transparent 60%),
    radial-gradient(closest-side at 55% 40%, rgba(155,92,255,.20), transparent 65%);
  filter: blur(42px) saturate(1.5);
  mix-blend-mode: screen;
  animation: drift 7s ease-in-out infinite alternate;
  opacity:.55;
}

/* 3D canvas */
#c{
  position:fixed; inset:0;
  width:100%; height:100%;
  display:block;
  z-index:1;
}

/* Overlay */
#overlay{
  position:fixed; inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding: clamp(18px, 4vw, 42px);
  pointer-events:none;
}

/* Logo top-right */
.topLogo{
  position:absolute;
  top: clamp(16px, 3vw, 34px);
  right: clamp(16px, 3vw, 34px);
  width: clamp(72px, 10vw, 140px);
  height: auto;
  opacity: .96;
  filter:
    drop-shadow(0 0 18px rgba(0,245,255,.18))
    drop-shadow(0 0 22px rgba(255,45,125,.14));
}

.brand .mark{
  letter-spacing:.22em;
  font-weight:900;
  font-size: clamp(18px, 2.2vw, 26px);
  text-transform:uppercase;
  text-shadow:
    0 0 26px rgba(0,245,255,.22),
    0 0 30px rgba(255,45,125,.18);
}
.brand .tag{
  margin-top:8px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(248,251,230,.72);
}

.hero{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  transform: translateY(-3%);
}

.hero::before{
  content:"";
  position:absolute;
  width:min(860px, 92vw);
  height:min(360px, 44vh);
  border-radius: 28px;
  background: rgba(0,0,0,.12);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 22px 70px rgba(0,0,0,.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateY(10px);
  z-index:-1;
}

.date{
  font-weight:950;
  font-size: clamp(78px, 11.2vw, 175px);
  letter-spacing: .06em;
  text-align:center;
  line-height:1;
  text-shadow:
    0 0 44px rgba(0,245,255,.18),
    0 0 52px rgba(255,45,125,.16),
    0 12px 44px rgba(0,0,0,.55);
}

.line{
  width:min(640px, 78vw);
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(0,245,255,.80), rgba(255,45,125,.80), rgba(155,92,255,.60), transparent);
  box-shadow: 0 0 28px rgba(0,245,255,.26);
}

.sub{
  font-size: clamp(18px, 2.9vw, 30px);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(248,251,230,.88);
  text-shadow: 0 0 26px rgba(255,208,0,.10);
}

/* grain */
body:before{
  content:"";
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  opacity:.07;
  mix-blend-mode:overlay;
  pointer-events:none;
}

@keyframes drift{
  from{ transform: translate3d(-3%, -2%, 0) scale(1.02) }
  to  { transform: translate3d( 3%,  2%, 0) scale(1.07) }
}
@keyframes spin{
  from{ transform: rotate(0deg) }
  to  { transform: rotate(360deg) }
}
@keyframes hueShift{
  0%   { filter: saturate(1.45) contrast(1.10) hue-rotate(0deg); }
  100% { filter: saturate(1.45) contrast(1.10) hue-rotate(18deg); }
}

/* ✅ Center visual */
.centerArt{
  width: clamp(220px, 38vw, 520px);
  height: auto;
  margin-bottom: 10px;
  opacity: .98;
  transform: translateY(0);
  filter:
    drop-shadow(0 0 18px rgba(0,245,255,.22))
    drop-shadow(0 0 26px rgba(255,45,125,.18))
    drop-shadow(0 10px 38px rgba(0,0,0,.55));
  animation: floatGlow 3.4s ease-in-out infinite;
}

@keyframes floatGlow{
  0%,100%{
    transform: translateY(0) scale(1);
    filter:
      drop-shadow(0 0 18px rgba(0,245,255,.22))
      drop-shadow(0 0 26px rgba(255,45,125,.18))
      drop-shadow(0 10px 38px rgba(0,0,0,.55));
  }
  50%{
    transform: translateY(-10px) scale(1.02);
    filter:
      drop-shadow(0 0 26px rgba(0,245,255,.30))
      drop-shadow(0 0 34px rgba(255,45,125,.26))
      drop-shadow(0 14px 46px rgba(0,0,0,.60));
  }
}

/* ✅ REMOVE the big glass panel behind center content (logo/date area) */
.hero::before{
  display: none !important;
}

/* ✅ Make the center image feel organic (no synthetic neon glow) */
.centerArt{
  width: clamp(240px, 34vw, 560px);
  margin-bottom: 14px;
  opacity: 0.98;
  animation: floatSoft 4.2s ease-in-out infinite;

  /* organic look: just depth + slight contrast */
  filter:
    drop-shadow(0 18px 55px rgba(0,0,0,.62))
    contrast(1.06)
    saturate(1.05);
}

/* softer float (no glow pumping) */
@keyframes floatSoft{
  0%,100%{
    transform: translateY(0) scale(1);
    filter:
      drop-shadow(0 18px 55px rgba(0,0,0,.62))
      contrast(1.06)
      saturate(1.05);
  }
  50%{
    transform: translateY(-8px) scale(1.01);
    filter:
      drop-shadow(0 26px 68px rgba(0,0,0,.68))
      contrast(1.07)
      saturate(1.06);
  }
}

/* ✅ Logo bigger on mobile + slightly darker */
.centerArt{
  width: min(92vw, 640px) !important;   /* mobilde büyür, desktop'ta da taşmaz */
  max-width: 92vw !important;
  filter:
    drop-shadow(0 18px 55px rgba(0,0,0,.62))
    brightness(0.90)                   /* koyulaştır */
    contrast(1.08)
    saturate(1.06) !important;
}

/* extra boost on small screens */
@media (max-width: 520px){
  .centerArt{
    width: min(96vw, 520px) !important;
  }
}

/* ===== FIX: Mobile layout (date + Launching visible) ===== */
#overlay{
  padding-top: calc(clamp(18px, 4vw, 42px) + env(safe-area-inset-top));
  padding-bottom: calc(clamp(18px, 4vw, 42px) + env(safe-area-inset-bottom));
}

.hero{
  transform: none !important;
  justify-content: center;
}

.centerArt{
  max-height: min(34vh, 260px) !important;
  width: auto !important;
  max-width: min(88vw, 520px) !important;
  object-fit: contain;
  margin-bottom: 10px !important;
}

@media (max-width: 520px){
  .date{
    font-size: clamp(52px, 12vw, 92px) !important;
    letter-spacing: .05em !important;
  }
  .sub{
    font-size: clamp(14px, 3.6vw, 18px) !important;
  }
  .line{
    width: min(420px, 78vw) !important;
  }
}

@media (max-height: 740px){
  .centerArt{ max-height: min(30vh, 220px) !important; }
  .hero{ gap: 12px !important; }
}

/* ===== FINAL: Bigger + centered + slightly up ===== */
.hero{
  transform: translateY(-4vh) !important;   /* biraz yukarı */
}

.centerArt{
  display:block;
  margin-left:auto !important;
  margin-right:auto !important;

  /* büyüt */
  max-height: min(46vh, 420px) !important;
  max-width: min(92vw, 820px) !important;
  width: auto !important;
}

@media (max-width: 520px){
  .centerArt{
    max-height: min(52vh, 520px) !important; /* telefonda daha büyük */
    max-width: 92vw !important;
  }
}

/* ===== Countdown (top-right) ===== */
.countdown{
  position:absolute;
  top: calc(clamp(16px, 3vw, 34px) + env(safe-area-inset-top));
  right: calc(clamp(16px, 3vw, 34px) + env(safe-area-inset-right));
  z-index: 5;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 18px 60px rgba(0,0,0,.35);
  color: rgba(248,251,230,.88);
  pointer-events:none;
  text-align:right;
  min-width: 180px;
}

.cd-label{
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .78;
}

.cd-time{
  margin-top: 6px;
  font-weight: 800;
  letter-spacing: .10em;
  font-size: 14px;
  text-transform: uppercase;
}

@media (max-width: 520px){
  .countdown{ min-width: 160px; padding: 9px 10px; }
  .cd-time{ font-size: 13px; }
}

/* ===== Mobile fix: prevent countdown + header overlap ===== */
@media (max-width: 520px){
  /* countdown artık absolute değil: kendi satırında dursun */
  .countdown{
    position: relative !important;
    top: auto !important;
    right: auto !important;
    margin-left: auto !important;   /* sağa yasla */
    margin-bottom: 8px !important;
    min-width: auto !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
  }

  .cd-label{
    font-size: 9px !important;
    letter-spacing: .18em !important;
  }

  .cd-time{
    font-size: 12px !important;
    letter-spacing: .08em !important;
  }

  /* başlık yazıları mobilde biraz sıkı dursun */
  .brand .mark{ font-size: 18px !important; letter-spacing: .18em !important; }
  .brand .tag{ font-size: 10px !important; letter-spacing: .10em !important; opacity:.72 !important; }
}

/* ===== POLISH PACK: Mobile header + Countdown pill + Visible motion (FPS-friendly) ===== */

/* Arkaplan hareketi biraz daha belirgin ama ağır değil */
#bg{ animation-duration: 10s !important; }
#bg:before{ animation-duration: 9s !important; opacity:.48 !important; }
#bg:after{ animation-duration: 4.6s !important; opacity:.62 !important; }

/* Mobilde header çakışmasını “layout” ile çözüyoruz */
@media (max-width: 520px){
  #overlay{
    justify-content: flex-start !important;
    gap: 14px !important;
  }

  /* Countdown pill: küçük, şık, sağa */
  .countdown{
    position: relative !important;
    top: auto !important;
    right: auto !important;
    margin-left: auto !important;
    margin-bottom: 2px !important;
    padding: 8px 10px !important;
    border-radius: 999px !important;
    min-width: auto !important;
    background: rgba(0,0,0,.22) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 14px 45px rgba(0,0,0,.30) !important;
  }
  .cd-label{
    font-size: 9px !important;
    letter-spacing: .18em !important;
    opacity: .72 !important;
  }
  .cd-time{
    font-size: 12px !important;
    letter-spacing: .08em !important;
  }

  /* Brand daha temiz */
  .brand{
    margin-top: 2px !important;
    max-width: 92vw !important;
  }
  .brand .mark{
    font-size: 18px !important;
    letter-spacing: .18em !important;
    line-height: 1.1 !important;
  }
  .brand .tag{
    font-size: 10px !important;
    letter-spacing: .10em !important;
    opacity: .70 !important;

    /* tek satır, taşarsa nazikçe kes */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Hero bölümü aşağı kaymasın, her şey sığsın */
  .hero{ margin-top: 18px !important; }
}

/* Prefer-reduced-motion varsa animasyonları sakinleştir */
@media (prefers-reduced-motion: reduce){
  #bg, #bg:before, #bg:after, .centerArt{ animation: none !important; }
}

/* ===== Logo size boost (safe) ===== */
.centerArt{
  max-height: min(52vh, 520px) !important;
  max-width: min(92vw, 900px) !important;
  width: auto !important;
}

/* Mobilde daha da belirgin ama taşırmadan */
@media (max-width: 520px){
  .centerArt{
    max-height: min(56vh, 560px) !important;
    max-width: 94vw !important;
  }
}

/* ===== RESTORE CORE ANIMATIONS (background + logo) ===== */

/* Background motion */
#bg{
  animation: hueShift 12s linear infinite !important;
}
#bg:before{
  animation: spin 10s linear infinite !important;
}
#bg:after{
  animation: drift 6s ease-in-out infinite alternate !important;
}

/* Logo motion */
.centerArt{
  animation: floatSoft 4.2s ease-in-out infinite !important;
}

/* (Re)define keyframes to guarantee they exist */
@keyframes hueShift{
  0%   { filter: saturate(1.35) contrast(1.10) hue-rotate(0deg); }
  100% { filter: saturate(1.35) contrast(1.10) hue-rotate(22deg); }
}
@keyframes spin{
  from { transform: rotate(0deg) scale(1.02); }
  to   { transform: rotate(360deg) scale(1.02); }
}
@keyframes drift{
  from { transform: translate3d(-2%, -1.5%, 0) scale(1.04); }
  to   { transform: translate3d( 2%,  1.5%, 0) scale(1.08); }
}
@keyframes floatSoft{
  0%,100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-10px) scale(1.01); }
}

/* ===== iOS / Mobile color grade: make it as TOK as desktop ===== */
/* iOS Safari detection */
@supports (-webkit-touch-callout: none){

  /* global background grade on iOS */
  #bg{
    filter: saturate(1.65) contrast(1.18) brightness(.92) !important;
  }

  /* boost aurora layers so it doesn't look washed */
  #bg:before{
    opacity: .55 !important;
    filter: blur(82px) saturate(1.7) brightness(.85) !important;
  }

  #bg:after{
    opacity: .72 !important;
    filter: blur(44px) saturate(1.75) brightness(.88) !important;
  }

  /* very subtle film grain to kill banding */
  body::before{
    content:"";
    position:fixed; inset:0;
    pointer-events:none;
    z-index: 2;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(255,255,255,.06) 0 1px, transparent 1px),
      radial-gradient(circle at 70% 60%, rgba(255,255,255,.05) 0 1px, transparent 1px),
      radial-gradient(circle at 50% 50%, rgba(0,0,0,.07) 0 1px, transparent 1px);
    background-size: 120px 120px, 160px 160px, 220px 220px;
    mix-blend-mode: overlay;
    opacity: .10;
    transform: translateZ(0);
  }
}

/* Extra punch on small screens (all mobile) */
@media (max-width: 520px){
  #bg{
    filter: saturate(1.7) contrast(1.2) brightness(.90) !important;
  }
  #bg:before{ opacity:.58 !important; }
  #bg:after{ opacity:.76 !important; }
}


/* ===== Natural Snow Overlay ===== */
#snow{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
  opacity: .88;
  mix-blend-mode: normal;
}


/* içerik katmanını snow’un üstüne al */
#overlay{ position: relative; z-index: 3; }