.login-container{min-height:100vh;position:relative;overflow:hidden}.login-background{position:absolute;inset:0;background-image:url(https://libraries.bersan.id/loginbg/3-01.png);background-size:cover;background-position:50%;background-repeat:no-repeat}.login-content{position:relative;z-index:10;display:flex;min-height:100vh}.brand-section{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem}.brand-content{max-width:32rem;color:white}.brand-logos{display:flex;align-items:center;margin-bottom:2rem;gap:1.5rem}.brand-logo{height:auto;filter:brightness(0) invert(1)}.brand-title{font-size:4rem;font-weight:700;margin-bottom:1.5rem;line-height:1.1;letter-spacing:.05em}.brand-subtitle{font-size:1.25rem;margin-bottom:1rem;font-weight:300;line-height:1.4}.brand-description{font-size:1.125rem;opacity:.9;line-height:1.6}.form-section{width:100%;max-width:28rem;display:flex;align-items:center;justify-content:center;padding:2rem}.form-container{width:100%;max-width:24rem}.form-card{backdrop-filter:blur(16px);background:rgba(255,255,255,.1);border-radius:1rem;padding:2rem;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.2)}.form-title{color:white;font-size:1.875rem;font-weight:600;text-align:center;margin-bottom:2rem}.input-group{margin-bottom:1.5rem}.input-label{display:block;color:white;font-size:.875rem;font-weight:500;margin-bottom:.5rem}.input-container{position:relative}.input-icon{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.6);width:1.25rem;height:1.25rem;pointer-events:none}.input-field{width:100%;padding:.75rem .75rem .75rem 3rem;background:rgba(255,255,255,.2);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.3);border-radius:.75rem;color:white;font-size:.875rem;transition:all .2s ease}.input-field::placeholder{color:rgba(255,255,255,.6)}.input-field:focus{outline:none;border-color:rgba(59,130,246,.8);box-shadow:0 0 0 2px rgba(59,130,246,.5)}.input-error{border-color:rgba(239,68,68,.8)}.error-message{margin-top:.25rem;font-size:.75rem;color:rgba(252,165,165,.9)}.form-options{justify-content:space-between;margin-bottom:1.5rem}.checkbox-container,.form-options{display:flex;align-items:center}.checkbox-input{width:1rem;height:1rem;margin-right:.5rem;accent-color:rgb(59,130,246)}.checkbox-label,.forgot-password{font-size:.875rem;color:rgba(255,255,255,.9)}.forgot-password{text-decoration:underline;transition:color .2s ease}.forgot-password:hover{color:white}.action-button{width:100%;padding:.75rem 1rem;background:linear-gradient(90deg,rgb(59,130,246),rgb(37,99,235));color:white;font-weight:600;border:none;border-radius:.75rem;cursor:pointer;transition:all .2s ease;transform:translateY(0)}.action-button:hover:not(:disabled){background:linear-gradient(90deg,rgb(37,99,235),rgb(29,78,216));transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.15)}.action-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.loading-spinner{display:inline-block;width:1rem;height:1rem;border:2px solid rgba(255,255,255,.3);border-top-color:white;border-radius:50%;animation:spin 1s linear infinite;margin-right:.5rem}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.divider{position:relative;margin:1.5rem 0}.divider:before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:rgba(255,255,255,.2)}.divider-text{position:relative;font-size:.875rem;color:rgba(255,255,255,.6);background:transparent;padding:0 .5rem}.divider-text,.google-button{display:flex;justify-content:center}.google-button{width:100%;padding:.75rem 1rem;background:rgba(255,255,255,.1);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.3);color:white;font-weight:500;border-radius:.75rem;cursor:pointer;transition:all .2s ease;align-items:center;margin-bottom:1.5rem}.google-button:hover{background:rgba(255,255,255,.2)}.google-icon{width:1.25rem;height:1.25rem;margin-right:.5rem}.signup-link{text-align:center;color:rgba(255,255,255,.8);font-size:.875rem}.signup-link a{color:white;font-weight:500;text-decoration:underline}.signup-link a:hover{text-decoration:none}@media (max-width:768px){.login-content{flex-direction:column}.brand-section{padding:1rem}.brand-title{font-size:2.5rem}.form-section{padding:1rem}.form-card{padding:1.5rem}}.form-slide{height:100%;transform:translateX(0)}.back-button{color:#666}.back-button:hover{color:#000;background-color:#f3f4f6}.forgot-password-description{color:#666}.form-slider{position:relative;width:100%;height:100%;overflow:hidden}.form-slide{position:absolute;top:0;left:0;width:100%;height:100%!important;transition:transform .4s cubic-bezier(.4,0,.2,1)}.slide-in-right{transform:translateX(0);visibility:visible}.slide-out-left{transform:translateX(-100%);visibility:hidden}.slide-out-right{transform:translateX(100%);visibility:hidden}.forgot-password-header{display:flex;align-items:center;margin-bottom:1rem;position:relative}.back-button{position:absolute;left:0;top:50%;transform:translateY(-50%);background:none;border:none;font-size:1.5rem;cursor:pointer;color:white;transition:color .3s ease;padding:.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center}.back-button:hover{background-color:rgba(255,255,255,.1)}.forgot-password-header .form-title{margin:0 auto;text-align:center;flex:1}.forgot-password-description{text-align:center;color:rgba(255,255,255,.8);margin-bottom:2rem;font-size:.9rem;line-height:1.5}@media (max-width:768px){.form-slider{min-height:500px}.forgot-password-header .form-title{font-size:1.5rem}.forgot-password-description{font-size:.85rem;padding:0 1rem}}