/* CSS: auth/login.php */

body { font-family: 'Inter', sans-serif; background: #111827; display: flex; align-items: center; justify-content: center; min-height: 100vh; margin: 0; padding: 20px; box-sizing: border-box; }
        .portal-container { display: flex; max-width: 900px; width: 100%; background: white; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.3); min-height: 550px; }
        .portal-visual { flex: 1; background: linear-gradient(135deg, #ea1d2c 0%, #b91c1c 100%); padding: 40px; display: flex; flex-direction: column; justify-content: space-between; color: white; position: relative; }
        .portal-visual::before { content: ''; position: absolute; top:0; left:0; width:100%; height:100%; background: url('https://img.freepik.com/free-vector/delivery-staff-ride-motorcycles-shopping-concept_1150-34879.jpg') center/cover; opacity: 0.1; mix-blend-mode: overlay; }
        .visual-content { position: relative; z-index: 2; }
        .visual-title { font-size: 32px; font-weight: 800; margin-bottom: 10px; line-height: 1.2; }
        .visual-text { font-size: 16px; opacity: 0.9; }
        .motoboy-card { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); padding: 20px; border-radius: 12px; margin-top: auto; text-align: center; }
        .btn-motoboy { display: block; background: #10b981; color: white; text-decoration: none; padding: 12px; border-radius: 8px; font-weight: 700; margin-top: 10px; transition: 0.2s; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3); }
        .btn-motoboy:hover { background: #059669; transform: translateY(-2px); }
        .portal-form { flex: 1; padding: 50px; display: flex; flex-direction: column; justify-content: center; }
        .form-title { font-size: 24px; font-weight: 800; color: #1e293b; margin-bottom: 5px; }
        .form-subtitle { color: #64748b; font-size: 14px; margin-bottom: 30px; }
        .input-group { margin-bottom: 15px; position: relative; }
        .input-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #94a3b8; }
        .form-control { width: 100%; padding: 15px 15px 15px 45px; border: 1px solid #e2e8f0; border-radius: 10px; font-size: 15px; box-sizing: border-box; transition: 0.2s; background: #f8fafc; }
        .form-control:focus { border-color: #ea1d2c; background: white; outline: none; }
        .btn-login { width: 100%; padding: 15px; background: #ea1d2c; color: white; border: none; border-radius: 10px; font-weight: 700; font-size: 16px; cursor: pointer; transition: 0.2s; }
        .btn-login:hover { background: #c01320; }
        .links { margin-top: 25px; text-align: center; font-size: 14px; color: #64748b; }
        .links a { color: #ea1d2c; text-decoration: none; font-weight: 600; }
        .alert { padding: 12px; border-radius: 8px; margin-bottom: 20px; text-align: center; font-size: 14px; }
        .alert-danger { background: #fee2e2; color: #991b1b; }
        .alert-success { background: #dcfce7; color: #166534; }
        .alert-info { background: #eff6ff; color: #1e40af; }
        @media (max-width: 768px) {
            .portal-container { flex-direction: column; min-height: auto; }
            .portal-visual { padding: 30px; }
            .portal-form { padding: 30px; }
        }