.hero{
  background:
    radial-gradient(1200px 500px at 50% -150px, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.5), rgba(45,36,102,.55) 50%, #2d2472 95%);
  padding: 48px 0 36px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  --bleed: calc(50vw - 50%);
  margin-left: calc(-1 * var(--bleed));
  margin-right: calc(-1 * var(--bleed));
  padding-left: var(--bleed);
  padding-right: var(--bleed);
}
.hero__inner{ text-align:center; max-width: 980px; margin: 0 auto; }
.hero__badge{ display:inline-flex; align-items:center; gap:8px; background: rgba(255,255,255,.08); padding: 6px 12px; border-radius: 999px; font-weight:600; }
.hero__title{ font-size: clamp(32px, 6vw, 64px); margin: 18px 0 10px; line-height:1.05; }
.hero__subtitle{ color: var(--muted); margin: 0 auto 18px; max-width: 720px; }
.hero__cta{ margin: 10px 0 22px; display:flex; gap:10px; justify-content:center; }

/* Genel progress kartı */
.status{ margin: 28px auto 0; text-align:left; background: var(--surface); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 14px; max-width: 720px; }
.status__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.status__percent{ font-weight:800; }
.status__bar{ position:relative; height:12px; border-radius: 999px; background: rgba(255,255,255,.08); overflow:hidden; }
.status__fill{ position:absolute; left:0; top:0; bottom:0; width:0%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius: 999px; transition: width .8s ease; }
.status__meta{ display:flex; justify-content:space-between; color: var(--muted); margin-top:8px; font-size:.95rem; }
@media (max-width: 520px){ .status__meta{ flex-direction:column; gap:4px; } }

/* Modüller */
.modules{ margin-top: 14px; display: grid; gap: 10px; padding: 0; list-style: none; }
.mod{ display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 10px 12px; }
.mod__name{ font-weight: 600; }
.mod__value{ font-weight: 800; color: #e8ecf1; }
.mod__bar{ grid-column: 1 / -1; height: 8px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; }
.mod__fill{ width: 0%; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transition: width .8s ease; border-radius: 999px; }
@media (max-width: 560px){ .mod{ padding: 10px; gap: 6px 10px; } }