/* ================================================
   BISWASTO AUTH — Self-contained
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

.auth-page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem;
  background: #0b1120;
  font-family: 'Inter',-apple-system,sans-serif;
  position: relative; overflow: hidden;
}
.auth-page::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 75% 10%, rgba(0,185,165,.12) 0%, transparent 65%),
    radial-gradient(ellipse 50% 60% at 15% 90%, rgba(0,153,204,.08) 0%, transparent 65%);
}
.auth-container { position: relative; z-index: 1; width: 100%; max-width: 1040px; }
.auth-shapes { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.auth-shapes .shape { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .15; }
.auth-shapes .shape-1 { width: 400px; height: 400px; background: radial-gradient(#00b9a5,transparent); top: -160px; right: -80px; }
.auth-shapes .shape-2 { width: 440px; height: 440px; background: radial-gradient(#0099cc,transparent); bottom: -180px; left: -100px; }

/* TWO COLUMN */
.auth-wrapper {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  background: #111827;
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.07);
  position: relative; z-index: 1;
}

/* LEFT SIDEBAR */
.auth-sidebar {
  padding: 3rem 2.5rem;
  background: linear-gradient(150deg,#0a1f3a 0%,#0c2a48 60%,#081e38 100%);
  color: white; display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
.auth-sidebar::before {
  content: ''; position: absolute; top: -80px; right: -80px;
  width: 260px; height: 260px;
  background: radial-gradient(circle,rgba(0,185,165,.2) 0%,transparent 70%);
  border-radius: 50%;
}
.auth-sidebar::after {
  content: ''; position: absolute; bottom: -60px; left: -50px;
  width: 220px; height: 220px;
  background: radial-gradient(circle,rgba(0,153,204,.12) 0%,transparent 70%);
  border-radius: 50%;
}
.auth-brand {
  display: flex; align-items: center; gap: .7rem;
  font-size: 1.7rem; font-weight: 900; letter-spacing: -.04em;
  margin-bottom: 2.2rem; position: relative; z-index: 1;
}
.auth-brand i { color: #00b9a5; font-size: 1.5rem; }
.auth-brand span {
  background: linear-gradient(135deg,#00b9a5,#0099cc);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.auth-brand img { height: 38px; width: auto; filter: brightness(1.1); }

.auth-sidebar h2 { font-size: 1.85rem; font-weight: 800; line-height: 1.2; margin-bottom: .9rem; position: relative; z-index: 1; }
.auth-sidebar > p { color: rgba(255,255,255,.6); font-size: .93rem; line-height: 1.7; margin-bottom: 2rem; position: relative; z-index: 1; }

.auth-features { list-style: none; padding: 0; margin: 0; position: relative; z-index: 1; }
.auth-feature {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem 0; border-bottom: 1px solid rgba(255,255,255,.07);
  color: rgba(255,255,255,.78); font-size: .9rem;
}
.auth-feature:last-child { border-bottom: none; }
.auth-feature i { color: #00b9a5; font-size: .85rem; width: 16px; flex-shrink: 0; }

/* RIGHT FORM */
.auth-form-container {
  display: flex; align-items: center; justify-content: center;
  padding: 2.5rem 2.8rem;
}
.auth-card { width: 100%; max-width: 400px; }

.auth-header { margin-bottom: 1.8rem; }
.auth-header h1 { font-size: 2rem; font-weight: 900; letter-spacing: -.03em; color: #f1f5f9; margin-bottom: .35rem; }
.auth-header p { color: #94a3b8; font-size: .92rem; }

/* FORM */
.auth-form .form-group { margin-bottom: 1rem; }
.auth-form label {
  display: flex; align-items: center; gap: .4rem;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #94a3b8; margin-bottom: 6px;
}
.auth-form label i { font-size: 10px; color: #00b9a5; }

.auth-form .form-control {
  width: 100% !important; padding: .8rem 1rem !important;
  background: rgba(255,255,255,.05) !important;
  border: 1.5px solid rgba(255,255,255,.1) !important;
  border-radius: 10px !important; color: #f1f5f9 !important;
  font-size: .95rem; font-family: 'Inter',sans-serif;
  transition: all .2s; box-sizing: border-box;
  box-shadow: none !important;
}
.auth-form .form-control:focus {
  outline: none !important; border-color: #00b9a5 !important;
  background: rgba(0,185,165,.05) !important;
  box-shadow: 0 0 0 3px rgba(0,185,165,.12) !important;
}
.auth-form .form-control::placeholder { color: #475569 !important; }

/* Password toggle */
.password-input { position: relative; }
.password-input .form-control { padding-right: 3rem !important; }
.toggle-password {
  position: absolute; right: .75rem; top: 50%; transform: translateY(-50%);
  background: transparent; border: none; color: #64748b; cursor: pointer; font-size: 1rem; transition: .2s;
}
.toggle-password:hover { color: #00b9a5; }

/* Options */
.form-options { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; flex-wrap: wrap; gap: .5rem; }
.checkbox-label { display: flex; align-items: center; gap: .5rem; color: #94a3b8; font-size: .88rem; cursor: pointer; }
.checkbox-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: #00b9a5; cursor: pointer; }
.form-options .link,
.form-options a { color: #00b9a5; font-size: .88rem; font-weight: 600; text-decoration: none; }
.form-options a:hover { text-decoration: underline; }
.checkbox-label a { color: #00b9a5 !important; font-weight: 700; }

/* SUBMIT BUTTON */
.auth-form .btn.btn-primary.btn-block,
.auth-form button[type="submit"] {
  width: 100% !important; padding: .95rem 1.5rem !important;
  background: #00b9a5 !important; color: #0e1c36 !important;
  border: none !important; border-radius: 50px !important;
  font-size: 1rem !important; font-weight: 800 !important;
  cursor: pointer; font-family: 'Inter',sans-serif; transition: all .2s;
  display: flex !important; align-items: center !important; justify-content: center !important; gap: .5rem;
  box-shadow: 0 4px 16px rgba(0,185,165,.3); margin-top: .4rem;
  text-decoration: none;
}
.auth-form .btn.btn-primary.btn-block:hover,
.auth-form button[type="submit"]:hover {
  background: #009688 !important; transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(0,185,165,.4) !important;
}

/* Divider */
.auth-divider { display: flex; align-items: center; gap: 1rem; margin: 1.3rem 0; }
.auth-divider::before,.auth-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.07); }
.auth-divider span { font-size: .82rem; color: #475569; }

/* Social */
.social-login { display: flex; gap: .6rem; margin-bottom: 1.3rem; }
.btn-social {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem; border-radius: 8px; border: 1.5px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03); color: #94a3b8;
  font-size: .85rem; font-weight: 600; cursor: pointer; transition: .2s; font-family: 'Inter',sans-serif;
}
.btn-social:hover { border-color: rgba(255,255,255,.16); color: #f1f5f9; background: rgba(255,255,255,.05); }
.btn-google i { color: #ea4335; }
.btn-facebook i { color: #1877f2; }

/* Footer */
.auth-footer { text-align: center; margin-top: 1.2rem; }
.auth-footer p { color: #94a3b8; font-size: .9rem; }
.auth-footer .link-primary, .auth-footer a { color: #00b9a5; font-weight: 700; text-decoration: none; }
.auth-footer a:hover { text-decoration: underline; }

/* RESPONSIVE */
@media (max-width: 768px) {
  .auth-wrapper { grid-template-columns: 1fr !important; }
  .auth-sidebar { display: none !important; }
  .auth-form-container { padding: 2rem 1.5rem; }
  .auth-header h1 { font-size: 1.6rem; }
  .auth-page { padding: 1rem; align-items: flex-start; padding-top: 2rem; }
}
@media (max-width: 420px) {
  .auth-form-container { padding: 1.5rem 1.2rem; }
  .social-login { flex-direction: column; }
}