.auth-body {
  margin: 0; min-height: 100vh; color: #eaf4f8;
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  background: #061018;
  overflow-x: hidden;
}
.auth-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(700px 380px at 12% 10%, rgba(16, 185, 129, .32), transparent 58%),
    radial-gradient(640px 360px at 88% 80%, rgba(14, 165, 233, .28), transparent 55%),
    radial-gradient(500px 280px at 50% 50%, rgba(251, 191, 36, .08), transparent 50%);
}
.auth-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 44px 44px;
  animation: authGrid 22s linear infinite;
}
@keyframes authGrid {
  from { background-position: 0 0, 0 0; }
  to { background-position: 44px 44px, 44px 44px; }
}
.auth-orb {
  position: absolute; border-radius: 50%; filter: blur(64px); opacity: .55;
  animation: authDrift 14s ease-in-out infinite;
}
.auth-orb-a { width: 340px; height: 340px; background: #10b981; top: -80px; left: -60px; }
.auth-orb-b { width: 300px; height: 300px; background: #0ea5e9; right: -40px; bottom: -40px; animation-delay: -5s; }
.auth-ring {
  position: absolute; border-radius: 50%; border: 1px solid rgba(94, 234, 212, .22);
  animation: authSpin 28s linear infinite;
}
.auth-ring-1 { width: 420px; height: 420px; left: 8%; top: 18%; }
.auth-ring-2 { width: 280px; height: 280px; left: 14%; top: 26%; animation-direction: reverse; animation-duration: 18s; border-color: rgba(56, 189, 248, .2); }
.auth-spark {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: #5eead4; box-shadow: 0 0 12px #5eead4;
  animation: authSpark 4.5s ease-in-out infinite;
}
.auth-spark:nth-child(6) { left: 18%; top: 22%; animation-delay: 0s; }
.auth-spark:nth-child(7) { left: 28%; top: 62%; animation-delay: 1.2s; background: #38bdf8; }
.auth-spark:nth-child(8) { left: 12%; top: 78%; animation-delay: 2s; }
.auth-spark:nth-child(9) { right: 12%; top: 18%; animation-delay: .6s; background: #fbbf24; }
@keyframes authDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(36px, -24px) scale(1.08); }
}
@keyframes authSpin { to { transform: rotate(360deg); } }
@keyframes authSpark {
  0%, 100% { opacity: .2; transform: translateY(0) scale(.7); }
  50% { opacity: 1; transform: translateY(-18px) scale(1.2); }
}

.auth-shell {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: grid; grid-template-columns: 1.05fr .95fr;
  max-width: 1180px; margin: 0 auto; padding: 28px 24px;
  align-items: center; gap: 28px;
}
.auth-aside { padding: 12px 8px 12px 18px; animation: authRise .7s ease both; }
.auth-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; margin-bottom: 28px; }
.auth-brand small { display: block; color: #8fb3c4; font-size: 12px; }
.auth-aside h1 {
  margin: 0 0 12px; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.12;
  letter-spacing: -.03em; color: #fff;
}
.auth-aside h1 em {
  font-style: normal;
  background: linear-gradient(90deg, #5eead4, #38bdf8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.auth-aside p { color: #9db8c6; max-width: 42ch; margin: 0 0 22px; }
.auth-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.auth-chips span {
  border: 1px solid rgba(94, 234, 212, .28); border-radius: 999px; padding: 7px 12px;
  background: rgba(16, 185, 129, .1); font-size: 13px; font-weight: 650;
  animation: authFloat 5s ease-in-out infinite;
}
.auth-chips span:nth-child(2) { animation-delay: -.8s; }
.auth-chips span:nth-child(3) { animation-delay: -1.6s; }
.auth-chips span:nth-child(4) { animation-delay: -2.4s; }
@keyframes authFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.auth-panel {
  width: min(520px, 100%);
  justify-self: end;
  background: rgba(10, 24, 34, .72);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  padding: 26px 24px 22px;
  backdrop-filter: blur(18px);
  box-shadow: 0 30px 70px rgba(0,0,0,.35), 0 0 0 1px rgba(94, 234, 212, .08) inset;
  animation: authCard 0.9s cubic-bezier(.2, .8, .2, 1) both;
  position: relative; overflow: hidden;
  transition: transform .18s ease;
}
.auth-panel::before {
  content: ""; position: absolute; inset: -45% -25%;
  background: conic-gradient(from 180deg, transparent 55%, rgba(52, 211, 153, .5), rgba(56, 189, 248, .5), transparent 78%);
  animation: authSpin 8s linear infinite;
  pointer-events: none;
  opacity: .5;
}
.auth-panel > * { position: relative; z-index: 1; }
@keyframes authCard {
  from { opacity: 0; transform: translateY(28px) scale(.96); }
  to { opacity: 1; transform: none; }
}
.auth-panel h2 { margin: 0 0 6px; color: #fff; font-size: 1.45rem; }
.auth-panel .muted { color: #8fb3c4; font-size: 13px; margin: 12px 0 0; }
.pay-iyzico { margin-top: 8px; min-height: 380px; }
.pay-iyzico iframe { width: 100% !important; min-height: 380px; border: 0; }
.plan-picks {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin: 0 0 16px;
}
.plan-box {
  display: grid;
  gap: 4px;
  cursor: pointer;
  padding: 14px 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(7, 18, 26, .72);
  color: #dbeafe;
  position: relative;
  min-height: 0;
  overflow: visible;
  align-content: start;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.plan-box input {
  position: absolute; opacity: 0; pointer-events: none;
}
.plan-box .plan-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #7dd3fc;
}
.plan-box strong { font-size: 1.02rem; color: #fff; }
.plan-box em { font-style: normal; font-weight: 750; color: #5eead4; font-size: 14px; }
.plan-box small { color: #8fb3c4; font-size: 12px; line-height: 1.4; display: block; }
.plan-box:hover { border-color: rgba(94, 234, 212, .45); transform: translateY(-1px); }
.plan-box:has(input:checked),
.plan-box.is-on {
  border-color: #34d399;
  box-shadow: 0 0 0 2px rgba(52, 211, 153, .28), 0 12px 28px rgba(0,0,0,.25);
  background: rgba(16, 185, 129, .12);
}
.auth-panel p { margin: 0 0 12px; }
.auth-panel label { color: #9db8c6; }
.auth-panel .input, .auth-panel select {
  background: rgba(7, 18, 26, .85); border-color: #234150; color: #eaf4f8;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.auth-panel .input:focus, .auth-panel select:focus {
  border-color: #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, .22);
  transform: translateY(-1px);
}
.auth-field { animation: authRise .6s ease both; }
.auth-panel p.auth-field:nth-of-type(1) { animation-delay: .08s; }
.auth-panel p.auth-field:nth-of-type(2) { animation-delay: .14s; }
.auth-panel p.auth-field:nth-of-type(3) { animation-delay: .2s; }
.auth-panel p.auth-field:nth-of-type(4) { animation-delay: .26s; }
.auth-panel p.auth-field:nth-of-type(5) { animation-delay: .32s; }
@keyframes authRise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.auth-submit {
  width: 100%; margin-top: 6px;
  background: linear-gradient(135deg, #10b981, #0ea5e9) !important;
  border: 0; position: relative; overflow: hidden;
  box-shadow: 0 12px 28px rgba(14, 165, 233, .32);
  animation: authPulse 2.8s ease-in-out infinite;
}
.auth-submit::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28), transparent 70%);
  transform: translateX(-120%);
  animation: authShine 2.8s ease-in-out infinite;
}
@keyframes authShine {
  0%, 55% { transform: translateX(-120%); }
  80%, 100% { transform: translateX(120%); }
}
@keyframes authPulse {
  0%, 100% { box-shadow: 0 12px 28px rgba(14, 165, 233, .32); }
  50% { box-shadow: 0 14px 34px rgba(16, 185, 129, .45); }
}
.auth-links { text-align: center; margin-top: 14px !important; }
.auth-links a { color: #7dd3fc; text-decoration: none; }
.auth-links a:hover { color: #fff; }
.auth-alert { animation: authShake .4s ease; }

@keyframes authShake {
  0%, 100% { transform: none; }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; padding: 20px 16px 32px; }
  .auth-panel { justify-self: stretch; width: auto; }
  .plan-picks { grid-template-columns: 1fr; }
  .auth-ring, .auth-spark { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-grid, .auth-orb, .auth-ring, .auth-spark, .auth-chips span,
  .auth-panel, .auth-panel::before, .auth-field, .auth-submit, .auth-submit::after {
    animation: none !important;
  }
}