/* =========================================
   Modern "Glass Pro" UI — Login/Register
   ========================================= */

/* Design tokens */
:root{
  --bg1:#0c3db1;          /* slate-900 */
  --bg2:#111827;          /* gray-900  */
  --primary:#6ea8fe;      /* soft blue */
  --primary-2:#8b5cf6;    /* violet    */
  --accent:#22d3ee;       /* cyan      */
  --card-bg:rgba(255,255,255,.08);
  --card-stroke:rgba(255,255,255,.18);
  --text-1:#e5e7eb;       /* gray-200  */
  --text-2:#9ca3af;       /* gray-400  */
  --success:#34d399;
  --error:#fb7185;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius-2:16px;
  --radius-3:22px;
  --blur:14px;
  --speed:220ms;
}

/* Reset-ish */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  padding:16px;
  display:flex;
  justify-content:center;
  align-items:center;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text-1);
  background: radial-gradient(1200px 1200px at 15% 20%, #1f2937 0%, transparent 60%),
              radial-gradient(1400px 1200px at 85% 80%, #0b1221 0%, transparent 65%),
              linear-gradient(120deg, var(--bg1), var(--bg2));
  /* Soft animated sheen */
  background-attachment: fixed;
  overflow: hidden;
}

/* Ambient animated blobs */
body::before,
body::after{
  content:"";
  position:fixed;
  width:60vmax; height:60vmax;
  filter: blur(60px);
  z-index:-1;
  opacity:.35;
  animation: floaty 18s ease-in-out infinite alternate;
}
body::before{
  background: radial-gradient(circle at 30% 30%, rgba(110,168,254,.5), transparent 55%),
              radial-gradient(circle at 70% 70%, rgba(139,92,246,.45), transparent 60%);
  top:-20vmax; left:-15vmax;
}
body::after{
  background: radial-gradient(circle at 65% 35%, rgba(34,211,238,.45), transparent 55%),
              radial-gradient(circle at 40% 80%, rgba(110,168,254,.35), transparent 60%);
  bottom:-25vmax; right:-20vmax;
  animation-delay: 1s;
}

@keyframes floaty{
  0%{ transform: translateY(-2%) translateX(-1%); }
  100%{ transform: translateY(2%) translateX(1%); }
}

/* Container */
.contain {
  width: 100%;
  max-width: 460px;
  padding: 28px 26px;
  border-radius: var(--radius-3);
  background: var(--card-bg);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow);
  border: 1px solid var(--card-stroke);
  animation: fadeIn 0.6s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Titles */
.contain > h2:first-of-type {
  margin: 0 0 12px;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-2);
}

h2 {
  text-align: center;
  margin: 12px 0 18px;
  font-size: 26px;
  font-weight: 700;
  background: linear-gradient(90deg, #64748b, #6366f1, #a78bfa);
  -webkit-background-clip: text;
  color: transparent;
}

/* Navigation */
header nav {
  display: flex;
  gap: 10px;
  margin: 8px 0 22px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid var(--card-stroke);
}
header nav a {
  flex: 1;
  text-align: center;
  text-decoration: none;
  color: var(--text-2);
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 999px;
  transition: 0.3s;
}
header nav a:hover {
  background: #fff;
  color: #3b82f6;
}
header nav a.is-active {
  background: #fff;
  color: #4f46e5;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
}

/* Form */
form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

input[type="text"],
input[type="password"] {
  padding: 12px;
  font-size: 15px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.85);
  color: #333;
  outline: none;
  transition: 0.3s;
}

input::placeholder {
  color: #999;
}

input:focus {
  background: #fff;
  box-shadow: 0 0 0 3px #c7d2fe;
}

/* Button */
button {
  background: linear-gradient(135deg, #c7d2fe, #fbcfe8);
  color: #1e293b;
  padding: 12px;
  font-size: 16px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  transition: 0.3s;
}
button:hover {
  background: linear-gradient(135deg, #a5b4fc, #f9a8d4);
  transform: translateY(-2px);
}

/* Messages */
p {
  text-align: center;
  font-size: 14px;
}
p[style*="red"] {
  color: #b91c1c !important;
  background: rgba(254, 226, 226, 0.8);
  border-radius: 10px;
  padding: 8px;
}
p[style*="green"] {
  color: #166534 !important;
  background: rgba(220, 252, 231, 0.8);
  border-radius: 10px;
  padding: 8px;
}

/* Responsive */
@media (max-width: 480px) {
  h2 { font-size: 22px; }
  header nav a { font-size: 14px; padding: 8px; }
}

  .logo {
    display:block;
    margin: 0 auto 10px;
    width: 90px;            /* ubah ikut selera */
    height: auto;
    object-fit: contain;
    border-radius: 8px;     /* opsyenal */
  }