* {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
font-family: "Poppins";
margin: 0;
padding: 0;
}
/* =====================================================
PAGE
===================================================== */
.login-page {
position: relative;
width: 100%;
height: 100vh;
min-height: 600px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.login-background {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-image:
url('../images/bg1.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 0;
}
.login-overlay {
position: absolute;
inset: 0;
background:
rgba(255, 255, 255, .10);
z-index: 1;
pointer-events: none;
}
.login-container {
position: relative;
z-index: 2;
width: 100%;
padding: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.login-card {
width: 430px;
max-width: 100%;
padding: 38px 42px;
background:
rgba(255, 255, 255, .82);
border:
1px solid rgba(255, 255, 255, .65);
border-radius: 18px;
box-shadow:
0 15px 45px rgba(34, 105, 145, .20);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.login-logo {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
}
.login-logo img {
width: 175px;
height: auto;
object-fit: contain;
}
.login-header {
text-align: center;
margin-bottom: 28px;
}
.login-header h1 {
margin: 0;
font-size: 27px;
line-height: 1.25;
font-weight: 700;
color: #111;
}
.login-header p {
margin: 8px 0 0;
font-size: 13px;
line-height: 1.5;
color: #697984;
}
.login-error {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 18px;
padding: 10px 12px;
border:
1px solid #f0caca;
border-radius: 7px;
background:
rgba(255, 245, 245, .9);
color: #d9534f;
font-size: 12px;
}
.login-error i {
font-size: 13px;
}
.login-field {
margin-bottom: 18px;
}
.login-field label {
display: block;
margin-bottom: 7px;
font-size: 13px;
font-weight: 600;
color: #263842;
}
.login-input-wrapper {
position: relative;
width: 100%;
}
.login-input-wrapper>i {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: #8b9aa3;
font-size: 14px;
pointer-events: none;
z-index: 1;
}
.login-input-wrapper input {
width: 100%;
height: 46px;
padding:
0 45px 0 42px;
border:
1px solid rgba(145, 164, 174, .65);
border-radius: 7px;
outline: none;
background:
rgba(255, 255, 255, .78);
color: #333;
font-family: inherit;
font-size: 13px;
transition: .2s ease;
}
.login-input-wrapper input::placeholder {
color: #9ca9b0;
}
.login-input-wrapper input:hover {
border-color: #7fc8e9;
}
.login-input-wrapper input:focus {
border-color: #27b0ee;
background: rgba(255, 255, 255, .95);
box-shadow:
0 0 0 3px rgba(39, 176, 238, .12);
}
.login-toggle-password {
position: absolute;
top: 0;
right: 0;
width: 45px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: #8b9aa3;
cursor: pointer;
}
.login-toggle-password:hover {
color: #27b0ee;
}
.login-options {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 2px;
margin-bottom: 22px;
}
.login-remember {
display: flex;
align-items: center;
gap: 7px;
cursor: pointer;
color: #66757e;
font-size: 12px;
}
.login-remember input {
width: 14px;
height: 14px;
margin: 0;
accent-color: #27b0ee;
cursor: pointer;
}
.login-forgot {
color: #27b0ee;
font-size: 12px;
font-weight: 600;
text-decoration: none;
}
.login-forgot:hover {
text-decoration: underline;
}
.login-button {
width: 100%;
height: 47px;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
border: none;
border-radius: 7px;
background: #27b0ee;
color: white;
font-family: inherit;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: .2s ease;
box-shadow:
0 5px 14px rgba(39, 176, 238, .20);
}
.login-button:hover {
background: #149bd8;
transform: translateY(-1px);
box-shadow:
0 7px 18px rgba(39, 176, 238, .28);
}
.login-button i {
font-size: 12px;
transition: .2s ease;
}
.login-button:hover i {
transform: translateX(3px);
}
.login-register {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
margin-top: 22px;
font-size: 12px;
color: #7d8990;
}
.login-register a {
color: #27b0ee;
font-weight: 700;
text-decoration: none;
}
.login-register a:hover {
text-decoration: underline;
}
.login-footer {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
margin-top: 22px;
padding-top: 17px;
border-top:
1px solid rgba(150, 165, 174, .30);
font-size: 11px;
color: #929da3;
}
.login-footer i {
color: #27b0ee;
}
.login-footer a {
color: #27b0ee;
font-weight: 600;
text-decoration: none;
}
@media (max-width: 700px) {
.login-page {
min-height: 100vh;
}
.login-container {
padding: 20px;
}
.login-card {
width: 420px;
padding: 32px 28px;
border-radius: 15px;
}
.login-logo img {
width: 155px;
}
.login-header h1 {
font-size: 24px;
}
.login-header p {
font-size: 12px;
}
}
@media (max-width: 420px) {
.login-container {
padding: 15px;
}
.login-card {
padding: 28px 22px;
}
.login-options {
gap: 10px;
}
}
body {
width: 100%;
min-height: 100vh;
font-family:
'Poppins',
;
background:
url('../images/bg1.png') center center / cover no-repeat fixed;
overflow: hidden;
}
.register-overlay {
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
background:
rgba(255, 255, 255, 0.08);
}
.register-card {
width: 600px;
max-width: 100%;
max-height: 92vh;
padding: 32px 38px;
border-radius: 18px;
background:
rgba(255, 255, 255, 0.78);
border:
1px solid rgba(255, 255, 255, 0.75);
box-shadow:
0 15px 45px rgba(30, 100, 150, 0.18);
backdrop-filter:
blur(14px);
-webkit-backdrop-filter:
blur(14px);
overflow-y: auto;
}
.register-logo {
display: flex;
justify-content: center;
margin-bottom: 10px;
}
.register-logo img {
width: 165px;
height: auto;
object-fit: contain;
}
.register-title {
text-align: center;
margin-bottom: 22px;
}
.register-title h1 {
margin: 0;
font-size: 25px;
line-height: 1.25;
font-weight: 700;
color: #111;
}
.register-title p {
margin-top: 30px;
font-size: 16px;
line-height: 1.5;
color: #000000;
font-weight: 600;
}
.register-form {
display: flex;
flex-direction: column;
gap: 14px;
}
.register-field {
width: 100%;
}
.register-field label {
display: block;
margin-bottom: 6px;
font-size: 12px;
font-weight: 600;
color: #303b43;
}
.register-input-wrapper {
position: relative;
width: 100%;
}
.register-input-icon {
position: absolute;
left: 13px;
top: 50%;
transform:
translateY(-50%);
color: #8c9aa4;
font-size: 13px;
pointer-events: none;
}
.register-input {
width: 100%;
height: 43px;
padding:
0 13px 0 38px;
border:
1px solid rgba(150, 165, 175, 0.55);
border-radius: 8px;
outline: none;
background:
rgba(255, 255, 255, 0.72);
color: #333;
font-family: inherit;
font-size: 12px;
transition:
border-color .2s ease,
box-shadow .2s ease,
background .2s ease;
}
.register-input::placeholder {
color: #a5afb6;
}
.register-input:focus {
border-color: #27b0ee;
background: rgba(255, 255, 255, 0.92);
box-shadow:
0 0 0 3px rgba(39, 176, 238, 0.10);
}
.password-toggle {
position: absolute;
right: 13px;
top: 50%;
transform:
translateY(-50%);
border: none;
background: none;
color: #8c9aa4;
cursor: pointer;
font-size: 13px;
padding: 3px;
}
.password-toggle:hover {
color: #27b0ee;
}
.password-input {
padding-right: 40px;
}
.password-info {
margin-top: 5px;
font-size: 9px;
color: #89959e;
line-height: 1.4;
}
.register-button {
width: 100%;
height: 44px;
margin-top: 5px;
border: none;
border-radius: 8px;
background: #27b0ee;
color: white;
font-family: inherit;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition:
background .2s ease,
transform .2s ease,
box-shadow .2s ease;
}
.register-button:hover {
background: #149bd8;
transform: translateY(-1px);
box-shadow:
0 5px 15px rgba(39, 176, 238, 0.25);
}
.register-button:active {
transform: translateY(0);
}
.register-login {
margin-top: 17px;
text-align: center;
font-size: 11px;
color: #7c8891;
}
.register-login a {
color: #27b0ee;
font-weight: 700;
text-decoration: none;
}
.register-login a:hover {
text-decoration: underline;
}
.required {
color: #ef6c6c;
margin-left: 2px;
}
.register-card::-webkit-scrollbar {
width: 5px;
}
.register-card::-webkit-scrollbar-track {
background: transparent;
}
.register-card::-webkit-scrollbar-thumb {
background:
rgba(39, 176, 238, 0.35);
border-radius: 10px;
}
@media (max-width: 600px) {
body {
overflow: auto;
background-position:
center center;
}
.register-overlay {
min-height: 100vh;
padding: 20px 15px;
}
.register-card {
width: 100%;
max-height: none;
padding:
28px 24px;
border-radius: 15px;
}
.register-logo img {
width: 145px;
}
.register-title h1 {
font-size: 22px;
}
}
.alert-info {
margin-bottom: 15px;
padding: 12px 15px;
border-radius: 8px;
background: #ffe4e4;
color: #f23333;
font-size: 14px;
text-align: center;
}
/* =====================================================
OTP MODAL
===================================================== */
.otp-modal-overlay {
position: fixed;
inset: 0;
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
box-sizing: border-box;
background: rgba(15, 23, 42, 0.35);
/*
* Membuat halaman register di belakang
* terlihat blur.
*/
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
}
.otp-modal-overlay.show {
display: flex;
}
/* =====================================================
MODAL
===================================================== */
.otp-modal {
position: relative;
width: 100%;
max-width: 420px;
padding: 30px;
box-sizing: border-box;
background: #ffffff;
border-radius: 14px;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.18);
animation: otpModalShow 0.25s ease;
}
@keyframes otpModalShow {
from {
opacity: 0;
transform: translateY(15px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* =====================================================
CLOSE BUTTON
===================================================== */
.otp-modal-close {
position: absolute;
top: 14px;
right: 14px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 50%;
background: #f3f5f7;
color: #7d8790;
cursor: pointer;
transition: 0.2s ease;
}
.otp-modal-close:hover {
background: #e8ecef;
color: #333;
}
/* =====================================================
ICON
===================================================== */
.otp-modal-icon {
width: 58px;
height: 58px;
margin: 0 auto 15px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #e8f7ff;
color: #27b0ee;
font-size: 25px;
}
/* =====================================================
TITLE
===================================================== */
.otp-modal h2 {
margin: 0;
text-align: center;
font-size: 23px;
font-weight: 700;
color: #222;
}
.otp-modal-description {
margin: 12px 0 3px;
text-align: center;
font-size: 13px;
color: #858f99;
}
.otp-modal-email {
display: block;
text-align: center;
font-size: 14px;
color: #27b0ee;
word-break: break-word;
}
/* =====================================================
ALERT ERROR
===================================================== */
.otp-alert-error {
margin-top: 15px;
padding: 9px 12px;
border-radius: 5px;
background: #fff0f0;
color: #d9534f;
font-size: 12px;
text-align: center;
}
/* =====================================================
ALERT INFO
===================================================== */
.otp-alert-info {
margin-top: 15px;
padding: 9px 12px;
border-radius: 5px;
background: #e8f7ff;
color: #1687b8;
font-size: 12px;
text-align: center;
}
/* =====================================================
OTP FORM
===================================================== */
.otp-modal-form {
margin-top: 22px;
}
.otp-modal-form label {
display: block;
margin-bottom: 8px;
font-size: 13px;
font-weight: 600;
color: #444;
}
.otp-modal-form input {
width: 100%;
height: 44px;
padding: 0 12px;
box-sizing: border-box;
border: 1px solid #d9dfe4;
border-radius: 6px;
outline: none;
font-family: inherit;
font-size: 16px;
text-align: center;
letter-spacing: 5px;
transition: 0.2s ease;
}
.otp-modal-form input:focus {
border-color: #27b0ee;
box-shadow:
0 0 0 3px rgba(39, 176, 238, 0.1);
}
/* =====================================================
VERIFY BUTTON
===================================================== */
.otp-modal-form button {
width: 100%;
height: 44px;
margin-top: 12px;
border: none;
border-radius: 6px;
background: #27b0ee;
color: #ffffff;
font-family: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: 0.2s ease;
}
.otp-modal-form button:hover {
background: #169fdc;
}
/* =====================================================
COUNTDOWN
===================================================== */
.otp-modal-info {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
margin-top: 18px;
font-size: 16px;
color: #858f99;
}
.otp-modal-info i {
color: #27b0ee;
}
.otp-modal-info strong {
color: #27b0ee;
font-weight: 700;
font-size: 16px;
}
.otp-alert-success {
margin-top: 15px;
padding: 9px 12px;
border-radius: 5px;
background: #e8f7ff;
color: #1687b8;
font-size: 12px;
text-align: center;
}
/* =====================================================
RESEND
===================================================== */
.otp-resend {
display: inline-flex;
width: 100%;
justify-content: center;
margin-top: 12px;
text-decoration: none;
font-size: 13px;
font-weight: 600;
color: #27b0ee;
}
.otp-resend:hover {
text-decoration: underline;
}
.login-alert-success {
margin-bottom: 18px;
padding: 10px 12px;
border-radius: 5px;
background: #e8f8f0;
color: #15945c;
font-size: 12px;
text-align: center;
}
.login-alert-error {
margin-bottom: 18px;
padding: 10px 12px;
border-radius: 5px;
background: #fff0f0;
color: #d9534f;
font-size: 12px;
text-align: center;
}
.login-alert-info {
margin-bottom: 18px;
padding: 10px 12px;
border-radius: 5px;
background: #e8f7ff;
color: #1687b8;
font-size: 12px;
text-align: center;
}