/* ============================================
   ayo.ke — /assets/css/style-v2.css
   Design tokens & komponen bersama.

   Untuk halaman login & register: styling ditempel
   ke elemen yang SUDAH ada di wrapper (views/layout),
   bukan lewat pembungkus tambahan di view:
     body.login-background / body.register-background /
     body.reset-password-background / body.resend-activation-background /
     body.lost-password-background                       -> latar halaman
     .card / .card-body                                  -> kartu form
     .navbar-logo / .h3                                   -> logo/brand di atas kartu
   ============================================ */

:root{
  --color-bg:        #FFF7EA;
  --color-card:      #FFFFFF;
  --color-ink:       #1C1830;
  --color-muted:     #5B5570;

  --color-purple:    #8A6BFF;
  --color-pink:      #FF5FA2;
  --color-yellow:    #FFD23F;
  --color-mint:      #33D6A6;
  --color-orange:    #FF7A45;

  --border-w: 3px;
  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-pill: 999px;

  --font-display:'Fredoka', system-ui, sans-serif;
  --font-body:'Plus Jakarta Sans', system-ui, sans-serif;
}

/* ============================================
   LATAR HALAMAN LOGIN & REGISTER
   ditempel lewat class body yang wrapper sudah kasih otomatis
   ============================================ */
body.login-background,
body.register-background,
body.reset-password-background,
body.resend-activation-background,
body.lost-password-background{
  background-color:var(--color-bg);
  background-image:
    radial-gradient(closest-side, rgba(51,214,166,.30), transparent 70%),
    radial-gradient(closest-side, rgba(138,107,255,.22), transparent 70%);
  background-repeat:no-repeat;
  background-position:-120px -120px, calc(100% + 120px) calc(100% + 120px);
  background-size:520px 520px, 560px 560px;
  background-attachment:fixed;
  font-family:var(--font-body);
  color:var(--color-ink);
}

body.login-background .navbar-logo,
body.register-background .navbar-logo,
body.reset-password-background .navbar-logo,
body.resend-activation-background .navbar-logo,
body.lost-password-background .navbar-logo{
  max-height:46px;
}
body.login-background span.h3,
body.register-background span.h3,
body.reset-password-background span.h3,
body.resend-activation-background span.h3,
body.lost-password-background span.h3{
  font-family:var(--font-display); font-weight:600; color:var(--color-ink);
}

/* ============================================
   KARTU FORM — pakai .card bawaan wrapper
   ============================================ */
body.login-background .card,
body.register-background .card,
body.reset-password-background .card,
body.resend-activation-background .card,
body.lost-password-background .card{
  position:relative;
  background:var(--color-card);
  border:var(--border-w) solid var(--color-ink);
  border-radius:var(--radius-lg);
  box-shadow:8px 8px 0 var(--color-ink);
  overflow:hidden;
}

/* blob dekorasi kecil di pojok kartu, senada dengan hero index.html */
body.login-background .card::before,
body.register-background .card::before,
body.reset-password-background .card::before,
body.resend-activation-background .card::before,
body.lost-password-background .card::before{
  content:'';
  position:absolute; top:-50px; right:-50px; width:150px; height:150px;
  background:var(--color-mint); opacity:.35;
  border-radius:42% 58% 65% 35% / 45% 40% 60% 55%;
  pointer-events:none; z-index:0;
}

body.login-background .card-body,
body.register-background .card-body,
body.reset-password-background .card-body,
body.resend-activation-background .card-body,
body.lost-password-background .card-body{
  position:relative; z-index:1;
}

@media (max-width:520px){
  body.login-background .card,
  body.register-background .card,
  body.reset-password-background .card,
  body.resend-activation-background .card,
  body.lost-password-background .card{ box-shadow:6px 6px 0 var(--color-ink); }
}

/* ============================================
   ISI FORM (dipakai di dalam view login/register)
   ============================================ */
.ayo-badge{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--color-yellow); color:var(--color-ink);
  font-family:var(--font-display); font-weight:600; font-size:12.5px;
  padding:7px 14px; border-radius:var(--radius-pill);
  border:2.5px solid var(--color-ink);
  transform:rotate(-3deg);
  margin-bottom:18px;
}

.ayo-title{
  font-family:var(--font-display); font-weight:600;
  font-size:24px; line-height:1.25; margin:0 0 28px;
  color:var(--color-ink);
}

.ayo-alerts .alert{
  border:2.5px solid var(--color-ink); border-radius:14px;
  padding:13px 16px; font-size:13.5px; font-weight:600;
  margin-bottom:18px;
}
.ayo-alerts .alert-danger{ background:#FFE3ED; }
.ayo-alerts .alert-success{ background:#DFFBF1; }
.ayo-alerts .alert-warning{ background:#FFF3CF; }
.ayo-alerts .alert-info{ background:#EDE8FF; }

.ayo-field{ margin-bottom:18px; }
.ayo-label{ display:block; font-weight:700; font-size:13.5px; margin-bottom:7px; color:var(--color-ink); }
.ayo-input{
  width:100%; font-family:inherit; font-size:15px;
  padding:13px 16px; color:var(--color-ink);
  background:#fff; border:var(--border-w) solid var(--color-ink);
  border-radius:var(--radius-md);
  transition:box-shadow .12s ease, transform .12s ease;
}
.ayo-input::placeholder{ color:#B7AFC9; }
.ayo-input:focus{ outline:none; box-shadow:4px 4px 0 var(--color-purple); }
.ayo-input.is-invalid{ border-color:var(--color-pink); background:#FFF6FA; }
.ayo-error, .invalid-feedback{
  display:block; color:var(--color-pink); font-weight:700;
  font-size:12.5px; margin-top:6px;
}

.ayo-row-between{
  display:flex; flex-wrap:wrap; gap:10px 16px;
  justify-content:space-between; align-items:center;
  margin-top:4px;
}
.ayo-links-muted{ font-size:12.5px; color:var(--color-muted); font-weight:600; }
.ayo-links-muted a{ text-decoration:none; }
.ayo-links-muted a:hover{ color:var(--color-ink); text-decoration:underline; }

.ayo-checkbox{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; color:var(--color-muted); font-weight:600; }
.ayo-checkbox input{ position:absolute; opacity:0; width:0; height:0; }
.ayo-checkbox-box{
  width:20px; height:20px; border-radius:6px; flex-shrink:0;
  border:2.5px solid var(--color-ink); background:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  position:relative; transition:background .15s ease;
}
.ayo-checkbox-box::after{
  content:''; position:absolute; left:5px; top:1px;
  width:5px; height:9px;
  border:solid var(--color-ink); border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg) scale(0); transition:transform .12s ease;
}
.ayo-checkbox input:checked + .ayo-checkbox-box{ background:var(--color-yellow); }
.ayo-checkbox input:checked + .ayo-checkbox-box::after{ transform:rotate(45deg) scale(1); }
.ayo-checkbox input:focus-visible + .ayo-checkbox-box{ outline:3px solid var(--color-purple); outline-offset:2px; }

.ayo-captcha{ margin-top:18px; }

.ayo-btn{
  display:flex; width:100%; align-items:center; justify-content:center; gap:8px;
  cursor:pointer; font-weight:700; font-size:15px; font-family:inherit;
  border-radius:var(--radius-pill);
  padding:14px 24px;
  border:var(--border-w) solid var(--color-ink);
  box-shadow:4px 4px 0 var(--color-ink);
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  text-decoration:none;
}
.ayo-btn:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--color-ink); }
.ayo-btn[disabled]{ opacity:.55; cursor:not-allowed; }
.ayo-btn-primary{ background:var(--color-pink); color:#fff; margin-top:26px; }
.ayo-btn-social{ background:#fff; color:var(--color-ink); margin-top:10px; box-shadow:3px 3px 0 var(--color-ink); font-size:14px; }
.ayo-btn-social img{ width:19px; height:19px; }

.ayo-divider{
  display:flex; align-items:center; gap:12px;
  margin:28px 0 4px; font-size:12px; font-weight:700;
  color:var(--color-muted); text-transform:uppercase; letter-spacing:.03em;
}
.ayo-divider::before, .ayo-divider::after{ content:''; flex:1; height:2px; background:var(--color-ink); opacity:.12; }

.ayo-footer-note{
  margin-top:30px; text-align:center; font-size:14px; color:var(--color-muted);
}
.ayo-footer-note a{ font-weight:800; text-decoration:none; color:var(--color-ink); }
.ayo-footer-note a:hover{ text-decoration:underline; }