:root { --primary-color: #557C55; --primary-dark: #3e5c3e; --bg-light: #f8f9fa; --text-dark: #4a3b2a; }
body { background: var(--bg-light); font-family: 'Poppins', sans-serif; min-height: 100vh; margin: 0; }

#login-page { width: 100%; height: 100vh; display: flex; flex-direction: column; background: #fff; }
.login-left { height: 35vh; background: linear-gradient(135deg, #557C55, #3e5c3e); display: flex; align-items: center; justify-content: center; }
.brand-text { color: white; font-size: 2rem; font-weight: bold; letter-spacing: 2px; }
.login-right { flex: 1; padding: 40px 20px; background: white; border-radius: 24px 24px 0 0; margin-top: -20px; box-shadow: 0 -5px 15px rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center; }
.login-card { width: 100%; max-width: 340px; }
.sugeng-rawuh { font-family: 'Lobster Two', cursive; font-size: 2.5rem; color: var(--text-dark); text-align: center; }
.sub-title { text-align: center; color: #888; font-size: 0.85rem; margin-bottom: 25px; }

.form-control-custom { border: 1px solid #e0e0e0; padding: 12px 15px; border-radius: 12px; background: #fbfbfb; font-size: 14px; margin-bottom: 15px; width: 100%; outline: none; }
.form-control-custom:focus { border-color: var(--primary-color); background: #fff; }
.btn-custom { background-color: var(--primary-color); color: white; border: none; padding: 12px; border-radius: 12px; font-weight: 600; width: 100%; cursor: pointer; transition: 0.3s; }
.btn-custom:hover { background-color: var(--primary-dark); }

.app-container { max-width: 450px; margin: 0 auto; background: white; min-height: 100vh; display: flex; flex-direction: column; box-shadow: 0 0 20px rgba(0,0,0,0.05); }
.avatar-placeholder { width: 40px; height: 40px; border-radius: 50%; background: #eee; display: flex; align-items: center; justify-content: center; }

/* HARDWARE REFLECTION HARDWARE ACCELERATION LINK */
.cam-area { position: relative; width: 100%; aspect-ratio: 3/4; background: #000; overflow: hidden; }
video, canvas { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); } /* LIVE PREVIEW MIRROR CSS */
.d-none { display: none !important; }