/* styles.css - Ferromek Enerji tasarım aşamasında sayfası */
:root{
  --bg1: #0f172a;
  --bg2: #071029;
  --card: rgba(255,255,255,0.04);
  --glass: rgba(255,255,255,0.03);
  --accent: linear-gradient(90deg,#00c6ff,#0072ff);
  --text: #e6f0ff;
  --muted: rgba(230,240,255,0.6);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(0,118,255,0.08), transparent),
              radial-gradient(900px 500px at 90% 90%, rgba(0,198,255,0.05), transparent),
              linear-gradient(180deg,var(--bg1),var(--bg2));
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
}

/* layout */
.wrap{position:relative; width:100%; max-width:920px}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.06);
  border-radius:14px;
  padding:36px;
  text-align:center;
  box-shadow: 0 8px 30px rgba(2,6,23,0.6);
  backdrop-filter: blur(6px);
}

.logo{width:120px; height:120px; margin:0 auto 18px; display:flex; align-items:center; justify-content:center}
.svg-gear{width:120px;height:120px; display:block}
.svg-gear .rotor{transform-origin:100px 100px}

/* text */
h1{margin:0 0 6px; font-size:26px; letter-spacing:0.6px}
.status{margin:0 0 18px; color:var(--muted); font-size:16px}

/* progress */
.progress{display:flex; gap:12px; align-items:center; justify-content:center; margin:8px 0 18px}
.bar{width:380px; max-width:60%; background:var(--glass); border-radius:999px; height:14px; overflow:hidden; position:relative; border:1px solid rgba(255,255,255,0.03)}
.bar-fill{display:block; height:100%; width:0%; background:linear-gradient(90deg,#00c6ff,#0072ff); border-radius:999px; transition:width 1s cubic-bezier(.2,.9,.2,1)}
.percent{min-width:48px; text-align:right; color:var(--muted); font-weight:600}

/* small */
.small{color:var(--muted); font-size:13px; margin:6px 0}

/* footer links */
.footer{margin-top:16px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.link{color:rgba(255,255,255,0.75); text-decoration:none; font-size:14px; padding:8px 12px; border-radius:8px; background:rgba(255,255,255,0.01)}
.link:hover{transform:translateY(-3px); transition:transform .25s}

/* floating domain */
.floating-copy{
  position:absolute; bottom:-20px; right:20px; font-size:12px; color:rgba(230,240,255,0.06); letter-spacing:2px; transform:rotate(-12deg)
}

/* responsiveness */
@media (max-width:640px){
  .bar{max-width:60%}
  .logo{width:96px;height:96px}
}

/* subtle animations */
@keyframes floaty {
  0%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
  100%{transform:translateY(0)}
}
.card{animation:floaty 6s ease-in-out infinite}

/* rotor spin handled in JS for pause/resume */