:root { --primary: #0f6a71; --primary-dark: #0b4f54; --primary-header: #6DC3BB; --primary-soft: #e4f1f1; --accent: #FA891A; --danger: #D64545; --danger-soft: #FBE8E8; --ink: #25343F; --muted: #7C8B8D; --border: #E7EDEE; --surface: #FFFFFF; --page-bg: #F4F7F7; } * { margin: 0; padding: 0; box-sizing: border-box; } /* Catatan: TIDAK men-set `overflow` pada html/body di sini. Selector ini aktif di SEMUA halaman karena file ini selalu ter-load di , jadi versi tanpa syarat akan mematikan scroll di seluruh aplikasi, bukan cuma di halaman login. .login-shell di bawah sudah membungkus dirinya sendiri dengan height:100vh + overflow:hidden, jadi itu saja sudah cukup untuk halaman ini. */ html, body { height: 100%; } body { font-family: 'Poppins', sans-serif; background: var(--page-bg); color: var(--ink); } /* ---------- Shell (fullscreen split, no outer card) ---------- */ .login-shell { height: 100vh; width: 100%; display: flex; overflow: hidden; } /* ---------- Left visual panel ---------- */ .login-visual { position: relative; flex: 0 0 46%; min-width: 0; height: 100%; padding: 5px 40px 40px 10px; border-radius: 0 10px 10px 0; background-size: cover; background-position: center; background-color: var(--primary-dark); display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; } /* The logo2.png file has built-in transparent whitespace around the circle mark, so its visible edge sits further right than the tagline text below it even though both share the same container padding. Pull the left to line its visible edge up with the tagline. Fine-tune this margin if the asset's internal padding changes. */ .login-visual__logo-img { height: 150px; width: auto; display: block; margin-left: -60px; } .login-visual__tagline { font-size: 34px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: #ffffff; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25); max-width: 90%; } /* ---------- Right form panel ---------- */ .login-form-panel { flex: 1; min-width: 0; height: 100%; display: flex; overflow-y: auto; padding: 40px; background: var(--surface); scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .login-form-panel::-webkit-scrollbar { width: 6px; } .login-form-panel::-webkit-scrollbar-track { background: transparent; } .login-form-panel::-webkit-scrollbar-thumb { background-color: var(--border); border-radius: 999px; } .login-form-panel::-webkit-scrollbar-thumb:hover { background-color: var(--primary); } .login-form-wrap { width: 100%; max-width: 340px; margin: auto; } .login-form-head { margin-bottom: 16px; } .login-back-link { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; margin-left: -12px; margin-bottom: 8px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--muted); text-decoration: none; transition: background .15s ease, color .15s ease; } .login-back-link:hover { color: var(--primary); background: var(--primary-soft); } .login-form-icon { display: block; font-size: 70px; font-weight: 700; line-height: 0.7; color: var(--accent); margin-top: 4px; margin-bottom: -4px; } .login-form-head h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; color: var(--accent); } .login-form-head p { margin-top: 8px; font-size: 13px; color: var(--muted); line-height: 1.6; } /* ---------- Form ---------- */ .login-form { display: flex; flex-direction: column; gap: 10px; } .form-group label { display: block; font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 8px; } .input-control { position: relative; display: flex; align-items: center; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); transition: border-color 0.15s ease, box-shadow 0.15s ease; } .input-control:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .input-control__icon { position: absolute; left: 14px; font-size: 13px; color: var(--muted); pointer-events: none; } .input-control input, .input-control select { width: 100%; border: none; outline: none; background: transparent; font-family: inherit; font-size: 13.5px; color: var(--ink); padding: 12px 14px 12px 40px; } .input-control select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 34px; cursor: pointer; color: var(--ink); } .input-control select:invalid { color: var(--muted); } .input-control select option { color: var(--ink); background: var(--surface); } .input-control select option:disabled { color: var(--muted); } .input-control__caret { position: absolute; right: 14px; font-size: 10px; color: var(--muted); pointer-events: none; } .input-control__toggle { position: absolute; right: 12px; border: none; background: none; cursor: pointer; color: var(--muted); font-size: 13px; padding: 4px; display: flex; align-items: center; } .input-control__toggle:hover { color: var(--primary); } .input-control--select { cursor: pointer; } .form-error { display: none; font-size: 11.5px; color: var(--danger); margin-top: 4px; } .form-error.is-visible { display: block; } .form-error--general { margin-top: -4px; background: var(--danger-soft); color: var(--danger); padding: 10px 12px; border-radius: 8px; font-weight: 500; } .form-group.has-error .input-control { border-color: var(--danger); } .form-group.has-error .input-control:focus-within { box-shadow: 0 0 0 3px var(--danger-soft); } /* ---------- Submit button ---------- */ .btn-login { margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border: none; background: var(--primary); color: #fff; font-family: inherit; font-size: 13.5px; font-weight: 600; padding: 12px 16px; border-radius: 10px; cursor: pointer; transition: background 0.15s ease; } .btn-login:hover { background: var(--primary-dark); } .btn-login:disabled { opacity: 0.7; cursor: not-allowed; } .login-footnote { margin-top: 12px; font-size: 11.5px; color: var(--muted); line-height: 1.5; text-align: center; } /* ---------- Responsive ---------- */ @media (max-width: 820px) { .login-shell { height: auto; min-height: 100vh; flex-direction: column; overflow: visible; } html, body { height: auto; overflow: auto; } .login-visual { flex: 0 0 auto; min-height: 240px; border-radius: 0 0 18px 18px; padding: 24px; } .login-visual__logo-img { height: 72px; margin-left: -30px; } .login-visual__tagline { font-size: 22px; } .login-form-panel { height: auto; padding: 32px 24px 40px; } }