/* ================= GLOBAL RESET ================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Arial, sans-serif;
  }

/* ================= BODY ================= */
body {
background: linear-gradient(135deg, #e3f2fd, #ffffff);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}

/* ================= CONTAINER LOGIN ================= */
.container {
position: relative;
isolation: isolate; /* ? FIX */
width: 820px;
max-width: 95%;
min-height: 480px;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
overflow: hidden;
}

/* ================= FORM CONTAINER ================= */
.form-container {
position: absolute;
top: 0;
height: 100%;
width: 50%;
padding: 40px;
transition: all 0.6s ease-in-out;

```
display: flex;
justify-content: center;
align-items: center;

z-index: 200; /* ? FIX */
```

}

/* LOGIN */
.sign-in-container {
left: 0;
z-index: 2;
}

/* REGISTER (default hidden) */
.sign-up-container {
left: 50;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 1;
}

/* Saat register aktif */
.container.right-panel-active .sign-up-container {
transform: translateX(100%);
opacity: 1;
visibility: visible;
pointer-events: auto;
z-index: 5;
}

/* Saat register aktif ? login disembunyikan */
.container.right-panel-active .sign-in-container {
transform: translateX(100%);
opacity: 0;
visibility: hidden;
pointer-events: none;
}

/* ================= FORM ================= */
form {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}

form h1 {
color: #0d47a1;
margin-bottom: 15px;
font-size: 30px;
}

form p {
margin-bottom: 20px;
color: #555;
}

/* ================= INPUT ================= */
input {
background: #f5f7fa;
border: 1px solid #ddd;
padding: 14px 16px;
margin: 10px 0;
width: 100%;
border-radius: 10px;
font-size: 15px;
}

input:focus {
outline: none;
border-color: #1976d2;
}

/* ================= BUTTON ================= */
button {
border-radius: 30px;
border: none;
background: linear-gradient(to right, #ff9800, #f57c00);
color: #ffffff;
font-size: 15px;
font-weight: bold;
padding: 14px;
margin-top: 20px;
cursor: pointer;
transition: 0.3s ease;
}

button:hover {
opacity: 0.9;
transform: scale(1.03);
}

/* ================= PASSWORD TOGGLE ================= */
.password-wrapper {
position: relative;
}

.password-wrapper input {
padding-right: 45px;
}

.toggle-password {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
font-size: 18px;
opacity: 0.6;
}

.toggle-password:hover {
opacity: 1;
}

/* ================= MESSAGE ================= */
.error {
color: #d32f2f;
margin-bottom: 10px;
font-size: 14px;
}

/* ================= OVERLAY ================= */
.overlay-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
z-index: 1; /* ? FIX */
transition: transform 0.6s ease-in-out;
}

.container.right-panel-active .overlay-container {
transform: translateX(-100%);
}

.overlay {
background: linear-gradient(135deg, #1565c0, #0d47a1);
color: #ffffff;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transition: transform 0.6s ease-in-out;
}

.container.right-panel-active .overlay {
transform: translateX(50%);
}

.overlay-panel {
position: absolute;
width: 50%;
height: 100%;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}

.overlay-panel h1 {
font-size: 32px;
margin-bottom: 15px;
}

.overlay-left {
transform: translateX(-20%);
}

.container.right-panel-active .overlay-left {
transform: translateX(0);
}

.overlay-right {
right: 0;
}

.overlay img {
max-width: 120px;
margin-bottom: 20px;
}

.overlay-panel button {
background: transparent;
border: 2px solid #ffffff;
padding: 14px 40px;
border-radius: 30px;
margin-top: 25px;
}

/* ================= LINKS ================= */
.forgot-link {
margin-top: 10px;
font-size: 14px;
color: #1565c0;
text-decoration: none;
}

.forgot-link:hover {
text-decoration: underline;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 768px) {

```
body {
    align-items: flex-start;
    padding: 20px 10px;
}

.overlay-container {
    display: none;
}

.form-container {
    width: 100%;
    position: relative;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
```

}

/* ===== REGISTER LAYOUT FIX ===== */

.logo-group {
display: flex;
justify-content: center;
align-items: center;
gap: 18px;
margin-bottom: 20px;
}

.logo-group img {
height: 48px;
width: auto;
object-fit: contain;
}

.overlay-panel p {
font-size: 14px;
line-height: 1.6;
max-width: 260px;
}