@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Nunito:wght@500;700;800&display=swap');
:root{
  --krem:#FFF8EE; --langit:#CFEFFB; --pink:#FFD6E8; --pink-kuat:#FF8FAB;
  --kuning:#FFD166; --jingga:#FFA630; --teal:#2EC4B6; --teal-tua:#22A99C;
  --teks:#3A3552; --merah:#FF6F59;
}
*{box-sizing:border-box}
body{
  margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center;
  font-family:'Nunito',Arial,sans-serif; color:var(--teks); overflow-x:hidden;
  background:
    radial-gradient(circle at 8% 15%, var(--langit) 0, transparent 40%),
    radial-gradient(circle at 92% 20%, var(--pink) 0, transparent 38%),
    radial-gradient(circle at 15% 90%, var(--kuning) 0, transparent 32%),
    radial-gradient(circle at 88% 88%, var(--teal) 0, transparent 30%),
    var(--krem);
  position:relative;
}
.simbol-mengambang{position:fixed; font-family:'Baloo 2',cursive; font-weight:700; color:var(--teal-tua);
  opacity:0.16; z-index:0; animation:mengambang 6s ease-in-out infinite; pointer-events:none; user-select:none}
@keyframes mengambang{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-18px) rotate(6deg)}}
.s1{top:8%; left:6%; font-size:54px; animation-delay:0s}
.s2{top:14%; right:8%; font-size:64px; animation-delay:1.2s; color:var(--pink-kuat)}
.s3{bottom:12%; left:10%; font-size:48px; animation-delay:2s; color:var(--jingga)}
.s4{bottom:20%; right:12%; font-size:56px; animation-delay:0.7s}
.s5{top:45%; left:3%; font-size:40px; animation-delay:2.6s; color:var(--pink-kuat)}
.s6{top:50%; right:4%; font-size:44px; animation-delay:1.8s; color:var(--jingga)}

.kartu-login{
  width:100%; max-width:420px; background:#ffffff; border-radius:28px; padding:36px 32px;
  box-shadow:0 12px 34px #0000001a; position:relative; z-index:1; text-align:center;
}
.maskot{width:110px; height:auto; margin:-72px auto 6px; display:block; filter:drop-shadow(0 6px 10px #00000022)}
h1{margin:4px 0 4px; color:var(--teal-tua); font-family:'Baloo 2',cursive; font-size:30px}
.kartu-login>p{margin-top:0; color:#6b6480; font-size:15px}
label{display:block; margin-top:16px; margin-bottom:6px; font-weight:800; text-align:left; font-size:14px; color:var(--teks)}
input{width:100%; padding:12px 14px; border:2px solid #F0E6D6; background:#FFFCF7; border-radius:16px; font-size:16px; font-family:inherit; color:var(--teks)}
input:focus{outline:none; border-color:var(--teal)}
button{width:100%; margin-top:24px; padding:14px; background:var(--jingga); color:#fff; border:0;
  border-radius:999px; font-size:17px; font-weight:800; font-family:'Baloo 2',cursive; letter-spacing:.3px;
  cursor:pointer; box-shadow:0 6px 0 #E08A1F; transition:transform .08s}
button:active{transform:translateY(4px); box-shadow:0 2px 0 #E08A1F}
.pesan-error{padding:10px 14px; border-radius:14px; background:#FFE3DE; color:#B4392C; font-weight:700}
.tautan-bawah{display:block; text-align:center; margin-top:18px; color:var(--teal-tua); text-decoration:none; font-weight:800}
.tautan-bawah:hover{text-decoration:underline}
@media (max-width:480px){.kartu-login{padding:28px 20px; border-radius:22px} .maskot{width:88px; margin-top:-58px}}