*{box-sizing:border-box}html{min-height:100%}body{margin:0}.community-login{min-height:100vh;background:#eeb376 url('mockup/login-neighborhood.png') center center/cover fixed no-repeat;color:#0b234d;font-family:Arial,Helvetica,sans-serif}.login-stage{min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:clamp(105px,12.4vw,156px) 20px 80px}.community-card{width:min(705px,100%);position:relative;isolation:isolate;overflow:visible;border:1px solid #ffc990;border-radius:47px;background:linear-gradient(135deg,#fff 8%,#fffefa 70%,#fff8ef);box-shadow:0 25px 55px #4b230b66;min-height:965px;text-align:center}.card-content{position:relative;z-index:2;padding:0 70px 110px}.login-brand{display:flex;flex-direction:column;align-items:center;margin-top:-63px}.login-brand img{width:195px;height:195px;object-fit:contain;filter:drop-shadow(0 6px 7px #273a2a21)}.login-brand strong{font-size:clamp(34px,4vw,53px);font-weight:900;line-height:1;letter-spacing:-.04em;margin-top:0}.login-brand>span{font-size:clamp(26px,3.4vw,42px);letter-spacing:.015em;line-height:1.1}.administrasi{color:#f4591d;font-size:20px;letter-spacing:.22em;font-weight:700;display:flex;align-items:center;justify-content:center;gap:20px;margin-top:17px}.administrasi i{width:69px;height:1px;background:#ff8c4f;display:block}.community-card h1{font-size:47px;line-height:1.1;margin:48px 0 10px;font-weight:800;letter-spacing:-.04em}.login-intro{font-size:21px;line-height:1.3;color:#536783;margin:0 0 36px}.login-fields{display:grid;gap:16px}.input-row{height:74px;width:100%;display:flex;align-items:center;gap:25px;border:1.5px solid #cbd3dc;border-radius:16px;background:#fff;padding:0 25px;color:#52637c;box-shadow:inset 0 1px 4px #1c31520a}.input-row:focus-within{border-color:#ff6b35;box-shadow:0 0 0 4px #ff6b3526}.input-row svg{height:31px;width:31px;flex:0 0 31px;fill:currentColor}.input-row input{min-width:0;flex:1;height:100%;border:0;background:transparent;outline:0;color:#0b234d;font:inherit;font-size:21px}.input-row input::placeholder{color:#697b94}.show-password{border:0;background:transparent;color:#53637a;cursor:pointer;font-size:26px;width:34px;height:38px;line-height:1}.show-password:hover{color:#f4511e}.login-submit{width:100%;height:75px;border:0;border-radius:999px;background:linear-gradient(100deg,#ff4819,#ff7b24);box-shadow:0 14px 25px #f85b2340;color:#fff;font-size:25px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:17px;margin-top:19px;cursor:pointer}.login-submit:hover{filter:brightness(.96)}.login-submit svg{width:29px;height:29px}.login-or{display:flex;align-items:center;gap:26px;color:#68788d;font-size:22px;margin:28px 68px 19px}.login-or span{height:1px;background:#d7dce1;flex:1}.back-site{color:#f4511e;text-decoration:none;font-size:22px;font-weight:700;display:inline-flex;align-items:center;gap:12px}.back-site span{font-size:35px;line-height:1}.back-site:hover{text-decoration:underline}.login-error{background:#fff0ed;color:#b1281e;border:1px solid #f9c7bb;border-radius:10px;padding:10px 15px;margin:0 0 14px;text-align:left}.card-waves{position:absolute;z-index:1;left:0;right:0;bottom:0;height:102px;overflow:hidden;border-radius:0 0 46px 46px;background:linear-gradient(10deg,#ff7521,#ffb653)}.card-waves:before{content:'';position:absolute;left:-10%;bottom:35px;width:68%;height:105px;background:#fff9ee;border-radius:0 0 65% 50%;transform:rotate(14deg)}.card-waves:after{content:'';position:absolute;right:-8%;bottom:43px;width:62%;height:100px;background:#fff9ee;border-radius:0 0 55% 65%;transform:rotate(-13deg)}.card-waves div{position:absolute;inset:auto -5% -50px;height:100px;border-radius:50% 50% 0 0;background:#ff531b}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:760px){.community-login{background-attachment:scroll}.login-stage{padding:95px 15px 50px}.community-card{min-height:0;border-radius:31px}.card-content{padding:0 28px 105px}.login-brand{margin-top:-54px}.login-brand img{width:145px;height:145px}.login-brand strong{font-size:35px}.login-brand>span{font-size:27px}.administrasi{font-size:14px;gap:10px;margin-top:12px}.administrasi i{width:35px}.community-card h1{font-size:34px;margin-top:33px}.login-intro{font-size:16px;margin-bottom:25px}.input-row{height:60px;padding:0 16px;gap:15px}.input-row svg{height:24px;width:24px;flex-basis:24px}.input-row input{font-size:16px}.login-submit{height:63px;font-size:20px}.login-or{margin:22px 20px 14px;font-size:17px}.back-site{font-size:17px}.card-waves{height:78px;border-radius:0 0 30px 30px}}@media(max-width:380px){.login-brand strong{font-size:30px}.login-brand>span{font-size:23px}.card-content{padding-left:20px;padding-right:20px}.administrasi{letter-spacing:.15em}}
.login-brand img{width:300px;height:195px}@media(max-width:760px){.login-brand img{width:225px;height:145px}}
/* Keep the login composition inside one viewport. */
html,body.community-login{height:100%;overflow:hidden}
.login-stage{height:100vh;height:100dvh;min-height:0;padding:0 20px;align-items:center}
@media(max-height:1149px) and (min-width:761px){
.community-card{min-height:0}
.card-content{padding-bottom:88px}
.login-brand{margin-top:-44px}
.login-brand img{width:260px;height:155px}
.login-brand strong{font-size:46px}
.login-brand>span{font-size:35px}
.administrasi{font-size:17px;margin-top:11px}
.community-card h1{font-size:41px;margin:25px 0 8px}
.login-intro{font-size:18px;margin-bottom:22px}
.login-fields{gap:12px}
.input-row{height:61px}
.input-row input{font-size:18px}
.login-submit{height:62px;margin-top:15px;font-size:22px}
.login-or{font-size:18px;margin:18px 68px 13px}
.back-site{font-size:18px}
.card-waves{height:78px}
}
@media(max-height:900px) and (min-width:761px){
.login-brand{margin-top:-32px}
.login-brand img{width:210px;height:115px}
.login-brand strong{font-size:37px}
.login-brand>span{font-size:28px}
.administrasi{font-size:14px;margin-top:7px}
.community-card h1{font-size:34px;margin-top:15px}
.login-intro{font-size:15px;margin-bottom:15px}
.input-row{height:54px}
.login-submit{height:55px;margin-top:12px}
.login-or{font-size:16px;margin:13px 68px 9px}
.back-site{font-size:16px}
.card-content{padding-bottom:65px}
.card-waves{height:58px}
}
@media(max-width:760px){
.login-stage{padding:0 15px}
.community-card{min-height:0}
.card-content{padding:0 24px 67px}
.login-brand{margin-top:-32px}
.login-brand img{width:185px;height:112px}
.login-brand strong{font-size:30px}
.login-brand>span{font-size:23px}
.administrasi{font-size:12px;gap:8px;margin-top:7px}
.administrasi i{width:30px}
.community-card h1{font-size:29px;margin:22px 0 7px}
.login-intro{font-size:14px;margin-bottom:16px}
.login-fields{gap:10px}
.input-row{height:52px;padding:0 14px;gap:12px}
.input-row input{font-size:15px}
.login-submit{height:55px;margin-top:14px;font-size:18px}
.login-or{font-size:15px;margin:14px 14px 10px}
.back-site{font-size:16px}
.back-site span{font-size:27px}
.card-waves{height:63px}
}
@media(max-height:680px){
.community-card h1{margin-top:12px}
.login-intro{margin-bottom:10px}
.login-brand img{height:90px}
.card-content{padding-bottom:56px}
.card-waves{height:52px}
}