/* ─────────────────────────────────────────────────────────────
   Codevorous — Coming Soon (Minimalist Arka Plan + Orijinal Kart ve Parıltılar)
   ───────────────────────────────────────────────────────────── */

:root{
  --bg: #414042;
  --card: rgba(255,255,255,0.06);
  --card-stroke: rgba(255,255,255,0.18);
  --text: #f2f2f3;
  --muted: #cfcfd3;
  --accent-1: #9ae6ff;   /* cool neon */
  --accent-2: #ffd28f;   /* warm neon */
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
  --radius-2xl: 22px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{font-size:16px}
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font: 500 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Scene layout */
.scene{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding: clamp(24px, 4vw, 60px);
  position:relative;
  overflow:hidden;
}

/* Soft animated background glows (Original) */
.glow{
  position:absolute;
  width:60vmax;
  height:60vmax;
  filter: blur(70px);
  opacity:.22;
  transform: translate3d(0,0,0);
  pointer-events:none;
  will-change: transform, opacity;
  animation: float 14s ease-in-out infinite;
  z-index: 1; /* Under canvas */
}
.glow-a{
  background: radial-gradient(40% 40% at 50% 50%, var(--accent-1), transparent 60%);
  top:-15vmax; left:-10vmax;
}
.glow-b{
  background: radial-gradient(40% 40% at 50% 50%, var(--accent-2), transparent 60%);
  bottom:-15vmax; right:-10vmax;
  animation-delay: -7s;
}
@keyframes float{
  0%,100%{ transform:translate3d(0,0,0); }
  50%{ transform:translate3d(0,-2.5vmax,0); }
}

/* Canvas for the animated lines background */
#bg-canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2; /* Between glows and card */
  opacity: 0.8;
}

/* Glass card */
.card{
  width:min(920px, 100%);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.05));
  border:1px solid var(--card-stroke);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow);
  padding: clamp(22px, 5vw, 48px);
  position:relative;
  isolation:isolate;
  overflow:hidden;
  backdrop-filter: blur(10px) saturate(130%);
  z-index: 3; /* Above all other background elements */
}

/* Subtle inner border glow */
.card::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(154,230,255,.18), rgba(255,210,143,.18)) border-box;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none;
}

/* Brand area */
.brand{
  display:flex; align-items:center; gap:16px;
  margin-bottom: clamp(14px, 2.5vw, 24px);
}
.brand__logo{
  width: clamp(64px, 8vw, 96px);
  height: auto; display:block;
  filter: drop-shadow(0 0 18px rgba(154,230,255,.25));
}
.brand__name{
  max-width: clamp(160px, 28vw, 320px);
  height:auto; display:block;
}

/* Headline with neon glow */
.headline{
  font-size: clamp(28px, 4.5vw, 44px);
  font-weight: 800;
  letter-spacing: .3px;
  margin: 6px 0 8px;
  line-height: 1.2;
  text-shadow:
    0 1px 0 rgba(0,0,0,.4),
    0 0 22px rgba(154,230,255,.25);
}
.headline__shine{
  display:block;
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 900;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 14px rgba(154,230,255,.35),
    0 0 24px rgba(255,210,143,.35);
  filter: drop-shadow(0 0 22px rgba(255,255,255,.08));
  animation: pulse 3.2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ filter: drop-shadow(0 0 14px rgba(255,255,255,.10)); opacity: .95; }
  50%{ filter: drop-shadow(0 0 26px rgba(255,255,255,.24)); opacity: 1; }
}

/* Tagline */
.tagline{
  margin: 8px 0 18px;
  color: var(--muted);
  font-size: clamp(16px, 1.6vw, 18px);
}
.glow-text{
  text-shadow:
    0 0 10px rgba(154,230,255,.22),
    0 0 18px rgba(255,210,143,.18);
}

/* Divider */
.divider{
  height:1px;
  width:100%;
  margin: clamp(14px, 2vw, 22px) 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
}

/* Contacts */
.contacts{
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; gap:10px 18px;
}
.link{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  text-decoration:none; color: var(--text);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
}
.link:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,0.12);
  box-shadow: 0 12px 28px rgba(0,0,0,.28), 0 0 24px rgba(154,230,255,.20);
}

/* Footnote status with live dot */
.footnote{
  display:flex; align-items:center; gap:10px;
  margin-top: clamp(16px, 2.2vw, 26px);
  color: var(--muted);
  font-size: .95rem;
}
.dot{
  width:10px; height:10px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #a7ffd9, #38ffaa 60%, rgba(56,255,170,.0) 70%);
  box-shadow:
    0 0 10px rgba(56,255,170,.65),
    0 0 22px rgba(56,255,170,.35);
  animation: blink 1.8s ease-in-out infinite;
}
@keyframes blink{
  0%, 100%{ opacity: .75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* Utilities */
.only-desktop{ display:none }
@media (min-width: 720px){
  .only-desktop{ display:inline }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .glow, .headline__shine, .dot{ animation: none !important; }
}