@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
:root{
	--bg1:#0b1020; --bg2:#071028; --glass: rgba(255,255,255,0.03);
	--accent1:#7c3aed; --accent2:#4f46e5; --muted:#98a0b3;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial;background:linear-gradient(160deg,var(--bg1) 0%, var(--bg2) 100%);color:#e6eef8;display:flex;align-items:center;justify-content:center;overflow:hidden}
.wrap{width:100%;max-width:880px}
.wrap{width:100%;max-width:980px;padding:32px}
.card{position:relative;z-index:20;margin:0 auto;background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));backdrop-filter:blur(8px);border-radius:16px;padding:48px 46px;text-align:center;box-shadow:0 30px 80px rgba(2,6,23,0.55);max-width:820px}
.logo{width:72px;height:72px;margin:0 auto 18px;border-radius:18px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.logo{width:64px;height:64px;margin:0 auto 18px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.title{margin:6px 0 12px;font-size:36px;letter-spacing:-0.02em}
.lead{margin:0 0 22px;color:var(--muted);font-size:16px}
.lead{margin:0 0 22px;color:var(--muted)}
.hero-visual{display:flex;justify-content:center;margin-bottom:20px}
.orb{width:160px;height:160px;border-radius:50%;background:radial-gradient(circle at 30% 20%, rgba(255,255,255,0.7), transparent 25%),linear-gradient(135deg,var(--accent2),var(--accent));box-shadow:0 18px 60px rgba(99,102,241,0.12);position:relative}
.orb::after{content:'';position:absolute;inset:8px;border-radius:50%;background:conic-gradient(from 180deg at 50% 50%, rgba(255,255,255,0.02), rgba(0,0,0,0.02));}
.actions{margin-bottom:10px}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;color:#fff;background:linear-gradient(90deg,var(--accent),var(--accent2));text-decoration:none;font-weight:700;border:none;cursor:pointer;transition:transform .14s ease,box-shadow .14s ease}
.btn:active{transform:translateY(1px)}
.btn{display:inline-block;padding:12px 20px;border-radius:12px;color:#fff;background:linear-gradient(90deg,var(--accent1),var(--accent2));text-decoration:none;font-weight:700;border:none;cursor:pointer;box-shadow:0 8px 30px rgba(79,70,229,0.12);transition:transform .18s cubic-bezier(.2,.9,.2,1),box-shadow .18s}
.btn:hover{transform:translateY(-4px);box-shadow:0 18px 60px rgba(79,70,229,0.16)}
.btn.primary{background:linear-gradient(90deg,var(--accent2),var(--accent1))}
.small{color:var(--muted);font-size:12px}
/* Modal farklı görünüm: yumuşak kutu, kenarlık, gölge */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(15,23,42,0.25);backdrop-filter:blur(4px);z-index:60;opacity:0;pointer-events:none;transition:opacity .18s ease}
.modal[aria-hidden="false"]{opacity:1;pointer-events:auto}
.modal-panel{background:#fff;border-radius:12px;max-width:420px;width:100%;padding:18px;border:1px solid rgba(15,23,42,0.04);box-shadow:0 18px 50px rgba(2,6,23,0.08);position:relative}
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(2,6,23,0.55);backdrop-filter:blur(6px);z-index:80;opacity:0;pointer-events:none}
.modal[aria-hidden="false"]{opacity:1;pointer-events:auto}
.modal-panel{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;max-width:420px;width:100%;padding:18px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 18px 50px rgba(2,6,23,0.6);position:relative;color:#e6eef8}
.modal-close{position:absolute;right:12px;top:8px;background:transparent;border:0;color:var(--muted);font-size:20px;line-height:1;cursor:pointer}
.modal-panel h2{margin:0 0 6px;font-size:18px}
.modal-panel .muted{color:var(--muted);font-size:13px;margin-bottom:10px}
.modal-panel input[type="email"]{width:100%;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:rgba(255,255,255,0.02);color:inherit;font-size:14px;margin-bottom:12px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end}
.form-msg{margin-top:8px;color:var(--muted);font-size:13px;min-height:18px}

@media (max-width:520px){.card{padding:22px}.title{font-size:22px}}
.modal-close{position:absolute;right:12px;top:8px;background:transparent;border:0;color:var(--muted);font-size:20px;line-height:1;cursor:pointer}
.modal-panel h2{margin:0 0 6px;font-size:18px}
.modal-panel .muted{color:var(--muted);font-size:13px;margin-bottom:10px}
.modal-panel input[type="email"]{width:100%;padding:10px 12px;border-radius:10px;border:1px solid rgba(15,23,42,0.06);background:#fff;color:inherit;font-size:14px;margin-bottom:12px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end}
.btn.primary{background:linear-gradient(90deg,var(--accent2),var(--accent));color:white;padding:10px 14px;border-radius:10px}
.form-msg{margin-top:8px;color:var(--muted);font-size:13px;min-height:18px}
/* Small screens */
@media (max-width:520px){.card{padding:22px}#countdown{flex-wrap:wrap}.time{min-width:68px}}
/* ekstra: hafif animasyon */
@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
.logo{animation:floaty 4s ease-in-out infinite}