/* DENK — registration. Glassmorphism over a brand aurora. */

.reg-page {
  min-height: 100vh;
  background:
    radial-gradient(1100px 760px at 12% -8%, rgba(11, 90, 232, .40), transparent 55%),
    radial-gradient(940px 720px at 104% 8%, rgba(22, 214, 255, .30), transparent 52%),
    radial-gradient(1000px 860px at 60% 116%, rgba(150, 43, 240, .28), transparent 55%),
    linear-gradient(180deg, #eaf0fb 0%, #eef2fc 100%);
  position: relative;
  overflow-x: hidden;
}

/* A slow soft glow blob for depth behind the glass. */
.reg-aurora {
  position: fixed;
  inset: -20% -10% auto -10%;
  height: 70vh;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(560px 340px at 22% 30%, rgba(0, 200, 255, .38), transparent 60%),
    radial-gradient(620px 380px at 78% 20%, rgba(120, 60, 245, .30), transparent 62%);
  filter: blur(30px);
  opacity: .9;
}

/* ---- topbar as a frosted rail ---- */
.reg-page .reg-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(255, 255, 255, .58);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 1px 0 rgba(20, 50, 160, .05);
}

/* ---- brand: real DENK logo ---- */
.reg-brand { display: inline-flex; align-items: center; text-decoration: none; }
.reg-logo { height: 30px; width: auto; display: block; }

/* ---- shell + glass card ---- */
.reg-shell { position: relative; z-index: 1; max-width: 452px; margin: 56px auto 88px; padding: 0 20px; }

.reg-card {
  position: relative;
  padding: 34px 30px 28px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .62);
  backdrop-filter: blur(26px) saturate(190%);
  -webkit-backdrop-filter: blur(26px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, .70);
  box-shadow:
    0 24px 70px rgba(18, 46, 150, .22),
    0 2px 8px rgba(18, 46, 150, .08),
    inset 0 1px 0 rgba(255, 255, 255, .75);
}
/* a hairline gradient edge along the top of the card */
.reg-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, #1A46E8, #10CFFF 50%, #9A2BF0);
  opacity: .85;
}

.reg-lockup { display: block; height: 15px; width: auto; margin-bottom: 14px; }
.reg-card h1 { font-size: 24px; margin-bottom: 5px; letter-spacing: -.01em; color: #14203a; }
.reg-card .lead { color: #55607a; margin-top: 0; font-size: 13px; line-height: 1.55; }

/* ---- fields ---- */
.field { margin-top: 15px; }
.field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; color: #1c2740; }
.field input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid rgba(120, 140, 190, .38);
  background: rgba(255, 255, 255, .68);
  font-size: 14px;
  color: #14203a;
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.field input::placeholder { color: #8a93ab; }
.field input:focus {
  outline: none;
  border-color: #0B5AE8;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(11, 90, 232, .16);
}
.field small { display: block; color: #6a7492; font-size: 11.5px; margin-top: 4px; }

/* ---- primary button: parlak tok mavi ---- */
.btn-register {
  width: 100%;
  margin-top: 24px;
  padding: 13px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #1E63F5 0%, #0B4DE8 100%);
  color: #fff;
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(13, 70, 224, .38), inset 0 1px 0 rgba(255, 255, 255, .30);
  transition: transform .12s, box-shadow .15s, filter .15s;
}
.btn-register:hover { filter: brightness(1.06); box-shadow: 0 14px 32px rgba(13, 70, 224, .46), inset 0 1px 0 rgba(255, 255, 255, .30); }
.btn-register:active { transform: translateY(1px); }
.btn-register:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; filter: none; }

/* ---- messages + login link ---- */
.msg { margin-top: 14px; padding: 10px 12px; font-size: 13px; border: 1px solid rgba(120,140,190,.35); background: rgba(255,255,255,.6); border-radius: 10px; }
.msg.ok { border-color: #b7dcc7; background: #e9f5ee; color: #246347; }
.msg.err { border-color: #f0bfbc; background: rgba(248, 235, 234, .85); color: #b23a34; }

.login-link { text-align: center; margin-top: 18px; font-size: 12.5px; color: #55607a; }
.login-link a { color: #0B5AE8; font-weight: 600; text-decoration: none; }
.login-link a:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .reg-shell { margin: 32px auto 60px; }
  .reg-card { padding: 26px 20px 22px; border-radius: 16px; }
}