/* style.css - minimal, premium görünüm, responsive */
/* Root / theme */
:root{
  --accent: #6C5CE7;
  --accent-2: #2D9CDB;
  --bg-overlay: rgba(6,6,8,0.28);
  --glass: rgba(255,255,255,0.04);
  --text: #EAEAF2;
  --muted: rgba(234,234,242,0.78);
  --radius: 14px;
  --max-width: 1200px;
  --shadow: 0 12px 36px rgba(6,6,10,0.55);
  --container-padding: 28px;
}

/* base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background-image:url('/assets/bg-1920.jpg');
  background-size:cover;
  background-position:center center;
  background-attachment:fixed; /* desktop */
  -webkit-font-smoothing:antialiased;
}

/* mobile fallback for fixed bg */
@media (max-width:800px){
  body{background-attachment:scroll}
}

/* overlay for content readability */
.overlay{
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:36px 20px;
  background: linear-gradient(180deg, rgba(6,6,8,0.12), rgba(6,6,8,0.18));
}

/* container card (glass) */
.container{
  width:100%;
  max-width:var(--max-width);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:18px;
  padding:var(--container-padding);
  box-shadow:var(--shadow);
}

/* header */
.header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo img{height:48px;display:block}

/* hero */
.hero{margin-top:18px;border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,0.45)}
.hero img{display:block;width:100%;height:auto}

/* steps */
.steps{display:flex;gap:18px;margin-top:22px;flex-wrap:wrap}
.step{
  flex:1 1 30%;
  min-width:220px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:12px;
  padding:18px;
  box-shadow: 0 8px 28px rgba(6,6,8,0.35);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.step .number{
  font-weight:800;
  font-size:18px;
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  -webkit-background-clip: text;
  background-clip:text;
  color:transparent;
}
.step h3{margin:0;font-size:20px}
.step p{margin:0;color:var(--muted);font-size:14px}

/* CTA */
.cta-wrap{display:flex;justify-content:center;margin-top:18px}
.cta-main{
  display:inline-block;
  padding:12px 30px;
  border-radius:999px;
  font-weight:700;
  text-decoration:none;
  color:#fff;
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow: 0 14px 40px rgba(108,92,231,0.18);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cta-main:active{transform:translateY(1px)}

/* cards (3 square containers) */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.card{
  background:var(--glass);
  border-radius:12px;
  padding:12px;
  display:flex;
  flex-direction:column;
  min-height:320px;
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
}
.img-wrap{position:relative;padding-top:100%;border-radius:8px;overflow:hidden}
.img-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card h4{margin:12px 0 8px 0}
.btn{
  margin-top:auto;
  padding:10px 12px;
  border-radius:10px;
  text-align:center;
  font-weight:800;
  text-decoration:none;
  display:inline-block;
  color:#fff;
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
}

/* footer */
footer{margin-top:26px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,0.04);padding-top:12px}
footer .license{font-size:13px;color:var(--muted)}

/* utility */
.badge{background:rgba(255,255,255,0.04);padding:8px 12px;border-radius:999px;text-decoration:none;color:var(--muted);font-weight:700}
.sr-only{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* responsive */
@media (max-width:980px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .step{flex-basis:48%}
}
@media (max-width:640px){
  .container{padding:18px}
  .cards{grid-template-columns:1fr}
  .steps{flex-direction:column}
  .step{min-width:unset}
  .logo img{height:40px}
}