/* Minimal dark "Tasarım Aşamasında" page */
:root{
  --bg:#060712;
  --panel:#0b1220;
  --accent:#00d4ff;
  --muted:rgba(255,255,255,0.55);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color-scheme: dark;
}
*{box-sizing:border-box}
html,body{height:100%; margin:0}
body{
  background: radial-gradient(800px 400px at 10% 15%, rgba(0,212,255,0.03), transparent),
              linear-gradient(180deg,var(--bg),#041022);
  display:flex;
  align-items:center;
  justify-content:center;
  font-smoothing:antialiased;
  -webkit-font-smoothing:antialiased;
  padding:32px;
  color:#eaf6ff;
}
.wrap{width:100%; max-width:900px}
.center{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.04);
  padding:56px 40px;
  border-radius:14px;
  text-align:center;
  box-shadow: 0 10px 40px rgba(2,6,23,0.6);
  backdrop-filter: blur(6px);
}
.mark{
  width:88px; height:88px; margin:0 auto 18px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:42px; color:var(--panel); background:linear-gradient(180deg,var(--accent),#0072ff);
  box-shadow: 0 8px 30px rgba(0,130,255,0.12);
  transform:translateY(-6px);
  opacity:0; /* animated in */
}
.headline{margin:6px 0 6px; font-size:28px; letter-spacing:0.6px; opacity:0; transform:translateY(6px)}
.sub{margin:0 0 16px; color:var(--muted); font-size:14px; opacity:0; transform:translateY(6px)}
.foot{margin-top:18px; font-size:13px; color:rgba(230,240,255,0.5); opacity:0; transform:translateY(6px)}

/* small decorative underline */
.headline::after{
  content:"";
  display:block;
  width:72px; height:4px; margin:12px auto 0; border-radius:999px;
  background:linear-gradient(90deg,var(--accent),#6be7ff);
  transform-origin:left center; transform:scaleX(0);
}

/* animation helpers (JS will add 'ready' class) */
.center.ready .mark{animation:pop .6s cubic-bezier(.2,.9,.3,1) forwards}
.center.ready .headline{animation:fadeUp .5s .12s ease forwards}
.center.ready .sub{animation:fadeUp .5s .22s ease forwards}
.center.ready .foot{animation:fadeUp .5s .32s ease forwards}
.center.ready .headline::after{animation:underline .6s .28s cubic-bezier(.2,.9,.3,1) forwards}

@keyframes pop{
  from{opacity:0; transform:translateY(-6px) scale(.9)}
  to{opacity:1; transform:translateY(0) scale(1)}
}
@keyframes fadeUp{
  from{opacity:0; transform:translateY(6px)}
  to{opacity:1; transform:translateY(0)}
}
@keyframes underline{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}

/* responsiveness */
@media (max-width:520px){
  .center{padding:34px 22px}
  .mark{width:72px;height:72px;font-size:34px}
  .headline{font-size:22px}
}