/* login.css — GOENJOY (FINAL)
   Versi: final, lengkap, rapi & modern
   Cara pakai: simpan sebagai /assets/css/login.css lalu tambahkan di <head>:
     <link rel="stylesheet" href="/assets/css/login.css">

   Catatan: kalau masih memakai inline <style nonce="..."> pada login.php,
   pindahkan header CSP agar mengizinkan stylesheet eksternal (style-src 'self').
*/

:root{
  --bg: #f7f9fc;
  --panel: #ffffff;
  --muted: #6b7280;
  --text: #0f172a;
  --brand: #0d6efd;
  --radius-lg: 16px;
  --radius-md: 10px;
  --shadow-1: 0 6px 18px rgba(15,23,42,0.06);
  --shadow-2: 0 10px 30px rgba(15,23,42,0.08);
  --glass: rgba(255,255,255,0.65);
  --gap: 12px;
  --max-width: 720px;
  --transition-fast: 160ms cubic-bezier(.2,.9,.3,1);
}

/* Dark mode support */
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b1220;
    --panel: #071025;
    --muted: #9aa4b2;
    --text: #e6eef8;
    --brand: #3b82f6;
    --glass: rgba(8,12,20,0.5);
    --shadow-1: 0 6px 18px rgba(0,0,0,0.6);
    --shadow-2: 0 12px 40px rgba(0,0,0,0.7);
  }
}

html,body{
  height:100%;
}
body{
  margin:0; font-family: Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  background: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 80%, transparent) 100%);
  color:var(--text); -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color: transparent;
  display:flex; align-items:center; justify-content:center; padding:32px;
}

.container{
  width:100%; max-width:var(--max-width);
  margin:0 auto; padding:6px; box-sizing:border-box;
}

.wrap{
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 96%, transparent) 0%, var(--panel) 100%);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-2);
  display:flex; flex-direction:column; min-height:320px;
}

/* Header */
.head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; gap:12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 94%, #ffffff) 0%, var(--brand) 100%);
  color: #fff;
}
.brand{ font-weight:700; font-size:1.05rem; letter-spacing:0.2px; }
.tag{ font-size:.87rem; opacity:.95; max-width:60%; text-align:right; }

/* Content */
.inner{ padding:28px 28px 32px; }
h1{ margin:0 0 10px; font-size:1.6rem; line-height:1.1; }
p.lead{ margin:0 0 18px; color:var(--muted); font-size:0.975rem; }

/* Buttons group */
.btns{ display:flex; flex-wrap:wrap; gap:var(--gap); margin:12px 0 8px; }
.btn{
  -webkit-tap-highlight-color: transparent;
  display:inline-flex; align-items:center; gap:12px; padding:12px 18px;
  border-radius:10px; text-decoration:none; color: #fff; font-weight:600; font-size:.98rem;
  box-shadow:var(--shadow-1); transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
  will-change: transform, box-shadow;
}
.btn:active{ transform: translateY(1px); }
.btn:focus{ outline:2px solid transparent; box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent); }
.btn .ico{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; font-size:0.95rem; }

.btn.google{ background: linear-gradient(180deg,#e34b3b,#d64436); }
.btn.google:hover{ box-shadow:0 10px 30px rgba(214,66,54,0.18); }

.btn.facebook{ background: linear-gradient(180deg,#2b6be0,#1b61f0); }
.btn.facebook:hover{ box-shadow:0 10px 30px rgba(27,97,240,0.18); }

.btn.register{ background: linear-gradient(180deg,#6b7280,#5f6670); }
.btn.register:hover{ box-shadow:0 10px 30px rgba(107,114,128,0.16); }

/* make primary full width on small screens */
@media (max-width:520px){
  .btn{ flex:1 1 100%; justify-content:center; }
  .btns{ gap:10px; }
}

/* subtle divider with textual small note */
.hr-note{
  display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--muted); font-size:.92rem;
}
.hr-note::before, .hr-note::after{
  content:''; height:1px; background:color-mix(in srgb, var(--muted) 10%, transparent); flex:1 1 auto; border-radius:4px;
}

/* User card (when logged in) */
.user-card{
  margin-top:16px; padding:14px 16px; background: linear-gradient(180deg, var(--glass), transparent);
  border-radius:var(--radius-md); border:1px solid color-mix(in srgb, var(--muted) 10%, transparent);
  box-shadow:var(--shadow-1);
}
.user-card img{ border-radius:50%; vertical-align:middle; display:inline-block; object-fit:cover; }
.user-card p{ margin:.35rem 0; }

.footer{
  padding:14px 20px; background:transparent; color:var(--muted); font-size:.92rem;
  display:flex; align-items:center; justify-content:space-between; border-top:1px solid color-mix(in srgb, var(--muted) 6%, transparent);
}
.logout{ color: #ef4444; text-decoration:none; font-weight:700; }
.logout:hover{ text-decoration:underline; }
.muted{ color:var(--muted); }

/* small helpers */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.center{ display:flex; align-items:center; justify-content:center; }

/* Accessibility: focus visible for keyboard users */
:focus-visible{ outline: 3px solid color-mix(in srgb, var(--brand) 22%, transparent); outline-offset:2px; }

/* Tiny micro-interactions */
.btn[aria-disabled="true"], .btn.disabled{ opacity:0.6; cursor:not-allowed; transform:none; box-shadow:none; }

/* Responsive spacing */
@media (max-width:880px){
  .inner{ padding:22px; }
  .head{ padding:14px 18px; }
}

@media (max-width:520px){
  body{ padding:12px; }
  .wrap{ border-radius:12px; }
  .tag{ display:none; }
}

/* Print: minimal */
@media print{
  body{ background:#fff; }
  .head, .footer{ display:none; }
  .wrap{ box-shadow:none; border-radius:0; }
}

/* Optional utility classes you can use from server-side rendering */
.text-muted{ color:var(--muted); }
.small{ font-size:.9rem; }
.large{ font-size:1.05rem; }

/* End of file */
